/* ============================================================================
   mobile-contain.css — narrow-phone contained-overflow guardrails for the dense
   admin / analytical pages flagged in the final handoff review (2026-06-07).

   These pages have page-local <style> or feature CSS that loads AFTER the global
   dark files, so a plain `.class { … }` override loses by source order. Every
   selector here is ELEMENT- or ID-prefixed (e.g. `table.data-table`, specificity
   0,2,1; `aside#favoritesDrawer`, 1,1,0) so it beats those rules regardless of
   load order. All rules are @media (max-width:768px) → desktop is byte-identical,
   and they apply in BOTH light and dark (these are layout, not colour, fixes).
   ============================================================================ */
@media (max-width: 768px) {
    /* Dense admin / matrix tables: the natural scroll container is the
       .data-table-wrapper — make it scroll horizontally (it sits at .main-content
       width, so the wide table scrolls INSIDE it instead of pushing the page).
       Card-mode lists (which already kill the wide table) are excluded. */
    div.data-table-wrapper:not(:has(> table.list-cards-mobile)) {
        overflow-x: auto !important;
        max-width: 100%;
        min-width: 0;
    }
    /* Tables themselves scroll. min-width:0 is essential — these tables set a
       min-width (e.g. 800px) which would otherwise beat max-width:100% and keep
       the box wide. display:block + overflow-x:auto + min-width:0 clamps the BOX
       to the column and scrolls the table content inside. (Wrapped tables also
       get this harmlessly — their wrapper already scrolls.) */
    table.data-table:not(.list-cards-mobile),
    table.mm-table,
    table.bk-table,
    table.pm-grid-table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
    }
    /* MassMailing client autocomplete dropdown wrapper. */
    div.mm-typeahead-wrap,
    div.client-autocomplete {
        min-width: 0;
        max-width: 100%;
    }

    /* Admin tab strips (flex rows that don't wrap) → horizontal scroll so the
       row doesn't widen .main-content. */
    div.admin-tabs,
    div.bk-tabs,
    nav.invsettings-tabs,
    div.mm-tabs,
    div.fn-tabs,
    div.role-tabs,
    div.csl-segment,
    div.csl-expansion-controls {
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
    }
    /* Long inline hints/labels (e.g. MassMailing typeahead hint) wrap. */
    span.mm-typeahead-hint,
    span.mm-muted {
        overflow-wrap: anywhere;
        min-width: 0;
        white-space: normal;
    }

    /* /Admin/Permissions — the 3-rail grid (280px 1fr 300px) forces ~600px.
       Collapse to a single column and let the rails/catalog shrink. */
    div.perm-shell {
        grid-template-columns: 1fr !important;
    }
    aside.perm-catalog,
    div.perm-rail,
    div.perm-bundle,
    section.perm-detail {
        min-width: 0;
        max-width: 100%;
    }

    /* /Admin/ClaimSectionLayout — the real container is .csl-split (collapses via
       its own @media<=1100); the residual +3px scrollbar at 320 is the
       .csl-preview-stage grid (1fr 100px) whose fixed 100px sidebar col + gap
       won't fit the ~254px panel. Collapse it; shrink the sidebar. (The old
       .csl-layout/.csl-shell selectors here were dead — never in the markup.) */
    div.csl-preview-stage { grid-template-columns: 1fr !important; }
    div.csl-preview-sidebar { min-width: 0; max-width: 100%; }

    /* /Admin/Functionalities — long code/meta lines don't wrap. */
    span.code-line,
    div.cd,
    div.nm,
    span.meta {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* /Reports/AiReports — the favourites drawer's CLOSED state stays off-canvas
       so it never contributes layout width (ID beats the page's #favoritesDrawer
       rule). The page already makes it full-width when open. */
    aside#favoritesDrawer:not(.is-open) {
        right: 0 !important;
        /* transform:none (NOT translateX) — a transformed off-canvas box still
           extends the page's scrollable overflow; keep the box in-viewport at
           right:0 and hide it with visibility instead. */
        transform: none !important;
        visibility: hidden !important;
    }

    /* ------------------------------------------------------------------ *
     * Round 2 (2026-06-07) — residuals the first pass left contained.
     * Each rule below was proven live (inject-and-measure: the targeted
     * box scrollWidth-clientWidth driven to 0 at 320 AND 390, light+dark,
     * desktop inert) before being committed.
     * ------------------------------------------------------------------ */

    /* /Claims/Details + /Claims/Edit — #btnClaimAdmin claim-admin modal.
       .ca-action-bar is a non-wrapping flex row (Action label + select +
       refresh button); the box only caps at 1100px, so on phones the select
       keeps its ~316px intrinsic width and the refresh button overflows the
       box (56px @390, 126px @320). Cap the box, wrap the bar, full-width select. */
    #claimAdminModal .modal-content.claim-admin-modal { max-width: 100%; }
    #claimAdminModal .ca-action-bar { flex-wrap: wrap; min-width: 0; }
    #claimAdminModal .ca-action-select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    #claimAdminModal .ca-head,
    #claimAdminModal .ca-foot { flex-wrap: wrap; min-width: 0; }
    #claimAdminModal .ca-foot-info { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
    #claimAdminModal .ca-endpoint,
    #claimAdminModal .ca-issue,
    #claimAdminModal .ca-file,
    #claimAdminModal .ca-confirm { flex-wrap: wrap; min-width: 0; }
    /* In-panel HIVE-51 type-of-claim dropdown (Atralo "Siųsti į Atralo" panel) and
       any .select-wrapper select: site.css .select-wrapper select sets no width, so
       it takes its longest option's intrinsic width (~184px: "010 — Vėluojantis
       pristatymas") and bleeds past the box — visually clipping the chevron + the
       data-grid's left column. The box scrollWidth metric misses it because the box
       has overflow:hidden (clips, doesn't register). Cap the select + let the cell
       shrink. */
    #claimAdminModal .ca-type-of-claim-select,
    #claimAdminModal .select-wrapper select { width: 100%; min-width: 0; max-width: 100%; }
    #claimAdminModal .ca-data-grid .select-wrapper { display: block; min-width: 0; max-width: 100%; }

    /* Generalised select-overflow cap. The same .select-wrapper select pattern
       (no width → longest-option intrinsic width) bleeds out of OTHER modals too
       (e.g. /Admin/Circumstances #circumstancePipelineId, +45px@320), and report
       filter <select>s carry an inline style="min-width:260px/220px" that beats
       any stylesheet width. On mobile, cap every modal select + any inline-
       min-width select to its container (min-width:0 !important to defeat the
       inline style). Mobile-only → desktop 1:1 unaffected. */
    .modal-overlay .select-wrapper select,
    .modal-overlay select.form-control { min-width: 0 !important; max-width: 100%; }
    select[style*="min-width"] { min-width: 0 !important; max-width: 100%; }

    /* /Admin/MassMailing — the real offender is the "Find & add client" typeahead
       row: .mm-typeahead-row's own CSS sets display:flex, which DEFEATS the
       [hidden] attr the JS toggles for claim/client mode, so in the default claim
       mode the row still lays out and its flex:0 0 360px wrap overflows by 123px.
       Honour [hidden] on mobile; when shown, let the wrap take full width. */
    div.mm-typeahead-row[hidden] { display: none !important; }
    div.mm-typeahead-row { flex-wrap: wrap; }
    div.mm-typeahead-wrap { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    /* Source-mode pills: 1fr 1fr forces ~390px of content at 320; stack to one col. */
    div.mm-source-toggle { grid-template-columns: 1fr; }
    button.mm-src-pill { min-width: 0; }
    span.mm-src-label,
    span.mm-src-sub { min-width: 0; overflow-wrap: anywhere; }

    /* Small SuperAdmin residuals — page-header actions rows that don't wrap
       (Permissions/Functionalities/PermissionMatrix export buttons). */
    div.page-header { flex-wrap: wrap; }
    div.page-header > div { min-width: 0; max-width: 100%; }
    div.page-header > div[style*="flex"] { flex-wrap: wrap; }
    div.page-header a.btn-primary,
    div.page-header a.btn-secondary { min-width: 0; }

    /* Monitoring pages use .page-toolbar (title + an inline display:flex action
       row of link/buttons) which doesn't wrap — the action row overflows at 320
       (e.g. /Monitoring/AlertRules ← Monitoring / Settings / + New rule). Wrap. */
    div.page-toolbar { flex-wrap: wrap; }
    div.page-toolbar > div { flex-wrap: wrap; min-width: 0; }

    /* /Admin/PermissionMatrix — the .pm-stats 4-col grid forces the single
       .pm-shell column to its min-content width (~344px), stretching every
       sibling past .main-content. Collapse stats to 2 cols; shrink shell kids.
       The matrix keeps its own .pm-grid-scroll contained scroll. */
    div.pm-shell > * { min-width: 0; max-width: 100%; }
    section.pm-stats { grid-template-columns: repeat(2, 1fr) !important; }
    div.pm-toolbar input[type="search"] { min-width: 0; }

    /* /Admin/Functionalities — the .fn-shell 2-col grid (340px 1fr) won't
       collapse; the 340px rail overhangs at 320. One column + shrink panels. */
    div.fn-shell { grid-template-columns: 1fr !important; }
    aside.fn-rail,
    section.fn-inspector { min-width: 0; max-width: 100%; }

    /* /Reports/AiReports — the .report-header space-between flex has a #schemaInfo
       meta-badge whose long date string won't shrink. Wrap header + badge text. */
    div.report-header { flex-wrap: wrap; }
    div.report-header > div { min-width: 0; max-width: 100%; }
    span#schemaInfo.meta-badge { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }

    /* /Admin/InvoiceSettings — the #s123ConfigActions inline-flex (Unsaved
       changes + Save) in a space-between card head overhangs by ~20 at 320. */
    div#s123ConfigActions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    div#s123ConfigCard > div:first-child { flex-wrap: wrap; min-width: 0; }

    /* /Admin/BusinessKnowledge — each .bk-toggle has min-width:280px which
       overhangs the flex-wrap .bk-toggles row by ~13 at 320. Drop the floor. */
    label.bk-toggle { min-width: 0; max-width: 100%; }

    /* ------------------------------------------------------------------ *
     * Round 3 (2026-06-07) — deeper-state residuals the adversarial pass
     * found (wizard steps 2/3, Batch pages, Audit/Regressions tabs).
     * Each proven live before commit.
     * ------------------------------------------------------------------ */

    /* /Admin/MassMailing step 2 "Compose" — .mm-compose-grid is a 2fr 1fr grid
       with no phone collapse, forcing ~347px at 320. One column. */
    div.mm-compose-grid { grid-template-columns: 1fr !important; }

    /* /Admin/MassMailing step 3 "Review & send" — the .mm-rcp-summary 4-col grid
       (1fr auto auto auto) + the 700px-capped nowrap preview render ~700px and
       never reflow. Stack the summary, let the preview/cards shrink. */
    div.mm-rcp-summary { grid-template-columns: 1fr !important; }
    div.mm-rcp-preview { max-width: 100% !important; white-space: normal; }
    div.mm-rcp-card,
    div.mm-rcp-body { min-width: 0; max-width: 100%; }
    div.mm-rcp-body input[type="text"],
    div.mm-rcp-body textarea { max-width: 100%; min-width: 0; }
    label.mm-rcp-skip,
    span.mm-rcp-meta-chip,
    span.mm-rcp-chevron { min-width: 0; }

    /* /Admin/MassMailing/Batches detail — the .mm-kpi-row card grid overflows. */
    div.mm-kpi-row { grid-template-columns: 1fr !important; }
    div.mm-kpi-card { min-width: 0; max-width: 100%; }

    /* /Admin/MassMailing step 3 "Review & send" — the .mm-review-banner
       (space-between flex) and its .mm-step-actions row (Back / Send test /
       Send all — 3 buttons, no wrap) overflow by ~48 at 320; the primary
       #mm-send-batch "Send all" CTA itself overhangs. Wrap both + shrink. */
    div.mm-review-banner { flex-wrap: wrap; }
    div.mm-step-actions { flex-wrap: wrap; min-width: 0; }
    div.mm-step-actions button,
    button#mm-send-batch { min-width: 0; }

    /* /Admin/MassMailing wizard step-indicator strip — ol.mm-wizard is
       flex-nowrap + overflow:hidden, so step 3 "Review & send" is clipped past
       the box at phone widths and can't be reached. Let the steps wrap (and zero
       the default <ol> inline padding that nudged it ~3px over at 320). */
    ol.mm-wizard { flex-wrap: wrap; padding-left: 0; padding-inline-start: 0; }
    li.mm-wiz-step { min-width: 0; }
    li.mm-wiz-step > div { min-width: 0; }
    li.mm-wiz-step .mm-wiz-label,
    li.mm-wiz-step .mm-wiz-sub { overflow-wrap: anywhere; min-width: 0; }

    /* /Admin/BusinessKnowledge Audit/Regressions tabs — .bk-toolbar is a
       no-wrap flex row with a flex:1 spacer pushing a right-aligned pill/button
       off the edge (+182 Audit, +28 Regressions at 320). NOTE: the Audit toolbar
       is a <form class="bk-toolbar">, not a <div> — so target the class (not
       div.) and neutralise the spacer strut so the trailing pill can wrap. */
    .bk-toolbar { flex-wrap: wrap !important; }
    .bk-toolbar > * { min-width: 0; max-width: 100%; }
    .bk-toolbar > .spacer { flex-basis: 100%; flex-grow: 0; }

    /* Deployment-gate blocker 2 — /Reports/MtnInvoices/PaidInvoiceClientWorkbook
       (and any report filter form): the path inputs carry inline min-width:320px
       (beats stylesheet width) and overflow at 320. Cap inline-min-width inputs +
       let the filter rows + file inputs wrap/shrink. */
    input[style*="min-width"] { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
    div.report-filter-row,
    div.report-filter-row-secondary { flex-wrap: wrap; min-width: 0; }
    div.report-filter-row input,
    div.report-filter-row input[type="file"] { max-width: 100%; min-width: 0; box-sizing: border-box; }

    /* Deployment-gate blocker 4 — the restyle-preview pill is fixed bottom-right
       and, at rest on a phone, can sit over claim action/content (the AI-drawer-
       open hide rule only covers the drawer case). The pill is a desktop
       review/preview tool; hide it entirely on phones so nothing tappable is ever
       covered. Chosen theme still persists (cookie) and renders on mobile; only
       the picker UI is desktop-only. (Desktop keeps the pill; the drawer-open
       hide rule below still applies there.) */
    .rsp-panel { display: none !important; }
}

/* ====================================================================== *
 * Tablet band (769–1100px). The app's drawer/split breakpoints sit at
 * 1100px, but the wide-table scroll-containment above is gated <=768, so
 * table-heavy admin pages (MassMailing, BusinessKnowledge) still clip when a
 * desktop window is resized into portrait-tablet range. Re-apply the table
 * containment (and neutralise the sticky-thead leak) up to 1100 so the band
 * is clean too. Still well below Full-HD 1920 → light desktop byte-identical.
 * ====================================================================== */
@media (max-width: 1100px) {
    table.data-table:not(.list-cards-mobile),
    table.mm-table,
    table.bk-table,
    table.ar-table,
    table.pm-grid-table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
    }
    /* .mm-table th is position:sticky;top:0 — inside the display:block scroll box
       its cell geometry still leaks into .main-content scrollWidth (+25/+151).
       Drop sticky in the contained range; the header simply scrolls with rows. */
    table.mm-table thead th { position: static; }

    /* BusinessKnowledge toolbar wraps in the tablet band too (form.bk-toolbar). */
    .bk-toolbar { flex-wrap: wrap !important; }
    .bk-toolbar > .spacer { flex-basis: 100%; flex-grow: 0; }

    /* AI chat drawer X-close reachability (claim Details/Edit). The drawer's
       page-local mobile rule sets top:0 (full-screen), but the global
       .top-header (static, ~60px, top:0) paints over the drawer's own header —
       so the drawer's title + X close button are hidden BEHIND the global nav
       and the X is untappable (only Escape closed it). Drop the drawer below the
       header (desktop already uses top:60px and works) so its header + X are
       visible and clickable. body.claim-ai-chat-open + the class beats the
       page-local .claim-ai-chat-drawer{top:0} by specificity. */
    body.claim-ai-chat-open .claim-ai-chat-drawer { top: 60px; }

    /* The 9-button .bk-tabs strip (Concepts…Audit) overflows ~1079px; its
       overflow-x:auto guard is gated <=768, so it clips in the tablet band.
       Same for the other admin tab strips that run wide. */
    div.bk-tabs,
    div.admin-tabs,
    nav.invsettings-tabs,
    div.mm-tabs,
    div.fn-tabs,
    div.role-tabs {
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
    }

    /* MassMailing "Find & add client" typeahead row: its display:flex defeats
       [hidden] (claim mode) and the flex:0 0 360px wrap overflows the tablet
       band too. Honour [hidden]; full-width wrap when shown. */
    div.mm-typeahead-row[hidden] { display: none !important; }
    div.mm-typeahead-row { flex-wrap: wrap; }
    div.mm-typeahead-wrap { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    span.mm-typeahead-hint,
    span.mm-muted { overflow-wrap: anywhere; min-width: 0; white-space: normal; }
}