/* ============================================================================
   SVS HRM — de paneelgrammatica

   Dit bestand is de kern van het herontwerp. Het vervangt vijftien
   zelfgebouwde rijweergaven (verzuimregel, gesprekregel, taakregel, certrij,
   contractrij, dosrij, komtrij, dagregel, ondertekenregel …) door één stelsel.

   ## Waarom een schakelpaneel

   De hoofdgebruiker draagt het hele systeem maar komt er een paar keer per week
   in. Er ontstaat dus geen spiergeheugen, en dat sluit een hele categorie
   oplossingen uit: sneltoetsen, verborgen menu's, iconen zonder tekst,
   functies die je moet weten te vinden.

   Een schakelpaneel lost precies dat op, en het is bovendien de wereld van dit
   bedrijf — monteurs openen dagelijks meterkasten. De grammatica:

     · elk ding heeft een gegraveerd label, permanent en leesbaar;
     · de legenda staat op het paneel zelf, je hoeft niets te onthouden;
     · zones worden gescheiden door een lijn, niet door een doos in een doos;
     · een lampje is aan, uit of storing — nooit een verloop;
     · toestand is vorm plus label plus kleur, nooit kleur alleen;
     · meetwaarden staan in tabelcijfers zodat een kolom vergelijkbaar is.

   Wat het NIET is: een plaatje van een meterkast. Geen geborsteld metaal, geen
   schroefjes, geen 3D-tuimelschakelaars. Dat zou de taak in de weg zitten en is
   in Operate-modus terecht verboden. Het is de *documentatie* van een paneel —
   de legendakaart, de gegraveerde strip, het titelblok — gezet in Nederlandse
   systematische druk.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Zonelabel
   Het gegraveerde plaatje. Klein, gespatieerd, kapitaal. Overal waar een groep
   een naam heeft: boven een paneel, boven een navigatieveld, boven een
   veldgroep in een formulier. Eén vorm, één betekenis.
   ------------------------------------------------------------------------ */
/* `.micro` is de oudere naam voor ditzelfde label. Hij stond in stijl.css met een
   ándere behandeling — kleine letters, ruim gespatieerd — waardoor hetzelfde soort
   label er op twee plekken in het systeem verschillend uitzag. Eén vorm. */
/* Het kleine label boven een groep. Hoofdletters en licht gespatieerd, maar rustig:
   het ordent, het schreeuwt niet. */
.zonelabel, .micro {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-xs);
  font-weight: var(--label-gewicht);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   2. Paneel
   De zone. Vervangt `.kaart`. Een paneel heeft een kop met een gegraveerd
   label, een lijf, en soms een voet met de legenda.
   ------------------------------------------------------------------------ */
/* Een paneel is een kaart met een kop; de vorm zelf staat in componenten.css,
   samen met `.kaart`. Hier alleen wat een paneel extra heeft. */
.paneel { margin-bottom: var(--ruimte-4); }
.paneel:last-child { margin-bottom: 0; }

.paneel-kop {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--inspring);
  border-bottom: 1px solid var(--border);
}
.paneel-kop h2,
.paneel-kop h3 { font-size: var(--tekst-kaart); font-weight: 620;
  letter-spacing: -.008em; }
.paneel-kop .rechts { margin-left: auto; display: flex; gap: var(--ruimte-2);
  align-items: center; }

/* Het aantal in de kop: een meterstand, dus tabelcijfers. */
.paneel-kop .stand {
  font-variant-numeric: tabular-nums;
  font-size: var(--tekst-s);
  font-weight: 640;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border-radius: var(--radius-pil);
  padding: 1px var(--ruimte-2);
  min-width: 22px;
  text-align: center;
}

.paneel-lijf { padding: var(--inspring); }
.paneel-lijf.strak { padding: 0; }          /* voor een regellijst tot de rand */
.paneel-voet {
  padding: var(--ruimte-2) var(--inspring);
  border-top: 1px solid var(--border);
  background: var(--vlak-zacht);
  border-radius: 0 0 var(--radius-3) var(--radius-3);
}

/* ---------------------------------------------------------------------------
   3. Lamp
   Het statuslampje. Vaste diameter, discrete toestanden, en **altijd** met
   tekst ernaast — kleur draagt hier nooit alleen de betekenis (WCAG 1.4.1).

   Storing krijgt bovendien een ring: wie kleur niet onderscheidt ziet dan nog
   steeds dat dit lampje anders is dan de rest.
   ------------------------------------------------------------------------ */
.lamp {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-s);
  color: var(--text-secondary);
  white-space: nowrap;
}
.lamp::before {
  content: "";
  inline-size: var(--lamp);
  block-size: var(--lamp);
  border-radius: 50%;
  flex: none;
  background: var(--neutral);
}
.lamp.aan::before      { background: var(--svs-green-700); }
.lamp.wacht::before    { background: var(--information); }
.lamp.letop::before    { background: var(--warning); }
.lamp.storing::before  { background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--danger); }
.lamp.uit::before      { background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--border-interactive); }

.lamp.aan     { color: var(--svs-green-800); }
.lamp.wacht   { color: var(--information); }
.lamp.letop   { color: var(--warning); }
.lamp.storing { color: var(--danger); font-weight: 620; }

/* ---------------------------------------------------------------------------
   4. Legenda
   Staat op het paneel, niet in een handleiding. Verschijnt onder een lijst
   zodra die lampjes gebruikt die niet vanzelf spreken.
   ------------------------------------------------------------------------ */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-5);
  font-size: var(--tekst-xs);
  color: var(--text-muted);
}
.legenda .lamp { font-size: var(--tekst-xs); }

