/* Agricomax PWA layer.
 *
 * Loaded AFTER style.css so it can override layout-level rules for:
 *   • iOS standalone-mode safe-area insets (the notch / home-indicator)
 *   • Install pill / iOS hint banner / online-offline banner
 *   • Touch-friendly tap targets on phones (Apple HIG 44×44, Material 48dp)
 *   • Mobile table overflow + sticky filters on Super Admin / Boss screens
 *   • PWA splash-mode background colour to match the manifest
 */

/* ─────────────────────────────────────────────────────────────
 *  iOS standalone safe areas (notch + home indicator)
 * ───────────────────────────────────────────────────────────── */
:root { color-scheme: light; }

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top:    env(safe-area-inset-top);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--agx-surface-3);
  }
}

/* When the app is launched from the Home Screen (display: standalone),
 * Safari hides its toolbar — give the top navbar a green status-bar feel
 * so the notch area doesn't look like a white scar. */
@media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: minimal-ui) {
  html { background: #0f3a1a; }
  .top-navbar { padding-top: calc(env(safe-area-inset-top) + .55rem); }
  #sidebar    { padding-top: env(safe-area-inset-top); }
  /* Bottom: anything sticky to the viewport bottom needs to clear the
     iOS home indicator. */
  .bd-action-bar, .sales-pagehead-cta,
  .sticky-bottom, .agx-net-banner { padding-bottom: max(.65rem, env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────
 *  Install pill (top-navbar)
 * ───────────────────────────────────────────────────────────── */
.agx-install-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #d4a017, #f0c850);
  color: var(--agx-fg-ok) !important;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 36px;
  box-shadow: 0 4px 14px rgba(212,160,23,.32);
  transition: transform .15s, box-shadow .15s;
}
.agx-install-pill:hover, .agx-install-pill:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(212,160,23,.45);
}
.agx-install-pill i { font-size: 1rem; }

/* ─────────────────────────────────────────────────────────────
 *  iOS install hint banner (Share → Add to Home Screen)
 * ───────────────────────────────────────────────────────────── */
#agx-ios-hint {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  background: #0f172a; color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: .85rem; line-height: 1.35;
  z-index: 2000;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  animation: agxSlideUp .35s ease;
}
#agx-ios-hint .agx-ios-hint-inner {
  display: flex; align-items: center; gap: 10px;
}
#agx-ios-hint .agx-ios-hint-inner > i:first-child { color: #f0c850; font-size: 1.05rem; }
#agx-ios-hint button {
  margin-left: auto; background: transparent; border: 0; color: #fff;
  font-size: 1.4rem; line-height: 1; padding: 0 4px; cursor: pointer;
}
#agx-ios-hint strong { color: #f0c850; }
@keyframes agxSlideUp {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
 *  Online / offline banner + SW update toast
 * ───────────────────────────────────────────────────────────── */
.agx-net-banner {
  position: fixed; left: 0; right: 0;
  bottom: env(safe-area-inset-bottom);
  text-align: center;
  font-size: .85rem; font-weight: 600;
  padding: 10px 14px;
  z-index: 2100;
  display: none;
}
.agx-net-banner.offline { background: #dc2626; color: #fff; }
.agx-net-banner.online  { background: #16a34a; color: #fff; }

#agx-update-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: #0f172a; color: #fff;
  border-radius: 999px;
  padding: 6px 8px 6px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: .85rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
  z-index: 2200;
}

/* ─────────────────────────────────────────────────────────────
 *  Touch-friendly defaults for phones & tablets
 *  (≥44px is Apple HIG, ≥48px is Material). We use 44 across the board
 *  so dense admin tables stay usable without exploding row height.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .btn, .btn-sm, .form-control, .form-select, .form-check-input {
    min-height: 44px;
  }
  .btn-sm { padding: 8px 12px; font-size: .88rem; }
  .form-control, .form-select { font-size: 16px; /* stops iOS zoom-on-focus */ }
  .form-control-sm, .form-select-sm { min-height: 40px; }
  .nav-link, .dropdown-item { padding-top: 10px; padding-bottom: 10px; }
  .table td, .table th { padding: 10px 8px; }
  .badge { font-size: .72rem; }
  .user-menu-btn { padding: 6px 8px; }
  /* Top navbar — give it enough height to sit comfortably under the iOS notch */
  .top-navbar { min-height: 56px; }
}

/* ─────────────────────────────────────────────────────────────
 *  Boss inbox + Super Admin panels — mobile rescue
 *  These two views are the ones the user asked us to harden. Each has
 *  its own internal grid; here we keep them from blowing out on phones.
 * ───────────────────────────────────────────────────────────── */

