/* =====================================================================
   ZAYN ERP — Global mobile-responsive layer
   Loaded AFTER style.css (see includes/header.php). Desktop is untouched:
   every rule here lives inside a max-width media query. Do NOT put desktop
   styling in this file. Breakpoints:
     1200px  rate-board compacts (labels drop, numbers stay)
     1024px  tablet / topbar may wrap / where wide tables start to overflow
      991px  existing off-canvas sidebar drawer (defined in style.css)
      768px  main mobile (forms, buttons, cards)
      430px  compact phone
   ===================================================================== */

/* ---- 0. Global safety primitives ----------------------------------
   Only truly desktop-neutral declarations live outside a media query.
   box-sizing already matches Bootstrap's global reset (no visual change). */
:root{ --mobile-pad:14px; }
*,*::before,*::after{ box-sizing:border-box; }

/* Media must never widen the page — scoped to mobile/tablet so desktop
   rendering stays pixel-identical. */
@media (max-width:1024px){
  img,svg,video{ max-width:100%; height:auto; }
  canvas{ max-width:100%; }
}

/* =====================================================================
   1. TABLE OVERFLOW  (root cause #1)
   .table-card / .card-body have NO overflow-x, and their tables carry
   6–12 nowrap columns with inline min-widths. We give each table its own
   horizontal-scroll container instead of touching .table-card (which many
   pages force to overflow:visible so row action dropdowns can escape).

   - .table-scroll  : explicit wrapper we add around unwrapped tables.
                      Transparent on desktop (renders exactly as before);
                      scrolls only <=1024px.
   - Fallback rules : any still-unwrapped table that is a DIRECT child of
                      .table-card / .card-body, plus DataTables' generated
                      wrapper, get horizontal scroll on <=1024px. A table
                      wrapped in .table-scroll is no longer a direct child,
                      so the two mechanisms never double up.
   ===================================================================== */
.table-scroll{ width:100%; max-width:100%; }
/* Explicitly-wrapped wide tables scroll inside their wrapper all the way up
   to small-laptop widths (sidebar docked leaves only ~780-1030px of content,
   which 10-12 column sheets exceed). From 1280px the wrapper is transparent
   and desktop renders exactly as before. Applies ONLY to .table-scroll —
   ordinary tables that fit are untouched, and the direct-child fallback
   below stays scoped to <=1024px. */