/* ---------------------------------------------------------------------------
   5. Regel — het werkpaard
   Eén rijcomponent voor alles wat een lijst van dingen is. Vaste sleufvolgorde,
   zodat je op elk scherm op dezelfde plek kijkt:

     merk · naam+onder · meta · stand · acties

   De meta-sleuven zijn tabelcijfers en rechts uitgelijnd, zodat een kolom
   verticaal vergelijkbaar blijft — dat is het hele punt van een meterstand.
   ------------------------------------------------------------------------ */
.regellijst { display: flex; flex-direction: column; }

.regel {
  display: grid;
  grid-template-columns:
    auto                              /* merk */
    minmax(10rem, 1.6fr)              /* naam */
    auto                              /* meta */
    auto                              /* stand */
    max-content;                      /* acties */
  align-items: center;
  gap: var(--regel-lucht) var(--ruimte-4);
  min-height: var(--rij-hoogte);
  padding: var(--regel-lucht) var(--inspring);
  border-bottom: var(--lijn-regel) solid var(--border);
}
.regel:last-child { border-bottom: none; }

/* Een aanklikbare regel: de hele rij is het doelwit, niet alleen de naam. */
a.regel, .regel.klikbaar { text-decoration: none; color: inherit; }
a.regel:hover, .regel.klikbaar:hover { background: var(--surface-subtle); }

/* Een regel die aandacht vraagt krijgt een gegraveerde inzet aan de kopse kant
   — geen gekleurd vlak over de hele rij, dat schreeuwt en maakt tekst slechter
   leesbaar. */
.regel.vraagt-aandacht { box-shadow: inset var(--graveerdiepte) 0 0 var(--warning); }
.regel.urgent          { box-shadow: inset var(--graveerdiepte) 0 0 var(--danger); }

.regel-merk { display: flex; align-items: center; }
/* Lege sleuven verdwijnen; de overige blijven op hun plek staan. */
.regel-merk:empty, .regel-meta:empty, .regel-stand:empty, .regel-acties:empty {
  display: none;
}

/* Een lege sleuf verdwijnt, maar mag de overige niet verschuiven.

   `display: none` haalt het element uit de automatische plaatsing. Staat de lege sleuf
   vooraan, dan schuift alles erachter een kolom op en krijgt de meta de flexibele track
   in plaats van de naam. De uitlijning van een kolom meetwaarden — de reden dat de meta
   bestaat — verdween daarmee in elke lijst zonder merkteken.

   Alleen een lege sleuf váór de naam kan dit veroorzaken; wat achteraan wegvalt, laat de
   plaatsing van de rest ongemoeid. Er is dus één extra sjabloon nodig, geen vier. */
.regel:has(> .regel-merk:empty) {
  grid-template-columns:
    minmax(10rem, 1.6fr)              /* naam */
    auto                              /* meta */
    auto                              /* stand */
    max-content;                      /* acties */
}

/* `regel-tekst` is de oudere naam voor dezelfde sleuf. Beide werken, zodat de
   bestaande aanroepen niet allemaal tegelijk om hoeven. */
.regel-naam, .regel-tekst { min-width: 0; display: flex; flex-direction: column;
  gap: 1px; }