/* Boss dashboard ---- */
@media (max-width: 768px) {
  /* KPI strip already drops to 2 cols; tighten the inner padding. */
  .bd-kpi          { padding: 9px 10px; }
  .bd-kpi-value    { font-size: 1.25rem; }
  .bd-kpi-label    { font-size: .68rem; }
  .bd-spark        { display: none; }

  /* Inbox table scrolls horizontally instead of bursting the viewport. */
  .bd-inbox-table-wrap, .bd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bd-inbox-table, .bd-table { min-width: 720px; }

  /* Bottom decision bar — full width on phones with safe-area pad */
  .bd-action-bar {
    flex-wrap: wrap; gap: 6px;
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  }
  .bd-action-bar .btn { flex: 1 1 30%; min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────
 *  Boss Approvals page (modules/approvals/index.php) — mobile rescue
 *
 *  The `.boss-table` is a 10-column wide table that's unreadable on a
 *  phone even with horizontal scroll: cell contents wrap one character
 *  per line. So below 768 px we don't render it as a table at all — we
 *  fully restructure each row into a stacked CARD via CSS only, leaving
 *  the HTML untouched.
 *
 *  Card layout per order:
 *    ┌───────────────────────────────────────────────┐
 *    │ Order # · date                          [☐]  │
 *    │ Sales: Manoj Pradhan                         │
 *    │ Customer name                                │
 *    │ [FIRM badge]   [age] [status]               │
 *    │ ₹18,931                                      │
 *    ├───────────────────────────────────────────────┤
 *    │ [✓]   [✎]   [⏸]   [✗]   [🗑]                │
 *    └───────────────────────────────────────────────┘
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .boss-table thead { display: none !important; }
  .boss-table, .boss-table tbody { display: block; width: 100%; }

  .boss-table tbody tr {
    display: block;
    position: relative;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--agx-surface);
    border: 1px solid var(--agx-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,58,26,.04);
  }
  .boss-table tbody tr:hover { background: var(--agx-surface); }
  .boss-table tbody tr.row-warn   { background: var(--agx-tint-warn-1) !important; border-color: var(--agx-line-warn); }
  .boss-table tbody tr.row-danger { background: var(--agx-tint-danger-1) !important; border-color: var(--agx-line-danger); }
  .boss-table tbody tr.detail-row { display: none !important; }

  .boss-table tbody td {
    display: block;
    padding: 2px 0;
    border: 0 !important;
    text-align: left !important;
    vertical-align: top;
    white-space: normal;
  }

  /* col 1 — checkbox pinned to top-right */
  .boss-table tbody td:nth-child(1) {
    position: absolute; top: 12px; right: 12px; padding: 0;
  }
  /* col 2 — detail "+" toggle hidden (tap the order # link instead) */
  .boss-table tbody td:nth-child(2) { display: none; }
  /* col 3 — Order # heading */
  .boss-table tbody td:nth-child(3) {
    font-size: 1rem; font-weight: 700;
    padding-right: 38px; margin-bottom: 4px;
  }
  /* col 4 — Sales person */
  .boss-table tbody td:nth-child(4) {
    font-size: .8rem; color: var(--agx-text-soft); margin-bottom: 3px;
  }
  .boss-table tbody td:nth-child(4)::before {
    content: "Sales: ";
    font-size: .7rem; font-weight: 700; color: var(--agx-muted-2);
    text-transform: uppercase; letter-spacing: .3px; margin-right: 5px;
  }
  /* col 5 — Customer name (the second headline) */
  .boss-table tbody td.customer-cell {
    font-size: .95rem; font-weight: 700; color: var(--agx-text); margin-bottom: 6px;
  }
  .boss-table tbody td.customer-cell .sub { font-size: .76rem; color: var(--agx-muted); margin-top: 1px; }
  /* col 6 — Firm badge */
  .boss-table tbody td:nth-child(6) { margin-bottom: 6px; }
  /* col 7 — Amount big and green */
  .boss-table tbody td:nth-child(7) {
    font-size: 1.1rem; color: var(--agx-fg-ok); font-weight: 800; margin: 4px 0 6px;
  }
  /* col 8 (age) + col 9 (status) — inline */
  .boss-table tbody td:nth-child(8),
  .boss-table tbody td:nth-child(9) {
    display: inline-block; margin-right: 6px; margin-bottom: 6px; padding: 0;
  }
  /* col 10 — Actions full-width strip below */
  .boss-table tbody td:nth-child(10) {
    padding-top: 10px; margin-top: 6px;
    border-top: 1px solid var(--agx-border-2) !important;
  }
  .boss-table .boss-act {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 6px; width: 100%;
  }
  .boss-table .boss-act .b-btn { width: 100%; height: 40px; min-height: 40px; }

  /* Defuse the .table-responsive horizontal scroll — rows are no longer
     wider than the viewport, so no scroll is needed. */
  .card > .table-responsive { overflow-x: visible; }

  /* Sticky bottom bulk-action bar still sticks + clears iOS home bar */
  .boss-stick-bar, .approvals-stickybar {
    position: sticky; bottom: 0;
    padding-bottom: max(.7rem, env(safe-area-inset-bottom)) !important;
    background: var(--agx-surface);
    border-top: 1px solid var(--agx-border);
    z-index: 1030;
  }
  .boss-stick-bar .btn { flex: 1 1 30%; }
}

/* Really small phones (≤ 360 px): squeeze the action grid to 4 cols by
   hiding the destructive trash-can — user can still cancel via Order view. */
@media (max-width: 360px) {
  .boss-table .boss-act { grid-template-columns: repeat(4, 1fr); }
  .boss-table .boss-act .b-cancel { display: none; }
}

