/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Interior Moderna OPS Dashboard
   Comprehensive mobile-first fixes for all views.
   Loaded AFTER modern-theme.css and ux-polish.css to override.
   ═══════════════════════════════════════════════════════════ */

/* ─── Base: prevent horizontal overflow globally — see also inside @media(max-width:768px) ─── */
/* (This outer rule is the canonical one; the duplicate inside the 768px block below is redundant.) */
.main {
  overflow-x: hidden;
}

/* Mobile-only duplicate header row inside the inventory matrix tbody.
   Rendered always in HTML; hidden on desktop, shown inside the @media
   (max-width:768px) block below. */
.matrix-table tr.inv-mobile-header { display: none; }

/* Inventory Overview — mode toggle (New / Openbox pill bar) and the
   "In stock only" checkbox share one row. Pills on the left, checkbox
   pushed to the right by space-between. Applies at every breakpoint. */
.inv-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.inv-mode-row > div:first-child { margin-bottom: 0 !important; }

/* ─── Tablet (1024px) ─── */
@media (max-width: 1024px) {
  /* Grids defined in JS views via class — force 2-col */
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (768px and below)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Core Layout ─── */
  .main {
    overflow-x: hidden;
    padding: 12px;
    padding-bottom: 24px; /* bottom nav is permanently hidden — small base gap only */
    /* min-width:0 lets the 1fr grid column shrink below children's min-content
       width — without it, a 600px-wide table inside .inv-scroll forces
       <main> to grow past 375px viewport. */
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* Force the grid track to not exceed the viewport so children can't
     push <main> outside the 375px screen. */
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ─── View wrapper padding: tighten inline padding on mobile ─── */
  #mainContent > div[style*="padding:24px"],
  #mainContent > div[style*="padding: 24px"],
  #mainContent > div[style*="padding:32px"],
  #mainContent > div[style*="padding: 32px"] {
    padding: 12px !important;
  }

  /* ─── Sidebar: slide-in fixes ─── */
  .sidebar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ─── Header compact ─── */
  .header {
    padding: 0 8px;
    height: auto;
    min-height: 52px;
    align-items: flex-start;
    gap: 8px;
  }
  .header-left .logo {
    font-size: 14px;
  }
  .header-left .logo-sub {
    display: none;
  }
  .header-right {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .header-status-group,
  .header-action-group,
  .header-account-group {
    gap: 6px;
  }
  .header-status-group {
    flex: 1 1 auto;
  }
  .header-action-group,
  .header-account-group {
    flex: 0 1 auto;
  }

  /* ─── All grids: force responsive ─── */
  .kpi-grid-4,
  .kpi-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Catch grids defined via classes in views */
  .brief-grid,
  .sc-card-grid,
  .pl-grid,

  /* Auto-fill/auto-fit grids — lower the minmax floor */
  .brief-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ─── Cards: full width, no overflow ─── */
  .brief-card,
  .kpi-card,
  .si-card,
  .ci-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─── Tables: always horizontally scrollable ─── */
  .table-container,
  .table-wrap,
  .ra-table-wrap,
  [class*="-table-wrap"],
  [class*="table-container"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }

  /* Tables themselves should not be constrained */
  table {
    min-width: max-content;
  }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Ensure data-tables are scrollable even without explicit wrapper.
     Use display:table (not block) to preserve table layout semantics,
     and wrap with overflow on the parent instead. */
  .data-table {
    width: 100%;
    min-width: max-content;
  }

  /* ─── Flex rows: force wrap ─── */
  .toolbar,
  .filter-bar,
  .filter-row,
  .page-header,
  .page-header > div[style*="display:flex"],
  .controls,
  [class*="-toolbar"],
  [class*="-controls"],
  [class*="-filters"],
  [class*="-filter-bar"],
  [class*="filter-row"] {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  /* ─── Search inputs: don't overflow ─── */
  input[type="search"],
  input[type="text"],
  .search-input,
  .form-input,
  [class*="-search"] input {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* ─── Select dropdowns: full width on mobile ─── */
  /* 16px font-size is required to prevent iOS Safari auto-zoom on focus. */
  select,
  .filter-select {
    max-width: 100% !important;
    min-height: 44px;
    font-size: 16px;
  }

  input[type="number"],
  input[type="date"],
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }

  /* ─── Touch targets: minimum 44px ─── */
  button,
  .btn,
  .action-btn,
  .nav-item,
  .tab,
  .tab-btn,
  [role="button"],
  [role="tab"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Header icon cluster must hit the 44×44 touch-target minimum at mobile.
     modern-theme.css has `.refresh-btn { min-height: 34px }` at (0,1,0)
     which beats the generic `button { min-height: 44px }` rule above —
     force parity on the header button row to recover the touch floor. */
  .notification-bell-btn,
  .theme-toggle-btn,
  .health-dot-wrap {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .header-right .refresh-btn,
  .header-right .sync-now-btn {
    min-height: 44px;
    padding: 8px 12px;
  }
  /* Hide Sign Out from mobile top bar — it lives in the bottom-nav More
     menu now (Account section) where a phone user can reach it without
     a 67px button stealing space from page titles + actions. */
  .header-right .sign-out-btn { display: none !important; }
  /* Add Account section divider in the More sheet so Sign Out is
     visually separated from view links. */
  .quick-jump-section + .quick-jump-section .quick-jump-section-label[data-i18n="qj.account-section"] {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 12px;
  }

  .header-freshness-wrap,
  .api-health-wrap,
  .sync-status,
  .live-indicator,
  .view-as-switcher,
  .view-mode-indicator {
    min-height: 40px;
  }

  /* ─── Tabs: horizontal scroll instead of overflow ─── */
  .tabs,
  .tab-bar,
  [class*="-tabs"],
  [class*="tab-bar"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tabs::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar,
  [class*="-tabs"]::-webkit-scrollbar {
    display: none;
  }

  /* ─── Modals: full width on mobile ─── */
  .modal,
  [class*="-modal"] {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 100px) !important;
    max-height: calc(100dvh - 100px) !important;
    margin: 12px !important;
  }

  .rcv-qty-btn,
  .hub-view-tab,
  .hub-compose-btn,
  .hub-ch-btn,
  .hub-action-btn,
  .hub-send-btn,
  .ct-email-save-btn,
  .ct-link-btn,
  .hub-snooze-opt,
  .hub-snooze-custom input[type="date"],
  .hub-assignee-select {
    min-height: 44px !important;
  }
  .rcv-qty-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    font-size: 18px !important;
  }
  .hub-view-tab,
  .hub-compose-btn,
  .hub-action-btn,
  .ct-email-save-btn,
  .ct-link-btn {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  .hub-ch-btn {
    min-width: 44px !important;
    padding: 8px 10px !important;
  }
  .hub-ch-label {
    font-size: 10px !important;
  }
  .hub-snooze-custom {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .hub-snooze-custom label {
    width: 100%;
    font-size: 12px !important;
  }
  .hub-snooze-custom input[type="date"],
  .hub-snooze-custom .hub-snooze-opt {
    width: 100%;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  .hub-snooze-custom input[type="date"] {
    font-size: 16px !important;
  }

  /* ─── Login card fix ─── */
  .login-card {
    width: calc(100vw - 32px) !important;
    max-width: 360px !important;
    margin: 0 16px;
  }

  .notification-panel,
  .freshness-tooltip,
  .api-health-panel,
  .health-popover {
    max-width: calc(100vw - 16px);
  }

  /* ─── Two-column layouts: stack ─── */
  .sc-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ─── Fixed-column grids used in views: stack ─── */
  .mb-ad-perf-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─── Specific view fixes ─── */

  /* Storefront Health: stack the 200px+1fr layout */
  [class*="sh-grid"],
  [class*="sh-layout"] {
    grid-template-columns: 1fr !important;
  }

  /* Strategy Command: card grid overflow fix */
  .sc-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cart Insights: 9-col filter and dual-pane layout */
  .ci-layout,
  [class*="ci-grid"],
  [class*="ci-layout"] {
    grid-template-columns: 1fr !important;
  }

  /* Financial Alerts: 4-col summary */

  /* Discontinuation: 4-col and 3-col grids */

  /* Customer views */

  /* Revenue / Financial views */

  /* Travel: flight result row */

  /* Accounting: 4-col panel */

  /* Data Quality */

  /* Anomalies */

  /* System views */

  /* Agent views */

  /* Pipeline / Tracker */

  /* Listing drafts */

  /* Product views */

  /* Nexus Optimizer */

  /* Markdown optimizer */

  /* Marketing */

  /* SKU views */

  /* Refunds */

  /* Jarvis views */
  .jm-grid,

  /* Intelligence / Synthesis */
  .intel-grid,

  /* Decision Playbook */

  /* Vault */

  /* Warehouse */
  .wh-grid,

  /* Labels */
  .lbl-grid,

  /* Order Exceptions */

  /* Bulk Orders */

  /* Smart Reorder */

  /* Supplier Scorecard */

  /* Collection views */

  /* Self-Healing */

  /* Control Plane */

  /* Event Log */

  /* Photoshoots */

  /* Approval Queue */

  /* Website */

  /* Support */
  .sup-grid,

  /* ROAS Trend */

  /* Price Lab */
  .pl-grid {
    grid-template-columns: 1fr !important;
  }

  /* Expense Tracking */
  .exp-kpi-row {
    flex-wrap: wrap !important;
  }

  /* Retirement Advisor */
  .ret-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cashflow */

  /* Revenue Forecast */

  /* Competitor Intel */

  /* ─── SVG Charts: constrain width ─── */
  svg {
    max-width: 100%;
    height: auto;
  }

  /* ─── calc(100vh) scroll containers — account for bottom nav ─── */
  [style*="max-height:calc(100vh"],
  [style*="max-height: calc(100vh"] {
    max-height: calc(100dvh - 140px) !important;
    max-height: calc(100dvh - 140px) !important;
  }

  /* ─── Minimum readable font size on mobile ─── */
  /* 13px is the readable floor — 11px fails WCAG on small phones. */
  .kpi-label,
  .kpi-sub,
  .status-badge,
  .view-table th,
  [class*="-label"]:not(.bottom-nav-label):not(.stat-label):not(.suggestion-label),
  [class*="-stat-label"]:not(.stat-label),
  [class*="card-label"] {
    font-size: 13px !important;
  }

  /* ─── Code/pre blocks ─── */
  pre, code {
    overflow-x: auto;
    max-width: 100%;
    word-break: break-word;
  }

  /* ─── Images ─── */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ─── Inline style grid overrides ───
     These catch grids set via inline style="" attributes.
     Many views use inline repeat(3/4/5, 1fr) grids that need
     to collapse on mobile. At 768px: 2-col. At 480px: 1-col (below). */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Catch "1fr 1fr" and "1fr 1fr 1fr" style grids (not using repeat()) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Product detail 2-col layout */
  .pd-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* minmax grids with floor > 320px — force single column on mobile */
  [style*="minmax(340px"],
  [style*="minmax(350px"],
  [style*="minmax(360px"],
  [style*="minmax(370px"],
  [style*="minmax(380px"],
  [style*="minmax(400px"],
  [style*="minmax(420px"],
  [style*="minmax(440px"],
  [style*="minmax(460px"],
  [style*="minmax(480px"],
  [style*="minmax(500px"] {
    grid-template-columns: 1fr !important;
  }

  /* ─── Bottom Navigation Bar ─── */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: var(--z-dropdown);
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 6px;
    padding-bottom: env(safe-area-inset-bottom, 6px);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  }
  .mobile-bottom-nav .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    gap: 4px;
    padding: 8px 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    min-height: 44px;
    min-width: 0;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav .bottom-nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
    /* !important needed — a wildcard `[class*="-label"] { font-size: 13px !important }`
       elsewhere otherwise wins and forces 10-char labels like "Containers" to truncate */
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  /* Narrow viewport (<=400px) — tighten further so 10-char words fit */
  @media (max-width: 400px) {
    .mobile-bottom-nav .bottom-nav-label {
      font-size: 10.5px !important;
      letter-spacing: -0.015em;
    }
  }
  .mobile-bottom-nav .bottom-nav-item.active {
    color: var(--accent);
    background: var(--surface-2);
  }
  .mobile-bottom-nav .bottom-nav-item:active {
    background: var(--surface-2);
    transform: translateY(1px);
  }
  .mobile-bottom-nav .bottom-nav-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .mobile-bottom-nav .bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
  }

  /* ─── Fix 1: body overflow — allow vertical scroll on mobile ─── */
  body {
    overflow: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100dvh;
    min-height: 100dvh;
    /* Prevent iOS momentum-scroll bleed-through behind fixed panels */
    overscroll-behavior-y: none;
  }

  /* ─── Fix 2: .side-panel — full viewport width on mobile ─── */
  .side-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
  }

  /* ─── Fix 3: .notification-panel — constrained to viewport width ─── */
  .notification-panel {
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    right: 12px !important;
    left: 12px !important;
  }

  /* ─── Fix 4: .row-detail-panel — remove min-width that overflows mobile ─── */
  .row-detail-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
  }

  /* ─── Fix 5: .responder-layout and .hub-container — stack on mobile ─── */
  .responder-layout {
    flex-direction: column !important;
    height: auto !important;
    gap: 0 !important;
  }
  .responder-layout > *:first-child {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 40vh;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .hub-container {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100dvh - 140px);
  }
  .hub-container > *:first-child {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 40vh;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* ─── Fix: Jarvis chat — account for bottom nav ��── */
  /* Exclude jarvis-container-intel-* — those are small panels on the
     Container Tracker, not the full-screen Jarvis chat surface. The
     wildcard was sizing them to ~692px (viewport - 120) on mobile,
     blowing out the layout. */
  [class*="jarvis-container"]:not([class*="jarvis-container-intel"]) {
    height: calc(100dvh - 120px) !important;
    height: calc(100dvh - 120px) !important;
  }

  /* ─── Fix: agent-comms 2-col layout — stack on mobile ─── */
  .ac-wrap {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  /* ─── Fix: customer-intelligence layout — stack on mobile ──�� */
  .ci-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .ci-layout > *:first-child {
    width: 100% !important;
    max-height: 40vh;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* ─── Fix: logistics overview-grid 2-col → stack on mobile ─── */
  .overview-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─── Fix: scheduler toast — lift above bottom nav ─── */
  #sched-toast {
    bottom: 92px !important;
  }

  /* ─── Fix: dependency-graph canvas — account for bottom nav ─── */
  #dgCanvas {
    height: calc(100% - 72px) !important;
  }
  #dgStats, #dgHelp {
    bottom: 92px !important;
  }
  #dgLegend {
    display: none !important;
  }

  /* ─── Fix 6: #assistantBtn — lift above bottom nav ─── */
  #assistantBtn {
    bottom: 92px !important;
    right: 16px !important;
  }

  /* ─── Fix 7: Toasts + batch bar — lift above bottom nav ─── */
  .hub-toast,
  .lbl-toast,
  #aqBatchBar {
    bottom: 80px !important;
  }

  /* ─── Fix 8: Missing grid collapses ─── */
  .kpi-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lbl-grid-2,
  .lbl-grid-3,
  .lbl-grid-4,
  .lbl-grid-addr {
    grid-template-columns: 1fr !important;
  }
  .pd-price-grid,
  .rev-bottom-grid,
  .manage-grid,
  .sa-grid-2,
  .rl-grid-2,
  .ret-form-grid-2,
  .cust-repeat-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .rl-grid-3,
  .mi-add-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SMALL MOBILE (480px and below)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .main {
    padding: 8px;
    padding-bottom: 20px;
  }

  /* All multi-column grids → single column */
  .kpi-grid-4,
  .kpi-grid-3,

  .sc-stats {
    grid-template-columns: 1fr !important;
  }

  /* Inline style grids → single column at 480px */
  [style*="grid-template-columns: repeat("],
  [style*="grid-template-columns:repeat("] {
    grid-template-columns: 1fr !important;
  }

  /* Even tighter view padding at 480px */
  #mainContent > div[style*="padding"] {
    padding: 8px !important;
  }



  /* Compact header — must stay `height: auto` so the flex-wrap second row
     (.header-right buttons) doesn't overflow into .main and collide with
     the page greeting. */
  .header {
    padding: 0 6px;
    height: auto;
    min-height: 48px;
  }
  .logo {
    font-size: 12px;
  }

  /* Page title */
  .page-title {
    font-size: 15px;
  }

  /* Cards tighter padding */
  .brief-card,
  .kpi-card,
  [class*="-card"] {
    padding: 10px !important;
  }

  /* Sidebar takes full width */
  .sidebar {
    width: 100% !important;
  }

  /* Bottom nav even more compact */
  .mobile-bottom-nav .bottom-nav-item {
    padding: 6px 4px;
    font-size: 10px;
  }

  /* Fix: #assistantBtn must stay above bottom nav at 480px too */
  #assistantBtn {
    bottom: 92px !important;
    right: 16px !important;
  }

  /* Collapse 5-col grid to single column */
  .kpi-grid-5 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   VERY SMALL (375px and below — iPhone SE, etc.)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .main {
    padding: 6px;
    padding-bottom: 16px;
  }

  /* Even tighter gaps */
  .brief-grid,
  [class*="-grid"] {
    gap: 6px !important;
  }

  .header {
    padding: 0 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   HIDE bottom nav on desktop
   ═══════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE PHONE
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-bottom-nav {
    height: 48px;
  }
  .mobile-bottom-nav .bottom-nav-item {
    font-size: 0; /* hide labels, show only icons */
  }
  .mobile-bottom-nav .bottom-nav-item svg {
    width: 20px;
    height: 20px;
  }
  .main {
    padding-bottom: 56px;
  }
}

/* ═══════════════════════════════════════════════════════════
   iOS SAFE AREAS
   ═══════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  @media (max-width: 768px) {
    .main {
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile bottom nav + Quick-Jump sheet: removed 2026-04-27
   (sidebar covers everything). Hard-hide regardless of viewport
   so cached HTML / dynamic build path can't put either back.
   ═══════════════════════════════════════════════════════════ */
.mobile-bottom-nav { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   FORM-05: Support customer filters — readable on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Support view date + number filter inputs (inline-styled in JS, override here) */
  #customersSearchInput { font-size: 16px !important; }
  /* Toolbar date/number inputs */
  .toolbar input[type="date"],
  .toolbar input[type="number"] {
    font-size: 16px !important;
    padding: 8px !important;
    min-height: 44px !important;
  }
  /* Clear filters button */
  .toolbar button[onclick*="Clear"],
  .toolbar button[onclick*="clear"] {
    font-size: 14px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOB-01: Quick Jump sheet — all sidebar views on mobile
   ═══════════════════════════════════════════════════════════ */
.quick-jump-section {
  padding: 6px 16px 2px;
}
.quick-jump-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 0 2px;
}
.quick-jump-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,0.12));
  cursor: pointer;
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}
.quick-jump-item:last-child {
  border-bottom: none;
}
.quick-jump-item:active {
  background: var(--surface-2);
}
.quick-jump-item:focus-visible {
  background: var(--surface-2);
  outline: 2px solid var(--accent, #c8a97e);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════
   SCAN-03..07 — Card layout for wide tables on mobile
   Targets the 5 tables with min-width ≥ 640px that would
   otherwise require horizontal scroll on narrow screens.
   Each row becomes a vertical card with label: value pairs.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Shared card-row mixin ── */
  /* Applied per table selector below. thead is hidden;
     each td shows its column header via data-label attr
     (set by JS at render time when present, falls back
     gracefully when absent). */

  /* ── 1. Products logistics table (.prod-logistics-table, min-width 980px) ── */
  .prod-logistics-table,
  .prod-logistics-table thead,
  .prod-logistics-table tbody,
  .prod-logistics-table th,
  .prod-logistics-table td,
  .prod-logistics-table tr {
    display: block;
  }
  .prod-logistics-table thead tr { display: none; }
  .prod-logistics-table tr {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    margin-bottom: 8px;
    padding: 8px 12px;
  }
  .prod-logistics-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border: none;
    font-size: 13px;
    min-height: 28px;
  }
  .prod-logistics-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
  }
  /* Override min-width so it doesn't force scroll */
  .prod-logistics-table { min-width: 0 !important; width: 100%; }

  /* ── Inv-matrix toolbar layout: Sort + View share ONE row 50/50,
     "In stock only" checkbox is compact (no big filter-select chrome).
     Toolbar itself is constrained to its parent so it can't push mainContent
     past viewport width. ── */
  #mainContent .toolbar {
    /* Override modern-theme.css's .toolbar { flex-direction: column } at
       max-width:768px so Sort + View can share a row at 50/50. */
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
  }
  #mainContent .toolbar > .search-input {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Sort + View share a row at ~50% each. The toolbar's gap is 8px (set by
     the Pass 1 rule near line 2786), so 50% - 4px on each side gives an exact
     fit with no sub-pixel overflow that would wrap View to the next row. */
  #mainContent .toolbar > .filter-select:not(.inv-instock-toggle) {
    flex: 0 1 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 4px) !important;
    box-sizing: border-box;
  }
  /* "In stock only" — compact pill, sits next to View on its own row.
     `.filter-select` rule gives it max-width: 100% — override to auto. */
  .inv-instock-toggle {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    color: var(--text-muted) !important;
    line-height: 1 !important;
    width: fit-content !important;
    max-width: max-content !important;
    align-self: flex-start !important;
    margin-top: 2px;
  }
  .inv-instock-toggle input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
  }

  /* ── 2. Inventory matrix table — KEEP as a real <table> with columns on
     mobile (Cole 2026-04-24). Was display:block card layout; reverted at
     user request. Make text/padding compact so all 10 columns fit a 375px
     viewport with horizontal scroll inside .inv-scroll wrapper. ── */
  .inv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Full-bleed: kill the .table-container { padding: 0 12px } inset for
     inv-matrix only, so the table touches both viewport edges. */
  .table-container:has(> .inv-scroll) {
    margin: 0 -12px !important;
    padding: 0 !important;
    max-width: none !important;
    width: calc(100% + 24px) !important;
  }
  .matrix-table { font-size: 11px; min-width: max-content; }
  .matrix-table th, .matrix-table td { padding: 4px 5px; white-space: nowrap; }
  .matrix-table th { font-size: 9.5px; letter-spacing: 0.2px; }
  .matrix-table td.sku-cell { font-size: 11px; }
  .matrix-table td.title-cell { font-size: 10.5px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
  .matrix-table td.matrix-qty { font-size: 11px; padding: 4px 5px; min-width: 32px; }
  /* Tighten location-column header min-width too */
  .matrix-table thead th.loc-col,
  .matrix-table tr.inv-mobile-header th.loc-col { min-width: 36px; padding: 3px 4px; }
  .inv-th-sku,
  .matrix-table td.sku-cell { min-width: 42px; max-width: 70px; padding-left: 6px; padding-right: 4px; }
  /* "of FL-73-x" parent badge stacked under SKU on mobile too */
  .matrix-table tbody td.sku-cell .sku-parent-of {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 1px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .inv-th-dims { min-width: 80px; }

  /* ── Mobile column header row: hide desktop <thead>, show the duplicate
     header <tr class="inv-mobile-header"> rendered inside <tbody> right
     below the "Location Totals" mega-title row (Cole 2026-04-25). ── */
  .matrix-table thead { display: none; }
  .matrix-table tr.inv-mobile-header { display: table-row; }
  .matrix-table tr.inv-mobile-header th {
    background: var(--surface-2, var(--surface));
    font-size: 9.5px;
    letter-spacing: 0.2px;
    padding: 4px 5px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
  }
  .matrix-table tr.inv-mobile-header th.loc-col,
  .matrix-table tr.inv-mobile-header th.inv-th-total { text-align: center; }

  /* ── Toggle group (Confirm Receipt / Transfer, etc.) — tighter padding on
     mobile so it fits next to a back button + title in a single row. ── */
  .toggle-btn { padding: 7px 10px !important; font-size: 11px !important; }
  .toggle-group { flex-shrink: 0; }

  /* ── Inv-matrix search input — bump from 35px to 44px touch height,
     make sticky so it stays reachable while scrolling 1300+ SKU cards. ── */
  input[placeholder^="Search SKU"],
  input[placeholder*="SKU, product"] {
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface);
  }
  /* Container wrapping the inv-matrix toolbar — no padding so sticky works */

  /* ── Locations shelf-detail header on mobile — let it wrap so the new
     "Bulk Transfer From Here" button + close X stay reachable next to a
     long shelf code (Cole 2026-04-25). ── */
  .shelf-inline-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .loc-shelf-hd-actions {
    flex-wrap: wrap;
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start;
  }
  .loc-close-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Per-row Transfer / Remove icon buttons in the shelf items table —
     bump the tap target so workers don't mis-hit on a 375px screen
     (the original 22×22 next to a cell border was a coin-toss). */
  .loc-action-td .btn-sm,
  .loc-action-td {
    white-space: nowrap;
    padding: 4px 6px !important;
  }

  /* Shelf inline detail panel + items table — span full screen width on
     mobile so SKU rows are not cut off (Cole 2026-05-07). The panel is
     inserted as a sibling row in the shelves grid; on mobile it should
     break out of its parent column and use the full viewport width. */
  .wh-shelf-inline-detail {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 6px !important;
    box-sizing: border-box;
  }
  .wh-shelf-inline-detail .loc-table-full {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .wh-shelf-inline-detail .loc-table-full td,
  .wh-shelf-inline-detail .loc-table-full th {
    padding: 8px 4px !important;
    font-size: 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Hide barcode column on mobile — lowest-value, longest content; SKU is
     enough to identify the line. Re-shows in the inline-edit drawer. */
  .wh-shelf-inline-detail .loc-table-full th:nth-child(5),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(5) {
    display: none !important;
  }
  /* Column widths sum to 100% so rows span the full panel. */
  .wh-shelf-inline-detail .loc-table-full th:nth-child(1),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(1) { width: 22% !important; }
  .wh-shelf-inline-detail .loc-table-full th:nth-child(2),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(2) { width: 28% !important; }
  .wh-shelf-inline-detail .loc-table-full th:nth-child(3),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(3) { width: 18% !important; }
  .wh-shelf-inline-detail .loc-table-full th:nth-child(4),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(4) { width: 12% !important; }
  .wh-shelf-inline-detail .loc-table-full th:nth-child(6),
  .wh-shelf-inline-detail .loc-table-full td:nth-child(6) { width: 20% !important; padding-right: 8px !important; }
  .wh-shelf-inline-detail .loc-action-td .loc-edit-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
    min-width: 0 !important;
  }
  .loc-action-td .btn-sm + .btn-sm {
    margin-left: 8px;
  }

  /* Location search-results table — also a `loc-table-full`, but its cells
     use rowspan (SKU / Barcode / Total span multiple shelf rows) which the
     generic card-table hydration mangles. Now skipped from hydration; render
     as a compact, horizontally scrollable real table so columns stay aligned
     and it never blows out the viewport width. */
  .loc-results-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .loc-results-panel .loc-table-full {
    width: 100%;
    font-size: 12px;
  }
  .loc-results-panel .loc-table-full th,
  .loc-results-panel .loc-table-full td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* ── Add/Remove + Transfer item modals — near full-screen on phones so the
     camera barcode scanner gets real screen space. Previously the SKU input
     was crushed (showing only "Sc") and the camera was a small inset 16:9
     strip. (Cole 2026-05-21) ── */
  .stp-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 94dvh !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 14px !important;
  }
  .stp-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
  }
  .stp-body {
    padding: 12px !important;
    gap: 12px !important;
  }
  .stp-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: var(--surface) !important;
    flex-wrap: wrap !important;
    padding: 10px 0 2px !important;
    margin-top: 2px !important;
  }
  /* Scan row — let the SKU input span its own full line instead of being
     squeezed between the camera button, qty field and Add button. */
  .stp-scan-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .stp-scan-input {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    font-size: 16px !important;       /* 16px keeps iOS from zooming on focus */
  }
  .stp-scan-row .wh-scan-btn {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 auto !important;
  }
  .stp-scan-row .stp-qty-input {
    flex: 0 0 62px !important;
    width: 62px !important;
    height: 48px !important;
    font-size: 16px !important;
    text-align: center !important;
  }
  .stp-scan-row .stp-scan-add-btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-height: 48px !important;
  }
  /* Inline camera scanner — break out of the modal padding to span the full
     screen width edge to edge, and stand tall so barcodes are easy to line
     up. The old 16:9 / 280px-capped strip is replaced by a 56vh viewport. */
  .loc-modal-scanner-slot {
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .loc-modal-scanner-inner { gap: 10px !important; }
  .loc-modal-scanner-video-wrap {
    aspect-ratio: auto !important;
    height: 56vh !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
  .loc-modal-scanner-controls {
    padding: 0 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .loc-modal-scanner-controls .loc-inline-scanner-status {
    flex: 1 1 auto !important;
  }
  .loc-modal-scanner-controls .btn-sm {
    min-height: 44px !important;
    flex: 0 0 auto !important;
  }

  /* ── All Orders / Fulfillment view — compact stats + reordered toolbar
     on mobile (Cole 2026-05-07). 9 stats in 3-col grid (was 2-col with
     74px tall cards = wall of stats); toolbar reorganized into:
        Row 1: search input (full width)
        Row 2: location select (full width)
        Rows 3-4: 8 buttons in 2×4 grid (7 status filters + Sync Tracking) ── */
  #mainContent #fulfillStatsRow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  #mainContent #fulfillStatsRow .stat-card {
    min-height: 50px !important;
    padding: 6px 8px !important;
  }
  #mainContent #fulfillStatsRow .stat-label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  #mainContent #fulfillStatsRow .stat-value {
    font-size: 17px !important;
    font-weight: 700 !important;
  }
  #mainContent #fulfillStatsRow .stat-subval {
    font-size: 11px !important;
    color: var(--text-muted);
  }

  #mainContent #fulfillToolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 8px 0 12px !important;
  }
  #mainContent #fulfillToolbar > .search-input {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #mainContent #fulfillToolbar > .filter-select {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* lf-filter-group is a wrapper around the 7 status buttons; let its
     children participate in the parent grid so all 8 (filter + Sync) fit
     together. */
  #mainContent #fulfillToolbar > .lf-filter-group {
    display: contents !important;
  }
  #mainContent #fulfillToolbar > .lf-filter-group > .ret-filter-btn,
  #mainContent #fulfillToolbar > #syncTrackingBtn {
    width: 100% !important;
    min-height: 38px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  /* Hide the count chip inside filter buttons on very narrow screens —
     the button label alone communicates the filter; counts are already
     visible in the stats-row above. */
  #mainContent #fulfillToolbar > .lf-filter-group > .ret-filter-btn .fb-count {
    font-size: 10px !important;
    margin-left: 3px !important;
  }
  /* Override the orphan-card guard from elsewhere in mobile.css that makes
     the last odd-numbered filter button span full width — we have an even
     8 cells (7 filters + Sync Tracking), so we want each button in its own
     1/4 column. */
  #mainContent #fulfillToolbar .lf-filter-group > .ret-filter-btn:nth-child(2n+1):last-child,
  #mainContent #fulfillToolbar .lf-filter-group > .ret-filter-btn:last-child {
    grid-column: auto !important;
  }

  /* ── Returns Stock flat table — consolidate for mobile (Cole 2026-05-07;
     one-row-per-unit restored 2026-06-09). The wrap carries
     data-mobile-table-skip so the generic mobile card hydrator
     (ui-enhancements.js) leaves it alone — each unit stays a single
     compact table row instead of exploding into a tall stacked card.
     Notes / Declared / Received / Last edit moved to the click-to-expand row
     detail (2026-06-09) — the mobile column set is now SKU / Order / WH /
     Condition / Actions (Shopify + Condition-on-Pending hidden below).
     Action buttons collapse to icon-only via .rs-btn-label. ── */
  #mainContent .rs-flat-wrap table { min-width: 0 !important; }
  #mainContent .rs-btn-label { display: none !important; }
  #mainContent .rs-flat-wrap td[data-rs-col="actions"] button { white-space: nowrap; }
  #mainContent .rs-flat-wrap td[data-rs-col="order"] > span + span {
    /* "· Apr 12" date suffix — drop on phones; the order # is the identifier */
    display: none;
  }
  /* Shopify column hidden on mobile — on the Pending tab it's "not listed"
     for every row (noise), and listing is a desktop, admin-only action.
     (Notes / Declared / Received / Last edit are no longer columns at all —
     they live in the click-to-expand row detail now.) */
  #mainContent .rs-flat-wrap th[data-rs-col="shopify"],
  #mainContent .rs-flat-wrap td[data-rs-col="shopify"] {
    display: none !important;
  }
  /* On the Pending tab every row is "⏳ Unconfirmed" by definition (the tab
     IS the unconfirmed queue), so the Condition column is pure redundancy on
     a phone. Drop it there — leaves SKU / Order / WH / Actions, which fits a
     375px screen with no horizontal scroll. The Confirmed tab keeps it (real,
     varied conditions). */
  #mainContent .rs-flat-wrap.rs-pending th[data-rs-col="condition"],
  #mainContent .rs-flat-wrap.rs-pending td[data-rs-col="condition"] {
    display: none !important;
  }
  #mainContent .rs-flat-wrap td[data-rs-col="condition"] > span,
  #mainContent .rs-flat-wrap td[data-rs-col="shopify"] span {
    white-space: nowrap !important;
  }
  #mainContent .rs-flat-wrap td,
  #mainContent .rs-flat-wrap th {
    padding: 3px 5px !important;
    font-size: 11px !important;
  }
  #mainContent .rs-flat-wrap td[data-rs-col="warehouse"] {
    font-size: 10px !important;
  }
  /* ── Thin, dense rows on mobile (Cole 2026-06-09: "make the rows more thin
     on mobile and more compact horizontally — there's so much dead space").
     The trash/undo buttons carried inline min-height that the global 44px
     touch-target rule bumped to 44px, making every row ~57px even though
     Confirm/→ were 24px. Pin every action button in this dense table to 28px
     (still tappable) so the row collapses to ~34px. ── */
  #mainContent .rs-flat-wrap table button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 7px !important;
  }
  /* Drop the secondary "→" move button in the Actions cell on mobile — it's
     a rarely-used "move before confirming" shortcut; the primary Confirm and
     the 🗑 trash stay. Trims the widest column. */
  #mainContent .rs-flat-wrap .rs-flat-move { display: none !important; }
  #mainContent .rs-flat-wrap td[data-rs-col="actions"] > div { gap: 10px !important; }
  /* Cap the SKU column — auto-layout was handing it ~164px for an 8-char
     SKU, leaving a dead gap before Order #. 92px fits the vast majority;
     longer SKUs ellipsis (full value already visible on tap / in the row). */
  #mainContent .rs-flat-wrap td[data-rs-col="sku"],
  #mainContent .rs-flat-wrap th[data-rs-col="sku"] {
    width: 92px !important;
    max-width: 92px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Slim the condition / shopify pills so the row reads tighter. */
  #mainContent .rs-flat-wrap td[data-rs-col="condition"] > span,
  #mainContent .rs-flat-wrap td[data-rs-col="shopify"] span {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* ── Returns Stock chrome compacting (Cole 2026-06-09: "the search bar
     and everything else is super inefficient"). The shared .wh-grid-search
     wrapper carried 14px padding around an already-44px input (86px total)
     and the segmented status/warehouse tab rows ran 40px tall — together
     they pushed the first unit row ~310px down the page. Tighten without
     shrinking the input font below 16px (iOS zoom-on-focus guard). The
     extra :not() qualifiers match the specificity of the generic
     .pick-tab-group segmented-control rule below so these win. ── */
  #mainContent .rs-search-bar { margin-bottom: 8px !important; }
  #mainContent .rs-search-bar .wh-grid-search {
    padding: 2px 12px !important;
    margin-bottom: 0 !important;
  }
  #mainContent .rs-search-bar .wh-grid-search input[id^="rsSearch"] {
    min-height: 36px !important;
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #mainContent .pick-tab-group.rs-wh-subtabs { margin-bottom: 6px !important; }
  #mainContent .pick-tab-group.rs-status-subtabs:not(.pl-wh-subtabs):not(.rs-wh-subtabs) {
    margin-bottom: 8px !important;
  }
  #mainContent .pick-tab-group.rs-status-subtabs:not(.pl-wh-subtabs):not(.rs-wh-subtabs) .pick-tab {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }

  /* ── Receive flow step indicator — equalize visual weight between
     check-icon (done) and number (pending). Was: 14px svg vs 16px font
     made the eye lag when scanning the row. ── */
  .rcv-step-num {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
  }
  .rcv-step-label { font-size: 12px; }
  .rcv-steps { gap: 4px; }
  .rcv-step-line { flex: 1 0 12px; min-width: 12px; }

  /* ── Bin Map: condense 211-shelf grid for mobile. Cards drop from 120px
     min-width to 90px so 3 cards fit per row at 335px instead of 2.
     Shrink padding + font sizes to chop card height roughly in half. ── */
  #binMapRoot [style*="grid-template-columns"][style*="minmax(120px"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* ── Pick List Detail items table — convert each pick row to a stacked
     card on mobile so the warehouse worker can see Status / SKU / Shelf /
     Customer / Pick & Skip buttons without horizontal scrolling. ── */
  tr.pick-detail-row,
  tr.pick-detail-row td { display: block; }
  tr.pick-detail-row {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border) !important;
    border-radius: var(--radius, 8px);
    margin-bottom: 10px;
    padding: 10px 12px;
  }
  tr.pick-detail-row td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px;
    padding: 4px 0 !important;
    border: none !important;
    min-height: 26px;
  }
  tr.pick-detail-row td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 70px;
  }
  /* Hide the row-checkbox cell on mobile — bulk actions live in their own
     toolbar; per-row checkboxes are awkward to thumb-tap accurately. */
  tr.pick-detail-row td.pld-cb-cell { display: none; }
  /* Actions cell: hide label, full-width button row at bottom of card */
  tr.pick-detail-row td.pld-actions-cell::before { display: none; }
  tr.pick-detail-row td.pld-actions-cell {
    margin-top: 8px;
    padding-top: 8px !important;
    border-top: 1px dashed var(--border) !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  tr.pick-detail-row td.pld-actions-cell button {
    flex: 1 1 auto;
    min-height: 40px;
    font-size: 13px;
  }
  /* Hide the picklist-detail thead on mobile (we render labels via ::before) */
  .pld-th-status, .pld-th-actions { /* keep desktop styles */ }
  /* Wrap the whole table-scroll wrapper to 100% on mobile so it doesn't add
     a useless horizontal scrollbar around what's now a card list. */
  .table-scroll:has(.pick-detail-row) { overflow-x: visible !important; }
  .table-scroll:has(.pick-detail-row) > table > thead { display: none; }

  /* ── SKU + Shelf prominence on phones ──
     Warehouse staff complained these were getting visually lost behind
     stacked badges (composite / OB / two-per-box). Force the cell to lay
     out as a column so the SKU mono text stays the FIRST visible thing
     and any badge wraps to the next line below. Same treatment for shelf
     so the picker can read it eyes-up while walking. */
  tr.pick-detail-row td[data-label="SKU"],
  tr.pick-detail-row td[data-label="Shelf"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  tr.pick-detail-row td[data-label="SKU"] .pld-sku-text,
  tr.pick-detail-row td[data-label="SKU"] .pld-sku-missing,
  tr.pick-detail-row td[data-label="Shelf"] .pld-shelf-code {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    word-break: break-all;
  }
  tr.pick-detail-row td[data-label="Shelf"] .pld-shelf-cross,
  tr.pick-detail-row td[data-label="Shelf"] .pld-shelf-lastseen {
    font-size: 13px !important;
    word-break: break-word;
  }

  /* ── Pick List Detail header actions (Print / Add Items / Pick All) overflow
     the page-header at narrow widths because each button has bg/border + 13px
     text. Wrap them and let each grow to fit. ── */
  .pld-header-actions { flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; }
  .pld-header-actions button { flex: 1 1 auto !important; min-height: 40px !important; padding: 8px 10px !important; font-size: 12px !important; }

  /* ── Returns Stock unit tables (.wh-returns-table-sm + .wh-returns-table-lg)
     card layout. When the SKU details panel is expanded, the unit tables
     overflow horizontally (5-6 columns × 11 padding × inline action buttons).
     Convert to stacked cards so the worker can see SKU + Order + Reported
     Condition + Action button without swiping. ── */
  .wh-returns-table-sm,
  .wh-returns-table-sm thead,
  .wh-returns-table-sm tbody,
  .wh-returns-table-sm th,
  .wh-returns-table-sm td,
  .wh-returns-table-sm tr,
  .wh-returns-table-lg,
  .wh-returns-table-lg thead,
  .wh-returns-table-lg tbody,
  .wh-returns-table-lg th,
  .wh-returns-table-lg td,
  .wh-returns-table-lg tr { display: block; }
  .wh-returns-table-sm thead tr,
  .wh-returns-table-lg thead tr { display: none; }
  .wh-returns-table-sm,
  .wh-returns-table-lg { min-width: 0 !important; }
  .wh-returns-table-sm tr,
  .wh-returns-table-lg tr {
    background: var(--surface-1, var(--surface));
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 10px 12px;
  }
  .wh-returns-table-sm td,
  .wh-returns-table-lg td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px;
    padding: 4px 0 !important;
    border: none !important;
    min-height: 24px;
    white-space: normal !important;
  }
  .wh-returns-table-sm td::before,
  .wh-returns-table-lg td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 70px;
  }
  /* Action cell: hide the label, let the buttons fill the row */
  .wh-returns-table-sm td[data-label="Action"]::before,
  .wh-returns-table-sm td[data-label="Actions"]::before,
  .wh-returns-table-lg td[data-label="Action"]::before,
  .wh-returns-table-lg td[data-label="Actions"]::before { display: none; }
  .wh-returns-table-sm td[data-label="Action"],
  .wh-returns-table-sm td[data-label="Actions"],
  .wh-returns-table-lg td[data-label="Action"],
  .wh-returns-table-lg td[data-label="Actions"] {
    margin-top: 6px;
    padding-top: 6px !important;
    border-top: 1px dashed var(--border) !important;
  }

  /* ── Returns Stock per-SKU collapse. With ~70 SKU blocks each containing
     1-3 condition tables, the desktop layout produces a 25,000px scroll
     wall on mobile. Force <details class="rs-sku-block"> closed by default
     so workers see the SKU + count chip strip, expand the ones they need. ── */
  details.rs-sku-block { padding: 0 !important; }
  details.rs-sku-block:not([data-mobile-open]) { /* override the inline open */ }
  /* JS-free hack: hide the summary's open arrow when closed via removing [open]. */
  details.rs-sku-block[open] .rs-sku-chevron { transform: rotate(0deg); }
  details.rs-sku-block:not([open]) .rs-sku-chevron { transform: rotate(-90deg); }
  details.rs-sku-block summary.rs-sku-summary { padding: 12px 14px !important; }
  details.rs-sku-block summary::-webkit-details-marker { display: none; }
  details.rs-sku-block summary { list-style: none; }

  /* ── Warehouse Activity Log on mobile — one-liner per row (Cole 2026-05-07).
     Previously rendered as vertical stacked cards (12 fields × N rows = wall
     of text). Now: single horizontal line per movement with the most
     important info; secondary fields hidden. Tap-and-hold (title attrs) for
     full detail. ── */
  .wh-activity-table { width: 100% !important; min-width: 0 !important; border-collapse: collapse !important; }
  .wh-activity-table thead { display: none !important; }
  .wh-activity-table tbody { display: block !important; }
  .wh-activity-table tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.06)) !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  .wh-activity-table td {
    display: inline !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 0 !important;
  }
  .wh-activity-table td::before { content: none !important; }
  /* Visible primary cells on mobile, in display order: When · SKU · Δ · From→To */
  .wh-activity-table td[data-label="When"] { flex: 0 0 auto; color: var(--text-muted) !important; font-size: 11px !important; }
  .wh-activity-table td[data-label="SKU"] { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 600; }
  .wh-activity-table td[data-label="Δ"] { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; min-width: 38px; text-align: right; }
  .wh-activity-table td[data-label="From → To"] { flex: 1 1 auto; min-width: 0; color: var(--text-muted); font-size: 11px !important; text-align: right; }
  /* Hide secondary cells — full detail still in DOM via title="..." for
     accessibility / desktop view; collapsed on mobile to keep the one-liner. */
  .wh-activity-table td[data-label="Move"],
  .wh-activity-table td[data-label="Reason"],
  .wh-activity-table td[data-label="Shelf before"],
  .wh-activity-table td[data-label="Shelf after"],
  .wh-activity-table td[data-label="WH total after"],
  .wh-activity-table td[data-label="By"],
  .wh-activity-table td[data-label="Note"] { display: none !important; }

  /* ── Inv-matrix on mobile: drop the desktop max-height: calc(100vh - 300px)
     scroll cap. With ~1300 SKUs each rendered as a stacked card (~200px),
     a nested scroll container that only shows ~3 cards at a time is awful
     UX — the user fights two scrollbars. Let the page scroll naturally. ── */
  .inv-scroll { max-height: none !important; overflow-y: visible !important; }

  /* ── Container Tracker — keep as a real <table> with horizontal scroll,
     not stacked cards (Cole 2026-04-24). Tighten font/padding so the
     8-column table swipes cleanly inside its overflow:auto wrapper. ── */
  .table-scroll table:not(.matrix-table):not(.wh-activity-table):not(.wh-returns-table-sm) { font-size: 11px; }

  /* ── Jarvis Container Intelligence — collapse to <details> at mobile so
     it doesn't eat half the screen above the actual container list.
     Force `display: block` on the panel (existing .jarvis-container-intel-panel
     CSS uses flex, which breaks native <details> hide-when-closed behavior),
     and explicitly hide the body when not open. ── */
  details.jarvis-intel-details { display: block !important; }
  details.jarvis-intel-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
  details.jarvis-intel-details > summary::-webkit-details-marker { display: none; }
  details.jarvis-intel-details:not([open]) > #jarvisContainerIntelBody { display: none !important; }
  .jarvis-container-intel-body { max-height: 360px; overflow-y: auto; }

  /* (Stacked-card layout for table-scroll tables removed 2026-04-24 per
     Cole — those tables now render as real horizontally-scrolling tables
     with visible column headers, matching matrix-table behavior.) */

  /* ── 2026-04-30 mobile audit fixes ──
     Several JS files inline `style="max-width:440px..480px"` on modal
     containers. On a 390px phone these overflow the viewport. Override
     hardcoded widths in the 400-500px band so they shrink. */
  div[style*="max-width:440px"],
  div[style*="max-width: 440px"],
  div[style*="max-width:460px"],
  div[style*="max-width: 460px"],
  div[style*="max-width:480px"],
  div[style*="max-width: 480px"],
  div[style*="max-width:500px"],
  div[style*="max-width: 500px"] {
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Locations shelf detail: inline `min-width:200px` on selects forces
     the Scan-In/Out form to overflow on phones. Constrain to viewport. */
  select[style*="min-width:200px"],
  select[style*="min-width: 200px"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* KPI value font-size override for any warehouse view that injected
     scoped styles before the picklists.js tighten landed. */
  .wh-kpi-value { font-size: 17px !important; }
  .wh-kpi-label { font-size: 10px !important; }

  /* ── Bin Map: warehouse switcher tab strip overflows at narrow widths.
     Make it horizontally scrollable instead of wrapping awkwardly. ── */
  [class*="bin-map-warehouse-tabs"],
  [class*="binmap-tabs"] { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; }
  [class*="bin-map-warehouse-tabs"]::-webkit-scrollbar,
  [class*="binmap-tabs"]::-webkit-scrollbar { display: none; }

  /* ── 3. Shipping claims table (inline min-width:760px) ── */
  /* Targets the data-table inside overflow-x:auto wrap in shipping-claims.js */
  .data-table[style*="min-width:760px"],
  .data-table[style*="min-width: 760px"] {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
  }
  .data-table[style*="min-width:760px"] thead,
  .data-table[style*="min-width: 760px"] thead,
  .data-table[style*="min-width:760px"] tbody,
  .data-table[style*="min-width: 760px"] tbody,
  .data-table[style*="min-width:760px"] th,
  .data-table[style*="min-width: 760px"] th,
  .data-table[style*="min-width:760px"] td,
  .data-table[style*="min-width: 760px"] td,
  .data-table[style*="min-width:760px"] tr,
  .data-table[style*="min-width: 760px"] tr { display: block; }
  .data-table[style*="min-width:760px"] thead tr,
  .data-table[style*="min-width: 760px"] thead tr { display: none; }
  .data-table[style*="min-width:760px"] tr,
  .data-table[style*="min-width: 760px"] tr {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    margin-bottom: 8px;
    padding: 8px 12px;
  }
  .data-table[style*="min-width:760px"] td,
  .data-table[style*="min-width: 760px"] td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: none;
    font-size: 13px;
    min-height: 28px;
    white-space: normal;
  }
  .data-table[style*="min-width:760px"] td::before,
  .data-table[style*="min-width: 760px"] td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 90px;
  }

  /* ── 4. Event log table (.el-table, min-width 640px) ── */
  .el-table,
  .el-table thead,
  .el-table tbody,
  .el-table th,
  .el-table td,
  .el-table tr {
    display: block;
  }
  .el-table thead tr { display: none; }
  .el-table tr {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    margin-bottom: 8px;
    padding: 8px 12px;
  }
  .el-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border: none;
    font-size: 13px;
    min-height: 28px;
    white-space: normal;
    word-break: break-word;
  }
  .el-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
  }
  .el-table { min-width: 0 !important; width: 100%; }

  /* ── 5. Refunds table (#refundsTable, min-width 640px) ── */
  #refundsTable,
  #refundsTable thead,
  #refundsTable tbody,
  #refundsTable th,
  #refundsTable td,
  #refundsTable tr {
    display: block;
  }
  #refundsTable thead tr { display: none; }
  #refundsTable tr {
    background: var(--surface-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    margin-bottom: 8px;
    padding: 8px 12px;
  }
  #refundsTable td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border: none;
    font-size: 13px;
    min-height: 28px;
    white-space: normal;
  }
  #refundsTable td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
  }
  #refundsTable { min-width: 0 !important; width: 100%; }

} /* end @media (max-width: 768px) — SCAN card layouts */

