/* NMS — chrome
 *
 * Bron: nimo-nms-app-system/components/chrome/
 * Componenten: AppShell · SideNav · TopBar · UserMenu · Breadcrumb · PageHeader · MyItemsColumn
 *
 * Zijnavigatie altijd navy, topbalk altijd wit: twee navy vlakken naast elkaar laten
 * de inhoud verdrinken. Ingangen zonder recht bestaan niet in de lijst — ze staan er
 * niet grijs bij, dus de navigatie moet met drie items even af zijn als met tien.
 * Focus op navy is blauwtint (besluit B2): navy op navy is niet zichtbaar.
 *
 * Geen losse px-, hex- of fontwaarde in dit bestand: alles via var(--...).
 */

/* ---------------------------------------------------------------------------
 * AppShell — het raster van de applicatie
 * ------------------------------------------------------------------------- */
body {
  display: grid;
  grid-template-columns: var(--nms-nav-w) minmax(0, 1fr) var(--nms-aside-w);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: var(--surface-page);
}
body.nav-ingeklapt { grid-template-columns: var(--nms-nav-w-ingeklapt) minmax(0, 1fr) var(--nms-aside-w); }

.nms-shell__nav {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: var(--surface-inverse);
  border-right: var(--nms-hairline-w) solid var(--border-hairline);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--nms-op-navy-fg);
}
.nms-shell__topbar {
  grid-column: 2 / span 2;
  grid-row: 1;
  background: var(--surface-card);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-shell__main { grid-column: 2; grid-row: 2; min-width: 0; padding: 0 0 var(--space-12); }
.nms-shell__aside {
  grid-column: 3;
  grid-row: 2;
  border-left: var(--nms-hairline-w) solid var(--border-hairline);
  min-width: 0;
  background: var(--surface-page);
}

/* ---------------------------------------------------------------------------
 * Rolwisselbalk — FO Rolwissel-NMS v1.0 (FE-03)
 *
 * Een vaste balk over de volle breedte, boven alles: hij moet er staan waar je
 * ook bent en hoe ver je ook scrollt, en is niet weg te klikken. Navy vlak met
 * witte tekst, net als de zijnavigatie, zodat direct zichtbaar is dat je niet
 * in de gewone toestand zit.
 * ------------------------------------------------------------------------- */
/* De balk staat vast bovenaan het venster, buiten het raster. Een rasterrij zou
   met de pagina meescrollen en dan is hij niet permanent zichtbaar. De hoogte
   varieert (één of twee regels), dus app.js meet hem en zet --nms-rolwissel-h;
   daarop schuift de body naar beneden en krimpt de zijnavigatie mee. */
body.rolwissel { padding-top: var(--nms-rolwissel-h, 0px); }
body.rolwissel .nms-shell__nav {
  top: var(--nms-rolwissel-h, 0px);
  height: calc(100vh - var(--nms-rolwissel-h, 0px));
}

.nms-rolwissel {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-inverse);
  color: var(--nms-op-navy-fg);
  --focus-ring: var(--nms-focus-ring-on-navy);
}
.nms-rolwissel__tekst { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--nms-text-13); }
.nms-rolwissel__nuance { font-size: var(--nms-text-11); color: var(--nms-op-navy-fg-rust); }
.nms-rolwissel__terug {
  flex: none;
  height: var(--nms-knop-h-xs);
  padding-inline: var(--nms-knop-pad-x-xs);
  font: inherit;
  font-size: var(--nms-text-13);
  font-weight: var(--weight-semibold);
  color: var(--nms-op-navy-fg);
  background: transparent;
  border: var(--nms-hairline-w) solid var(--nms-op-navy-fg-rust);
  border-radius: var(--radius-none);
  cursor: pointer;
}
.nms-rolwissel__terug:hover { background: var(--nimo-blauwtint); color: var(--surface-inverse); }

body.noauth .nms-rolwissel { display: none; }

