/* ══════════════════════════════════════
   TopBar
══════════════════════════════════════ */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 200;
  box-shadow: var(--shadow);
  transition: background 0.3s, border-color 0.3s;
}

.topbar-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
}

/* TopBar's `wide` prop — matches Dashboard's own wide-screen body width
   (.db-layout, dashboard.css) at the same breakpoint, so the topbar's
   left/right edges line up with the page content instead of staying at
   every other page's standard (narrower) width — design feedback. Horizontal
   padding (16px) intentionally matches .topbar-inner's own above, and
   .db-layout is kept in sync with the same 16px rather than its own 12px,
   so the two edges land at the same pixel regardless of which element the
   padding technically lives on. */
@media (min-width: 900px) {
  .topbar-inner-wide {
    max-width: var(--page-width-wide);
  }
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Design feedback: the brand is now always-present and doubles as the
   home link (replacing per-page back buttons/titles in the topbar) —
   button reset so it doesn't pick up default button chrome. */
.brand-link {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.logo-pill {
  background: #0D1B2A;
  border-radius: 100px;
  padding: 3px 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.brand-text {
  font-size: var(--fs-17);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.topbar-title {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-btn {
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.back-btn:hover { border-color: var(--accent); color: var(--accent); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* TopBar's show_nav — the five BottomNav items, icon-only, moved into the
   topbar (design feedback: remove the separate bottom bar). Sized for the
   44px-tall topbar rather than BottomNav's 48px-tall dedicated bar, so
   there's no room for a label under the icon here — active state is
   color-only, matching .nav-icon.nav-active's convention. */
.topbar-nav {
  gap: 2px;
}

.topbar-nav-item {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--ink-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.topbar-nav-item svg { width: 20px; height: 20px; }
.topbar-nav-item:hover { background: var(--surface2); color: var(--ink); }
.topbar-nav-item.topbar-nav-active { color: var(--accent); }

/* ══════════════════════════════════════
   BottomNav
══════════════════════════════════════ */

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: var(--bottom-bg);
  border-top: 1px solid var(--border);
  z-index: 200;
  transition: background 0.3s;
}

.nav-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  transition: opacity 0.15s;
  padding: 0;
}
.nav-item:hover { opacity: 0.75; }

.nav-icon {
  width: 16px;
  height: 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-icon svg { width: 100%; height: 100%; }

.nav-item.nav-active .nav-icon { color: var(--accent); }

.nav-label {
  font-size: var(--fs-9);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
}
.nav-item.nav-active .nav-label { color: var(--accent); }