/* ── Top bar ──────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
}
/* Logoen er marineblå på hvitt uten gjennomsiktighet, så den får en hvit
   brikke å stå på i stedet for å flyte som et rektangel oppå forbundsblåen. */
.topbar__logo {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--logo-plate);
  object-fit: contain;
}
/* Navnet spiser den ledige plassen, så status og meny havner til høyre —
   uavhengig av om statusteksten faktisk rendres. */
.topbar__name {
  margin-right: auto;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
}
.topbar__status {
  font-size: .78rem; color: var(--text-on-bla);
  font-variant-numeric: tabular-nums;
}
.topbar__menu {
  background: none; border: 0; color: var(--text-on-bla);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 6px;
}
.topbar__menu:hover { color: var(--text); }

.meny {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 19;
  background: var(--bg-meny);
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
}
.meny[hidden] { display: none; }
.meny a {
  display: block; padding: 11px 18px;
  color: var(--text); font-size: .95rem;
}
.meny a:hover { background: var(--nlf-bla-lys); text-decoration: none; }

/* ── Bottom nav ───────────────────────────────────────────────────── */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  height: var(--bottomnav-h);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 10px;
  background: var(--bg-nav);
  border-top: 1px solid var(--border);
}
.bottomnav a {
  flex: 0 1 160px;
  text-align: center;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: .88rem; font-weight: 600;
}
.bottomnav a:hover { color: var(--text); text-decoration: none; }
.bottomnav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* ── Flash messages ───────────────────────────────────────────────── */
.flash {
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-bottom: var(--gap);
  font-size: .9rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.flash--success { border-color: var(--accent);  color: var(--accent-soft); }
.flash--danger  { border-color: var(--danger);  color: var(--danger); }
.flash--warning { border-color: var(--warning); color: var(--warning); }
.flash--info    { color: var(--text-muted); }