/* nav.css — shared app chrome, defined ONCE for every page that extends
 * base.html: the full-width sticky topbar, ghost nav buttons, dropdowns,
 * user menu, sync indicator, and dashboard toolbar.
 *
 * Reuses the existing element IDs/classes (#top-nav, .nav-btn,
 * .nav-dropdown-btn, #user-menu, .user-btn, #username-display,
 * #sync-status, #theme-toggle) so the page JS (toggleNavDropdown,
 * toggleUserMenu, openSyncModal) keeps working untouched.
 */

/* ---- Full-width sticky topbar (replaces the old floating cluster) ---- */
#top-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  height: 56px;
  padding: 0 var(--sp-4);
  background: var(--bg-surface);  /* opaque: backdrop-filter blur on the fixed bar caused diagonal scroll-tearing on some GPUs */
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--elev-1);
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-right: var(--sp-3);
  text-decoration: none;
}
.topbar-brand .brand-logo {
  height: 22px;
  width: auto;
  display: block;
}
/* Trademark ™ — matches the BSC-1000 topbar lockup exactly (.bac-brand-tm):
   a small, vertically-centred mark with a -2px nudge against the logo's gap. */
.topbar-brand .brand-tm {
  align-self: flex-start;   /* top-right superscript, not vertically centred */
  margin-top: 1px;
  margin-left: -6px;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--fg-faint);
}
.topbar-brand .brand-suffix {
  padding-left: var(--sp-2);
  border-left: 1px solid var(--border-medium);
  color: var(--fg-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-13);
  letter-spacing: 0.02em;
}
.topbar-spacer { flex: 1 1 auto; }

/* ---- Ghost nav buttons — blend into the bar, only active is filled ---- */
.nav-btn,
.nav-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--motion-fast) var(--motion-ease-out),
    color var(--motion-fast) var(--motion-ease-out);
}
.nav-btn:hover,
.nav-dropdown-btn:hover { background: var(--bg-hover); color: var(--fg-strong); }
.nav-btn.active { background: var(--brand); color: var(--brand-fg); }
.nav-dropdown-btn svg,
.nav-btn svg { width: 12px; height: 12px; transition: transform var(--motion-fast) var(--motion-ease-out); }
.nav-dropdown.open .nav-dropdown-btn svg { transform: rotate(180deg); }

/* ---- Dropdown menus (nav + user) ---- */
.nav-dropdown { position: relative; }
@keyframes bf-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-dropdown-menu,
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  min-width: 224px;
  padding: var(--sp-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-4);
  z-index: 1100;
  transform-origin: top;
  animation: bf-slide-down var(--motion-fast) var(--motion-ease-out);
}
.nav-dropdown-menu { left: 0; }
.user-dropdown { right: 0; }
.nav-dropdown.open .nav-dropdown-menu,
.user-dropdown.show { display: block; }
.nav-dropdown-menu a,
.user-dropdown a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--fg-default);
  text-decoration: none;
  font-size: var(--fs-13);
  line-height: 1.4;
  transition: background var(--motion-fast) var(--motion-ease-out),
              color var(--motion-fast) var(--motion-ease-out);
}
.nav-dropdown-menu a .bsp-ico,
.user-dropdown a .bsp-ico { color: var(--fg-muted); flex-shrink: 0; transition: color var(--motion-fast) var(--motion-ease-out); }
.nav-dropdown-menu a:hover,
.user-dropdown a:hover { background: var(--bg-hover); color: var(--fg-strong); }
.nav-dropdown-menu a:hover .bsp-ico,
.user-dropdown a:hover .bsp-ico { color: var(--brand); }
.nav-dropdown-menu a.active { color: var(--brand); font-weight: var(--fw-semibold); }
.nav-dropdown-menu a.active .bsp-ico { color: var(--brand); }
.dropdown-divider { height: 1px; background: var(--border-light); margin: var(--sp-2) calc(-1 * var(--sp-1)); }

/* ---- User menu ---- */
#user-menu { position: relative; }
.user-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-default);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  cursor: pointer;
}
.user-btn:hover { background: var(--bg-hover); }
.user-btn svg { width: 18px; height: 18px; color: var(--fg-muted); }

/* ---- Sync status indicator — semantic dot, never an emoji ---- */
.sync-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
  font-size: var(--fs-13);
  cursor: pointer;
}
.sync-status-indicator:hover { background: var(--bg-hover); }
.sync-status-indicator .sync-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-faint); flex-shrink: 0;
}
.sync-status-indicator.healthy .sync-dot { background: var(--success); }
.sync-status-indicator.warning .sync-dot { background: var(--warning); }
.sync-status-indicator.error   .sync-dot { background: var(--danger); }
.sync-status-indicator .sync-label { color: inherit; }

/* ---- Theme toggle (sits inside the user dropdown as a normal item) ---- */
#theme-toggle .theme-toggle-icon,
#theme-toggle .bsp-ico { display: inline-flex; }

/* ---- Dashboard toolbar (lock layout / reset / saved) — sleek ---- */
.dashboard-toolbar { display: flex; gap: var(--sp-2); align-items: center; }
.lock-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg-muted);
  font-size: var(--fs-13);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
}
.lock-toggle:hover { background: var(--bg-hover); color: var(--fg-default); }
.lock-toggle input { accent-color: var(--brand); margin: 0; }
.btn-reset-layout {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--fg-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--motion-ease-out),
    color var(--motion-fast) var(--motion-ease-out),
    border-color var(--motion-fast) var(--motion-ease-out);
}
.btn-reset-layout:hover { background: var(--bg-hover); color: var(--fg-strong); border-color: var(--border-strong); }
.save-indicator {
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  opacity: 0;
  transition: opacity var(--motion-med) var(--motion-ease-out);
}
.save-indicator.show { opacity: 1; color: var(--success); }

/* ---- Responsive: collapse nav labels on narrow screens ---- */
@media (max-width: 860px) {
  #top-nav { gap: 2px; padding: 0 var(--sp-2); }
  .nav-btn, .nav-dropdown-btn { padding: var(--sp-2); }
  .topbar-brand .brand-text { display: none; }
}