/* ─────────────────────────────────────────────────────────────
 *  Boss Dashboard embedded inbox (.bd-table) — same mobile rescue
 *
 *  The dashboard's "Boss Inbox" card has the same 10-column table.
 *  Convert it to the same stacked card layout below 768 px so users
 *  get a consistent experience whether they land on the dashboard or
 *  go to the standalone Boss Inbox page.
 *
 *  Columns (in order):
 *    1 ☐ checkbox
 *    2 Order # + hover-card trigger
 *    3 Customer name
 *    4 Firm pill
 *    5 Sales person
 *    6 Amount
 *    7 Age badge
 *    8 Status badge
 *    9 Item-preview thumbnails
 *    10 Action buttons (Approve / Edit / Hold / Reject / Delete)
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .bd-table thead { display: none !important; }
  .bd-table, .bd-table tbody { display: block; width: 100%; }

  .bd-table tbody tr {
    display: block;
    position: relative;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--agx-surface);
    border: 1px solid var(--agx-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,58,26,.04);
    cursor: default;
  }
  .bd-table tbody tr:hover { background: var(--agx-surface); box-shadow: 0 1px 3px rgba(15,58,26,.04); }
  .bd-table tbody tr.bd-row-warn   { background: var(--agx-tint-warn-1) !important; border-color: var(--agx-line-warn); }
  .bd-table tbody tr.bd-row-danger { background: var(--agx-tint-danger-1) !important; border-color: var(--agx-line-danger); }
  .bd-table tbody tr.bd-row-selected {
    background: var(--agx-tint-ok-1) !important; border-color: var(--agx-line-ok);
    box-shadow: 0 0 0 2px rgba(22,163,74,.18) !important;
  }

  .bd-table tbody td {
    display: block;
    padding: 2px 0;
    border: 0 !important;
    text-align: left !important;
    vertical-align: top;
    white-space: normal;
  }

  /* col 1 — checkbox: pin to top-right of the card */
  .bd-table tbody td:nth-child(1) {
    position: absolute; top: 12px; right: 12px; padding: 0;
  }
  /* col 2 — Order # (main heading). Hide the hover-card; phones can tap the link. */
  .bd-table tbody td:nth-child(2) {
    font-size: 1rem; font-weight: 700;
    padding-right: 38px; margin-bottom: 4px;
  }
  .bd-table tbody td:nth-child(2) .bd-order-plus,
  .bd-table tbody td:nth-child(2) .bd-hover-card { display: none !important; }

  /* col 3 — Customer name (second headline) */
  .bd-table tbody td:nth-child(3) {
    font-size: .95rem; font-weight: 700; color: var(--agx-text); margin-bottom: 4px;
  }
  .bd-table tbody td:nth-child(3)::before {
    content: "Customer: ";
    font-size: .7rem; font-weight: 700; color: var(--agx-muted-2);
    text-transform: uppercase; letter-spacing: .3px; margin-right: 5px;
  }
  /* col 4 — Firm pill */
  .bd-table tbody td:nth-child(4) { margin-bottom: 4px; }
  .bd-table tbody td:nth-child(4)::before {
    content: "Firm: ";
    font-size: .7rem; font-weight: 700; color: var(--agx-muted-2);
    text-transform: uppercase; letter-spacing: .3px; margin-right: 5px;
  }
  /* col 5 — Sales person */
  .bd-table tbody td:nth-child(5) { font-size: .8rem; color: var(--agx-text-soft); margin-bottom: 4px; }
  .bd-table tbody td:nth-child(5)::before {
    content: "Sales: ";
    font-size: .7rem; font-weight: 700; color: var(--agx-muted-2);
    text-transform: uppercase; letter-spacing: .3px; margin-right: 5px;
  }
  /* col 6 — Amount: big and green */
  .bd-table tbody td:nth-child(6) {
    font-size: 1.1rem; color: var(--agx-fg-ok); font-weight: 800; margin: 4px 0 6px;
    text-align: left !important;
  }
  .bd-table tbody td:nth-child(6)::before {
    content: "₹";
    font-weight: 800; margin-right: 1px;
  }
  /* col 7 (age) + col 8 (status) — inline on one row */
  .bd-table tbody td:nth-child(7),
  .bd-table tbody td:nth-child(8) {
    display: inline-block; margin-right: 6px; margin-bottom: 6px; padding: 0;
  }
  /* col 9 — Item preview thumbnails: tuck below status, smaller */
  .bd-table tbody td:nth-child(9) { margin-bottom: 6px; }

  /* col 10 — Actions: full-width strip */
  .bd-table tbody td:nth-child(10) {
    padding-top: 10px; margin-top: 6px;
    border-top: 1px solid var(--agx-border-2) !important;
  }
  .bd-table .bd-acts {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 6px; width: 100%;
  }
  .bd-table .bd-acts .bd-iact {
    width: 100%; height: 40px; min-height: 40px;
  }

  /* The .bd-table-wrap was set to overflow-x: auto; tables don't need it now. */
  .bd-table-wrap, .bd-inbox-table-wrap { overflow-x: visible !important; }
  .bd-table { min-width: 0 !important; }

  /* Bottom decision/edit panel from dashboard — sit below cards, full-width */
  .bd-pane { position: static !important; max-height: none !important; }

  /* Sticky bulk-action bar safe-area handling */
  .bd-sticky {
    position: sticky; bottom: 0; left: 0; right: 0;
    padding-bottom: max(.7rem, env(safe-area-inset-bottom)) !important;
    background: var(--agx-surface);
    border-top: 1px solid var(--agx-border);
    z-index: 1030;
  }
  .bd-sticky .bd-btn-act { flex: 1 1 30%; }
}

/* Tiny phones (≤ 360 px) — same trick: drop trash from the dashboard inbox */
@media (max-width: 360px) {
  .bd-table .bd-acts { grid-template-columns: repeat(4, 1fr); }
  .bd-table .bd-acts .dl { display: none; }
}