.regel-naam .titel, .regel-tekst .titel {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.regel-naam-link { color: inherit; text-decoration: none; font-weight: 600; }
a.regel-naam-link:hover { text-decoration: underline; }
/* Een onderregel die een uitleg draagt in plaats van een kenmerk, mag omlopen:
   hij staat nergens anders en met een puntje eraan is hij weg. */
.regel-naam .onder.uitleg, .regel-tekst .onder.uitleg {
  white-space: normal; overflow: visible;
}
.regel-naam .onder, .regel-tekst .onder {
  font-size: var(--tekst-s);
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.regel-meta { display: flex; align-items: baseline; gap: var(--ruimte-5); }
.regel-meta > * { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.regel-meta .waarde {
  font-variant-numeric: tabular-nums;
  font-size: var(--tekst-m);
  color: var(--text-primary);
  white-space: nowrap;
}
.regel-meta .wat {
  font-size: var(--tekst-xs);
  color: var(--text-muted);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
}

.regel-stand { display: flex; align-items: center; gap: var(--ruimte-3);
  flex-wrap: wrap; }
.regel-acties { display: flex; align-items: center; gap: var(--ruimte-2);
  justify-content: flex-end; }

/* Onder 900 px vouwt de regel om: naam over de volle breedte, meta en stand
   eronder. De sleufvolgorde blijft, dus je kijkt nog steeds op dezelfde plek. */
@media (max-width: 899px) {
  .regel {
    grid-template-columns: auto 1fr auto;
    row-gap: var(--ruimte-2);
  }
  .regel-naam, .regel-tekst { grid-column: 2 / -1; }
  .regel-meta  { grid-column: 1 / 3; gap: var(--ruimte-4); }
  .regel-meta > * { text-align: left; }
  .regel-stand { grid-column: 3; justify-content: flex-end; }
  .regel-acties { grid-column: 1 / -1; justify-content: flex-start;
    flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   6. Titelblok
   Zoals op een installatietekening: wie, wat, welke versie, geldig vanaf.
   Staat boven aan een medewerkerkaart, het reglement, een dossierstuk.
   Het antwoord op "waar ben ik" staat hier, niet in een broodkruimel.
   ------------------------------------------------------------------------ */
/* Zonder merkteken geen kolom ervoor. `grid-template-columns` met een vaste eerste
   kolom reserveerde die ruimte ook als er niets in stond, en de rasterruimte kwam er
   nog bij: de paginatitel stond dan 24 pixels rechts van alles eronder. */
.titelblok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ruimte-3) var(--ruimte-5);
  padding: var(--ruimte-4) 0 var(--ruimte-4);
  border-bottom: var(--lijn-zone) solid var(--border-strong);
  margin-bottom: var(--ruimte-5);
}
.titelblok:has(.titelblok-merk) { grid-template-columns: auto minmax(0, 1fr) auto; }
.titelblok-merk { display: flex; align-items: center; }
.titelblok-wat { min-width: 0; }
.titelblok-wat .context {
  font-size: var(--tekst-xs);
  font-weight: var(--label-gewicht);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.titelblok-wat h1 { font-size: var(--tekst-pagina); }
.titelblok-wat .onder {
  margin-top: var(--ruimte-1);
  font-size: var(--tekst-m);
  color: var(--text-secondary);
}
.titelblok-stand { display: flex; align-items: center; gap: var(--ruimte-3);
  flex-wrap: wrap; justify-content: flex-end; }
.titelblok-acties { grid-column: -2; display: flex; gap: var(--ruimte-2);
  align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* De gegevensstrip onder het titelblok: de kerngetallen van dit object,
   gescheiden door haarlijnen in plaats van los in kaartjes. */
.titelblok-gegevens {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: var(--lijn-regel) solid var(--border);
  padding-top: var(--ruimte-3);
  margin-top: var(--ruimte-1);
}
.titelblok-gegevens > div {
  padding: 0 var(--ruimte-5) 0 0;
  margin-right: var(--ruimte-5);
  border-right: var(--lijn-regel) solid var(--border);
}
.titelblok-gegevens > div:last-child { border-right: none; margin-right: 0; }
.titelblok-gegevens .wat {
  display: block;
  font-size: var(--tekst-xs);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--text-muted);
}
.titelblok-gegevens .waarde {
  font-size: var(--tekst-l);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .titelblok { grid-template-columns: auto 1fr; }
  .titelblok-stand, .titelblok-acties { grid-column: 1 / -1;
    justify-content: flex-start; }
  .titelblok-gegevens > div { padding-right: var(--ruimte-4);
    margin-right: var(--ruimte-4); }
}

/* ---------------------------------------------------------------------------
   7. Meetwaarde
   Vervangt de rij KPI-kaarten. Dezelfde informatie, maar als afleesstrip op
   één paneel in plaats van vier losse dozen — dat scheelt drie randen, drie
   schaduwen en het idee dat het losse dingen zijn.
   ------------------------------------------------------------------------ */
.afleesstrip {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  background: var(--vlak);
  box-shadow: var(--schaduw-1);
  margin-bottom: var(--ruimte-4);
  overflow: hidden;
}
.afleesstrip > * {
  flex: 1 1 8rem;
  min-width: 0;
  padding: var(--ruimte-3) var(--inspring);
  border-right: var(--lijn-regel) solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: inherit;
}
.afleesstrip > *:last-child { border-right: none; }
a.meetwaarde:hover { background: var(--surface-subtle); }
.meetwaarde .cijfer {
  font-size: var(--tekst-sectie);
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text-primary);
}
.meetwaarde .wat {
  font-size: var(--tekst-xs);
  font-weight: var(--label-gewicht);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--text-muted);
}
.meetwaarde.letop .cijfer   { color: var(--warning); }
.meetwaarde.storing .cijfer { color: var(--danger); }
.meetwaarde.aan .cijfer     { color: var(--svs-green-800); }

/* ---------------------------------------------------------------------------
   8. Veldgroep
   Formulieren krijgen dezelfde zone-indeling als panelen: een gegraveerd
   label, een haarlijn, dan de velden. Zo lijkt een formulier op de rest van
   het systeem in plaats van op een apart ding.
   ------------------------------------------------------------------------ */
.veldgroep { margin-bottom: var(--ruimte-6); }
.veldgroep:last-child { margin-bottom: 0; }
.veldgroep > .zonelabel {
  padding-bottom: var(--ruimte-2);
  border-bottom: var(--lijn-regel) solid var(--border);
  margin-bottom: var(--ruimte-4);
}

/* ---------------------------------------------------------------------------
   9. Tabelcijfers
   Overal waar getallen onder elkaar staan. Als losse hulpklasse omdat het ook
   in tabellen en tekst nodig is.
   ------------------------------------------------------------------------ */
.getal, .cijfer, td.getal, .waarde {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   10. Deelrail
   De tweede laag navigatie binnen een zone. Bewust anders van vorm dan de
   tabbladen erboven: die zijn onderstreept, deze zijn pillen. Wie kijkt moet
   zonder nadenken zien welke van de twee rijen de hoofdindeling is.
   ------------------------------------------------------------------------ */
.deelrail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-1);
  margin: 0 0 var(--ruimte-5);
  padding-bottom: var(--ruimte-1);
}
.deelrail a {
  display: inline-flex;
  align-items: center;
  /* 44px, niet 32: PRODUCT.md noemt het raakvlak een gebruikseis omdat monteurs
     dit met handschoenen bedienen. WCAG 2.5.8 zou 24px toestaan; de eigen norm
     is strenger en die geldt. */
  min-block-size: var(--raakvlak);
  padding: 0 var(--ruimte-4);
  border-radius: var(--radius-pil);
  font-size: var(--tekst-m);
  font-weight: 560;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.deelrail a:hover { background: var(--surface-sunken); color: var(--text-primary); }
.deelrail a[aria-current="page"] {
  background: var(--svs-ink-900);
  color: var(--text-on-dark);
  font-weight: 620;
}

/* ---------------------------------------------------------------------------
   11. Tekstgroottekiezer
   In het gebruikersmenu. Drie standen met de letter A op ware grootte, zodat je
   kiest wat je ziet in plaats van een woord dat je moet vertalen.
   ------------------------------------------------------------------------ */
.menukop {
  padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-1);
  font-size: var(--tekst-xs);
  font-weight: var(--label-gewicht);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--text-muted);
}
.tekstkiezer { display: flex; gap: var(--ruimte-1); padding: 0 var(--ruimte-2)
  var(--ruimte-2); }