/* ═══════════════════════════════════════════════════════════
   2026-05 mobile audit hardening — whole dashboard
   Shared fixes for touch targets, dense filters, and nested overflow.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header controls were being reduced to 38px by the late dashboard.css
     top-bar refresh. Keep the phone header compact, but do not drop below
     the practical 44px tap floor. */
  .header .icon-btn,
  .header .mobile-menu-btn.icon-btn,
  .header .theme-toggle-btn.icon-btn,
  .header .shell-search-btn.icon-btn,
  .header .notification-bell-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }
  .header .icon-btn.shell-search-btn {
    width: 44px !important;
    padding: 0 !important;
  }
  .header .font-scale-group {
    height: 44px !important;
    min-height: 44px !important;
  }
  .header .font-scale-btn {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Mobile forms: prevent iOS zoom and make controls thumb-friendly even
     when individual views inline small heights/padding. */
  #mainContent input:not([type="checkbox"]):not([type="radio"]),
  #mainContent select,
  #mainContent textarea,
  #mainContent .form-input,
  #mainContent .search-input,
  #mainContent .filter-select {
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }

  /* View roots and injected panels should never widen the phone canvas. A lot
     of OPS views render inline max-width/grid styles from JS, so this catches
     the shared failure mode without touching desktop density. */
  #mainContent,
  #mainContent > *,
  #mainContent .view-panel,
  #mainContent .u-panel,
  #mainContent .kpi-grid,
  #mainContent .kpi-card,
  #mainContent .sys-stats-row,
  #mainContent .sup-stats-row,
  #mainContent [style*="max-width:1100px"],
  #mainContent [style*="max-width: 1100px"],
  #mainContent [style*="max-width:1200px"],
  #mainContent [style*="max-width: 1200px"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #mainContent .sys-stat-card,
  #mainContent .sup-stat-card {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  /* Global Jarvis summary panel: it was hard-coded to 380px plus right offset,
     which is wider than a 390px phone once padding/borders are included. */
  #summarize-panel {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #summarize-panel p,
  #summarize-panel span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #summarize-panel button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Shared tab/action bars across finance, reviews, Jarvis, approvals,
     collections, MTO, and onboarding. JS-injected styles vary by view, so
     normalize the mobile behavior here. */
  #mainContent .sub-tab-bar,
  #mainContent .rm-tab-bar,
  #mainContent .mto-tab-row,
  #mainContent .jv-tabs,
  #mainContent .aq-category-tabs,
  #mainContent .rf-horizon-tabs,
  #mainContent .reorder-tabs,
  #mainContent [class*="-tab-row"],
  #mainContent [class*="-tabs"] {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    max-width: 100%;
    min-width: 0;
  }
  #mainContent .sub-tab-btn,
  #mainContent .rm-tab,
  #mainContent .mto-tab,
  #mainContent .jv-tab,
  #mainContent .aq-cat-tab,
  #mainContent .rf-horizon-btn,
  #mainContent .reorder-tab,
  #mainContent .onb-top-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    align-items: center;
    justify-content: center;
  }
  #mainContent .jv-tab {
    flex: 1 1 calc(50% - 1px) !important;
    padding: 10px 8px !important;
  }
  #mainContent .jv-tab-badge {
    margin-left: 4px !important;
    max-width: 100%;
  }
  #mainContent .jv-aiops-summary-grid,
  #mainContent .jv-aiops-panels {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent .jv-aiops-panel,
  #mainContent .jv-aiops-section-top {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  /* Mobile-safe wrappers for injected dashboard prose/markdown. */
  #mainContent .vault-split-grid,
  #mainContent .vault-split-grid > *,
  #mainContent [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent [style*="overflow-x:auto"],
  #mainContent [style*="overflow-x: auto"],
  #mainContent .table-scroll,
  #mainContent .table-container {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    contain: inline-size;
  }
  #mainContent code,
  #mainContent pre,
  #mainContent .coll-rule-text {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }

  /* Product Catalog compact toolbar: desktop uses a single horizontal strip.
     On phones, wrapping beats sideways drift and clipped category selects. */
  .toolbar.prod-catalog-toolbar-compact {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px !important;
    max-width: 100%;
  }
  .toolbar.prod-catalog-toolbar-compact > .prod-filter-cluster {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }
  .toolbar.prod-catalog-toolbar-compact > .prod-filter-cluster-search {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .toolbar.prod-catalog-toolbar-compact .filter-select,
  .toolbar.prod-catalog-toolbar-compact .search-input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .toolbar.prod-catalog-toolbar-compact .filter-pills {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar.prod-catalog-toolbar-compact .filter-pills::-webkit-scrollbar {
    display: none;
  }

  /* Tab strips used by picklists / returns: wrap into reachable rows instead
     of letting the last tab sit offscreen. */
  .pick-tab-group {
    flex-wrap: wrap !important;
    overflow: visible !important;
    max-width: 100%;
    gap: 6px !important;
  }
  .pick-tab-group .pick-tab {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    text-align: center;
  }

  /* Cart Insights has a table inside a grid item; without min-width:0 the
     table's scroll width can widen the whole main content column. */
  #cartInsightsFilters,
  .ci-dual-pane,
  .ci-dual-pane > *,
  .ci-table-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent > div[style*="padding:0 32px"],
  #mainContent > div[style*="padding: 0 32px"] {
    padding: 0 8px 24px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .ci-dual-pane {
    overflow: hidden;
  }
  .ci-dual-pane [style*="overflow:auto"],
  .ci-dual-pane [style*="overflow: auto"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Support inbox filters can be longer than a phone. Wrap them into compact
     rows; sideways filter rails hid useful choices from warehouse/support
     users and inflated main.scrollWidth during mobile audits. */
  #unifiedFilterBar {
    flex-wrap: wrap !important;
    overflow: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #unifiedFilterBar .toggle-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 44px !important;
    white-space: normal;
  }
  #unifiedFilterBar > span[style*="width:1px"] {
    display: none !important;
  }
  #inboxBody,
  #inboxList,
  .inbox-ticket-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .inbox-ticket-card > div,
  .inbox-ticket-card span,
  .inbox-ticket-card .text-dim {
    min-width: 0 !important;
    max-width: 100%;
  }
  .page-header #inboxSearch {
    width: 100% !important;
  }

  /* Label Generator account balance banner: compact pill on desktop, readable
     wrapped strip on phones. */
  .lbl-header-row {
    flex-wrap: wrap !important;
    max-width: 100%;
  }
  .lbl-balance-banner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    border-radius: 8px !important;
    justify-content: flex-start;
    overflow-wrap: anywhere;
  }
  .lbl-balance-banner > * {
    min-width: 0;
  }

  /* Returns: the live table has 13 operational columns. On phones it should
     read as return cards, not a 1900px spreadsheet inside the main canvas. */
  #mainContent .ret-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent .ret-table thead {
    display: none;
  }
  #mainContent .ret-table tbody {
    display: block;
    width: 100%;
  }
  #mainContent .ret-table tr {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
  }
  #mainContent .ret-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    width: 100% !important;
    border: none !important;
    padding: 5px 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  #mainContent .ret-table td::before {
    flex: 0 0 82px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  #mainContent .ret-table td:nth-child(1)::before { content: "Select"; }
  #mainContent .ret-table td:nth-child(2)::before { content: "Order"; }
  #mainContent .ret-table td:nth-child(3)::before { content: "SKU"; }
  #mainContent .ret-table td:nth-child(4)::before { content: "Type"; }
  #mainContent .ret-table td:nth-child(5)::before { content: "Declared"; }
  #mainContent .ret-table td:nth-child(6)::before { content: "Confirmed"; }
  #mainContent .ret-table td:nth-child(7)::before { content: "Requested"; }
  #mainContent .ret-table td:nth-child(8)::before { content: "Destination"; }
  #mainContent .ret-table td:nth-child(9)::before { content: "Status"; }
  #mainContent .ret-table td:nth-child(10)::before { content: "Refund"; }
  #mainContent .ret-table td:nth-child(11)::before { content: "Cost"; }
  #mainContent .ret-table td:nth-child(12)::before { content: "Notes"; }
  #mainContent .ret-table td:nth-child(13)::before { content: "Actions"; }
  #mainContent .ret-table th:first-child,
  #mainContent .ret-table td.ful-td-cb,
  #mainContent .ret-table td:first-child,
  #mainContent .ret-table td.ret-order-num,
  #mainContent .ret-table th:nth-child(2) {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
  #mainContent .ret-table td.ful-td-cb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  #mainContent .ret-table td.ful-td-cb::before {
    display: none;
    content: "" !important;
  }
  #mainContent .ret-table .td-nowrap {
    flex-wrap: wrap;
  }
  #mainContent .ret-table button,
  #mainContent .ret-table .btn,
  #mainContent .ret-table a {
    min-height: 44px;
  }

  /* Returns SC Warehouse inventory is injected after the main table loads, so
     it needs its own card treatment to avoid a delayed 480px table widening
     the page after the initial render looks clean. */
  #mainContent .ret-sc-section,
  #mainContent #scWarehouseContent {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  #mainContent #scWarehouseContent table.data-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent #scWarehouseContent table.data-table thead {
    display: none;
  }
  #mainContent #scWarehouseContent table.data-table tbody,
  #mainContent #scWarehouseContent table.data-table tr {
    display: block;
    width: 100%;
  }
  #mainContent #scWarehouseContent table.data-table tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
  }
  #mainContent #scWarehouseContent table.data-table td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100% !important;
    border: none !important;
    padding: 5px 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
  }
  #mainContent #scWarehouseContent table.data-table td::before {
    flex: 0 0 82px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  #mainContent #scWarehouseContent table.data-table td:nth-child(1)::before { content: "SKU"; }
  #mainContent #scWarehouseContent table.data-table td:nth-child(2)::before { content: "Product"; }
  #mainContent #scWarehouseContent table.data-table td:nth-child(3)::before { content: "Qty"; }
  #mainContent #scWarehouseContent table.data-table td:nth-child(4)::before { content: "Received"; }
  #mainContent #scWarehouseContent table.data-table td:nth-child(5)::before { content: "Condition"; }

  /* Marketing SEO side-by-side panels collapse to one column on phone. */
  #mainContent .seo-gsc-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100%;
    min-width: 0;
  }
  #mainContent .seo-gsc-grid > *,
  #mainContent .seo-table-mb,
  #mainContent .seo-content-pad {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Collections catalog: the default list is a plain desktop table. Turn only
     the catalog table into compact cards; the matrix remains intentionally
     horizontally scrollable. */
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) {
    min-width: 0 !important;
    width: 100% !important;
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) thead {
    display: none;
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border: none !important;
    padding: 5px 0 !important;
    min-width: 0;
    white-space: normal;
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td::before {
    flex: 0 0 82px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(1)::before { content: "Collection"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(2)::before { content: "Type"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(3)::before { content: "Products"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(4)::before { content: "Status"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td:nth-child(5)::before { content: "Handle"; }
  .coll-shell #coll-tab-body .table-scroll table:not(.cmx-table) td > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  .coll-shell #coll-tab-body .coll-divider-row {
    padding: 0 !important;
  }
  .coll-shell #coll-tab-body .coll-divider-row td {
    display: block !important;
    padding: 8px 10px !important;
  }
  .coll-shell #coll-tab-body .coll-divider-row td::before {
    content: "" !important;
    display: none;
  }

  /* Finance table cells use small link-buttons for zero values. They can sit
     at the visual edge of a scroller, so keep them from clipping. */
  #mainContent .is-cell-btn,
  #mainContent .ii-row {
    min-height: 44px !important;
  }
  #mainContent .is-cell-btn {
    min-width: 44px !important;
  }

  /* Morning Brief owner actions include markdown paths and long task titles.
     Let them wrap rather than quietly widening their card. */
  .mb-owner-action-row,
  .mb-owner-actions-loading,
  .mb-top3-content,
  .mb-top3-item-title,
  .mb-top3-item-detail {
    min-width: 0 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Ordinary dashboard tables become compact, app-style cards on phones.
     ui-enhancements.js adds a data-label from each table's headers and tags
     each cell (primary identifier / action / field), so this works across
     finance, marketing, support, approvals, inventory and warehouse lists
     without hand-writing labels for every view. Each card lays its fields
     out in a responsive 2-3 column grid — a tiny caption above the value —
     instead of one wasteful full-width row per field. Specialist
     high-density tables opt out in JS and keep their own mobile treatment. */
  #mainContent table[data-mobile-card-table="true"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  #mainContent table[data-mobile-card-table="true"] thead {
    display: none !important;
  }
  #mainContent table[data-mobile-card-table="true"] tbody {
    display: block !important;
    width: 100% !important;
  }
  #mainContent table[data-mobile-card-table="true"] tr {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 1px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 8px 11px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    box-sizing: border-box !important;
  }
  #mainContent table[data-mobile-card-table="true"] td {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    font-size: 12px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
  #mainContent table[data-mobile-card-table="true"] td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block !important;
    max-width: 100% !important;
    margin-bottom: 1px !important;
    color: var(--text-muted) !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Primary identifier cell (first non-control field) — the card's title:
     spans the full width, slightly larger. */
  #mainContent table[data-mobile-card-table="true"] td[data-mobile-cell="primary"] {
    grid-column: 1 / -1 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding-bottom: 5px !important;
  }
  /* Action cells (buttons / inputs) and genuine colspan cells span the full
     card width; action buttons flow in a wrapping row. */
  #mainContent table[data-mobile-card-table="true"] td[data-mobile-cell="wide"],
  #mainContent table[data-mobile-card-table="true"] td[colspan] {
    grid-column: 1 / -1 !important;
  }
  #mainContent table[data-mobile-card-table="true"] td[data-mobile-cell="wide"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 6px !important;
  }
  #mainContent table[data-mobile-card-table="true"] td[data-mobile-cell="wide"]::before,
  #mainContent table[data-mobile-card-table="true"] td[colspan]::before {
    display: none !important;
  }
  #mainContent table[data-mobile-card-table="true"] td[colspan] {
    display: block !important;
    text-align: left !important;
  }
  #mainContent table[data-mobile-card-table="true"] td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent table[data-mobile-card-table="true"] button,
  #mainContent table[data-mobile-card-table="true"] .btn,
  #mainContent table[data-mobile-card-table="true"] a {
    white-space: normal !important;
  }
}

