/* IGS v0.41.1 — viewport-safe responsive shell
   This layer intentionally loads after app.css and list-system.css. It owns only
   cross-device geometry: safe areas, visible viewport, overflow containment,
   touch sizing and common responsive fallbacks. Domain visual design remains in
   each module stylesheet. */
:root {
    --igs-vv-height: 100dvh;
    --igs-vv-width: 100vw;
    --igs-vv-offset-top: 0px;
    --igs-vv-offset-left: 0px;
    --igs-vv-bottom-gap: 0px;
    --igs-vv-right-gap: 0px;
    --igs-safe-top: env(safe-area-inset-top, 0px);
    --igs-safe-right: env(safe-area-inset-right, 0px);
    --igs-safe-bottom: env(safe-area-inset-bottom, 0px);
    --igs-safe-left: env(safe-area-inset-left, 0px);
    --igs-account-trigger-clearance: 80px;
}

html,
body,
#page,
#main,
#content,
#content-main {
    min-width: 0;
    max-width: 100%;
}

#main > [class~="@container"],
#content > *,
#content-main > * {
    min-width: 0;
}

#content img,
#content video,
#content canvas,
.portal-main img,
.portal-main video,
.portal-main canvas {
    height: auto;
    max-width: 100%;
}

#content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#content select,
#content textarea,
.portal-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.portal-main select,
.portal-main textarea {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

/* Native/custom table surfaces scroll inside their own region instead of making
   the whole application wider than the viewport. Financial/transaction tables
   intentionally stay tabular because column comparison is operationally useful. */
.change-list .results,
.inline-group .tabular,
.igs-list-table-wrap,
.igs-list-static-wrap,
.irangs-table-wrap,
.workspace-control__table-wrap,
.commerce-table-wrap,
.portal-table-wrap,
.invoice-preview-table-wrap,
.irangs-invoice-lines__table-wrap {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    overscroll-behavior-inline: contain;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Account management is a body-level portal. Never let a sidebar, transform,
   overflow container or application panel become its containing block. */
.irangs-account-layer {
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 12001;
}

.irangs-account-backdrop {
    background: transparent;
    border: 0;
    display: none;
    inset: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    position: fixed;
    width: 100%;
}

.irangs-account-popover {
    bottom: calc(
        var(--igs-vv-bottom-gap, 0px)
        + max(10px, var(--igs-safe-bottom))
        + var(--igs-account-trigger-clearance)
    );
    box-sizing: border-box;
    left: auto !important;
    max-height: min(
        680px,
        calc(
            var(--igs-vv-height, 100dvh)
            - var(--igs-account-trigger-clearance)
            - max(12px, var(--igs-safe-top))
            - max(10px, var(--igs-safe-bottom))
            - 18px
        )
    );
    max-width: calc(var(--igs-vv-width, 100vw) - max(24px, var(--igs-safe-left)) - max(24px, var(--igs-safe-right)));
    min-width: 0;
    overflow: hidden;
    pointer-events: auto;
    position: fixed !important;
    right: max(12px, var(--igs-safe-right)) !important;
    top: auto !important;
    transform: none !important;
    width: min(360px, calc(var(--igs-vv-width, 100vw) - 24px));
    z-index: 12002;
}

.irangs-account-popover__scroll {
    -webkit-overflow-scrolling: touch;
    max-height: inherit;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 2px;
    scrollbar-gutter: stable;
}

.irangs-account-popover__scroll > a,
.irangs-account-popover__scroll > button,
.irangs-account-popover__scroll > form,
.irangs-account-popover__scroll > div {
    max-width: 100%;
}

.irangs-navigation-user {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-bottom: calc(.75rem + var(--igs-safe-bottom));
}

.irangs-account-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    color: inherit;
    font: inherit;
}

/* Popovers already fixed elsewhere now use the same visible-viewport variables.
   This also keeps them away from mobile browser bars and software keyboards. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    #nav-sidebar {
        bottom: auto !important;
        height: var(--igs-vv-height, 100dvh) !important;
        max-height: var(--igs-vv-height, 100dvh) !important;
        top: var(--igs-vv-offset-top, 0px) !important;
    }

    #nav-sidebar-inner {
        height: 100%;
        min-height: 100%;
    }

    .igs-list-column-picker__menu {
        left: max(12px, var(--igs-safe-left));
        right: max(12px, var(--igs-safe-right));
        max-height: calc(
            var(--igs-vv-height, 100dvh)
            - 72px
            - var(--igs-safe-top)
            - var(--igs-safe-bottom)
            - 20px
        );
        min-width: 0;
        position: fixed;
        top: calc(var(--igs-vv-offset-top, 0px) + 72px + var(--igs-safe-top)) !important;
        width: auto;
    }

    .commerce-sticky-actions,
    .jango-wizard-actions,
    .portal-account-actions--sticky {
        bottom: calc(var(--igs-vv-bottom-gap, 0px) + var(--igs-safe-bottom));
    }
}

/* Tablet: preserve information density, but never force a two-column surface
   beyond the available stage width. */
@media (max-width: 1024px) {
    #main > [class~="@container"] {
        padding-inline: 14px !important;
    }

    .irangs-profile-layout,
    .irangs-two-column,
    .mydesk-grid,
    .workspace-control__layout,
    .commerce-detail-grid,
    .invoice-preview-footer {
        min-width: 0;
    }

    .irangs-profile-side,
    .workspace-control__layout > *,
    .commerce-detail-grid > *,
    .invoice-preview-footer > * {
        min-width: 0;
    }

    .project-kanban,
    .gantt-scroll,
    .gantt-timeline,
    .commerce-table-wrap,
    .irangs-invoice-lines__table-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
}

