/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Safety Net — Andcorp Autos
   Global CSS overrides that prevent the most common mobile layout bugs
   without forcing us to refactor every individual page.

   Loaded via includes/pwa-head.php so it ships on every public page.

   Strategy: only override when a constraint is being violated. Keep specificity
   low so any page-specific tweaks still win where appropriate.

   v2 (2026-06-11): Adds admin-table sticky-action column, scroll-shadow hint,
   header-button-row wrap fixes, KPI grid auto-collapse, and Bootstrap modal
   safe-area handling.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Universal box model + viewport safety ─────────────────────────── */
html, body{
    max-width: 100%;
    overflow-x: hidden;
}
*, *::before, *::after{
    box-sizing: border-box;
}

/* ── 2. Images never overflow their container ─────────────────────────── */
img, video, iframe, picture, svg{
    max-width: 100%;
    height: auto;
}

/* ── 3. Long words / URLs wrap instead of overflowing ─────────────────── *
   CRITICAL: scope these to specific marketing/page-body text classes ONLY.
   Generic `h1..p, a, label` rules are INHERITED into table cells, where
   they cause every column header to fragment letter-by-letter on phones.
   Tables get their own dedicated handling in §13/§38 below. */
@media (max-width: 768px){
    .fw-hello, .fw-sub, .auth-brand p, .brand-content p, .lp-hero p, .offline p{
        overflow-wrap: break-word;
        word-break: normal;
    }
    .table-responsive, .table-wrap{
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    pre, code{
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ── 4. Sidebar overlay must not block clicks on hamburger toggle ─────── */
.sb-overlay{ z-index: 90 !important; }
.sb-toggle{  z-index: 250 !important; }
aside.sb{    z-index: 200 !important; }

/* ── 5. Modals/dialogs never extend beyond viewport on phones ─────────── */
@media (max-width: 768px){
    .modal-dialog{
        max-width: 96vw !important;
        margin: .75rem auto !important;
    }
    .modal-content{
        max-height: 90vh !important;
    }
    .modal-body{
        max-height: 65vh;
        overflow-y: auto;
    }
    /* Bootstrap dropdown menus should never escape the screen */
    .dropdown-menu{
        max-width: calc(100vw - 1rem);
        overflow-x: hidden;
    }
    /* Bootstrap offcanvas in our app uses .offcanvas — respect safe area */
    .offcanvas{ max-width: 92vw; }
}

/* ── 6. Forms and inputs are always at least usable on touch ──────────── */
input, select, textarea, button{
    max-width: 100%;
}
input, select, textarea{
    font-size: 16px;  /* prevents iOS zoom-on-focus */
}
@media (min-width: 768px){
    /* Restore design intent on larger screens (16px would look oversized) */
    input, select, textarea{ font-size: .9rem; }
    input.form-control-sm, select.form-select-sm{ font-size: .82rem; }
}

/* ── 7. Grid containers shrink, not overflow ──────────────────────────── */
@media (max-width: 480px){
    [class*="-grid"], .stats, .kpi-grid, .kpi-row, .fin-rows{
        min-width: 0;
    }
    [class*="-grid"] > *, .stats > *, .kpi-grid > *{
        min-width: 0;
    }
}

/* ── 8. Decorative patterns hidden on very small screens ──────────────── */
@media (max-width: 380px){
    .auth-brand::after{ display: none; }
}

/* ── 9. Hero titles must not be sliced by the hamburger button ────────── */
@media (max-width: 991px){
    .hero h1, .hero .hero-title{
        padding-left: 3rem;
    }
}

/* ── 10. iOS safe-area respect for fixed elements + bottom padding ───── */
body{ padding-bottom: env(safe-area-inset-bottom); }
.sb-toggle, .fab, .sticky-bottom{
    top: max(.65rem, env(safe-area-inset-top));
}

/* ── 11. Smooth scrolling ─────────────────────────────────────────────── */
html{ scroll-behavior: smooth; }

/* ── 12. Very narrow screens (<360px) tighter padding ─────────────────── */
@media (max-width: 360px){
    .content, main.content, .main > .content{
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }
    .gc, .glass-card, .card{ border-radius: 12px; }
    .gc-b{ padding: .85rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN-SPECIFIC FIXES — handle Bootstrap-based admin pages
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 13. Admin tables: keep cells readable, force horizontal scroll ─── *
   Root cause we're fixing: when a wide Bootstrap table is rendered inside
   `.table-responsive` with no `min-width`, the browser auto-shrinks every
   column to fit the viewport. Headers concatenate ("CATEGORYPRIORITY...")
   and numeric values bleed into the next column. Fix: force the table to
   keep its natural minimum width so the wrapper actually scrolls. */
@media (max-width: 991px){
    .main .table{
        font-size: .78rem !important;
    }
    .main .table-responsive{
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }
    /* Give every admin table a hard minimum so .table-responsive scrolls.
       760px keeps 6-7 columns readable; tables already wider via inline
       style (orders.php uses min-width:1060px) stay as authored. */
    .main .table-responsive > table,
    .main .table-responsive > .table{
        min-width: 760px !important;
        width: auto !important;
        table-layout: auto !important;
    }
    .main .table th,
    .main .table td{
        padding: .55rem .65rem !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 240px;
    }
    /* Allow these columns to stay readable: thumbnails, badges, IDs */
    .main .table img, .main .table .badge{
        max-width: none;
    }
    /* "Actions" column (last column) sticks to right while user scrolls
       the rest of the table — buttons are always visible. */
    .main .table-responsive table thead th:last-child,
    .main .table-responsive table tbody td:last-child{
        position: sticky !important;
        right: 0 !important;
        background: #ffffff !important;
        box-shadow: -8px 0 12px -6px rgba(15,23,42,.22) !important;
        z-index: 3 !important;
        max-width: none;
    }
    .main .table-responsive table thead th:last-child{
        background: #F8FAFC !important;
    }
    .main .table-responsive table tbody tr:hover td:last-child{
        background: #F8FAFC !important;
    }
    /* Striped rows: keep sticky bg consistent with the row stripe */
    .main .table-striped tbody tr:nth-of-type(odd) td:last-child{
        background: #fdfdfe !important;
    }
    /* Button groups inside table cells */
    .main .table .btn-group .btn,
    .main .table .btn-group-sm .btn{
        padding: .28rem .45rem !important;
        font-size: .72rem !important;
    }
    .main .table .btn-group{
        white-space: nowrap;
    }
}

/* ── 14. Scroll-shadow hint: tells users a table is scrollable ────────── */
.main .table-responsive{
    background:
        /* Right edge shadow that shows when scrolled-LEFT (more content right) */
        linear-gradient(to left, rgba(15,23,42,.08), transparent 24px) right center / 24px 100% no-repeat,
        /* Left edge shadow that shows when scrolled-RIGHT (more content left) */
        linear-gradient(to right, rgba(15,23,42,.08), transparent 24px) left center / 24px 100% no-repeat,
        #fff;
    background-attachment: local, local, scroll;
    border-radius: inherit;
}

/* ── 15. Page header button rows wrap gracefully ──────────────────────── *
   The admin page-header pattern is:
       <div class="d-flex flex-wrap ... justify-content-between gap-3">
           <div>title + subtitle</div>
           <div class="d-flex gap-2">btn btn btn btn</div>
       </div>
   On a 380px phone, 4 buttons get forced into 4 equal slots that are
   each too narrow for the label, so text wraps vertically and the "+"
   button gets sliced. Fix: let each button be its natural width and wrap
   naturally onto the next row. */
@media (max-width: 767px){
    .main .d-flex.flex-wrap.align-items-center.justify-content-between{
        gap: .6rem !important;
    }
    .main .d-flex.flex-wrap.align-items-center.justify-content-between > div:first-child{
        flex: 1 1 100% !important;
        min-width: 0;
    }
    .main .d-flex.flex-wrap.align-items-center.justify-content-between > div:last-child{
        flex: 1 1 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: .4rem !important;
        justify-content: flex-start !important;
    }
    /* Buttons SIZE TO THEIR CONTENT — do not force flex-grow */
    .main .d-flex.flex-wrap.align-items-center.justify-content-between > div:last-child > *{
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }
    .main h4.fw-bold{ font-size: 1.05rem; }
    .main .btn-sm{ font-size: .72rem; padding: .42rem .7rem; }
    .main .btn-sm i{ font-size: .75rem; }
}

/* ── 16. Bootstrap card-bodies on mobile: less padding, no scroll-jail ── */
@media (max-width: 575px){
    .main .card-body{ padding: .85rem !important; }
    .main .card-body.py-3{ padding-top: .65rem !important; padding-bottom: .65rem !important; }
    .main .card-footer{ padding: .65rem .85rem !important; }
}

/* ── 17. Bootstrap grid: gutters were too tight on phones, opens up ──── */
@media (max-width: 575px){
    .main .row.g-2 > [class^="col-"], .main .row.g-3 > [class^="col-"]{
        margin-bottom: .35rem;
    }
}

/* ── 18. KPI tile grids that use Bootstrap col-* often need 2-col on phone */
@media (max-width: 575px){
    .main .row [class*="col-md-"][class*="col-6"],
    .main .row [class*="col-sm-6"]{
        margin-bottom: .5rem;
    }
}

/* ── 19. Pagination doesn't wrap awkwardly on mobile ──────────────────── */
@media (max-width: 480px){
    .main .pagination{
        flex-wrap: wrap;
        justify-content: center;
        gap: .15rem;
    }
    .main .pagination .page-link{
        padding: .28rem .55rem;
        font-size: .72rem;
    }
}

/* ── 20. Inline form-groups (Bootstrap input-group) keep their shape ── */
@media (max-width: 480px){
    .input-group-sm > .form-control,
    .input-group-sm > .form-select{
        min-width: 0;
    }
}

/* ── 21. Admin sidebar overlay matches blue theme ─────────────────────── */
.sb-overlay{
    background: rgba(19,56,176,.55) !important;
    backdrop-filter: blur(3px);
}

/* ── 22. Bootstrap badges on mobile: smaller so they don't add row-height */
@media (max-width: 575px){
    .main .badge{
        font-size: .62rem;
        padding: .25em .5em;
    }
}

/* ── 23. Hamburger toggle on admin pages uses brand royal blue ───────── */
@media (max-width: 991px){
    .sb-toggle{
        background: rgba(19,56,176,.94) !important;
        color: #F1F5F9 !important;
        border: 1px solid rgba(255,255,255,.16) !important;
    }
}

/* ── 24. Sidebar uses the brand blue gradient (override sidebar.css) ─── */
aside.sb{
    background: linear-gradient(180deg,#1338B0 0%,#1E40AF 50%,#2563EB 100%) !important;
}

/* ── 25. Title rows with status/badge: never let the badge wrap ──────── */
@media (max-width: 575px){
    .main .badge-status, .main .badge-sm{
        white-space: nowrap;
    }
}

/* ── 26. Tab nav: always scrollable on mobile (no wrapping pillbox) ──── */
@media (max-width: 767px){
    .main .nav-tabs, .main .nav-pills{
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .main .nav-tabs .nav-link, .main .nav-pills .nav-link{
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ── 27. Big number cards / stat counters: cap font size on mobile ───── */
@media (max-width: 575px){
    .main .display-1, .main .display-2, .main .display-3,
    .main .display-4, .main .display-5, .main .display-6{
        font-size: 1.65rem !important;
    }
}

/* ── 28. Long select dropdowns shouldn't extend past viewport ────────── */
select option{
    max-width: 95vw;
}

/* ── 29. Image previews / thumbnails in admin lists: cap on phone ────── */
@media (max-width: 575px){
    .main .table img,
    .main .card-body img.thumbnail,
    .main img.preview-thumb{
        max-width: 60px;
        max-height: 60px;
    }
}

/* ── 30. Bootstrap alerts on mobile: tighter padding, smaller dismiss ── */
@media (max-width: 575px){
    .main .alert{
        padding: .65rem .85rem .65rem .85rem;
        font-size: .78rem;
    }
    .main .alert .btn-close{
        padding: .55rem;
    }
}

/* ── 31. KPI/stat grids: auto-collapse on narrow screens ──────────────── *
   The admin has many tile grids hard-coded to repeat(4/5/6,1fr). On
   phones they squish into illegible thumbnails. Force a graceful collapse
   without requiring each page to declare its own breakpoints. */
@media (max-width: 991px){
    .tk-tiles, .qr-kpi, .dp-tiles, .cu-tiles, .et-tiles,
    .stat-grid, .stmt-summary, .tm-stats, .ord-tiles{
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: .65rem !important;
    }
}
@media (max-width: 480px){
    .tk-tiles, .qr-kpi, .dp-tiles, .cu-tiles, .et-tiles,
    .stat-grid, .stmt-summary, .tm-stats, .ord-tiles{
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .55rem !important;
    }
    /* 6+ column grids collapse to 3 on phone to preserve density */
    .dp-tiles, .tm-stats{
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 360px){
    .tk-tiles, .qr-kpi, .cu-tiles, .et-tiles, .stat-grid,
    .stmt-summary, .ord-tiles, .stats{
        grid-template-columns: 1fr !important;
    }
}

/* ── 32. Stat-card / KPI tile padding shrinks on mobile ───────────────── */
@media (max-width: 575px){
    .main .stat-card, .main .ord-tile, .main .tk-tile,
    .main .qr-kpi-tile, .main .dp-tile, .main .cu-tile,
    .main .et-tile, .main .stat-tile{
        padding: .8rem .95rem !important;
    }
    .main .stat-card h3, .main .ord-tile-val, .main .tk-val,
    .main .qr-val, .main .dp-val, .main .cu-val, .main .et-val{
        font-size: 1.15rem !important;
    }
    .main .stat-card .stat-icon, .main .ord-tile-icon{
        width: 34px !important; height: 34px !important;
        font-size: .95rem !important; margin-bottom: .5rem !important;
        border-radius: 9px !important;
    }
}

/* ── 33. Filter pill rows stay one-row + scroll horizontally on phone ── */
@media (max-width: 767px){
    .ord-pills, .tk-pills, .qr-pills, .dp-pills,
    .nav-pills.filter-pills, [class*="-pills"]{
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .2rem;
        scrollbar-width: thin;
    }
    .ord-pills::-webkit-scrollbar,
    .tk-pills::-webkit-scrollbar,
    .qr-pills::-webkit-scrollbar,
    .dp-pills::-webkit-scrollbar,
    [class*="-pills"]::-webkit-scrollbar{
        height: 3px;
    }
    .ord-pill, .tk-pill, .qr-pill, .dp-pill{
        flex-shrink: 0 !important;
        white-space: nowrap;
    }
}

/* ── 34. Universal hero left-margin so the hamburger never overlaps ──── */
@media (max-width: 991px){
    .main .dash-hero,
    .main .ord-hero,
    .main .sh-hero,
    .main .sp-hero,
    .main .tk-hero,
    .main .qr-hero,
    .main .dp-hero,
    .main [class$="-hero"]{
        margin-left: 2.6rem;
    }
}
@media (max-width: 575px){
    .main .dash-hero,
    .main .ord-hero,
    .main [class$="-hero"]{
        padding: 1.1rem 1rem !important;
        border-radius: .85rem !important;
        margin-bottom: 1rem !important;
    }
    .main [class$="-hero"] h1,
    .main .dash-hero h1,
    .main .ord-hero h1{
        font-size: 1.1rem !important;
    }
    .main [class$="-hero"] .lead,
    .main [class$="-hero"] .hero-sub,
    .main [class$="-hero"] p{
        font-size: .72rem !important;
    }
}

/* ── 35. Bootstrap container-fluid sane padding on phone ──────────────── */
@media (max-width: 575px){
    .main .container-fluid{
        padding-left: .85rem !important;
        padding-right: .85rem !important;
        padding-top: .85rem !important;
    }
}

/* ── 36. Status-manager icon grid shrinks gracefully ──────────────────── */
@media (max-width: 575px){
    .icon-grid{
        grid-template-columns: repeat(6, 1fr) !important;
    }
}
@media (max-width: 380px){
    .icon-grid{
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ── 37. Bootstrap form rows: stack columns on mobile cleanly ─────────── */
@media (max-width: 575px){
    .main .row.g-2 [class*="col-md-"]{
        margin-bottom: .3rem;
    }
}