@media (max-width: 420px) {
  .toolbar.prod-catalog-toolbar-compact > .prod-filter-cluster {
    flex-basis: 100% !important;
  }
  .pick-tab-group .pick-tab {
    flex-basis: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   2026-05 mobile app polish — compact, readable, full-screen
   Makes the shell feel like an app instead of a desktop page squeezed down.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .app {
    grid-template-rows: 56px minmax(0, 1fr) !important;
    min-height: 100dvh;
    overflow: hidden;
  }

  .header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }
  .header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  .header-left > div {
    min-width: 0;
  }
  .header-left .logo,
  .logo {
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-left .logo-sub,
  .logo-sub {
    display: none !important;
  }
  .header-right {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .header-status-group,
  .header-account-group,
  .font-scale-group,
  .header .refresh-btn,
  .header .sync-now-btn,
  .header .lang-toggle-btn {
    display: none !important;
  }
  .header-action-group {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .header .mobile-menu-btn.icon-btn,
  .header .shell-search-btn.icon-btn,
  .header .theme-toggle-btn.icon-btn {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }

  .main {
    min-height: 0 !important;
    height: calc(100dvh - 56px) !important;
    padding: 10px 8px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  #mainContent {
    padding: 0 8px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #mainContent > div,
  #mainContent > section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #mainContent .page-header {
    margin: 0 0 10px !important;
    padding: 0 !important;
    min-height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  #mainContent .page-header > div {
    min-width: 0;
  }
  #mainContent .page-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }
  #mainContent .page-subtitle {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  #mainContent .page-header .btn,
  #mainContent .page-header .refresh-btn,
  #mainContent .page-header button {
    flex: 0 0 auto;
    min-height: 44px !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
  }

  #mainContent .stats-row,
  #mainContent .stat-grid,
  #mainContent .stat-cards,
  #mainContent .sup-stats-row,
  #mainContent .sys-stats-row,
  #mainContent .kpi-grid,
  #mainContent .kpi-grid-3,
  #mainContent .kpi-grid-4,
  #mainContent [class*="stats-row"],
  #mainContent [class*="stat-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    align-items: stretch;
  }
  #mainContent .stat-card,
  #mainContent .sup-stat-card,
  #mainContent .sys-stat-card,
  #mainContent .kpi-card,
  #mainContent .lbl-kpi-card,
  #mainContent [class*="-stat-card"],
  #mainContent [class*="-kpi-card"] {
    width: auto !important;
    min-width: 0 !important;
    min-height: 74px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden;
  }
  #mainContent .stat-label,
  #mainContent .sup-stat-label,
  #mainContent .sys-stat-label,
  #mainContent .kpi-label,
  #mainContent .lbl-kpi-label,
  #mainContent [class*="-stat-label"] {
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    overflow-wrap: anywhere;
  }
  #mainContent .stat-value,
  #mainContent .sup-stat-value,
  #mainContent .sys-stat-value,
  #mainContent .kpi-value,
  #mainContent .lbl-kpi-value,
  #mainContent [class*="-stat-value"] {
    font-size: 26px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }
  #mainContent .stat-card *,
  #mainContent .sup-stat-card *,
  #mainContent .sys-stat-card *,
  #mainContent .kpi-card *,
  #mainContent .lbl-kpi-card * {
    max-width: 100%;
  }
  #mainContent .stat-card svg,
  #mainContent .sup-stat-card svg,
  #mainContent .sys-stat-card svg,
  #mainContent .kpi-card svg,
  #mainContent .lbl-kpi-card svg {
    max-height: 18px;
    flex-shrink: 0;
  }

  #mainContent .lbl-kpi-row {
    display: grid !important;
    /* 4 cols × 2 rows on mobile (Cole 2026-05-07: was 3 cols which left
       the 7th card orphaned full-width via the orphan-card guard).
       4 cols means 7 cards = 4+3 with the 7th sharing row-2 cleanly. */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px 0 12px !important;
    overflow: visible !important;
  }
  #mainContent .lbl-kpi-card {
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
  }
  #mainContent .lbl-kpi-label {
    margin-bottom: 4px !important;
    text-align: left;
  }
  #mainContent .stat-cards .stat-value {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
  #mainContent .stat-cards .stat-card:last-child .stat-value {
    font-size: 18px !important;
    line-height: 1.12 !important;
    word-break: break-word;
  }
  #mainContent .sup-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #mainContent .sup-stats-row .sup-stat-card {
    min-height: 66px !important;
    padding: 9px 10px !important;
  }
  #mainContent .sup-stats-row .sup-stat-value {
    font-size: 22px !important;
  }
  #mainContent .sup-stats-row .sup-stat-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #mainContent .pick-tab-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  #mainContent .pick-tab-group .pick-tab {
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }
  #mainContent .pick-tab-group .pick-tab.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast, #fff) !important;
  }
  #mainContent .pick-tab-group.pl-wh-subtabs .pick-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Picklist + Returns Stock mobile filter rows — split warehouse chips and
     status tabs into two visually distinct strips so they don't blend
     together (Cole 2026-05-07). Warehouse row: compact horizontal pill
     strip. Status row: segmented control. Shared between picklist
     (.pl-wh-subtabs) and returns stock (.rs-wh-subtabs). */
  #mainContent .pick-tab-group.pl-wh-subtabs,
  #mainContent .pick-tab-group.rs-wh-subtabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 6px !important;
  }
  #mainContent .pick-tab-group.pl-wh-subtabs::-webkit-scrollbar,
  #mainContent .pick-tab-group.rs-wh-subtabs::-webkit-scrollbar { display: none; }
  #mainContent .pick-tab-group.pl-wh-subtabs .pick-tab,
  #mainContent .pick-tab-group.rs-wh-subtabs .pick-tab {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 16px !important;
    background: var(--surface-2, rgba(0,0,0,0.04)) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
  }
  #mainContent .pick-tab-group.pl-wh-subtabs .pick-tab.active,
  #mainContent .pick-tab-group.rs-wh-subtabs .pick-tab.active {
    background: var(--brand-tan, rgba(170, 138, 100, 0.18)) !important;
    border-color: rgba(170, 138, 100, 0.35) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
  }

  /* Status row: segmented-control style. Single rounded container with
     equal-flex children separated by hairline dividers — visually distinct
     from the pill warehouse strip above. */
  #mainContent .pick-tab-group:not(.pl-wh-subtabs):not(.rs-wh-subtabs) {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 3px !important;
    background: var(--surface-2, rgba(0,0,0,0.04)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .pick-tab-group:not(.pl-wh-subtabs):not(.rs-wh-subtabs) .pick-tab {
    flex: 1 1 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
  }
  #mainContent .pick-tab-group:not(.pl-wh-subtabs):not(.rs-wh-subtabs) .pick-tab.active {
    background: var(--surface) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
    border-color: transparent !important;
  }

  #mainContent .filters-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 10px 0 12px !important;
    width: 100%;
  }
  #mainContent .filters-bar > input,
  #mainContent .filters-bar > select,
  #mainContent .filters-bar > button {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #mainContent .filters-bar > input:first-child {
    grid-column: 1 / -1;
  }
  #mainContent .filters-bar > span {
    display: none !important;
  }

  #mainContent .toolbar {
    width: 100%;
    gap: 8px !important;
    margin: 8px 0 12px !important;
  }
  #mainContent .toolbar > input,
  #mainContent .toolbar > select,
  #mainContent .toolbar .search-input {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  #mainContent .filter-btn,
  #mainContent .ret-filter-btn,
  #mainContent .toggle-btn,
  #mainContent .tab-btn,
  #mainContent .sub-tab-btn {
    border-radius: 8px !important;
  }
  #mainContent .toolbar:has(.ret-filter-btn) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 10px !important;
  }
  #mainContent .toolbar:has(.ret-filter-btn)::-webkit-scrollbar {
    display: none;
  }
  #mainContent .toolbar:has(.ret-filter-btn) .ret-filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #mainContent .table-container,
  #mainContent .view-panel,
  #mainContent .u-panel,
  #mainContent .brief-card,
  #mainContent [class*="-panel"] {
    border-radius: 8px !important;
  }

  #mainContent #refundsTable {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent #refundsTable thead {
    display: none;
  }
  #mainContent #refundsTable tbody {
    display: block;
    width: 100%;
  }
  #mainContent #refundsTable tr.refund-row {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
    overflow: hidden;
    box-sizing: border-box;
  }
  #mainContent #refundsTable tr.refund-row td {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    width: 100% !important;
    border: none !important;
    padding: 5px 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    color: var(--text) !important;
    text-align: right;
  }
  #mainContent #refundsTable tr.refund-row td::before {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
  }
  #mainContent #refundsTable tr.refund-row td:nth-child(1)::before { content: "Date"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(2)::before { content: "Order"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(3)::before { content: "Customer"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(4)::before { content: "SKUs"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(5)::before { content: "Amount"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(6)::before { content: "Reason"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(7)::before { content: "Return"; }
  #mainContent #refundsTable tr.refund-row td:nth-child(8)::before { content: "Restock"; }
  #mainContent #refundsTable tr.refund-detail-row > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    white-space: normal !important;
  }
  #mainContent #refundsTable .status-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #mainContent #refundsTable tr.refund-row td > * {
    min-width: 0;
    max-width: 100%;
  }
  #mainContent #refundsTable tr.refund-row td:nth-child(4) {
    white-space: normal !important;
  }
  #mainContent #refundsTable tr.refund-row td:nth-child(6) {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  #mainContent:has(#refundsTable) .stat-card .stat-value {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent:has(#refundsTable) .stat-card:nth-child(4) .stat-value {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.15 !important;
  }
  #mainContent button[style*="min-height:34px"],
  #mainContent button[style*="min-height: 34px"] {
    min-height: 44px !important;
  }

  #mainContent input[type="checkbox"],
  #mainContent input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex: 0 0 auto;
  }
  #mainContent #inboxSpamToggle {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  #mainContent #unifiedFilterBar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 2px 4px !important;
    margin-bottom: 10px !important;
  }
  #mainContent #unifiedFilterBar::-webkit-scrollbar {
    display: none;
  }
  #mainContent #unifiedFilterBar .toggle-btn {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  #mainContent #unifiedFilterBar > span[style*="width:1px"] {
    display: none !important;
  }
  #mainContent .data-table th,
  #mainContent .data-table td,
  #mainContent table th,
  #mainContent table td {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  #mainContent .data-table td,
  #mainContent table td {
    white-space: normal;
  }
  #mainContent .sa-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  #mainContent .la-table-wrap {
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box;
    max-width: 100% !important;
    overflow: visible !important;
  }
  #mainContent .la-table,
  #mainContent .la-table tbody,
  #mainContent .la-table tr {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #mainContent .la-table td {
    display: block !important;
    width: 100% !important;
  }
  #mainContent .la-table thead {
    display: none !important;
  }
  #mainContent .la-table tr {
    box-sizing: border-box;
    position: relative;
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
  }
  #mainContent .la-table td {
    box-sizing: border-box;
    position: relative;
    max-width: none !important;
    min-height: 28px;
    padding: 5px 0 5px 92px !important;
    border: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }
  #mainContent .la-table td::before {
    position: absolute;
    left: 0;
    top: 5px;
    width: 82px;
    color: var(--text-muted);
    content: "";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  #mainContent .la-table td:nth-child(1) {
    min-height: 28px;
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
  #mainContent .la-table td:nth-child(1)::before { display: none; }
  #mainContent .la-table td:nth-child(2)::before { content: "Severity"; }
  #mainContent .la-table td:nth-child(3)::before { content: "Type"; }
  #mainContent .la-table td:nth-child(4)::before { content: "Provider"; }
  #mainContent .la-table td:nth-child(5)::before { content: "Reference"; }
  #mainContent .la-table td:nth-child(6)::before { content: "Order"; }
  #mainContent .la-table td:nth-child(7)::before { content: "Created"; }
  #mainContent .la-table td:nth-child(8)::before { content: "Status"; }
  #mainContent .la-table td:nth-child(9) {
    padding-left: 0 !important;
    padding-top: 8px !important;
  }
  #mainContent .la-table td:nth-child(9)::before { display: none; }
  #mainContent .la-table td:nth-child(5) {
    padding-left: 0 !important;
    font-size: 11px !important;
    line-height: 1.45;
    word-break: break-all !important;
  }
  #mainContent .la-table td:nth-child(5)::before {
    display: block;
    position: static;
    width: auto;
    margin-bottom: 4px;
  }
  #mainContent .la-table .la-resolve-btn {
    min-height: 40px;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .header-left .logo,
  .logo {
    max-width: 176px;
    font-size: 12px !important;
  }
  #mainContent .pick-tab-group .pick-tab {
    flex-basis: auto !important;
  }
}

/* Bottom nav was removed from the shell on 2026-04-27. Keep the hard-hide,
   but also remove the old reserved gutter and floating-control lift so phone
   users do not lose the bottom of every view to a phantom nav bar. */
@media (max-width: 768px) {
  .main {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  #toast-container,
  .hub-toast,
  .lbl-toast,
  #sched-toast {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #assistantBtn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #aqBatchBar {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:has(#sidebar.mobile-open) #mainContent {
    overflow: hidden !important;
    touch-action: none;
  }
}

/* Final mobile overflow sweep — covers narrow summary tables, chip rails, and
   closed side panels that the full-route crawler still caught after the
   generic card-table pass. */
