/* ── Navigation ── */
/* Nav items are <a href="#..."> now (was <button>) so the browser's native
   Ctrl/Cmd/middle-click "open in new tab" works. Strip default link styling
   so they still look and behave like the buttons they replaced. */
.ntab, .bnav-item, .bnav-sub-item, .mgr-tab, .cl-mode-tab, .sc-tab {
  text-decoration: none;
  color: inherit;
}
/* NAV */
nav{position:sticky;top:32px;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 20px 0;height:56px;box-sizing:content-box;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.nbrand{display:flex;align-items:center;gap:11px;}
.nlogo{width:32px;height:32px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;box-shadow:0 2px 6px -2px rgba(58,97,247,.5);}
.nbrand-text{font-weight:700;font-size:13px;letter-spacing:-.01em;}
.nbrand-sub{font-size:10px;color:var(--muted);}
.ntabs{display:flex;gap:2px;}
.ntab{padding:6px 12px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:all .15s;font-family:var(--sans);}
.ntab:hover{color:var(--text);background:var(--s2);}
.ntab.active{background:var(--alt);color:var(--accent);font-weight:600;}
.ntab-menu{background:var(--s2);color:var(--t2);font-weight:700;border:1px solid var(--border);margin-right:6px;border-radius:var(--r-xs,7px);}
.ntab-menu:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
/* ── Menu button (nav) — the app's one nav-system trigger: opens the
   Search & All Sections drawer (#sectionsbg, js/nav-sections.js) on
   desktop, same as the ☰ Menu button in .bnav does on mobile. Leads
   the brand group at the far left of the bar. ── */
.navmenubtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--s2);cursor:pointer;color:var(--muted);transition:all .15s;flex-shrink:0;}
.navmenubtn:hover{border-color:var(--accent);color:var(--accent);}
.navmenu-ic{font-size:16px;line-height:1;}
/* Below 861px .bnav's own ☰ Menu button takes over (same drawer, same
   trigger — just the mobile shell's copy of it), so hide this one to
   avoid showing two Menu buttons on a phone-sized screen. */
