/* ==========================================================================
   AMWAJ PULSE — MOBILE / TABLET RESPONSIVE STABILIZATION — 2026-08-14
   --------------------------------------------------------------------------
   Loaded from base.html AFTER app.css. Every rule is scoped to phone/tablet
   widths; desktop (>= 1025px) renders exactly as before. No business markup,
   workflow, PDF or approval behaviour is touched.
   Rollback: remove this file's <link> from base.html (or the file itself).
   ========================================================================== */

@media (min-width: 901px) and (max-width: 1024px) {
    /* tablet keeps the two/three-across layout, without the min-content floor */
    .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    /* the base stylesheet already collapses to one column here; restate it
       with a 0-minimum so a wide table can never re-inflate the track */
    .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {

    /* --- 1. Admin panel cards were 930px wide on a 390px phone -------------
       .grid2/.grid3 use `1fr` tracks; a `1fr` track's minimum is min-content,
       and the Users card contains a table with min-width:900px (inside its own
       scroll wrap — but intrinsic sizing ignores overflow). The track
       therefore grew to 930px and html{overflow-x:hidden} CROPPED the excess:
       more than half of every admin card was simply unreachable.
       minmax(0,1fr) removes the min-content floor; the inner
       .table-scroll-wrap then does its job and scrolls the table. */
    .grid2 > *, .grid3 > * { min-width: 0; }
    .app-body .card { min-width: 0; max-width: 100%; }

    /* --- 2. Hero title carries the user's corporate email ------------------
       "mohammed.awad@aurora-pi.com- Dashboard" broke mid-word down the hero.
       break-word wraps at sensible points and the phone size is reduced so a
       long address no longer dominates the first screen. */
    .dash-title {
        overflow-wrap: break-word;
        word-break: normal;
        min-width: 0;
    }
    .dash-hero-row { flex-wrap: wrap; }
    .dash-hero-row > * { min-width: 0; }
    /* .dash-brand pins a fixed logo box beside the title; on phones the title
       block must own the leftover width or the address clips at the card edge
       (.dash-hero has overflow:hidden) */
    .dash-brand { min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
    .dash-brand > div:last-child { min-width: 0; flex: 1 1 240px; }

    /* --- 3. Wide request tables: keep every column, scroll internally,
           and make the swipe affordance visible ---------------------------- */
    .dash-table-wrap,
    .table-scroll-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;
        /* edge fade signals more columns to the right */
        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;
    }
    /* --- 3b. No pinned identifier column on phones -------------------------
       This block used to pin `td/th:first-child` with `position:sticky;
       left:0`. On a 390px screen that held the Request No column over the
       left ~230px while the remaining columns slid underneath it, so barely
       one column of request detail was ever readable.

       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.
       Every column now travels together inside the scroller above. */

    /* --- 4. Audit view (inline-styled template) ----------------------------
       Its table has no wrapper; audit_view.html now wraps it in .audit-scroll,
       a class that styles NOTHING at desktop widths, so the desktop audit page
       is pixel-identical while phones get a contained horizontal scroller. */
    .audit-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .audit-scroll > table { width: 100%; min-width: 900px; }
    /* audit values (timestamps, IPs) read as units; keep each on one line and
       let the wrapper's horizontal scroll do the work */
    .audit-scroll th, .audit-scroll td { white-space: nowrap; }
}

@media (max-width: 640px) {
    .dash-title { font-size: clamp(17px, 4.6vw, 22px); }
    /* the header nav chips keep every item; just tighten them so the nav
       doesn't dominate the first screen */
    .nav .nav-link { padding: 8px 12px; min-height: 40px; }
    .app-header-inner { row-gap: 6px; }
}