/* ============================================================================
 * lgc-topbar.css — AIDC SHARED STICKY TOPBAR / APP-CHROME SSOT
 * ----------------------------------------------------------------------------
 * CA design: docs/design/CA-ADMIN-IA-AND-LPD-CONVERGENCE.md §4.4. ONE canonical
 * app topbar every AIDC app surface converges on: sticky (never scrolls away),
 * LGC logo persistent, section-switcher slot. Built entirely on theme-tokens.css
 * variables (no raw 6-digit hex) so light+dark parity is automatic.
 *
 * Reconciliation note (canonical LPD, LGC_PLATFORMS_DESIGN_STANDARD.md):
 *   The canonical LPD defines a MARKETING navbar (`nav.nav-*`, §2, position:fixed
 *   below the platform bar) and the fixed platform bar (§1). It defines NO
 *   app-chrome/topbar component — the in-repo `.topbar` idiom used by the Engine
 *   /app, /account and /admin is outside the LPD's scope. `.lgc-topbar` fills
 *   that genuine gap; it does NOT replace or conflict with the LPD marketing
 *   `nav.nav-*`. It reuses the LPD logo rule (§2.6: https://lgc.inc/img/logo-40.png
 *   with a text fallback, never a silent hide) and the sticky value proven on the
 *   Engine (position:sticky;top:0;z-index:60, chat.html:137).
 *
 * DIV-1 fix (the "disappearing nav" bug): position:sticky;top:0 pins the bar so
 * the LGC logo never scrolls off. --lgc-topbar-top lets a surface that sits below
 * the external platform bar offset by var(--bar-h) without a code change.
 *
 * Injected globally at </head> by ui_fixes.TabletThemeMiddleware. Contains ONLY
 * new `.lgc-topbar*` classes -> zero collision with any surface's existing chrome.
 * ========================================================================== */

.lgc-topbar {
  position: sticky;
  top: var(--lgc-topbar-top, 0);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  height: 48px;
  padding: 0 var(--sp-5, 24px);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.lgc-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  text-decoration: none;
  flex-shrink: 0;
  min-width: 24px;
}
.lgc-topbar__logo { width: 24px; height: 24px; border-radius: 5px; flex: 0 0 24px; }
.lgc-topbar__logo-fallback {
  width: 24px; height: 24px; border-radius: 5px; flex: 0 0 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
}
.lgc-topbar__title { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.lgc-topbar__title b { color: var(--primary); }

.lgc-topbar__spacer { flex: 1 1 auto; }
.lgc-topbar__right { display: flex; align-items: center; gap: var(--sp-2, 8px); flex-shrink: 0; }

/* ---- Section switcher (dropdown) ------------------------------------------ */
.lgc-switcher { position: relative; }
.lgc-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-btn, 10px);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.lgc-switcher__btn:hover { border-color: var(--primary); color: var(--primary); }
.lgc-switcher__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-glow); }
.lgc-switcher__chev { transition: transform .18s; font-size: 10px; }
.lgc-switcher__btn[aria-expanded="true"] .lgc-switcher__chev { transform: rotate(180deg); }

.lgc-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 12px);
  box-shadow: var(--shadow-card);
  padding: 6px;
  display: none;
  z-index: 120;
}
.lgc-switcher__menu.open { display: block; }
.lgc-switcher__item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.lgc-switcher__item:hover,
.lgc-switcher__item:focus-visible { background: var(--bg3); color: var(--text); outline: none; }
.lgc-switcher__item[aria-current="page"] { color: var(--primary); font-weight: 700; }

/* Mobile: keep switcher reachable, 44px touch target */
@media (max-width: 768px) {
  .lgc-topbar { padding: 0 var(--sp-4, 16px); }
  .lgc-switcher__btn { min-height: 44px; }
  .lgc-switcher__menu { min-width: 200px; }
  .lgc-topbar__title { font-size: 13px; }
}

/* ============================================================================
 * SHARED APP-CHROME 3-ZONE TOPBAR  (Larry topbar redesign, 2026-09-21)
 * ----------------------------------------------------------------------------
 * The professional, balanced, full-width topbar every AIDC app surface (Engine
 * /app, /account, /admin) converges on — the modern SaaS three-zone pattern
 * (Linear / Vercel / Stripe dashboards):
 *   ZONE 1 (left)   brand + env badge — flush-left, never shrinks.
 *   ZONE 2 (center) section nav as horizontal TABS that USE the width, with the
 *                   active tab pinned by a primary underline (not a dropdown
 *                   squeezed by the logo — the exact "left-packed, dead-center"
 *                   defect Larry flagged on admin).
 *   ZONE 3 (right)  the utility cluster (account / logout / theme / language) as
 *                   ONE grouped, right-pinned unit with consistent spacing and
 *                   dividers.
 *
 * SHARED ROOT + zero-collision scoping: these rules target the COMMON topbar
 * class system (`.topbar` / `.topbar-left` / `.topbar-right` / `.topbar-nav`)
 * that all three app surfaces already use, so ONE stylesheet styles them
 * IDENTICALLY (Systemic-Fix Mandate #2). Every rule is scoped by a CHILD
 * combinator (`.topbar > .topbar-*`) or a topbar-only class, so the auth-page
 * in-card `.topbar` (login/signup — whose children are `.back` + `.theme-toggle`,
 * with NO `.topbar-left/right/nav`) is NEVER matched and stays untouched.
 *
 * Injected globally by ui_fixes._CSS_JS (after theme-tokens.css). Built entirely
 * on theme tokens — NO raw hex — so light+dark parity is automatic and there is
 * ZERO recolor (layout / spacing / alignment only). Span guard:
 * tests/test_lpd_surface_convergence.py.
 * ========================================================================== */

/* ZONE 1 — brand/left: flush-left, never shrinks. */
.topbar > .topbar-left { flex: 0 0 auto; min-width: 0; }

/* ZONE 2 — section nav: uses the width, tabs centered. */
.topbar-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  height: 100%;
  margin: 0 var(--sp-3, 12px);
}
.topbar-nav__list {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1, 4px);
  height: 100%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar-nav__list::-webkit-scrollbar { display: none; }
.topbar-nav__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--sp-3, 12px);
  border: 0;
  background: transparent;
  color: var(--dim);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s;
}
.topbar-nav__tab:hover { color: var(--text); }
.topbar-nav__tab:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.topbar-nav__tab[aria-current="page"] { color: var(--primary); }
/* active-tab underline — the pinned-tab indicator */
.topbar-nav__tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--sp-3, 12px);
  right: var(--sp-3, 12px);
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--primary);
}

/* ZONE 3 — utility cluster: grouped, right-pinned, consistent spacing. */
.topbar > .topbar-right {
  margin-left: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sp-2, 8px);
}
/* Consistent in-cluster divider (shared contract across every surface). */
.topbar > .topbar-right .tb-divider {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
  margin: 0 var(--sp-1, 4px);
  background: var(--border);
}

/* Responsive: below 900px collapse the tab strip to the dropdown switcher; on
 * wide screens the dropdown is redundant with the tabs, so hide it. */
@media (max-width: 900px) {
  .topbar-nav { display: none; }
}
@media (min-width: 901px) {
  .topbar .lgc-switcher--nav-fallback { display: none; }
}