@media (max-width: 768px) {
  #mainContent .fin-summary-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent .fin-summary-table tbody,
  #mainContent .fin-summary-table tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent .fin-summary-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--border) !important;
    box-sizing: border-box !important;
  }
  #mainContent .fin-summary-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .fin-summary-table td[colspan] {
    grid-column: 1 / -1;
    text-align: left !important;
  }

  #mainContent #unifiedFilterBar,
  #mainContent .toolbar:has(.ret-filter-btn),
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  #mainContent #unifiedFilterBar .toggle-btn,
  #mainContent .toolbar:has(.ret-filter-btn) .ret-filter-btn,
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] .toggle-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] {
    grid-column: 1 / -1;
  }
  #mainContent #syncTrackingBtn,
  #mainContent .lbl-section-summary,
  #mainContent .obx-wh-sub,
  #mainContent .sfc-arch-grid,
  #mainContent .sfc-arch-grid > *,
  #mainContent .sfc-info-box {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
  #mainContent .sfc-arch-grid {
    grid-template-columns: 1fr !important;
  }

  #mainContent .la-panel,
  #mainContent .sa-panel {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  #mainContent .la-panel:not(.open),
  #mainContent .sa-panel:not(.open) {
    transform: translateX(calc(100% + 64px)) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #mainContent .la-panel.open,
  #mainContent .sa-panel.open {
    visibility: visible !important;
  }
  #mainContent .la-panel-close,
  #mainContent .sa-panel-close {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mainContent .pl-mom-table,
  #mainContent .pl-mom-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #mainContent .pl-mom-table tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    box-sizing: border-box !important;
  }
  #mainContent .pl-mom-table tr:first-child {
    display: none !important;
  }
  #mainContent .pl-mom-table td {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 5px 0 !important;
    border: 0 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }
  #mainContent .pl-mom-table td::before {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
  }
  #mainContent .pl-mom-table td:nth-child(1)::before { content: "Metric"; }
  #mainContent .pl-mom-table td:nth-child(2)::before { content: "This month"; }
  #mainContent .pl-mom-table td:nth-child(3)::before { content: "Prior month"; }
  #mainContent .pl-mom-table td:nth-child(4)::before { content: "Change"; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 1 (Cole 2026-05-06):
 * "right now it looks horrible, many spots aren't even, symmetrical, or
 *  difficult to view if you scroll all over the page, we need to have it
 *  way more compact and everything even, symmetrical and parallel".
 *
 * Targets the highest-impact systemic issues across every section:
 *   1. Orphan-card guard — odd-count grids no longer leave the last card
 *      sitting alone in its row. Last card spans full width.
 *   2. Bottom-nav clearance — main content has 96px bottom padding so the
 *      mobile bottom-nav doesn't eat the last row of any view.
 *   3. Equal filter-button heights — pick-tabs / toggle-btns / oex tabs
 *      stay the same height whether they have a badge or not.
 *   4. Compact toolbars — search-bars, condition filters, sort dropdowns
 *      collapse cleanly to one row of consistent height.
 *   5. Tighter section gaps — page header / tab bar / filter bar / content
 *      use a uniform 12px rhythm instead of mixed 14/16/12.
 * Every rule is mobile-only (≤768px) so desktop is untouched.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1. Orphan-card guard. When a grid (stat-cards, kpi-grid, pick-tab-group,
   *    oex-columns, etc.) has an odd number of items, the last one spans
   *    full width so the row doesn't end with an empty slot. Grid `display`
   *    rows treat `:nth-child(odd):last-child` consistently across browsers. */
  #mainContent .stat-cards > *:nth-child(odd):last-child,
  #mainContent .stat-grid > *:nth-child(odd):last-child,
  #mainContent .stats-row > *:nth-child(odd):last-child,
  #mainContent .kpi-grid > *:nth-child(odd):last-child,
  #mainContent .kpi-grid-3 > *:nth-child(odd):last-child,
  #mainContent .kpi-grid-4 > *:nth-child(odd):last-child,
  #mainContent .sup-stats-row > *:nth-child(odd):last-child,
  #mainContent .sys-stats-row > *:nth-child(odd):last-child,
  #mainContent [class*="stats-row"] > *:nth-child(odd):last-child,
  #mainContent [class*="stat-grid"] > *:nth-child(odd):last-child,
  #mainContent .oex-columns > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  /* For flex-based tab/pill groups (pick-tab-group, oex-tabs, toolbar) the
   *    same pattern uses flex-basis: 100%. Targets odd-count last item. */
  #mainContent .pick-tab-group > .pick-tab:nth-child(odd):last-child,
  #mainContent #unifiedFilterBar > .toggle-btn:nth-child(odd):last-child,
  #mainContent .oex-tabs > .oex-tab:nth-child(odd):last-child {
    flex: 1 1 100% !important;
  }

  /* 2. Bottom clearance. The mobile bottom-nav is permanently hidden, so the
   *    old 96px buffer left dead whitespace on every view. Small base gap +
   *    safe-area inset for notched devices is enough. */
  #mainContent {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 3. Equal filter-button heights. Active state, badged state, plain state
   *    all sit at exactly 40px so a row of tabs is a clean horizontal band.
   *    The badge inside the tab gets `align-self: center` so it doesn't
   *    push the tab taller. */
  #mainContent .pick-tab-group .pick-tab,
  #mainContent .oex-tab,
  #mainContent #unifiedFilterBar .toggle-btn,
  #mainContent .ret-filter-btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  #mainContent .pick-tab-group .pick-tab > span,
  #mainContent .oex-tab > span,
  #mainContent #unifiedFilterBar .toggle-btn > span {
    align-self: center;
    flex-shrink: 0;
  }

  /* 4. Compact toolbars — search bar, condition filters, sort dropdowns
   *    all sit on consistent 40px row heights with the same padding. */
  #mainContent .toolbar,
  #mainContent .rs-search-bar,
  #mainContent .wh-grid-search {
    margin-bottom: 12px !important;
    gap: 8px !important;
  }
  #mainContent .wh-grid-search input,
  #mainContent .toolbar input[type="text"],
  #mainContent .toolbar input[type="search"],
  #mainContent .rs-search-bar input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }
  #mainContent .toolbar select,
  #mainContent .rs-search-bar select {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    box-sizing: border-box;
  }

  /* 5. Tighter, uniform vertical rhythm. Every section between page-header
   *    and content (warehouseTabs / mainTabs / stockSubFilter / search /
   *    conditionFilter) uses the same 12px gap. Removes the staircase of
   *    14/16/8/12 margins that made pages feel jittery while scrolling. */
  #mainContent .page-header {
    margin-bottom: 12px !important;
  }
  #mainContent .pick-tab-group {
    margin-bottom: 12px !important;
  }
  #mainContent .stat-cards,
  #mainContent .stat-grid,
  #mainContent .stats-row,
  #mainContent .kpi-grid,
  #mainContent [class*="stats-row"],
  #mainContent [class*="stat-grid"] {
    margin-bottom: 12px !important;
  }

  /* 6. Order-Exceptions 3-column → 1-column on mobile (the existing breakpoint
   *    was ≤1100px which already collapses to 1, but tighten gaps). */
  #mainContent .oex-columns {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #mainContent .oex-column {
    border-radius: 10px !important;
  }

  /* 7. Auto-card cell value alignment. The mobile-card transformation
   *    (table[data-mobile-card-table]) rights-align values; cap the value
   *    cell so multi-button rows don't wrap awkwardly under their label.
   *    Right-side button clusters (e.g. Returns Stock action row) wrap to
   *    a tight column instead of squeezing horizontally. */
  #mainContent table[data-mobile-card-table="true"] td > div[style*="display:flex"],
  #mainContent table[data-mobile-card-table="true"] td > div[style*="display: flex"] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  /* 8. Page-subtitle wrapping — long subtitles were horizontal-scrolling
   *    rather than wrapping. Force wrap. */
  #mainContent .page-subtitle {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* 9. Soften the active pick-tab brown — it's overbearing on small screens
   *    where it dominates the entire visual hierarchy. The active state
   *    should communicate "selected" without competing with content. */
  #mainContent .pick-tab.active {
    background: var(--brand-soft, #f5f0e8) !important;
    color: var(--brand-deep, #5a4a32) !important;
    border-color: var(--brand-mid, #c9b289) !important;
    font-weight: 700 !important;
  }

  /* ─── Mobile UX pass 2 (2026-05-06) ────────────────────────────────────
   *  Targets the four issues the pass-1 review surfaced.
   * ───────────────────────────────────────────────────────────────────── */

  /* P2.1 — .toggle-btn active state was using --text (near-black) which
   *        reads as "modal dialog" in a tab strip and sat in stark contrast
   *        with the soft pick-tab.active. Inbox + Drafts + Issues all use
   *        toggle-btn — match the pick-tab style so every filter strip
   *        looks the same on mobile. */
  #mainContent .toggle-btn.active {
    background: var(--brand-soft, #f5f0e8) !important;
    color: var(--brand-deep, #5a4a32) !important;
    border-color: var(--brand-mid, #c9b289) !important;
    font-weight: 700 !important;
  }

  /* P2.2 — Tab badge equality. When a pick-tab carries a count badge (218,
   *        9, etc.), it was visually heavier than its sibling. Constrain
   *        the badge to a 16px circle inside the 40px tab so the row sits
   *        on a single visual baseline. */
  #mainContent .pick-tab > span:first-child[style*="border-radius:10px"],
  #mainContent .pick-tab > span:first-child[style*="border-radius: 10px"] {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    line-height: 18px !important;
    border-radius: 9px !important;
    flex-shrink: 0;
  }

  /* P2.3 — High-density tables (matrix-table, cmx-table, prod-logistics-
   *        table, etc.) keep horizontal-scroll on mobile, but the wrapper
   *        was extending past viewport because parent containers had no
   *        min-width:0. Lock the scroll container to 100% viewport so it
   *        becomes a contained pannable region instead of forcing the
   *        whole page to scroll. */
  #mainContent .matrix-table-wrap
  #mainContent .matrix-wrap,
  #mainContent [class*="-table-wrap"]:not([class*="mobile-card"]),
  #mainContent .table-scroll {
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* P2.4 — Page-title at 375px was wrapping to 2 lines on long titles like
   *        "Customer Intelligence" or "Strategy Command". Drop to 18px on
   *        ≤ 400px viewports to keep them on one line. The 20px breakpoint
   *        in the existing rule (line 2645) stays for 400-768. */
  @media (max-width: 400px) {
    #mainContent .page-title {
      font-size: 18px !important;
    }
    #mainContent .page-subtitle {
      font-size: 11.5px !important;
    }
  }

  /* P2.5 — Section-header h2/h3 inside cards were sized inconsistently
   *        across views (16-20px). Force a consistent 15px h3 / 17px h2
   *        on mobile so vertical rhythm is predictable. */
  #mainContent .oex-wrap > h2,
  #mainContent .stat-cards + h2,
  #mainContent .stat-cards + h3 {
    font-size: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Orders (Agent 1, 2026-05-06)
 * "many spots aren't even, symmetrical, or have really difficult to view if
 *  you scroll all over the page, we need to have it way more compact and
 *  everything even, symmetrical and parallel".
 *
 * Scope: Orders nav only (fulfillment, mto, order-exceptions, labels-hub,
 * label-anomalies, labels, shipping-claims, purchase-orders-hub, bulk-orders,
 * smart-reorder). Every selector is scoped + mobile-only (≤768px) so desktop
 * is untouched and other nav sections are unaffected.
 *
 * Issues addressed:
 *   1. Stat-card grids that aren't even 2-col (mismatched heights, orphan
 *      last-card on odd counts in containers Pass 1 missed: log-kpi-row,
 *      la-kpi-grid, oex-stat-cards, po-stat-grid, po-tabbar).
 *   2. Stat-card values rendered at 22-28px in 175px-wide cards — reduce to
 *      20px so two columns fit cleanly without text wrap.
 *   3. Inline-style 4-col stat grids in shipping-claims that bypass Pass 1's
 *      class-based collapse rules.
 *   4. Filter rows that overflow horizontally (oex-tabs, la-filter-bar,
 *      lf-filter-group) instead of wrapping cleanly.
 *   5. Inline supplier <select> in MTO toolbar with hardcoded font/padding
 *      that breaks the 40px row height established in Pass 1.
 *   6. Modal/inline grids inside Labels & shipping-claims forms that
 *      stay 2-col on mobile, squishing labels under their inputs.
 *   7. PO hub tab cards (po-tab) chunky on small screens (84px min-height,
 *      18px padding, 20px radius) — tighten on mobile.
 *   8. Smart Reorder header action button cluster wraps awkwardly.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1a. Stat-card grid orphan-card guard — extends Pass 1 to cover the
   *     class names used by the Orders views. */
  #mainContent .log-kpi-row > *:nth-child(odd):last-child,
  #mainContent .la-kpi-grid > *:nth-child(odd):last-child,
  #mainContent .oex-stat-cards > *:nth-child(odd):last-child,
  #mainContent .po-stat-grid > *:nth-child(odd):last-child,
  #mainContent .po-kpi-grid > *:nth-child(odd):last-child,
  #mainContent .po-tabbar > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
    flex-basis: 100%;
  }

  /* 1b. Force consistent 2-col grids (Pass 1 already handles class-based ones;
   *     these are inline-style grids the Orders views generate). */
  #mainContent #sc-stats-row > div[style*="grid-template-columns"],
  #mainContent #sc-page-body div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* PO hub: po-stat-grid auto-fit minmax(180px,1fr) → force 2-col.
   * Tabbar inline grid override needs !important to beat the inline style. */
  #mainContent .po-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  #mainContent .po-tabbar[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* 2. Even stat-card heights so a 2-col grid is a clean horizontal band.
   *    Stat-row in fulfillment has 9 cards; ensure each card is the same
   *    height regardless of whether it has a sub-value, single number, or
   *    placeholder em-dash. */
  #mainContent .stats-row .stat-card,
  #mainContent .log-kpi-card,
  #mainContent .la-kpi-card,
  #mainContent .oex-stat-card,
  #mainContent .po-stat-card {
    min-height: 76px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }

  /* 2b. Tame oversized stat values that don't fit 2-col on a 375px viewport. */
  #mainContent .oex-stat-card .oex-stat-num {
    font-size: 22px !important;
  }
  #mainContent .po-stat-card .stat-value,
  #mainContent .la-kpi-value,
  #mainContent .log-kpi-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
  /* Smart Reorder summary cards use inline border-left + 28px font in 4
   * fixed-width cards. Force the 28px down on mobile via inline-style match. */
  #mainContent .card[style*="border-left:3px solid"] > div[style*="font-size:28px"] {
    font-size: 22px !important;
  }

  /* 3. Filter rows that wrap cleanly instead of horizontal-scroll. */
  #mainContent .oex-tabs {
    flex-wrap: wrap !important;
    border-bottom: none !important;
    gap: 6px !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
  }
  #mainContent .oex-tab {
    flex: 1 1 calc(50% - 6px) !important;
    text-align: center !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
  }
  #mainContent .oex-tab.active {
    background: var(--surface-2) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
  }
  #mainContent .oex-add-btn {
    margin-left: 0 !important;
    flex: 1 1 100% !important;
  }

  /* 3b. Label Anomalies filter bar — selects/inputs were 12px font + 5px
   *     padding (cramped, sub-tap-target). Bump to 40px height to match
   *     Pass 1's filter-button band. */
  #mainContent .la-filter-bar {
    gap: 8px !important;
  }
  #mainContent .la-filter-bar select,
  #mainContent .la-filter-bar input,
  #mainContent .la-filter-bar input[type="date"] {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    flex: 1 1 calc(50% - 4px) !important;
    box-sizing: border-box !important;
  }

  /* 3c. Fulfillment lf-filter-group — 7 buttons wrap into a tidy 2-col grid
   *     so widths are even regardless of badge presence. */
  #mainContent .lf-filter-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100%;
  }
  #mainContent .lf-filter-group > .ret-filter-btn:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  #mainContent .lf-filter-group .ret-filter-btn {
    width: 100%;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  /* 4. MTO toolbar — supplier <select> and "Clear" button used hardcoded
   *    inline padding/font, breaking the 40px row established in Pass 1. */
  #mainContent .toolbar select[onchange*="mtoSupplierFilter"],
  #mainContent .toolbar button[data-action="mto-clear-supplier-filter"] {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }
  /* MTO toggle-group should fill the row evenly. */
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 6px !important;
    width: 100%;
    padding: 2px 2px 6px !important;
    margin: 0 -2px !important;
    scroll-snap-type: x proximity;
    /* Fade right edge as a "more →" hint */
    mask-image: linear-gradient(to right, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
  }
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] > .toggle-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    scroll-snap-align: start;
    border-radius: 20px !important;
  }
  #mainContent .toolbar .toggle-group[data-action-group="mto-stage-filter"] > .toggle-btn.active {
    box-shadow: 0 0 0 2px rgba(200,169,126,0.4);
  }

  /* ───────────────────────────────────────────────────────────────
   * MTO Pipeline — hide the 6-card KPI grid on mobile (2026-06-16).
   *
   * The KPI cards (Awaiting PO, In Production, …) were ~268px of the
   * 812px viewport, pushing the first order off-screen so only ~4 rows
   * were visible "by default". Every KPI card is a duplicate of a
   * stage-filter chip (identical mto-stage / mto-stage-filter handler),
   * and the counts now ride ON the filter chips (`.mto-cnt`), so the
   * grid is pure redundancy on a phone. The one unique signal — Oldest
   * Active — is preserved as the `.mto-mobile-aging` pill in the header.
   * Scoped via :has(.mb-mto-stage-card) so only the MTO KPI row is hit;
   * other views that reuse .log-kpi-row are untouched.
   * ─────────────────────────────────────────────────────────────── */
  #mainContent .log-kpi-row:has(.mb-mto-stage-card) {
    display: none !important;
  }

  /* ───────────────────────────────────────────────────────────────
   * MTO Pipeline — sticky toolbar so search + filters stay reachable
   * while scrolling a long list on a phone.
   * ─────────────────────────────────────────────────────────────── */
  #mainContent .toolbar:has(input#mtoSearchInput) {
    position: sticky !important;
    top: 0;
    z-index: var(--z-sticky, 10);
    background: var(--bg, var(--surface));
    padding: 8px 0 6px !important;
    margin: 0 0 6px !important;
    box-shadow: 0 4px 12px -8px rgba(0,0,0,0.4);
  }

  /* ───────────────────────────────────────────────────────────────
   * MTO Pipeline — phone compact list (one row per unit, 2026-06-10).
   *
   * Each unit renders as ONE compact two-line row, not a tall card:
   *   line 1: [☐] #order  Product title…              [Status pill]
   *   line 2:      SKU    customer            supplier
   * Everything else (age, qty, service, sea/USA legs, payment,
   * dates, notes) lives behind the row tap → expandable detail.
   * A stage-colored left border keeps at-a-glance scanning:
   *   red    = Awaiting PO        purple = Production Complete
   *   orange = In Production      yellow = In Transit
   *   blue   = At USA Warehouse
   *
   * Hidden cells: .mb-hide-mobile (Service, Sea/USA carriers +
   * tracking #s, Ordered date, Order-Journey icon) plus Age, Qty,
   * Ship To, Payment, Notes via explicit display:none below.
   * ─────────────────────────────────────────────────────────────── */
  #mainContent .toolbar input#mtoSearchInput { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  #mainContent .table-container:has(.mto-row),
  #mainContent .table-container:has(.mto-row) .table-scroll,
  #mainContent .table-container:has(.mto-row) table { overflow: visible !important; }
  #mainContent .table-container:has(.mto-row) .table-scroll { max-height: none !important; }
  #mainContent .table-container:has(.mto-row) table { min-width: 0 !important; width: 100% !important; }
  #mainContent .table-container:has(.mto-row) thead { display: none !important; }
  #mainContent .table-container:has(.mto-row) table,
  #mainContent .table-container:has(.mto-row) tbody { display: block !important; }
  /* Other rows (empty-state, truncation footer, expandable drill-down) */
  #mainContent .table-container:has(.mto-row) tbody tr:not(.mto-row) { display: block !important; }
  #mainContent .table-container:has(.mto-row) tbody tr:not(.mto-row) > td {
    display: block !important;
    width: 100% !important;
    padding: 16px 8px !important;
    text-align: center !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.expandable-detail-row > td {
    padding: 0 !important;
    text-align: left !important;
  }

  /* The row: 5-col × 2-line grid — compact, one unit per row. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1.1fr) minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    background: var(--surface-1, var(--surface)) !important;
    border: 1px solid var(--border) !important;
    border-left-width: 4px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    padding: 8px 24px 8px 10px !important;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    overflow: hidden;
  }
  /* More-info chevron — the whole row is tappable and opens the detail. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row::after {
    content: '\203A';
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--text-dim);
  }
  /* Stage-colored left border — instant visual scanning. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row { border-left-color: var(--border) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-awaiting)            { border-left-color: var(--red) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-po_placed)           { border-left-color: var(--orange) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-production_complete) { border-left-color: var(--purple) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-shipped_from_vendor) { border-left-color: var(--yellow) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-at_warehouse)        { border-left-color: var(--blue) !important; }
  /* 'delivered' = manual "Closed" tag (Suly 2026-06-23) */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-delivered)           { border-left-color: var(--text-muted) !important; }
  /* legacy stage value — straggler rows render like at_warehouse */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row:has(.mto-s-ready_to_ship)       { border-left-color: var(--blue) !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row.mto-row-selected {
    background: rgba(200,169,126,0.08) !important;
    box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(0,0,0,0.22);
  }
  /* Hide columns that don't fit on a phone card. */
  #mainContent .table-container:has(.mto-row) .mb-hide-mobile,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mb-hide-mobile { display: none !important; }

  /* Every visible td in a card: block, no labels by default, tight spacing.
     background:transparent kills the desktop even-row td striping, which
     reads as random gray boxes inside the compact mobile rows. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td::before { display: none !important; }

  /*
   * Compact two-line layout (2026-06-10):
   *   line 1: [☐] [#order] [product title… (truncates)] [status pill]
   *   line 2:      [SKU]   [customer (truncates)]   [supplier, right]
   * The checkbox and status pill span both lines, vertically centered.
   * Age / Qty / Ship To / Payment / Notes cells are hidden — they live
   * in the row-tap expandable detail.
   */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-age,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-qty,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-shipto,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-payment,
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-notes { display: none !important; }

  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-cb {
    grid-row: 1 / 3; grid-column: 1;
    align-self: center;
    display: flex !important;
    align-items: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-cb input {
    width: 18px; height: 18px;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-order {
    grid-row: 1; grid-column: 2;
    display: flex !important;
    align-items: center;
    gap: 2px;
    white-space: nowrap !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-order .mto-order-num-link {
    font-size: 13px !important;
    font-weight: 700;
    color: var(--accent);
    padding: 4px 2px;
    display: inline-flex;
    align-items: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-order .order-link-icon {
    font-size: 12px;
    padding: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-product {
    grid-row: 1; grid-column: 3 / 5;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-status {
    grid-row: 1 / 3; grid-column: 5;
    justify-self: end;
    align-self: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-status .pill {
    font-size: 10px;
    padding: 4px 9px;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-status .mto-tracking-btn { display: none !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-sku {
    grid-row: 2; grid-column: 2;
    font-size: 11px !important;
    color: var(--text-dim);
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-sku .sku-link {
    max-width: none !important;
    font-size: 11px !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-customer {
    grid-row: 2; grid-column: 3;
    font-size: 11px !important;
    color: var(--text-muted);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-customer .mto-customer-intel-arrow { display: none !important; }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-supplier {
    grid-row: 2; grid-column: 4;
    justify-self: end;
    font-size: 11px !important;
    color: var(--text-dim);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
  }

  /* Tabular numbers so order #s and SKUs don't jitter as values change. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row .mono {
    font-variant-numeric: tabular-nums;
  }

  /* MTO dropdown — on mobile, anchor wider and let it choose its position
     automatically (capped to viewport width minus 16px margin). */
  .mto-dropdown {
    min-width: 200px !important;
    max-width: calc(100vw - 16px) !important;
    font-size: 14px;
  }
  .mto-dropdown-item {
    padding: 12px 16px !important;
    font-size: 14px !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }

  /* Product title — bold-ish, room to wrap to 2 lines. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-product {
    font-weight: 600;
    color: var(--text);
    font-size: 13px !important;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
  }
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-product .prod-variant-name {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
  }

  /* SKU — small mono inside the meta row. */
  #mainContent .table-container:has(.mto-row) tbody tr.mto-row > td.mto-td-sku .sku-link {
    max-width: 100% !important;
    font-size: 11px;
    color: var(--text-dim);
  }

  /* ─── MTO detail/summary panel: slide up from bottom on mobile. ─── */
  .mto-detail-panel {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 88vh;
    max-height: 88vh;
    border-left: none !important;
    border-top: 1px solid var(--border);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.55) !important;
    animation: mto-panel-slide-up 0.22s ease-out !important;
  }
  @keyframes mto-panel-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .mto-detail-header {
    padding: 14px 16px !important;
    position: sticky; top: 0; z-index: 2;
  }
  .mto-detail-header::before {
    content: '';
    position: absolute; top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 2px;
  }
  .mto-detail-title { font-size: 16px !important; }
  .mto-detail-close { font-size: 26px !important; padding: 4px 10px !important; min-height: 44px; }
  .mto-detail-body { padding: 14px 16px 32px !important; }
  .mto-summary-item { padding: 12px !important; }
  .mto-summary-item-title { font-size: 14px !important; }

  /* 5. Inline 2-col grids in Labels modal forms + shipping-claims modal:
   *    collapse to 1 col so labels stay above their inputs. Already covered
   *    by lbl-grid-2/3 rules above for class-based grids; these are the
   *    inline-style escapees. */
  #mainContent .lbl-acc-body[style*="grid-template-columns:1fr 1fr"],
  #mainContent .lbl-review-expand td > div[style*="grid-template-columns"],
  #mainContent .modal div[style*="grid-template-columns:1fr 1fr"],
  #mainContent .modal div[style*="grid-template-columns: 1fr 1fr"],
  #mainContent .modal div[style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Shipping-claims detail: 1fr 320px sidebar layout collapses to stacked */
  #mainContent div[style*="grid-template-columns:1fr 320px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 6. PO hub po-tab cards — chunky on mobile. Tighter padding/min-height. */
  #mainContent .po-tab {
    min-height: 64px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    gap: 4px !important;
  }
  #mainContent .po-tab-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }
  #mainContent .po-tab-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
  #mainContent .po-panel-head h3 {
    font-size: 18px !important;
  }
  #mainContent .po-panel {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  #mainContent .po-toolbar {
    padding: 10px !important;
    border-radius: 12px !important;
  }
  /* Force po-toolbar to single-column flex on phones (the existing 980px
   * rule does this, but make sure search/select inside fill the row). */
  #mainContent .po-toolbar .search-input,
  #mainContent .po-toolbar select.search-input,
  #mainContent .po-toolbar .filter-select {
    width: 100% !important;
    min-height: 40px !important;
    flex: 1 1 100%;
  }

  /* 7. Smart Reorder header action cluster — let buttons wrap and equalize. */
  #mainContent .page-header > div[style*="display:flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
    width: 100%;
    margin-top: 8px;
  }
  #mainContent .page-header > div[style*="display:flex"][style*="gap:8px"] > button {
    flex: 1 1 calc(50% - 4px);
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  /* 8. Page-header on Orders views: title + subtitle + action button.
   *    The header should stack on mobile so titles aren't pushed off
   *    the screen by a wide button cluster. */
  #mainContent .page-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 9. Shipping-claims stat cards used inline text-align:center which
   *    visually conflicts with normal .stat-card left-align. Force left
   *    alignment so all cards across all Orders views read the same. */
  #mainContent #sc-stats-row .stat-card[style*="text-align:center"] {
    text-align: left !important;
  }
  #mainContent #sc-stats-row .stat-card .stat-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  /* 10. Label Anomalies side panel — already 100vw on small screens; the
   *     resolve-button row at the bottom needs a comfortable gap (the panel
   *     is fixed and bypasses .main padding). Bottom-nav is gone, so a
   *     safe-area-aware button gap is enough. */
  #mainContent .la-panel,
  body > .la-panel {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 11. Tables inside Orders views that scroll horizontally need a clear
   *     boundary so users can see they're in a horizontal scroll region. */
  #mainContent .la-table-wrap,
  #mainContent .oex-table-wrap,
  #mainContent .po-table-wrap,
  #mainContent .po-mt-table-wrap {
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Customers (Agent 2, 2026-05-06)
 * Scope: support-inbox, messages, support-analytics-hub, returns,
 *        customers (Customer Intelligence). 5 views in the Customers nav.
 *
 * Targets symmetry/parity issues at iPhone 13 mini (375px) that pass-1+2
 * didn't catch:
 *   1. .c360-root horizontal padding eating screen real estate
 *   2. 5-up KPI / segment grids leaving uneven last row at 2-col
 *   3. .c360-tabs / .si-tabs / .ci-filters wrapping unevenly — switch to
 *      horizontal-scroll strip with consistent 40px height
 *   4. .ci-filter-btn / .si-tab-btn / .c360-tab tap targets normalized to
 *      40px so they parallel the pass-1 .pick-tab/.toggle-btn band
 *   5. .ci-sidebar 40vh max-height too short once header+search+filter
 *      stack inside it — bumped to 50vh
 *   6. .sup-stats-row 7-card row → orphan-card guard so last single card
 *      spans full width (instead of sitting alone in its row)
 *   7. .hub-thread-header / .hub-compose-top mobile padding compaction
 *   8. .msg-filter-bar grid → stack search to full width
 *   9. .ret-grid-2 (undefined desktop class used by Add Issue modal) gets
 *      a 1-col fallback so the modal doesn't render as a flat row
 *  10. .si-draft-actions / .si-draft-meta wrap cleanly
 *  11. .ci-event-card padding compaction so timeline doesn't hug the dot
 *  12. .c360-page-header stacks header-actions below title cleanly
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 1. c360 root padding — 24px each side eats >12% of a 375px viewport.
   *    Drop to 12px to match the .main padding pass-1 already established. */
  #mainContent .c360-root {
    padding: 0 12px 40px !important;
  }

  /* 2. Page-header symmetry on Customer Intelligence — header-actions
   *    (refresh button) should sit on its own row right-aligned, not jam
   *    beside the title where it overlaps the subtitle. */
  #mainContent .c360-page-header {
    padding: 16px 0 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .c360-header-actions {
    justify-content: flex-end !important;
  }

  /* 3. KPI / segment grid orphan-card guards. The c360 view declares its
   *    own @media at 768px collapsing kpi-grid-5 to 2-col, which leaves
   *    a 5th card alone. Pass-1's :nth-child(odd):last-child rule already
   *    targets these — restate explicitly here to win specificity over
   *    the inline <style> block in customer-intelligence.js. */
  #mainContent .c360-seg-cards > *:nth-child(odd):last-child,
  #mainContent .kpi-grid-5 > *:nth-child(odd):last-child,
  #mainContent .kpi-grid-3 > *:nth-child(odd):last-child {
    grid-column: 1 / -1 !important;
  }

  /* Equalize segment-card heights so 2-col rows stay parallel even when
   * one card has a longer subtitle than its sibling. */
  #mainContent .c360-seg-cards {
    align-items: stretch !important;
    gap: 10px !important;
  }
  #mainContent .c360-seg-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px !important;
  }
  #mainContent .c360-seg-card-count {
    font-size: 24px !important;
  }

  /* 4. .c360-tabs — turn into horizontal-scroll strip with uniform 40px
   *    rows so 6 tabs ("Overview / Segments / Customers / Insights /
   *    Timeline / Health") don't wrap into 3 lines. Hide scrollbar. */
  #mainContent .c360-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    margin-bottom: 12px !important;
    scrollbar-width: none;
  }
  #mainContent .c360-tabs::-webkit-scrollbar { display: none; }
  #mainContent .c360-tab {
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5. .ci-filters / .si-tabs — same horizontal-scroll treatment. The
   *    Customer-Intelligence Timeline tab has 5 filter chips that wrap
   *    awkwardly at 375px. */
  #mainContent .ci-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  #mainContent .ci-filters::-webkit-scrollbar { display: none; }
  #mainContent .ci-filter-btn {
    flex-shrink: 0 !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  #mainContent .si-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    margin-bottom: 12px !important;
    scrollbar-width: none;
  }
  #mainContent .si-tabs::-webkit-scrollbar { display: none; }
  #mainContent .si-tab-btn {
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 6. .ci-sidebar — pass-1 caps it at 40vh which gives ~210px on a
   *    13-mini viewport (812px × .40 = 325px before chrome). Once the
   *    20px sidebar-header padding + 56px search-input row + tab/filter
   *    strip eat their share, the customer list shows ~3 rows. Bump to
   *    50vh so 5+ rows are visible without a separate scroll gesture. */
  #mainContent .ci-sidebar {
    max-height: 50vh !important;
  }
  #mainContent .ci-sidebar-header {
    padding: 12px !important;
  }
  #mainContent .ci-search-input {
    height: 40px !important;
    box-sizing: border-box;
  }
  #mainContent .ci-main {
    padding: 12px !important;
  }
  #mainContent .ci-profile-card {
    padding: 14px !important;
  }
  #mainContent .ci-profile-metrics {
    gap: 12px !important;
    justify-content: space-around;
  }
  #mainContent .ci-event {
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  #mainContent .ci-event-card {
    padding: 10px 12px !important;
  }

  /* 7. .sup-stats-row — Customer Issues stats pane has 7 cards. With
   *    flex 1 1 calc(50% - 8px) this lays out 3 rows of 2 + 1 orphan.
   *    Span the orphan full width so the band reads as a clean grid. */
  #mainContent .sup-stats-row {
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .sup-stats-row > .sup-stat-card:nth-child(odd):last-child {
    flex-basis: 100% !important;
    flex-grow: 1 !important;
  }
  #mainContent .sup-stat-card {
    padding: 10px 12px !important;
    min-height: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  #mainContent .sup-stat-value {
    font-size: 20px !important;
  }
  /* Worst-Product card has an inline font-size:13/22 toggle that breaks
   * card-height parity with its siblings. Force a stable 16px on mobile
   * and let the title clamp/ellipsis. */
  #mainContent .sup-stat-card .sup-stat-value[style*="font-size"] {
    font-size: 16px !important;
    line-height: 1.25 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* 8. .sup-table — no horizontal scroll wrapper anywhere in support.js.
   *    Tables (Customer Issues, Repeat Customers, Product Issues) blow
   *    past 375px viewport. Add the same overflow-x pattern modern-theme
   *    uses for [class*="-table-wrap"]. */
  #mainContent .sup-table {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #mainContent .sup-table thead,
  #mainContent .sup-table tbody {
    display: table;
    width: 100%;
    table-layout: auto;
  }

  /* 9. .ret-grid-2 — undefined desktop class used by the Add/Flag Issue
   *    modal in support.js. Without a default rule it renders flat (each
   *    .lbl-form-group becomes a stand-alone block). On mobile that's
   *    actually what we want — single column form. Lock it in. */
  #mainContent .ret-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .ret-form-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 4px;
  }

  /* 10. Customer-Hub thread + compose padding compaction. Desktop has
   *     14px 18px header padding; on a 375px screen that 18px each side
   *     is wasted. Drop to 12px so the thread title + status button
   *     don't push each other into wraps. */
  #mainContent .hub-thread-header {
    padding: 12px !important;
  }
  #mainContent .hub-thread-messages {
    padding: 12px !important;
  }
  #mainContent .hub-compose-top,
  #mainContent .hub-compose-bottom {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  #mainContent .hub-compose-top {
    flex-wrap: wrap !important;
  }
  #mainContent .hub-textarea {
    padding: 10px 12px !important;
    min-height: 80px !important;
  }
  #mainContent .hub-mode-bar {
    padding: 6px 12px !important;
  }
  #mainContent .hub-sidebar-header {
    padding: 12px !important;
  }
  /* Pass-1+2 left .hub-sidebar at 40vh — same problem as .ci-sidebar.
   * Bump to 48vh so ticket list is usable without crowding the thread. */
  #mainContent .hub-container > .hub-sidebar,
  #mainContent .hub-sidebar {
    max-height: 48vh !important;
  }

  /* 11. .msg-filter-bar — toggle group + tagged select + search input
   *     all in one row at desktop. On mobile, force the search input to
   *     its own full-width row below; keep status toggle + tagged select
   *     on the first row. */
  #mainContent .msg-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }
  #mainContent .msg-search-input {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 40px !important;
    box-sizing: border-box;
  }
  #mainContent .msg-tagged-select {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    box-sizing: border-box;
  }
  #mainContent .msg-status-toggle {
    display: flex !important;
    flex: 1 1 100%;
    gap: 6px;
  }
  #mainContent .msg-status-toggle > .toggle-btn {
    flex: 1 1 0 !important;
    min-height: 40px !important;
  }
  /* Channel bar — tabs row, force horizontal scroll if many channels. */
  #mainContent .msg-channel-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    scrollbar-width: none;
    margin-bottom: 12px !important;
  }
  #mainContent .msg-channel-bar::-webkit-scrollbar { display: none; }
  #mainContent .msg-channel-tab {
    flex-shrink: 0 !important;
    min-height: 36px;
  }
  /* Page-header on Messages — lang select + new thread + refresh squish
   * on 375px. Wrap header actions to their own row. */
  #mainContent .msg-page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #mainContent .msg-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center;
  }
  #mainContent .msg-header-actions > .btn,
  #mainContent .msg-header-actions > .refresh-btn {
    min-height: 40px !important;
  }
  #mainContent .msg-thread-card {
    padding: 12px !important;
  }

  /* 12. Support-Insights cards + drafts — equal heights and stacked
   *     action buttons so the draft-action row doesn't squish. */
  #mainContent .si-wrap {
    padding: 12px !important;
  }
  #mainContent .si-cards {
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .si-card {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    min-height: 78px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  #mainContent .si-cards > .si-card:nth-child(odd):last-child {
    flex-basis: 100% !important;
  }
  #mainContent .si-card-value {
    font-size: 22px !important;
  }
  #mainContent .si-draft-card {
    padding: 12px !important;
  }
  #mainContent .si-draft-meta {
    gap: 6px !important;
  }
  #mainContent .si-draft-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .si-btn {
    min-height: 40px !important;
    flex: 1 1 auto;
  }
  #mainContent .si-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mainContent .si-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .si-refresh-btn {
    min-height: 40px !important;
  }

  /* 13. Returns / RMA modal padding — .hub-return-modal already gets
   *     full-width via modern-theme; equalize internal padding so the
   *     order-search input and item rows sit on a clean 12px rhythm. */
  #mainContent .hub-return-modal {
    padding: 0 !important;
  }
  #mainContent .hub-return-modal-hdr {
    padding: 12px !important;
  }
  #mainContent .hub-ret-input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }
  #mainContent .hub-ret-btn,
  #mainContent .hub-ret-btn-ghost {
    min-height: 40px !important;
    padding: 0 14px !important;
  }
  #mainContent .hub-ret-item-row {
    padding: 10px 12px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Products (Agent 3) (2026-05-06):
 * Cole's complaint: "many spots aren't even, symmetrical, or really
 * difficult to view if you scroll all over the page, we need to have it
 * way more compact and everything even, symmetrical and parallel".
 *
 * Scope: the 6 views under the Products sidebar section.
 *   • catalog-hub (Catalog + Collections subtabs)
 *   • product-intelligence (jarvis-readiness, jhs/jpa, signal-gauge, pd-grid)
 *   • storefront-hub (Config + Health subtabs)
 *   • sentinel (Storefront Anomalies + SKU Duplicates subtabs)
 *   • new-products / Listing Development (onb-*)
 *   • suppliers (sup-*)
 *
 * Pass 1 + 2 already covered: orphan-card guard, bottom-nav clearance,
 * pick-tab/toggle equality at 40px, compact toolbars, softer active tab,
 * stat-card grid normalization, sup-stat fitting, prod-logistics auto-card.
 * Pass 3 fills the gaps inside the Products section: sa-* (anomalies),
 * sd-* (duplicates), onb-* (onboarding), jarvis-readiness donut + legend,
 * jhs/jpa, sup-drawer drawer width on narrow screens.
 * Every rule is mobile-only (≤768px) and scoped under #mainContent.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1. Storefront Anomalies — KPI grid is 5 columns on desktop and overflows
   *    on mobile. Force a clean 2-column rhythm so the 5 cards land as
   *    2/2/1, with the orphan-card guard from pass 1 stretching the last. */
  #mainContent .sa-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .sa-kpi-grid > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  #mainContent .sa-kpi-card {
    padding: 10px 12px !important;
    min-height: 70px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }
  #mainContent .sa-kpi-value {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
  #mainContent .sa-kpi-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* 2. Storefront Anomalies — outer wrapper has inline padding:20px and
   *    max-width:1400px. The 20px adds onto #mainContent's own gutter and
   *    squeezes content. Strip the redundant horizontal padding on mobile. */
  #mainContent [class*="sa-"]:not(.sa-panel):not(.sa-panel-backdrop) {
    box-sizing: border-box;
  }
  #mainContent .sa-kpi-grid + .sa-filter-bar,
  #mainContent .sa-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .sa-filter-bar select,
  #mainContent .sa-filter-bar input {
    width: 100% !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 16px !important; /* prevent iOS zoom-on-focus */
    box-sizing: border-box;
  }

  /* 3. Storefront Anomalies — 9-column table. Desktop fits; mobile needs
   *    a clean horizontal scroll with a stable min-width and a sticky
   *    SKU column so the row label stays visible. */
  #mainContent .sa-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mainContent .sa-table {
    min-width: 720px;
  }
  #mainContent .sa-table th,
  #mainContent .sa-table td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
  #mainContent .sa-table td:nth-child(2),
  #mainContent .sa-table th:nth-child(2) {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
  }

  /* 4. Storefront Anomalies — pagination row gets a clean even split so
   *    the Prev/Next buttons sit at equal heights with the count text. */
  #mainContent .sa-pagination {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  #mainContent .sa-pagination button {
    min-height: 40px !important;
    padding: 0 14px !important;
    flex: 0 0 auto;
  }
  #mainContent .sa-pagination span {
    flex: 1 1 100%;
    text-align: center;
    order: -1;
  }

  /* 5. SKU Duplicates — `.sd-cards` is undefined as a grid in baseline CSS,
   *    so the 4 KPI cards stack as a tall block column. Lay them out as a
   *    2-col grid that matches the rhythm used by every other Products view. */
  #mainContent .sd-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .sd-cards > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  #mainContent .sd-card {
    padding: 10px 12px !important;
    min-height: 70px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }
  #mainContent .sd-card-value {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  /* 6. SKU Duplicates — header row stacks; action buttons sit on a clean
   *    second row at full width instead of squeezing the title. */
  #mainContent .sd-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  #mainContent .sd-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #mainContent .sd-header-actions > * {
    flex: 1 1 calc(50% - 3px) !important;
    min-height: 40px !important;
  }

  /* 7. SKU Duplicates — filter chip row scrolls horizontally instead of
   *    wrapping with mismatched chip heights. */
  #mainContent .sd-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 4px;
    margin-bottom: 10px !important;
  }
  #mainContent .sd-filters > * {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    white-space: nowrap;
  }

  /* 8. Listing Development — `.onb-stats-row` collapses to a SINGLE column
   *    on mobile in product-onboarding's own inline rule. Five stacked
   *    stat cards is a tall scroll. Override to the 2-column rhythm used
   *    everywhere else. */
  #mainContent .onb-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .onb-stats-row > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  #mainContent .onb-stat-card {
    padding: 10px 12px !important;
    min-height: 74px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }
  #mainContent .onb-stat-number {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
  #mainContent .onb-stat-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  /* 9. Listing Development — tab-bar chips share a uniform 40px height to
   *    match the dashboard-wide pick-tab rhythm from pass 1. */
  #mainContent .onb-tab-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .onb-tab {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    flex: 1 1 calc(50% - 3px) !important;
    box-sizing: border-box !important;
  }

  /* 10. Listing Development — bulk-action bar is a sticky row that easily
   *     overlaps the bottom-nav. Make it stack vertically and respect the
   *     pass-1 96px content padding. */
  #mainContent .onb-bulk-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .onb-bulk-bar > * {
    width: 100% !important;
  }

  /* 11. Listing Development — main onb-table needs a clean horizontal
   *     scroll with a stable min-width so columns don't re-flow into
   *     unreadable narrow strips. */
  #mainContent .onb-table {
    min-width: 720px;
  }
  #mainContent .onb-table th,
  #mainContent .onb-table td {
    padding: 8px 10px !important;
  }

  /* 12. Product Intelligence — `.jhs-grades` (A/B/C/D/F count chips) wraps
   *     unevenly. Force equal-height row of pills. */
  #mainContent .jhs-grades {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  #mainContent .jhs-grade-count {
    min-height: 28px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
  }
  #mainContent .jarvis-health-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent .jhs-stat {
    min-height: 64px;
    padding: 8px 10px;
    box-sizing: border-box;
    text-align: center;
  }
  #mainContent .jhs-val {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }
  #mainContent .jhs-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  /* 13. Product Intelligence — Jarvis readiness donut + legend stack
   *     cleanly: donut on top, legend below as a 2-col grid. */
  #mainContent .jarvis-readiness-donut-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #mainContent .jarvis-readiness-donut-chart {
    align-self: center;
  }
  #mainContent .jarvis-readiness-legend {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  #mainContent .jarvis-readiness-legend-item {
    min-height: 32px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box;
  }

  /* 14. Product Intelligence — Jarvis product analysis (`.jpa-*`) uses
   *     wrapped flex rows. Tighten to a clean column on mobile. */
  #mainContent .jarvis-product-analysis,
  #mainContent .jpa-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent .jpa-signals {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  #mainContent .jpa-flags,
  #mainContent .jpa-recs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mainContent .jpa-flag {
    min-height: 24px !important;
    padding: 2px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 15. Product Intelligence — `.signal-gauge` (the labeled progress bar
   *     row) must occupy the full row width on mobile so the bar reads. */
  #mainContent .signal-gauge {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "bar" "detail" !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  #mainContent .signal-gauge .sg-label { grid-area: label; }
  #mainContent .signal-gauge .sg-bar { grid-area: bar; width: 100% !important; }
  #mainContent .signal-gauge .sg-detail { grid-area: detail; font-size: 11px; }

  /* 16. Suppliers — drawer was 420px / 90vw. On a 375px viewport that's
   *     ~338px which leaves a sliver of background. Push to a true full-
   *     width drawer below 480px so the form fields breathe. */
  #mainContent .sup-drawer-content,
  body > .sup-drawer-panel .sup-drawer-content {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #mainContent .sup-drawer-header,
  #mainContent .sup-drawer-body,
  #mainContent .sup-drawer-footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 17. Subtab pick-tab-groups for the three Products hubs (catalog-hub,
   *     storefront-hub, sentinel) — each is a 2-tab row, ensure each tab
   *     reaches the same 40px height and splits 50/50 cleanly. */
  #mainContent .catalog-hub-subtabs,
  #mainContent .storefront-hub-subtabs,
  #mainContent .sentinel-subtabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .catalog-hub-subtabs .pick-tab,
  #mainContent .storefront-hub-subtabs .pick-tab,
  #mainContent .sentinel-subtabs .pick-tab {
    width: 100% !important;
  }

  /* 18. Storefront Config — sfc-arch-card content tightens; pass 1 already
   *     stacks the grid to 1-col, but the inner padding was 20px which is
   *     too generous on a 375px viewport. */
  #mainContent .sfc-arch-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  #mainContent .sfc-arch-num {
    font-size: 13px !important;
  }
  #mainContent .sfc-arch-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  #mainContent .sfc-arch-detail {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Warehouse (Agent 4)  (Cole 2026-05-06)
 *
 * Scope: the 10 views under the Warehouse nav section.
 * Cole's brief: "many spots aren't even, symmetrical, or really difficult
 * to view if you scroll all over the page, we need to have it way more
 * compact and everything even, symmetrical and parallel".
 *
 * What this pass fixes (warehouse-only — desktop is untouched):
 *   1. Warehouse Overview — 7-card stat strip evens to a 2-col grid; the
 *      orphan card spans full-width (handled by pass 1 orphan rule, this
 *      pass forces grid mode so the rule applies).
 *   2. Warehouse Overview — top-shipped SKUs 5-col `<table>` inside the
 *      incoming-volume panel converts to mobile card rows via `td::before`.
 *   3. Warehouse Overview — top-5-rank chart table is too dense at 375px;
 *      shrink fonts + padding so all 5 rank columns + the leading Month
 *      column fit without horizontal scroll.
 *   4. Warehouse Overview — incoming volume eta-window rows use fixed
 *      72px+72px columns that overflow at 375px. Switch to flex with
 *      label/value baseline aligned, container/lines text wraps below.
 *   5. Containers (`ct-table`) — 10-col table with date inputs auto-cards
 *      via the existing `data-label` attrs. Edit inputs go full-width.
 *   6. Restock Tasks (`data-table`) — 7 col table cards via data-label
 *      injection. Action buttons stack to full-width touch targets.
 *   7. Cycle Count (`cc-count-table` / `cc-review-table`) — 4–5 col tables
 *      card-stack on mobile; reason `<select>` goes full-width.
 *   8. Inventory History — toolbar input min-widths shrink to fit 375px;
 *      tab bar height aligns with the 40px tab standard from pass 1.
 *   9. Openbox Ops — panel-head padding aligned with the 12px pass-1
 *      rhythm; webhook 4-col grid stays at 2-col on phones.
 *  10. Container detail / generic warehouse content — empty-state padding
 *      cut from 32px+ to a calmer 24px so the empty card isn't taller
 *      than the content card next to it.
 *  11. Containers Jarvis intel `details > summary` — the Refresh button
 *      no longer shoves the title onto a second wrapped line.
 *  12. Picklist summary table (variance card) — the 5-col `<table>` inside
 *      the yellow callout overflows at 375; shrink padding + font so it
 *      stays readable without horizontal scroll.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 1. Warehouse Overview — force the 7-card current-state strip into a
   *    deterministic 2-col grid. .stats-row in dashboard.css is flex-based
   *    on desktop, so we explicitly grid-ify it here so the pass-1 orphan
   *    rule (.stats-row > *:nth-child(odd):last-child) actually fires.
   *    All seven cards now share the same width and the 7th spans full. */
  #mainContent .stats-row,
  #mainContent .stats-row.stats-row-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #mainContent .stats-row > .stat-card {
    min-width: 0 !important;
    padding: 10px 12px !important;
  }
  #mainContent .stats-row .stat-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
  #mainContent .stats-row .stat-label {
    font-size: 10.5px !important;
  }
  #mainContent .stats-row .stat-detail {
    font-size: 10.5px !important;
    color: var(--text-muted) !important;
  }

  /* 1b. Inventory Overview header — 6 cards in a tight 3×2 grid so the
   *    whole summary fits above the fold on a 390px phone. Overrides the
   *    480px 1-col fallback in ux-polish.css and the 768px 2-col rule
   *    above. Tighter padding + smaller value font keep each card short. */
  #mainContent .stats-row.stats-row-inv-tight {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .stats-row.stats-row-inv-tight > .stat-card {
    padding: 8px 8px !important;
    min-height: 0 !important;
    border-radius: 6px !important;
  }
  #mainContent .stats-row.stats-row-inv-tight .stat-label {
    font-size: 9px !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.4px !important;
  }
  #mainContent .stats-row.stats-row-inv-tight .stat-value {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }
  #mainContent .stats-row.stats-row-inv-tight .stat-detail {
    font-size: 9.5px !important;
    margin-top: 2px !important;
  }
  /* Cancel the odd-orphan full-span rule (6 cards is divisible by 3). */
  #mainContent .stats-row.stats-row-inv-tight > *:nth-child(odd):last-child {
    grid-column: auto !important;
  }

  /* 2. Warehouse Overview — wh-incoming-volume-container's inline
   *    `<table>` becomes a card-row layout. Header hidden, each <td>
   *    gets a label prefix via the column's text content. */
  #mainContent #wh-incoming-volume-container .table-scroll {
    max-height: none !important;
    overflow: visible !important;
  }
  #mainContent #wh-incoming-volume-container table thead {
    display: none;
  }
  #mainContent #wh-incoming-volume-container table,
  #mainContent #wh-incoming-volume-container table tbody,
  #mainContent #wh-incoming-volume-container table tr,
  #mainContent #wh-incoming-volume-container table td {
    display: block !important;
    width: auto !important;
  }
  #mainContent #wh-incoming-volume-container table tr {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--surface);
  }
  #mainContent #wh-incoming-volume-container table td {
    padding: 2px 0 !important;
    text-align: left !important;
    max-width: none !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    font-size: 11px !important;
  }
  /* First cell (SKU) styled as the row title */
  #mainContent #wh-incoming-volume-container table td:nth-child(1) {
    font-weight: 600;
    font-size: 12px !important;
    margin-bottom: 2px;
  }
  #mainContent #wh-incoming-volume-container table td:nth-child(n+2)::before {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
  }
  #mainContent #wh-incoming-volume-container table td:nth-child(2)::before { content: "Title:"; }
  #mainContent #wh-incoming-volume-container table td:nth-child(3)::before { content: "Cuft:"; }
  #mainContent #wh-incoming-volume-container table td:nth-child(4)::before { content: "Units:"; }
  #mainContent #wh-incoming-volume-container table td:nth-child(5)::before { content: "ETA:"; }

  /* 3. Warehouse Overview — top-5-rank chart density at 375px.
   *    Wrapping div has `overflow-x:auto`; we'd rather everything fit. */
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table {
    font-size: 10.5px !important;
  }
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table th,
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table td {
    padding: 4px 4px !important;
    min-width: 0 !important;
  }
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table td > div:first-child {
    font-size: 10.5px !important;
  }
  #mainContent .stat-card > div[style*="overflow-x:auto"] > table td > div:last-child {
    font-size: 9.5px !important;
  }

  /* 4. Warehouse Overview — incoming-volume eta-window rows. The inline
   *    label+value uses fixed 72px columns; switch to a flex baseline
   *    layout that fits any phone width without overflow. */
  #mainContent #wh-incoming-volume-container > .stat-card > div[style*="display:flex"][style*="gap:20px"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent #wh-incoming-volume-container > .stat-card > div[style*="display:flex"][style*="gap:20px"] > div[style*="min-width:240px"] {
    min-width: 0 !important;
  }
  #mainContent #wh-incoming-volume-container div[style*="width:72px"] {
    width: auto !important;
    min-width: 56px !important;
    flex-shrink: 0 !important;
  }

  /* 5. Container Tracker — auto-card the 10-col ct-table using its
   *    existing data-label attrs. Edit inputs/selects go full-width. */
  #mainContent .ct-fullwidth .table-scroll { overflow: visible !important; }
  #mainContent .ct-table { min-width: 0 !important; width: 100% !important; }
  #mainContent .ct-table thead { display: none !important; }
  #mainContent .ct-table,
  #mainContent .ct-table tbody,
  #mainContent .ct-table tr,
  #mainContent .ct-table td {
    display: block !important;
    width: auto !important;
  }
  #mainContent .ct-table tr.con-row {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--surface) !important;
  }
  #mainContent .ct-table td {
    padding: 4px 0 !important;
    text-align: left !important;
    border: none !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-height: 28px !important;
  }
  #mainContent .ct-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 88px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }
  #mainContent .ct-table td input.ct-edit,
  #mainContent .ct-table td select.ct-edit {
    flex: 1 1 auto !important;
    min-height: 36px !important;
    width: auto !important;
    box-sizing: border-box;
  }
  #mainContent .ct-table td button {
    flex: 1 1 auto;
    min-height: 36px;
  }
  /* The first cell (Container code) reads as the row title — bold + bigger */
  #mainContent .ct-table td[data-label="Container"] {
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
  }
  #mainContent .ct-table td[data-label="Container"] .con-code-link {
    font-size: 14px;
    font-weight: 700;
  }

  /* Containers Jarvis intel <details> — title + Refresh button into stack
   *    so the title isn't squeezed onto a second line. */
  #mainContent details.jarvis-intel-details > summary.jarvis-container-intel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent details.jarvis-intel-details > summary.jarvis-container-intel-header .btn {
    align-self: flex-start;
  }

  /* 6. Restock Tasks — auto-card the data-table. The render emits a 7-col
   *    table without data-label attrs, so we use nth-child mapping. */
  #mainContent table.data-table[aria-label="Pending restock tasks"] thead {
    display: none !important;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"],
  #mainContent table.data-table[aria-label="Pending restock tasks"] tbody,
  #mainContent table.data-table[aria-label="Pending restock tasks"] tr,
  #mainContent table.data-table[aria-label="Pending restock tasks"] td {
    display: block !important;
    width: auto !important;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] tr {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--surface) !important;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td {
    padding: 4px 0 !important;
    text-align: left !important;
    border: none !important;
    font-size: 12px !important;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td::before {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(1)::before { content: "Created:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(2)::before { content: "Order:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(3)::before { content: "SKU:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(4)::before { content: "Qty:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(5)::before { content: "Warehouse:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(6)::before { content: "Note:"; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(7) {
    margin-top: 8px;
    padding-top: 8px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
  }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(7)::before { content: ""; display: none; }
  #mainContent table.data-table[aria-label="Pending restock tasks"] td:nth-child(7) .action-btn {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
  }

  /* 7. Cycle Count — card-stack the count + review tables. */
  #mainContent .cc-count-table thead,
  #mainContent .cc-review-table thead {
    display: none !important;
  }
  #mainContent .cc-count-table,
  #mainContent .cc-count-table tbody,
  #mainContent .cc-count-table tr,
  #mainContent .cc-count-table td,
  #mainContent .cc-review-table,
  #mainContent .cc-review-table tbody,
  #mainContent .cc-review-table tr,
  #mainContent .cc-review-table td {
    display: block !important;
    width: auto !important;
  }
  #mainContent .cc-count-table tr,
  #mainContent .cc-review-table tr {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--surface) !important;
  }
  #mainContent .cc-count-table td,
  #mainContent .cc-review-table td {
    padding: 4px 0 !important;
    text-align: left !important;
    border: none !important;
    font-size: 12px !important;
  }
  #mainContent .cc-count-table td::before,
  #mainContent .cc-review-table td::before {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
  }
  #mainContent .cc-count-table td:nth-child(1)::before,
  #mainContent .cc-review-table td:nth-child(1)::before { content: "SKU:"; }
  #mainContent .cc-count-table td:nth-child(1),
  #mainContent .cc-review-table td:nth-child(1) {
    font-weight: 600;
    font-size: 13px !important;
  }
  #mainContent .cc-count-table td:nth-child(2)::before,
  #mainContent .cc-review-table td:nth-child(2)::before { content: "Expected:"; }
  #mainContent .cc-count-table td:nth-child(3)::before,
  #mainContent .cc-review-table td:nth-child(3)::before { content: "Counted:"; }
  #mainContent .cc-count-table td:nth-child(4)::before,
  #mainContent .cc-review-table td:nth-child(4)::before { content: "Variance:"; }
  #mainContent .cc-review-table td:nth-child(5)::before { content: "Reason:"; }
  #mainContent .cc-review-table td:nth-child(5) select {
    width: 100% !important;
    min-height: 40px;
    box-sizing: border-box;
  }

  /* 8. Inventory History — toolbar inputs shrink to fit; tab bar aligns
   *    with the 40px standard tab height. */
  #mainContent #ihTtSku,
  #mainContent #ihTtWarehouse,
  #mainContent #ihTtAt,
  #mainContent #ihTlFrom,
  #mainContent #ihTlTo,
  #mainContent #ihTlTrigger {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    min-height: 40px !important;
    padding: 8px 10px !important;
  }
  #mainContent .u-flex-col-sm {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 6px) !important;
  }
  /* Inventory History tab bar — re-style as 40px even tabs */
  #mainContent .tab-btn,
  #mainContent .view-container > div[style*="border-bottom:1px solid var(--border)"] > .tab-btn {
    padding: 0 14px !important;
    min-height: 40px !important;
    height: 40px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* The view-container has padding:24px inline; trim on mobile */
  #mainContent .view-container[style*="padding:24px"] {
    padding: 12px !important;
  }

  /* 9. Openbox Ops — keep webhook grid at 2 cols on small phones (was set
   *    to 720px breakpoint, so 375px already gets 2 — but tighten gaps).
   *    Panel head padding aligned with pass-1 12/14 rhythm. */
  #mainContent .obx-panel-head {
    padding: 12px 14px !important;
  }
  #mainContent .obx-alerts-grid,
  #mainContent .obx-aging-grid {
    padding: 12px !important;
    gap: 8px !important;
  }
  #mainContent .obx-webhook-grid {
    gap: 6px !important;
    padding: 8px !important;
  }
  #mainContent .obx-kpi {
    padding: 10px 12px 12px !important;
  }
  #mainContent .obx-kpi-value {
    font-size: 20px !important;
  }

  /* 10. Empty-state padding — cap at 24px so empty cards don't tower over
   *     filled ones in the same scroll. Targets the warehouse views that
   *     emit `style="padding:32px*"` or `padding:48px` inline. */
  #mainContent .empty-state[style*="padding:48px"],
  #mainContent .empty-state[style*="padding: 48px"],
  #mainContent .empty-state[style*="padding:32px"],
  #mainContent .empty-state[style*="padding: 32px"] {
    padding: 24px 16px !important;
  }

  /* 11. Picklist variance summary mini-table inside the yellow callout —
   *     5-col table with inline 6px/8px padding overflows at 375. Tighten
   *     padding so it fits without forcing a horizontal scroll. */
  #mainContent div[style*="background:#fff8e1"] table {
    font-size: 11px !important;
    width: 100% !important;
  }
  #mainContent div[style*="background:#fff8e1"] table th,
  #mainContent div[style*="background:#fff8e1"] table td {
    padding: 4px 4px !important;
    word-break: break-word;
  }
  #mainContent div[style*="background:#fff8e1"] {
    padding: 10px 12px !important;
  }

  /* 12. Net flow chart caption row alignment — the legend below the SVG
   *     centers two pills with 18px gap; on 375 they collide with the
   *     14px page padding. Drop the gap to 12px so they don't bleed. */
  #mainContent .stat-card > div[style*="width:100%"] > div[style*="justify-content:center"] {
    gap: 12px !important;
    flex-wrap: wrap;
  }

  /* 13. Generic stat-card inline `padding:14px 16px` cards across overview
   *     line up to a uniform 12px 14px so the warehouse overview stack
   *     reads as one rhythmic column — matches pass-1 12px discipline. */
  #mainContent .stat-card[style*="padding:14px 16px"],
  #mainContent .stat-card[style*="padding: 14px 16px"] {
    padding: 12px 14px !important;
  }

  /* 14. Pick lists wh-kpi-row — the inline scoped `.wh-kpi-card` already
   *     has its own ≤640 rule (`flex: 1 1 calc(50% - 6px)`) but at 375
   *     with 4 cards we want the same calc applied at ≤768 so nothing
   *     spills onto a third lonely row when warehouse staff pull up the
   *     dashboard on a tablet just over 640. */
  #mainContent .wh-kpi-row {
    gap: 8px !important;
  }
  #mainContent .wh-kpi-card {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 4px) !important;
    padding: 10px 12px !important;
  }
  #mainContent .wh-kpi-value {
    font-size: 18px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — Marketing+Finance (Agent 5, 2026-05-06)
 *
 * Targets the Marketing, Finance, and Analytics sections only. Cole's
 * complaint: "many spots aren't even, symmetrical, or have really difficult
 * to view if you scroll all over the page, we need to have it way more
 * compact and everything even, symmetrical and parallel."
 *
 * Fixes systemic issues across these views:
 *   1. Page padding wrappers that eat 48px on a 375px viewport
 *      (.cost-chain wrapper, finance subview wraps, pricing-suggestions).
 *   2. Inline-style fixed-width inputs/selects in filter rows that overflow
 *      horizontally instead of filling the row evenly.
 *   3. Wide horizontal-scroll tables with no min-width — columns crush, rows
 *      look uneven.
 *   4. Inline `max-width:NNNpx` on `<td>` cells (campaign-name truncation)
 *      that forced page-wide horizontal scroll on mobile.
 *   5. Page-header export-button rows that cramp under the title at 375px.
 *   6. Header strip / freshness chip rows with gaps too large for mobile.
 *
 * Every selector is scoped to #mainContent + a section-specific class so
 * desktop is untouched. Pass-3 does NOT modify pass-1/pass-2 rules.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ─── 1. Cost-Chain — full-width wrapper, even filter row ─────────────── */
  /* The view's outer div hardcodes padding:20px 24px;max-width:1400px which
   * cost ~48px of viewport on a 375px screen. Reset to the standard
   * #mainContent padding rhythm (12px sides). */
  #mainContent > div[style*="padding:20px 24px"][style*="max-width:1400px"],
  #mainContent > div[style*="padding: 20px 24px"][style*="max-width: 1400px"] {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* The cost-chain header bar: title block + 3-button cluster on the right.
   * On mobile the right-side button group collides with the title — wrap and
   * make buttons full-row width. */
  #mainContent div[style*="display:flex"][style*="justify-content:space-between"] > div[style*="display:flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
  }

  /* Cost-chain filter row — 5 selects + search input + 6 buttons all crammed
   * into one flex row with `width:240px` / `max-width:220px` inline. Force
   * each control to equal-width so the row reads as a clean grid. */
  #mainContent div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"] > input,
  #mainContent div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"] > select,
  #mainContent div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"] > button {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
  }
  /* The search input wants its own row so the placeholder is fully readable. */
  #mainContent div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"] > input#cc-search {
    flex: 1 1 100% !important;
  }

  /* Cost-chain wide table — give the table a minimum width so the 19 columns
   * don't compress to unreadable widths inside .view-panel { overflow-x:auto }.
   * The min-width keeps each column at its design width and forces a clean
   * horizontal scroll inside the panel rather than the whole page scrolling. */
  #mainContent .view-panel[style*="overflow-x:auto"] > table.view-table[style*="table-layout:fixed"] {
    min-width: 1500px !important;
  }

  /* Cost-chain pagination row — keeps the 3 controls evenly spaced. */
  #mainContent div[style*="justify-content:center"][style*="margin-top:8px"] > button {
    min-height: 36px !important;
    padding: 0 14px !important;
  }

  /* ─── 2. Marketing Overview — header right buttons stack cleanly ─────── */
  /* `.mo-header-right` (Summarize + Export CSV) was sitting flex-end of the
   * page-header. On 375px the buttons squeeze under the page-subtitle. Let
   * the page-header wrap and give the right cluster its own row. */
  #mainContent .mo-header-right {
    flex-wrap: wrap !important;
    width: 100%;
    justify-content: flex-start !important;
    margin-top: 4px !important;
  }
  #mainContent .mo-header-right > button {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }

  /* Marketing freshness chips — already wrap, but tighten the gap and chip
   * padding so a 4-chip row doesn't take 3 lines. */
  #mainContent .mo-freshness-strip {
    gap: 6px !important;
    margin: 4px 0 10px 0 !important;
  }
  #mainContent .mo-freshness-chip {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  /* CAPI health strip — was `gap:16px` which forces wrap onto 4-5 lines.
   * Compact gap + smaller font so it reads as a tight metadata band. */
  #mainContent .mo-capi-health {
    gap: 8px 12px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }

  /* Section divider above Paid Channels table — keep the spacing consistent
   * with the 12px rhythm, override the inline `margin-top:16px`. */
  #mainContent .table-container[style*="margin-top:16px"],
  #mainContent .mo-section-header[style*="margin-top:16px"] {
    margin-top: 12px !important;
  }

  /* Marketing second stats-row had inline `margin-top:8px` which fights with
   * the existing kpi-grid `margin-bottom:12px`. Normalize to 0 — the grid
   * gap above already separates the channel-ROAS strip cleanly. */
  #mainContent .stats-row[style*="margin-top:8px"] {
    margin-top: 0 !important;
  }

  /* Marketing PAID CHANNELS table footer note — long URL/copy was extending
   * past the table's box on narrow screens. Force wrap. */
  #mainContent .table-container > div[style*="border-top:1px solid"] {
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  /* ─── 3. Paid Channels view — kill desktop-width inline TD widths ─────── */
  /* The campaign-name TD has inline `max-width:320px;overflow:hidden;
   * text-overflow:ellipsis;white-space:nowrap` for desktop. Inside an
   * already-overflow-x:auto .table-container that is fine, but on mobile
   * we want the full table to participate in horizontal scroll without one
   * column hard-pinning to 320px. Let the column be its natural narrow
   * width and rely on the parent's overflow-x to scroll. */
  #mainContent .table-container td[style*="max-width:320px"],
  #mainContent .table-container td[style*="max-width: 320px"],
  #mainContent .table-container td[style*="max-width:280px"],
  #mainContent .table-container td[style*="max-width: 280px"] {
    max-width: 220px !important;
  }

  /* Paid Channels filter row — was `display:flex;gap:8px` with inline
   * `margin:12px 0`. Wrap and equalize button heights with pass-1 toolbar
   * height. */
  #mainContent .toolbar[style*="margin:12px 0"] {
    margin: 8px 0 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .toolbar[style*="margin:12px 0"] > .filter-btn {
    flex: 1 1 calc(33.33% - 4px) !important;
    min-height: 36px !important;
    text-align: center;
  }

  /* ─── 4. Pricing Suggestions — full-bleed wrapper + even filter row ──── */
  /* The whole view is wrapped in `<div style="padding:0 24px 24px">`
   * which steals 48px on mobile. */
  #mainContent > div > div[style*="padding:0 24px 24px"],
  #mainContent > div > div[style*="padding: 0 24px 24px"] {
    padding: 0 0 24px !important;
  }

  /* Pricing-suggestions tab strip + filter row — inline widths force odd
   * uneven layout. Let them flex equally. */
  #mainContent #ps-tabs > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 36px !important;
  }
  #mainContent #ps-filters {
    gap: 8px !important;
  }
  #mainContent #ps-filters > #ps-verdict,
  #mainContent #ps-filters > #ps-sku {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
  }
  #mainContent #ps-filters > #ps-apply {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 0 16px !important;
  }

  /* Pricing-suggestions wide 9-col table needs a min-width so the
   * `overflow-x:auto` parent scrolls cleanly without crushing columns. */
  #mainContent #ps-body > div[style*="overflow-x:auto"] > table {
    min-width: 880px !important;
  }

  /* ─── 5. Finance subview wrappers (cashflow / landed / recurring / unit) ── */
  /* All four use `padding:24px` on a `.{cff,lc,rb,ue}-wrap` outer div. On
   * mobile the standard #mainContent already provides side padding; double
   * padding wastes 48px. Tighten to vertical-only. */
  #mainContent .cff-wrap,
  #mainContent .lc-wrap,
  #mainContent .rb-wrap,
  #mainContent .ue-wrap {
    padding: 12px 0 !important;
    max-width: 100% !important;
  }

  /* Finance subview tables — give them a min-width so any horizontal-scroll
   * wrapper actually scrolls instead of crushing column widths. Common
   * wrapper class names: .cff-table-wrap, .lc-table-wrap, .rb-table-wrap
   * .ue-table-wrap. */
  #mainContent .cff-table-wrap,
  #mainContent .lc-table-wrap,
  #mainContent .rb-table-wrap,
  #mainContent .ue-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .cff-table-wrap > table,
  #mainContent .lc-table-wrap > table,
  #mainContent .rb-table-wrap > table,
  #mainContent .ue-table-wrap > table {
    min-width: 640px !important;
  }

  /* Recurring-bills modal already uses `width:min(560px,92vw)` which is
   * fine — but tighten internal padding so the form doesn't waste real
   * estate at narrow widths. */
  #mainContent .rb-modal {
    padding: 16px !important;
  }

  /* ─── 6. Nexus — meta-bar tighter, table min-width ────────────────────── */
  #mainContent .nx-meta-bar {
    gap: 6px 12px !important;
    font-size: 10px !important;
    margin-bottom: 10px !important;
  }
  #mainContent .nx-table-wrap > table.nx-table {
    min-width: 720px !important;
  }
  /* Callout headline shouldn't be tiny on mobile. */
  #mainContent .nx-callout {
    padding: 10px 12px !important;
    line-height: 1.45 !important;
  }

  /* ─── 7. Jarvis Marketing recommendation cards — equal heights ────────── */
  /* The `.jm-rec-card` is a flex row with icon + body. On mobile the body
   * text can wrap to 4-5 lines; the icon's flex-start alignment leaves a
   * tall icon-less gutter. Tighten card padding and let icons stay top-aligned
   * with explicit gap. */
  #mainContent .jm-rec-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  #mainContent .jm-rec-card .jm-rec-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
  #mainContent .jm-rec-card .jm-rec-metrics {
    overflow-wrap: anywhere !important;
  }

  /* Jarvis ad-intel section header buttons (Summarize / Approve / Reject)
   * are sized 11px × 4px padding inline. Bump to a real touch target. */
  #mainContent .jarvis-ad-intel-section button[style*="font-size:11px"] {
    min-height: 32px !important;
    padding: 4px 12px !important;
  }

  /* ─── 8. ROAS gauge bars (break-even widget) — keep proportional ─────── */
  /* The roas-gauge-bar pair sits in a fixed-height container; on mobile
   * they were getting clipped. Make sure the wrapper allows full width. */
  #mainContent .roas-breakeven-actual-value {
    font-size: 22px !important;
  }

  /* ─── 9. Currency / monetary cells — tabular-nums and prevent overflow ─ */
  /* Long currency formatting like $1,234,567.89 was overflowing tight cells
   * on the data-table mobile-card transformations. Force tabular-nums and
   * allow wrap as a last resort. */
  #mainContent .data-table .mono,
  #mainContent .view-table .mono {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* ─── 10. Finance/Marketing/Analytics sub-tab pick-tab strips ─────────── */
  /* Wrappers (.finance-reports-subtabs, .finance-spend-subtabs,
   * .finance-forecast-subtabs, .analytics-hub-subtabs, .finance-reports-subtabs)

   * all use `pick-tab-group`. The pass-1 orphan-card guard catches odd-count
   * last-child but with 4-5 sibling tabs the row reads jagged. Force grid
   * layout for these specific groups so every tab gets equal width. */
  #mainContent .finance-reports-subtabs,
  #mainContent .finance-spend-subtabs,
  #mainContent .finance-forecast-subtabs
  #mainContent .finance-costs-subtabs,
  #mainContent .analytics-hub-subtabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  /* 5-tab subtab groups — last cell spans full width (orphan guard already
   * handles odd-count via flex; for grid, restate explicitly). */
  #mainContent .finance-reports-subtabs > .pick-tab:nth-child(odd):last-child,
  #mainContent .finance-spend-subtabs > .pick-tab:nth-child(odd):last-child,
  #mainContent .finance-forecast-subtabs > .pick-tab:nth-child(odd):last-child
  #mainContent .finance-costs-subtabs > .pick-tab:nth-child(odd):last-child,
  #mainContent .analytics-hub-subtabs > .pick-tab:nth-child(odd):last-child {
    grid-column: 1 / -1 !important;
  }
  /* Tab pills stay at 40px (matches pass-1) but center text and strip
   * vertical padding so multi-word labels don't wrap awkwardly. */
  #mainContent .finance-reports-subtabs > .pick-tab,
  #mainContent .finance-spend-subtabs > .pick-tab,
  #mainContent .finance-forecast-subtabs > .pick-tab
  #mainContent .finance-costs-subtabs > .pick-tab,
  #mainContent .analytics-hub-subtabs > .pick-tab {
    text-align: center;
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ─── 11. Generic horizontal-scroll table-container — min-width guard ── */
  /* For finance + marketing tables wrapped in `.table-container` with
   * `overflow-x:auto`, ensure the inner data-table has a sensible min-width
   * so columns don't crush. Table-specific min-widths (cost-chain, ps-body,
   * nx-table) override this. */
  #mainContent .table-container > table.data-table {
    min-width: 640px;
  }

  /* ─── 12. Pricing-suggestions verdict badges — wrap-friendly ──────────── */
  /* Inline `padding:2px 8px` badges look right; just ensure cell-level wrap. */
  #mainContent #ps-body td {
    overflow-wrap: anywhere;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 3 — System+Global (Agent 6, 2026-05-06)
 *
 * Scope: Brief + Reviews + Jarvis/AI Ops + Strategy Command + Alerts +
 * Worker Heatmap + System (Users) + cross-cutting global concerns
 * (header chrome, jarvis full-height shell vs bottom-nav, modal stacks,
 * chat input row, tab-bar overflow scroll, rm-stat-card row, alerts
 * push-status badge, multi-checkbox cells in user table).
 *
 * Companion to passes 1 & 2 — does not duplicate their rules. Every
 * selector is scoped (.jv-, .rm-, .sc-, .alerts-, .wh-, .um-, .mb-, .brief-)
 * so cross-view bleed is impossible.
 *
 * Cole's complaint this addresses: "many spots aren't even, symmetrical,
 * or really difficult to view if you scroll all over the page" —
 * specifically: jarvis input hidden behind bottom-nav, jarvis-hub 5-tab
 * row crammed, reviews stat-cards uneven at 375px, modal Approve/Reject
 * touch targets short, brief Top-3 header overflow, alerts push toggle
 * pushed off-row, users table cramming.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ═══ 1. Jarvis / AI Ops — full-height shell must respect bottom nav ═══
   * .jv-wrap uses calc(100vh - 56px) which is the desktop header height.
   * On mobile the bottom nav is 72px tall — without subtracting it, the
   * .jv-input-row sits BEHIND the bottom nav and the send button is
   * unreachable. Subtract header (52px on mobile per existing rule) +
   * bottom nav (72px) + safe-area inset. */
  #mainContent .jv-wrap {
    height: calc(100dvh - 52px - 72px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 52px - 72px - env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Tighter padding on chat panes — desktop 24px → 14px */
  #mainContent .jv-messages,
  #mainContent .jv-sessions-wrap {
    padding: 14px !important;
    gap: 12px !important;
  }
  #mainContent .jv-input-area {
    padding: 12px 14px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .jv-input-row {
    gap: 8px !important;
  }
  /* Send button MUST stay at 44x44 — finger target */
  #mainContent .jv-send-btn {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  #mainContent .jv-input {
    min-height: 44px !important;
    font-size: 16px !important; /* prevent iOS zoom-on-focus */
    padding: 10px 12px !important;
  }
  /* Header chrome inside jarvis — 16px font, smaller icon */
  #mainContent .jv-header {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  #mainContent .jv-header-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  #mainContent .jv-header-title {
    font-size: 14px !important;
  }
  #mainContent .jv-header-status {
    font-size: 11px !important;
  }
  /* Tabs row inside jarvis — let it scroll horizontally instead of cramming */
  #mainContent .jv-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #mainContent .jv-tabs::-webkit-scrollbar { display: none; }
  #mainContent .jv-tab {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
  }
  /* Message bubble width — let assistant fill 90% on phone for readability */
  #mainContent .jv-msg {
    max-width: 92% !important;
  }
  #mainContent .jv-msg-bubble {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  /* Toggle pill row above input — wrap if needed */
  #mainContent .jv-toggle-wrap {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* AI-Ops summary panels — 1-column at narrow */
  #mainContent .jv-aiops-summary-grid,
  #mainContent .jv-aiops-panels {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #mainContent .jv-aiops-shell {
    padding: 0 !important;
    gap: 14px !important;
  }
  #mainContent .jv-aiops-panel {
    padding: 14px !important;
  }
  #mainContent .jv-aiops-item-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Jarvis-hub subtabs (5 tabs) — equal-height row, allow 2-row wrap */
  #mainContent .pick-tab-group.jarvis-hub-subtabs {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .pick-tab-group.jarvis-hub-subtabs .pick-tab {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }
  /* Sessions list — full-width cards */
  #mainContent .jv-ses-card {
    padding: 12px !important;
  }
  /* Briefs queue cards inside AI Ops — title can wrap, action row wraps */
  #mainContent .jv-briefs-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .jv-brief-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .jv-brief-actions > button {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }
  /* Freshness/paused banner — softer padding */
  #mainContent .jv-freshness-bar,
  #mainContent .jv-paused-banner {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
  }

  /* ═══ 2. Brief — Critical-Items header symmetry + supplements rhythm ═══ */
  #mainContent .mb-top3-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  #mainContent .mb-top3-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mainContent .mb-top3-actions {
    margin-left: auto !important;
    gap: 6px !important;
  }
  #mainContent .mb-top3-timestamp {
    font-size: 11px !important;
  }
  #mainContent .mb-top3-refresh-btn {
    min-height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Top-3 item row — keep rank+icon+content tight at 375px */
  #mainContent .mb-top3-item-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #mainContent .mb-top3-item-detail {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
  #mainContent .mb-top3-rank {
    flex-shrink: 0 !important;
  }
  #mainContent .mb-top3-icon {
    flex-shrink: 0 !important;
  }
  /* Supplements (stockouts etc.) — 1-column on phone */
  #mainContent .mb-top3-supplements {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Brief-header actions — Summarize + Refresh — equal heights */
  #mainContent .brief-header-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .brief-header-actions > button {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }
  /* Yesterday-row — wrap label + value + delta cleanly */
  #mainContent .mb-yesterday-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  /* ═══ 3. Reviews Moderation — symmetry + touch targets ═══ */
  /* Stat cards row — keep them in 2-col not 4-col, equal height */
  #mainContent #reviewsModeration .rm-stat-card,
  #mainContent .rm-stat-card {
    min-height: 76px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .rm-stat-value {
    font-size: 20px !important;
  }
  #mainContent .rm-stat-label {
    font-size: 10.5px !important;
  }
  /* Filter row — single column, full-width controls */
  #mainContent .rm-filters {
    gap: 8px !important;
  }
  #mainContent .rm-filters select,
  #mainContent .rm-filters input {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  /* Modal — fit viewport with breathing room */
  #mainContent + #rmModal,
  #rmModal {
    padding: 12px !important;
  }
  #rmModal .rm-modal-card {
    padding: 16px !important;
    max-height: 92vh !important;
    border-radius: 12px !important;
  }
  #rmModal .rm-modal-photos img {
    width: 88px !important;
    height: 88px !important;
  }
  /* Approve / Reject / Spam buttons — 44px touch targets, equal width row */
  #rmModal .rm-actions {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  #rmModal .rm-actions button {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  /* Bulk-eligibility buttons — wrap to 2 per row, 40px high */
  #mainContent .rm-bulk-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 40px !important;
  }
  /* Sub-tab bar — already wraps; tighten so 6 tabs in 3×2 stay even */
  #mainContent .rm-tab-bar .rm-tab {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
  }
  /* Suppressions delete button — touch target */
  #mainContent .rm-sup-delete-btn {
    min-height: 36px !important;
    min-width: 36px !important;
  }

  /* ═══ 4. Alerts — push-status badge layout + row symmetry ═══ */
  /* Push-status banner: dot + 2-line text + button — row at >480, stack
   * cleanly below 420. The button was getting kicked off the right edge
   * with margin-left:auto when the text wrapped to 3 lines. */
  #mainContent .alerts-push-status {
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
  }
  #mainContent .alerts-push-btn {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 40px !important;
    text-align: center !important;
  }
  #mainContent .alerts-shell {
    gap: 16px !important;
  }
  #mainContent .alerts-domain-head {
    padding: 12px 14px !important;
  }
  /* Alert row: 1fr auto holds at 375px; soften padding + text wrap */
  #mainContent .alerts-row {
    padding: 12px 14px !important;
    gap: 12px !important;
    align-items: center !important;
  }
  #mainContent .alerts-row-label {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .alerts-row-desc {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }
  #mainContent .alerts-toggle {
    flex-shrink: 0 !important;
  }
  /* ═══ 5. Strategy Command — extra compaction beyond own breakpoint ═══
   * .sc-tabs already has min-height:44 at <=768 in its own scoped CSS.
   * Add: tab bar horizontal-scroll fallback (3 tabs may still cram with
   * a 12-char label), card-grid card padding, filter row symmetry. */
  #mainContent .sc-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  #mainContent .sc-tabs::-webkit-scrollbar { display: none; }
  #mainContent .sc-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  #mainContent .sc-filters {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .sc-filters select,
  #mainContent .sc-filters input {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }
  #mainContent .sc-card {
    padding: 14px !important;
  }
  #mainContent .sc-card-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .sc-card-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .sc-action-btn {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }

  /* ═══ 6. Worker Heatmap — toolbar symmetry + horizontal-scroll cue ═══
   * The grid (7 rows × 24 hour cells) MUST scroll horizontally — already
   * does via .wh-grid-wrap{overflow-x:auto}. Add visible scroll affordance
   * + symmetric toolbar where day-pill row + refresh sit on consistent
   * heights. The pick-tab-group.worker-activity-subtabs already inherits
   * the pass-1 40px rules. */
  #mainContent .wh-shell {
    gap: 16px !important;
  }
  #mainContent .wh-toolbar {
    gap: 8px !important;
  }
  #mainContent .wh-day-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
  #mainContent .wh-refresh-btn {
    min-height: 36px !important;
  }
  #mainContent .wh-user-card {
    padding: 12px !important;
  }
  #mainContent .wh-user-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  #mainContent .wh-user-total {
    margin-left: 0 !important; /* don't push off-row when name wraps */
    width: 100% !important;
    font-size: 11.5px !important;
  }
  /* Soft horizontal-scroll affordance — fades right edge on overflow */
  #mainContent .wh-grid-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* Inner-tabs (AI ops sub-row) — wrap, consistent 40px */
  #mainContent .ai-inner-tabs {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ai-inner-tabs > * {
    min-height: 40px !important;
  }
  #mainContent .ai-row {
    padding: 10px 12px !important;
  }
  #mainContent .ai-row-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #mainContent .ai-row-desc {
    font-size: 11.5px !important;
  }

  /* ═══ 7. System / Users — table-card transformation tightening ═══
   * The Users table has 7 columns (Name/Role/PIN/Status/Channels/Created/
   * Actions). On mobile the .table-scroll/.table-container already gives
   * horizontal scroll, but the embedded action row (Edit / Reset PIN /
   * Disable) and the channel-checkbox cell were not wrapping. */
  #mainContent .um-actions {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mainContent .um-action-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  #mainContent .um-channels-cell {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-width: 220px !important;
  }
  #mainContent .um-channel-cb {
    flex: 0 0 auto !important;
    font-size: 11px !important;
  }
  /* Create-user form row — stack inputs */
  #mainContent .um-input-pin,
  #mainContent #newUserName,
  #mainContent #newUserRole,
  #mainContent #newUserPin {
    min-height: 40px !important;
    font-size: 16px !important; /* prevent iOS zoom on focus */
    box-sizing: border-box !important;
  }
  #mainContent .um-create-btn {
    min-height: 44px !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  /* PIN reveal cell — keep dots + button on one line */
  #mainContent .um-pin-cell {
    white-space: nowrap !important;
  }
  /* Sys-stats row — tighten to 2-col equal-height tiles */
  #mainContent .sys-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent .sys-stat-card {
    padding: 10px 12px !important;
    min-height: 76px !important;
  }
  #mainContent .sys-stat-value {
    font-size: 20px !important;
  }
  #mainContent .sys-stat-label {
    font-size: 10.5px !important;
  }
  /* User-role-badge — uniform height */
  #mainContent .user-role-badge {
    display: inline-block !important;
    line-height: 1.4 !important;
  }

  /* ═══ 8. Cross-cutting global — header chrome at 375px, modal stack ═══
   * Header at 375px: logo + status group + action group + account group.
   * The existing rules force header-right to 100% wrap; tighten the chip
   * heights so the sub-strip is a clean band, not a 2-row mess. */
  .header {
    padding: 6px 8px !important;
    min-height: 52px !important;
  }
  /* Theme + lang toggle pills + notification bell — uniform 36px square so
   * the right-side cluster is symmetrical. Some are .theme-toggle, some
   * .lang-toggle, some .notification-bell-btn — match all. */
  .header .theme-toggle,
  .header .lang-toggle,
  .header .notification-bell-btn,
  .header .header-icon-btn,
  /* Notification panel slide-in — guarantee close button is reachable */
  .notification-panel {
    max-height: calc(100dvh - 52px - 72px) !important;
  }
  /* Sidebar overlay — backdrop should always sit below sidebar but above
   * content so the dismiss-by-tap region is reliable. */
  /* Generic toast container — float above bottom nav with safe-area */
  #toast-container {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 1100 !important;
  }
  #toast-container .toast,
  .toast {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Generic backdrop modal — make sure they sit above the bottom nav.
   * Pages like rmModal use position:fixed inset:0 which already covers
   * the nav, but z-index needs to beat .mobile-bottom-nav (z-dropdown). */
  #rmModal,
  .modal-overlay,
  /* ═══ 9. Page-level rhythm — uniform 12px section gaps for these views ═══
   * The pass-1 rule covers most surfaces but doesn't reach the per-view
   * scoped wrappers below. Bringing them in line ends the 14/16/24 staircase. */
  #mainContent .alerts-shell,
  #mainContent .wh-shell,
  #mainContent .ai-shell,
  #mainContent .jv-aiops-shell {
    margin-top: 0 !important;
  }
  #mainContent .sc-stats,
  #mainContent .alerts-shell,
  #mainContent .wh-shell {
    margin-bottom: 12px !important;
  }
}