.tekststap {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  min-height: var(--raakvlak);
  padding: var(--ruimte-2) var(--ruimte-1);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-2);
  cursor: pointer;
}
.tekststap input { position: absolute; inset: 0; opacity: 0; margin: 0;
  cursor: pointer; }
.tekststap .letter { font-weight: 660; line-height: 1; color: var(--text-primary); }
.tekststap:nth-child(1) .letter { font-size: var(--monster-compact); }
.tekststap:nth-child(2) .letter { font-size: var(--monster-normaal); }
.tekststap:nth-child(3) .letter { font-size: var(--monster-groot); }
.tekststap .naam { font-size: var(--tekst-xs); color: var(--text-secondary); }
.tekststap:hover { border-color: var(--svs-green-700); }
.tekststap.gekozen {
  border-color: var(--svs-green-700);
  background: var(--svs-green-50);
  box-shadow: inset 0 0 0 1px var(--svs-green-700);
}
.tekststap.gekozen .naam { color: var(--svs-green-800); font-weight: 620; }
.tekststap:focus-within { outline: var(--focusring) solid var(--svs-green-700);
  outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   12. Meerblad
   Wat op een telefoon anders onbereikbaar is. Schuift van onder in beeld, want
   daar staat de duim — niet van boven, waar niets te bedienen valt.
   ------------------------------------------------------------------------ */
.meerlaag {
  position: fixed; inset: 0; z-index: 60;
  display: grid; align-items: end;
  background: var(--sluier-zacht);
}
.meerpaneel {
  background: var(--surface);
  border-radius: var(--radius-4) var(--radius-4) 0 0;
  padding: var(--ruimte-3) var(--ruimte-4)
           calc(var(--ruimte-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--ruimte-3);
  max-block-size: 88dvh; overflow-y: auto;
  animation: meeromhoog var(--duur-normaal) var(--uitloop) both;
}
@keyframes meeromhoog { from { transform: translateY(12%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .meerpaneel { animation: none; } }

/* De greep bovenaan zegt zonder woorden dat dit blad weg kan. */
.meergreep {
  inline-size: 36px; block-size: 4px; border-radius: var(--radius-pil);
  background: var(--border-strong); margin: 0 auto var(--ruimte-2);
}
.meerwie { display: flex; align-items: center; gap: var(--ruimte-3);
  padding-bottom: var(--ruimte-3); border-bottom: var(--lijn-regel) solid var(--border); }
.meerwie > span { display: flex; flex-direction: column; min-width: 0; }
.meerwie .naam { font-weight: 620; }
.meergroep { display: flex; flex-direction: column; gap: var(--ruimte-1);
  padding-top: var(--ruimte-3); border-top: var(--lijn-regel) solid var(--border); }
.knop.gevaartekst { color: var(--danger); }

/* De "Meer"-knop hoort in de onderbalk op dezelfde vorm te staan als de links
   ernaast, anders leest hij als iets anders dan navigatie. */
.onderbalk #meerknop {
  background: none; border: none; font: inherit;
}

/* Het urgentiewoord op de signaalregel. Klein en gegraveerd, in dezelfde kleur
   als het lampje ernaast — maar het wóórd is de drager, niet de kleur. */
.urgentiewoord {
  font-size: var(--tekst-xs);
  font-weight: var(--label-gewicht);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
}
.urgentiewoord.u1 { color: var(--danger); }
.urgentiewoord.u2 { color: var(--warning); }
.urgentiewoord.u3 { color: var(--information); }


/* De signaalregels zitten nu in een paneel. Een rand om elke regel binnen een
   omrand paneel is een doos in een doos — precies wat deze grammatica weigert.
   De scheiding is een haarlijn, zoals overal. */
.paneel .signalen { display: block; }
.paneel .signalen .signaal {
  border: none;
  border-bottom: var(--lijn-regel) solid var(--border);
  border-radius: 0;
  padding: var(--regel-lucht) var(--inspring);
}
.paneel .signalen .signaal:last-child { border-bottom: none; }
.paneel .signalen .signaal.sluimert { border-style: none none solid none; }


/* ---------------------------------------------------------------------------
   13. Inloggen
   Het eerste wat iemand van dit systeem ziet. Hier stonden twee merkgloeden van
   620 pixels achter een zwevende kaart — sfeer zonder functie. Wat er nu staat is
   wat er te doen valt: het merk, twee velden, een knop. De vlam uit het logo blijft
   als enige merkteken, groot en rustig.
   ------------------------------------------------------------------------ */
.inlog {
  min-block-size: 100dvh;
  display: grid; place-items: center;
  padding: var(--ruimte-5);
  background: var(--canvas);
}
.inlog-kaart {
  inline-size: min(100%, 27rem);
  background: var(--surface);
  border: var(--lijn-zone) solid var(--border);
  border-radius: var(--radius-3);
  padding: var(--ruimte-7) var(--ruimte-6) var(--ruimte-6);
}
.inlog-merk { display: flex; justify-content: center; margin-bottom: var(--ruimte-5); }
.inlog-merk img, .inlog-merk svg { block-size: 44px; inline-size: auto; }
.inlog-titel {
  text-align: center;
  padding-bottom: var(--ruimte-5);
  margin-bottom: var(--ruimte-5);
  border-bottom: var(--lijn-regel) solid var(--border);
}
.inlog-titel h2 { font-size: var(--tekst-sectie); }
.inlog-onder {
  display: block; margin-top: var(--ruimte-1);
  font-size: var(--tekst-m); color: var(--text-secondary);
}


/* ---------------------------------------------------------------------------
   14. Het panelenraster op de medewerkerkaart
   Was een eigen tegelstelsel met eigen doos, kop, link en schaduw. `.tegel` is nu
   een `.paneel` met een andere naam: dezelfde rand, dezelfde kop, dezelfde lucht.
   Alleen wat hier uniek is blijft eigen — het grote getal en de actiestrook.
   ------------------------------------------------------------------------ */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: var(--ruimte-4);
  align-items: start;
}
.tegel {
  background: var(--vlak);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--schaduw-1);
  padding: var(--inspring);
}
.tegel.breed { grid-column: 1 / -1; }

.tegelkop {
  display: flex; align-items: center; gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-3);
  padding-bottom: var(--ruimte-2);
  border-bottom: 1px solid var(--border);
}
.tegelkop h3 { flex: 1; min-width: 0; overflow-wrap: anywhere;
  font-size: var(--tekst-kaart); font-weight: 620; letter-spacing: -.008em; }