/* Inloggen en wachtwoord vergeten staan buiten de shell, op wit. */
body.noauth { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.noauth .nms-shell__nav,
body.noauth .nms-shell__topbar,
body.noauth .nms-shell__aside { display: none; }
body.noauth .nms-shell__main { grid-column: 1; grid-row: 1; padding: 0; }

/* ---------------------------------------------------------------------------
 * SideNav — permanent links, altijd op navy
 * ------------------------------------------------------------------------- */
.nms-sidenav__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nms-gap-10);
  padding: var(--space-4) var(--nms-gap-14);
  border-bottom: var(--nms-hairline-w) solid var(--nms-op-navy-lijn);
}
.nms-sidenav__merk { display: flex; align-items: center; gap: var(--nms-gap-10); min-width: 0; }
.nms-sidenav__logo {
  width: var(--space-8);
  height: var(--space-10);
  flex: none;
  background: var(--nimo-white);
  padding: var(--space-1);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.nms-sidenav__logo img { width: 100%; height: 100%; object-fit: contain; }
.nms-sidenav__merktekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nms-sidenav__merktekst strong { font-size: var(--nms-text-13); color: var(--nms-op-navy-fg); }
.nms-sidenav__merktekst span { font-size: var(--nms-text-11); color: var(--nms-op-navy-fg-rust); }

.nms-sidenav__inklap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nms-row-h-compact);
  height: var(--nms-row-h-compact);
  flex: none;
  background: none;
  border: var(--nms-hairline-w) solid var(--nms-op-navy-lijn-sterk);
  border-radius: var(--radius-none);
  color: var(--nms-op-navy-fg);
  cursor: pointer;
}
.nms-sidenav__inklap::before {
  content: "";
  width: var(--nms-mark-size);
  height: var(--nms-mark-size);
  background: currentColor;
  -webkit-mask: url("../icons/arrow-left.svg") center / contain no-repeat;
          mask: url("../icons/arrow-left.svg") center / contain no-repeat;
}
body.nav-ingeklapt .nms-sidenav__inklap::before {
  -webkit-mask-image: url("../icons/arrow-right.svg");
          mask-image: url("../icons/arrow-right.svg");
}

.nms-sidenav__lijst {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
}
.nms-sidenav__ingang {
  display: flex;
  align-items: center;
  gap: var(--nms-gap-10);
  width: 100%;
  min-height: var(--nms-row-h-comfortable);
  padding: 0 var(--nms-gap-14);
  background: none;
  border: none;
  border-radius: var(--radius-none);
  border-left: var(--nms-row-rule-w) solid transparent;
  font-family: var(--font-body);
  font-size: var(--nms-text-13);
  font-weight: var(--weight-regular);
  color: var(--nms-op-navy-fg-rust);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nms-sidenav__ingang:hover { color: var(--nms-op-navy-fg); background: var(--nms-op-navy-vlak-zacht); }
.nms-sidenav__ingang--actief {
  background: var(--nms-op-navy-vlak);
  border-left-color: var(--nimo-blauwtint);
  color: var(--nms-op-navy-fg);
}
.nms-sidenav__teken {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  background: currentColor;
  -webkit-mask: url("../icons/file-text.svg") center / contain no-repeat;
          mask: url("../icons/file-text.svg") center / contain no-repeat;
}
.nms-sidenav__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nms-sidenav__sublijst { list-style: none; margin: 0; padding: 0 0 var(--nms-gap-6); }
.nms-sidenav__subingang {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--nms-row-h-sub);
  padding: 0 var(--nms-gap-14) 0 var(--nms-nav-inspring);
  background: none;
  border: none;
  border-radius: var(--radius-none);
  border-left: var(--nms-row-rule-w) solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  color: var(--nms-op-navy-fg-sub);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nms-sidenav__subingang:hover { color: var(--nms-op-navy-fg); background: var(--nms-op-navy-vlak-zacht); }
.nms-sidenav__subingang--actief {
  background: var(--nms-op-navy-vlak);
  border-left-color: var(--nimo-blauwtint);
  color: var(--nms-op-navy-fg);
  font-weight: var(--weight-semibold);
}

.nms-sidenav__voet {
  margin-top: auto;
  padding: var(--nms-gap-14);
  border-top: var(--nms-hairline-w) solid var(--nms-op-navy-lijn);
}

/* Focus op navy: blauwtint, want navy op navy is niet zichtbaar (besluit B2).
   Het token wordt hier lokaal herdefinieerd, precies zoals app-night.css het voor
   de nachtvariant doet. Daarmee volgt élke focusregel binnen de navigatie vanzelf,
   ook die uit base.css van het merksysteem. */
.nms-shell__nav { --focus-ring: var(--nms-focus-ring-on-navy); }
.nms-shell__nav :focus-visible { outline-offset: calc(var(--nms-focus-offset) * -1); }

/* Ingeklapt blijft alleen het teken staan; subpagina's zijn dan niet zichtbaar,
   want een uitklapmenu over de inhoud hoort niet bij dit merk. */
body.nav-ingeklapt .nms-sidenav__label,
body.nav-ingeklapt .nms-sidenav__merktekst,
body.nav-ingeklapt .nms-sidenav__sublijst,
body.nav-ingeklapt .nms-sidenav__voet { display: none; }
body.nav-ingeklapt .nms-sidenav__ingang { justify-content: center; padding-inline: var(--space-2); }
body.nav-ingeklapt .nms-sidenav__kop { justify-content: center; padding-inline: var(--space-2); }

/* ---------------------------------------------------------------------------
 * TopBar — wit vlak, hairline eronder, nooit navy
 * ------------------------------------------------------------------------- */
.nms-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--nms-topbar-h);
  padding: 0 var(--space-5);
}
.nms-topbar__rechts { display: flex; align-items: center; gap: var(--nms-gap-10); flex: none; }