/* Mobile UX pass 3 — narrow-viewport (<=420px) refinements (sibling block,
 * not nested, for old Safari compat). */
@media (max-width: 420px) {
  #mainContent .alerts-header h2 {
    font-size: 18px !important;
  }
  #mainContent .pick-tab-group.jarvis-hub-subtabs .pick-tab {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 11.5px !important;
  }
  #mainContent .rm-tab-bar .rm-tab {
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 11.5px !important;
  }
}



/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Orders (Agent 1, 2026-05-07)
 * Cole's note after pass 3: "do another broad pass" — go after the
 * second-order issues pass-3 didn't reach.
 *
 * Scope: Orders nav only (fulfillment, mto/logistics, order-exceptions,
 * labels-hub: label-generator + label-anomalies + shipping-claims,
 * purchase-orders-hub: bulk-orders + smart-reorder).
 *
 * Issues addressed (second-order — pass 1-3 hit the obvious ones):
 *   1. labels-hub 3-tab subtab strip — third tab orphaned in 2-col grid.
 *   2. Inline skeleton blocks with hardcoded width:160-220px overflow on
 *      375px and create asymmetric loading states.
 *   3. Modal max-width minus 24px = 351px on iPhone 13 mini — bump to
 *      calc(100vw - 16px) for tighter fit + reduce body padding.
 *   4. Modals sized 540-580px wide use 18-20px body padding — too generous
 *      on phones, eats real estate. Drop to 14-16px.
 *   5. Label review-row expand panel: nested grids `2fr 1fr 1fr` (city/
 *      state/zip) and `1fr 1fr` (phone/email, dimensions) cram 3 inputs
 *      into 320px = 105px each, sub-tap-target.
 *   6. shipping-claims modal dropdown `sc-order-results` max-height 260px
 *      pushes the form below off-screen on iPhone SE-class.
 *   7. order-exceptions modal type-button row uses flex with 2 boxes —
 *      14px padding + 22px icon = 90px tall, fine, but type-btn-sub copy
 *      ("Can't find box • Wrong box shipped") at 11px wraps awkwardly in
 *      cramped widths. Tighten icon, allow sub copy to flow on 2 lines.
 *   8. order-exceptions modal-result-row: SKU/order rows have a "Select"
 *      button at the right end. On 327px-wide modal body, image (36px) +
 *      title flex-1 + button (60px) + gaps consume 200px+, title gets
 *      ~120px and ellipses. Stack vertically on phones.
 *   9. order-exceptions modal-search 9px padding + 14px font = 35px row,
 *      below 40px tap target.
 *   10. PO hub container pills (bulk-orders): 6px/14px padding chips
 *       wrap fine but no min-height; need 36px to match other tap zones.
 *   11. Smart Reorder jarvis-stat-chip row uses flex with gap:12px so
 *       chips stack vertically when squeezed — looks sparse with 2
 *       narrow chips. Force 3-col grid.
 *   12. Smart Reorder header action cluster (Summarize/Refresh/Export
 *       CSV) — pass 3 covered it for `gap:8px;align-items:center` but
 *       buttons have inline `padding:5px 12px` keeping height ~24px,
 *       sub-tap. Bump to 40px min-height.
 *   13. Logistics MTO/PO loading skeleton uses `repeat(4,1fr)` inline
 *       grid — pass 3 caught one case but the smart-reorder skeleton
 *       still has hardcoded `width:280px;height:28px` for header.
 *   14. order-exceptions cards (oex-card) have padding:11px 12px and
 *       resolve-btn aligned right; on 1-col mobile the resolve-btn ends
 *       up jammed against the time. Force min-height + tap-target.
 *   15. Container in-transit chips in smart-reorder use inline padding
 *       and wrap with flex-wrap; `font-size:12px` is fine but the chip
 *       clusters can feel dense — drop to a 2-col grid on phones.
 *   16. Smart Reorder seasonal-alerts-card header copy sometimes wraps
 *       under icon — give it grid layout for clean alignment.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1. labels-hub 3-tab subtab strip — odd-last-child orphan rule.
   *    Pass 1 only handles `.pl-wh-subtabs`; this is the labels-hub case. */
  #mainContent .pick-tab-group.labels-hub-subtabs .pick-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* 2. Skeleton-block fixed pixel widths — let them fill the row so the
   *    loading state isn't lopsided / overflowing on 375px. The .u-filters
   *    parent flex-wraps; force 100% width on inner skeletons there.
   *    Inline-style skeleton-block grid items get the same treatment. */
  #mainContent .u-filters .skeleton-block,
  #mainContent .u-filters > .skeleton-block[style*="width:160px"],
  #mainContent .u-filters > .skeleton-block[style*="width:170px"] {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Standalone skeleton headers (`width:220px;height:28px` etc.) — let
   *  them stretch so the loader matches the page width below it. */
  #mainContent .u-panel > .skeleton-block[style*="width:220px"],
  #mainContent .u-panel > .skeleton-block[style*="width:240px"],
  #mainContent .u-panel > .skeleton-block[style*="width:280px"],
  #mainContent .u-panel > .skeleton-block[style*="width:180px"] {
    width: 60% !important;
    max-width: 220px !important;
  }
  /* The 4-col loading grid in MTO/PO views — collapse to 2-col so
   *  skeleton cards stay legible on phone. */
  #mainContent div[style*="grid-template-columns:repeat(4,1fr)"][style*="gap:12px"],
  #mainContent div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3. Modal width — let the modal use almost the full screen on
   *    phones. Pass 3 covered the inline `1fr 1fr` collapse; this
   *    handles the outer width. */
  #mainContent ~ .modal-overlay .modal-box[style*="width:min(580px"],
  body > .modal-overlay .modal-box[style*="width:min(580px"] {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }
  /* 4. Modal body padding tightening — every Orders modal uses 18-20px
   *    inner padding. 14px on phones reclaims ~12px of horizontal space. */
  body > .modal-overlay .modal-box > div[style*="padding:20px"],
  body > .modal-overlay .modal-box > div[style*="padding: 20px"] {
    padding: 14px !important;
  }
  body > .oex-modal-overlay .oex-modal-body {
    padding: 14px 14px !important;
  }
  body > .oex-modal-overlay .oex-modal-header {
    padding: 14px 14px 12px !important;
  }
  body > .oex-modal-overlay .oex-modal-footer {
    padding: 12px 14px !important;
  }
  /* 4b. Outer modal width clamp for oex-modal (already capped at
   *     calc(100vw - 32px) — drop to 12px so we keep parity with
   *     shipping-claims and journey-modal). */
  body > .oex-modal-overlay .oex-modal {
    max-width: calc(100vw - 12px) !important;
    width: calc(100vw - 12px) !important;
  }
  /* journey-modal width parity (Fulfillment, Logistics, MTO drafts). */
  body > .journey-overlay > .journey-modal {
    max-width: calc(100vw - 12px) !important;
    width: calc(100vw - 12px) !important;
  }
  body > .journey-overlay > .journey-modal > div[style*="padding: 20px"],
  body > .journey-overlay > .journey-modal > div[style*="padding:20px"] {
    padding: 14px !important;
  }

  /* 5. Label review-row expand panel — collapse the city/state/zip 3-col
   *    grid into stacked rows so each input is a real tap target.
   *    Pass 3 only collapsed the OUTER `1fr 1fr` of the expand container. */
  #mainContent .lbl-review-expand td > div > div[style*="grid-template-columns:2fr 1fr 1fr"],
  #mainContent .lbl-review-expand td div[style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  /* The City field gets the full row; State + ZIP share row 2. */
  #mainContent .lbl-review-expand td div[style*="grid-template-columns:2fr 1fr 1fr"] > .lbl-form-group:first-child {
    grid-column: 1 / -1;
  }
  /* 5b. Nested 1fr 1fr grids inside the expand panel (phone/email,
   *     dimensions weight/L/W/H) keep 2-col but tighten gap. */
  #mainContent .lbl-review-expand td div[style*="grid-template-columns:1fr 1fr"] {
    gap: 6px !important;
  }
  /* 5c. Expand-row save/cancel button band — equal-width tap targets. */
  #mainContent .lbl-review-expand td > div[style*="display:flex;gap:8px;margin-top:10px"] {
    gap: 8px !important;
  }
  #mainContent .lbl-review-expand td > div[style*="display:flex;gap:8px;margin-top:10px"] > button {
    flex: 1 1 50% !important;
    min-height: 40px !important;
  }

  /* 6. shipping-claims order-search dropdown — clamp height so the
   *    Claim Type / Carrier rows below stay reachable on small screens. */
  #mainContent #sc-order-results,
  body > .modal-overlay #sc-order-results {
    max-height: 200px !important;
  }

  /* 7. order-exceptions modal type-button row — vertical stack on phones
   *    so each card has full width + readable sub copy. */
  #mainContent .oex-type-btns,
  body > .oex-modal-overlay .oex-type-btns {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body > .oex-modal-overlay .oex-type-btn {
    padding: 12px !important;
    text-align: left !important;
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0 12px !important;
    align-items: center !important;
  }
  body > .oex-modal-overlay .oex-type-btn .oex-tb-icon {
    grid-row: 1 / 3;
    margin: 0 !important;
    font-size: 22px !important;
  }
  body > .oex-modal-overlay .oex-type-btn .oex-tb-label {
    text-align: left !important;
  }
  body > .oex-modal-overlay .oex-type-btn .oex-tb-sub {
    text-align: left !important;
    margin-top: 0 !important;
  }

  /* 8. order-exceptions modal-result-row — stack image/title block over
   *    the Select button so titles don't get clipped on narrow widths. */
  body > .oex-modal-overlay .oex-modal-result-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  body > .oex-modal-overlay .oex-modal-result-row .oex-mr-sel {
    margin-left: auto !important;
    min-height: 36px !important;
    padding: 6px 16px !important;
  }
  /* The middle column (oex-mr-num + oex-mr-cust block) needs to allow
   *  ellipses without spilling. */
  body > .oex-modal-overlay .oex-modal-result-row > div {
    min-width: 0 !important;
  }
  body > .oex-modal-overlay .oex-modal-result-row .oex-mr-cust,
  body > .oex-modal-overlay .oex-modal-result-row .oex-mr-num {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 9. order-exceptions modal-search input — 40px tap target. */
  body > .oex-modal-overlay .oex-modal-search,
  body > .oex-modal-overlay .oex-form-select,
  body > .oex-modal-overlay .oex-form-textarea {
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
  body > .oex-modal-overlay .oex-form-textarea {
    min-height: 80px !important;
  }
  body > .oex-modal-overlay .oex-modal-back,
  body > .oex-modal-overlay .oex-modal-submit {
    min-height: 40px !important;
    padding: 0 16px !important;
    flex: 1 1 50% !important;
  }
  /* 9b. order-exceptions search-tab pills — 40px so they're tappable. */
  body > .oex-modal-overlay .oex-search-tabs {
    gap: 4px !important;
  }
  body > .oex-modal-overlay .oex-search-tab {
    min-height: 36px !important;
    padding: 8px 10px !important;
  }

  /* 10. PO hub container pills (bulk-orders) — proper tap height. */
  #mainContent span[data-action="co-filter"] {
    min-height: 36px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 11. Smart Reorder jarvis-stat-chip row — equal 3-col grid. */
  #mainContent .jarvis-reorder-panel > div[style*="display:flex"][style*="flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #mainContent .jarvis-stat-chip {
    width: 100% !important;
    min-height: 56px !important;
    justify-content: center !important;
  }

  /* 12. Smart Reorder header action cluster — pass-3 forced wrap; bump
   *     buttons to a 40px tap height since the inline padding is 5px 12px. */
  #mainContent .page-header > div[style*="display:flex"][style*="gap:8px"] > button[data-action^="sr-"] {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  /* The Summarize button has inline `padding:5px 12px;font-size:12px` and
   *  no class — match it via data-action. */
  #mainContent button[data-action="sr-summarize"] {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }

  /* 13. Smart Reorder summary card values — pass 3 caught the 28px font;
   *     also tighten card padding so 4 cards fit in 2x2 cleanly. */
  #mainContent .card[style*="padding:16px"][style*="border-left:3px solid"] {
    padding: 12px !important;
  }

  /* 14. order-exceptions cards — give the footer a real tap zone for
   *     resolve-btn so it doesn't overlap the time text. */
  #mainContent .oex-card-footer {
    gap: 8px !important;
    align-items: center !important;
  }
  #mainContent .oex-card-footer .oex-resolve-btn {
    min-height: 32px !important;
    padding: 6px 14px !important;
  }
  /* Tighten oex-card density on mobile — 11px padding + 8px margin
   *  leaves cards looking floaty. */
  #mainContent .oex-card {
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
  }

  /* 15. Container in-transit chip cluster — keep flex-wrap but cap
   *     chip min-width so we don't get one chip per row. */
  #mainContent .card div[style*="display:flex;flex-wrap:wrap;gap:8px"] > div[style*="background:var(--surface-2)"] {
    flex: 1 1 calc(50% - 4px) !important;
    box-sizing: border-box !important;
  }

  /* 16. Smart Reorder seasonal-alerts-header — clean alignment. */
  #mainContent .seasonal-alerts-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* 17. order-exceptions modal-footer (back/submit) — already 2 buttons
   *     justify-end; on phones make them 50/50 and full-width-ish. */
  body > .oex-modal-overlay .oex-modal-footer {
    justify-content: stretch !important;
  }

  /* 18. order-exceptions filter row was forced to flex-direction:column
   *     by inline media at line 269. The sev/type selects fill width
   *     fine but the trailing count + add button stack awkwardly.
   *     Force the +Add button to its own row so it doesn't sit beside
   *     the count text. */
  #mainContent .oex-filters {
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .oex-filters select {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }
  #mainContent .oex-filters > span {
    text-align: center !important;
  }
  #mainContent .oex-filters .oex-add-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }

  /* 19. PO container/supplier filter pill row in smart-reorder needs
   *     scroll containment when very many containers exist. */
  #mainContent #jarvis-po-panel,
  #mainContent #seasonal-alerts-panel,
  #mainContent #jarvis-reorder-panel {
    margin-bottom: 16px !important;
  }

  /* 20. Long monetary values + tracking numbers in tables — stop them
   *     blowing the cell width with a sensible word-break. Tables already
   *     have horizontal scroll wrappers from pass 3, but mono spans
   *     occasionally bust the wrapper. */
  #mainContent .oex-table .mono,
  #mainContent .la-table .mono,
  #mainContent .po-table .mono {
    word-break: break-all;
    white-space: normal !important;
  }

  /* 21. Sticky modal header at top:0 — account for safe-area on iPhone X+. */
  body > .modal-overlay .modal-box .modal-header[style*="position:sticky"] {
    padding: 12px 14px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Customers (Agent 2, 2026-05-07)
 *
 * Scope: 5 views in the Customers nav section:
 *   • support-inbox (AI Responder — split-pane sidebar/main)
 *   • messages (internal team chat — channel bar + thread detail)
 *   • support-analytics-hub (forecast charts + SLA grids)
 *   • returns (Customer RMA — multi-step modal + photo handling)
 *   • customers (Customer Intelligence — drill-down profile + timeline)
 *
 * Companion to passes 1/2/3 — does not duplicate their rules.
 *
 * Second-order issues addressed (caught after pass-3 ship):
 *   1. Inbox split-pane: when a ticket is selected at 375px, both panes
 *      stack giving the user a long sidebar above the thread. Use
 *      :has(.responder-ticket-header) to fully collapse the sidebar
 *      when a case is loaded; back-button via existing case rows is
 *      preserved through deselect taps.
 *   2. Inline draft slots (#irisDraftSlot, #jarvisDraftSuggestion) had
 *      max-height:160px with overflow-y but no padding compaction; long
 *      drafts on phones overflowed the visible band.
 *   3. Customer Intelligence drill-down: ci-profile-metrics flex-wrap
 *      gap:24px stranded each metric on its own line at 375px;
 *      ci-event-card padding/text sizing not phone-tuned;
 *      ci-event-json overflowed beyond card width.
 *   4. Customer Story panel (.customer-story-panel): close button can
 *      sit off-screen when the title wraps; segments grid stays multi-col.
 *   5. Returns RMA modal: photo-grid items + step indicator centered;
 *      hub-ret-step-lbl + hub-ret-actions touch targets equalized.
 *   6. Messages thread: channel-bar 6+ tabs cram; reply textarea sits
 *      under the iOS keyboard without safe-area; back-button row drift.
 *   7. Support analytics: support-forecast-cat-bar wrap-row breaks at
 *      375px; sla-vol-bar-col chart bars get crushed; aging-bar-track
 *      width too wide for the row text.
 *   8. Long subjects/customer names — case rows + thread cards get
 *      hard ellipsis instead of vertical clipping.
 *   9. Notification dot positioning on msg-channel-tab.
 *  10. Empty states padded asymmetrically inside the responder pane.
 *  11. Customer-context panel (cust-ctx-panel) order rows + issue rows
 *      cramming on phone.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ═══ 1. Support Inbox — split-pane behavior + draft slot tuning ═══ */
  /* When a ticket is loaded, responder-main contains .responder-ticket-header.
   * Collapse the sidebar so the thread takes the full viewport. Without this
   * the user has to scroll past the entire case list to reach the conversation
   * on every selection. To go back to the list, pressing the channel filter
   * (clearing selectedCaseId) re-renders main as the empty-state, restoring
   * the sidebar. Modern browsers (Safari 15.4+, Chrome 105+) support :has(). */
  #mainContent .responder-layout:has(.responder-main .responder-ticket-header) > .responder-sidebar {
    display: none !important;
  }
  #mainContent .responder-layout:has(.responder-main .responder-ticket-header) > .responder-main {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Inline draft slot panels — bound the inner scroll so draft text doesn't
   * push send/refine controls off-screen. */
  #mainContent #irisDraftSlot {
    margin-bottom: 12px !important;
  }
  #mainContent #jarvisDraftSuggestion {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  #mainContent #jarvisDraftSuggestion > div[style*="white-space:pre-wrap"] {
    max-height: 200px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* Refine textbox + Use Draft button — wrap to 2 rows so the input is full
   * width and the buttons sit on a clean second row, equal heights. */
  #mainContent #jarvisDraftSuggestion > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent #jarvisDraftSuggestion #jarvisRefineFeedback {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }
  #mainContent #jarvisDraftSuggestion button {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  /* Case row — long subject or customer name overflows. Add hard truncation
   * on the per-row title/subject lines so each row stays at predictable
   * height. */
  #mainContent .responder-case-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13.5px !important;
  }
  #mainContent .responder-case-subject {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }
  #mainContent .responder-case-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
  /* Channel filter pills row — equalize 4 chip heights, allow wrap to 2 rows */
  #mainContent .responder-channel-filter {
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  #mainContent .responder-channel-filter > button {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
  }
  /* Ticket header action row — Flag + Close buttons full-width 2-up */
  #mainContent .responder-ticket-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  #mainContent .responder-ticket-actions > button {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    justify-content: center !important;
  }
  /* Subject in ticket header can run long — let it wrap to 2 lines */
  #mainContent .responder-ticket-subject {
    font-size: 15px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  #mainContent .responder-ticket-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11.5px !important;
  }
  /* Conversation thread message bubbles — readable max width */
  #mainContent .responder-message {
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }
  #mainContent .responder-message-top {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 11.5px !important;
  }
  #mainContent .responder-message-body {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
  /* Latest customer message + Support context — stack as 1-col */
  #mainContent .responder-context-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent .responder-context-row .responder-field textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  /* Generate Draft button row — full width on phone */
  #mainContent .responder-actions-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #mainContent .responder-actions-row > button {
    width: 100% !important;
    min-height: 44px !important;
  }
  #mainContent .responder-actions-row .responder-hint {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }
  /* Draft textarea — prevent iOS zoom on focus */
  #mainContent .responder-draft-textarea {
    font-size: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  /* Send + Send-and-Close buttons row */
  #mainContent .btn-send-reply,
  #mainContent .btn-send-and-close {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  /* Customer Context panel — collapsed body order/issue rows */
  #mainContent .cust-ctx-panel {
    margin-bottom: 12px !important;
  }
  #mainContent .cust-ctx-toggle {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  #mainContent .cust-ctx-stats {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    padding: 10px 12px !important;
  }
  #mainContent .cust-ctx-stat {
    flex: 1 1 calc(50% - 7px) !important;
    min-width: 0 !important;
  }
  #mainContent .cust-ctx-stat-val {
    font-size: 16px !important;
  }
  #mainContent .cust-ctx-stat-label {
    font-size: 10.5px !important;
  }
  #mainContent .cust-ctx-order-row,
  #mainContent .cust-ctx-issue-row {
    padding: 8px 10px !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  #mainContent .cust-ctx-section-label {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  /* ═══ 2. Customer Intelligence — drill-down + timeline tuning ═══ */
  /* Profile metrics grid — gap:24px stranded one per line at 375px.
   * Force 2-col grid for clean parity. */
  #mainContent .ci-profile-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #mainContent .ci-metric-value {
    font-size: 18px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .ci-metric-label {
    font-size: 10px !important;
    letter-spacing: 0.4px !important;
  }
  /* Profile card header — avatar + name/email + since stack neatly */
  #mainContent .ci-profile-card {
    padding: 14px !important;
    margin-bottom: 14px !important;
  }
  #mainContent .ci-profile-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #mainContent .ci-profile-avatar {
    flex-shrink: 0 !important;
  }
  #mainContent .ci-profile-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  #mainContent .ci-profile-name {
    font-size: 16px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  #mainContent .ci-profile-email {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .ci-profile-since {
    font-size: 11px !important;
  }
  /* Customer row in sidebar — name+email truncate, stats pills wrap */
  #mainContent .ci-customer-row {
    padding: 10px 12px !important;
  }
  #mainContent .ci-customer-name {
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .ci-customer-email {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mainContent .ci-customer-stats {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin-top: 4px !important;
  }
  /* Search input — prevent iOS zoom + breathing room */
  #mainContent .ci-search-input {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
  /* Filters — horizontal-scroll clean strip on narrow screens */
  #mainContent .ci-filters {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  #mainContent .ci-filters::-webkit-scrollbar { display: none; }
  #mainContent .ci-filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
  }
  /* Timeline event card — ensure JSON details + summary stay inside box */
  #mainContent .ci-event-card {
    padding: 10px 12px !important;
  }
  #mainContent .ci-event-summary {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .ci-event-time,
  #mainContent .ci-event-source {
    font-size: 11px !important;
  }
  #mainContent .ci-event-header {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  #mainContent .ci-event-line {
    overflow-wrap: anywhere !important;
    font-size: 11.5px !important;
  }
  /* Inner JSON detail block when an event is expanded — keep scrollable
   * inside its card, never push out the right edge. */
  #mainContent .ci-event-json,
  #mainContent .ci-event-details pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 11px !important;
    white-space: pre !important;
  }
  /* Empty timeline state — vertical breathing room not too tall on phone */
  #mainContent .ci-empty-timeline {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
    font-size: 12.5px !important;
  }
  #mainContent .ci-empty,
  #mainContent .ci-loading {
    padding: 28px 16px !important;
    font-size: 12.5px !important;
  }

  /* ═══ 3. Customer Story panel (drawer overlay) ═══ */
  /* The story panel is a fixed-position drawer launched from the customer
   * row. Close button can sit off-screen when the title wraps. Force a
   * sticky header so close stays reachable; allow body to scroll. */
  .customer-story-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .customer-story-panel .cs-panel-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: var(--surface, #181818) !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .customer-story-panel .cs-panel-close {
    flex-shrink: 0 !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin-left: auto !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .customer-story-panel .cs-panel-body {
    padding: 14px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .customer-story-panel .cs-stat-row,
  .customer-story-panel .cs-seg-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .customer-story-panel .cs-stat-card,
  .customer-story-panel .cs-metric-card,
  .customer-story-panel .cs-seg-card {
    padding: 10px 12px !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
  }
  .customer-story-panel .cs-stat-value,
  .customer-story-panel .cs-metric-value {
    font-size: 18px !important;
  }
  .customer-story-panel .cs-stat-label,
  .customer-story-panel .cs-metric-label {
    font-size: 10.5px !important;
  }
  .customer-story-panel .cs-section-title {
    font-size: 13px !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
  }
  .customer-story-panel .cs-narrative {
    font-size: 13px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }
  .customer-story-panel .cs-rec-item {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  .customer-story-panel .cs-aff-list {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .customer-story-panel .cs-aff-pill {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .customer-story-panel .cs-table-section {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .customer-story-panel .cs-table {
    min-width: 480px !important;
  }

  /* ═══ 4. Customer (Hub) search/link forms — equal heights ═══ */
  #mainContent .ct-search-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ct-search-input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .ct-search-btn {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  #mainContent .ct-link-form,
  #mainContent .ct-email-form {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ct-link-email-input,
  #mainContent .ct-link-note-input,
  #mainContent .ct-email-input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .ct-link-btn,
  #mainContent .ct-email-save-btn {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }
  #mainContent .ct-card-top {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
  }
  #mainContent .ct-card-name {
    font-size: 14px !important;
    word-break: break-word !important;
  }
  #mainContent .ct-card-email,
  #mainContent .ct-card-phone {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .ct-card-meta {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 11.5px !important;
  }
  #mainContent .ct-orders-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .ct-linked-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 8px 10px !important;
  }
  #mainContent .ct-linked-email {
    overflow-wrap: anywhere !important;
    font-size: 12.5px !important;
  }

  /* ═══ 5. Returns / RMA modal — multi-step polish ═══ */
  /* Modal content area should fill viewport on phone, scrollable body. */
  #hub-return-modal .hub-return-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #hub-return-modal .hub-return-modal-hdr {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    background: var(--surface, #181818) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #hub-return-modal #hub-return-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .hub-return-step,
  #hub-return-modal .hub-return-step {
    gap: 12px !important;
  }
  #mainContent .hub-return-step-lbl,
  #hub-return-modal .hub-return-step-lbl {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }
  #mainContent .hub-ret-form,
  #hub-return-modal .hub-ret-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent .hub-ret-field,
  #hub-return-modal .hub-ret-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  #mainContent .hub-ret-field > label,
  #hub-return-modal .hub-ret-field > label {
    font-size: 12px !important;
    color: var(--text-muted) !important;
  }
  #mainContent .hub-ret-select,
  #hub-return-modal .hub-ret-select {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  #mainContent .hub-ret-input,
  #hub-return-modal .hub-ret-input {
    font-size: 16px !important;
  }
  #mainContent .hub-ret-checkbox-row,
  #hub-return-modal .hub-ret-checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
  /* Step actions row — Back + Continue/Create equal-width 2-up, sticky */
  #mainContent .hub-ret-actions,
  #hub-return-modal .hub-ret-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface, #181818) !important;
    padding: 10px 0 !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    gap: 8px !important;
  }
  #mainContent .hub-ret-actions > button,
  #hub-return-modal .hub-ret-actions > button {
    flex: 1 1 50% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
  }
  /* Item row in step 2 — image+title+qty+select stack neatly */
  #mainContent .hub-ret-item-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .hub-ret-item-row img,
  #hub-return-modal .hub-ret-item-row img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  /* Done step — links stack as 1-col on phone */
  #mainContent .hub-ret-done-links,
  #hub-return-modal .hub-ret-done-links {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mainContent .hub-ret-done-links > * {
    width: 100% !important;
    min-height: 44px !important;
    text-align: center !important;
  }
  #mainContent .hub-ret-done-title,
  #hub-return-modal .hub-ret-done-title {
    font-size: 16px !important;
  }
  #mainContent .hub-ret-tracking,
  #hub-return-modal .hub-ret-tracking {
    font-size: 12.5px !important;
    overflow-wrap: anywhere !important;
  }

  /* ═══ 6. Messages — phone layout (rewritten 2026-06-29) ════════════════════
   * The Messages view is a desktop 2/3-column grid (rail | list | detail). On a
   * phone we collapse to ONE column: the thread list fills the width, the team
   * rail becomes a left slide-in drawer (the ONLY channel switcher on mobile —
   * the desktop rail column is display:none here), and a tapped thread opens
   * full-screen (the view's existing narrow flow). Rules target the CURRENT
   * class names (.msg-shell / .msg-rail / .msg-filter-strip / .msg-thread-row),
   * not the long-dead .msg-channel-bar / .msg-filter-bar markup. */

  /* ── Page header: drop the desktop-only Split View + Chat Dock buttons ───── */
  #mainContent .msg-page-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }
  #mainContent .msg-header-actions {
    width: 100% !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  /* Higher specificity than the .refresh-btn base rule these buttons also carry. */
  #mainContent .msg-header-actions .msg-split-toggle,
  #mainContent .msg-header-actions .msg-dock-toggle { display: none !important; }
  #mainContent .msg-header-actions .btn-primary {
    flex: 1 1 auto !important;
    min-height: 42px !important;
  }
  #mainContent .msg-header-actions .refresh-btn {
    min-height: 42px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── Shell → single column, viewport-fit height, internal scroll kept ────── */
  #mainContent .msg-shell,
  #mainContent .msg-shell.msg-has-detail,
  #mainContent .msg-shell--no-rail,
  #mainContent .msg-shell--no-rail.msg-has-detail,
  #mainContent .msg-shell.msg-rail-collapsed,
  #mainContent .msg-shell.msg-rail-collapsed.msg-has-detail {
    grid-template-columns: 1fr !important;
    height: calc(100dvh - 168px) !important;
    min-height: 360px !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  /* Desktop detail column never grids-in on mobile (thread opens full-screen). */
  #mainContent .msg-detail-col,
  #mainContent .msg-shell.msg-has-detail .msg-detail-col { display: none !important; }
  /* Desktop rail collapse/expand affordances are meaningless on mobile. */
  #mainContent .msg-rail-handle,
  #mainContent .msg-rail-collapse-btn { display: none !important; }

  /* ── Team rail → left slide-in drawer ───────────────────────────────────── */
  #mainContent .msg-shell .msg-rail,
  #mainContent .msg-shell.msg-rail-collapsed .msg-rail {
    display: flex !important;
    position: absolute !important;
    top: 0; left: 0; bottom: 0;
    /* Only as wide as its content (longest team name) — not a fixed slab. */
    width: max-content !important;
    min-width: 180px !important;
    max-width: 80% !important;
    z-index: 40 !important;
    transform: translateX(-100%);
    transition: transform 0.22s ease !important;
    box-shadow: 2px 0 22px rgba(0, 0, 0, 0.22) !important;
    border-right: 1px solid var(--border) !important;
    padding-top: 14px !important;
  }
  #mainContent .msg-shell.msg-rail-drawer-open .msg-rail { transform: translateX(0); }
  #mainContent .msg-rail-backdrop {
    display: none;
    position: absolute !important;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 35 !important;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  #mainContent .msg-shell.msg-rail-drawer-open .msg-rail-backdrop { display: block; }
  /* Roomier drawer rows. */
  #mainContent .msg-rail .msg-channel-item { padding: 13px 16px !important; }
  #mainContent .msg-rail .msg-channel-name { font-size: 15px !important; }

  /* ── Mobile channel switcher button (in the channel header) ──────────────── */
  #mainContent .msg-rail-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
  }
  #mainContent .msg-rail-mobile-toggle .msg-rail-mobile-toggle-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
  #mainContent .msg-rail-mobile-toggle svg:last-child { flex-shrink: 0; opacity: 0.55; }

  /* ── Channel header: switcher on top, channel actions wrap below ─────────── */
  #mainContent .msg-channel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }
  /* The channel name lives in the switcher button now; hide the desktop meta
     block — except on the rail-less Warehouse mount, which has no switcher. */
  #mainContent .msg-shell:not(.msg-shell--no-rail) .msg-channel-header-meta { display: none !important; }
  #mainContent .msg-channel-header-actions {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .msg-channel-header-actions .btn { min-height: 38px !important; }

  /* ── Filter strip → wraps; status toggle full row; search full width ─────── */
  #mainContent .msg-filter-strip {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 16px !important;
  }
  #mainContent .msg-status-toggle {
    width: 100% !important;
    display: flex !important;
    gap: 4px !important;
  }
  #mainContent .msg-status-toggle .toggle-btn {
    flex: 1 1 33% !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }
  #mainContent .msg-filter-spacer { display: none !important; }
  #mainContent .msg-filter-assignee-wrap { flex: 1 1 auto !important; display: flex !important; }
  #mainContent .msg-filter-tagged-select,
  #mainContent .msg-filter-assignee-select {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: 100% !important;
    min-height: 42px !important;
    font-size: 16px !important;
  }
  #mainContent .msg-filter-search-wrap { flex: 1 1 100% !important; }
  #mainContent .msg-filter-search-input {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  /* Compose-new-thread box. */
  #mainContent .msg-compose-box { padding: 12px !important; }

  /* ── Thread list rows: roomy tap targets, 2-line preview ─────────────────── */
  #mainContent .msg-thread-row {
    padding: 12px 16px !important;
    gap: 11px !important;
    min-height: 58px !important;
  }
  #mainContent .msg-thread-row-title,
  #mainContent .msg-thread-row:hover .msg-thread-row-title {
    -webkit-line-clamp: 2 !important;
    font-size: 14.5px !important;
  }
  #mainContent .msg-thread-row-people,
  #mainContent .msg-thread-row:hover .msg-thread-row-people { display: none !important; }
  #mainContent .msg-thread-row-meta { font-size: 12px !important; }
  #mainContent .msg-thread-row-preview { font-size: 13px !important; }

  /* ── Open thread (full-screen detail) ───────────────────────────────────── */
  #mainContent .msg-detail-shell {
    min-height: calc(100dvh - 124px) !important;
    height: calc(100dvh - 124px) !important;
    border-radius: 12px !important;
  }
  #mainContent .msg-detail-topbar { padding: 12px 16px !important; }
  #mainContent .msg-detail-back { min-height: 42px !important; font-size: 14px !important; }
  #mainContent .msg-detail-header { padding: 14px 16px 12px !important; }
  #mainContent .msg-detail-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  #mainContent .msg-detail-task { gap: 10px !important; }
  #mainContent .msg-replies-container { padding: 4px 0 12px !important; }
  #mainContent .msg-reply { padding: 10px 16px !important; }
  #mainContent .msg-reply-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 12px !important;
  }
  #mainContent .msg-reply-content {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .msg-reply-avatar { width: 28px !important; height: 28px !important; }
  #mainContent .msg-reply-time { font-size: 11px !important; }
  #mainContent .msg-translated-badge { font-size: 11px !important; padding: 2px 8px !important; }

  /* Reply composer: sticky bottom, iOS-safe, 16px input (no zoom), big send. */
  #mainContent .msg-reply-composer {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface) !important;
    padding: 10px 12px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--border) !important;
    z-index: 3 !important;
  }
  #mainContent #msgReplyInput {
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  #mainContent #msgReplySendBtn {
    min-height: 40px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
  }
  /* Mention dropdown — keep within viewport */
  #mainContent .msg-mention-dropdown {
    max-height: 220px !important;
    max-width: calc(100vw - 32px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ═══ 7. Support Analytics Hub — charts, SLA grids, forecasts ═══ */
  /* Forecast hero numeric block — keep big-num readable, stack hero+volume */
  #mainContent .support-forecast-hero {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  #mainContent .support-forecast-volume {
    flex: 1 1 100% !important;
    text-align: center !important;
  }
  #mainContent .support-forecast-big-num {
    font-size: 36px !important;
    line-height: 1 !important;
  }
  #mainContent .support-forecast-big-label {
    font-size: 11px !important;
  }
  #mainContent .support-forecast-meta {
    font-size: 11.5px !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }
  /* Per-category bar rows — label + bar + count on phone-friendly rhythm */
  #mainContent .support-forecast-cats {
    gap: 8px !important;
  }
  #mainContent .support-forecast-cat-row {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    padding: 8px 0 !important;
  }
  #mainContent .support-forecast-cat-label {
    flex: 1 1 60% !important;
    min-width: 0 !important;
    font-size: 12.5px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .support-forecast-cat-stats {
    flex: 0 0 auto !important;
    font-size: 11.5px !important;
  }
  #mainContent .support-forecast-cat-bar-wrap {
    flex: 1 1 100% !important;
    height: 8px !important;
  }
  #mainContent .support-forecast-cat-bar {
    height: 100% !important;
  }
  /* SLA volume chart — bar columns get crushed at 375px. Min-width on the
   * chart wrapper so it scrolls horizontally if 7+ days don't fit. */
  #mainContent .sla-volume-chart {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
  }
  #mainContent .sla-vol-bar-col {
    flex: 0 0 auto !important;
    min-width: 32px !important;
  }
  #mainContent .sla-vol-bar {
    min-width: 18px !important;
  }
  #mainContent .sla-vol-period {
    font-size: 10.5px !important;
  }
  #mainContent .sla-vol-compare {
    font-size: 10.5px !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  /* SLA performance grid + tag rows */
  #mainContent .sla-perf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent .sla-perf-item {
    padding: 8px 10px !important;
    min-height: 64px !important;
  }
  #mainContent .sla-perf-label {
    font-size: 10.5px !important;
  }
  #mainContent .sla-tag-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 6px 0 !important;
  }
  #mainContent .sla-tag-name {
    flex: 1 1 60% !important;
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sla-tag-track {
    flex: 1 1 100% !important;
    height: 6px !important;
  }
  #mainContent .sla-compliance-row,
  #mainContent .sla-compliance-item {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
  }
  #mainContent .sla-aging-footer {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    font-size: 11.5px !important;
  }
  #mainContent .sla-progress-track {
    height: 6px !important;
  }
  #mainContent .sla-sentiment-bar {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }
  #mainContent .sla-sentiment-legend,
  #mainContent .sla-legend-right,
  #mainContent .sla-date-legend {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    font-size: 11px !important;
  }
  /* Aging row bars (used in support insights) — keep label + bar + count
   * on tight rhythm. */
  #mainContent .aging-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  #mainContent .aging-label {
    font-size: 12px !important;
    flex: 1 1 50% !important;
  }
  #mainContent .aging-bar-track {
    flex: 1 1 100% !important;
    height: 6px !important;
  }
  /* VIP outreach panel — name+email+meta wrap */
  #mainContent .vip-outreach-panel {
    padding: 12px !important;
  }
  #mainContent .vip-outreach-row {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 10px 0 !important;
  }
  #mainContent .vip-outreach-identity {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .vip-outreach-name {
    font-size: 13px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .vip-outreach-email {
    font-size: 11.5px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .vip-outreach-flags {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mainContent .vip-outreach-meta {
    font-size: 11px !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  /* ═══ 8. Empty / loading states inside Customers section ═══ */
  /* Tighten huge centered empty states so they don't push useful content
   * way below the fold. */
  #mainContent .responder-thread-empty {
    padding: 24px 16px !important;
    font-size: 13px !important;
  }
  #mainContent .responder-main > .empty-state {
    margin-top: 32px !important;
    padding: 16px !important;
  }
  #mainContent .ct-empty,
  #mainContent .ct-linked-empty,
  #mainContent .cust-ctx-empty {
    padding: 24px 16px !important;
    font-size: 12.5px !important;
  }
}

