/* ==========================================================================
   app-nav.css — de app-balk en de bestemmingen daarin
   ==========================================================================
   Eén witte balk bovenaan elke ingelogde pagina (Scholen, één school,
   Personeel, Accounts, Mijn week, Mijn scholen, Mijn leerlijn): het logo
   links, de bestemmingen ernaast, acties rechts. Dat is de kop uit de
   fase-3-ontwerpen `3b`, `3c`, `3e`, `6a`, `6b` en `8a` — één balk, niet
   twee. De blauwe paginabanner mét "Terug naar overzicht" die hier tot
   2026-08-29 boven stond is daarmee vervallen: de titel van de pagina hoort
   in de inhoud (eyebrow + h1), niet in de chrome.

   Start (`index.html`, ontwerp `3a`) draagt bewust géén balk — daar ís de
   zwarte kop met de vijf ruiten de kop. De publieke pagina's dragen sowieso
   geen navigatie.

   Per rol staan er minder bestemmingen in, nooit een andere vorm — de lijst
   komt uit `js/navigatie.js`, de DOM uit `js/nav-bar.js`.

   Vormtaal (designhandoff §2): radius 0, afschuining linksboven en
   rechtsonder, rand als `inset box-shadow` (een echte `border` zou door de
   `clip-path` worden weggesneden), labels in Oswald uppercase. Actief is
   zwart gevuld met witte tekst; inactief is gedempte tekst zonder omtrek —
   de omtrek zou de balk in een rij gelijkwaardige knoppen veranderen, en
   dan is niet meer te zien waar je bent.

   De `--vt-*`-variabelen komen uit `vormtaal.css`, de `--app-bar-*` uit
   `tokens.css`; de fallbacks hier houden de balk correct op een pagina die
   dat bestand (nog) niet laadt.
   ========================================================================== */

/* --- De balk ------------------------------------------------------------ */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--vms-white);
  border-bottom: var(--vt-lijn, 1.5px) solid var(--vms-ink-900);
}

.app-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  /* Nooit lager dan de hoogte waarop de vaste avatar is gecentreerd
     (`--app-bar-h`): zonder bestemmingenrij is het logo het hoogste item en
     zou de avatar (44px) onder de haarlijn van de balk uitsteken — precies
     wat een lezer tot DEC-042 zag. */
  box-sizing: border-box;
  min-height: var(--app-bar-h, 71.6px);
  /* Rechts blijft `--app-bar-slot` vrij voor de avatar: die staat vast
     rechtsboven (`.vms-account-wrap`, password-protect.css) omdat hij uit de
     inloggate komt en ook op Start moet staan, waar geen balk is. Hij is dus
     geen flex-item hier — deze marge is wat de twee uit elkaar houdt. */
  padding: var(--app-bar-pad-y, 0.8rem) var(--app-bar-slot, 5rem)
    var(--app-bar-pad-y, 0.8rem) var(--space-5);
}

.app-bar-left {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  min-width: 0;
}

/* `margin-left: auto` en niet `justify-content: space-between`: als de
   bestemmingen zo breed zijn dat de acties op een tweede regel belanden,
   duwt auto ze daar óók naar rechts. Met space-between zouden ze dan links
   onder het logo uitkomen, alsof ze bij de navigatie horen. */
.app-bar-right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-left: auto;
}

.app-bar-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  /* Het merkteken is 26px; de klikzone eromheen haalt de volle raakvlaknorm.
     De balk is ruim 70px hoog, dus dit verandert niets aan wat je ziet. */
  min-height: var(--vt-raakvlak);
  text-decoration: none;
}

.app-bar-brand img {
  display: block;
  width: auto;
  height: 26px;
}

.app-bar-brand:focus-visible {
  outline: var(--vt-lijn-dik, 2.5px) solid var(--vms-ink-900);
  outline-offset: 3px;
}

/* Terugweg + titel in de balk (ontwerp `3c`, één school): geen bestemming
   maar een plek waar je vandaan komt, dus gedempt en klein. */