/* Het raakvlak is groter dan de tekst: een link van 19 px is met een duim niet te
   raken. De negatieve marge houdt de tekst optisch op zijn plek. */
.tegellink {
  display: inline-flex; align-items: center;
  min-block-size: var(--raakvlak); padding: 0 var(--ruimte-2);
  margin-inline-end: calc(var(--ruimte-2) * -1);
  font-size: var(--tekst-s); font-weight: 600; text-decoration: none;
  color: var(--text-muted); border-radius: var(--radius-1); white-space: nowrap;
}
.tegellink:hover { color: var(--svs-green-800); background: var(--svs-green-50); }

.kpis { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--ruimte-4); }
.kpi .kpiwaarde { font-size: var(--tekst-kaart); font-weight: 620;
  letter-spacing: -.01em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.kpi .kpiextra { font-size: var(--tekst-xs); color: var(--text-muted); }

.tegelgroot { font-size: var(--tekst-sectie); font-weight: 650; letter-spacing: -.02em;
  line-height: var(--regelhoogte-kop); font-variant-numeric: tabular-nums; }
.tegelgroot span { font-size: var(--tekst-s); font-weight: 550;
  color: var(--text-muted); letter-spacing: 0; }
.tegelregel { margin-top: var(--ruimte-2); font-size: var(--tekst-m);
  color: var(--text-secondary); }
.tegelregel.klein { font-size: var(--tekst-s); color: var(--text-muted); }
.tegelleeg { display: flex; align-items: flex-start; gap: var(--ruimte-2);
  font-size: var(--tekst-m); color: var(--text-muted); }
.tegelleeg svg { width: 16px; height: 16px; flex: none;
  color: var(--svs-green-700); margin-top: 2px; }

/* De actiestrook: wat er moet gebeuren, in woorden. Een gegraveerde inzet aan de
   kopse kant in plaats van een gevuld gekleurd vlak — zie de regel over gravure. */
.tegelactie {
  margin-top: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--radius-1);
  font-size: var(--tekst-s); font-weight: 600;
  background: var(--warning-bg); color: var(--warning);
  box-shadow: inset var(--graveerdiepte) 0 0 var(--warning);
}
.tegelactie.urgent { background: var(--danger-bg); color: var(--danger);
  box-shadow: inset var(--graveerdiepte) 0 0 var(--danger); }

/* ---------------------------------------------------------------------------
   15. Rapportage
   Meterstanden en verdelingen, en één grafiek. De staven dragen de inktkleur en
   niet groen of rood: verzuim is een meting, geen oordeel.
   ------------------------------------------------------------------------ */
.tweeluik { display: grid; gap: var(--ruimte-5);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.tweeluik-breed { display: grid; gap: var(--ruimte-4); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  margin-bottom: var(--ruimte-4); }
.tweeluik-breed > .paneel { margin-bottom: 0; }

/* Een verdeling is geen grafiek maar een lijst met een maatstreep ernaast: bij
   vijf regels leest de naam sneller dan welke vorm ook. */
.verdeling { display: flex; flex-direction: column; }
/* De naam krijgt meer ruimte dan de balk: bij vijf regels is de naam waar het om
   gaat en de balk alleen de verhouding. "Rick van Plateri..." is een fout. */
.verdeelrij { display: grid;
  grid-template-columns: minmax(9rem, 1.6fr) minmax(48px, 1.4fr) auto;
  align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-2) 0; border-bottom: var(--lijn-regel) solid var(--border); }
.verdeelrij:last-child { border-bottom: none; }
.verdeelrij { align-items: center; }
/* Een functienaam mag over twee regels: hem afkappen kost informatie waar de
   verhoudingsbalk ernaast niets voor teruggeeft. */
.verdeelrij .naam { font-size: var(--tekst-m); color: var(--text-primary);
  overflow-wrap: anywhere; }