/* Pass-4 narrow-viewport refinements (≤420px) — sibling block, not nested. */
@media (max-width: 420px) {
  /* Story panel segments — flatten to single column */
  .customer-story-panel .cs-stat-row,
  .customer-story-panel .cs-seg-grid {
    grid-template-columns: 1fr !important;
  }
  /* CI profile metrics — 2-col still survives but values can collide;
   * compact further. */
  #mainContent .ci-profile-metrics .ci-metric-value {
    font-size: 16px !important;
  }
  /* Channel filter pills — single column 3+ filters */
  #mainContent .responder-channel-filter > button {
    flex: 1 1 100% !important;
  }
  /* Forecast big-num shrink so 4-digit numbers don't overflow */
  #mainContent .support-forecast-big-num {
    font-size: 30px !important;
  }
  /* Ticket-action row stack to 1-col on the smallest screens */
  #mainContent .responder-ticket-actions > button {
    flex: 1 1 100% !important;
  }
}




/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Products (Agent 3, 2026-05-07)
 *
 * Scope: Products nav section ONLY — Catalog Hub, Product Intelligence,
 * Storefront Hub (Config + Health), Sentinel (Storefront Anomalies + SKU
 * Duplicates), Listing Development (product-onboarding), Suppliers.
 * Builds on passes 1-3. All selectors are scoped (.pd-, .pi-, .onb-, .sup-,
 * .sa-, .sd-, .sh-, .sfc-, .catalog-hub-subtabs, .sentinel-subtabs,
 * .storefront-hub-subtabs).
 *
 * Second-order issues fixed:
 *  1. Three new Products-section subtab strips (catalog-hub, sentinel,
 *     storefront-hub) — orphan-card guard from pass-1 covers .pick-tab-group
 *     generically, but these 2-tab strips need explicit equal-width grid +
 *     touch height (40px wraps mid-word with default flex).
 *  2. Product detail panel (pd-*): pd-header-row title row crams when SKU
 *     + title + back-link race for 375px; pd-grid-2 already collapses to
 *     1-col but pd-card-mb20 spacing is desktop-tuned; pd-boxes-table
 *     (composite per-box detail) overflows without horizontal scroll;
 *     composite-sibling rows wrap awkwardly.
 *  3. Product Intelligence: stats-row has 5 stat-cards — at 375px even the
 *     pass-1 2-col grid leaves 5th card orphaned; filter-bar .filter-input
 *     + 2 .filter-select don't equalize so search field gets crushed.
 *  4. Listing Development: onb-form-overlay modal-body max-height was
 *     calc(100vh - 220px) — adds bottom-nav 72px + safe-area collision;
 *     onb-image-grid 130px minmax + 28px del-btn fails 44px touch target;
 *     onb-tab-bar with 5 tabs crams below 420px; onb-modal-footer button
 *     row needs wrap; review-banner + notice rows already flex-column at
 *     860px but action buttons in those rows still side-by-side narrow.
 *  5. Suppliers: 4-col sup-kpi-card row has no mobile rule (only inline
 *     auto-fit minmax on grid); sup-card padding 18 + sup-drawer-content
 *     420px-max-90vw fine but drawer-header padding 20 wastes space; the
 *     add-form sup-input is padding:5px 8px — below touch target.
 *  6. Sentinel — Storefront Anomalies: sa-panel-actions buttons have
 *     min-width:140 inline which forces button overflow at 320px; sa-table
 *     title-snippet/anomaly-type cells use inline 240px maxWidth that
 *     conflicts with mobile cards; sa-kpi-grid 2-col @<=768 already in
 *     scoped CSS but cards too tall.
 *  7. Sentinel — SKU Duplicates: sd-cards 4-col stat row crams; sd-table
 *     scrolls horizontally fine via own scoped @768 but sd-cell-actions
 *     buttons stack ugly; sd-conf-badge needs better legibility.
 *  8. Storefront Config (sfc-* in system.js): sfc-tabs has horizontal
 *     padding:0 24px + 6+ tabs, no horizontal scroll on mobile —
 *     last tabs hidden off-edge; sfc-arch-grid 340px minmax stacks fine
 *     but sfc-arch-card padding waste.
 *  9. Storefront Health: sh-cwv-card padding-tuning + score 56px font
 *     too tall in narrow viewport; sh-issues-toolbar gets stretched but
 *     button row doesn't wrap clean; sh-ps-run-btn / sh-schema-run-btn
 *     touch targets short.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* === 1. Products-section hub subtab strips — equal-width + touch === */
  #mainContent .pick-tab-group.catalog-hub-subtabs,
  #mainContent .pick-tab-group.sentinel-subtabs,
  #mainContent .pick-tab-group.storefront-hub-subtabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .pick-tab-group.catalog-hub-subtabs .pick-tab,
  #mainContent .pick-tab-group.sentinel-subtabs .pick-tab,
  #mainContent .pick-tab-group.storefront-hub-subtabs .pick-tab {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* === 2. Product Detail panel — pd-* card rhythm + composite tightening === */
  #mainContent .pd-header-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  #mainContent .pd-back-link {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  #mainContent .pd-meta-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 11.5px !important;
  }
  #mainContent .pd-meta-label {
    font-size: 10.5px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .pd-type-badge {
    font-size: 10.5px !important;
  }
  #mainContent .pd-card,
  #mainContent .pd-card-mb,
  #mainContent .pd-card-mb20 {
    padding: 14px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .pd-card-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .pd-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #mainContent .composite-sibling {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  #mainContent .composite-sibling .sib-sku,
  #mainContent .composite-sibling .sib-status,
  #mainContent .composite-sibling .pd-sibling-shelf {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mainContent .pd-comp-group-label {
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .pd-boxes-detail {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .pd-boxes-detail-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent table.pd-boxes-table {
    min-width: 640px !important;
    font-size: 12px !important;
  }
  #mainContent .pd-price-val-green,
  #mainContent .pd-days-val {
    font-variant-numeric: tabular-nums !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .pd-card .action-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* === 3. Product Intelligence — stats-row + filter-bar + table === */
  #mainContent #productIntelligence .stats-row,
  #mainContent .stats-row:not(.stats-row-inv-tight):has(> .stat-card:nth-child(5)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent #productIntelligence .stats-row > .stat-card:nth-child(5) {
    grid-column: 1 / -1 !important;
  }
  #mainContent .filter-bar > .filter-input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  #mainContent .filter-bar > .filter-select {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }
  #mainContent .pagination,
  #mainContent .pagination-btns {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  #mainContent .pagination-btns > button,
  #mainContent .pagination > button {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  #mainContent .sku-link {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  /* === 4. Listing Development (product-onboarding) — modal + image grid === */
  #mainContent .onb-form-overlay {
    padding: 12px 8px !important;
    padding-bottom: calc(12px + 72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .onb-form-overlay > div {
    max-height: calc(100dvh - 48px - 72px - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 16px !important;
  }
  #mainContent .onb-modal-header,
  #mainContent .onb-modal-footer {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .onb-modal-footer {
    justify-content: stretch !important;
  }
  #mainContent .onb-modal-footer > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
  }
  #mainContent .onb-modal-title {
    font-size: 15px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .onb-modal-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
  }
  #mainContent .onb-modal-body {
    padding: 14px !important;
    max-height: calc(100dvh - 48px - 72px - 120px - env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .onb-form-input,
  #mainContent .onb-form-static,
  #mainContent .onb-form-textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
  #mainContent .onb-form-textarea {
    min-height: 96px !important;
  }
  #mainContent .onb-image-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  #mainContent .onb-img-del-btn {
    width: 36px !important;
    height: 36px !important;
    top: 6px !important;
    right: 6px !important;
    font-size: 16px !important;
  }
  #mainContent .onb-img-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mainContent .onb-img-actions > button {
    width: 100% !important;
    min-height: 44px !important;
  }
  #mainContent .onb-tab-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }
  #mainContent .onb-tab-bar::-webkit-scrollbar { display: none; }
  #mainContent .onb-tab {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }
  #mainContent .onb-review-banner,
  #mainContent .onb-notice,
  #mainContent .onb-imp-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  #mainContent .onb-notice-btn,
  #mainContent .onb-review-banner button,
  #mainContent .onb-imp-banner button {
    width: 100% !important;
    min-height: 44px !important;
  }
  #mainContent .onb-bulk-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .onb-bulk-bar > * {
    flex: 1 1 auto !important;
  }
  #mainContent .onb-bulk-assignee {
    min-height: 40px !important;
    flex: 1 1 100% !important;
  }
  #mainContent .onb-phase-guide-card {
    padding: 14px !important;
  }
  #mainContent .onb-stat-number {
    font-size: 20px !important;
    font-variant-numeric: tabular-nums !important;
  }
  #mainContent .onb-stat-label {
    font-size: 10.5px !important;
  }
  #mainContent .onb-search-input {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  #mainContent .onb-actions-wrap {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .onb-actions-wrap > button,
  #mainContent .onb-action-btn,
  #mainContent .onb-action-primary,
  #mainContent .onb-action-publish {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  #mainContent .onb-thread-compose {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mainContent .onb-thread-compose-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .onb-thread-textarea {
    min-height: 80px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
  #mainContent .onb-thread-kind-select {
    min-height: 40px !important;
    flex: 1 1 auto !important;
  }

  /* === 5. Suppliers — KPI grid + cards + drawer + add-form === */
  #mainContent .sup-kpi-card {
    padding: 12px !important;
    min-height: 78px !important;
    box-sizing: border-box !important;
  }
  #mainContent .sup-kpi-label {
    font-size: 10.5px !important;
  }
  #mainContent .sup-kpi-value {
    font-size: 18px !important;
    font-variant-numeric: tabular-nums !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sup-kpi-sub {
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sup-card {
    padding: 14px !important;
  }
  #mainContent .sup-input {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
  }
  #mainContent textarea.sup-input {
    min-height: 72px !important;
    font-size: 14px !important;
  }
  #mainContent .sup-field-label {
    font-size: 10.5px !important;
  }
  #mainContent .sup-drawer-content {
    width: 100% !important;
    max-width: 100vw !important;
  }
  #mainContent .sup-drawer-header {
    padding: 14px 14px 12px !important;
  }
  #mainContent .sup-drawer-body {
    padding: 12px 14px !important;
  }
  #mainContent .sup-drawer-section {
    padding: 12px 0 !important;
  }
  #mainContent .sup-drawer-section-title {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  #mainContent .sup-drawer-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .sup-drawer-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .sup-d-stat-row {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
  }
  #mainContent .sup-copy-btn {
    min-height: 36px !important;
    min-width: 36px !important;
  }
  #mainContent .sup-add-btn {
    min-height: 40px !important;
  }

  /* === 6. Sentinel — Storefront Anomalies === */
  #mainContent .sa-panel,
  body > .sa-panel {
    padding: 16px !important;
    padding-bottom: calc(16px + 72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mainContent .sa-panel-close,
  body > .sa-panel .sa-panel-close {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .sa-panel-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .sa-panel-actions button,
  body > .sa-panel .sa-panel-actions button {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  #mainContent .sa-panel-json {
    font-size: 10.5px !important;
    max-height: 180px !important;
  }
  #mainContent .sa-kpi-grid {
    gap: 8px !important;
  }
  #mainContent .sa-kpi-grid .stat-card,
  #mainContent .sa-kpi-grid > div {
    padding: 12px !important;
    min-height: 78px !important;
  }
  #mainContent .sa-kpi-value {
    font-size: 22px !important;
    font-variant-numeric: tabular-nums !important;
  }
  #mainContent .sa-kpi-label {
    font-size: 10.5px !important;
  }
  #mainContent .sa-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent table.sa-table {
    min-width: 720px !important;
  }
  #mainContent table.sa-table td[style*="max-width:240px"],
  #mainContent table.sa-table td[style*="max-width: 240px"] {
    max-width: 200px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sa-filter-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mainContent .sa-filter-bar select,
  #mainContent .sa-filter-bar input {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
  #mainContent .sa-action-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }
  #mainContent .sa-pagination {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  /* === 7. Sentinel — SKU Duplicates === */
  #mainContent .sd-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    display: grid !important;
  }
  #mainContent .sd-card {
    padding: 12px !important;
    min-height: 76px !important;
  }
  #mainContent .sd-card-value {
    font-size: 20px !important;
    font-variant-numeric: tabular-nums !important;
  }
  #mainContent .sd-card-label {
    font-size: 10.5px !important;
  }
  #mainContent .sd-card-sub {
    font-size: 10.5px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .sd-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .sd-header-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #mainContent .sd-header-actions > button {
    flex: 1 1 auto !important;
    min-height: 36px !important;
  }
  #mainContent .sd-filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .sd-filters select,
  #mainContent .sd-filters input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
  #mainContent .sd-filter-label {
    font-size: 10.5px !important;
  }
  #mainContent table.sd-table {
    min-width: 720px !important;
    font-size: 12px !important;
  }
  #mainContent .sd-cell-actions {
    white-space: normal !important;
  }
  #mainContent .sd-btn-flag,
  #mainContent .sd-btn-dismiss {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
  }
  #mainContent .sd-conf-badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
  }
  #mainContent .sd-price {
    overflow-wrap: anywhere !important;
    font-variant-numeric: tabular-nums !important;
  }
  #mainContent .sd-sku {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  /* === 8. Storefront Config (sfc-* in system.js) === */
  #mainContent .sfc-tabs {
    padding: 0 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }
  #mainContent .sfc-tabs::-webkit-scrollbar { display: none; }
  #mainContent .sfc-tab {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  #mainContent .sfc-info-box {
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
  #mainContent .sfc-info-box code {
    word-break: break-all !important;
  }
  #mainContent .sfc-arch-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .sfc-arch-card {
    padding: 12px !important;
  }
  #mainContent .sfc-arch-num {
    flex-shrink: 0 !important;
  }
  #mainContent .sfc-section-title {
    font-size: 12px !important;
  }
  #mainContent .sfc-arch-detail {
    overflow-wrap: anywhere !important;
    line-height: 1.5 !important;
    font-size: 11.5px !important;
  }
  #mainContent .sfc-arch-label {
    font-size: 10.5px !important;
  }
  #mainContent .sfc-code {
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  /* === 9. Storefront Health — score row + CWV cards + run buttons === */
  #mainContent .sh-score-row > div:first-child > div:first-child {
    font-size: 44px !important;
  }
  #mainContent .sh-cwv-card {
    padding: 14px !important;
  }
  #mainContent .sh-issues-toolbar {
    gap: 8px !important;
  }
  #mainContent .sh-issues-toolbar select,
  #mainContent .sh-issues-toolbar input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .sh-issues-toolbar h3 {
    font-size: 14px !important;
  }
  #mainContent #sh-ps-run-btn,
  #mainContent #sh-schema-run-btn {
    min-height: 40px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  #mainContent #sh-ps-status,
  #mainContent #sh-schema-status {
    overflow-wrap: anywhere !important;
    font-size: 11.5px !important;
  }
  #mainContent #sh-issues-table {
    -webkit-overflow-scrolling: touch !important;
    max-height: 480px !important;
  }
  #mainContent #sh-issues-table table {
    min-width: 600px !important;
    font-size: 12px !important;
  }
  #mainContent #sh-sf-all,
  #mainContent #sh-sf-incomplete {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
}