/* ─────────────────────────────────────────────────────────────
 *  Generic Reports — `.agx-report-table` mobile-card layout
 *
 *  Every report under /modules/reports/ uses dense 5–10 column tables
 *  that look fine on desktop but are unreadable on a 360 px phone.
 *  Rather than restyle each report individually, all report tables are
 *  tagged with the class `.agx-report-table` and every `<td>` carries
 *  a `data-label="…"` attribute matching its column header.
 *
 *  Below 768 px:
 *    • The table becomes a vertical stack of cards.
 *    • Each cell renders as a label + value row.
 *    • The first cell of each row (usually the primary identifier such
 *      as Order # or Vehicle #) is shown as a heading without a label.
 *
 *  Card looks like:
 *    ┌────────────────────────────────┐
 *    │ SF-260530-000026               │  ← first cell, no label
 *    │ FIRM         AGRICOM BLS       │
 *    │ CUSTOMER     Sureshan Behera   │
 *    │ VEHICLE      OD05AB1234        │
 *    │ DRIVER       Ravi · 9876xxx    │
 *    │ DISPATCHED   29-May-2026 11:18 │
 *    │ AMOUNT       ₹18,931           │
 *    └────────────────────────────────┘
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .agx-report-table { display: block; width: 100%; }
  .agx-report-table thead { display: none !important; }
  .agx-report-table, .agx-report-table tbody { display: block; }

  .agx-report-table tbody tr {
    display: block;
    background: var(--agx-surface);
    border: 1px solid var(--agx-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(15,58,26,.04);
  }
  .agx-report-table tbody tr:hover { background: var(--agx-surface); }

  .agx-report-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    border: 0 !important;
    text-align: left !important;
    word-break: break-word;
    white-space: normal;
  }
  .agx-report-table tbody td::before {
    content: attr(data-label);
    font-size: .68rem;
    font-weight: 700;
    color: var(--agx-muted-2);
    text-transform: uppercase;
    letter-spacing: .35px;
    flex-shrink: 0;
    min-width: 90px;
    margin-right: 6px;
  }
  /* Hide the label when data-label is empty so we don't render a stray colon */
  .agx-report-table tbody td:not([data-label])::before,
  .agx-report-table tbody td[data-label=""]::before { display: none; }

  /* First cell — primary identifier rendered as a card heading */
  .agx-report-table tbody td:first-child {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--agx-text);
    text-align: left !important;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--agx-border-2) !important;
  }
  .agx-report-table tbody td:first-child::before { display: none; }

  /* "Empty" rows (the placeholder "No data" row with one wide td) */
  .agx-report-table tbody td[colspan] {
    display: block;
    text-align: center !important;
    color: var(--agx-muted-2);
    padding: 18px 0 !important;
    border-bottom: 0 !important;
    margin-bottom: 0;
  }
  .agx-report-table tbody td[colspan]::before { display: none; }

  /* Money / amount cells — keep them right-justified inside the row */
  .agx-report-table tbody td.text-end {
    text-align: right !important;
  }
  /* When badges / small text appear inside cells, keep them on one line */
  .agx-report-table tbody td .badge { white-space: nowrap; }

  /* Defuse the .table-responsive horizontal scroll wrap */
  .card > .card-body > .table-responsive { overflow-x: visible; }
}

/* ─────────────────────────────────────────────────────────────
 *  Reports filter bar (Reports::renderFilterBar) — mobile reflow
 *  The from / to date pickers, firm select and Apply / Export /
 *  Print buttons live in a single horizontal row that is too wide
 *  for phones. Stack on small screens.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .agx-report-filter .col-auto { flex: 1 1 100%; }
  .agx-report-filter input[type="date"],
  .agx-report-filter select { width: 100%; max-width: none; }
  .agx-report-filter .agx-filter-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .agx-report-filter .agx-filter-actions .btn { flex: 1 1 30%; }
}

/* ─────────────────────────────────────────────────────────────
 *  Cells that contain ACTION CONTENT (forms, button pairs, status
 *  strips) — `class="agx-cell-stack"`. Inside the card on phones
 *  these should NOT use the label-on-left / value-on-right flex
 *  layout — instead the entire cell content goes full-width below
 *  the label.
 *
 *  Used on:
 *    invoice/tally_pending.php  →  the "ERP Slip" cell (button),
 *                                  the "Tally Invoice" entry form,
 *                                  the "Next Step" guidance block,
 *                                  the "Actions" pair in Dispatched.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .agx-report-table tbody td.agx-cell-stack {
    display: block;
    text-align: left !important;
    padding-top: 4px;
  }
  .agx-report-table tbody td.agx-cell-stack::before {
    display: block;
    margin: 0 0 6px;
    min-width: 0;
  }

  /* Tally-invoice form inside a row — stack vertically and make every
     field full-width with 44 px tap targets. */
  .agx-report-table .agx-tally-form {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
  }
  .agx-report-table .agx-tally-form input[type="text"],
  .agx-report-table .agx-tally-form input[type="date"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 44px;
    font-size: 16px; /* stops iOS zoom-on-focus */
  }
  .agx-report-table .agx-tally-form button[type="submit"] {
    width: 100%;
    min-height: 44px;
  }

  /* Print + Mark-Completed pair in Dispatched tab — full-width buttons */
  .agx-report-table .agx-action-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    flex-wrap: nowrap !important;
  }
  .agx-report-table .agx-action-pair .btn,
  .agx-report-table .agx-action-pair > form .btn {
    width: 100%;
    min-height: 44px;
  }
  .agx-report-table .agx-action-pair > form { width: 100%; margin: 0; }

  /* Single-button action cells (Completed tab) — fill the row */
  .agx-report-table tbody td.agx-cell-stack > .btn { width: 100%; min-height: 44px; }

  /* Generic "Print Slip / Print & Dispatch" wide button stays wide. */
  .agx-report-table tbody td.agx-cell-stack .btn.w-100 { min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────
 *  Nav-tabs row (used on tally_pending and similar tabbed pages)
 *  Wraps badly on phones: badge gets pushed to a new line, tab
 *  pills overlap. We make the tabs scroll horizontally instead,
 *  with the active tab snapped into view.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nav-tabs.agx-tab-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;     /* Firefox */
  }
  .nav-tabs.agx-tab-row::-webkit-scrollbar { display: none; } /* WebKit */
  .nav-tabs.agx-tab-row .nav-item { flex: 0 0 auto; }
  .nav-tabs.agx-tab-row .nav-link {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: .85rem;
  }
  .nav-tabs.agx-tab-row .nav-link .badge { font-size: .68rem; }
}

/* Generic table fallback — wraps anything not already wrapped in a
 * .table-responsive so it never overflows the viewport on phones. */