a.naam { text-decoration: none; }
a.naam:hover { text-decoration: underline; }
.verdeelrij .waarde { font-size: var(--tekst-m); font-weight: 620; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.staafje { block-size: 8px; border-radius: var(--radius-pil);
  background: var(--surface-sunken); overflow: hidden; }
.staafje i { display: block; block-size: 100%; inline-size: 100%;
  transform-origin: left; background: var(--svs-ink-700);
  border-radius: var(--radius-pil); }

.grafiek { margin: 0; }
.grafiek svg { inline-size: 100%; block-size: auto; }
.grafiek .staaf { fill: var(--svs-ink-700); }
.grafiek .as { stroke: var(--border-strong); stroke-width: 1; }
/* De referentielijn is gestippeld én staat in de bijschrift genoemd: een lijn die
   alleen visueel bestaat, bestaat niet voor wie hem niet ziet. */
.grafiek .referentie { stroke: var(--text-muted); stroke-width: 1.5;
  stroke-dasharray: 4 4; }
.grafiek .staaflabel { font-size: var(--tekst-xs); fill: var(--text-muted); text-anchor: middle;
  font-family: var(--letter); }
/* De asmarkeringen beginnen links en centreren niet: gecentreerd viel de helft
   buiten het tekenvlak. */
.grafiek .aslabel { font-size: var(--tekst-xs); fill: var(--text-muted); text-anchor: start;
  font-family: var(--letter); font-variant-numeric: tabular-nums; }
.grafiek .staafwaarde { font-size: var(--tekst-xs); fill: var(--text-primary); text-anchor: middle;
  font-weight: 620; font-family: var(--letter); font-variant-numeric: tabular-nums; }
.grafiek figcaption { margin-top: var(--ruimte-2); font-size: var(--tekst-s);
  color: var(--text-secondary); }

.opsomming { list-style: none; margin: 0 0 var(--ruimte-3); padding: 0;
  display: flex; flex-direction: column; gap: var(--ruimte-2); }
.opsomming:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   16. De werkbank
   Twee panelen naast elkaar in plaats van een pagina. Links het register, dat
   blijft staan; rechts het werk. Geen paginakop, geen uitlegzin: de naam van de
   persoon is de kop, want die verandert wél.
   ------------------------------------------------------------------------ */
.werkbank {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 0;
  /* Het werkblad heeft padding voor gewone pagina's; die haalt de werkbank weg,
     want twee panelen die het scherm vullen horen tot de rand te lopen. */
  margin: calc(var(--ruimte-6) * -1) calc(var(--ruimte-8) * -1)
          calc(var(--ruimte-9) * -1);
  min-block-size: 100dvh;
  background: var(--vlak);
}

.register {
  display: flex; flex-direction: column; min-inline-size: 0;
  border-right: 1px solid var(--border);
  background: var(--vlak);
  position: sticky; top: 0; block-size: 100dvh;
}
.registerzoek {
  display: flex; gap: var(--ruimte-2); align-items: center;
  padding: var(--ruimte-3);
  border-bottom: 1px solid var(--border);
}
.registerzoek input {
  flex: 1; min-inline-size: 0;
  min-block-size: 36px; padding: 0 var(--ruimte-3);
  border: 1px solid var(--border-interactive); border-radius: var(--radius-2);
  background: var(--vlak); font-size: var(--tekst-l);
}
.registerlijst { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--ruimte-2); }
.registerleeg { padding: var(--ruimte-5) var(--ruimte-3); color: var(--text-muted);
  font-size: var(--tekst-m); }
.registervoet { padding: var(--ruimte-2) var(--ruimte-3);
  border-top: 1px solid var(--border); background: var(--vlak-zacht); }

