/* ──────────────────────────────────────────────────────────────────────────
   app.css — shared application shell (topbar + tabs).

   Previously this block was duplicated inline in all seven topbar pages
   (index, relationships, pathways, succession, profile, admin, edit).
   It now lives here so the header stays consistent across the app.

   Both `.tabs a` and `.topbar .tabs a` are defined because edit.html
   historically used the higher-specificity form.
   ────────────────────────────────────────────────────────────────────────── */

.topbar {
  background: #111c50;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 56px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 51;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.brand { display: flex; align-items: center; gap: 8px; }
.brand-title {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-sub { color: rgba(255, 255, 255, 0.55); font-size: 11px; }

.tabs, .topbar .tabs { display: flex; gap: 2px; height: 100%; }

.tabs a, .topbar .tabs a {
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.tabs a:hover, .topbar .tabs a:hover { color: #fff; }
.tabs a.active, .topbar .tabs a.active {
  color: #fff;
  border-bottom-color: #fff;
}

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