/* ===========================================================================
   list-mobile.css — Claims list "table -> card" transform (mobile only)

   Scope guards (DO NOT relax):
   - Every rule lives inside @media (max-width: 768px). Desktop (>=768px) is
     completely untouched, so the >=1024px / 1440 / 1920 light render stays
     byte-identical.
   - The transform is scoped to `table.list-cards-mobile` (the Claims list
     only). Never a bare `.data-table` rule — matrix/admin/report tables keep
     their normal horizontal-scroll behaviour.
   - Colours come from theme tokens (var(--surface) etc.), so dark mode is
     inherited automatically — no separate html[data-theme="dark"] block needed.

   This is a pure CSS restyle of the SAME table markup (same rows, links,
   checkboxes, badges, context menu). No behaviour changes.
   =========================================================================== */

/* The mobile-only Claims sort control is hidden on desktop; the @media block
   below flips it to flex. (Declared before the @media so the cascade resolves
   to flex at <=768 and none above.) */
.list-mobile-sort { display: none; }

@media (max-width: 768px) {

    /* The Claims list owns its scroll wrapper; in card mode there is no wide
       table, so kill the horizontal scroll / forced min-width that the generic
       .data-table rules impose. This is what removes the ~781px overflow. */
    .data-table-wrapper:has(> table.list-cards-mobile) {
        overflow-x: hidden;
        border: none;
        background: transparent;
    }

    table.data-table.list-cards-mobile {
        min-width: 0;
        width: 100%;
        display: block;
        border-collapse: separate;
        background: transparent;
        font-size: 13px;
    }

    /* Neutralize stale desktop column resize/reorder inline styles
       (table-interactions.js). That script restores per-page saved column WIDTHS
       as INLINE styles on the table + cells (`table.style.width = ~1600px` +
       table-layout:fixed + inline th/td widths). Inline styles beat the stylesheet,
       so on the card layout the table is forced to its ~desktop width and every
       value — the right-hand side of each `justify-content:space-between` cell —
       is pushed off the right edge, where `.data-table-wrapper{overflow-x:hidden}`
       clips it. Result: labels render, values look blank ("appears then disappears"
       as the script runs just after the server paint). Persists across "clear
       cache" because colWidths/colOrder live in localStorage, not the HTTP cache;
       absent in a fresh/private profile that never customised columns. A stylesheet
       `!important` beats the JS inline width, so the card always lays out at the
       viewport width regardless of any saved state. Mobile-gated (<=768px) →
       desktop (>768px) 1:1 render is untouched. The JS also stays inert on cards
       (see inMobileCardMode in table-interactions.js); this is the belt-and-braces
       net that also covers a desktop->narrow window resize. */
    table.data-table.list-cards-mobile {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }
    table.list-cards-mobile tbody td,
    table.list-cards-mobile tbody th,
    table.list-cards-mobile thead th {
        width: auto !important;
    }

    /* Hide the column-header row entirely — labels move to per-cell ::before. */
    table.list-cards-mobile thead {
        display: none;
    }

    table.list-cards-mobile tbody {
        display: block;
    }

    /* Each row becomes a self-contained card. position:relative anchors the
       absolutely-positioned checkbox + action menu in the card "header". */
    table.list-cards-mobile tbody tr {
        position: relative;
        display: block;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
        margin-bottom: 10px;
        padding: 10px 12px;
        /* Card padding stays symmetric — only the TITLE row clears the absolutely
           positioned ⋮ action (below). The old card-wide padding-right:48px inset
           every value row, leaving a dead gap down the whole right edge. */
    }

    /* Generic data cell -> label / value row. */
    table.list-cards-mobile tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        padding: 4px 0;
        border: none;
        white-space: normal;
        text-align: right;
        font-size: 13px;
        color: var(--text);
    }

    table.list-cards-mobile tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .03em;
        white-space: nowrap;
    }

    /* The value side wraps / aligns right; lets long client names break. */
    table.list-cards-mobile tbody td > * {
        text-align: right;
    }

    /* ---- Card header: checkbox (top-left) + actions (top-right) ---------- */

    /* Checkbox cell: pulled out of the flex flow, pinned top-left. No label. */
    table.list-cards-mobile tbody td[data-cardcell="check"] {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        width: auto;
    }
    table.list-cards-mobile tbody td[data-cardcell="check"]::before {
        content: none;
    }

    /* Action ⋮ cell: pinned top-right. No label. */
    table.list-cards-mobile tbody td[data-cardcell="actions"] {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
    }
    table.list-cards-mobile tbody td[data-cardcell="actions"]::before {
        content: none;
    }

    /* ---- Title cell: claim number reads as the card title --------------- */
    table.list-cards-mobile tbody td[data-cardcell="title"] {
        display: block;
        /* Indent past the top-left checkbox (left) and clear the top-right ⋮ (right)
           so the title row never collides with the pinned card-header controls. */
        padding: 0 40px 6px 30px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--border);
        text-align: left;
    }
    table.list-cards-mobile tbody td[data-cardcell="title"]::before {
        content: none;
    }
    table.list-cards-mobile tbody td[data-cardcell="title"] > * {
        text-align: left;
    }
    /* Card title type-scale + keep badges/icons visible and laid out. */
    table.list-cards-mobile tbody td[data-cardcell="title"] .claim-number-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    table.list-cards-mobile tbody td[data-cardcell="title"] .claim-number-link {
        font-size: 16px;
        font-weight: 700;
    }
    table.list-cards-mobile tbody td[data-cardcell="title"] .claim-badges-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-start;
    }

    /* ---- Per-cell value alignment touch-ups ----------------------------- */

    /* Pipeline / type cell: align the dot + name + type label to the right. */
    table.list-cards-mobile tbody td .claim-pipeline-cell {
        align-items: flex-end;
        text-align: right;
    }
    table.list-cards-mobile tbody td .claim-pipeline-cell .claims-color-dot {
        margin-right: 4px;
    }

    /* Status pill keeps its inline-block sizing on the value side. */
    table.list-cards-mobile tbody td .status-badge {
        white-space: nowrap;
    }

    /* ---- Claims-list header tabs strip (page shell, [data-list-filters]) --
       Desktop keeps `flex-shrink: 0` on .claims-header-tabs, so on a narrow
       viewport that single flex item refuses to shrink and lays all 7 tabs out
       on one ~1155px line — the real driver of .main-content horizontal
       overflow at 390px (the table itself is clipped by its own wrapper).
       Mobile-only: let the strip shrink to the available width and wrap its
       tabs onto multiple lines so nothing pushes the page sideways.
       This rule is mobile-gated and only narrows behaviour — desktop is
       untouched. */
    .claims-header-tabs {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    /* ---- #3 (P2): header ACTIONS row overflow --------------------------------
       Desktop keeps `.claims-header-actions { flex-shrink:0; margin-left:auto }`.
       Once the tabs strip wraps (rule above), the actions buttons (Clear +
       Filter + Quick-intake + Create) land on their own line, but with
       flex-shrink:0 their combined ~422px width refuses to shrink and pushes
       .main-content ~48px sideways at 390px — the persistent horizontal overflow
       that exists on load and after open->close of the filter drawer.
       Mobile-only: let the row shrink + wrap so the buttons stack within the
       viewport instead of widening the page. Desktop (>768px) is untouched. */
    .claims-header-actions {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    /* ---- #1 (re-review): mobile sort control --------------------------------
       In card mode the <thead> (and its 8 sort links) is hidden, so the desktop
       header-sort path is unreachable. This compact select + direction toggle
       routes through the SAME no-refresh AJAX list mechanism (claimsList.load),
       preserving filters + resetting to page 1, exactly like the header links. */
    .list-mobile-sort {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }
    .list-mobile-sort .lms-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .list-mobile-sort .lms-select { flex: 1 1 auto; min-width: 0; }
    .list-mobile-sort .lms-select select { width: 100%; }
    .list-mobile-sort .lms-dir {
        flex: 0 0 auto;
        width: 38px;
        height: 36px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        border-radius: var(--radius, 8px);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .list-mobile-sort .lms-dir:hover { border-color: var(--primary); }

    /* ---- #3 (P2 re-fix): off-canvas filter drawer with ZERO closed overflow --
       Desktop keeps site.css's `right:-380px` (untouched above 768px).

       Previous mobile rule pushed the closed drawer off the right edge with
       `transform: translateX(calc(100% + 24px))`. Although the drawer is
       position:fixed, it lives INSIDE `.main-content` (which is overflow-x:auto),
       and Chromium counts the transformed box toward that scroll container's
       scrollable overflow — giving a persistent ~48px horizontal overflow on
       `.main-content` (present on load AND after open->close).

       Fix: the CLOSED drawer stays anchored at `right:0` (its layout right edge
       sits exactly on the viewport edge — contributes 0 overflow) and is taken
       out of the picture with `visibility:hidden` + `opacity:0`. The slide is
       preserved by animating a SMALL in-bounds transform (translateX(101%) would
       leave the box, so we keep it visually parked just off-screen ONLY while
       opacity/visibility hide it, but the *layout/transform box never extends
       past the viewport* because we cap the translate at the drawer's own offset
       and rely on visibility to hide the brief on-edge frame). The open state
       resets everything for a full, dark-correct, usable drawer. */
    .claims-filter-sidebar {
        right: 0;            /* layout box flush at the viewport edge -> 0 overflow */
        transform: none;     /* never translate the CLOSED box past the edge */
        visibility: hidden;  /* hide without removing the (in-bounds) layout box */
        opacity: 0;
        transition: opacity 0.2s ease, visibility 0s linear 0.25s;
    }
    .claims-filter-sidebar.open {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.2s ease, visibility 0s;
        /* Slide-in is a transient animation: its off-screen first frames are
           NOT a steady state, so they never persist as horizontal overflow. */
        animation: claimsFilterSlideIn 0.25s ease;
    }
    @keyframes claimsFilterSlideIn {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }

    /* ---- Narrow-phone guardrail (P2) ----------------------------------------
       The SHARED list toolbar (search + pipeline/status selects + Clear/Filter/
       Create buttons) is the persistent horizontal-overflow driver at very
       narrow phone widths (320/360px): site.css gives `.toolbar .select-wrapper
       select` a `min-width: 180px`, and two of those plus the buttons exceed the
       viewport, so .main-content scrolls sideways on EVERY list page (Claims,
       Users, …). These rules are mobile-gated (<=768px) so desktop (>=769px)
       light/dark rendering is byte-identical; they only let the toolbar wrap and
       its children shrink to the available width. Applies to all lists.

       Measured before this fix: 320px≈71px, 360px≈31px .main-content overflow. */
    .toolbar {
        flex-wrap: wrap;
    }
    .toolbar .search-box {
        flex: 1 1 100%;
        min-width: 0;
    }
    .toolbar .select-wrapper {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
    }
    .toolbar .select-wrapper select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .toolbar .filter-btn-outline,
    .toolbar .btn-secondary,
    .toolbar button {
        min-width: 0;
    }
    /* Filter-button groups (e.g. Users page Role/Status dropdowns) sit in a
       `.filter-group` flex row with `margin-left:auto`; at 320px their combined
       intrinsic width (~344px) overruns the viewport because the group never
       wraps. Mobile-only: let the group wrap onto multiple lines and let its
       context-menu wrappers shrink, so the toolbar stays within the page. */
    .toolbar .filter-group {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }
    .toolbar .filter-group .context-menu-wrapper {
        min-width: 0;
    }

    /* Card status pills may carry long labels; let them wrap instead of forcing
       a wide intrinsic width (the nowrap rule above keeps desktop untouched). */
    table.list-cards-mobile tbody td .status-badge {
        white-space: normal;
    }

    /* ---- Page-header action row guardrail (P0, sitewide) --------------------
       `.page-header` is a non-wrapping `display:flex; justify-content:space-
       between` row of [H1] + [.page-header-actions]. The actions group holds the
       Export / Quick / Create buttons (~355-392px combined) which do NOT wrap, so
       at 320/360px they push `.main-content` sideways on every list page
       (Clients, Assets/*, Processes …). Measured before this fix:
       320px≈44-88px, 360px≈4-48px contained overflow.
       Mobile-only (<=768px) → desktop (>=769px) layout is byte-identical. Let the
       header and its action group wrap so the buttons stack within the page. */
    .page-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    .page-header-actions {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
    }
    .page-header-actions > *,
    .page-header-actions .btn-primary,
    .page-header-actions .btn-secondary,
    .page-header-actions .btn-export {
        min-width: 0;
    }
}