.registerregel {
  display: flex; align-items: center; gap: var(--ruimte-3);
  min-block-size: var(--raakvlak);
  padding: var(--ruimte-2) var(--ruimte-2);
  border-radius: var(--radius-2);
  text-decoration: none; color: inherit;
}
.registerregel:hover { background: var(--vlak-diep); }
/* Actief is de accentkleur — het is een toestand van de navigatie. */
.registerregel.actief { background: var(--accent-zacht); }
.registerregel.actief .naam { color: var(--accent-tekst, var(--accent)); font-weight: 640; }
.registerregel .wie { min-inline-size: 0; display: flex; flex-direction: column; }
.registerregel .naam { font-size: var(--tekst-l); font-weight: 560;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registerregel .rol { font-size: var(--tekst-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registerregel .teken {
  margin-inline-start: auto; flex: none;
  min-inline-size: 20px; padding: 1px 6px; text-align: center;
  border-radius: var(--radius-pil); font-size: var(--tekst-xs); font-weight: 700;
  background: var(--warning-bg); color: var(--warning);
}
.registerregel .teken.urgent { background: var(--danger-bg); color: var(--danger); }

.werkvlak { min-inline-size: 0; display: flex; flex-direction: column; }
.werkvlak-leeg { display: grid; place-items: center; flex: 1; padding: var(--ruimte-8); }

.werkkop { padding: var(--ruimte-5) var(--ruimte-6) 0;
  border-bottom: 1px solid var(--border); background: var(--vlak); }
.werkwie { display: flex; align-items: flex-start; gap: var(--ruimte-4);
  margin-bottom: var(--ruimte-4); }
.werkwie h1 { font-size: var(--tekst-pagina); }
.werkfeiten { margin: var(--ruimte-1) 0 0; font-size: var(--tekst-m);
  color: var(--text-secondary); }
.werkfeiten .scheid { color: var(--text-muted); margin: 0 6px; }
.werkstand { margin-inline-start: auto; }

.werkzones { display: flex; gap: var(--ruimte-5); }
.werkzones a {
  padding: var(--ruimte-2) 0 var(--ruimte-3);
  border-bottom: 2px solid transparent;
  text-decoration: none; color: var(--text-secondary);
  font-size: var(--tekst-l); font-weight: 560; white-space: nowrap;
}
.werkzones a:hover { color: var(--text-primary); }
.werkzones a[aria-current="page"] { color: var(--accent-tekst, var(--accent));
  border-bottom-color: var(--accent-vorm, var(--accent));
  font-weight: 640; }

.werkinhoud { padding: var(--ruimte-5) var(--ruimte-6) var(--ruimte-8);
  background: var(--grond); flex: 1; }
.werkinhoud > * + * { margin-top: var(--ruimte-5); }
.werkinhoud .afleesstrip { margin-top: 0; }
/* De naamgroep in de werkkop is dezelfde groep als op de medewerkerkaart. */
.werkwie .kopgroep { flex: 1; min-inline-size: 0; }

@media (max-width: 1023px) {
  /* Op een smal scherm passen twee panelen niet naast elkaar. Dan is het weer een
     lijst die naar een detail leidt — met de terugweg via het register bovenaan. */
  .werkbank { grid-template-columns: minmax(0, 1fr); margin: 0; min-block-size: 0; }
  .register { position: static; block-size: auto; max-block-size: 40dvh;
    border-right: none; border-bottom: 1px solid var(--border); }
  .werkkop, .werkinhoud { padding-inline: var(--ruimte-4); }
}


/* Een paneel dat leeg is zegt dat met een zin, niet met witruimte: witruimte kan
   ook betekenen dat er iets niet geladen is. */
.paneel-leeg { margin: 0; padding: var(--ruimte-4) 0; color: var(--text-muted); }
.paneel-lijf.strak .paneel-leeg { padding: var(--ruimte-4) var(--inspring); }

/* Een enkele lamp als uitspraak op zichzelf — de toestand ís de zin. */
.inzetregel { margin: 0 0 var(--ruimte-2); }
.inzetregel:last-child { margin-bottom: 0; }

/* Een keuzelijst in de actiesleuf van een titelblok houdt zijn label zichtbaar.
   Een kale select naast een primaire knop laat de gebruiker raden waar hij over
   gaat; het label kost één regel en neemt die vraag weg. */
.kopveld { display: flex; align-items: center; gap: var(--ruimte-2); }
.kopveld label { font-size: var(--tekst-m); color: var(--text-secondary);
  white-space: nowrap; }
.kopveld select { min-height: var(--veld-hoogte); }

/* ---------------------------------------------------------------------------
   14. Rapportage: reeksen, banden en aandachtspunten

   De grafiekklassen hierboven (`.grafiek .staaf`, `.as`, `.referentie`) blijven de
   basis; hier staan alleen de vormen die de rapportagesectie erbij nodig heeft.
   ------------------------------------------------------------------------ */

/* Twee tegengestelde tellingen rond een nullijn. De richting draagt de betekenis;
   de kleur bevestigt hem alleen, en de legenda staat eronder in tekst. */
.grafiek .staaf.in { fill: var(--svs-green-700); }
.grafiek .staaf.uit { fill: var(--svs-ink-700); }

.grafiek figcaption .reekssleutel {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin-inline-end: var(--ruimte-4);
}
.grafiek figcaption .sleutelvlak {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
}
.grafiek figcaption .sleutelvlak.in { background: var(--svs-green-700); }
.grafiek figcaption .sleutelvlak.uit { background: var(--svs-ink-700); }

/* De positie binnen een cao-schaal.

   Bewust géén vullende balk: het gaat niet om hoevéél iemand verdient maar om waar dat
   bedrag valt tussen het minimum en het maximum van zijn groep. Een balk zou "meer is
   voller" suggereren; een merkteken op een spoor zegt "hier sta je". */
.schaalbanden { display: flex; flex-direction: column; }
.schaalrij {
  display: grid;
  grid-template-columns: minmax(9rem, 1.2fr) minmax(80px, 2fr) auto;
  align-items: center;
  gap: var(--ruimte-3);
  padding: var(--ruimte-2) 0;
  border-bottom: var(--lijn-regel) solid var(--border);
}
.schaalrij:last-child { border-bottom: none; }
.schaalnaam { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.schaalnaam a { color: var(--text-primary); text-decoration: none; }
.schaalnaam a:hover { text-decoration: underline; }
.schaalgroep {
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-muted);
}
.schaalspoor {
  position: relative;
  block-size: 8px;
  border-radius: var(--radius-pil);
  background: var(--surface-sunken);
}
.schaalmerk {
  position: absolute;
  inset-block: -3px;
  inline-size: 3px;
  margin-inline-start: -1px;
  border-radius: 2px;
  background: var(--svs-ink-900);
}
/* Buiten de band is geen lage stand maar een besluit of een overtreding. Het merkteken
   wordt daarom breder en krijgt een ring — vorm, niet alleen kleur. */
.schaalrij.buiten .schaalmerk {
  inline-size: 5px;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
}
.schaalgetal {
  font-size: var(--tekst-m);
  font-weight: 620;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Wat er aandacht vraagt, over de onderwerpen heen. Eén regelvorm, gesorteerd op
   ernst — de gegraveerde inzet aan de kopse kant doet het werk dat een gekleurd vlak
   over de hele rij niet mag doen. */
.aandachtlijst { display: flex; flex-direction: column; }
.aandachtrij {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-3) var(--ruimte-3) var(--ruimte-4);
  border-bottom: var(--lijn-regel) solid var(--border);
  border-inline-start: 2px solid transparent;
  color: inherit;
  text-decoration: none;
}
.aandachtrij:last-child { border-bottom: none; }
.aandachtrij:hover { background: var(--surface-subtle); }
.aandachtrij.storing { border-inline-start-color: var(--danger); }
.aandachtrij.letop { border-inline-start-color: var(--warning); }
.aandachtrij .telling {
  min-inline-size: 2.25rem;
  font-size: var(--tekst-l);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.aandachtrij .wat { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.aandachtrij .wat strong { font-size: var(--tekst-m); font-weight: 620; }
.aandachtrij .wat span { font-size: var(--tekst-s); color: var(--text-secondary); }

/* Een raster van gelijkwaardige panelen. `.tweeluik` bestond al voor twee kolommen;
   dit is dezelfde gedachte maar vullend, zodat een sectie met vijf blokken niet
   handmatig verdeeld hoeft te worden. */
.paneelraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--ruimte-4);
  align-items: start;
}
@media (max-width: 1023px) {
  .paneelraster { grid-template-columns: 1fr; }
}

/* Een `strak` paneellijf loopt tot de rand, want daar staat een regellijst in. Een
   toelichting erboven hoort dat níét te doen: die stond links van de paneelkop en dat
   leest als een uitlijnfout. Zij krijgt daarom haar eigen inspringing terug. */
.paneel-lijf.strak > .toelichting {
  padding: var(--inspring) var(--inspring) 0;
  margin-block-end: var(--ruimte-3);
}
/* Hetzelfde voor een zonelabel dat een deellijst aankondigt binnen een strak lijf. */
.paneel-lijf.strak > .zonelabel {
  padding: var(--ruimte-3) var(--inspring) 0;
}

/* Smalle rij (899px) — hetzelfde breekpunt als de regel, en om dezelfde reden: de
   sleufvolgorde blijft, alleen de plaatsing verandert. Een schaalspoor van 80px is geen
   schaal meer, en een aandachtsregel met drie kolommen naast elkaar knijpt de uitleg dood. */
@media (max-width: 899px) {
  .schaalrij {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--ruimte-2);
  }
  .schaalspoor { grid-column: 1 / -1; order: 3; }
  .aandachtrij {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--ruimte-2);
  }
  .aandachtrij .regel-stand { grid-column: 2; }
}

/* ---------------------------------------------------------------------------
   15. Koppelingen (Nmbrs)

   De omgeving staat bovenaan en is niet weg te klikken. Nmbrs heeft geen sandbox: een
   verkeerd gerichte schrijfactie gaat rechtstreeks de echte loonadministratie in. Dat
   verschil hoort dus niet in een vinkje maar in beeld.
   ------------------------------------------------------------------------ */
.nmbrsblad { display: flex; flex-direction: column; gap: var(--ruimte-4); }

.nmbrs-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  padding-block-end: var(--ruimte-2);
  border-bottom: 1px solid var(--border);
}
.nmbrs-stand { margin-block-start: var(--ruimte-1); }