@media(max-width:860px){ .navmenubtn{display:none;} }
.nright{display:flex;align-items:center;gap:8px;}
.nclock{font-family:var(--mono);font-size:11px;color:var(--muted);}
.syncbadge{display:flex;align-items:center;gap:5px;font-size:11px;font-family:var(--mono);padding:3px 9px;border-radius:20px;cursor:pointer;border:1px solid var(--border);background:var(--s2);color:var(--muted);}
.syncbadge.syncing{background:var(--alt2);color:var(--amber);border-color:#fde68a;animation:pulse .8s infinite;}
.syncbadge.ok{background:var(--glt);color:var(--green);border-color:#bbf7d0;}
.syncbadge.err{background:var(--rlt);color:var(--red);border-color:#fecaca;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.lockbtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--s2);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .15s;}
.lockbtn:hover{border-color:var(--accent);color:var(--accent);}

/* ── Take Control button (nav, beside Supabase sync badge) ── */
.takectrlbtn{
  display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;font-family:var(--sans);
  padding:3px 10px;border-radius:20px;cursor:pointer;
  border:1px solid var(--purple);background:var(--s2);color:var(--purple);
  transition:all .15s;
}
.takectrlbtn:hover{background:var(--purple);color:#fff;}
.takectrlbtn:disabled{cursor:default;opacity:.55;background:var(--glt);color:var(--green);border-color:#bbf7d0;}
.takectrlbtn:disabled:hover{background:var(--glt);color:var(--green);}
.takectrlbtn.busy{opacity:.65;cursor:wait;animation:pulse .8s infinite;}
@media(max-width:640px){ #nav-tc-text{display:none;} .takectrlbtn{padding:6px;border-radius:50%;} }


/* ── Persistent Status Bar — slim live readout (Total Credit + Today's
   Sale), sticky at the very TOP of the page (topmost, above the main
   nav), visible on EVERY page (not just Cover/Manager Dashboard). nav's
   own sticky top offset (see nav{} above) is set to this bar's height
   (32px) so it stacks directly underneath instead of overlapping it. ── */
.status-bar{position:sticky;top:0;z-index:210;background:linear-gradient(90deg,#0f172a,#1e3a5f);display:none;align-items:center;padding:0 20px;height:32px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.status-bar-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;}
.status-pill{display:flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.08);transition:background .15s;cursor:pointer;}
.status-pill:hover{background:rgba(255,255,255,.18);}
.status-pill .sb-ic{font-size:12px;}
.status-pill .sb-label{color:rgba(255,255,255,.6);font-weight:500;}
.status-pill .sb-val{font-family:var(--mono);font-weight:700;}
.status-credit .sb-val{color:#fbbf24;}
.status-sale .sb-val{color:#4ade80;}
.status-bar-time{margin-left:auto;font-size:10px;color:rgba(255,255,255,.4);font-family:var(--mono);}
@media(max-width:640px){
  .status-bar{padding:0 12px;height:32px;}
  .status-bar-time{display:none;}
  .status-pill .sb-label{display:none;}
}

/* ── Sale Data sub-nav (Phase 1 reshape) ── */
.ntabs.subnav {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 2px;
}
.ntab.sub {
  font-size: 12px;
  opacity: 0.85;
}
.bnav-sub {
  display: none; /* mobile-only — turned on inside @media(max-width:860px) in mobile.css, same pattern as .bnav */
  justify-content: flex-start;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--s1, #fff);
  border-top: 1px solid var(--border);
  padding: 6px 8px;
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 390;
}
.bnav-sub::-webkit-scrollbar { display: none; }
.bnav-sub-item {
  border: none;
  background: none;
  font-size: 11px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.bnav-sub-item.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ── CommandHub page integration (Phase 2) ── */
#page-commandhub {
  overflow: hidden;
}
/* Make sure the page fills the full viewport height below the nav */
.page.on#page-commandhub {
  display: flex;
  flex-direction: column;
}

/* Override default .page.on for CommandHub — needs flex, not block */
.page.on#page-commandhub {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  height: calc(100vh - 56px - 32px);  /* desktop nav + status bar */
  max-height: calc(100vh - 56px - 32px);
  overflow: hidden;
}
@media (max-width: 700px) {
  .page.on#page-commandhub {
    height: calc(100vh - 56px - 32px - 60px); /* nav + status bar + mobile bottom nav */
    max-height: calc(100vh - 56px - 32px - 60px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   DOMAIN ISOLATION — Sales / Manager / Notes & Sheets / Closing / Audit
   Each is a first-class peer dashboard (V2 plan §2), not nested tabs.
   Cover is the one hub: every domain-owned nav tab is hidden by
   default and only reappears once you're actually inside that domain
   (body[data-domain] matches it) — so from Cover itself, the nav shows
   nothing but Cover/CommandHub/Tools, and picking a domain happens via
   Cover's tiles, not by scanning a long row of always-visible icons.
   Cover, CommandHub, and Tools have no data-domain-group and are never
   touched by this rule — they're cross-domain utilities (routing hub,
   AI assistant, sync/settings), not owned by any one dashboard.

   Closing Book/Credit Ledger (native ports of the standalone Closing
   app's own pages) and Assignments (native port of Pharmacy Audit
   Hub's own page) are real embedded pages here, reached via their own
   Cover tiles — same pattern as Sales/Manager/Notes & Sheets, just
   reading from an external bridge instead of this app's own data.
   ══════════════════════════════════════════════════════════════════ */
.ntab[data-domain-group], .bnav-item[data-domain-group] { display: none !important; }

body[data-domain="sales"]      .ntab[data-domain-group="sales"],
body[data-domain="manager"]    .ntab[data-domain-group="manager"],
body[data-domain="notesheets"] .ntab[data-domain-group="notesheets"],
body[data-domain="closing"]    .ntab[data-domain-group="closing"],
body[data-domain="audit"]      .ntab[data-domain-group="audit"],
body[data-domain="inventory"]  .ntab[data-domain-group="inventory"],
body[data-domain="str"]        .ntab[data-domain-group="str"] {
  display: inline-block !important;
}
body[data-domain="sales"]      .bnav-item[data-domain-group="sales"],
body[data-domain="manager"]    .bnav-item[data-domain-group="manager"],
body[data-domain="notesheets"] .bnav-item[data-domain-group="notesheets"],
body[data-domain="closing"]    .bnav-item[data-domain-group="closing"],
body[data-domain="audit"]      .bnav-item[data-domain-group="audit"],
body[data-domain="inventory"]  .bnav-item[data-domain-group="inventory"],
body[data-domain="str"]        .bnav-item[data-domain-group="str"] {
  display: flex !important;
}

/* Each domain gets its own accent color throughout — every button,
   active tab, hover state, and highlight that already reads
   var(--accent)/var(--alt) re-themes automatically, no per-component
   changes needed. Sales keeps the app's base blue. */
body[data-domain="manager"] {
  --accent: var(--mgrblue);
  --alt: var(--mgrblue-lt);
}
body[data-domain="notesheets"] {
  --accent: var(--green);
  --alt: var(--glt);
}
body[data-domain="closing"] {
  --accent: var(--teal);
  --alt: var(--tlt);
}
body[data-domain="audit"] {
  --accent: var(--amber);
  --alt: var(--alt2);
}
body[data-domain="inventory"] {
  --accent: var(--pink);
  --alt: var(--pink-lt);
}
body[data-domain="str"] {
  --accent: var(--pink);
  --alt: var(--pink-lt);
}

/* ══════════════════════════════════════════════════════════════════
   RECENTS DRAWER  —  "recently used sections" this session (nav combo
   part 3 of 3, alongside the bottom tab bar above and the pushState
   back-button fix in ui.js's showPage()). Reuses .mbg/.modal/.mhdr/
   .mbody/.mclose from modals.css and .sheet-handle from mobile.css —
   only the row styling below is new.
   ══════════════════════════════════════════════════════════════════ */
.recents-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
}
.recents-row:last-child { border-bottom: none; }
.recents-row:hover, .recents-row:active { background: var(--s2); }
.recents-icon {
  font-size: 15px; flex-shrink: 0; width: 28px; height: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--s2); border: 1px solid var(--border);
}
/* Nested rows (depth ≥ 1 in the All Sections drawer) get a smaller,
   softer-tinted chip — reinforces hierarchy instead of every row at
   every depth looking like the exact same size/weight. */
.recents-icon-sub {
  width: 24px; height: 24px; font-size: 13px; border-radius: 7px;
  background: var(--alt, var(--s2)); border-color: transparent;
}
/* SVG variant (top-level All Sections drawer rows, js/icons.js) — the
   emoji sizing above (font-size) does nothing for an <svg> child, so
   size/color it directly; chip sizing (width/height/bg/border) is
   shared with .recents-icon above. */
.recents-icon-svg { color: var(--t2); }
.recents-icon-svg svg { width: 16px; height: 16px; }
.recents-label { flex: 1; font-size: 13px; font-weight: 500; }
.recents-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.recents-empty { text-align: center; padding: 28px 12px; color: var(--muted); font-size: 13px; }

/* ── All Sections drawer (long-press Cover) — shares .recents-icon/
   .recents-label styling above for its group headers; only the group
   wrapper and indented sub-rows are new. ── */
.sections-heading {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 6px;
}
.sections-heading:first-child { padding-top: 6px; }
.sections-group { border-bottom: 1px solid var(--border); padding: 6px 0; }
.sections-group:last-child { border-bottom: none; }
.sections-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; cursor: pointer; border-radius: 8px; transition: background .15s; }
.sections-row:hover, .sections-row:active { background: var(--s2); }
.sections-row-main { font-weight: 700; font-size: 13.5px; padding: 3px 4px 3px 8px; justify-content: space-between; }
.sections-row-sub { padding-left: 42px; }

/* Collapsed by default (task: sections + sub-sections start collapsed
   every time the drawer opens). The nav-hit span carries navigation +
   hover/active feedback; the chevron button is a separate hit target
   that only toggles visibility of .sections-subs, so tapping the label
   still jumps straight to the page while tapping the arrow just
   expands/collapses. */
.sections-nav-hit { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 8px; transition: background .15s; min-width: 0; }
.sections-nav-hit:hover, .sections-nav-hit:active { background: var(--s2); }
.sections-toggle {
  flex-shrink: 0; width: 30px; height: 30px; border: none; background: none;
  color: var(--muted); font-size: 13px; cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s;
}
.sections-toggle:hover, .sections-toggle:active { background: var(--s2); color: var(--text); }
.sections-subs { display: none; }
/* Child (not descendant) combinators: groups now nest inside groups
   (e.g. Closing > Credit Ledger > Credit/Misc-Ongoing, Tools > Sync
   Center > its own tabs), so an ancestor being open must not force a
   nested group's own — independently toggled — subs open too. */
.sections-group-open > .sections-subs { display: block; }
.sections-group-open > .sections-row-main .sections-toggle { color: var(--accent); }

/* Permanent trigger for the All Sections drawer — same drawer long-press
   on the Cover nav item has always opened (js/nav-sections.js); this
   now lives as the left-most item in the bottom nav bar (#bnav) instead
   of a floating edge button, so it shares .bnav-item's layout/sizing
   and only needs a couple of accent tweaks to stand out as the "menu"
   entry rather than a page link. */
.side-menu-btn { color: var(--accent); }
.side-menu-btn:active { transform: scale(.94); }

/* All Sections drawer — docked as a true left sidebar (full height,
   slides in from the edge) rather than the generic .mbg's centered
   desktop / bottom-sheet mobile behavior every other modal uses. Scoped
   to #sectionsbg only so nothing else is affected. */
#sectionsbg { justify-content: flex-start !important; padding: 0 !important; }
#sectionsbg .modal {
  width: min(84vw, 320px); max-height: 100vh; height: 100%;
  border-radius: 0 14px 14px 0;
  animation: sideMenuSlideIn .22s ease-out;
}
#sectionsbg .sheet-handle { display: none !important; }
@keyframes sideMenuSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.sections-sub-label { font-size: 12.5px; color: var(--t2); }

/* ── Global search (js/global-search.js) — search box pinned atop the
   All Sections drawer, plus its Staff-match result rows. Hidden
   sections/sub-sections during an active filter use .gs-hidden rather
   than touching .sections-group-open, so the collapsed/expanded state
   nav-sections.js already manages is left alone once the query clears. */
/* No longer sticky (Aug 2026) — it's now a plain flex sibling of .mbody
   in the DOM (see index.html's #sectionsbg), pinned the same structural
   way .mhdr is, via flex-shrink:0. Horizontal padding matches .mbody's
   own (18px 22px, in modals.css) so the input still lines up flush
   with the section rows below it. */
.gs-search-row { padding: 14px 22px 10px; flex-shrink: 0; }
.gs-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--s1, var(--surface));
  color: var(--text); font-size: 13px; font-family: var(--sans);
}
.gs-input:focus { outline: none; border-color: var(--accent); }
.gs-hidden { display: none !important; }
.gs-group-label { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--muted); text-transform: uppercase; padding: 6px 8px 2px; }
.gs-sub { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
#gs-staff-results { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 4px; }