/* Phone / narrow tablet shell. */
@media (max-width: 760px) {
    :root { --igs-account-trigger-clearance: 76px; }

    #main > [class~="@container"] {
        padding-inline: 10px !important;
        padding-bottom: max(12px, var(--igs-safe-bottom)) !important;
    }

    .irangs-global-header {
        margin-bottom: 10px !important;
        padding-inline: 8px !important;
        padding-top: var(--igs-safe-top) !important;
    }

    .irangs-global-header [class~="container"] {
        max-width: 100%;
        min-width: 0;
        padding-inline: 0;
        width: 100%;
    }

    .irangs-global-header__inner {
        align-items: center;
        gap: 5px;
        justify-content: space-between;
        min-width: 0;
        width: 100%;
    }

    .irangs-global-header__account {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .irangs-header-tools,
    .irangs-head-work {
        flex: 0 0 auto;
    }

    .irangs-account-backdrop {
        background: rgba(15, 23, 42, .24);
        display: block;
    }

    .irangs-account-popover {
        border-radius: 16px;
        max-height: calc(
            var(--igs-vv-height, 100dvh)
            - var(--igs-account-trigger-clearance)
            - max(10px, var(--igs-safe-top))
            - max(10px, var(--igs-safe-bottom))
            - 14px
        );
        right: max(10px, var(--igs-safe-right)) !important;
        width: min(350px, calc(var(--igs-vv-width, 100vw) - 20px));
    }

    .irangs-account-popover__scroll > a,
    .irangs-account-popover__scroll > button,
    .irangs-account-popover__scroll > form button {
        min-height: 44px;
    }

    /* Common heading/action pairs collapse predictably instead of squeezing text. */
    .irangs-page-head,
    .irangs-card__head,
    .workspace-section-title,
    .workspace-control__section-head,
    .commerce-page-head,
    .commerce-section__head,
    .portal-card-heading,
    .project-hero,
    .gantt-controls {
        min-width: 0;
    }

    .workspace-control__section-actions,
    .commerce-page-actions,
    .commerce-sticky-actions > div,
    .project-actions,
    .igs360-inline-actions {
        max-width: 100%;
        min-width: 0;
    }

    .commerce-sticky-actions {
        align-items: stretch;
        flex-direction: column;
        max-width: 100%;
    }

    .commerce-sticky-actions > div,
    .commerce-sticky-actions form,
    .commerce-sticky-actions button,
    .commerce-sticky-actions .commerce-button {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Do not allow long codes, e-mail addresses or URLs to widen cards. */
    .irangs-card,
    .workspace-control__card,
    .portal-account-card,
    .commerce-card,
    .project-card,
    .igs360-card,
    .jango-panel {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    #main > [class~="@container"] { padding-inline: 8px !important; }

    .irangs-account-popover {
        right: max(8px, var(--igs-safe-right)) !important;
        width: calc(var(--igs-vv-width, 100vw) - 16px);
    }

    .irangs-header-tools { gap: 2px; }
    .irangs-header-tool { min-width: 32px; padding-inline: 5px; }
    .irangs-head-work { margin-inline-start: 2px; }

    .portal-container,
    .portal-body--unified .portal-container {
        width: min(100% - 16px, 1220px);
    }

    .portal-unified-topbar {
        gap: 8px;
        padding-inline: 10px;
    }

    .portal-unified-topbar__signals { gap: 4px; }
    .portal-unified-topbar__signals > a { min-width: 34px; padding-inline: 6px; }
}

/* Landscape phones are short: prioritize vertical reachability. */
@media (max-height: 560px) and (pointer: coarse) {
    :root { --igs-account-trigger-clearance: 68px; }
    .irangs-account-popover { max-height: calc(var(--igs-vv-height, 100dvh) - 86px); }
    .irangs-account-popover__scroll > a,
    .irangs-account-popover__scroll > button,
    .irangs-account-popover__scroll > form button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .irangs-account-popover { transition: none !important; }
}

/* v0.41.1 — visible-viewport follow-through for shared overlays and shells. */
.jango-login-page,
.jango-login-brand,
.jango-login-form-area,
body.portal-body,
.portal-unified-shell,
.portal-unified-sidebar {
    min-height: var(--igs-vv-height, 100dvh);
}

.portal-auth {
    min-height: max(0px, calc(var(--igs-vv-height, 100dvh) - 145px));
}

.portal-main {
    min-height: max(0px, calc(var(--igs-vv-height, 100dvh) - 150px));
}

.portal-body--unified .portal-main {
    min-height: max(0px, calc(var(--igs-vv-height, 100dvh) - 64px));
}

.portal-auth--minimal {
    min-height: max(0px, calc(var(--igs-vv-height, 100dvh) - 138px));
}

/* Keep the touch-first Persian date wheel in the visible viewport while the
   browser chrome/software keyboard is animating out after input.blur(). */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .jalali-picker-backdrop {
        bottom: var(--igs-vv-bottom-gap, 0px);
        left: var(--igs-vv-offset-left, 0px);
        max-height: none;
        right: var(--igs-vv-right-gap, 0px);
        top: var(--igs-vv-offset-top, 0px);
    }
}

.jalali-calendar.is-wheel {
    bottom: var(--igs-vv-bottom-gap, 0px) !important;
    max-height: min(
        620px,
        calc(var(--igs-vv-height, 100dvh) - max(8px, var(--igs-safe-top)))
    );
}

/* Project notifications are viewport-safe too; a toast must not disappear
   behind gesture bars or a software keyboard. */
.project-toast {
    bottom: calc(var(--igs-vv-bottom-gap, 0px) + max(12px, var(--igs-safe-bottom))) !important;
    left: calc(var(--igs-vv-offset-left, 0px) + max(12px, var(--igs-safe-left))) !important;
    max-width: min(
        420px,
        calc(var(--igs-vv-width, 100vw) - max(24px, var(--igs-safe-left)) - max(24px, var(--igs-safe-right)))
    );
}

/* Account menu is deliberately above application chrome, sticky banners,
   table headers and ordinary application dialogs. */
.irangs-account-layer { z-index: 12000; }
.irangs-account-popover {
    right: calc(var(--igs-vv-right-gap, 0px) + max(12px, var(--igs-safe-right))) !important;
    z-index: 12002;
}

@media (max-width: 1024px) {
    /* Unfold app-index pages use -mx-4 to cancel desktop gutters. Combined with
       the narrower IGS shell this can create a 2–8px document overflow. Keep
       the compensation inside #content on tablet/phone instead. */
    #content > [class~="flex"][class~="flex-row"][class~="-mx-4"] {
        margin-inline: 0 !important;
        max-width: 100%;
        width: 100%;
    }

    #content > [class~="flex"][class~="flex-row"][class~="-mx-4"] > [class~="grow"][class~="px-4"] {
        min-width: 0;
        padding-inline: 0 !important;
        width: 100%;
    }

}

