/* ─────────────────────────────────────────────────────────────────────────
   Opt-in v2 top bar (Task 13). Loaded by base.html ONLY when the topbar
   renders (nav_v2_enabled), so classic users pay zero cost.

   Navy skin reuses the app's --primary (#1B4F8A) family. z-index layering:
     topbar bar        900   (sticky top, above page content)
     hub dropdowns     950   (above sticky content, below modals)
     app modals        1050+ (fq-panel = 1050; unaffected)
   ────────────────────────────────────────────────────────────────────── */

:root {
  --tb-navy: #1B4F8A;
  --tb-navy-hi: #23609f;
  --tb-accent: #8fc1ff;
}

/* ── has-topbar layout: content is full-width (no sidebar margin) ──
   has-topbar must not push content — the bar is fixed, the page sits under it.
   The sticky 52px bar sits in normal flow, so <main> needs no extra offset. */
body.has-topbar { margin-left: 0; }

/* Quick Capture always-visible bar folds into the user menu under v2:
   hide it unless expanded (Ctrl+K still focuses the hidden input; the
   user-menu item calls SBA_QC_OPEN which reveals it). */
body.has-topbar .qc-wrapper { display: none; }
body.has-topbar .qc-wrapper.qc-force-open { display: flex; }

/* ── The bar ── */
.sba-topbar {
  background: var(--tb-navy);
  color: #fff;
  display: flex;
  align-items: stretch;
  height: 52px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 900;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.sba-topbar .nav-left { display: flex; align-items: stretch; min-width: 0; }
.sba-topbar .nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
}

/* ── Mobile hamburger + mobile search icon (hidden on desktop; shown ≤900px) ── */
.sba-topbar .tb-burger {
  display: none;               /* → inline-flex ≤900px */
  align-self: center;
  background: none;
  border: none;
  color: #fff;
  font-size: 17px;
  padding: 8px 10px;
  margin-right: 2px;
  cursor: pointer;
  line-height: 1;
}
.sba-topbar .tb-search-mobile {
  display: none;               /* → inline-flex ≤900px */
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: .9;
  padding: 8px 8px;
  font-size: 15px;
  text-decoration: none;
}

/* ── Brand mark ── */
.sba-topbar .tb-brand {
  display: flex;
  align-items: center;
  padding-right: 14px;
  text-decoration: none;
}
.sba-topbar .tb-mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--tb-navy);
  font-weight: 800;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .3px;
}

/* ── POS chip (outline style, matches classic .pos-quick-launch) ── */
.sba-topbar .tb-pos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-right: 16px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.sba-topbar .tb-pos:hover { background: rgba(255,255,255,0.22); }
.sba-topbar .tb-pos i { font-size: 12px; }

/* ── Hubs ── */
.sba-topbar .tb-hubs { display: flex; align-items: stretch; min-width: 0; }
.sba-topbar .tb-hub { position: relative; display: flex; align-items: stretch; }
.sba-topbar .tb-hub-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.sba-topbar .tb-hub:hover > .tb-hub-label,
.sba-topbar .tb-hub.tb-open > .tb-hub-label { background: var(--tb-navy-hi); }
.sba-topbar .tb-caret { font-size: 8.5px; opacity: .6; margin-top: 1px; padding: 4px; }

/* ── Dropdowns ── */
.sba-topbar .tb-dd {
  display: none;
  position: absolute;
  top: 52px;
  left: 0;
  background: #fff;
  color: #1f2937;
  min-width: 236px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 30px rgba(15,35,60,.16);
  border-radius: 0 0 10px 10px;
  padding: 8px 0;
  z-index: 950;
}
/* Hover-open. The panel's top edge (top:52px) is flush with the 52px bar, so
   there is no dead gap between label and panel for the pointer to cross —
   hover simply persists while the cursor is over either the .tb-hub (which
   spans the full bar height) or the .tb-dd. No timer/bridge element is used. */