.app-bar-back {
  color: var(--vms-ink-500);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.app-bar-back:hover {
  color: var(--vms-ink-900);
}

.app-bar-back:focus-visible {
  outline: var(--vt-lijn-dik, 2.5px) solid var(--vms-ink-900);
  outline-offset: 3px;
}

.app-bar-titel {
  min-width: 0;
  overflow: hidden;
  color: var(--vms-ink-900);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--fw-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- De bestemmingen ---------------------------------------------------- */

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
}

/* Een lege bestemmingenlijst krijgt geen rij: `js/nav-bar.js` zet dan
   `hidden` op het landmark; de `display: flex` hierboven wint van de UA-regel
   voor [hidden], dus die moet hier expliciet terug. Anders blijft de lege nav
   als flex-item in `.app-bar-left` staan en houdt zijn gap ruimte bezet. */
.app-nav[hidden] {
  display: none;
}

.app-nav-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: var(--vt-raakvlak, 46px);
  padding: 0 1.05rem;
  color: var(--vms-ink-500);
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: var(--fw-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 0;
  clip-path: polygon(
    var(--vt-schuin-s, var(--vt-schuin-s, 9px)) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s, var(--vt-schuin-s, 9px))),
    calc(100% - var(--vt-schuin-s, var(--vt-schuin-s, 9px))) 100%,
    0 100%,
    0 var(--vt-schuin-s, var(--vt-schuin-s, 9px))
  );
}

.app-nav-link:hover {
  color: var(--vms-ink-900);
  background: var(--vms-ink-100);
}

/* `clip-path` snijdt een outline weg, dus de focusring is een inset-schaduw
   die binnen de vorm blijft. Twee lagen: buiten zwart, daarbinnen wit, zodat
   de ring op een witte én op een zwarte vulling zichtbaar is. */
.app-nav-link:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 var(--vt-lijn-dik, 2.5px) var(--vms-ink-900),
    inset 0 0 0 calc(var(--vt-lijn-dik, 2.5px) + 2px) var(--vms-white);
}

.app-nav-link.is-active {
  color: var(--vms-white);
  font-weight: 500;
  background: var(--vms-ink-900);
}

.app-nav-link.is-active:hover {
  color: var(--vms-white);
  background: var(--vms-ink-700);
}

.app-nav-link.is-active:focus-visible {
  box-shadow:
    inset 0 0 0 var(--vt-lijn-dik, 2.5px) var(--vms-white),
    inset 0 0 0 calc(var(--vt-lijn-dik, 2.5px) + 2px) var(--vms-ink-900);
}

/* Tel-badge: wat er op die bestemming op je wacht. Geen badge betekent
   "niets te doen" óf "nog niet geladen" — `js/nav-bar.js` toont alleen een
   positief aantal, zodat een niet-geladen bron nooit als 0 leest. */
.app-nav-badge {
  min-width: 1.4rem;
  padding: 0 0.35rem;
  color: var(--vms-ink-900);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--fw-heading);
  line-height: 1.4rem;
  letter-spacing: 0;
  text-align: center;
  background: var(--vms-ink-100);
}

.app-nav-link.is-active .app-nav-badge {
  color: var(--vms-ink-900);
  background: var(--vms-white);
}

.app-nav-badge.is-hidden {
  display: none;
}

@media (max-width: 700px) {
  /* Smal scherm: de bestemmingen wikkelen over twee regels in plaats van
     zijwaarts te scrollen. Tot 2026-09-08 was de balk één scrollende rij;
     op een telefoon van 390px sneed de vaste avatar het derde label
     halverwege af ("SCHOL…") en bleef de vierde bestemming onzichtbaar —
     een scrollende rij zonder enig teken dát hij scrolt leest als een
     kapotte balk, niet als navigatie. Vier korte Oswald-labels passen in
     twee regels, en de vorm van de balk verandert niet (DEC-039: per rol
     minder bestemmingen, nooit een andere vorm). Het logo gaat eruit — bij
     deze breedte is de plek voor de bestemmingen, niet voor de afzender. */
  .app-bar-inner {
    gap: var(--space-2) var(--space-3);
    padding-right: var(--app-bar-slot, 5rem);
    padding-left: var(--space-4);
  }

  .app-bar-brand {
    display: none;
  }

  /* Links neemt de resterende breedte en wikkelt daarbinnen; rechts (de
     zoekknop, op Scholen ook de acties) staat naast de eerste regel zolang
     dat past en zakt anders als geheel onder de bestemmingen. */
  .app-bar-left {
    flex: 1 1 0;
    gap: var(--space-2);
  }

  .app-nav {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .app-nav-link {
    flex: 0 0 auto;
    padding: 0 0.8rem;
    white-space: nowrap;
  }

  /* De acties krimpen mee in plaats van uit de balk te lopen. */
  .app-bar-right {
    gap: var(--space-1);
    min-width: 0;
  }

  .app-bar-right > * {
    max-width: 100%;
  }
}

@media print {
  .app-bar {
    display: none;
  }
}