/* ─────────────────────────────────────────────────────────────────────────────
   ASAR — global mobile layer.

   Every rule lives inside a max-width media query, so desktop rendering is
   byte-for-byte unchanged. This is deliberate: the app is used on desktop all
   day and a global restyle would be a regression risk across 200+ pages.

   Loaded from asar_render_app_nav() and the department dashboard header, which
   between them cover most pages in the app.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Phones and small tablets ───────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Nothing may push the page sideways. */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Media never overflows its column. */
    img, svg, video, canvas, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }

    /* Common layout shells: drop desktop fixed widths and tighten gutters. */
    .section-page, .section-shell, .dashboard-shell, .asar-workspace,
    .container, .wrap, .page-wrap, .content-wrap, .main-wrap,
    .portal-main, .portal-section, .portal-shell, .portal-wrap {
        /* border-box is required, not cosmetic: these rules set width:100% AND
           horizontal padding, so under content-box the element resolves to
           100% + 24px and pushes the page sideways by exactly the gutter. */
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Cards go full width and lose oversized desktop padding. */
    .section-card, .card, .panel, .box, .stat-card, .metric-card {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 14px !important;
    }

    /* Any multi-column grid becomes a single column. Inline styles are common in
       this codebase, so !important is required to win against them. */
    [class*="grid"], [class*="cards"], [class*="columns"], [class*="cols"],
    .row, .flex-row, .stats, .kpi-row, .tiles {
        grid-template-columns: 1fr !important;
        display: block;
    }
    [class*="grid"] > *, [class*="cards"] > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Flex rows wrap instead of squeezing their children to nothing. */
    .flex, .d-flex, .toolbar, .filters, .filter-bar, .actions, .btn-row,
    .header-actions, .page-actions {
        flex-wrap: wrap !important;
        gap: 8px;
    }
    .flex > *, .d-flex > *, .toolbar > *, .filters > * {
        min-width: 0 !important;
    }

    /* ── Tables ──────────────────────────────────────────────────────────────
       Wide data tables are the main source of horizontal overflow. Known
       wrappers get their own scroll area; a table that is not already inside
       one becomes its own scroll container. Both keep the page itself from
       scrolling sideways. */
    .table-wrap, .table-responsive, .tablewrap, .scroll-x, .table-scroll,
    .hmap-wrap, .matrix-wrap, .grid-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    :not(.table-wrap):not(.table-responsive):not(.tablewrap):not(.scroll-x):not(.hmap-wrap):not(.matrix-wrap):not(.grid-wrap)
      > table:not(.asar-cardable):not(.asar-matrix) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
    }

    /* ── Matrices ────────────────────────────────────────────────────────────
       A month grid or heatmap is read by scrolling with the first column frozen
       — the same interaction on a phone as on a desktop, just fewer columns in
       view. That only works while the element is still a real table: the
       display:block trick above turns off table layout and `position: sticky`
       on the first column silently stops holding. So matrices keep display:table
       and it is their WRAPPER that scrolls. */
    table.asar-matrix {
        display: table !important;
        width: auto !important;
        min-width: 100% !important;
        white-space: nowrap;
    }
    table.asar-matrix th,
    table.asar-matrix td { position: relative; }
    table.asar-matrix th:first-child,
    table.asar-matrix td:first-child,
    table.asar-matrix th.emp-th,
    table.asar-matrix td.emp-td {
        position: sticky !important;
        left: 0;
        z-index: 2;
        /* A frozen column over scrolling content must be opaque, or the columns
           passing underneath show through it. */
        background: var(--surface, #fff);
        box-shadow: 2px 0 4px rgba(0, 0, 0, .07);
        max-width: 42vw;
    }
    table.asar-matrix thead th:first-child { z-index: 3; }
    table { min-width: 0 !important; }
    th, td {
        padding: 8px 10px !important;
        font-size: .82rem !important;
    }

    /* ── Card view ───────────────────────────────────────────────────────────
       asar-mobile.js marks qualifying tables .asar-cardable and stamps each cell
       with data-label. Here each row becomes a card and each cell a labelled
       line. The DOM is unchanged, so buttons/links inside cells still work.
       body.asar-tables-plain returns everything to a scrolling table. */
    body:not(.asar-tables-plain) table.asar-cardable {
        display: block;
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0;
        background: none !important;
        border: 0 !important;
        white-space: normal;
    }
    body:not(.asar-tables-plain) table.asar-cardable thead { display: none; }
    body:not(.asar-tables-plain) table.asar-cardable tbody,
    body:not(.asar-tables-plain) table.asar-cardable tfoot { display: block; width: 100%; }

    body:not(.asar-tables-plain) table.asar-cardable tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 10px;
        padding: 4px 12px 8px;
        background: var(--surface, #fff);
        border: 1px solid rgba(120, 100, 200, .14);
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(60, 50, 120, .07);
    }

    body:not(.asar-tables-plain) table.asar-cardable tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        padding: 7px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #f2f0f9 !important;
        text-align: right;
        font-size: .85rem !important;
    }
    body:not(.asar-tables-plain) table.asar-cardable tbody td:last-child {
        border-bottom: 0 !important;
    }
    body:not(.asar-tables-plain) table.asar-cardable tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-muted, #726658);
        padding-top: 2px;
    }
    /* First column reads as the card's heading. */
    body:not(.asar-tables-plain) table.asar-cardable tbody td:first-child {
        font-weight: 700;
        font-size: .95rem !important;
        padding-top: 10px !important;
    }
    body:not(.asar-tables-plain) table.asar-cardable tbody td:first-child::before {
        padding-top: 5px;
    }
    /* Empty cells add nothing but noise on a phone. */
    body:not(.asar-tables-plain) table.asar-cardable tbody td:empty { display: none; }
    /* Control-only cells go full width with no label. */
    body:not(.asar-tables-plain) table.asar-cardable tbody td[data-actions]::before { content: none; }
    body:not(.asar-tables-plain) table.asar-cardable tbody td[data-actions] {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px !important;
    }
    /* A cardable table needs no scroll container. */
    body:not(.asar-tables-plain) .table-wrap:has(> table.asar-cardable),
    body:not(.asar-tables-plain) .table-responsive:has(> table.asar-cardable) {
        overflow-x: visible !important;
    }

    /* Table/Cards switch. */
    .asar-view-toggle {
        position: fixed;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        z-index: var(--z-sticky);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 14px !important;
        min-height: 38px;
        border: 1px solid rgba(120, 100, 200, .2);
        border-radius: 999px;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 18px rgba(60, 50, 120, .18);
        font: 700 .74rem/1 var(--font-ui, system-ui, sans-serif);
        color: var(--text, #2d241d);
        cursor: pointer;
    }
    .asar-view-toggle:active { transform: scale(.96); }

    /* ── Forms ───────────────────────────────────────────────────────────────
       16px minimum stops iOS Safari zooming in when a field takes focus. */
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100% !important;
    }
    input[type="text"], input[type="number"], input[type="date"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"], select, textarea {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    form .form-row, form .field-row, .form-grid {
        display: block !important;
    }
    label { display: block; }

    /* ── Touch targets ───────────────────────────────────────────────────────
       Sized for a fingertip, not a cursor. This deliberately does NOT include a
       bare `a`: most links here are inline inside sentences and table cells,
       where forcing a 40px box would wreck the line rhythm and gain nothing.
       Only things that present as controls are enlarged. */
    button, .btn, .hbtn, .button, a.button, a.btn, [role="button"],
    input[type="submit"], input[type="button"], input[type="reset"],
    .chip, .tag, .pill-btn, .action-btn, .icon-btn {
        min-height: 40px;
        padding: 9px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* A lone link in a table cell is an action, so it gets a real hit area. */
    td > a:only-child, td > form:only-child > button {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
    /* Checkboxes and radios are the smallest targets on any form. */
    input[type="checkbox"], input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    /* Text raised to a readable floor by asar-mobile.js. Several pages set
       7–10px inline, which no stylesheet selector can reach. */
    .asar-fs-min { font-size: 11px !important; line-height: 1.45 !important; }

    /* Rows that are a single spanning cell — empty states, group headings,
       totals banners. They are not records, so they are not cards. */
    body:not(.asar-tables-plain) table.asar-cardable tbody tr[data-fullrow] {
        display: block;
        background: none;
        border: 0;
        box-shadow: none;
        margin: 0 0 8px;
        padding: 0;
    }
    body:not(.asar-tables-plain) table.asar-cardable tbody tr[data-fullrow] td {
        display: block;
        text-align: center;
        font-size: .8rem !important;
        color: var(--text-muted, #726658);
        padding: 12px !important;
        border: 0 !important;
    }
    body:not(.asar-tables-plain) table.asar-cardable tbody tr[data-fullrow] td::before {
        content: none;
    }
    /* A header row that lives inside tbody rather than thead. */
    body:not(.asar-tables-plain) table.asar-cardable tbody tr[data-thead-row] {
        display: none;
    }

    /* Headings scale down so they stop wrapping into four lines. */
    h1 { font-size: 1.35rem !important; line-height: 1.25; }
    h2 { font-size: 1.15rem !important; line-height: 1.3; }
    h3 { font-size: 1rem   !important; }

    /* Long unbroken strings (codes, emails, URLs) must not widen the page. */
    td, th, p, div, span, a { overflow-wrap: anywhere; }

    /* Desktop-only chrome that has no place on a phone. */
    .desktop-only, .hide-mobile { display: none !important; }

    /* Modals fill the screen instead of overflowing it. */
    .modal, .modal-content, .dialog, .popup {
        max-width: 96vw !important;
        width: 96vw !important;
        max-height: 90vh !important;
        overflow-y: auto;
    }
}

/* ── Very small phones ──────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    .section-page, .section-shell, .dashboard-shell {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    th, td { padding: 6px 8px !important; font-size: .78rem !important; }
    h1 { font-size: 1.2rem !important; }
}

/* Respect the notch / home indicator when installed as an app. */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        body {
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
        }
    }
}