@media (max-width: 768px) {
  .table-responsive,
  .dt-table-wrap,
  .sales-table-wrap { -webkit-overflow-scrolling: touch; }
  .card .table { font-size: .82rem; }
}

/* ─────────────────────────────────────────────────────────────
 *  Super Admin dense forms (users, products, companies)
 *  Stack two-column grids on phones, make column heads sticky on
 *  long tables so the user always knows what they're scrolling.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .row.g-3 > [class*='col-md-'],
  .row.g-2 > [class*='col-md-'] { margin-bottom: .5rem; }

  thead.table-light th,
  .dt-table thead th {
    position: sticky; top: 0;
    background: var(--agx-surface-2);
    z-index: 2;
  }

  /* Action button group on row actions — wrap rather than crush */
  .sales-action-grp { display: flex; flex-wrap: wrap; gap: 4px; }
}

/* ─────────────────────────────────────────────────────────────
 *  Navbar global search bar
 *  Visible on every screen size (was hidden < md before) with a real
 *  submit button so users don't have to guess at the Enter-key flow.
 * ───────────────────────────────────────────────────────────── */
.agx-search-form {
  display: flex;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 420px;
  margin: 0 .75rem;
}
.agx-search-form .input-group { width: 100%; }
.agx-search-form .form-control {
  border-left: 0;
  font-size: 16px; /* stops iOS zoom-on-focus */
}
.agx-search-form .input-group-text { background: var(--agx-surface); border-right: 0; color: var(--agx-muted); }
.agx-search-form .form-control:focus { box-shadow: none; border-color: #16a34a; }
.agx-search-form .btn { padding-left: 12px; padding-right: 12px; }
.agx-search-form .btn .bi { font-size: 1.2rem; line-height: 1; }

@media (max-width: 575.98px) {
  /* On phones: the search shares the navbar with the title + bell + avatar.
     Hide the page title to give the search room; show it just below in pages
     that need it. */
  .top-navbar .page-title { display: none; }
  .agx-search-form { margin: 0 .35rem; flex: 1 1 100%; min-width: 0; }
  .agx-search-form .form-control { font-size: 16px; }
}

/* Firm picker — same height as the rest of the navbar controls */
#globalFirm {
  font-weight: 600;
  border-color: var(--agx-border);
  min-height: 36px;
}
#globalFirm:focus { border-color: #16a34a; box-shadow: 0 0 0 .15rem rgba(22,163,74,.18); }

/* ─────────────────────────────────────────────────────────────
 *  Navbar reflow on phones
 *  When the search, firm picker, bell and avatar can't all fit on
 *  one row, the navbar wraps cleanly instead of overflowing or
 *  pushing the avatar off-screen.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .top-navbar {
    flex-wrap: wrap;
    row-gap: .35rem;
    padding: .55rem .75rem;
  }
  /* Search jumps to its own full-width row beneath the avatar/bell/title. */
  .top-navbar .agx-search-form {
    order: 99;
    flex: 1 1 100%;
    max-width: 100%;
    margin: .15rem 0 0;
  }
  /* Firm picker STAYS on phones (and therefore inside the installed PWA on
     Android / iOS, which is this same layout in a narrow window).
     It used to be `display:none !important` here on the grounds that the
     dropdown was too big and that a sales user only has one firm anyway.
     Both reasons are handled properly now instead of by hiding:
       • header.php renders the picker only when the user can actually see
         more than one firm, so single-firm users never get dead chrome;
       • the menu has a search box and a scrolling, height-capped list, so it
         no longer overruns a small screen.
     Hiding it meant multi-firm staff on phones had no way to change firm at
     all — every page silently stayed on whatever scope was last set from a
     desktop. Keep it compact here; the button label collapses to the icon
     below the `sm` breakpoint via markup in header.php. */
  #globalFirm { padding-left: .5rem; padding-right: .5rem; }
  #globalFirmMenu { max-width: calc(100vw - 1.5rem); }
  /* Notification bell + avatar tighten up next to the toggle. */
  .top-navbar .ms-auto { gap: .35rem !important; }
}

/* ─────────────────────────────────────────────────────────────
 *  Generic admin / boss table safety net
 *  Any table inside a card without `.table-responsive` still scrolls
 *  horizontally on phones instead of overflowing the viewport.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .card .card-body > table.table,
  .card > table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  /* Bootstrap row that contains direct form fields: stack with a bit of
     bottom margin so the gap isn't visually collapsed at small widths. */
  .row.g-3 > [class*='col-md-'] + [class*='col-md-'],
  .row.g-2 > [class*='col-md-'] + [class*='col-md-'] { margin-top: .35rem; }
}

/* ─────────────────────────────────────────────────────────────
 *  Boss approvals — sticky bottom action bar safe-area handling
 *  (the bulk Approve/Hold/Reject bar that sticks above the iOS
 *  home indicator).
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .bulk-action-bar, .v3-action-bar, .approvals-stickybar {
    padding-bottom: max(.6rem, env(safe-area-inset-bottom)) !important;
    z-index: 1030;
  }
}

/* ─────────────────────────────────────────────────────────────
 *  Super Admin masters — card grids respect available width
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* Companies / Vehicles / Products card grids: full-width on phones */
  .row.g-3 > .col-12.col-md-6.col-xl-4 { padding-left: 6px; padding-right: 6px; }
}