.nms-topbar__thema {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--nms-knop-h);
  padding: 0 var(--nms-cell-pad-x);
  background: none;
  border: var(--nms-hairline-w) solid var(--action-ghost-border);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--nms-text-11);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--nms-tracking-knop);
  line-height: 1;
  color: var(--action-ghost-fg);
  cursor: pointer;
}
.nms-topbar__thema::before {
  content: "";
  width: var(--nms-mark-size);
  height: var(--nms-mark-size);
  background: currentColor;
  -webkit-mask: url("../icons/clock.svg") center / contain no-repeat;
          mask: url("../icons/clock.svg") center / contain no-repeat;
}
.nms-topbar__thema:hover { background: var(--action-ghost-bg-hover); }

/* ---------------------------------------------------------------------------
 * UserMenu — naam plus rol, uitklappend. Geen avatar: het merk heeft er geen.
 * ------------------------------------------------------------------------- */
.nms-usermenu { position: relative; }
.nms-usermenu__knop {
  display: inline-flex;
  align-items: center;
  gap: var(--nms-gap-10);
  height: var(--nms-knop-h);
  padding: 0 var(--nms-gap-10);
  background: none;
  border: var(--nms-hairline-w) solid var(--border-hairline);
  border-radius: var(--radius-none);
  text-align: left;
  cursor: pointer;
}
.nms-usermenu__knop[aria-expanded="true"] { background: var(--surface-subtle); }
.nms-usermenu__naam { display: flex; flex-direction: column; gap: var(--nms-hairline-w); min-width: 0; }
.nms-usermenu__naam strong {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--text-heading);
}
.nms-usermenu__naam span {
  font-size: var(--nms-text-10);
  font-weight: var(--weight-regular);
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nms-usermenu__pijl {
  width: var(--nms-icon-sm);
  height: var(--nms-icon-sm);
  flex: none;
  background: var(--text-heading);
  -webkit-mask: url("../icons/arrow-up-right.svg") center / contain no-repeat;
          mask: url("../icons/arrow-up-right.svg") center / contain no-repeat;
}
.nms-usermenu__knop[aria-expanded="true"] .nms-usermenu__pijl { transform: rotate(180deg); }

/* Een van de drie plekken die mogen zweven (readme applicatielaag). */
.nms-usermenu__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: var(--nms-menu-min-w);
  background: var(--surface-card);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  box-shadow: var(--shadow-raised);
  padding: var(--space-1) 0;
  z-index: 20;
}
.nms-usermenu__item {
  display: block;
  width: 100%;
  min-height: var(--nms-row-h-comfortable);
  padding: 0 var(--nms-gap-14);
  background: none;
  border: none;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--nms-text-13);
  line-height: 1.3;
  color: var(--text-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nms-usermenu__item:hover { background: var(--nms-row-bg-hover); }

/* ---------------------------------------------------------------------------
 * Breadcrumb — middot als scheiding, laatste kruimel is geen link
 * ------------------------------------------------------------------------- */
.nms-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-micro);
  line-height: 1.3;
}
.nms-breadcrumb a { color: var(--text-link); text-decoration: underline; text-underline-offset: var(--nms-gap-2); }
.nms-breadcrumb__huidig {
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nms-breadcrumb__scheiding { color: var(--text-muted); }

/* ---------------------------------------------------------------------------
 * PageHeader — titel in kapitalen met tracking; hier blijft de merkregel gelden
 * ------------------------------------------------------------------------- */
/* De bestaande structuur is al de tweedeling die PageHeader vraagt:
   een titelblok links, acties rechts. Alleen de opmaak komt uit de bron. */
.nms-pageheader {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--nms-gap-28) var(--space-6) var(--space-5);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-pageheader > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--nms-gap-6);
  min-width: 0;
}
/* Titel 20px 600 in kapitalen met tracking: hier blijft de merkregel gelden,
   want het is één regel op ruime maat (kolomkoppen.md). */