@media (max-width: 760px) {
    .irangs-account-popover {
        right: calc(var(--igs-vv-right-gap, 0px) + max(10px, var(--igs-safe-right))) !important;
    }

    .portal-topbar__inner,
    .portal-unified-topbar {
        padding-left: max(10px, var(--igs-safe-left));
        padding-right: max(10px, var(--igs-safe-right));
    }
}

@media (max-width: 520px) {
    .irangs-account-popover {
        right: calc(var(--igs-vv-right-gap, 0px) + max(8px, var(--igs-safe-right))) !important;
    }
}

@media (max-width: 900px) {
    .portal-role-menu__panel {
        left: max(12px, var(--igs-safe-left)) !important;
        right: max(12px, var(--igs-safe-right)) !important;
        max-height: calc(
            var(--igs-vv-height, 100dvh)
            - 72px
            - var(--igs-safe-top)
            - var(--igs-safe-bottom)
            - 20px
        );
        top: calc(var(--igs-vv-offset-top, 0px) + 72px + var(--igs-safe-top)) !important;
    }

    /* Unified portal sidebar becomes a horizontal navigation strip at this
       breakpoint; do not inherit the desktop full-viewport column height. */
    .portal-unified-sidebar {
        height: auto;
        min-height: 0;
    }
}