/* ─────────────────────────────────────────────────────────────
 *  Bottom-sticky toolbar pattern (used by Order Create form,
 *  Loading Boy "Complete Loading" button, etc.)
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .form-sticky-foot, .items-footer.sticky, .ie-sticky-foot {
    padding-bottom: max(.65rem, env(safe-area-inset-bottom));
  }
}

/* ─────────────────────────────────────────────────────────────
 *  Density scale — two distinct modes
 *
 *  The team tested both:
 *    • Standalone PWA on desktop:  80% feels right.
 *    • Plain browser tab on desktop: 67% feels right.
 *      (Browser chrome eats vertical space, so they want a tighter
 *       UI inside the tab.)
 *
 *  We apply a CSS `zoom` factor to <body>. Modes are distinguished
 *  with the `display-mode` media feature. Phones and touch tablets
 *  are NEVER scaled — they're already touch-optimised and shrinking
 *  them would break tap targets (Apple HIG min 44 px).
 *
 *  Why `zoom` (not `transform: scale()`):
 *    • Layout box-sizes stay accurate → click hit-areas, fixed
 *      sidebar, sticky bottom bars, modals and `100vh` still work.
 *    • No leftover whitespace at the right/bottom of the viewport.
 *
 *  Support:
 *    • Chrome / Edge / Opera — every version
 *    • Safari ≥ 17.2 (Dec 2023)
 *    • Firefox ≥ 126 (May 2024)
 *  Older Firefox / Safari render at 100% — still usable, just bigger.
 *
 *  `hover: hover` + `pointer: fine` together restrict the scale to
 *  *mouse-driven* devices, so iPad / Android tablets used with a
 *  finger keep their 100% touch sizing even at desktop widths.
 *
 *  `display-mode: browser` matches a regular browser tab; the four
 *  PWA modes (standalone / minimal-ui / fullscreen / window-controls-
 *  overlay) match the installed-app launchers on every OS.
 *
 *  Body class `agx-standalone` is also added by pwa-install.js as a
 *  JS fallback for old iOS Safari (which historically didn't expose
 *  `display-mode: standalone` correctly).
 * ───────────────────────────────────────────────────────────── */

/* ── 1. Browser tab on desktop — denser (≈67%) ───────────────── */
@media (display-mode: browser) and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.85; }
}
@media (display-mode: browser) and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.75; }
}
@media (display-mode: browser) and (min-width: 1500px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.70; }
}
@media (display-mode: browser) and (min-width: 1800px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.67; }   /* user-confirmed sweet spot in the browser */
}
@media (display-mode: browser) and (min-width: 2400px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.62; }   /* 4K / ultrawide */
}

/* ── 2. Installed PWA on desktop — slightly looser (≈80%) ─────
   Declared individually for each display-mode so Windows / macOS
   PWA windows ("standalone"), Edge installs ("window-controls-
   overlay"), and minimal-UI Safari standalone all behave the same. */
@media (display-mode: standalone) and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.92; }
}
@media (display-mode: standalone) and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.86; }
}
@media (display-mode: standalone) and (min-width: 1500px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.82; }
}
@media (display-mode: standalone) and (min-width: 1800px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.80; }   /* user-confirmed sweet spot in the PWA */
}
@media (display-mode: standalone) and (min-width: 2400px) and (hover: hover) and (pointer: fine) {
  body { zoom: 0.75; }
}

/* Repeat for the other PWA display-modes so Windows / macOS PWA
   windows and "minimal-ui" Safari standalone behave identically. */
@media (display-mode: minimal-ui) and (min-width: 1024px) and (hover: hover) and (pointer: fine) { body { zoom: 0.92; } }
@media (display-mode: minimal-ui) and (min-width: 1200px) and (hover: hover) and (pointer: fine) { body { zoom: 0.86; } }
@media (display-mode: minimal-ui) and (min-width: 1500px) and (hover: hover) and (pointer: fine) { body { zoom: 0.82; } }
@media (display-mode: minimal-ui) and (min-width: 1800px) and (hover: hover) and (pointer: fine) { body { zoom: 0.80; } }

@media (display-mode: fullscreen) and (min-width: 1024px) and (hover: hover) and (pointer: fine) { body { zoom: 0.92; } }
@media (display-mode: fullscreen) and (min-width: 1200px) and (hover: hover) and (pointer: fine) { body { zoom: 0.86; } }
@media (display-mode: fullscreen) and (min-width: 1500px) and (hover: hover) and (pointer: fine) { body { zoom: 0.82; } }
@media (display-mode: fullscreen) and (min-width: 1800px) and (hover: hover) and (pointer: fine) { body { zoom: 0.80; } }

@media (display-mode: window-controls-overlay) and (min-width: 1024px) and (hover: hover) and (pointer: fine) { body { zoom: 0.92; } }
@media (display-mode: window-controls-overlay) and (min-width: 1200px) and (hover: hover) and (pointer: fine) { body { zoom: 0.86; } }
@media (display-mode: window-controls-overlay) and (min-width: 1500px) and (hover: hover) and (pointer: fine) { body { zoom: 0.82; } }
@media (display-mode: window-controls-overlay) and (min-width: 1800px) and (hover: hover) and (pointer: fine) { body { zoom: 0.80; } }

/* ── 3. JS fallback for old iOS Safari standalone ───────────── */
/*  pwa-install.js adds `agx-standalone` to <body> when it detects the
    app is launched from the Home Screen. Old iOS Safari versions did
    not expose `display-mode: standalone`, so we re-declare the PWA
    breakpoints scoped to that class as well. */
body.agx-standalone {
  /* nothing here on small screens — only the desktop brackets matter */
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.agx-standalone { zoom: 0.92; }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  body.agx-standalone { zoom: 0.86; }
}
@media (min-width: 1500px) and (hover: hover) and (pointer: fine) {
  body.agx-standalone { zoom: 0.82; }
}
@media (min-width: 1800px) and (hover: hover) and (pointer: fine) {
  body.agx-standalone { zoom: 0.80; }
}

/* ── 4. Print + user override ──────────────────────────────── */
@media print {
  body, body.agx-standalone { zoom: 1 !important; }
}