/* Pass 4 — narrow-viewport (<=420px) refinements */
@media (max-width: 420px) {
  #mainContent .sd-cards {
    grid-template-columns: 1fr !important;
  }
  #mainContent #productIntelligence .stats-row,
  #mainContent .stats-row:not(.stats-row-inv-tight):has(> .stat-card:nth-child(5)) {
    grid-template-columns: 1fr !important;
  }
  #mainContent #productIntelligence .stats-row > .stat-card:nth-child(5) {
    grid-column: auto !important;
  }
  #mainContent .sup-kpi-card {
    min-height: 70px !important;
  }
  #mainContent .onb-actions-wrap > button,
  #mainContent .onb-action-btn,
  #mainContent .onb-action-primary,
  #mainContent .onb-action-publish {
    flex: 1 1 100% !important;
  }
  #mainContent .sa-panel-actions button {
    font-size: 12.5px !important;
  }
  #mainContent .sfc-tab {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  #mainContent .sh-issues-toolbar h3 {
    font-size: 13px !important;
  }
  #mainContent .pick-tab-group.catalog-hub-subtabs .pick-tab,
  #mainContent .pick-tab-group.sentinel-subtabs .pick-tab,
  #mainContent .pick-tab-group.storefront-hub-subtabs .pick-tab {
    font-size: 11.5px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Warehouse (Agent 4, 2026-05-07)
 *
 * Scope: SECOND-ORDER warehouse-only mobile polish across the 10 nav views
 * (Overview, Inventory Matrix, Pick Lists, Shelf Hub, Containers, Receiving,
 * Activity & History, Returns Stock, Restock Tasks, Open Box Ops).
 *
 * Companion to passes 1/2/3 — does not duplicate their rules. All selectors
 * are scoped to the warehouse views via per-view class prefixes (cpl-, pck-,
 * npl-, plh-, rs-, ret-, wh-, obx-, cc-, ct-, con-, rr-, jarvis-container-,
 * matrix-, inv-) so cross-view bleed is impossible.
 *
 * Cole's complaint this pass addresses: warehouse staff use this section
 * heaviest on iPad/phone — earlier passes covered the global chrome and
 * desktop-shaped tables. This pass goes after the click-INTO surfaces:
 * scan inputs that lose visibility behind keyboard, modals that overflow at
 * 375px, photo upload buttons that wrap awkwardly, qty pills that don't
 * right-align in cards, container manifest tables that crush, and
 * action-button rows that stack badly under a thumb.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ═══ 1. Pick Lists — scan input must stay visible above the keyboard ═══
   * pickConfirmScan and the order-row scan field are the most-tapped inputs
   * in the warehouse. iOS auto-zooms to <16px inputs (forces page resize)
   * AND the soft keyboard pushes the input out of view if not sticky-pinned
   * inside the modal. Force 16px font and let the modal's body scroll
   * independently while the footer (with the input) hugs the bottom. */
  #mainContent .pck-confirm-modal,
  .journey-modal.pck-confirm-modal,
  .journey-modal.pck-done-modal {
    width: min(440px, 94vw) !important;
    max-width: 94vw !important;
    max-height: 90dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .journey-modal.pck-confirm-modal .pck-confirm-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface, #fff) !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    margin: 0 -14px -14px !important;
    z-index: 2 !important;
  }
  #pickConfirmScan,
  input[id^="pickConfirmScan"] {
    min-height: 48px !important;
    font-size: 16px !important; /* prevent iOS auto-zoom */
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }
  .journey-modal.pck-confirm-modal .pck-confirm-btn,
  .journey-modal.pck-done-modal .pck-done-close-btn {
    min-height: 48px !important;
    width: 100% !important;
    font-size: 15px !important;
  }
  .journey-modal.pck-confirm-modal .pck-qty-badge,
  .journey-modal.pck-confirm-modal .pck-item-meta {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Pick-list header / search row — name input + search input were sharing
   * a flex row that wrapped untidily at 375px. Stack them with consistent
   * 16px font (no iOS zoom) and 44px touch targets. */
  #mainContent .cpl-name-input,
  #mainContent .cpl-search,
  #mainContent .plh-date-input {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .cpl-filter-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .cpl-filter-row > * {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* Pick-list table — keep the 2-box-pair child-row indent intact but force
   * the whole table into horizontal scroll so the action col stays reachable.
   * `cpl-action-stack` (Confirm / Skip / Short) was wrapping under the row;
   * the column needs a min-width to keep its buttons tappable. */
  #mainContent .cpl-table {
    min-width: 720px !important;
  }
  #mainContent .cpl-action-stack {
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 96px !important;
  }
  #mainContent .cpl-action-stack > button,
  #mainContent .cpl-confirm-btn,
  #mainContent .cpl-add-item-btn,
  #mainContent .cpl-merge-btn,
  #mainContent .cpl-remove-item-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  /* Right-align numeric qty cells in the picklist table for tabular-nums. */
  #mainContent .cpl-qty-td,
  #mainContent .cpl-loc-pill,
  #mainContent .cpl-tpb-badge {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* ═══ 2. New Pick List modal — search results, address form, custom item ═══
   * The "New Pick List" flow opens a tall modal with multiple .npl-section
   * blocks. At 375px the search-result rows (npl-search-row inside
   * npl-search-results) have a left "title" column + right "add" button that
   * collide. Stack at narrow widths. */
  #mainContent .npl-search-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  #mainContent .npl-search-item-title {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .npl-add-btn,
  #mainContent .npl-add-all-btn,
  #mainContent .npl-2box-btn,
  #mainContent .npl-remove-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  /* Manual-entry / custom-item / address sections — give every input the
   * 16px floor so the keyboard doesn't fight zoom. */
  #mainContent .npl-custom-form input,
  #mainContent .npl-custom-form select,
  #mainContent .npl-addr-form input,
  #mainContent .npl-addr-form select,
  #mainContent .npl-addr-form textarea,
  #mainContent #nplSearchInput,
  #mainContent #nplInvSku,
  #mainContent #nplInvQty,
  #mainContent #nplInvOrder,
  #mainContent #nplInvCustomer,
  #mainContent #nplInvNote,
  #mainContent #nplCustomName,
  #mainContent #nplCustomQty,
  #mainContent #nplCustomNote,
  #mainContent #nplAddrName,
  #mainContent #nplAddrLine1,
  #mainContent #nplAddrLine2,
  #mainContent #nplAddrCity,
  #mainContent #nplAddrState,
  #mainContent #nplAddrZip,
  #mainContent #nplAddrCountry,
  #mainContent #nplAddrNote {
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  /* L/W/H/Weight quad — 2-col grid is more thumb-friendly than 4 squashed */
  #mainContent .npl-custom-form .field.npl-sm {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  /* Address city/state/zip row — same 2-col stack at narrow widths. */
  #mainContent .npl-addr-form .field.npl-xs,
  #mainContent .npl-addr-form .field.npl-grow {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  #mainContent .npl-section {
    padding: 12px !important;
  }
  /* Modal scroll surface — give npl modals max-height so worker can always
   * reach the action footer without scrolling outside the modal. */
  #mainContent .npl-modal-scroll {
    max-height: calc(90dvh - 120px) !important;
  }

  /* ═══ 3. Shelf-Hub subtabs — already inherit pass-1 .pick-tab-group rules
   * but the wrapper has 3 tabs (Inventory / Bin Map / Locations). Make them
   * equal-width and 40px high so warehouse-staff thumbs hit consistently. */
  #mainContent .pick-tab-group.shelf-hub-subtabs {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .pick-tab-group.shelf-hub-subtabs .pick-tab {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-height: 40px !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }

  /* ═══ 4. Inventory Matrix — click-into per-SKU row + sticky qty cells ═══
   * The matrix-table has many warehouse columns (Lightning + S18+S19+...)
   * that scroll horizontally. The total/grand-total cells already use
   * font-variant-numeric. Two SECOND-ORDER issues to fix:
   *  (a) shelf chips inside `.inv-shelves-cell` were stacking vertically,
   *      producing very tall rows on phone. Compact horizontally with
   *      max-height + scroll.
   *  (b) `.inv-totals-row-top/-bottom` had label cells that wrapped to 3
   *      lines on phone. Force ellipsis. */
  #mainContent .matrix-table {
    min-width: 900px !important; /* scroll the parent, don't crush cols */
  }
  #mainContent .inv-shelves-cell {
    max-height: 64px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: wrap !important;
    display: flex !important;
    gap: 4px !important;
  }
  #mainContent .inv-totals-label,
  #mainContent .inv-totals-label-sm {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important;
  }
  #mainContent .matrix-qty {
    font-variant-numeric: tabular-nums;
    text-align: right !important;
  }
  /* In-stock toggle pill — touch target */
  #mainContent .inv-instock-toggle {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }

  /* ═══ 5. Containers (logistics) — manifest tables + click-into card ═══
   * Container detail row classes: con-row / con-code-link / container-status.
   * Inside the click-in: ct-table is the manifest, jarvis-container-intel-*
   * holds the cascade banner. The manifest at 375px crushed the SKU/Qty cols.
   * Force horizontal scroll + min-width, and make the container-status pill
   * never wrap. */
  #mainContent .ct-table {
    min-width: 720px !important;
  }
  #mainContent .ct-fullwidth {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .container-status,
  #mainContent .con-code-link {
    white-space: nowrap !important;
  }
  /* Container intel header — title + stats wrap, urgency bar full-width */
  #mainContent .jarvis-container-intel-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  #mainContent .jarvis-container-intel-stats {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }
  #mainContent .jarvis-container-intel-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .jarvis-container-intel-urgency-bar {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .jarvis-container-intel-cascade-banner {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
  }
  #mainContent .jarvis-container-intel-badge {
    white-space: nowrap !important;
  }
  /* Reorder-recommendations table — wide, stat tiles must not wrap awkwardly */
  #mainContent .rr-stat-total,
  #mainContent .rr-stat-critical,
  #mainContent .rr-stat-high,
  #mainContent .rr-stat-needs {
    padding: 10px 12px !important;
    min-height: 64px !important;
  }
  #mainContent .rr-export-group {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .rr-pagination-btns {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  /* ═══ 6. Receiving Gateway — 2 big intake cards + photo upload ═══
   * The gateway uses .wh-scanner-* classes (toolbar/video/reticle/status) and
   * the receive-confirmation modal uses .wh-reason-select. SECOND-ORDER:
   * scanner reticle was clipping at 375px and the reason-select was 14px
   * font (iOS zoom). */
  #mainContent .wh-scanner-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .wh-scanner-video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }
  #mainContent .wh-scanner-status {
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
  }
  #mainContent .wh-reason-select {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  #mainContent .wh-grid-search {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* ═══ 7. Returns Stock — Confirm/Move/Trash modals (inline-styled) ═══
   * All three returns modals (rs-confirm-receipt-modal, rs-move-modal,
   * rs-trash-modal) are built with inline styles. Pass 3 already addressed
   * the desktop-thinned rows. The MODAL bodies still have desktop-padding
   * + select fonts that trigger iOS zoom. Override at the modal-level.
   *
   * The modals attach directly to <body>, not #mainContent, so selectors are
   * unprefixed but ID-scoped. */
  #rs-confirm-receipt-modal > div,
  #rs-move-modal > div,
  #rs-trash-modal > div {
    padding: 16px !important;
    border-radius: 12px !important;
    max-height: 90dvh !important;
  }
  #rs-confirm-cond,
  #rs-confirm-shelf,
  #rs-confirm-note,
  #rs-move-wh,
  #rs-move-shelf,
  #rs-move-reason,
  #rs-trash-reason,
  #rs-trash-note {
    font-size: 16px !important;
  }
  /* Photo upload row inside Confirm Receipt — button + status text wrapped
   * awkwardly. Make it stack: button full-width, status below. Thumbs
   * container scrolls horizontally to keep modal short. */
  #rs-confirm-photos-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
  #rs-confirm-photos-status {
    display: block !important;
    margin-top: 6px !important;
    font-size: 11px !important;
  }
  #rs-confirm-photos-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  #rs-confirm-photos-thumbs > * {
    flex: 0 0 auto !important;
  }
  /* Action button row (Cancel + Confirm/Move/Trash) — wrap + equal share
   * + 48px touch target. Inline-style had justify-content:flex-end which
   * pinned both to right; on phone we want full-width primary, secondary
   * below or beside. */
  #rs-confirm-receipt-modal > div > div:last-child,
  #rs-move-modal > div > div:last-child,
  #rs-trash-modal > div > div:last-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }
  #rs-confirm-cancel,
  #rs-move-cancel,
  #rs-trash-cancel {
    flex: 1 1 calc(40% - 4px) !important;
    min-height: 48px !important;
    order: 2 !important; /* push secondary below primary */
  }
  #rs-confirm-submit,
  #rs-move-submit,
  #rs-trash-submit {
    flex: 1 1 100% !important;
    min-height: 48px !important;
    order: 1 !important;
    font-size: 15px !important;
  }
  /* Returns stock list — sku-block & summary chevron tap target */
  #mainContent .rs-sku-block {
    padding: 10px 12px !important;
  }
  #mainContent .rs-sku-summary {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  #mainContent .rs-sku-chevron {
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .rs-search-bar input,
  #mainContent .rs-search-bar select {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  #mainContent .ret-filter-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
  /* Hide the kbd-hint on phones — n·r·s·d·p·u·⏎ is desktop muscle memory */
  #mainContent .rs-kbd-hint,
  #rs-confirm-receipt-modal .rs-kbd-hint {
    display: none !important;
  }

  /* ═══ 8. Restock Tasks — task cards with shelf scan + action row ═══
   * View renders into .data-table inside #mainContent. The page-1 generic
   * .data-table mobile-card transformation kicks in. SECOND-ORDER: the
   * action button cluster (Mark Restocked / Cancel) wraps under task title,
   * which is correct, but they were min-height:0 inline. Force 40px+ and
   * full-width primary. */
  #mainContent .restock-tasks-view .action-btn
  #mainContent .data-table .action-btn[data-action="complete"],
  #mainContent .data-table .action-btn[data-action="cancel"] {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  #mainContent .data-table .action-btn[data-action="complete"] {
    width: 100% !important;
  }

  /* ═══ 9. Open Box Ops — queue cards + KPI grid + alerts grid ═══
   * obx-* classes own the entire OB Ops view. Pass 1/2/3 didn't reach them.
   * Six SECOND-ORDER issues:
   *  (a) obx-kpi-grid was 4-col forced; on phone needs 2-col.
   *  (b) obx-alerts-grid was 2-col; needs 1-col so SKU/title isn't crushed.
   *  (c) obx-aging-grid was 3-col; needs 1-col.
   *  (d) obx-head was a flex row with title + meta + refresh — wrap + stack.
   *  (e) obx-panel-head action buttons (refresh/filter) need 36px floor.
   *  (f) obx-table needs min-width to scroll horizontally instead of crush. */
  #mainContent .obx-root {
    padding: 0 !important;
    gap: 14px !important;
  }
  #mainContent .obx-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  #mainContent .obx-head-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    flex: 1 1 100% !important;
  }
  #mainContent .obx-head-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11.5px !important;
  }
  #mainContent .obx-head-badge {
    white-space: nowrap !important;
  }
  #mainContent .obx-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #mainContent .obx-kpi {
    padding: 10px 12px !important;
    min-height: 76px !important;
  }
  #mainContent .obx-kpi-value {
    font-size: 20px !important;
  }
  #mainContent .obx-kpi-label {
    font-size: 10.5px !important;
  }
  #mainContent .obx-kpi-sub {
    font-size: 10.5px !important;
  }
  #mainContent .obx-kpi-sparkline {
    max-height: 24px !important;
  }
  #mainContent .obx-alerts-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .obx-alert-card {
    padding: 12px !important;
  }
  #mainContent .obx-alert-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .obx-alert-sku {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .obx-alert-time {
    font-size: 10.5px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  #mainContent .obx-alert-body {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  #mainContent .obx-aging-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #mainContent .obx-aging-card {
    padding: 12px !important;
  }
  #mainContent .obx-aging-card-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .obx-aging-sku {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .obx-aging-days {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent .obx-age,
  #mainContent .obx-age-bar {
    height: 6px !important;
  }
  #mainContent .obx-panel {
    padding: 12px !important;
  }
  #mainContent .obx-panel-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .obx-panel-title {
    font-size: 13px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mainContent .obx-panel-meta {
    font-size: 11px !important;
    flex-wrap: wrap !important;
  }
  #mainContent .obx-refresh-btn,
  #mainContent .obx-drift-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  #mainContent .obx-table {
    min-width: 720px !important;
  }
  #mainContent .obx-panel-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mainContent .obx-wh-card {
    padding: 10px 12px !important;
    min-height: 64px !important;
  }
  #mainContent .obx-webhook-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainContent .obx-drift {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .obx-drift-left,
  #mainContent .obx-drift-right {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .obx-pill {
    white-space: nowrap !important;
  }

  /* ═══ 10. Cycle Count — counting form + variance review ═══
   * cc-* classes — workers count units shelf-by-shelf. SECOND-ORDER: the
   * count-input row had the SKU label + expected qty + count input on one
   * row that crushed at 375px. Stack vertically. The session start-card
   * + closed-card need consistent padding rhythm. */
  #mainContent .cc-container {
    padding: 0 !important;
    gap: 12px !important;
  }
  #mainContent .cc-start-card,
  #mainContent .cc-closed-card,
  #mainContent .cc-counting-header,
  #mainContent .cc-summary,
  #mainContent .cc-review-header {
    padding: 12px !important;
  }
  #mainContent .cc-field-group {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .cc-field-group > * {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .cc-input,
  #mainContent .cc-select {
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  #mainContent .cc-count-table,
  #mainContent .cc-review-table {
    min-width: 560px !important;
  }
  #mainContent .cc-count-input {
    min-height: 40px !important;
    font-size: 16px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent .cc-step-pill {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
  #mainContent .cc-progress {
    gap: 4px !important;
  }
  #mainContent .cc-progress-track {
    height: 8px !important;
  }
  #mainContent .cc-progress-label {
    font-size: 11px !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent .cc-variance-badge {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
  }
  #mainContent .cc-review-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .cc-review-actions > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
  }
  #mainContent .cc-sku-cell {
    overflow-wrap: anywhere !important;
  }
  #mainContent .cc-expected {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* ═══ 11. Inventory Activity & History — sub-tab + timeline ═══
   * inv-log-subtabs (Activity / History) inherits pass-1 pick-tab-group.
   * Two SECOND-ORDER issues: (a) the wrapper has only 2 tabs so they can
   * be wider, (b) the timeline rows in inventory-history have wide tab-btn
   * pills. */
  #mainContent .pick-tab-group.inv-log-subtabs .pick-tab {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 40px !important;
  }
  #mainContent .tab-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  #mainContent .u-table {
    min-width: 560px !important;
  }

  /* ═══ 12. Warehouse Overview — twocol layout + refresh pill ═══
   * wh-overview-twocol is grid-2 desktop. Force single column on phone,
   * make the refresh pill a full touch target. */
  #mainContent .wh-overview-twocol {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #mainContent .wh-refresh-pill {
    min-height: 36px !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #mainContent .wh-refresh-icon {
    width: 14px !important;
    height: 14px !important;
  }

  /* ═══ 13. Generic warehouse — qty pill alignment + numeric badges ═══
   * Right-align numeric "qty" / "count" badges across the warehouse views
   * so list scanning is fast. Apply tabular-nums everywhere a count shows. */
  #mainContent .pck-qty-badge,
  #mainContent .obx-kpi-value,
  #mainContent .obx-aging-days,
  #mainContent .matrix-qty,
  #mainContent .matrix-total,
  #mainContent .cc-expected,
  #mainContent .cc-count-input,
  #mainContent .cc-variance-badge,
  #mainContent .rr-po-val,
  #mainContent .rr-td-r,
  #mainContent .rr-td-r-bold,
  #mainContent .rr-td-r-muted {
    font-variant-numeric: tabular-nums;
  }
  /* Long shelf codes (e.g. LIGHTNING-A4-S22) — let them ellipsis instead
   * of overflowing the row. Affects shelf chips inside picklists, returns,
   * cycle-count, OB ops. */
  #mainContent .cpl-shelf-td,
  #mainContent .cpl-loc-pill,
  #mainContent .obx-wh-card,
  #mainContent .cc-sku-cell {
    overflow-wrap: anywhere !important;
  }

  /* ═══ 14. Warehouse-role view differences ═══
   * When role=warehouse the data-role="warehouse" attribute is on body. UI
   * already hides admin-only controls server-side, but a few mobile-only
   * tweaks help warehouse staff: bigger primary action, no tiny secondaries. */
  body[data-role="warehouse"] #mainContent .action-btn,
  body[data-role="warehouse"] #mainContent .btn-secondary,
  body[data-role="warehouse"] #mainContent .filter-btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }
  body[data-role="warehouse"] #mainContent .cpl-action-stack > button {
    min-height: 40px !important; /* tighter than admin's 36px */
  }
}

/* Pass 4 — narrow-viewport (<=420px) refinements (sibling block, not nested,
 * for old Safari compat). Pure phone widths where the per-view collapse
 * needs to be more aggressive than the 768px tier. */
@media (max-width: 420px) {
  /* Pick-list table — let it scroll instead of compressing further */
  #mainContent .cpl-table {
    min-width: 640px !important;
  }
  /* OB KPI grid — drop to 1-col so the value is readable instead of clipped */
  #mainContent .obx-kpi-grid {
    grid-template-columns: 1fr !important;
  }
  /* Container intel stats — single column for clarity */
  #mainContent .jarvis-container-intel-stats {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  /* Reorder-recs stat tiles — 1-col stack at narrow widths */
  #mainContent .rr-stat-total,
  #mainContent .rr-stat-critical,
  #mainContent .rr-stat-high,
  #mainContent .rr-stat-needs {
    flex: 1 1 100% !important;
  }
  /* Shelf-hub subtabs to 2-col so labels don't truncate */
  #mainContent .pick-tab-group.shelf-hub-subtabs .pick-tab {
    flex: 1 1 calc(50% - 6px) !important;
  }
}



