/* Mobile navigation (≤768px) — the "Bottom tab bar" layout Sam picked on
   2026-10-05 from ten mobile toolbar mock-ups (option 3).

   - Sections move from the top grid to a fixed bottom tab bar; the ones that
     do not fit sit behind "More" (a bottom sheet).
   - The header's text buttons and the toolbar's Parking link fold into a ⋯
     menu beside the avatar.
   - The status tabs become one swipeable row of chips; Tickets / Parking /
     Cards and the Hide-issues switch share the next row.

   Markup: index.html (#header-more, #mnav-tabbar, #mnav-more-sheet).
   Behaviour: fulfillment-mobile-nav.js. Desktop is unchanged. */

.header-more,
.mnav-tabbar,
.mnav-more-backdrop,
.mnav-more-sheet,
.toolbar-toggle-short { display:none; }

@media (max-width:768px) {
  :root { --mnav-bar-h:58px; --mnav-safe-bottom:env(safe-area-inset-bottom, 0px); }
  .app { padding-bottom:calc(var(--mnav-bar-h) + var(--mnav-safe-bottom)); }

  /* ── Header: logo, live status, bell, avatar, ⋯ on one line ── */
  /* Above the tab bar (80) so the ⋯ menu and the bell panel are never under
     it on short screens; below sheets (88+), docks (95) and toasts (100). */
  .header { position:relative; z-index:85; padding:10px 12px; gap:8px; }
  .header.mnav-menu-open { z-index:98; } /* open ⋯ menu also clears the 2FA docks (95) */
  .header-left { min-width:0; gap:8px; }
  .logo { font-size:15px; white-space:nowrap; }
  .logo svg { width:26px; height:26px; flex:none; }
  .realtime-status { white-space:nowrap; }
  .header-right { flex:none; gap:8px; }
  .header-right > .btn { display:none; }
  #user-name { display:none; }
  .header-more { display:block; position:relative; }
  .header-more-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; padding:0;
    border:1px solid var(--border); border-radius:8px;
    background:var(--surface); color:var(--text-muted); cursor:pointer;
  }
  .header-more-btn svg { width:18px; height:18px; }
  .header-more-btn[aria-expanded="true"] { background:var(--surface-2); color:var(--text); }
  .header-more-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .header-more-menu {
    position:absolute; top:calc(100% + 6px); right:0; z-index:200;
    min-width:210px; max-height:calc(100dvh - 64px); overflow-y:auto; padding:6px;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:var(--shadow-lg);
  }
  /* The bell panel hangs from the bottom of the header (which may sit below
     the preview banner) and spans the phone instead of running off the left. */
  .notif-bell { position:static; }
  .notif-panel {
    position:absolute; top:calc(100% + 4px); left:8px; right:8px; width:auto;
    max-height:calc(100dvh - 74px - var(--mnav-bar-h) - var(--mnav-safe-bottom));
  }
  .header-more-menu[hidden] { display:none; }
  .mnav-menu-who { padding:6px 12px 8px; font-size:12px; color:var(--text-muted); }
  .mnav-menu-who strong { display:block; font-size:14px; color:var(--text); }
  .mnav-menu-sep { height:1px; margin:4px 0; background:var(--border); }
  .mnav-menu-item {
    display:flex; align-items:center; gap:10px; width:100%; min-height:40px;
    padding:8px 12px; border:0; border-radius:6px; background:transparent;
    font:500 14px var(--font); color:var(--text); text-align:left; cursor:pointer;
  }
  .mnav-menu-item:hover,
  .mnav-menu-item:focus-visible { background:var(--surface-2); outline:none; }

  /* ── Toolbar: status chips on one swipeable row, controls on the next ── */
  .toolbar {
    flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:8px; padding:8px 12px;
  }
  .toolbar.mnav-toolbar-empty { display:none; }
  .toolbar-left { display:contents; }
  .global-nav { display:none; }
  .filter-tabs {
    flex:1 1 100%; min-width:0; order:0;
    display:flex; flex-wrap:nowrap; gap:6px;
    margin:0 -12px; padding:2px 12px;
    overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    background:transparent; border-radius:0;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .filter-tabs::-webkit-scrollbar { display:none; }
  .filter-tab {
    flex:none; display:inline-flex; align-items:center;
    min-height:34px; padding:6px 12px;
    border:1px solid var(--border); border-radius:999px;
    background:var(--surface); box-shadow:none;
    font-size:13px; font-weight:500; line-height:1.1; white-space:nowrap;
  }
  .filter-tab.active,
  .filter-tab.needs-relisting-tab.active,
  .filter-tab.needs-refund-tab.active {
    background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
  }
  .filter-tab .tab-badge {
    min-width:18px; height:18px; padding:0 6px; margin-left:6px;
    font-size:11px; background:var(--surface-2); color:var(--text-muted);
  }
  .filter-tab .tab-badge.hot { background:#fde68a; color:#92400e; }
  .filter-tab.active .tab-badge,
  .filter-tab.active .tab-badge:not(.zero) { background:rgba(255,255,255,0.22); color:#fff; }
  .mode-toggle { order:1; flex:none; margin-left:0; }
  .mode-btn { min-height:32px; padding:6px 12px; font-size:13px; }
  .assignments-controls { order:2; flex:none; margin-left:0; }
  .toolbar-right { order:3; margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; }
  .toolbar-toggle {
    gap:8px; padding:4px 2px; border:0; border-radius:6px; background:transparent;
    font-size:12px; white-space:nowrap;
  }
  .toolbar-toggle-full { display:none; }
  .toolbar-toggle-short { display:inline; }
  #hide-issues-toggle {
    -webkit-appearance:none; appearance:none;
    position:relative; flex:none; width:34px; height:20px; margin:0;
    border-radius:10px; background:#d1d5db; cursor:pointer;
    transition:background 0.15s;
  }
  #hide-issues-toggle::before {
    content:""; position:absolute; top:2px; left:2px;
    width:16px; height:16px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.25);
    transition:transform 0.15s;
  }
  #hide-issues-toggle:checked { background:#c2410c; }
  #hide-issues-toggle:checked::before { transform:translateX(14px); }
  #hide-issues-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  #parking-direct-link { display:none; } /* listed in the ⋯ menu instead */

  /* ── Bottom tab bar ── */
  .mnav-tabbar {
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    display:grid; grid-template-columns:repeat(var(--mnav-cols, 5), minmax(0, 1fr));
    height:calc(var(--mnav-bar-h) + var(--mnav-safe-bottom));
    padding:4px 4px var(--mnav-safe-bottom);
    background:var(--surface); border-top:1px solid var(--border);
    box-shadow:0 -2px 10px rgba(15,23,42,0.06);
  }
  .mnav-tab {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-width:0; padding:4px 2px; border:0; border-radius:8px; background:transparent;
    font:600 11px/1.1 var(--font); color:var(--text-muted); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-tab svg { width:22px; height:22px; flex:none; }
  .mnav-tab-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mnav-tab.active { color:var(--accent); }
  .mnav-tab:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }

  /* ── "More" sheet ── */
  .mnav-more-backdrop:not([hidden]) {
    display:block; position:fixed; inset:0; z-index:96;
    background:rgba(15,23,42,0.42);
  }
  .mnav-more-sheet:not([hidden]) {
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0; bottom:0; z-index:97;
    max-height:80dvh; padding-bottom:var(--mnav-safe-bottom);
    background:var(--surface); border-radius:16px 16px 0 0; box-shadow:var(--shadow-lg);
    animation:mnav-sheet-in 0.15s ease-out;
  }
  .mnav-more-head {
    position:relative; display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 10px; border-bottom:1px solid var(--border);
  }
  .mnav-more-head strong { font-size:15px; }
  .mnav-more-grab {
    position:absolute; top:6px; left:50%; width:36px; height:4px;
    border-radius:2px; background:#d1d5db; transform:translateX(-50%);
  }
  .mnav-more-list { overflow-y:auto; padding:8px; }
  .mnav-more-item {
    display:flex; align-items:center; gap:12px; width:100%; min-height:46px;
    padding:10px; border:0; border-radius:8px; background:transparent;
    font:500 15px var(--font); color:var(--text); text-align:left; cursor:pointer;
  }
  .mnav-more-item svg { width:20px; height:20px; flex:none; color:var(--text-muted); }
  .mnav-more-item:hover,
  .mnav-more-item:focus-visible { background:var(--surface-2); outline:none; }
  .mnav-more-item.active { background:var(--blue-bg); color:var(--accent); font-weight:600; }
  .mnav-more-item.active svg { color:var(--accent); }
  .mnav-more-item .mnav-check { margin-left:auto; width:18px; height:18px; }

  /* Closed side sheets park just off the right edge; without this their
     shadow leaves a dark strip down the right of the screen and the bar. */
  .issue-sheet:not(.open),
  .match-sheet:not(.open) { box-shadow:none; }

  /* ── Keep bottom-anchored overlays above the bar ── */
  .toast { bottom:calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 12px); }
  .bugrep-errtoast { bottom:calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 64px); }
  .x2fa-dock { bottom:calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 12px); }
  .tm-gmail-dock { bottom:calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 84px); }
}

@media (max-width:380px) {
  .logo { font-size:0; gap:0; }
}

@keyframes mnav-sheet-in {
  from { transform:translateY(24px); opacity:0; }
  to { transform:none; opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav-more-sheet:not([hidden]) { animation:none; }
  #hide-issues-toggle,
  #hide-issues-toggle::before { transition:none; }
}