/* User-triggered "show me the standard 100% layout" toggle, persisted
   in localStorage by the dropdown in the navbar (modules/layout/header.php). */
body.density-standard, body.density-standard.agx-standalone {
  zoom: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
 *  Print: hide the PWA chrome + navbar controls
 * ───────────────────────────────────────────────────────────── */
@media print {
  #agx-install-btn, #agx-ios-hint, .agx-net-banner, #agx-update-toast,
  .agx-search-form, #globalFirm { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════
 *  BOSS + SUPER-ADMIN ACTION UI — full mobile / iOS pass
 *
 *  Pages affected:
 *    - modules/approvals/index.php          (.boss-act .b-btn, .boss-stick-bar, .detail-toggle)
 *    - modules/dashboard/boss_dashboard.php (.bd-btn-act, .bd-iact, .bd-sticky)
 *    - modules/admin/*.php                  (.btn-group .btn icon-only action cells)
 *    - modules/invoice/list.php             (.sales-action-grp)
 *
 *  Goal:
 *    1. Every action button (edit / approve / hold / reject / cancel) reaches
 *       the 44×44 px Apple HIG tap target on phones AND iOS standalone PWA.
 *    2. Five-icon action rows wrap instead of overflowing the cell.
 *    3. Sticky bulk-action bars stack on phones with full-width buttons + a
 *       full-width reason input, with safe-area padding so iOS home indicator
 *       doesn't sit on top of the buttons.
 *    4. Icon-only admin row buttons (.btn-group > .btn-sm with a single <i>)
 *       get a real square tap target so they can be hit with a thumb.
 *    5. iOS-specific: kill the grey tap-highlight, prevent text selection on
 *       quick double-taps, allow vertical scroll-through on action buttons.
 * ═════════════════════════════════════════════════════════════ */

/* iOS — kill the dark tap flash + speed up touch response on every
 * action button so single-taps feel native instead of laggy. */
.b-btn, .bd-btn-act, .bd-iact, .detail-toggle,
.boss-act .b-btn, .boss-stick-bar .btn,
.bd-sticky .btn, .bd-action-bar .btn,
.btn, .action-cell .btn {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

@media (max-width: 767.98px) {

  /* ── 1. Approvals page row-action icons ───────────────────── */
  /*    5 icons (approve / edit / hold / reject / cancel) at 32px
   *    overflow narrow phones and miss the HIG tap target.
   *    Solution: grow to 44×44, allow row to wrap. */
  .boss-act {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }
  .boss-act .b-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.05rem;
    border-width: 1.5px;
  }
  .boss-act .b-btn i { font-size: 1.15rem; line-height: 1; }

  /* Row-level detail-toggle (the "▶" expand button) — same tap target. */
  .detail-toggle {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.05rem;
  }

  /* Let the action cell breathe at the right edge of the visible row. */
  .boss-table td:last-child { white-space: normal; min-width: 110px; }

  /* ── 2. Approvals — sticky bulk-action bar ────────────────── */
  /*    Default rule keeps the reason input + 3 buttons on one line,
   *    which compresses every button under 60 px on iPhone widths.
   *    Stack vertically: full-width reason input first, then a 3-up
   *    button row that stretches to the viewport. */
  .boss-stick-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  }
  .boss-stick-bar .sel-count { font-size: .85rem; }
  .boss-stick-bar input[name="reason"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 44px;
  }
  .boss-stick-bar .btn {
    flex: 1 1 0;
    min-height: 48px;
    font-weight: 700;
  }
  /* Reason input on its own row, three buttons share the next row. */
  .boss-stick-bar > .sel-count   { order: 1; }
  .boss-stick-bar > input        { order: 2; }
  .boss-stick-bar > .btn-success { order: 3; }
  .boss-stick-bar > .btn-warning { order: 4; }
  .boss-stick-bar > .btn-danger  { order: 5; }

  /* Without page padding, the sticky bar covers the last table row. */
  body:has(.boss-stick-bar) { padding-bottom: 180px; }

  /* ── 3. Boss dashboard inline action icons ────────────────── */
  /*    .bd-iact had a 26px override on phones — bump it to 44 so it
   *    actually matches what the user wants to tap. */
  .bd-iact {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.05rem;
  }

  /* The boss-dashboard right-pane action bar (Approve / Edit / Hold /
   * Reject) currently uses 7px padding. Grow it on phones.
   * !important needed: boss_dashboard.php has its own inline <style>
   * block that loads AFTER pwa.css and would otherwise win the cascade. */
  .bd-btn-act {
    padding: 11px 14px !important;
    font-size: .9rem !important;
    min-height: 44px !important;
  }
  .bd-sticky {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }
  .bd-sticky .bd-btn-act {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: .9rem !important;
  }
  .bd-sticky .reason-inp {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
  }

  /* ── 4. Super-admin row .btn-group action cells ───────────── */
  /*    Pages: admin/orders.php, admin/users.php, admin/products.php,
   *    admin/companies.php, admin/vehicles.php, admin/categories.php.
   *    Force a real square tap target and let the group wrap when
   *    there are 3+ icons. */
  .table .btn-group,
  .table-responsive .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .table .btn-group > .btn,
  .table-responsive .btn-group > .btn {
    border-radius: 8px !important;  /* unbutton the radio-group look */
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .table .btn-group > .btn i,
  .table-responsive .btn-group > .btn i { font-size: 1.05rem; line-height: 1; }
  /* Bootstrap glues adjacent btn-group children with negative margins —
   * undo that since we wrap them now. */
  .table .btn-group > .btn + .btn,
  .table-responsive .btn-group > .btn + .btn { margin-left: 0; }

  /* ── 5. Invoice / pending list .sales-action-grp ──────────── */
  .sales-action-grp { gap: 6px; }
  .sales-action-grp .btn,
  .sales-action-grp .btn-sm {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
  }

  /* ── 6. Generic super-admin "Hero" CTA bars ───────────────── */
  /*    .sales-pagehead-cta is the right-side action cluster in the page
   *    hero used on tally/data_view.php + many admin list pages. */
  .sales-pagehead-cta {
    width: 100%;
    margin-top: .6rem;
  }
  .sales-pagehead-cta .btn,
  .sales-pagehead-cta form,
  .sales-pagehead-cta .form-select { flex: 1 1 100%; min-width: 0; }

  /* ── 7. Modal "Save / Cancel" footer — keep both buttons reachable */
  .modal-footer { gap: 6px; padding: .75rem; }
  .modal-footer .btn { flex: 1 1 auto; min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────
 *  Very small phones (≤380px — iPhone SE, older Androids)
 *  At this width the 5-icon .boss-act row still cramps; switch to
 *  a 3-column grid so every icon is at least 44px wide.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .boss-act {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .boss-act .b-btn { width: 100%; }
  .boss-table td:last-child { min-width: 150px; }
  .bd-sticky .bd-btn-act { flex: 1 1 100%; }
}

/* ─────────────────────────────────────────────────────────────
 *  iOS PWA standalone — extra bottom padding for sticky bars
 *  When launched from the Home Screen, the home indicator overlay is
 *  ~34px. The base rule pads with env(safe-area-inset-bottom); on tap
 *  iOS sometimes briefly hides the inset — extra buffer so the lowest
 *  button can always be reached.
 * ───────────────────────────────────────────────────────────── */
@media (display-mode: standalone) and (max-width: 767.98px),
       (display-mode: minimal-ui) and (max-width: 767.98px) {
  .boss-stick-bar,
  .bd-sticky,
  .bd-action-bar,
  .bulk-action-bar,
  .v3-action-bar,
  .approvals-stickybar {
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
  }
}

/* build bump 2026-06-07 — force PWA cache refresh so mobile picks up owner-dashboard responsive layout */

/* build bump 2026-06-07.2 — mobile filter-bar grid */

/* build bump 2026-06-07.3 — date/calendar filter on orders */

/* build bump 2026-06-07.4 — modern date-range pill */

/* build bump 2026-06-07.5 — interactive month calendar picker */

/* build bump 2026-06-07.6 — calendar popup overflow fix */

/* build bump 2026-06-07.7 — orders trend chart */

/* ═════════════════════════════════════════════════════════════
 *  v3.7 — GLOBAL MOBILE SPACE PASS  (2026-06-17)
 *
 *  Every page shares the same shell from modules/layout/header.php:
 *      #wrapper > #main-content > .container-fluid.px-4.py-3 > <page>
 *  so a single pass here fixes the layout on ALL pages for ALL roles
 *  without touching the 59 individual page files.
 *
 *  Fixes the three things reported on phones:
 *    1. Big side gutters    → content now spans almost edge-to-edge.
 *    2. Sideways scrolling  → nothing can be wider than the screen.
 *    3. Tall vertical pad   → shells / heroes / cards trimmed so more
 *                             real content fits above the fold.
 *
 *  Scoped to phone / small-tablet widths — the desktop + zoom layouts
 *  are deliberately left untouched.
 * ═════════════════════════════════════════════════════════════ */

/* ── 2. Sideways-scroll safety net (phones + small tablets) ──────
 *  overflow-x is CLIP on the shell, never `hidden`/`auto`: clip does
 *  NOT create a scroll container, so it can't drag sideways AND can't
 *  break the sticky .top-navbar. Tables that genuinely need to scroll
 *  sideways keep their own .table-responsive / *-table-wrap (those
 *  scroll INSIDE the clipped shell, which still works). */
@media (max-width: 991.98px) {
  html { overflow-x: hidden; }
  #wrapper, #main-content { max-width: 100%; overflow-x: clip; }
  /* Media + long unbroken strings never burst the layout. */
  #main-content img,
  #main-content svg,
  #main-content video,
  #main-content canvas,
  #main-content iframe { max-width: 100%; height: auto; }
  #main-content pre { overflow-x: auto; max-width: 100%; }
}

/* ── 1 + 3. Tighter gutters and trimmer vertical padding (phones) ── */
@media (max-width: 575.98px) {
  /* 1. Side gutters — squeeze the shared container so cards span the
        screen. Beats both Bootstrap's base padding and our px-4 rule. */
  .container-fluid.px-4 { padding-left: .55rem !important; padding-right: .55rem !important; }
  .container-fluid      { --bs-gutter-x: .55rem; }

  /* 3. Vertical trim — shell + the page heroes/cards used across pages. */
  .container-fluid.py-3 { padding-top: .55rem !important; padding-bottom: .55rem !important; }

  .sales-pagehead     { padding: .85rem .9rem; margin-bottom: .8rem; border-radius: var(--radius-lg); }
  .sales-pagehead h2  { font-size: 1.2rem; }
  .sales-mini-stats   { gap: .55rem; margin-bottom: .7rem; }

  .dash-hero          { border-radius: var(--radius-lg); }
  .dash-hero-inner    { padding: 1rem .9rem; }

  .desk-head          { padding: .85rem .9rem; }
  .order-desk .row    { padding: .7rem; }

  /* Generic Bootstrap cards: a touch less inner padding so the squeezed
     gutter doesn't get eaten right back by chunky card padding. */
  .card .card-body    { padding: .85rem; }
  .card .card-header  { padding-left: .9rem; padding-right: .9rem; }
}

/* build bump 2026-06-17 — global mobile space pass (gutters/overflow/vertical) */