.nms-pageheader h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--nms-text-20);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-heading);
}
.nms-pageheader p {
  margin: 0;
  max-width: var(--nms-measure-wide);
  font-size: var(--nms-text-13);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.nms-pageheader .btn-row { flex: none; }
/* Kopmeta — de vaste gegevens van dit record naast elkaar, label boven waarde.
   Een <dl> krijgt van de browser een inspringing van 40px op de <dd>; die staat
   hier uit, anders zweeft de waarde los van zijn label. */
.nms-pageheader__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nms-gap-6) var(--space-5);
  margin: var(--nms-gap-6) 0 0;
}
.nms-pageheader__meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nms-pageheader__meta dt {
  font-size: var(--nms-text-11);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nms-pageheader__meta dd {
  margin: 0;
  font-size: var(--nms-text-13);
  line-height: 1.3;
  color: var(--text-body);
}

/* De inhoud onder de kop krijgt dezelfde zijmarge. */
.nms-inhoud { padding: var(--space-5) var(--space-6) 0; }

/* ---------------------------------------------------------------------------
 * MyItemsColumn — wat er van mij wordt verwacht, en hoe ik ervoor sta
 * ------------------------------------------------------------------------- */
.nms-items { display: flex; flex-direction: column; height: 100%; }
.nms-items__kop {
  padding: var(--nms-gap-18) var(--space-5) var(--nms-gap-14);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-items__kop h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-heading);
}

.nms-items__taak {
  display: flex;
  flex-direction: column;
  gap: var(--nms-gap-5);
  padding: var(--nms-cell-pad-x) var(--space-5);
  border-bottom: var(--nms-hairline-w) solid var(--nms-table-line);
  text-decoration: none;
  color: var(--text-body);
}
.nms-items__taak:hover { background: var(--nms-row-bg-hover); }
.nms-items__taakregel { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.nms-items__taaklabel { font-size: var(--nms-text-13); line-height: 1.35; color: var(--text-body); }
.nms-items__taakmeta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--nms-taak-inspring);
  font-size: var(--nms-text-11);
  line-height: 1.3;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-muted);
}

/* Voortgang is geen badge maar een balk met doelstreep. */
.nms-items__doel {
  display: flex;
  flex-direction: column;
  gap: var(--nms-gap-10);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
}
.nms-items__doeltitel {
  font-size: var(--nms-text-11);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nms-items__doelregel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nms-gap-10); }
.nms-items__doelcijfer {
  font-size: var(--nms-text-22);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: var(--nms-numeric);
  color: var(--text-heading);
}
.nms-items__doelnoot { font-size: var(--nms-text-11); line-height: 1.3; color: var(--text-muted); text-align: right; }
.nms-items__balk { position: relative; height: var(--nms-balk-h); background: var(--nms-skeleton-bar); }
.nms-items__balkvulling { position: absolute; inset: 0 auto 0 0; background: var(--nms-severity-on); }
/* Waar de doelstelling nú zou moeten staan: achterstand is af te lezen zonder kleur. */
.nms-items__doelstreep {
  position: absolute;
  top: calc(var(--nms-row-rule-w) * -1);
  bottom: calc(var(--nms-row-rule-w) * -1);
  width: var(--nms-hairline-w);
  background: var(--nms-accent-rule);
}

/* Aankondigingen beloven niets meetbaars en dragen geen actie. */
.nms-items__aankondiging {
  margin: var(--space-4) var(--space-5) 0;
  padding: var(--nms-gap-14) var(--space-4);
  background: var(--surface-subtle);
  border: var(--nms-hairline-w) dashed var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--nms-gap-6);
}
.nms-items__aankondiging strong { font-size: var(--text-micro); line-height: 1.3; color: var(--text-heading); }
.nms-items__aankondiging span { font-size: var(--nms-text-11); line-height: 1.5; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
 * Onder 860px: één kolom, navigatie bovenaan, rechterkolom onder de inhoud
 * (guidelines/breekpunt-860.md). De rechterkolom gaat eronder, niet weg.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body, body.nav-ingeklapt { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  /* De navigatie staat hier niet meer vast, dus alleen de body-afstand telt. */
  body.rolwissel .nms-shell__nav { top: auto; height: auto; }
  .nms-shell__nav {
    grid-column: 1; grid-row: 1;
    position: static; height: auto;
    border-right: none;
    border-bottom: var(--nms-hairline-w) solid var(--border-hairline);
  }
  .nms-shell__topbar { grid-column: 1; grid-row: 2; }
  .nms-shell__main { grid-column: 1; grid-row: 3; }
  .nms-shell__aside {
    grid-column: 1; grid-row: 4;
    border-left: none;
    border-top: var(--nms-hairline-w) solid var(--border-hairline);
  }
  .nms-sidenav__lijst { flex-direction: row; overflow-x: auto; padding-inline: var(--space-2); }
  .nms-sidenav__sublijst { display: none; }
  .nms-pageheader { padding-inline: var(--space-4); }
  .nms-inhoud { padding-inline: var(--space-4); }
}