/* Global IGS toasts own the highest application layer and follow the visual
   viewport on phone/tablet so they never hide behind keyboards or gesture bars. */
.igs-global-toast-region {
    bottom: calc(var(--igs-vv-bottom-gap, 0px) + max(12px, var(--igs-safe-bottom))) !important;
    left: calc(var(--igs-vv-offset-left, 0px) + max(12px, var(--igs-safe-left))) !important;
    z-index: 2147483000 !important;
}


/* IGS v0.45.0 — shared responsive component contract
   New/custom application pages must compose these primitives instead of
   inventing private breakpoints.  Dense comparison/financial tables may keep
   horizontal scrolling; operational tables can opt into the card transform. */
:root {
    --igs-rsp-gap: clamp(10px, 1.5vw, 18px);
    --igs-rsp-radius: 12px;
    --igs-rsp-touch: 44px;
    --igs-rsp-border: var(--color-base-200, #e2e8f0);
    --igs-rsp-muted: var(--color-base-500, #64748b);
}

.igs-rsp-page { display: grid; gap: var(--igs-rsp-gap); min-width: 0; width: 100%; }
.igs-rsp-head { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; min-width: 0; }
.igs-rsp-head > * { min-width: 0; }
.igs-rsp-head__copy { flex: 1 1 520px; min-width: 0; }
.igs-rsp-head__copy h1 { overflow-wrap: anywhere; }
.igs-rsp-head__copy p { max-width: 920px; overflow-wrap: anywhere; }
.igs-rsp-actions { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.igs-rsp-actions > * { box-sizing: border-box; max-width: 100%; }
.igs-rsp-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); min-width: 0; }
.igs-rsp-kpis > * { min-width: 0; overflow-wrap: anywhere; }
.igs-rsp-filter,
.igs-rsp-form-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); min-width: 0; }
.igs-rsp-filter > *, .igs-rsp-form-grid > * { min-width: 0; }
.igs-rsp-filter input:not([type=checkbox]):not([type=radio]),
.igs-rsp-filter select, .igs-rsp-filter textarea,
.igs-rsp-form-grid input:not([type=checkbox]):not([type=radio]),
.igs-rsp-form-grid select, .igs-rsp-form-grid textarea { box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%; }
.igs-rsp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); min-width: 0; }
.igs-rsp-grid > * { min-width: 0; }
.igs-rsp-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; min-width: 0; }
.igs-rsp-toolbar > * { min-width: 0; }
.igs-rsp-tabs { -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; gap: 8px; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.igs-rsp-tabs > * { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
.igs-rsp-table-wrap,
:where([class$="-table-wrap"], [class*="-table-wrap "]) { -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.igs-rsp-table { border-collapse: collapse; width: 100%; }
.igs-rsp-table th, .igs-rsp-table td { overflow-wrap: anywhere; }
.igs-rsp-code { direction: ltr; unicode-bidi: embed; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.igs-rsp-scroll-note { color: var(--igs-rsp-muted); display: none; font-size: .72rem; line-height: 1.7; margin: 7px 2px 0; }

/* Compatibility bridge: existing custom surfaces participate in the shared
   contract even before every historical template has been renamed. */
.telops, .telrep, .cid { min-width: 0; width: 100%; }
.telops-head, .telrep-head, .cid-head { min-width: 0; }
.telops-head > *, .telrep-head > *, .cid-head > * { min-width: 0; }
.telops-kpis, .telrep-kpis, .cid-kpis { min-width: 0; }
.telops-card, .telrep-card, .cid-card, .cid-box, .telrep-box { box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; }
.telops-tabs { -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.telops-tab { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
.telops-table-wrap, .telrep-table-wrap, .cid-table-wrap { max-width: 100%; min-width: 0; overscroll-behavior-inline: contain; }
.telops-table, .telrep-table, .cid-table { max-width: none; }

/* Dense Django/Unfold surfaces: contain first, then stack controls on touch
   widths. This avoids document-level overflow without destroying comparison
   tables that remain more useful as tables. */
#content .results,
#content .responsive-table,
#content .inline-group,
#content .tabular,
#content .selector,
#content .related-widget-wrapper,
#content .form-row,
#content .submit-row,
#content .object-tools,
#content .paginator { box-sizing: border-box; max-width: 100%; min-width: 0; }
#content .results,
#content .responsive-table,
#content .inline-group .tabular { -webkit-overflow-scrolling: touch; overflow-x: auto; overscroll-behavior-inline: contain; }
#content .select2-container { max-width: 100% !important; }
#content .related-widget-wrapper { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
#content .related-widget-wrapper > select,
#content .related-widget-wrapper > input:not([type=checkbox]):not([type=radio]) { flex: 1 1 220px; min-width: 0; }
#content .object-tools, #content .submit-row, #content .paginator { flex-wrap: wrap; }

/* High-density operational surfaces retain horizontal comparison on tablet,
   while phones get a deliberate card representation when data-label is present. */
@media (max-width: 1024px) {
    .igs-rsp-head { flex-wrap: wrap; }
    .igs-rsp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .igs-rsp-grid { grid-template-columns: 1fr; }
    .telops-kpis, .telrep-kpis, .cid-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .telrep-grid, .cid-grid { grid-template-columns: 1fr !important; }
    .telrep-filter { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .cid-test { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
    .igs-rsp-head, .telops-head, .telrep-head, .cid-head { align-items: stretch !important; flex-direction: column !important; }
    .igs-rsp-actions, .cid-actions, .telops-live { align-items: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .igs-rsp-actions > *, .cid-actions > *, .telops-live > button { justify-content: center; min-height: var(--igs-rsp-touch); width: 100%; }
    .telops-live > span { align-self: center; }
    .igs-rsp-kpis, .telops-kpis, .telrep-kpis, .cid-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .igs-rsp-filter, .igs-rsp-form-grid, .telrep-filter, .cid-test { grid-template-columns: 1fr !important; }
    .igs-rsp-toolbar, .telops-toolbar { align-items: stretch !important; flex-direction: column !important; }
    .igs-rsp-toolbar input, .igs-rsp-toolbar select, .telops-search { max-width: none !important; min-width: 0 !important; width: 100% !important; }
    .igs-rsp-tabs, .telops-tabs { margin-inline: -2px; padding-bottom: 2px; }
    .igs-rsp-tabs > *, .telops-tab { min-height: var(--igs-rsp-touch); }
    .igs-rsp-scroll-note { display: flex; gap: 5px; align-items: center; }
    .igs-rsp-table-wrap { border-radius: 10px; }

    /* Card-table mode is opt-in and intentionally limited to operational data.
       Financial ledgers and other comparison tables continue to scroll. */
    table.igs-rsp-table--cards { min-width: 0 !important; table-layout: fixed; width: 100% !important; }
    table.igs-rsp-table--cards thead { display: none; }
    table.igs-rsp-table--cards tbody { display: grid; gap: 10px; padding: 9px; }
    table.igs-rsp-table--cards tbody tr { background: var(--color-base-0, #fff); border: 1px solid var(--igs-rsp-border); border-radius: 12px; display: grid; min-width: 0; overflow: hidden; }
    .dark table.igs-rsp-table--cards tbody tr { background: var(--color-base-900, #111827); }
    table.igs-rsp-table--cards tbody td { align-items: start; border-bottom: 1px solid var(--igs-rsp-border) !important; box-sizing: border-box; display: grid; gap: 8px; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); min-width: 0; padding: 9px 10px !important; text-align: start !important; white-space: normal !important; width: 100%; }
    table.igs-rsp-table--cards tbody td:last-child { border-bottom: 0 !important; }
    table.igs-rsp-table--cards tbody td::before { color: var(--igs-rsp-muted); content: attr(data-label); font-size: .72rem; font-weight: 750; line-height: 1.65; }
    table.igs-rsp-table--cards tbody td[colspan] { display: block; text-align: center !important; }
    table.igs-rsp-table--cards tbody td[colspan]::before { content: none; }
    table.igs-rsp-table--cards .telops-sub, table.igs-rsp-table--cards .cid-sub { overflow-wrap: anywhere; white-space: normal; }
    table.igs-rsp-table--cards code { overflow-wrap: anywhere; white-space: normal; }

    /* Admin add/change forms: touch targets, relationship widgets and action
       rows should never require horizontal document scrolling. */
    #content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    #content select, #content textarea { font-size: 16px; max-width: 100%; min-width: 0; }
    #content select, #content input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 42px; }
    #content .select2-container { width: 100% !important; }
    #content .related-widget-wrapper { align-items: stretch; }
    #content .related-widget-wrapper > select,
    #content .related-widget-wrapper > input:not([type=checkbox]):not([type=radio]) { flex-basis: 100%; width: 100%; }
    #content .object-tools, #content .submit-row { align-items: stretch; gap: 8px; }
    #content .object-tools > *, #content .submit-row > * { max-width: 100%; }
    #content .paginator { gap: 6px; white-space: normal; }
    #content .selector { align-items: stretch; display: flex !important; flex-direction: column; gap: 8px; width: 100% !important; }
    #content .selector-available, #content .selector-chosen { float: none !important; max-width: 100%; width: 100% !important; }
    #content .selector select { box-sizing: border-box; max-width: 100%; min-height: 180px; width: 100% !important; }
    #content .selector-chooser { align-items: center; display: flex; gap: 8px; justify-content: center; margin: 0 !important; padding: 4px 0 !important; width: 100% !important; }
    .cid-checks li { grid-template-columns: 20px minmax(76px, 32%) minmax(0, 1fr) !important; }
    .telrep-pagination { flex-wrap: wrap; }

    /* Project planning remains information-dense but becomes touch-oriented. */
    .gantt-card { max-width: 100%; }
    .gantt-layout { grid-template-columns: minmax(132px, 40vw) minmax(0, 1fr) !important; }
    .gantt-timeline-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
    .project-kanban { -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
    .kanban-column { scroll-snap-align: start; }
}

@media (max-width: 420px) {
    .igs-rsp-actions, .cid-actions { grid-template-columns: 1fr; }
    .igs-rsp-kpis, .telops-kpis, .telrep-kpis, .cid-kpis { grid-template-columns: 1fr 1fr !important; }
    .telops-card, .telrep-card, .cid-card { padding: 10px !important; }
    .telops-card strong, .telrep-card strong, .cid-card strong { font-size: 1.15rem !important; }
    .telops-card small, .telrep-card small, .cid-card small { font-size: .7rem; }
    .telops-live { grid-template-columns: auto minmax(0,1fr); }
    .telops-live > button { grid-column: 1 / -1; }
    table.igs-rsp-table--cards tbody td { grid-template-columns: minmax(78px, 35%) minmax(0, 1fr); }
}

@media (max-width: 340px) {
    .igs-rsp-kpis, .telops-kpis, .telrep-kpis, .cid-kpis { grid-template-columns: 1fr !important; }
}