/* ==========================================================================
   ACCUREX PULSE — MOBILE / TABLET RESPONSIVE STABILIZATION — 2026-08-14
   --------------------------------------------------------------------------
   Loaded from base.html AFTER app.css/brand.css. All layout rules are scoped
   to <= 1024px; the desktop presentation (including the intentional
   page-xscroll admin layout at desktop widths) is unchanged. No workflow,
   approval, signature, PDF or data behaviour is touched.
   Rollback: remove this file's <link> from base.html.
   ========================================================================== */

@media (max-width: 1024px) {

    /* --- 1. Admin panel was a 1710px-wide horizontal band on phones --------
       .page-xscroll-body .grid2 collapses to `1fr` at <=1400px, but a `1fr`
       track's minimum is min-content and the users table declares
       min-width:1320px — so the single column inflated to 1710px and the
       whole admin page (forms included) had to be swiped through sideways.
       A 0-minimum track lets text and form fields wrap at the real viewport;
       only genuinely wide tables keep horizontal movement, inside their own
       card scroller below. */
    .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
    .grid2 > *, .grid3 > * { min-width: 0; }

    /* cards contain themselves; a card whose table is wider than the phone
       scrolls internally instead of stretching the page */
    .card {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* the paired top/bottom scrollbar strips only make sense when the body
       actually scrolls sideways; with the grid fixed they are empty 14px
       bars, so neutralise their height on phones (they remain on desktop) */
    .page-xscroll-top, .page-xscroll-bottom { display: none; }

    /* --- 2. Header/nav: keep every chip reachable, allow wrapping ---------- */
    .app-header-inner { flex-wrap: wrap; row-gap: 6px; }
    .app-header-inner > * { min-width: 0; }
    .nav { flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
    .nav .nav-link { min-height: 40px; }

    /* --- 3. Dash tables (monitor, inbox, my requests, report) -------------
       Analytical lists keep every column and scroll inside their wrap; the
       first column stays pinned so rows keep their identity, and an edge fade
       signals more columns to the right. */
    .table-scroll-wrap, .dash-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* keep the sideways swipe inside the table: it must not chain
           into the page or the browser back-swipe, and vertical page
           scrolling has to stay native */
        overscroll-behavior-x: contain;
        background:
            linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)) left/40px 100% no-repeat local,
            linear-gradient(to left,  #ffffff 30%, rgba(255,255,255,0)) right/40px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.18), rgba(15,23,42,0)) left/14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.18), rgba(15,23,42,0)) right/14px 100% no-repeat scroll,
            #ffffff;
    }
    /* The Request No column is NOT pinned on phones. It used to be
       `position:sticky; left:0`, which held it over the left ~230px of a
       390px screen while the other ten columns slid underneath - the monitor
       table was effectively unreadable on a phone.

       The rules are deleted rather than overridden: `thead th` still takes
       its vertical `position:sticky; top:...` from app.css, and neutralising
       first-child here would have detached that one header cell from its row.
       All columns now move together inside the scroller above. */

    /* --- 4. Hero rows and long names --------------------------------------- */
    .dash-hero-row, .dash-brand { flex-wrap: wrap; }
    .dash-hero-row > *, .dash-brand > * { min-width: 0; }
    .dash-title { overflow-wrap: break-word; min-width: 0; }
    .dash-sub { overflow-wrap: break-word; }

    /* --- 5. Filter rows stack cleanly -------------------------------------- */
    .dash-filter-row { grid-template-columns: 1fr; }
    .dash-filter-row > * { min-width: 0; }
    .dash-filter-item input,
    .dash-filter-item select { width: 100%; min-height: 44px; }
    .dash-reset-btn { min-height: 44px; }
}

@media (max-width: 640px) {
    .app-content { padding-left: 12px; padding-right: 12px; }
    .card { padding: 14px; }
    .dash-title { font-size: clamp(17px, 4.6vw, 22px); }
}

/* --- 6. Request detail (read-only view, #approval-system-2-form) ----------
   The sticky exec header grid (1.2fr 1fr auto) and its action row rendered
   356px wide but offset to x=52, so their right edges sat at 408px on a 390px
   phone — titles and the APPROVAL CHAIN / DOWNLOAD / PRINT buttons were cut.
   Single-column the header and let every block own the full width. */
@media (max-width: 1024px) {
    /* request_view loads its own stylesheet stack inside the content block,
       AFTER this file — !important is required for these few phone rules to
       outrank those later equal-specificity declarations. */
    #approval-system-2-form.system1-ui .p1-exec-header {
        grid-template-columns: minmax(0, 1fr) !important;
        position: static !important; /* sticky header ate viewport height on phones */
    }
    #approval-system-2-form.system1-ui .p1-exec-header > * {
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
    }
    #approval-system-2-form.system1-ui .p1-exec-title .form-title {
        overflow-wrap: break-word;
    }
    #approval-system-2-form.system1-ui .p1-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }
    #approval-system-2-form.system1-ui .p1-actions > * {
        max-width: 100%;
        min-height: 44px;
    }
    #approval-system-2-form.system1-ui .p1-route-card {
        max-width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }
    #approval-system-2-form.system1-ui .p1-route-trigger {
        max-width: 100%;
        white-space: normal;
        min-height: 44px;
    }
    #approval-system-2-form.system1-ui .p1-exec-meta { max-width: 100%; min-width: 0; }
}

/* --- 7. Monitor hero: the brand logo squeezed the title to a sliver -------- */
@media (max-width: 640px) {
    .dash-brand-media { flex: 0 0 auto; }
    .dash-brand-media img, .dashboard-brand-logo { max-width: 120px; height: auto; }
    .dashboard-hero-copy { flex: 1 1 180px; min-width: 0; }
}

/* --- 8. Small phones (<= 480px): hero copy owns a full line ---------------
   At 320px the brand logo consumed the hero row and the title/subtitle column
   was squeezed to 10px, rendering vertically. */
@media (max-width: 480px) {
    .dash-brand, .dash-hero-row { flex-wrap: wrap; }
    .dashboard-hero-copy,
    .dash-brand > div:last-child { flex: 1 1 100%; min-width: 0; }
    .dash-title, .dash-sub { width: 100%; min-width: 0; }
}