/* Twee standen, en ze moeten zonder lezen uit elkaar te houden zijn. De live-stand krijgt
   daarom een vlak in plaats van een lijn — hier is een gekleurd vlak wél op zijn plaats,
   want dit gaat niet over urgentie maar over waar je bent. */
.nmbrs-vlag {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--radius-2);
  font-size: var(--tekst-s);
  font-weight: 560;
}
.nmbrs-vlag svg { inline-size: 16px; block-size: 16px; flex: none; }
.nmbrs-vlag.droog { background: var(--surface-sunken); color: var(--text-secondary); }
.nmbrs-vlag.echt {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 620;
}

/* Het stapnummer in de merksleuf: een gegraveerd plaatje, geen bolletje. */
.stapnummer {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  font-size: var(--tekst-xs);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.nmbrs-schakel {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-s);
  color: var(--text-secondary);
  cursor: pointer;
}

.uitklap { margin-block-start: var(--ruimte-3); }
.uitklap summary {
  cursor: pointer;
  font-size: var(--tekst-s);
  color: var(--text-secondary);
  min-block-size: var(--raakvlak);
  display: flex;
  align-items: center;
}
.codelijst {
  list-style: none;
  margin: var(--ruimte-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}
.codelijst li {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: var(--tekst-xs);
  background: var(--surface-sunken);
  border-radius: var(--radius-1);
  padding: 2px var(--ruimte-2);
  color: var(--text-secondary);
}

/* De payload onder de regel. Uitklappen en niet in een dialoog: bij een mislukte reeks
   wil je twee stappen naast elkaar kunnen lezen. */
.payloadblok {
  padding: var(--ruimte-3) var(--inspring);
  background: var(--surface-sunken);
  border-bottom: var(--lijn-regel) solid var(--border);
}
.codeblok {
  margin: var(--ruimte-2) 0 0;
  padding: var(--ruimte-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: var(--tekst-xs);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-primary);
}
.payloadfout {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  color: var(--danger);
}

/* ---------------------------------------------------------------------------
   16. Juridische pagina's (privacyverklaring, gebruiksvoorwaarden)

   Deze twee staan buiten de applicatie: ze zijn publiek bereikbaar en worden als los
   HTML-bestand geserveerd, want de Nmbrs Developer Portal moet ze kunnen ophalen zonder
   in te loggen. Ze lenen wel de huisstijl, zodat het geen vreemd document is dat toevallig
   op hetzelfde domein staat.
   ------------------------------------------------------------------------ */
.juridischblad {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--ruimte-7) var(--ruimte-5) var(--ruimte-8);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-6);
  background: var(--surface);
  color: var(--text-primary);
}
.juridischkop {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
  padding-block-end: var(--ruimte-5);
  border-bottom: 2px solid var(--svs-ink-900);
}
.juridischlogo {
  inline-size: 132px;
  block-size: auto;
  margin-block-end: var(--ruimte-3);
}
.juridischkop h1 { margin: 0; }
.juridischmeta {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.juridischblad section { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.juridischblad h2 {
  margin: 0;
  padding-block-end: var(--ruimte-2);
  border-bottom: 1px solid var(--border);
}
.juridischblad h3 { margin: var(--ruimte-2) 0 0; }
.juridischblad p { margin: 0; }
.juridischblad .opsomming li { display: list-item; list-style: disc; margin-inline-start: 1.1em; }
.juridischvoet {
  padding-block-start: var(--ruimte-5);
  border-top: 1px solid var(--border);
  font-size: var(--tekst-s);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
}
@media (max-width: 767px) {
  .juridischblad { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-7); }
}