/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — Marketing+Finance (Agent 5, 2026-05-07)
 *
 * Scope: Marketing (overview, paid-channels, organic-attribution, mkt-seo,
 * mkt-initiatives) + Finance (reports/forecasting/spend/costs, pricing-
 * suggestions, nexus) + Analytics-hub. Second-order issues that survived
 * passes 1–3, mostly inline-style escapes:
 *
 *   1. Income Statement & Monthly-P&L tables: `position:sticky;left:0`
 *      on first <th>/<td> needs the parent to be a hard horizontal
 *      scroller — without it the sticky wires onto the page and the
 *      header row jitters under the app-header on scroll.
 *   2. Pure-CSS bar charts (cf-bar-chart, mo-sparkline, cashflow viewer
 *      cumulative bars) — bars compress to <1px when the chart container
 *      goes below 320px. Force a minimum bar width and let the chart
 *      scroll horizontally if needed.
 *   3. Inline-style grid blocks: monthly-pl `pl-row-2`, mi-edit-modal
 *      `1fr 1fr`, accounting-overview `wh-overview-twocol`, expense
 *      detail `ii-detail-grid` — collapse to single-column.
 *   4. `table-scroll` with inline max-height creates nested scroll
 *      containers (vertical inside horizontal). On mobile this fights
 *      the page scroll; release the cap on small viewports.
 *   5. SEO `seo-gsc-grid` 2-col; `seo-ai-card` flex header where the
 *      right-side meta wraps awkwardly — stack on phone.
 *   6. Currency formatting: long values like $1,234,567.89 in narrow
 *      mono columns. Already partially handled (pass-3 §9) — extend to
 *      the table cells the prior pass missed (.is-table, .view-table).
 *   7. Revenue-forecast `rf-horizon-tabs` (3-button strip) was untouched
 *      by previous passes; it shares the row with a refresh icon and
 *      needs equal-width pills.
 *   8. Initiatives form (`mi-add-grid`) was a multi-col grid using its
 *      own scoped CSS; on mobile it cramps. Force one-column.
 *   9. `pricing-suggestions` verdict badge cell + the `Apply` button
 *      had different heights from the verdict select — touch-target
 *      parity.
 *  10. The `mi-edit-modal` inline-style modal (built dynamically with
 *      style.cssText) needs viewport-fit padding + body-level button
 *      stack.
 *  11. Drill-down drawer (`is-drawer`) is `width:min(640px,95vw)` which
 *      is fine, but the head/body padding eats useful pixels at 375px.
 *  12. Chart label clip prevention — SVG `<text>` near the right edge
 *      of monthly-pl sparkline; restrict viewBox via padding.
 *
 * Companion to passes 1–3 — every selector is scoped to the views
 * above and never touches the desktop CSS. No prior-pass selector is
 * duplicated here; only NEW surfaces.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ═══ 1. Income Statement — wide P&L table needs hard horizontal scroller
   * The .is-table is rendered without an explicit scroll wrapper inside
   * the page-header siblings. The sticky-left first column expects an
   * overflow-x:auto ancestor; without it the sticky wires onto the page
   * and the table can blow past the right edge. Wrap is provided here
   * by forcing `display:block` + `overflow-x:auto` on the table itself
   * (works because .is-table is the outermost grid element). */
  #mainContent .is-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    border-radius: 8px !important;
  }
  /* Header row needs to lay out properly when table-element layout is
   * forced to display:block — restate as table for the inner grouping. */
  #mainContent .is-table thead,
  #mainContent .is-table tbody,
  #mainContent .is-table tfoot {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    min-width: 880px !important;
  }
  /* Tighten cell padding so 13 columns survive at min-width:880 */
  #mainContent .is-table thead th,
  #mainContent .is-table tbody td {
    padding: 6px 6px !important;
    font-size: 11.5px !important;
  }
  /* First-column sticky still desired — re-anchor against the new
   * scroll context (the table itself). Background must be opaque. */
  #mainContent .is-table thead th:first-child,
  #mainContent .is-table tbody td:first-child {
    min-width: 140px !important;
    max-width: 160px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Year picker row — wrap, equal heights */
  #mainContent .is-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #mainContent .is-year-picker select {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
  }
  /* Drill-down drawer — tighten internal padding so message body breathes */
  #mainContent + .is-drawer-backdrop ~ .is-drawer,
  .is-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .is-drawer-head {
    padding: 12px 14px !important;
  }
  .is-drawer-body {
    padding: 12px 14px !important;
  }
  .is-drawer-close {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ═══ 2. Monthly P&L — inline pl-row-2 1fr/1fr collapse + KPI cards ═══
   * The view defines its own 768 break (kpi-grid-4 → 2-col, pl-kpi-5 →
   * 2-col), but the inline-style `pl-row-2` (used for chart-card pairs)
   * was ONLY collapsed inside its own <style> block — those selectors
   * win at desktop but compete with the inline `style="grid-template…"`
   * at mobile because of specificity. Force-collapse here. */
  #mainContent .pl-row-2,
  #mainContent div[style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:24px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Sparkline SVG margins — labels at the right edge of last data point
   * were clipping. Add right-padding to the wrapping <div> via the
   * common card class. */
  #mainContent .pl-row-2 svg,
  #mainContent .acc-grid-2 svg {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Daily-data list inside cards — limit growth so multiple cards
   * stay manageable on phone. */
  #mainContent .pl-row-2 div[style*="max-height:180px"] {
    max-height: 140px !important;
  }

  /* ═══ 3. Cashflow + Cashflow-Forecast — bar chart min-width ═══
   * .cf-bar-chart is a flex row of pure-CSS bars. On a 375px viewport
   * with 30-day data, each bar collapses to ~12px which makes the chart
   * unreadable. Let the chart wrapper scroll horizontally and force a
   * sensible minimum width on the inner grid. */
  #mainContent .cf-bar-chart,
  #mainContent .cf-bar-chart-lg {
    min-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  /* Long forecasts (60d/90d) need horizontal scroll */
  #mainContent .cf-bar-chart-lg > * {
    flex-shrink: 0 !important;
  }
  /* Cashflow indicator grid — view's own breakpoint goes 4→2; force 2 here
   * for safety against inline grid-template overrides. */
  #mainContent .cf-indicator-grid,
  #mainContent div.cf-indicator-grid[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #mainContent .cf-chart-section {
    margin: 12px 0 !important;
  }
  #mainContent .cf-chart-label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  /* ═══ 4. Accounting Overview — nested table-scroll + 2-col layout ═══
   * Several sections wrap their inner data-table in
   * `<div class="table-scroll" style="max-height:340px;overflow-y:auto">`.
   * On a phone where the page already scrolls, a nested vertical scroller
   * inside a horizontal scroller fights touch — relax the cap so the
   * page itself scrolls. (Nested-scroll = 2 scroll surfaces stacked,
   * users get stuck.) */
  #mainContent .table-scroll[style*="max-height:340px"],
  #mainContent .table-scroll[style*="max-height: 340px"],
  #mainContent .table-scroll[style*="max-height:400px"],
  #mainContent .table-scroll[style*="max-height: 400px"],
  #mainContent .table-scroll[style*="max-height:360px"],
  #mainContent .table-scroll[style*="max-height: 360px"],
  #mainContent .table-scroll[style*="max-height:280px"],
  #mainContent .table-scroll[style*="max-height: 280px"],
  #mainContent .table-scroll[style*="max-height:200px"],
  #mainContent .table-scroll[style*="max-height: 200px"] {
    max-height: none !important;
    overflow-y: visible !important;
  }
  /* Warehouse two-column inline grid — collapse */
  #mainContent .wh-overview-twocol,
  #mainContent div[class="wh-overview-twocol"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 8px 0 !important;
  }

  /* ═══ 5. SEO view — gsc grid + ai-card row ═══ */
  /* GSC top-queries + top-pages 2-col grid → 1-col on phone */
  #mainContent .seo-gsc-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* AI search visibility cards — left/right flex header stacks at narrow */
  #mainContent .seo-ai-card {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #mainContent .seo-ai-card-left,
  #mainContent .seo-ai-card-right {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mainContent .seo-ai-card-right {
    justify-content: flex-start !important;
  }
  /* Ellipsis cells should not crush below ~120px */
  #mainContent .seo-text-ellipsis,
  #mainContent .seo-text-ellipsis-wide {
    max-width: 220px !important;
  }
  /* Section headers — tighter on mobile so 2-line headers stay 1-line */
  #mainContent .seo-section-header,
  #mainContent .seo-section-header-flex {
    padding: 8px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }
  #mainContent .seo-section-header-flex {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mainContent .seo-toolbar-note {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }
  /* Inner table-scroll already handled by §4 max-height release */

  /* ═══ 6. Marketing Initiatives — add grid + edit modal + status cell ═══ */
  /* The inline `mi-add-grid` was a multi-col CSS-grid in its own block.
   * Force single-column at <=768. */
  #mainContent .mi-add-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainContent .mi-add-input,
  #mainContent .mi-status-select {
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* iOS no-zoom */
  }
  #mainContent .mi-add-btn-row {
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  #mainContent .mi-add-submit,
  #mainContent .mi-add-cancel {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
  }
  /* Edit modal — built with inline styles via JS; target by id */
  #mi-edit-modal {
    padding: 12px !important;
  }
  #mi-edit-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 12px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  /* Inner 1fr/1fr form grid in modal */
  #mi-edit-modal > div > div[style*="grid-template-columns:1fr 1fr"],
  #mi-edit-modal > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Footer button row */
  #mi-edit-modal > div > div[style*="justify-content:flex-end"],
  #mi-edit-modal > div > div[style*="justify-content: flex-end"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mi-edit-modal > div > div[style*="justify-content:flex-end"] > button,
  #mi-edit-modal > div > div[style*="justify-content: flex-end"] > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
  }
  /* Initiatives table cells — ellipsis name + small notes */
  #mainContent .mi-name-cell {
    max-width: 200px !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .mi-row-notes {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
  }
  #mainContent .mi-status-select {
    margin-top: 4px !important;
  }
  #mainContent .mi-edit-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
  #mainContent .mi-channel-pill {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
  }

  /* ═══ 7. Revenue Forecast — horizon-tabs equal pills ═══
   * The view's own <style> covers `.kpi-grid-4` and `.rf-cards-row` at
   * 768 but never sized .rf-horizon-tabs row. The 3 buttons wrap onto
   * two lines under a 32px refresh icon making the header asymmetric. */
  #mainContent .rf-horizon-tabs {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  #mainContent .rf-horizon-btn {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  /* Card-row pair — view collapses with `.rf-cards-row { 1fr }` already.
   * Tighten card padding so triple-stack on phone isn't a tower. */
  #mainContent .rf-card {
    padding: 14px !important;
  }
  #mainContent .rf-card-base {
    font-size: 22px !important;
  }
  #mainContent .rf-range-bar {
    margin-top: 8px !important;
  }
  #mainContent .rf-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mainContent .rf-title {
    font-size: 18px !important;
  }
  #mainContent .rf-subtitle {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* ═══ 8. Pricing Suggestions — verdict select + apply equal heights ═══
   * Pass-3 already set `#ps-filters > #ps-verdict, > #ps-sku` to 100%
   * width / 40px. The inline native `<select>` height varies per-OS
   * (iOS ~32, Android ~40); pin a hard min-height. Apply button was
   * 36px from `btn-secondary`; bump to match the row. */
  #mainContent #ps-verdict,
  #mainContent #ps-sku {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: var(--surface) !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(-45deg, transparent 50%, var(--text-muted) 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px !important;
  }
  #mainContent #ps-sku {
    background: var(--surface) !important;
    padding-right: 12px !important;
  }
  /* Status-pill row — pass-3 set them 50% each. Tabs of 5 (pending/
   * approved/rejected/ignored/applied) wrap to 3 rows with that rule;
   * shift to 33% so it's 2 rows of 3+2. Override #ps-tabs > button. */
  #mainContent #ps-tabs > button {
    flex: 1 1 calc(33.333% - 6px) !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }
  /* Pricing table — verdict badge + currency cells */
  #mainContent #ps-body td .mono,
  #mainContent #ps-body td[style*="text-align:right"] {
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }
  /* Drill-link icon button if any (Apply / Reject in cells) — make
   * touchable. */
  #mainContent #ps-body button {
    min-height: 32px !important;
  }

  /* ═══ 9. Organic & Attribution — ROAS-trend mount + 6-col table ═══
   * The mount div has fixed inline `padding:12px` which is fine; the
   * issue is the inner roas-trend module (rendered by roas-trend.js)
   * uses inline-styled SVG charts with a fixed left axis. Shrink mount
   * padding so the chart gets more pixels. */
  #mainContent #roasTrendMount {
    padding: 8px !important;
  }
  /* Tfoot total row — keep tabular-nums alignment */
  #mainContent .table-container tfoot td.mono {
    font-variant-numeric: tabular-nums !important;
  }

  /* ═══ 10. Marketing Overview — channel-grid stat-cards ═══
   * The 2nd stats-row (margin-top:8px) renders one stat-card per ad
   * platform (Meta/Google/Pinterest/Awin). On a 375px viewport pass-1's
   * 2-col grid puts platform names + stat-detail (a 2-line block) at
   * borderline-readable. Tighten internal text. */
  #mainContent .stats-row[style*="margin-top:8px"] .stat-card,
  #mainContent .stats-row[style*="margin-top: 8px"] .stat-card {
    padding: 10px 12px !important;
    min-height: 88px !important;
  }
  #mainContent .stats-row[style*="margin-top:8px"] .stat-detail,
  #mainContent .stats-row[style*="margin-top: 8px"] .stat-detail {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  /* Marketing freshness/CAPI strip — equal chip heights */
  #mainContent .mo-freshness-strip {
    gap: 6px !important;
  }
  #mainContent .mo-freshness-chip {
    font-size: 10.5px !important;
    padding: 3px 9px !important;
  }
  #mainContent .mo-capi-health {
    gap: 8px 12px !important;
    font-size: 10.5px !important;
    padding: 8px 10px !important;
  }
  #mainContent .mo-divergence-banner {
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 8px 0 !important;
  }
  /* mo-status-grid — channel reconnect tiles */
  #mainContent .mo-status-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainContent .mo-reconnect-steps {
    gap: 6px !important;
  }
  #mainContent .mo-reconnect-step {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  /* Sparkline within hero stat-card — keep height bounded */
  #mainContent .mo-sparkline {
    margin-top: 6px !important;
    overflow: hidden !important;
  }

  /* ═══ 11. Refunds + Invoice Inbox detail rows + tab strip ═══ */
  #mainContent .refund-row {
    padding: 12px !important;
  }
  #mainContent .refund-detail-row {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  /* Invoice inbox tabs */
  #mainContent .ii-tab-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ii-tab {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  #mainContent .ii-tab-count {
    font-size: 10.5px !important;
    opacity: 0.75 !important;
  }
  /* Detail panel grid — 2-col field grid stacks on phone */
  #mainContent .ii-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainContent .ii-detail {
    padding: 12px !important;
  }
  #mainContent .ii-detail-field {
    font-size: 12.5px !important;
  }
  #mainContent .ii-detail-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #mainContent .ii-detail-actions > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 40px !important;
  }
  #mainContent .ii-pdf-btn {
    min-height: 40px !important;
  }
  /* Filter row */
  #mainContent .ii-filter-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Upload zone — keep generous tap target */
  #mainContent .ii-upload-zone {
    padding: 18px 14px !important;
    font-size: 13px !important;
    text-align: center !important;
  }
  /* Selected row highlight */
  #mainContent .ii-row {
    padding: 10px 12px !important;
  }

  /* ═══ 12. Currency / mono cell wrapping — extend pass-3 §9 to .is/.kpi
   * surfaces that pass-3 didn't reach. Keep tabular-nums but allow
   * breaking on overflow as a last resort. */
  #mainContent .is-table .mono,
  #mainContent .is-cell-btn,
  #mainContent .kpi-card .kpi-value,
  #mainContent .nx-kpi-value,
  #mainContent .rf-card-base,
  #mainContent .rf-range-fill {
    font-variant-numeric: tabular-nums;
  }

  /* ═══ 13. KPI grids inside finance/forecast/nexus/analytics-dash ═══
   * Some inner views use `.kpi-grid-4` with their own 768 collapse to
   * 2-col. Reinforce here for consistent gap + pad and ensure no inline
   * variant slips past. */
  #mainContent .kpi-grid-4,
  #mainContent .kpi-grid-3 {
    gap: 8px !important;
  }
  #mainContent .kpi-card {
    padding: 12px !important;
    min-height: 76px !important;
  }
  #mainContent .kpi-card .kpi-label,
  #mainContent .nx-kpi-label {
    font-size: 10.5px !important;
  }
  #mainContent .kpi-card .kpi-value {
    font-size: 20px !important;
  }

  /* ═══ 14. View-table generic — sticky thead + fluid columns ═══
   * monthly-pl + cashflow set `.view-table thead { position:sticky; top:0 }`
   * which conflicts with the app-header. Disable sticky on phones so
   * the page-header doesn't double-bump under a sticky thead under the
   * app-header. */
  #mainContent .view-table thead {
    position: static !important;
  }
  #mainContent .view-table {
    font-size: 12px !important;
  }
  #mainContent .view-table th,
  #mainContent .view-table td {
    padding: 6px 8px !important;
  }

  /* ═══ 15. Empty-state copy + skeleton padding inside scoped views ═══ */
  #mainContent .u-empty-state,
  #mainContent .empty-state {
    padding: 28px 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  #mainContent .skeleton-block.u-input-lg,
  #mainContent .skeleton-block.u-input-sm {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile UX pass 4 — narrow refinement (<=420px) */
@media (max-width: 420px) {
  /* Income statement — collapse first-col further */
  #mainContent .is-table thead th:first-child,
  #mainContent .is-table tbody td:first-child {
    min-width: 110px !important;
    max-width: 130px !important;
    font-size: 11px !important;
  }
  /* Pricing-suggestions tab strip — 2 rows of 2-3 */
  #mainContent #ps-tabs > button {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 11.5px !important;
  }
  /* Initiatives stats-row chip text — tighter at very narrow */
  #mainContent .mi-channel-pill {
    font-size: 10px !important;
  }
  /* Invoice tabs — 2-up at 420 */
  #mainContent .ii-tab {
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 11.5px !important;
  }
  /* Revenue forecast horizon — keep 3-up but smaller */
  #mainContent .rf-horizon-btn {
    font-size: 11.5px !important;
    padding: 6px 4px !important;
  }
  /* Marketing overview platform stat-cards — 1-col at very narrow so the
   * 2-line stat-detail stops overflowing. */
  #mainContent .stats-row[style*="margin-top:8px"],
  #mainContent .stats-row[style*="margin-top: 8px"] {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Mobile UX pass 4 — System+Brief+Reviews+AI Ops + Global (Agent 6,
 * 2026-05-07)
 *
 * Scope: SECOND-ORDER mobile issues that pass 1/2/3 didn't reach. Each
 * fix targets a specific bleed at 375–420px that survived pass 3 because
 * pass 3 focused on container/toolbar/tab-row symmetry; pass 4 reaches
 * into the per-row data layouts and modal/overlay edge cases.
 *
 * Identified by walking brief.js / strategy-command.js / worker-heatmap.js
 * (AI Ops view) / reviews-moderation.js / system.js (Users + Edit modal +
 * Access Matrix) and grepping for class-list patterns that pass-3 missed:
 *   • .mb-ad-perf-grid / .mb-pl-grid / .mb-channel-breakdown — 3-col
 *     metric rows that crammed at 375px
 *   • .mb-focus-item — long task title pushed delete-X off-row
 *   • .mb-hr-emp-list — chip wrap was inheriting flex: nowrap
 *   • .ai-cmd / .ai-cron / .ai-summary — monospace command strings had
 *     white-space:nowrap and broke horizontal scroll
 *   • .sc-stats at <=480px — pass3-component CSS forced 1-col tall stack;
 *     restore 2-col + compress value font for phone
 *   • .sc-evidence pre — long evidence text pushed wide
 *   • .um-modal-actions / .um-modal-field — Edit User modal save/cancel
 *     row did not stack
 *   • .um-portal-url — long URL string overflowed copy button
 *   • .am-cell — ensure cells stay tight inside the access-matrix scroll
 *     so admins can still tap them without zoom
 *   • notification-panel left:right contradiction at 360px max-width
 *   • sidebar drawer width on a 375px viewport
 *
 * Companion to passes 1 / 2 / 3 — does NOT modify their blocks. Selectors
 * are scoped (#mainContent.specific or named classes); no global tag rules.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ═══ 1. Brief — exec-summary metric tile rhythm ═══════════════════════
   * brief.js sets min-height:86px on .exec-summary-metric-card. With 4
   * tiles in a 2x2 grid that's 172px of stat strip plus header/narrative;
   * compress to 72px and let value font drop a hair so the strip is one
   * comfortable scroll-stop, not a screen-eater. */
  #mainContent .exec-summary-metric-card {
    min-height: 72px !important;
    padding: 9px 10px !important;
  }
  #mainContent .exec-summary-metric-value {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  #mainContent .exec-summary-metric-sub {
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }
  /* Exec-summary action items — wrap long bullets neatly */
  #mainContent .exec-summary-action-item {
    align-items: flex-start !important;
    gap: 8px !important;
  }
  #mainContent .exec-summary-action-text {
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  /* ═══ 2. Brief — Ad Performance + P&L grids: 3-col → 1-col ═══════════
   * .mb-ad-perf-grid + .mb-pl-grid render label/value pairs in a 3-col
   * grid template inherited from desktop. At 375px the right-side numbers
   * ($1,234 + 2.4x ROAS + $456) crash into each other. Stack to 1-col
   * with label-on-left/value-on-right rows. */
  #mainContent .mb-ad-perf-grid,
  #mainContent .mb-pl-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 6px !important;
  }
  #mainContent .mb-ad-perf-item,
  #mainContent .mb-pl-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    border-bottom: 1px dotted var(--border, #e3e1db) !important;
  }
  #mainContent .mb-ad-perf-item:last-child,
  #mainContent .mb-pl-item:last-child {
    border-bottom: none !important;
  }
  #mainContent .mb-ad-perf-label,
  #mainContent .mb-pl-label {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mainContent .mb-ad-perf-val,
  #mainContent .mb-pl-val {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ═══ 3. Brief — Channel breakdown rows: name/spend/roas ═══════════════
   * .mb-ch-row is name + spend + roas. Channel name "Google Shopping" can
   * wrap; the ROAS chip on the right needs to stay at the row tail. */
  #mainContent .mb-channel-breakdown {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 6px !important;
  }
  #mainContent .mb-ch-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
    align-items: baseline !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
  }
  #mainContent .mb-ch-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #mainContent .mb-ch-spend,
  #mainContent .mb-ch-roas {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ═══ 4. Brief — Today's Focus row layout ═════════════════════════════
   * .mb-focus-item has check + title + source pill + delete-X on one row.
   * Long task title shoves the delete-X off the right edge. Use grid so
   * the X is anchored at column 4. */
  #mainContent .mb-focus-item {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--border, #e3e1db) !important;
  }
  #mainContent .mb-focus-item:last-child {
    border-bottom: none !important;
  }
  #mainContent .mb-focus-check {
    grid-column: 1 !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .mb-focus-title {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
    font-size: 13px !important;
  }
  #mainContent .mb-focus-source {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 10.5px !important;
    color: var(--text-dim) !important;
    margin-top: 2px !important;
  }
  #mainContent .mb-focus-delete {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mainContent .mb-focus-add {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  #mainContent .mb-focus-input {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  #mainContent .mb-focus-add-btn {
    flex: 1 1 100% !important;
    min-height: 40px !important;
  }

  /* ═══ 5. Brief — Recommended actions + owner action rows + AI chips ══
   * Each line should wrap clean and have a 40px-tall tap target. */
  #mainContent .mb-rec-item {
    padding: 10px 12px !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .mb-owner-action-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 0 !important;
  }
  #mainContent .mb-ai-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  #mainContent .mb-ai-chip {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  /* ═══ 6. Brief — HR salary reminder employee chip list ════════════════ */
  #mainContent .mb-hr-emp-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  #mainContent .mb-hr-emp-chip {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
  }
  #mainContent .mb-hr-body {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #mainContent .mb-hr-stat {
    font-size: 13px !important;
  }

  /* ═══ 7. Brief — stockout row layout (sku 1fr + numbers nowrap) ══════ */
  #mainContent .mb-stockout-row {
    flex-wrap: nowrap !important;
    align-items: baseline !important;
  }
  #mainContent .mb-stockout-sku {
    max-width: none !important;
  }

  /* ═══ 8. AI Ops (Worker Activity AI tab) — command/cron strings wrap ══
   * .ai-cmd + .ai-cron use white-space:nowrap on the desktop. At 375px a
   * 90-char `python3 agents/foo.py --bar` overflows the card and forces a
   * horizontal page scroll. Force wrap; the text is monospace either way
   * so wrap-anywhere is fine. .ai-summary > div nowrap also needs to
   * relax so the summary chips stack instead of pushing one row off
   * screen. */
  #mainContent .ai-row-body .ai-cmd,
  #mainContent .ai-row-body .ai-cron,
  #mainContent .ai-cmd,
  #mainContent .ai-cron {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  #mainContent .ai-summary > div {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
  #mainContent .ai-bucket-header {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }
  #mainContent .ai-row-body {
    min-width: 0 !important;
  }
  #mainContent .ai-row-body > div {
    overflow-wrap: anywhere !important;
  }
  /* Model pill stays compact — pass3 didn't size it */
  #mainContent .ai-model-pill {
    flex-shrink: 0 !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
  }

  /* ═══ 9. Strategy Command — sc-stats keep 2-col on phone ════════════
   * The view's own <=480px rule forces .sc-stats to 1fr (single tall
   * column) — 4 tall cards = ~340px of stat block before the user sees
   * a recommendation card. Override to keep 2x2 on phone with a smaller
   * value font. The .sc-stat-value 28px also has to drop. */
  #mainContent .sc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  #mainContent .sc-stat {
    padding: 10px 12px !important;
    min-height: 0 !important;
    border-radius: 8px !important;
  }
  #mainContent .sc-stat-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
  #mainContent .sc-stat-label {
    font-size: 10.5px !important;
    letter-spacing: 0.3px !important;
    margin-top: 2px !important;
  }
  /* Long evidence dumps overflow horizontally — wrap + scroll vertically */
  #mainContent .sc-evidence {
    padding: 10px 12px !important;
    overflow-x: auto !important;
  }
  #mainContent .sc-evidence pre {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    font-size: 11px !important;
  }
  #mainContent .sc-toggle {
    min-height: 36px !important;
    padding: 6px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ═══ 10. Reviews — modal field rhythm + status badge legibility ═════ */
  #rmModal .rm-modal-card .rm-stars {
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }
  #mainContent .rm-status-badge {
    display: inline-block !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }
  /* Reviews row body — the rm preview cell uses nowrap+ellipsis. Allow
   * the title row above it to wrap so the card doesn't look truncated. */
  #mainContent .rm-preview {
    max-height: 60px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
  /* Eligibility checkbox row — bigger tap target */
  #mainContent .rm-elig-toggle,
  #mainContent .rm-elig-select {
    width: 18px !important;
    height: 18px !important;
  }

  /* ═══ 11. System — Edit-User modal field rhythm + action stack ═══════
   * .um-modal-actions sits at the bottom of the modal with Cancel + Save
   * side-by-side. On 375px Save's "Save Changes" + Cancel's "Cancel" =
   * tight, but the bigger fix is .um-modal-field (label + input pair)
   * needs full-width inputs with iOS-zoom-safe 16px font. */
  .journey-overlay .um-modal-field,
  #mainContent .um-modal-field {
    margin-bottom: 12px !important;
  }
  .journey-overlay .um-modal-field input,
  .journey-overlay .um-modal-field select,
  #mainContent .um-modal-field input,
  #mainContent .um-modal-field select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .journey-overlay .um-modal-actions,
  #mainContent .um-modal-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }
  .journey-overlay .um-modal-cancel,
  .journey-overlay .um-modal-save,
  #mainContent .um-modal-cancel,
  #mainContent .um-modal-save {
    flex: 1 1 100% !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
  /* Save button on top, cancel below — common iOS confirmation pattern */
  .journey-overlay .um-modal-save,
  #mainContent .um-modal-save {
    order: 1 !important;
  }
  .journey-overlay .um-modal-cancel,
  #mainContent .um-modal-cancel {
    order: 2 !important;
  }

  /* ═══ 12. System — Portal URL row: long URL + copy button stack ══════ */
  #mainContent .um-portal-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  #mainContent .um-portal-label {
    flex: 1 1 100% !important;
    font-size: 12px !important;
  }
  #mainContent .um-portal-url {
    flex: 1 1 100% !important;
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    padding: 6px 8px !important;
    background: var(--surface-2) !important;
    border-radius: 4px !important;
  }
  #mainContent .um-portal-copy-btn {
    flex: 1 1 100% !important;
    min-height: 40px !important;
  }

  /* ═══ 13. System — Access Matrix cells inside table-scroll ═══════════
   * .am-cell stays 32x28 on desktop. The matrix has 6 cols (admin /
   * internal / warehouse / supply-chain / accounting / external) × N
   * rows; on a 375px screen the header cell + 6 toggles must scroll
   * horizontally. Keep cell width compact + ensure the cell tap target
   * is at least 32px and the surrounding TD has no extra padding that
   * fights the scroll. */
  #mainContent .am-cell {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  #mainContent .am-cell:hover {
    transform: none !important; /* avoid layout jump in tight grids */
  }

  /* ═══ 14. System — Create New User form — pin reveal + msg row ══════ */
  #mainContent .um-form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  #mainContent .um-form-group {
    width: 100% !important;
    min-width: 0 !important;
  }
  #mainContent .um-msg {
    font-size: 12px !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
  }

  /* ═══ 15. Worker Heatmap — sticky day-label column on horizontal scroll
   * .wh-grid is `display:grid` with `width:max-content` inside an
   * .wh-grid-wrap that scrolls horizontally. The first column shows day
   * labels (Mon/Tue/Wed); when the user scrolls right to see hour-23
   * cells, the day labels disappear off-left. Pin the day-label cell
   * sticky so it's always visible. */
  #mainContent .wh-grid {
    position: relative !important;
  }
  #mainContent .wh-day-label {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: var(--surface, #fff) !important;
    padding-right: 6px !important;
    box-shadow: 2px 0 6px -3px rgba(0, 0, 0, 0.15) !important;
  }
  /* Hour labels row needs same sticky treatment to align */
  #mainContent .wh-hour-labels {
    font-size: 10px !important;
    overflow: visible !important;
  }
  #mainContent .wh-legend {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11px !important;
  }
  #mainContent .wh-legend-cell {
    width: 16px !important;
    height: 16px !important;
  }

  /* ═══ 16. Alerts — pending-counter chip + body wrap ══════════════════
   * pass-3 sized .alerts-row but not the .alerts-row-pending counter
   * chip that floats at row-end. Force a min-width so single-digit "3"
   * still reads as a chip, and let it shrink-wrap to row-tail. */
  #mainContent .alerts-row-pending {
    flex-shrink: 0 !important;
    min-width: 32px !important;
    text-align: center !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
  #mainContent .alerts-row-body {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  #mainContent .alerts-domain-count {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
  }
  #mainContent .alerts-domain-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #mainContent .alerts-push-dot {
    flex-shrink: 0 !important;
    width: 10px !important;
    height: 10px !important;
  }

  /* ═══ 17. Global — Sidebar drawer at 375px ═══════════════════════════
   * Existing .sidebar mobile rule lives at line 1016 of pass-1. At 375px
   * a 100vw sidebar feels heavy and the user can't peek the page behind.
   * Cap at 88vw / 320px so a tappable backdrop strip remains. */
  .sidebar.open,
  .sidebar.mobile-open,
  .sidebar[aria-expanded="true"] {
    width: min(88vw, 320px) !important;
    max-width: 320px !important;
  }
  /* Sidebar internal scroll — when nav has many items it must scroll
   * inside without dragging the page behind */
  .sidebar nav,
  .sidebar .sidebar-content
  .sidebar > ul {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  /* Active sidebar item — clearer highlight on dark mode */
  .sidebar a.active,
  .sidebar .nav-item.active,
  .sidebar [aria-current="page"] {
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    border-left: 3px solid var(--accent) !important;
  }

  /* ═══ 18. Global — Notification panel + bell badge positioning ══════
   * pass-3 set max-height; pass-1 set width:calc(100vw-24px) max-width
   * 360px with both left:12 + right:12 — that combo over-constrains.
   * Keep the right-anchored placement and let max-width win. */
  .notification-panel {
    left: auto !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: 360px !important;
    border-radius: 10px !important;
  }
  .notification-bell-btn {
    position: relative !important;
  }
  .notification-bell-btn .badge,
  .notification-bell-btn .notification-count,
  /* Bottom-nav active-tab badge above icon */
  .mobile-bottom-nav .bottom-nav-badge  {
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 18px) !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    border-radius: 8px !important;
  }

  /* ═══ 19. Global — Modal overlay safe-area + scroll-lock ═════════════ */
  .journey-overlay,
  .modal-overlay {
    padding: 12px !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .journey-overlay .journey-modal,
  .journey-overlay .modal-380,
  .journey-overlay .modal-420 {
    width: 100% !important;
    max-width: 480px !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ═══ 20. Global — Toast safe-area + readability ═════════════════════ */
  #toast-container .toast,
  .toast {
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
  }

  /* ═══ 21. Page transitions — kill jank on view swap ══════════════════
   * Some views animate a fade-in via .view-fade-enter; on slow phones

   * the keyframe can cause a paint stutter. Cap the duration. */
  #mainContent .view-fade-enter
  #mainContent .view-fade-enter-active,
  #mainContent [data-view-transition] {
    animation-duration: 180ms !important;
  }
}

/* Pass 4 — narrow-viewport (<=420px) refinements (sibling block) */
@media (max-width: 420px) {
  /* Brief — exec metric tiles drop to compact */
  #mainContent .exec-summary-metric-card {
    min-height: 64px !important;
    padding: 8px !important;
  }
  #mainContent .exec-summary-metric-value {
    font-size: 17px !important;
  }
  /* Strategy stats tighter */
  #mainContent .sc-stat-value {
    font-size: 18px !important;
  }
  #mainContent .sc-stat {
    padding: 8px 10px !important;
  }
  /* AI summary chips smaller */
  #mainContent .ai-summary {
    font-size: 11px !important;
  }
  #mainContent .ai-summary strong {
    font-size: 12px !important;
  }
  /* Brief P&L / Ad-perf rows even tighter */
  #mainContent .mb-ad-perf-item,
  #mainContent .mb-pl-item {
    padding: 3px 0 !important;
  }
  /* Sidebar slightly narrower */
  .sidebar.open,
  .sidebar.mobile-open,
  .sidebar[aria-expanded="true"] {
    width: 86vw !important;
  }
}

/* Pass 4 — Dark-mode refinements at 375px ─────────────────────────────
 * Some surfaces above use var(--surface, #fff) as a sticky-bg fallback.
 * In dark mode the fallback should be the dark surface, not white. This
 * targets only the new pass-4 sticky/elevated surfaces. */
@media (max-width: 768px) {
  [data-theme="dark"] #mainContent .wh-day-label,
  .dark #mainContent .wh-day-label {
    background: var(--surface, #0d1117) !important;
    box-shadow: 2px 0 6px -3px rgba(0, 0, 0, 0.5) !important;
  }
  [data-theme="dark"] #mainContent .um-portal-url,
  .dark #mainContent .um-portal-url {
    background: var(--surface-2, #161b22) !important;
  }
  [data-theme="dark"] #mainContent .mb-hr-emp-chip,
  .dark #mainContent .mb-hr-emp-chip {
    background: var(--surface-2, #161b22) !important;
    border-color: var(--border, #30363d) !important;
  }
  [data-theme="dark"] #mainContent .mb-ad-perf-item,
  [data-theme="dark"] #mainContent .mb-pl-item,
  .dark #mainContent .mb-ad-perf-item,
  .dark #mainContent .mb-pl-item {
    border-bottom-color: var(--border, #30363d) !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   2026-06 mobile shell polish — fluid swipe + refined header/hamburger
   - overscroll-behavior-x stops the viewport from panning sideways
     during a swipe ("goes all the way over"); overflow-x:hidden alone
     does not stop iOS rubber-band overscroll.
   - header gets a hairline + soft depth shadow so it reads as a pinned
     app bar rather than a flat strip.
   - the hamburger becomes a proper rounded, tactile control.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html,
  body {
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }
  .app,
  .main {
    overscroll-behavior-x: contain;
  }

  /* Pinned app bar: refined surface, hairline, and a soft shadow that
     lifts it above the scrolling content. */
  .header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 8px 20px -16px rgba(0, 0, 0, 0.45) !important;
    z-index: 30 !important;
  }
  .header-left .logo,
  .logo {
    letter-spacing: 0.16em !important;
    font-weight: 700 !important;
  }

  /* Tactile, rounded hamburger control. */
  .header .mobile-menu-btn.icon-btn {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    color: var(--text) !important;
    transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  .header .mobile-menu-btn.icon-btn:hover {
    border-color: var(--border-hover, var(--border)) !important;
  }
  .header .mobile-menu-btn.icon-btn:active {
    transform: scale(0.92) !important;
    background: var(--surface-3, var(--surface-2)) !important;
  }
  .header .mobile-menu-btn.icon-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Match the search/theme icon buttons to the same tactile treatment so the
     header action cluster reads as one cohesive set. */
  .header .shell-search-btn.icon-btn,
  .header .theme-toggle-btn.icon-btn {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  .header .shell-search-btn.icon-btn:active,
  .header .theme-toggle-btn.icon-btn:active {
    transform: scale(0.92) !important;
    background: var(--surface-3, var(--surface-2)) !important;
  }

  /* The drawer rail itself: slightly rounder leading edge + deeper, softer
     shadow so it floats over the dimmed backdrop. */
  .sidebar {
    box-shadow: 6px 0 32px -6px rgba(0, 0, 0, 0.34) !important;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════
   2026-06 mobile Tier-0 polish — iOS zoom-on-focus guard
   Any text field smaller than 16px makes Safari zoom the whole viewport on
   focus, then the user has to pinch back out — the most jarring "this is a
   web page" moment on a phone. This is a STRUCTURAL catch-all so individual
   views (which carry inline font-sizes) can't opt out and reintroduce it.
   Checkboxes/radios/ranges/colors are excluded (they don't zoom and 16px
   would resize them).
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #mainContent input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  #mainContent select,
  #mainContent textarea,
  .search-input,
  .form-input {
    font-size: 16px !important;
  }
}