@media (max-width:1279px){
  .table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
}
@media (max-width:1024px){
  /* Long-tail: unwrapped tables sitting straight inside a card. Covers
     js-datatable tables too — on this install DataTables initialises WITHOUT
     building its .dataTables_wrapper, so the table stays a direct child of
     .table-card. (When a wrapper IS built the table is no longer a direct
     child, so this rule steps aside and the wrapper rule below takes over.) */
  .table-card > table,
  .table-card > table.sheet,   /* (0,2,1): outranks the per-page inline
     'table.sheet{overflow:visible}' dropdown-escape override, which loads
     after this file and would otherwise re-open the overflow on mobile.
     Dropdowns still escape via responsive.js's fixed-strategy Popper. */
  .card-body  > table.sheet,
  .card-body  > table.table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* DataTables: scroll the generated wrapper (controls stay put, the wide
     table body scrolls). Preserves search / sort / export untouched. */
  .table-card .dataTables_wrapper,
  .card-body  .dataTables_wrapper{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Row action dropdowns (More / Manage) live inside a scroll container once
   we wrap the table, which would clip the open menu. responsive.js switches
   those dropdowns to Popper's fixed strategy so the menu escapes the clip;
   this rule just makes sure a clipped menu is at least reachable. */
@media (max-width:1279px){
  .table-scroll .dropdown-menu.show,
  .table-card .dropdown-menu.show{ z-index:1055; }
}

/* ---- 1b. MOBILE TABLE READABILITY (shared treatment, batch 1) --------
   Inside a horizontal scroller, squeezing columns is pointless — width is
   free. Without this, the browser compresses every column to its minimum
   and long values wrap hard ("19-JULY-2026" on three lines, "Wajaale
   warehouse" on two), bloating row height while the scroll area sits
   unused. Cells therefore keep their natural single-line width and the
   surplus goes to the scroller. Applies to every scroll mechanism we use:
   .table-scroll wrappers AND the direct-child fallback tables. */
@media (max-width:1279px){
  .table-scroll th,
  .table-scroll td{ white-space:nowrap; }
}
@media (max-width:1024px){
  .table-card > table th,
  .table-card > table td,
  .card-body  > table.sheet th,
  .card-body  > table.sheet td,
  .card-body  > table.table th,
  .card-body  > table.table td{ white-space:nowrap; }
}

/* Right-edge fade: a sticky, zero-width overlay inside the scroller that
   signals "more columns this way". Flex layout gives the ::after the exact
   table height; position:sticky pins it to the visible right edge while
   the content scrolls beneath it. margin-left:-26px keeps net width zero,
   so it adds no scroll length; pointer-events:none keeps the last column
   clickable. The fade tint matches --bg so it reads as the page edge. */
@media (max-width:1279px){
  /* When DataTables builds its wrapper inside .table-scroll (chrome fixed
     by loading buttons.print.js), the wrapper's controls must NOT scroll
     away with the table: hand the x-scroll to the dom-template's .col-12
     row that holds only the table, and give it the same nowrap+fade
     treatment. The outer .table-scroll then acts as a plain block. */
  .table-scroll:has(> .dataTables_wrapper){ display:block; overflow-x:visible; }
  .table-scroll:has(> .dataTables_wrapper)::after{ content:none; }
  .dataTables_wrapper .col-12{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    display:flex;
  }
  .dataTables_wrapper .col-12 > table{ flex:0 0 auto; }
  .dataTables_wrapper .col-12::after{
    content:""; flex:0 0 26px; margin-left:-26px; position:sticky; right:0;
    background:linear-gradient(to left, rgba(248,250,252,.92), rgba(248,250,252,0));
    pointer-events:none;
  }
  .dataTables_wrapper th,
  .dataTables_wrapper td{ white-space:nowrap; }

  /* Bootstrap's .table-responsive wrappers (detail pages, editable grids)
     get the identical treatment so every scroller in the app behaves the
     same: nowrap cells, flex sizing, sticky right-edge fade. Same
     DataTables :has() guard as .table-scroll above. */
  .table-responsive th,
  .table-responsive td{ white-space:nowrap; }
  .table-responsive:not(:has(> .dataTables_wrapper)){ display:flex; }
  .table-responsive > table{ flex:0 0 auto; }
  .table-responsive:not(:has(> .dataTables_wrapper))::after{
    content:""; flex:0 0 26px; margin-left:-26px; position:sticky; right:0;
    background:linear-gradient(to left, rgba(248,250,252,.92), rgba(248,250,252,0));
    pointer-events:none;
  }

  .table-scroll{ display:flex; }
  .table-scroll > table{ flex:0 0 auto; }
  .table-scroll::after{
    content:"";
    flex:0 0 26px;          /* basis is the main-axis size in flex, so the
                               strip must get its 26px here (width loses) */
    margin-left:-26px;      /* …and the negative margin cancels it out, so
                               net scroll length gained: zero */
    position:sticky;
    right:0;
    background:linear-gradient(to left, rgba(248,250,252,.92), rgba(248,250,252,0));
    pointer-events:none;
  }
}

/* =====================================================================
   2. TOPBAR OVERFLOW  (root cause #2)
   .topbar is a sticky single flex row with no wrap; its children are all
   nowrap (rate-board, location chip, View-as, user). Without help the row
   overflows every page on phones AND in the 992-1024px band, where the
   sidebar is docked (content = width - 248px) but the topbar could not
   wrap. Let it wrap and let children shrink up to 1024px. Nothing is
   deleted — rate board, location chip, View-as and the user menu all stay
   visible; they wrap to a second line and/or compact.

   Deterministic 2-row compact layout (mobile cleanup batch 1):
   includes/header.php was restructured so the user-menu dropdown is now a
   DIRECT sibling of .topbar-right (previously nested as its last child) —
   a markup change, not display:contents (keeps every element in the normal
   accessibility tree with no special-case rendering). With that DOM shape,
   [toggle][title][user] are the three items meant for row 1: toggle and
   user are content-sized (flex:0 0 auto) and title has flex:1 1 auto so
   it grows to fill whatever space is left between them. .topbar-right
   gets flex-basis:100%, which can never share a row with anything else,
   so it is always forced onto its own line — but because it sits BEFORE
   .topbar-user in the DOM, it also needs an explicit `order:9` (below):
   flex line-breaking is strictly order-then-DOM, one line at a time with
   no look-ahead, so without that `order` the 100%-basis item would open
   row 2 by itself and push the (later, still order:0) user menu to an
   otherwise-empty row 3. With .topbar-right pushed to the back of the
   flex order, row 1 always finishes with [toggle, title, user] before
   row 2 opens with rate board + location + role-preview control — same
   controls, same behavior, shorter header. Desktop (>1024px) is untouched:
   this whole block lives inside the max-width query, and outside it every
   element keeps `order:0`/DOM order, i.e. the exact same visual sequence
   as before the markup change. */
@media (max-width:1200px){
  /* Rate board compacts early: drop the tiny uppercase labels, keep the
     icon + both numbers, so the right cluster fits beside a docked
     sidebar without pushing the user menu off-screen. */
  .rate-board .rb-lbl{ display:none; }
  .rate-board .rb-seg{ padding:4px 9px; }
}
@media (max-width:1024px){
  .topbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    row-gap:6px;
    column-gap:8px;
    padding:8px var(--mobile-pad);
    height:auto;
    min-height:0;
  }
  .topbar .sidebar-toggle{
    min-width:40px;
    min-height:40px;
  }
  .topbar .page-title{
    flex:1 1 auto;
    min-width:0;
    font-size:1.02rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Row 2: forced onto its own line by flex-basis:100%. `order` is required
     here — .topbar-right sits BEFORE .topbar-user in the DOM, and the flex
     line-breaking algorithm assigns lines strictly in flex order (it never
     looks ahead), so without this an earlier 100%-basis item would consume
     row 2 entirely and push .topbar-user (which follows it in the DOM) to
     a now-empty row 3. Giving it the highest order value here makes it
     resolve last regardless of DOM position, so row 1 always finishes with
     [toggle, title, user] before row 2 opens. */
  .topbar-right{
    order:9;
    flex:1 1 100%;
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:6px 8px;
    row-gap:6px;
  }
  .topbar-right > *{ min-width:0; }
  /* Row 1 trailing controls: View-as / Exit-preview (admin only) then the
     user menu. Both are now DOM siblings of .topbar-right (moved out of it
     in header.php) so they share row 1 with the toggle+title; .topbar-right
     (order:9) still drops to row 2. Content-sized so they never grow. */
  .topbar-viewas,
  .topbar-user{ flex:0 0 auto; }
  .topbar-viewas .user-btn,
  .topbar-user .user-btn{ min-height:40px; }
  /* rate board may wrap its two segments instead of forcing a wide pill */
  .rate-board{ flex-wrap:wrap; max-width:100%; }
  .loc-chip{
    max-width:46vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
@media (max-width:430px){
  /* Compact: drop the rate-board text labels, keep the numbers + icon. */
  .rate-board .rb-lbl{ display:none; }
  .loc-chip{ max-width:38vw; }
  .topbar{ padding:8px 12px; column-gap:6px; }
}

/* ---- 2b. COMPACT PHONE HEADER (<=768px) ---------------------------
   Extra tightening on top of the <=1024px 2-row layout above: smaller
   rate-board/loc-chip pills and a smaller avatar so row 2 stays lean on
   narrow phones. No structural change here — row assignment is already
   fully decided by the <=1024px rules; this tier only tightens spacing. */
@media (max-width:768px){
  .topbar{ padding:6px var(--mobile-pad); }
  .rate-board .rb-seg{ padding:2px 8px; }
  .rate-board .rb-val{ font-size:.8rem; }
  .rate-board .rb-ico{ padding:0 7px; font-size:.85rem; }
  .loc-chip{ padding:3px 10px; font-size:.75rem; }
  .topbar .user-btn{ padding:3px 10px 3px 3px; }
  .topbar .avatar{ width:32px; height:32px; }
}

/* =====================================================================
   3. SIDEBAR DRAWER  (reuse the existing 991px off-canvas system)
   style.css already ships translateX(-100%) / .open / .sidebar-backdrop.show
   and main.js toggles them. We only add: the 82vw / max 300px width, a body
   scroll-lock (class toggled by responsive.js), and internal scroll.
   ===================================================================== */
@media (max-width:991px){
  .sidebar{
    width:82vw;
    max-width:300px;
    height:100%;
    max-height:100vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Lock the page behind the open drawer (class set in responsive.js). */
  body.sidebar-open{ overflow:hidden; }
  body.sidebar-open .main-wrap{ overflow:hidden; }
}

/* =====================================================================
   4. FORMS, INPUTS, BUTTONS
   ===================================================================== */
@media (max-width:768px){
  /* Prevent iOS focus-zoom. !important is required here: style.css and the
     per-page <style> blocks set smaller sizes with higher specificity
     (.toolbar .fld .form-control, the compact-grid !important layer, the
     -sm variants). Mobile-only, so desktop typography is untouched. Scoped
     to Bootstrap controls so the raw <input> cells of the editable grids
     keep their dense layout. */
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  .toolbar .fld .form-control,
  .toolbar .fld .form-select,
  .input-group > .form-control,
  .input-group > .form-select{ font-size:16px !important; }

  /* Stack Bootstrap grid columns fully; kill leftover fixed field widths. */
  .row > [class*="col-"]{ min-width:0; }

  /* Action rows wrap instead of overflowing. */
  .page-actions,
  .t-actions,
  .btn-group.flex-wrap,
  .d-flex.gap-2{ flex-wrap:wrap; }
  .page-actions{ gap:8px; }

  /* Comfortable touch targets. */
  .btn{ min-height:40px; }
  .btn-sm{ min-height:36px; }
  .nav-link,
  .dropdown-item{ min-height:40px; display:flex; align-items:center; }
  .table-scroll .btn-sm,
  .table-card .btn-sm{ min-height:32px; }   /* keep dense row-action buttons */
}
@media (max-width:430px){
  /* Full-width primary actions on the smallest screens. */
  .page-actions .btn{ flex:1 1 auto; }
}

/* ---- 4b. COMPACT FILTER TOOLBARS (batch 1) --------------------------
   The 767px stacking in style.css already gives 2-per-row fields; this
   tier only removes dead vertical space around them: tighter row gaps,
   the title strip on its own full line, and — on the smallest phones —
   action buttons sharing rows evenly instead of a ragged cluster. All
   fields, labels and buttons are preserved; touch heights unchanged. */
@media (max-width:768px){
  .toolbar{ row-gap:6px; padding:10px 12px; margin-bottom:12px; }
  .toolbar .toolbar-head{ flex:1 1 100%; margin-right:0; }
  .toolbar .fld{ gap:1px; }
  .toolbar .t-actions{ gap:6px; row-gap:6px; }
}
@media (max-width:430px){
  /* Even button rows: two per line, the odd one stretches full width. */
  .toolbar .t-actions .btn{ flex:1 1 calc(50% - 3px); justify-content:center; }
}

/* =====================================================================
   5. CARDS / CONTAINERS / SPACING
   ===================================================================== */
@media (max-width:768px){
  .content{ padding-left:var(--mobile-pad); padding-right:var(--mobile-pad); }
  .card-body{ padding:14px; }
  .kpi{ min-width:0; }
  /* Dashboard KPI cards (verified visible & correct — display-only
     compaction): slimmer padding + icon so six stacked cards take less
     vertical space before the charts. Values/calculations untouched. */
  .kpi{ padding:14px 16px; gap:12px; }
  .kpi-icon{ width:44px; height:44px; font-size:1.25rem; }
  .kpi-value{ font-size:1.35rem; }
  /* Summary-card grids (purchase_orders / shipments define
     .po-cards{grid-template-columns:repeat(4|5,1fr)} inline): 1fr tracks
     keep a min-content floor, so the uppercase labels force the grid wider
     than the phone. Re-track to 2-up with minmax(0,1fr), which removes the
     min-content floor — the real overflow source — instead of hiding it. */
  .po-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .po-card{ min-width:0; }
  /* PO view four-status panel: still FOUR separate indicators (locked rule),
     re-tracked 2x2 so they fit a phone instead of overflowing the page. */
  .status-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .status-grid .st{ min-width:0; }
  /* items/add "quick actions" bar: each .qa-grp is a rigid label+input+
     select+button flex row (~475px) — wider than a phone even though the
     outer .quick-actions wraps. Let the group wrap internally. */
  .quick-actions .qa-grp{ flex-wrap:wrap; max-width:100%; min-width:0; }
  /* Filter toolbars already stack at 767px in style.css; make sure fields
     can shrink at the 768 edge too. */
  .toolbar .fld{ min-width:0; }
  /* One-system rhythm (batch 1 consistency pass): every data card hugs its
     table the same amount, and the summary strips/pagination breathe the
     same 10-12px on every list page. */
  .table-card{ padding:8px 10px; }
  .sum-strip{ margin:.2rem 0 .6rem; }
  .pagination{ margin-bottom:0; }
}

/* =====================================================================
   6. MODALS  (Bootstrap)
   ===================================================================== */
@media (max-width:575px){
  .modal-dialog{
    max-width:calc(100vw - 24px);
    margin:12px auto;
  }
  .modal-content{ max-height:90vh; }
  .modal-body{
    max-height:calc(90vh - 120px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* =====================================================================
   7. DROPDOWN MENUS
   Keep menus inside the viewport and scrollable when tall.
   ===================================================================== */
@media (max-width:768px){
  .dropdown-menu{
    max-width:calc(100vw - 20px);
    max-height:70vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Right-aligned menus must not push past the right edge. */
  .dropdown-menu-end{ right:0; }
}

/* =====================================================================
   8. CHARTS / CANVAS
   ===================================================================== */
@media (max-width:768px){
  .chart-box,
  .chart-wrap{ max-width:100%; }
  .chart-box canvas,
  .chart-wrap canvas{ width:100% !important; }
}