.sba-topbar .tb-hub:hover .tb-dd,
.sba-topbar .tb-hub.tb-open .tb-dd { display: block; }
.sba-topbar .tb-dd.mega { width: 540px; }
.sba-topbar .tb-hub:hover .tb-dd.mega,
.sba-topbar .tb-hub.tb-open .tb-dd.mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.sba-topbar .tb-dd a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7.5px 18px;
  font-size: 13px;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
}
.sba-topbar .tb-dd a:hover { background: #f1f5fb; color: var(--tb-navy); }
.sba-topbar .tb-dd a i { width: 16px; text-align: center; font-size: 12px; color: #94a3b8; }
.sba-topbar .tb-dd a:hover i { color: var(--tb-navy); }
.sba-topbar .tb-dd a.land { font-weight: 600; color: var(--tb-navy); }
.sba-topbar .tb-grp {
  padding: 9px 18px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  color: #94a3b8;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.sba-topbar .tb-pwa {
  font-size: 8.5px;
  background: #ece9fb;
  color: #5b4bb7;
  border-radius: 7px;
  padding: 1px 6px;
  letter-spacing: .4px;
}
.sba-topbar .tb-rule { border-top: 1px solid #e5e7eb; margin: 6px 14px; }

/* ── Badges ── */
.sba-topbar .tb-b {
  font-size: 9px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 8px;
  letter-spacing: .4px;
  margin-left: 4px;
}
.sba-topbar .tb-b.new { background: #e7f4ec; color: #1c7c3d; }
.sba-topbar .tb-b.merge { background: #fdf1dc; color: #9a6b15; }
.sba-topbar .tb-b.show { background: #ece9fb; color: #5b4bb7; }

/* ── Search ── */
.sba-topbar .tb-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 5px 12px;
  width: 230px;
}
.sba-topbar .tb-search-icon { font-size: 11px; color: #c8d6e8; }
.sba-topbar .tb-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 12.5px;
}
.sba-topbar .tb-search-input::placeholder { color: #c8d6e8; }
.sba-topbar .tb-search-kbd {
  font-size: 10px;
  background: rgba(255,255,255,0.15);
  padding: 1px 6px;
  border-radius: 4px;
  color: #dbe6f4;
}

/* The injected bell / user dropdown / QC inbox live in .nav-right; give
   them sensible spacing against the search box. */
.sba-topbar .nav-right .notif-bell { color: #fff; margin-right: 4px; }
.sba-topbar .nav-right .nav-user-trigger { color: #fff; opacity: .95; font-size: 13px; }

/* ── v2 user-menu status row ── */
.nav-user-dropdown .nav-user-status {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  font-size: 12px;
  color: #64748b;
}
.nav-user-dropdown .nav-user-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2ea35f;
}
.nav-user-dropdown .nav-user-rule { border-top: 1px solid #eef1f5; margin: 4px 10px; }

/* ── Drawer (Task 14) — overlay + left slide-in panel. Present in the DOM at
   all widths but off-screen until .open; the burger that reveals it only
   shows ≤900px, so desktop never sees it. z-index sits above the sticky bar
   (900) but below app modals (1050). ── */
.tb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,35,.45);
  z-index: 1000;
  opacity: 0;
  transition: opacity .18s ease;
}
.tb-overlay.visible { opacity: 1; }
.tb-overlay[hidden] { display: none; }

.tb-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 305px;
  max-width: 86vw;
  background: #fff;
  color: #1f2937;
  z-index: 1001;
  box-shadow: 8px 0 30px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .2s ease;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.tb-drawer.open { transform: translateX(0); }

.tb-drawer-head {
  background: var(--tb-navy);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tb-drawer-head .tb-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tb-accent);
  color: var(--tb-navy);
  font-weight: 700;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tb-drawer-id { min-width: 0; }
.tb-drawer-name { font-size: 13px; font-weight: 600; }
.tb-drawer-switch {
  font-size: 10.5px;
  opacity: .78;
  color: #fff;
  text-decoration: none;
}
.tb-drawer-switch:hover { opacity: 1; text-decoration: underline; }
.tb-drawer-x {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  opacity: .8;
  font-size: 17px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}
.tb-drawer-x:hover { opacity: 1; }

.tb-drawer-body { overflow-y: auto; flex: 1; padding: 6px 0 16px; }

/* Accordions */
.tb-drawer .acc { border-bottom: 1px solid #f1f5f9; }
.tb-drawer .acc > .h,
.tb-drawer .acc > .acc-home {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
  text-decoration: none;
}
.tb-drawer .acc > .h i.lead,
.tb-drawer .acc > .acc-home i.lead { width: 18px; text-align: center; color: #64748b; font-size: 13px; }
.tb-drawer .acc > .h i.chev { margin-left: auto; font-size: 10px; color: #94a3b8; transition: transform .15s ease; }
.tb-drawer .acc.open > .h i.chev { transform: rotate(180deg); }
.tb-drawer .acc .items { display: none; padding: 2px 0 10px; }
.tb-drawer .acc.open .items { display: block; }
.tb-drawer .acc .items a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 48px;
  font-size: 13px;
  color: #334155;
  text-decoration: none;
}
.tb-drawer .acc .items a:hover { background: #f1f5fb; }
.tb-drawer .acc .items a.land { font-weight: 600; color: var(--tb-navy); }
.tb-drawer .acc .items a i { width: 15px; text-align: center; font-size: 11px; color: #94a3b8; }
.tb-drawer .acc .items a.land i { color: var(--tb-navy); }
/* The Scan & Pick PWA chip is a desktop mega-menu group label; inside the
   drawer items the badge markup is unused, but keep badge styling consistent. */

/* Lock body scroll while the drawer is open. */
body.tb-drawer-open { overflow: hidden; }

/* ── Responsive: below 900px, swap desktop hubs/search for the mobile bar.
   Hide the hub row and desktop search box; show the hamburger + a search icon
   linking to Home. POS chip + injected bell/user icons stay usable. The bell
   and user-dropdown are injected into .nav-right by base.html and remain
   visible/tappable at these widths. ── */
@media (max-width: 900px) {
  .sba-topbar .tb-hubs { display: none; }
  .sba-topbar .tb-search { display: none; }
  .sba-topbar .tb-burger { display: inline-flex; align-items: center; }
  .sba-topbar .tb-search-mobile { display: inline-flex; }
  .sba-topbar .tb-pos { margin-right: 6px; }
  .sba-topbar .tb-brand { padding-right: 8px; }
}