/* ===========================================================================
   Saga - gedeeld stylesheet
   ---------------------------------------------------------------------------
   Afgeleid van de wireframes (Main, Triage, Afwijkingen, Context, Meldpunt,
   Login). Die tekeningen gebruiken inline styles; hier staat dezelfde taal
   eenmalig als klassen.

   TWEE REGELS DIE JE NIET MAG BREKEN
   1. Alle kleuren staan als variabele op :root. Verderop in dit bestand komt
      GEEN enkele letterlijke kleurwaarde voor. Reden: een klant krijgt later
      een eigen thema door alleen dit :root-blok te overschrijven (een tweede
      stylesheet of een <style>-blok per tenant). Zodra er ergens een hex-code
      in een regel staat, breekt dat thema stilletjes.
   2. Statuskleur komt nooit alleen. Een .badge draagt altijd leesbare tekst;
      kleurenblindheid en zwart-wit afdrukken van auditbewijs mogen de
      betekenis niet wegnemen. Zie de badge-sectie.

   Lettertypes worden in _Layout.cshtml van Google Fonts geladen. De stacks
   hieronder noemen echte fallbacks, zodat de schermen ook leesbaar blijven als
   Google Fonts geblokkeerd is (komt voor bij klanten met strikt uitgaand
   verkeer, en dat zijn juist onze klanten).
   =========================================================================== */

:root {
    /* --- Vlakken, tekst en lijnen ------------------------------------- */
    --kleur-ground: #F5F6F7;              /* achtergrond van de applicatie */
    --kleur-ground-zacht: #FAFBFB;        /* nog lichter vlak, o.a. sleepzones */
    --kleur-surface: #FFFFFF;             /* kaarten, zijbalk, koprij */
    --kleur-ink: #14181C;                 /* primaire tekst */
    --kleur-ink-op-donker: #FFFFFF;       /* tekst op accent- of merkvlak */
    --kleur-tekst-secundair: #3C464F;     /* lopende tekst in kaarten, navitems */
    --kleur-muted: #5B646D;               /* bijschriften, kolomkoppen */
    --kleur-zwak: #8A929A;                /* groepskoppen in de navigatie */
    --kleur-zwakst: #A8B0B7;              /* chevrons, tellers, lege waarden */
    --kleur-line: #E3E7EA;                /* standaard scheidingslijn */
    --kleur-line-zacht: #EFF2F3;          /* lijn binnen dichte tabellen */
    --kleur-line-sterk: #D8DDE1;          /* rand van invoervelden en knoppen */
    --kleur-line-stippel: #C9D0D6;        /* gestippelde rand (uploadvak) */

    /* --- Accent (Saga-groen) ------------------------------------------ */
    --kleur-accent: #0E6E66;
    --kleur-accent-hover: #0A524C;
    --kleur-soft: #E6F1EF;                /* accentvlak achter actieve items */
    --kleur-soft-rand: #C3DED9;
    --kleur-dark: #0C5C55;                /* tekst op --kleur-soft */

    /* --- Status: vlak + inkt horen bij elkaar -------------------------- */
    --status-groen-vlak: #DFF1E4;
    --status-groen-ink: #2F6B45;
    --status-amber-vlak: #FAEAD8;
    --status-amber-ink: #8A4B0A;
    --status-rood-vlak: #FBE3DD;
    --status-rood-ink: #8C2A12;
    --status-rood-rand: #F3C9C0;          /* rand van de rode aandachtsbalk */
    --status-neutraal-vlak: #F1F3F4;
    --status-neutraal-ink: #3C464F;

    /* --- Normkleuren ---------------------------------------------------
       9001 krijgt paars, 27001 leent het accent. Een derde raamwerk erbij?
       Voeg hier een token toe, niet verderop in het bestand. */
    --norm-paars-vlak: #EDE7F6;
    --norm-paars-ink: #4A3B77;

    /* --- Risicoschaal (oplopend) --------------------------------------
       Vier treden. Alleen de donkerste draagt witte tekst; de rest houdt de
       gewone inkt, anders zakt het contrast onder de norm. */
    --risico-1-vlak: #FBEFEC;
    --risico-2-vlak: #F6C9BA;
    --risico-3-vlak: #E08E6E;
    --risico-4-vlak: #B4411F;
    --risico-ink: var(--kleur-ink);
    --risico-4-ink: #FFFFFF;

    /* --- Merkpaneel / donkere vlakken (Login, publieke schermen) ------- */
    --merk-donker: #14181C;
    --merk-donker-vlak: #1E242A;          /* chips op het donkere paneel */
    --merk-donker-lijn: #2A3138;
    --merk-accent-licht: #4FA396;         /* accent dat op donker leesbaar is */
    --merk-tekst: #C9D0D6;
    --merk-tekst-zwak: #6E7880;

    /* --- Diagramkleuren -------------------------------------------------
       Staafjes en verdelingen. Bewust apart van de statuskleuren: een staaf
       draagt geen oordeel, een badge wel. */
    --diagram-accent: var(--kleur-accent);
    --diagram-amber: #C98A2E;
    --diagram-rood: var(--risico-4-vlak);
    --diagram-neutraal: #C3CACF;

    /* --- Typografie ---------------------------------------------------- */
    --font-kop: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-tekst: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;

    --tekst-xs: 11px;
    --tekst-s: 12px;
    --tekst-m: 12.5px;
    --tekst-l: 13px;
    --tekst-kop-s: 14px;
    --tekst-kop-m: 17px;
    --tekst-cijfer: 30px;

    /* --- Maatvoering ---------------------------------------------------- */
    --zijbalk-breedte: 240px;
    --kop-hoogte: 60px;
    --inhoud-padding: 20px 24px;

    --rond-s: 5px;                        /* badge */
    --rond-m: 8px;                        /* knop, invoerveld */
    --rond-l: 9px;                        /* paneelknop, lijstrij */
    --rond-xl: 12px;                      /* kaart */
    --rond-xxl: 14px;                     /* grote keuzekaart */

    --schaduw-zwevend: 0 6px 20px rgba(20, 24, 28, 0.12);
    --focus-dikte: 2px;
}

/* ===========================================================================
   Basis
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-tekst);
    font-size: var(--tekst-l);
    background: var(--kleur-ground);
    color: var(--kleur-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-kop);
    margin: 0;
    letter-spacing: -0.2px;
}

a {
    color: var(--kleur-accent);
    text-decoration: none;
}

a:hover { color: var(--kleur-accent-hover); }

p { line-height: 1.6; }

/* Eén zichtbare focusring voor alles wat bedienbaar is. Het toetsenbord is
   voor een auditor geen uitzondering maar de normale werkwijze. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-dikte) solid var(--kleur-accent);
    outline-offset: 2px;
    border-radius: var(--rond-m);
}

/* Alleen voor schermlezers: labels die visueel al uit de context blijken. */
.alleen-schermlezer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Springlink: eerste tabstop, wordt pas zichtbaar bij focus. */
.springlink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 14px;
    background: var(--kleur-surface);
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-m);
}

.springlink:focus { left: 8px; top: 8px; }

/* Referentienummers en datums zijn monospace: kolommen met AFW-026, GEB-2026-041
   of "ma 21" moeten onder elkaar uitlijnen, anders leest een register niet. */
.ref, .datum {
    font-family: var(--font-mono);
    font-size: var(--tekst-s);
}

.datum { color: var(--kleur-muted); }

.stil { color: var(--kleur-muted); }
/* Let op: de blokvariant van .leeg staat verderop (een lege lijst legt uit wat
   er ontbreekt). Een ONTBREKENDE WAARDE in een cel is iets anders en heet
   .geenwaarde - die stond hier eerst ook als .leeg en werd verderop stil
   overschreven, waardoor het verschil tussen leeg en gevuld wegviel. */

/* ===========================================================================
   De schil: zijbalk + hoofdkolom + koprij
   =========================================================================== */

.schil {
    display: flex;
    min-height: 100vh;
    background: var(--kleur-ground);
}

/* --- Zijbalk ------------------------------------------------------------ */

.zijbalk {
    width: var(--zijbalk-breedte);
    flex-shrink: 0;
    background: var(--kleur-surface);
    border-right: 1px solid var(--kleur-line);
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Sticky in plaats van vast: de navigatie blijft staan terwijl een lang
       register scrolt, zonder dat de hoofdkolom een offset nodig heeft. */
    position: sticky;
    top: 0;
    height: 100vh;
}

/* Woordmerk plus de twee kiezers zitten in één wrapper, zodat ze op smal
   scherm samen één balkregel kunnen vormen. Op breed scherm mag die wrapper
   geen eigen doos zijn: display:contents laat de kinderen gewoon meedoen in de
   kolom van de zijbalk, inclusief de gap. */
.zijbalk__boven { display: contents; }

.zijbalk__merk {
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* logo-mono.svg tekent met currentColor, dus het beeldmerk neemt de kleur van
   deze regel over en loopt mee met een huisstijl die --kleur-ink verzet. */
.zijbalk__beeldmerk {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--kleur-accent);
}

.zijbalk__woordmerk {
    font-family: var(--font-kop);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--kleur-ink);
}

.zijbalk__klant {
    font-size: var(--tekst-xs);
    color: var(--kleur-muted);
    margin-top: 1px;
}

/* Entiteitkeuze en normfilter: twee knoppen met dezelfde vorm, verschillend
   gewicht. De entiteitkeuze staat op het gevulde vlak omdat het wisselen van
   entiteit de zwaarste contextwissel in de applicatie is. */
/* HIER STONDEN .kiezer, --licht, :hover EN __pijl.

   Ze droegen twee knoppen met aria-haspopup="listbox" en geen listbox erachter:
   het normfilter en de entiteitkeuze in de zijbalk. Beide zijn weg - het
   normfilter is een aanduiding geworden zolang er niets achter zit (#122), de
   entiteitkeuze een echt formulier met een <select> (#128). Een klasse die een
   nepkeuzelijst vormgeeft, hoort niet te blijven staan: dan is hij over een
   half jaar de makkelijkste manier om er weer een te maken. */

/* --- Navigatie ---------------------------------------------------------- */

.zijbalk__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow-y: auto;
}

.navitem {
    display: block;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: var(--tekst-m);
    color: var(--kleur-tekst-secundair);
}

.navitem:hover {
    background: var(--kleur-ground);
    color: var(--kleur-ink);
}

.navitem--actief,
.navitem--actief:hover {
    color: var(--kleur-dark);
    background: var(--kleur-soft);
    font-weight: 600;
}

/* Menugroep met <details>: in- en uitklappen zonder een regel JavaScript, en
   een <summary> is voor toetsenbord en schermlezer meteen een knop met
   expanded-status. Dat krijg je met een <div> plus JS nooit gratis. */
.navgroep { margin: 0; }

.navgroep__kop {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Zelfde verticale maat als .navitem, plus ruimte voor het pijltje links. */
    padding: 6px 10px;
    cursor: pointer;
    list-style: none;
    border-radius: 7px;
}

.navgroep__kop:hover { background: var(--kleur-ground); }

.navgroep__kop::-webkit-details-marker { display: none; }

.navgroep__kop:hover { color: var(--kleur-ink); }

/* Rechts van de naam, zodat de labels van de groepen op dezelfde x beginnen
   als Dashboard en Taken. Links stond het pijltje de uitlijning in de weg en
   las een groep als iets anders dan een gewoon menu-item. */
.navgroep__pijl {
    font-size: 8px;
    color: var(--kleur-zwakst);
    flex-shrink: 0;
    /* Het driehoekje draait mee met de open-status; geen tweede glyph nodig. */
    transition: transform 0.12s ease-out;
}

.navgroep[open] .navgroep__pijl { transform: rotate(90deg); }

/* De groepskop is GEEN sectielabel maar een menu-item met kinderen: hij staat
   op hetzelfde niveau als Dashboard en Taken en hoort er dus hetzelfde uit te
   zien. Stond hier eerst 10px in hoofdletters en grijs - dat las als een kopje
   boven een lijst, waardoor niet duidelijk was dat er iets onder zat en dat je
   erop kon klikken. */
.navgroep__naam {
    font-size: var(--tekst-m);
    color: var(--kleur-tekst-secundair);
    flex-grow: 1;
}

/* Een groep waarvan een kind de huidige pagina is, blijft zichtbaar als de
   plek waar je bent - ook als hij dichtstaat. */
.navgroep:has(.navitem--actief) .navgroep__naam { color: var(--kleur-ink); }

/* Het aantal items hoort bij een dichtgeklapte groep: het zegt hoeveel je niet
   ziet. Zodra de groep open staat is het overbodig, dus verdwijnt het. */
.navgroep__aantal {
    font-size: 10px;
    color: var(--kleur-zwakst);
}

.navgroep[open] .navgroep__aantal { display: none; }

/* De navigatie is een lijst; de opmaak zit op de items, niet op de opsomming. */
.navlijst,
.navgroep__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Kinderen springen in EN krijgen een lijntje, zodat zichtbaar is waar de groep
   begint en eindigt. Zonder dat lijntje is bij twee open groepen niet te zien
   welk item bij welke kop hoort. */
.navgroep__lijst {
    margin: 2px 0 4px 19px;
    padding-left: 9px;
    border-left: 1px solid var(--kleur-line);
}

/* Een kind is ondergeschikt aan zijn kop: iets kleiner en rustiger. Het blijft
   goed aanklikbaar - de regelhoogte verandert niet. */
.navitem--onder {
    font-size: var(--tekst-s);
    color: var(--kleur-muted);
}

.navitem--onder:hover { color: var(--kleur-ink); }

/* --- Gebruikersblok ----------------------------------------------------- */

.zijbalk__gebruiker {
    margin-top: auto;
    border-top: 1px solid var(--kleur-line);
    padding-top: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Duwt zichzelf naar rechts in de gebruikersrij. Geen knop maar een
   verwijzing: /Afmelden is een GET, en de reden daarvoor staat in
   AfmeldenModel. */
.zijbalk__afmelden {
    margin-left: auto;
    flex: none;
    padding: 5px 7px;
    border-radius: var(--rond-m);
    color: var(--kleur-muted);
    font-size: var(--tekst-s);
    text-decoration: none;
}

.zijbalk__afmelden:hover,
.zijbalk__afmelden:focus-visible {
    background: var(--kleur-ground);
    color: var(--kleur-ink);
}

/* Het normfilter is GEEN keuzelijst zolang er niets achter zit - zie de
   toelichting in _Zijbalk.cshtml. Dit is de aanduiding die ervoor in de
   plaats staat: dezelfde plek en hetzelfde formaat, maar zonder rand,
   zonder pijltje en zonder klikcursor, zodat hij niets belooft. */
.normaanduiding {
    display: block;
    padding: 9px 10px;
    color: var(--kleur-muted);
    font-size: var(--tekst-s);
}

.normaanduiding__naam { color: var(--kleur-ink); font-weight: 500; }
    border-top: 1px solid var(--kleur-line);
    padding-top: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kleur-accent);
    color: var(--kleur-ink-op-donker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tekst-xs);
    font-weight: 600;
    flex-shrink: 0;
}

/* Een medewerker zonder ISO-rol krijgt een neutrale avatar - zie Meldpunt. */
.avatar--neutraal { background: var(--kleur-tekst-secundair); }

.gebruiker__naam {
    font-size: var(--tekst-m);
    font-weight: 500;
}

.gebruiker__rol {
    font-size: var(--tekst-xs);
    color: var(--kleur-muted);
}

/* --- Hoofdkolom en koprij ----------------------------------------------- */

.hoofdkolom {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kop {
    height: var(--kop-hoogte);
    flex-shrink: 0;
    background: var(--kleur-surface);
    border-bottom: 1px solid var(--kleur-line);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
}

.kop__titel {
    font-size: var(--tekst-kop-m);
    font-weight: 600;
    white-space: nowrap;
}

.kop__ondertitel {
    font-size: var(--tekst-s);
    color: var(--kleur-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Duwt zoekveld en acties naar rechts. */
.kop__vul { flex-grow: 1; }

.kop__zoek { display: flex; }

.kop__acties {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inhoud {
    flex-grow: 1;
    padding: var(--inhoud-padding);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Twee kolommen: werkblad links, smalle toelichtingskolom rechts. In de
   wireframes varieert die rechterkolom tussen 320 en 360px; hier één maat,
   zodat schermen naast elkaar niet gaan wiebelen. */
.kolommen {
    display: flex;
    gap: 16px;
    flex-grow: 1;
    min-height: 0;
}

.werkblad {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.zijkolom {
    width: 330px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===========================================================================
   Kaarten
   =========================================================================== */

.kaart {
    background: var(--kleur-surface);
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-xl);
    padding: 16px 18px;
}

.kaart--groot { border-radius: var(--rond-xxl); padding: 20px 22px; }

/* Vult de beschikbare hoogte en houdt de voet onderaan; gebruikt voor de
   kaarten met een tabel erin. */
.kaart--vullend {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.kaart__titel {
    font-size: var(--tekst-kop-s);
    font-weight: 600;
    margin-bottom: 10px;
}

.kaart__uitleg {
    margin: 0 0 11px;
    font-size: 11.5px;
    color: var(--kleur-muted);
    line-height: 1.55;
}

.kaart__voet {
    margin-top: auto;
    padding-top: 12px;
    font-size: 11.5px;
    color: var(--kleur-muted);
}

/* Toelichtingsvlak binnen een kaart (de grijze uitlegblokjes). */
.toelichting {
    padding: 12px 14px;
    border-radius: var(--rond-l);
    background: var(--kleur-ground);
    font-size: var(--tekst-s);
    color: var(--kleur-tekst-secundair);
    line-height: 1.55;
}

/* ===========================================================================
   Kerncijfer-tegels
   =========================================================================== */

.tegelrij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.tegel {
    background: var(--kleur-surface);
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-xl);
    padding: 14px 16px;
}

.tegel__label {
    font-size: 11.5px;
    color: var(--kleur-muted);
}

.tegel__cijfer {
    font-family: var(--font-kop);
    font-size: var(--tekst-cijfer);
    font-weight: 600;
    margin-top: 4px;
    line-height: 1.1;
}

.tegel__eenheid {
    font-size: var(--tekst-kop-m);
    color: var(--kleur-muted);
}

.tegel__voet {
    font-size: 11.5px;
    color: var(--kleur-muted);
}

/* Duiding van het cijfer. Nooit als enige drager van de boodschap: de
   voettekst zegt er altijd bij waarom het goed of slecht is. */
.tegel__voet--goed { color: var(--status-groen-ink); }
.tegel__voet--let-op { color: var(--status-amber-ink); }
.tegel__voet--slecht { color: var(--status-rood-ink); }

.tegel__cijfer--slecht { color: var(--status-rood-ink); }

/* Eén tegel per scherm mag het accentvlak dragen - meer en het accent zegt
   niets meer. */
.tegel--accent {
    background: var(--kleur-accent);
    border-color: var(--kleur-accent);
    color: var(--kleur-ink-op-donker);
}

.tegel--accent .tegel__label,
.tegel--accent .tegel__voet,
.tegel--accent .tegel__eenheid {
    color: var(--kleur-ink-op-donker);
    opacity: 0.85;
}

/* ===========================================================================
   Badges
   ---------------------------------------------------------------------------
   Een badge is een vlak met inkt én tekst. Er is bewust geen variant zonder
   tekstinhoud en geen los gekleurd bolletje als statusdrager: wie kleur niet
   ziet, of het register afdrukt voor een audit, moet de status nog kunnen
   lezen. De regel hieronder maakt een lege badge zichtbaar fout tijdens het
   bouwen in plaats van stil verkeerd in productie.
   =========================================================================== */

.badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: var(--rond-s);
    background: var(--status-neutraal-vlak);
    color: var(--status-neutraal-ink);
    white-space: nowrap;
}

.badge:empty::after { content: "status ontbreekt"; }

.badge--groen   { background: var(--status-groen-vlak);    color: var(--status-groen-ink); }
.badge--amber   { background: var(--status-amber-vlak);    color: var(--status-amber-ink); }
.badge--rood    { background: var(--status-rood-vlak);     color: var(--status-rood-ink); }
.badge--neutraal{ background: var(--status-neutraal-vlak); color: var(--status-neutraal-ink); }
.badge--accent  { background: var(--kleur-soft);           color: var(--kleur-dark); }
.badge--paars   { background: var(--norm-paars-vlak);      color: var(--norm-paars-ink); }

/* Risicoklassen 1 t/m 4, oplopend. */
.badge--risico-1 { background: var(--risico-1-vlak); color: var(--risico-ink); }
.badge--risico-2 { background: var(--risico-2-vlak); color: var(--risico-ink); }
.badge--risico-3 { background: var(--risico-3-vlak); color: var(--risico-ink); }
.badge--risico-4 { background: var(--risico-4-vlak); color: var(--risico-4-ink); }

/* Normbadges (9001 paars, 27001 accent) staan vaak in een rijtje. */
.badgerij {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ===========================================================================
   Tabellen
   =========================================================================== */

.tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tekst-m);
}

.tabel thead th {
    text-align: left;
    font-weight: 500;
    font-size: var(--tekst-xs);
    color: var(--kleur-muted);
    padding: 0 12px 8px 0;
    white-space: nowrap;
}

.tabel tbody td {
    padding: 9px 12px 9px 0;
    border-top: 1px solid var(--kleur-line);
    vertical-align: top;
}

.tabel tbody tr:hover { background: var(--kleur-ground); }

.tabel td:last-child, .tabel th:last-child { padding-right: 0; }

/* Dichte variant voor lange registers. */
.tabel--dicht tbody td { border-top-color: var(--kleur-line-zacht); }

/* Een tabel mag nooit de hele kolom oprekken: liever binnen de kaart scrollen
   dan de layout breken. */
.tabelvak {
    overflow-x: auto;
    min-height: 0;
}

/* ===========================================================================
   Knoppen
   =========================================================================== */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--rond-m);
    font-family: inherit;
    font-size: var(--tekst-l);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    background: transparent;
    color: var(--kleur-ink);
    text-decoration: none;
}

.knop--primair {
    background: var(--kleur-accent);
    border-color: var(--kleur-accent);
    color: var(--kleur-ink-op-donker);
}

.knop--primair:hover {
    background: var(--kleur-accent-hover);
    border-color: var(--kleur-accent-hover);
    color: var(--kleur-ink-op-donker);
}

.knop--secundair {
    background: var(--kleur-surface);
    border-color: var(--kleur-line-sterk);
    color: var(--kleur-ink);
}

.knop--secundair:hover { border-color: var(--kleur-muted); }

/* Tekstknop zonder vlak, voor derde-keuze acties. */
.knop--stil { color: var(--kleur-muted); }
.knop--stil:hover { color: var(--kleur-ink); }

.knop--klein { padding: 6px 10px; font-size: var(--tekst-m); }

/* Vierkant voor knoppen die alleen een pictogram dragen. Zo'n knop hoort
   altijd een aria-label te hebben; zonder label is het voor een schermlezer
   een knop zonder naam. */
.knop--pictogram {
    width: 32px;
    height: 32px;
    padding: 0;
    border-color: var(--kleur-line-sterk);
    background: var(--kleur-surface);
}

.knop[disabled], .knop[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ===========================================================================
   Formulier
   =========================================================================== */

.veldgroep {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.label {
    font-size: var(--tekst-m);
    font-weight: 500;
    color: var(--kleur-tekst-secundair);
}

.label__verplicht { color: var(--status-rood-ink); }

/* Een element met [hidden] hoort weg te zijn, ook als een klasse er een
   display op zet. Zonder deze regel verliest [hidden] van bijvoorbeeld
   .veldgroep (display:flex) en doet el.hidden in JavaScript niets - je ziet
   dan een veld dat volgens de code verborgen is. Dat is precies waarom het
   auditorblok op Audits.cshtml een kale <div> moest zijn. */
[hidden] { display: none !important; }

/* Een LEEG foutvakje is geen regel, maar kost in een .veldgroep (kolom met
   gap 6px) wel een tussenruimte. Gevolg: het ene veld van een veldrij begon
   6px lager dan het andere, en op het CAPA-scherm stonden Streefdatum en
   Effectiviteitstoets daardoor niet op dezelfde hoogte (662 om 656, gemeten).
   Het patroon "label, foutvakje, veld" staat op vier plekken; deze regel dekt
   ze alle vier. */
.veldgroep > .veldfout:empty { display: none; }

.veld {
    font-family: inherit;
    font-size: var(--tekst-m);
    padding: 7px 11px;
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-m);
    background: var(--kleur-surface);
    color: var(--kleur-ink);
    width: 100%;
}

.veld::placeholder { color: var(--kleur-zwakst); }

.veld:hover:not(:disabled) { border-color: var(--kleur-line-sterk); }

/* EEN INVOERVELD IS WIT, EN GRIJS BETEKENT UITGESCHAKELD.
   Hier stond eerst het omgekeerde: .veld stond op --kleur-ground, de
   achtergrondkleur van de APPLICATIE, en een variant .veld--wit zette dat op
   een kaart weer terug op wit. Dat leverde twee problemen op die elkaar
   versterkten. Een veld op een kaart zonder die variant was een grijs vlak in
   een wit vlak - het beeld van een uitgeschakeld veld, terwijl het veld gewoon
   werkte. En tegelijk stond er GEEN :disabled-regel, dus een echt
   uitgeschakeld veld zag eruit als een gewoon veld: het verschil dat de
   gebruiker meende te zien, was juist het enige dat niet bestond.

   Grijs is nu voorbehouden aan :disabled, en de achtergrondvariant is
   daarmee overbodig: een veld heeft geen keuze meer te maken tussen kaart en
   balk. Zet hier dus geen tweede achtergrondvariant terug. */
/* De zijbalk is zelf --kleur-surface, en .veld is sinds #109 ook wit. Wit op
   wit houdt alleen de rand over, dus die mag hier de sterkere zijn - precies de
   afweging die .veld--zoek in de koprij al maakt. */
.zijbalk .veld { border-color: var(--kleur-line-sterk); }

.veld:disabled {
    background: var(--kleur-ground);
    border-color: var(--kleur-line);
    color: var(--kleur-muted);
    cursor: not-allowed;
}

.veld:disabled::placeholder { color: var(--kleur-muted); }

.veld--ruim { padding: 11px 13px; font-size: 14px; border-color: var(--kleur-line-sterk); }

/* Het zoekveld staat in de kopbalk, en die is zelf --kleur-surface. Wit op wit
   houdt alleen de rand over, dus die mag hier de sterkere zijn - het token
   heet niet voor niets "rand van invoervelden en knoppen". */
.veld--zoek { width: 220px; border-color: var(--kleur-line-sterk); }

textarea.veld { min-height: 96px; line-height: 1.55; resize: vertical; }

.veldrij {
    display: flex;
    gap: 8px;
    align-items: center;
}

.veldhulp {
    font-size: 11.5px;
    color: var(--kleur-muted);
    line-height: 1.5;
}

.veldfout {
    font-size: 11.5px;
    color: var(--status-rood-ink);
}

/* Keuzekaart: een radio of checkbox met het hele label als klikvlak. Het is
   een echt <label> om een echte <input>; niet een <div> met een JS-handler. */
.keuzekaart {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--kleur-line-sterk);
    border-radius: var(--rond-m);
    font-size: var(--tekst-m);
    font-weight: 400;
    color: var(--kleur-ink);
    cursor: pointer;
}

.keuzekaart input { width: 15px; height: 15px; accent-color: var(--kleur-accent); }

/* :has laat de gekozen staat uit de input volgen in plaats van uit een extra
   klasse die JavaScript moet bijhouden. */
.keuzekaart:has(input:checked) {
    border-color: var(--kleur-accent);
    background: var(--kleur-soft);
}

.keuzekaart:has(input:focus-visible) {
    outline: var(--focus-dikte) solid var(--kleur-accent);
    outline-offset: 2px;
}

/* ===========================================================================
   Lijsten en meldingsbalken
   =========================================================================== */

/* De rijen onder "Vraagt jouw actie": badge, omschrijving, tijdsaanduiding. */
.lijstrij {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-l);
    color: var(--kleur-ink);
}

a.lijstrij:hover {
    border-color: var(--kleur-line-sterk);
    background: var(--kleur-ground);
    color: var(--kleur-ink);
}

.lijstrij__tekst {
    flex-grow: 1;
    font-size: var(--tekst-l);
    min-width: 0;
}

.lijstrij__meta {
    font-size: 11.5px;
    color: var(--kleur-muted);
    white-space: nowrap;
}

.melding {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--kleur-line);
    background: var(--kleur-ground);
    font-size: var(--tekst-l);
    line-height: 1.55;
}

.melding--urgent {
    background: var(--status-rood-vlak);
    border-color: var(--status-rood-rand);
    color: var(--status-rood-ink);
}

.melding--let-op {
    background: var(--status-amber-vlak);
    border-color: var(--status-amber-vlak);
    color: var(--status-amber-ink);
}

.melding--goed {
    background: var(--status-groen-vlak);
    border-color: var(--status-groen-vlak);
    color: var(--status-groen-ink);
}

/* Staafje voor een simpele verdeling in een zijkolom. De breedte zet je
   inline (dat is data, geen opmaak); de kleur komt hiervandaan. */
.staaf {
    height: 9px;
    border-radius: 4px;
    background: var(--diagram-accent);
    display: inline-block;
}

.staaf--amber { background: var(--diagram-amber); }
.staaf--rood { background: var(--diagram-rood); }
.staaf--neutraal { background: var(--diagram-neutraal); }

/* ===========================================================================
   Smal scherm: onder 900px wordt de zijbalk een balk bovenaan.
   ---------------------------------------------------------------------------
   Volledig in CSS. De menugroepen blijven <details>, maar klappen open als
   zwevend lijstje onder de balk in plaats van als blok eronder - anders duwt
   een open groep het hele scherm naar beneden.
   =========================================================================== */

@media (max-width: 899px) {
    .schil { flex-direction: column; }

    .zijbalk {
        width: 100%;
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--kleur-line);
        padding: 12px;
        gap: 10px;
    }

    /* Woordmerk, entiteitkeuze en normfilter op één regel. */
    .zijbalk__boven {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* De entiteitkeuze is een formulier geworden en geen knop, dus de breedte
       hoort op het formulier en niet op het veld erin - anders wordt die 200px
       een hoogte, want de hoofdas is daar verticaal. */
    .zijbalk__boven form.veldgroep { flex: 1 1 200px; }

    .zijbalk__nav {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 2px;
    }

    .navitem { flex: 0 0 auto; white-space: nowrap; }

    .navgroep {
        position: relative;
        flex: 0 0 auto;
    }

    .navgroep__kop { padding: 6px 10px; }

    /* Het aantal blijft op smal scherm ook zichtbaar bij een open groep: de
       groepsnaam staat dan in de balk, de items zweven eronder. */
    .navgroep[open] .navgroep__aantal { display: inline; }

    .navgroep__lijst {
        position: absolute;
        z-index: 30;
        top: calc(100% + 4px);
        left: 0;
        min-width: 210px;
        padding: 6px;
        background: var(--kleur-surface);
        border: 1px solid var(--kleur-line);
        border-radius: 10px;
        box-shadow: var(--schaduw-zwevend);
    }

    .zijbalk__gebruiker {
        margin-top: 0;
        border-top: 0;
        padding-top: 0;
    }

    .kop {
        height: auto;
        min-height: var(--kop-hoogte);
        flex-wrap: wrap;
        padding: 10px 16px;
        gap: 8px;
    }

    .kop__ondertitel { flex-basis: 100%; white-space: normal; }

    .kop__vul { display: none; }

    .kop__zoek, .kop__acties { flex-grow: 1; }

    .veld--zoek { width: 100%; }

    .inhoud { padding: 16px; }

    /* Werkblad en toelichtingskolom onder elkaar in plaats van naast elkaar. */
    .kolommen { flex-direction: column; }

    .zijkolom { width: 100%; }
}

@media (max-width: 599px) {
    .tegelrij { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .inhoud { padding: 12px; }
}

/* Wie beweging heeft uitgezet, krijgt het draaiende driehoekje niet. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   Afdrukken - een register komt regelmatig als bewijs op papier.
   =========================================================================== */

@media print {
    .zijbalk, .kop__zoek, .kop__acties, .springlink { display: none; }
    .schil { display: block; }
    .kaart { border-color: var(--kleur-line-sterk); break-inside: avoid; }
    .badge { border: 1px solid currentColor; }
}

/* ---------------------------------------------------------------------------
   Aanvullingen voor het dashboard

   Deze klassen horen bij Index.cshtml en gebruiken alleen tokens uit :root,
   zodat een klantthema ze automatisch meeneemt.
   --------------------------------------------------------------------------- */

.kaart__kop {
    font-family: var(--font-kop);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
}

.tegel__duiding {
    font-size: 11.5px;
    color: var(--kleur-muted);
    margin-top: 2px;
}

/* Een duiding mag een oordeel dragen - "doel gehaald", "te laat" - en dan
   krijgt hij de bijbehorende inkt. Nooit alleen kleur: de tekst zegt het al,
   de kleur bevestigt. */
.tegel__duiding.goed { color: var(--status-groen-ink); }
.tegel__duiding.let-op { color: var(--status-amber-ink); }
.tegel__duiding.slecht { color: var(--status-rood-ink); }

.lijstrij__zij {
    font-size: 11.5px;
    color: var(--kleur-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Een regel zonder doorverwijzing: zelfde ritme, geen randen en geen
   aanwijzer, zodat hij niet als knop leest. */
.lijstrij--stil {
    border: 0;
    padding: 4px 0;
}

.activiteit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12.5px;
    color: var(--kleur-tekst-secundair);
}

/* Een leeg register hoort uit te leggen wat er ontbreekt, dus de tekst mag
   over meerdere regels lopen en gewoon leesbaar zijn. */
.leeg {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--kleur-muted);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Aanvullingen voor de meldregisters

   Horen bij Melden/Gebeurtenissen, Melden/Afwijkingen en Melden/Verbeteren.
   Alleen tokens uit :root, geen enkele letterlijke kleurwaarde, zodat een
   klantthema ze automatisch meeneemt.
   --------------------------------------------------------------------------- */

/* De filterbalk boven een register: zoekveld plus een paar keuzelijsten, met
   wrap zodat hij op een smal scherm netjes doorbreekt in plaats van de tabel
   opzij te duwen. */
.registerfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* .veld staat standaard op volle breedte (dat is de juiste maat in een
   formulier); in de filterbalk moet elk veld juist zo breed zijn als zijn
   inhoud. */
.registerfilter .veld { width: auto; }

.registerfilter__zoek { flex: 1 1 180px; }

/* De keuzes die een norm voorschrijft, met hoe vaak ze gebruikt zijn. Ziet er
   uit als .keuzekaart maar is het bewust niet: daar zit een echte radio in, en
   dit is een leeslijst. Een bedienbaar ogend element dat niets doet, is erger
   dan een lijst die er als een lijst uitziet. */
.normkeuzes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.normkeuze {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--kleur-line-sterk);
    border-radius: var(--rond-m);
    font-size: var(--tekst-m);
}

.normkeuze__naam { flex-grow: 1; }

/* Tabulaire cijfers, anders staan de aantallen onder elkaar te dansen. */
.normkeuze__aantal {
    color: var(--kleur-muted);
    font-variant-numeric: tabular-nums;
}

/* Verdeling met staafjes in een zijkolom. De breedte van .staaf komt inline uit
   de pagina - dat is data - en de kleur uit de staaf-klasse zelf. */
.verdeling {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: var(--tekst-s);
}

.verdeling__regel {
    display: flex;
    align-items: center;
    gap: 9px;
}

.verdeling__regel .verdeling__naam {
    width: 92px;
    flex-shrink: 0;
    color: var(--kleur-muted);
}

.verdeling__regel .verdeling__staafvak {
    flex-grow: 1;
    min-width: 0;
    display: flex;
}

.verdeling__regel .verdeling__aantal {
    width: 26px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Aanvullingen voor Beheersen

   Hoort bij de schermen Context, Doelstellingen, Risicos, Maatregelen en
   Jaarkalender. Alleen tokens uit :root, geen enkele letterlijke kleurwaarde -
   anders breekt een klantthema stilletjes.
   --------------------------------------------------------------------------- */

/* Een kolom losse blokjes binnen een kaart: belanghebbenden, signalen, tellers.
   Eén klasse voor alle drie, want het ritme is hetzelfde. */
.kaartlijst {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Getalkolommen rechts uitlijnen en in monospace: scores en aantallen onder
   elkaar moeten te vergelijken zijn zonder ze te lezen. */
.getal {
    font-family: var(--font-mono);
    font-size: var(--tekst-s);
    text-align: right;
    white-space: nowrap;
}

/* DEZELFDE KLASSE OP DE KOP VAN ZO'N KOLOM, en zonder deze regel bijt hij daar
   niet. `.tabel thead th` lijnt links uit en is met twee elementen en een klasse
   specifieker dan `.getal`, dus een kop met beide klassen bleef links staan
   terwijl de waarden eronder rechts stonden. Bij een smalle kop ("Score") is dat
   een paar pixels; bij een brede ("Gewogen bijdrage", "Zonder bevinding") loopt
   het op tot tientallen pixels en staat de kop zichtbaar naast zijn kolom.

   ALLEEN DE UITLIJNING GAAT MEE. Het lettertype en het formaat blijven die van
   `.tabel thead th`: een kop in monospace op een ander formaat dan de koppen
   ernaast leest als een tweede soort kop, en de reden om cijfers monospace te
   zetten - eenheden onder eenheden - geldt voor waarden en niet voor een woord.

   `tfoot` staat erbij omdat de optelregel onder een scoretabel daar een `th` kan
   dragen; hij hoort met dezelfde kolom mee te lijnen als de rest. */
.tabel thead th.getal,
.tabel tfoot th.getal {
    font-family: var(--font-tekst);
    font-size: var(--tekst-xs);
    text-align: right;
}

/* --- Context ------------------------------------------------------------- */

/* De werking van een vraagstuk. De kolom draagt altijd het WOORD (Kans,
   Bedreiging, Neutraal); deze kleuren bevestigen het alleen. */
.werking--kans { color: var(--status-groen-ink); }
.werking--bedreiging { color: var(--status-rood-ink); }
.werking--neutraal { color: var(--kleur-muted); }

.belanghebbende {
    padding: 11px 12px;
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-l);
}

.belanghebbende__naam {
    font-size: var(--tekst-m);
    font-weight: 600;
}

.belanghebbende__verwachting {
    font-size: 11.5px;
    color: var(--kleur-muted);
    margin-top: 3px;
    line-height: 1.5;
}

/* "Wordt eis" is het onderscheid dat §4.2 uitdrukkelijk vraagt, dus het krijgt
   een eigen regel en niet een bijzin. */
.belanghebbende__eis {
    margin-top: 6px;
    font-size: var(--tekst-xs);
    color: var(--status-groen-ink);
}

.belanghebbende__eis--geen { color: var(--kleur-muted); }

/* --- Doelstellingen ------------------------------------------------------ */

.doellijst {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.doelrij {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Vaste breedtes voor de buitenste kolommen, zodat de meters van alle rijen op
   dezelfde x beginnen en eindigen - anders valt een verschil in vulling niet af
   te lezen. */
.doelrij__norm {
    width: 62px;
    text-align: center;
    flex-shrink: 0;
}

.doelrij__naam {
    width: 250px;
    flex-shrink: 0;
    min-width: 0;
}

.doelrij__titel {
    font-size: var(--tekst-m);
    font-weight: 500;
}

.doelrij__meta {
    font-size: var(--tekst-xs);
    color: var(--kleur-muted);
}

.doelrij__waarde {
    width: 130px;
    text-align: right;
    font-size: var(--tekst-m);
    flex-shrink: 0;
}

.doelrij__stand {
    width: 104px;
    text-align: center;
    flex-shrink: 0;
}

/* De meter. De breedte van de vulling komt inline mee als gegeven; de kleur
   komt hiervandaan. Zonder meting blijft ze op nul en is de rij herkenbaar leeg. */
.meter {
    flex-grow: 1;
    height: 10px;
    border-radius: 5px;
    background: var(--status-neutraal-vlak);
    min-width: 40px;
    overflow: hidden;
}

.meter__vulling {
    height: 10px;
    border-radius: 5px;
    background: var(--kleur-accent);
}

.meter__vulling--onder { background: var(--diagram-amber); }

/* Ver buiten de doelwaarde. Bewust een eigen klasse en niet dezelfde als
   --onder: het verschil tussen "net niet" en "er ver naast" is waar een
   directiebeoordeling over gaat, en dat mag niet in een kleur samenvallen.
   De badge ernaast draagt de tekst, dus kleur is nooit de enige drager. */
.meter__vulling--buiten { background: var(--diagram-rood); }

/* --- Risico's ------------------------------------------------------------ */

/* De tweede .verdeling-definitie is hier weggehaald: die verschilde alleen in
   gap (8px tegen 9px) en overschreef de eerste stil. */

.verdeling__rij {
    display: flex;
    align-items: center;
    gap: 9px;
}

.verdeling__rij .verdeling__naam {
    width: 62px;
    text-align: center;
    flex-shrink: 0;
}

/* Het spoor waarin de staaf staat. De staaf zelf is .staaf uit het gedeelte
   hierboven; hier staat alleen hoe breed hij mag worden. */
.verdeling__rij .verdeling__staafvak {
    flex-grow: 1;
    display: block;
    height: 9px;
    border-radius: 4px;
    background: var(--status-neutraal-vlak);
    min-width: 30px;
}

.verdeling__rij .verdeling__aantal {
    width: 28px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--tekst-s);
    flex-shrink: 0;
}

/* Een signaal is een zin, geen pictogram: wie de kleur niet ziet leest nog
   steeds wat er aan de hand is. */
.signaal {
    padding: 10px 12px;
    border-radius: var(--rond-l);
    border: 1px solid var(--kleur-line);
    background: var(--kleur-ground);
    font-size: var(--tekst-m);
    line-height: 1.5;
}

.signaal--aandacht {
    background: var(--status-rood-vlak);
    border-color: var(--status-rood-rand);
    color: var(--status-rood-ink);
}

.signaal--info {
    background: var(--status-amber-vlak);
    border-color: var(--status-amber-vlak);
    color: var(--status-amber-ink);
}

/* --- Jaarkalender -------------------------------------------------------- */

/* Het raster is een echte tabel: maanden als kolomkoppen, maatregelen als
   rijkoppen. Met <div>'s zou een schermlezer twaalf losse vakjes voorlezen
   zonder te zeggen bij welke maand ze horen. */
.kalender { min-width: 780px; }

.kalender__maand {
    text-align: center;
    width: 46px;
}

.kalender__naam {
    text-align: left;
    font-weight: 500;
    font-size: var(--tekst-m);
    padding: 9px 12px 9px 0;
    border-top: 1px solid var(--kleur-line-zacht);
    min-width: 220px;
}

.kalender__naam .ref { margin-right: 7px; }

.kalender__cel {
    text-align: center;
    padding: 9px 3px;
}

/* Het vakje draagt altijd een kort woord (ok, bev, niet, gep). De volledige
   uitkomst staat ernaast in .alleen-schermlezer; kleur is nooit de enige drager. */
.kalender__vak {
    display: inline-block;
    min-width: 34px;
    padding: 3px 5px;
    border-radius: var(--rond-s);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.kalender__vak--uitgevoerd { background: var(--status-groen-vlak); color: var(--status-groen-ink); }
.kalender__vak--bevinding  { background: var(--status-amber-vlak); color: var(--status-amber-ink); }
.kalender__vak--niet       { background: var(--status-rood-vlak);  color: var(--status-rood-ink); }
.kalender__vak--gepland    { background: var(--status-neutraal-vlak); color: var(--status-neutraal-ink); }
.kalender__vak--leeg       { background: transparent; color: var(--kleur-zwakst); min-width: 0; }

.legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--kleur-muted);
}

/* Hetzelfde vakje als in het raster, zodat de legenda letterlijk toont wat er
   in de tabel staat. De modifiers hierboven doen de kleur. */
.legenda__punt {
    display: inline-block;
    min-width: 34px;
    padding: 3px 5px;
    border-radius: var(--rond-s);
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Aanvullingen voor de registers

   Horen bij Registers/Assets, Verwerkingen, Leveranciers, Competenties,
   Documenten en Klanttevredenheid. Alleen tokens uit :root, geen enkele
   letterlijke kleurwaarde. Wat al bestond (.registerfilter, .verdeling,
   .melding, .badge, .tabel) wordt hergebruikt en hier NIET opnieuw
   gedefinieerd: een tweede definitie van dezelfde klasse wint stilletjes van de
   eerste en dan verandert een scherm dat niemand heeft aangeraakt.
   --------------------------------------------------------------------------- */

/* Brede naamkolom in een verdeling. .verdeling__naam is smal en gecentreerd
   (risicoklassen 1 t/m 4); een assetsoort of een periodelabel past daar niet
   in, vandaar een eigen klasse naast die van de staafjes zelf. */
.verdeling__label {
    width: 100px;
    flex-shrink: 0;
    color: var(--kleur-muted);
}

/* De tweede regel in een tabelcel: een locatie onder een assetnaam, het
   wetsartikel onder een rolbadge, de einddatum onder een certificaat. */
.celbijschrift {
    font-size: var(--tekst-xs);
    color: var(--kleur-muted);
    margin-top: 3px;
    line-height: 1.45;
}

/* Een waarde die er niet is. Bewust lichter dan .stil: de lezer moet in een
   oogopslag zien dat hier niets staat, zonder dat het als gegeven leest. */
.geenwaarde {
    color: var(--kleur-zwakst);
    font-size: var(--tekst-s);
}

/* Korte opsomming in een kaart: externe registers, assets zonder eigenaar. */
.opsomming {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: var(--tekst-m);
}

/* Een getal met een oordeel erin, zoals het verschil met de vorige meting. Het
   TEKEN staat altijd in de tekst; deze kleuren bevestigen het alleen. */
.oordeel { font-variant-numeric: tabular-nums; }
.oordeel--goed { color: var(--status-groen-ink); }
.oordeel--let-op { color: var(--status-amber-ink); }
.oordeel--slecht { color: var(--status-rood-ink); }

/* De zin in een meldingsbalk; duwt wat er rechts naast staat (normbadges, een
   link) naar de rand. */
.melding__tekst { flex-grow: 1; }

/* Rijkoppen in een matrix. De competentiematrix en de scoretabel zetten de
   linkerkolom als <th scope="row">: zonder die koppen leest een schermlezer
   losse cellen voor zonder te zeggen bij wie of waarbij ze horen. */
.tabel tbody th {
    text-align: left;
    font-weight: 500;
    font-size: var(--tekst-m);
    padding: 9px 12px 9px 0;
    border-top: 1px solid var(--kleur-line);
    vertical-align: top;
}

/* Meerdere lijstrijen onder elkaar in een kaart hebben lucht nodig; los van
   elkaar staande randen die tegen elkaar aan liggen lezen als één blok. */
.kaart > .lijstrij + .lijstrij { margin-top: 8px; }

/* De typekolom links van het documentregister. Geen mappenstructuur maar een
   filter: een procedure die onder twee onderwerpen valt is via beide te
   vinden. Echte links, dus met toetsenbord te bedienen en deelbaar. */
.typekolom {
    width: 190px;
    flex-shrink: 0;
    background: var(--kleur-surface);
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-xl);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.typekolom__kop {
    font-size: var(--tekst-xs);
    letter-spacing: 0.08em;
    color: var(--kleur-zwak);
    font-weight: 600;
    padding: 4px 8px;
    text-transform: uppercase;
}

.typekolom__item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border-radius: var(--rond-l);
    font-size: var(--tekst-m);
    color: var(--kleur-tekst-secundair);
}

.typekolom__item:hover {
    background: var(--kleur-ground);
    color: var(--kleur-ink);
}

.typekolom__item--actief {
    background: var(--kleur-soft);
    color: var(--kleur-dark);
    font-weight: 600;
}

.typekolom__aantal {
    color: var(--kleur-zwak);
    font-variant-numeric: tabular-nums;
}

/* Smal scherm: de typekolom wordt een rij chips boven de tabel, net als de
   zijbalk een balk wordt. */
@media (max-width: 899px) {
    .typekolom {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .typekolom__kop { padding: 0 8px 0 0; }
}

/* ---------------------------------------------------------------------------
   Aanvullingen voor Inrichting

   Horen bij Inrichting/Eisen, Normversies, Wetgeving, Configuratie,
   Meldkanalen, Notificaties en Gebruikers. Alleen tokens uit :root, geen enkele
   letterlijke kleurwaarde - anders breekt een klantthema stilletjes.
   --------------------------------------------------------------------------- */

/* Een groepskopje binnen een kaart: NORMEN, WET- EN REGELGEVING. Zelfde toon
   als de groepskoppen in de navigatie, zodat de indeling herkenbaar is. */
.groepslabel {
    font-size: var(--tekst-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--kleur-zwak);
    padding: 12px 0 6px;
}

/* Tekst die binnen een cel de dragende regel is: de naam van een wet, een
   waarde in een keuzelijst, de naam van een gebruiker. */
.sterk { font-weight: 600; }

/* Een kolom met lopende tekst mag breed zijn en moet afbreken. Zonder deze
   klasse rekt de onderbouwing bij A.5.31 de hele tabel op. */
.kolom--breed {
    min-width: 260px;
    line-height: 1.5;
}

/* --- De bronnenlijst op Eisen ------------------------------------------- */

.bronlijst {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Een echte <a>, want hij zet het filter. Twee regels, omdat de tweede regel
   het aantal eisen en de status draagt en die horen bij elkaar. */
.bronrij {
    display: block;
    padding: 9px 11px;
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-l);
    color: var(--kleur-ink);
}

.bronrij:hover {
    border-color: var(--kleur-line-sterk);
    background: var(--kleur-ground);
    color: var(--kleur-ink);
}

.bronrij__naam {
    display: block;
    font-size: var(--tekst-s);
    font-weight: 600;
}

.bronrij__meta {
    display: block;
    font-size: 10.5px;
    color: var(--kleur-muted);
    margin-top: 2px;
}

.bronrij--gekozen {
    border-color: var(--kleur-accent);
    background: var(--kleur-soft);
    color: var(--kleur-dark);
}

.bronrij--gekozen .bronrij__meta { color: var(--kleur-dark); }

/* Een bron die niet in scope staat: gestippelde rand, zodat het verschil met
   een lopende bron ook zonder kleur te zien is. */
.bronrij--buiten {
    border-style: dashed;
    border-color: var(--kleur-line-stippel);
    background: var(--kleur-ground-zacht);
}

/* --- Eisen, gegroepeerd per bron en per thema --------------------------- */

.bronblok {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
}

/* Een thema klapt open en dicht. <details> is van zichzelf bedienbaar met het
   toetsenbord en meldt zijn open-status aan een schermlezer; met een <div> plus
   een klikhandler zou dat met de hand nagebouwd moeten worden. */
.eisgroep {
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-l);
    overflow: hidden;
}

.eisgroep__kop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: var(--tekst-m);
    font-weight: 500;
    list-style: none;
    background: var(--kleur-ground);
}

.eisgroep__kop::-webkit-details-marker { display: none; }

.eisgroep__kop:hover { background: var(--kleur-line-zacht); }

.eisgroep__pijl {
    font-size: 9px;
    color: var(--kleur-zwakst);
    transition: transform 0.12s ease;
}

.eisgroep[open] .eisgroep__pijl { transform: rotate(90deg); }

.eisgroep__naam { flex-grow: 1; }

.eisgroep__aantal {
    font-size: var(--tekst-xs);
    color: var(--kleur-muted);
    font-variant-numeric: tabular-nums;
}

.eisgroep .tabelvak { padding: 0 12px 10px; }

/* --- Uitleglijsten ------------------------------------------------------ */

/* Een genummerde reeks stappen (hoe een transitie verloopt). De nummering doet
   het werk: die zegt dat de volgorde ertoe doet. */
.stappen {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: var(--tekst-s);
    color: var(--kleur-tekst-secundair);
    line-height: 1.55;
}

/* Losse punten die geen volgorde kennen (regels per kanaal, aandachtspunten). */
.uitleglijst {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: var(--tekst-s);
    color: var(--kleur-tekst-secundair);
    line-height: 1.55;
}

/* Naam-waardeparen als echte <dl>: de term en de uitleg horen bij elkaar en een
   schermlezer leest ze dan ook als paar voor. */
.kenmerken {
    margin: 0;
    display: grid;
    grid-template-columns: 124px 1fr;
    gap: 7px 12px;
    font-size: var(--tekst-s);
    line-height: 1.5;
}

.kenmerken dt {
    color: var(--kleur-muted);
    font-weight: 500;
}

.kenmerken dd {
    margin: 0;
    color: var(--kleur-tekst-secundair);
}

/* --- Configuratie ------------------------------------------------------- */

/* Het gedrag achter een keuzewaarde, een regel per sleutel. Bewust een lijst en
   geen badges: een regel als "beoordelingscyclus 12 maanden" is een zin en past
   niet in een badge die niet mag afbreken. */
.gedraglijst {
    margin: 0;
    padding-left: 16px;
    font-size: var(--tekst-s);
    color: var(--kleur-tekst-secundair);
    line-height: 1.5;
}

.moduleblok {
    padding: 10px 12px;
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-l);
    margin-bottom: 8px;
}

.moduleblok__naam {
    font-size: var(--tekst-m);
    font-weight: 600;
    margin-bottom: 5px;
}

.modulerij {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 0;
    font-size: var(--tekst-s);
}

.modulerij__naam {
    flex-grow: 1;
    color: var(--kleur-muted);
}

/* --- Meldkanalen -------------------------------------------------------- */

.kanaalkop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 10px;
}

.kanaalkop__naam {
    font-family: var(--font-kop);
    font-size: var(--tekst-kop-s);
    font-weight: 600;
    margin: 0;
}

/* --- De rolrechtenmatrix ------------------------------------------------ */

/* Smalle kolommen met de aanduiding gecentreerd, zodat de rollen boven elkaar
   te vergelijken zijn. De cel draagt altijd een teken of woord; kleur speelt
   hier geen rol. */
.matrix__kolom {
    text-align: center;
    width: 76px;
}

.matrix__module {
    text-align: left;
    font-weight: 500;
    font-size: var(--tekst-m);
    min-width: 230px;
    padding: 9px 12px 9px 0;
    border-top: 1px solid var(--kleur-line-zacht);
}

.matrix__cel {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--tekst-xs);
    color: var(--kleur-tekst-secundair);
    white-space: nowrap;
}

/* --- Filterbalk: een keuzevakje naast de velden ------------------------- */

/* Het label draagt de tekst en het vakje zit erin, zodat klikken op de tekst
   het vakje bedient zonder dat er een for-koppeling nodig is. */
.keuzeveld {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--tekst-m);
    color: var(--kleur-tekst-secundair);
    white-space: nowrap;
}

.keuzeveld input {
    width: 15px;
    height: 15px;
    accent-color: var(--kleur-accent);
}

/* ---------------------------------------------------------------------------
   Aanvullingen voor Verantwoorden

   Horen bij Verantwoorden/Rapportage, Audits, Overleggen, Auditportaal en
   Terugkijken. Twee klassen, en verder alles hergebruikt uit de gedeelten
   hierboven. Alleen tokens uit :root, geen enkele letterlijke kleurwaarde -
   anders breekt een klantthema stilletjes.
   --------------------------------------------------------------------------- */

/* Een signaal dat niet waarschuwt maar de LEESSTAND aankondigt: "alleen lezen"
   in het auditportaal, "je kijkt naar 31 december 2024" bij het terugkijken.
   Rood zou suggereren dat er iets mis is en amber dat er iets moet gebeuren;
   hier is allebei onwaar. De tekst zegt wat er aan de hand is, het accentvlak
   bevestigt alleen dat dit scherm zich anders gedraagt dan de rest. */
.signaal--lezen {
    background: var(--kleur-soft);
    border-color: var(--kleur-soft-rand);
    color: var(--kleur-dark);
}

/* De open regel in een leeslijst van links, bijvoorbeeld de eisenbron die in
   het auditportaal getoond wordt. De regel is een echte <a> met aria-current;
   deze klasse bevestigt dat alleen visueel. De hover-regel hierboven is
   specifieker dan een losse klasse, vandaar dat hij hier expliciet meedoet -
   anders springt de gekozen regel terug naar grijs zodra de muis erover gaat. */
.lijstrij--gekozen,
a.lijstrij--gekozen:hover {
    background: var(--kleur-soft);
    border-color: var(--kleur-soft-rand);
    color: var(--kleur-dark);
}

/* ---------------------------------------------------------------------------
   Aanmelden

   De aanmeldpagina staat buiten de schil: eigen <head>, geen zijbalk, geen
   koprij. Ze gebruikt wel dezelfde tokens, want dit is het eerste wat iemand
   van Saga ziet en het hoort bij hetzelfde product.

   De --merk-*-tokens bovenin dit bestand zijn precies hiervoor gemaakt: een
   donker paneel waarop tekst leesbaar blijft. Ze stonden er al zonder dat er
   iets gebruik van maakte.
--------------------------------------------------------------------------- */

.aanmeldpagina {
    margin: 0;
    min-height: 100vh;
    background: var(--kleur-ground);
    color: var(--kleur-ink);
    font-family: var(--font-tekst);
}

.aanmeld {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* --- linkerkant: wat Saga is --------------------------------------------- */

.aanmeld__kant {
    background: var(--merk-donker);
    color: var(--merk-tekst);
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.aanmeld__merk {
    display: flex;
    align-items: center;
    gap: 14px;
}

.aanmeld__beeldmerk { flex: none; }

.aanmeld__woordmerk {
    font-family: var(--font-kop);
    font-size: 38px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.aanmeld__van {
    font-size: var(--tekst-s);
    color: var(--merk-tekst-zwak);
}

.aanmeld__pitch {
    margin: -20px 0 0;
    font-size: var(--tekst-m);
    color: var(--merk-tekst-zwak);
}

/* Het verhaal krijgt de ruimte die overblijft, zodat de merkregel bovenaan en
   de voettekst onderaan blijven staan ongeacht de lengte van de tekst. */
.aanmeld__verhaal {
    margin-top: auto;
    max-width: 30em;
}

.aanmeld__label {
    margin: 0 0 12px;
    font-size: var(--tekst-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--merk-accent-licht);
}

.aanmeld__kop {
    margin: 0 0 12px;
    font-family: var(--font-kop);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 600;
    color: #FFFFFF;
}

.aanmeld__tekst {
    margin: 0;
    font-size: var(--tekst-l);
    line-height: 1.6;
    color: var(--merk-tekst);
}

.aanmeld__bronnen {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aanmeld__bronnen li {
    padding: 4px 10px;
    border: 1px solid var(--merk-donker-lijn);
    border-radius: var(--rond-l);
    background: var(--merk-donker-vlak);
    font-size: var(--tekst-xs);
    color: var(--merk-tekst);
}

.aanmeld__voet {
    margin: 0;
    font-size: var(--tekst-xs);
    color: var(--merk-tekst-zwak);
}

/* --- rechterkant: het formulier ------------------------------------------ */

.aanmeld__formulier {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}

.aanmeld__doos {
    width: 100%;
    max-width: 380px;
}

.aanmeld__titel {
    margin: 0 0 6px;
    font-family: var(--font-kop);
    font-size: var(--tekst-kop-m);
    font-weight: 600;
}

.aanmeld__onder {
    margin: 0 0 24px;
    font-size: var(--tekst-s);
    color: var(--kleur-muted);
}

/* Entra is de bedoelde hoofdweg en staat daarom bovenaan en over de volle
   breedte, ook nu de knop nog uitgeschakeld is. Het wachtwoord eronder is de
   uitzondering; die volgorde vertelt dat zonder een woord uitleg. */
.aanmeld__werkaccount {
    width: 100%;
    justify-content: center;
}

.aanmeld__werkaccount[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.aanmeld__scheiding {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: var(--tekst-xs);
    color: var(--kleur-zwak);
}

.aanmeld__scheiding::before,
.aanmeld__scheiding::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: var(--kleur-line);
}

.aanmeld__doos .veldgroep { gap: 4px; }

.aanmeld__doos .knop--primair {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
}

.aanmeld__slot {
    margin: 20px 0 0;
    font-size: var(--tekst-xs);
    line-height: 1.6;
    color: var(--kleur-muted);
}

/* Onder de 900px valt het donkere paneel weg als kolom en wordt het een kop.
   Het verhaal en de raamwerkenlijst gaan er niet uit - dat is de enige plek
   waar staat waar je eigenlijk inlogt. */
@media (max-width: 899px) {
    .aanmeld {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .aanmeld__kant {
        padding: 28px 24px;
        gap: 20px;
    }

    .aanmeld__kop { font-size: 23px; }

    .aanmeld__verhaal,
    .aanmeld__bronnen { margin-top: 0; }

    .aanmeld__formulier { padding: 32px 24px 48px; }
}

/* --- Aanvullingen voor de meldketen -------------------------------------- */

/* De momentkolom in een tijdlijn moet uitlijnen, anders schuift elke regel op
   de lengte van de datum ervoor. */
.activiteit .datum { flex-shrink: 0; width: 92px; }

/* Een formulier met meerdere veldgroepen. .veldgroep zet 6px tussen label en
   veld; tussen de groepen onderling hoort meer lucht. */
.formulier { display: flex; flex-direction: column; gap: 14px; }

/* Een kaart in een kaart: het binnenste vlak zakt naar de ondergrond, zodat er
   geen wit op wit staat. */
.kaart .kaart { background: var(--kleur-ground); }

/* --- Nagekomen klassen uit de detailschermen ------------------------------ */

/* Een tweede regel onder de naam in een keuzekaart. Het moet een blokelement
   binnen een <label> zijn, en <div> mag daar niet - vandaar een span die zich
   als blok gedraagt. */
.keuzekaart__uitleg {
    display: block;
    margin-top: 2px;
    font-size: var(--tekst-xs);
    line-height: 1.5;
    color: var(--kleur-muted);
}

/* Naam-waardeparen waarvan de TERM een pad is uit een bevroren jsonb-blok
   ("bevindingen[0].nummer") en dus veel langer dan een gewoon label. */
.kenmerken--breed { grid-template-columns: minmax(180px, 280px) 1fr; }
.kenmerken--breed dt { overflow-wrap: anywhere; }

/* De optelregel onder een scoretabel. Zonder deze regel is een totaal niet van
   een gewone rij te onderscheiden, en dat is precies de rij waar iemand naar
   kijkt. */
.tabel tfoot td,
.tabel tfoot th {
    border-top: 2px solid var(--kleur-line-sterk);
    font-weight: 600;
}

/* Twee of drie acties naast elkaar in een tabelcel. Zonder deze regel staat er
   een kaal scheidingsteken tussen de links, en dat leest als tekst in plaats
   van als keuze. De scheiding is een lijntje en geen punt: een punt tussen twee
   links wordt bij het aanwijzen zelf ook onderstreept. */
.celacties {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.celacties > * + * {
    padding-left: 10px;
    border-left: 1px solid var(--kleur-line);
}

/* --- Huisstijl en draaiboeken --------------------------------------------- */

/* Het kleurvlakje toont de UITGEREKENDE waarde, ook wanneer die geërfd is.
   Een leeg veld met een gevuld vlakje ernaast is het beeld van erven. De
   achtergrond komt inline uit de pagina - dat is data, geen opmaak. */
.kleurvlakje {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--kleur-line-sterk);
    border-radius: var(--rond-m);
}

/* Velden naast elkaar die elk hun eigen hoogte mogen hebben. Zonder de
   min-width op de kinderen duwt een lange waarde de andere kolommen weg. */
.veldrij--verdeeld {
    align-items: flex-start;
    gap: 14px;
}

.veldrij--verdeeld > * {
    flex: 1 1 0;
    min-width: 0;
}

/* De drie lagen van de huisstijl als ketting: entiteit valt terug op klant,
   klant op de Saga-standaard. De pijl wijst naar WAAR VANDAAN geerfd wordt. */
.ketting {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.ketting__pijl {
    margin: 0 10px;
    color: var(--kleur-zwakst);
    font-size: var(--tekst-l);
}

/* Miniatuur van het thema in de zijkolom. */
.themavoorbeeld {
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-l);
    overflow: hidden;
}

/* Meerdere kaarten in een formulier krijgen dezelfde tussenruimte als op een
   register. Zonder dit plakken ze aan elkaar. */
.werkblad form > .kaart + .kaart { margin-top: 12px; }

/* Een uitklapblok in een kaart. Gelijk aan .eisgroep, maar met een neutrale
   naam: dat was de klasse van het eisenscherm en die betekenis hoort niet in
   een draaiboek te staan. */
.uitklap {
    border: 1px solid var(--kleur-line);
    border-radius: var(--rond-l);
    overflow: hidden;
}

.uitklap__kop {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: var(--tekst-m);
}

.uitklap__kop:hover { background: var(--kleur-ground); }

.uitklap__pijl {
    flex-shrink: 0;
    color: var(--kleur-zwakst);
    font-size: var(--tekst-s);
}

.uitklap__naam { flex-grow: 1; min-width: 0; }

/* Een formulier binnen een uitklapblok staat anders strak tegen de rand. */
.eisgroep > .formulier,
.uitklap > .formulier { padding: 0 12px 12px; }

/* Safari tekent naast een <summary> zijn eigen driehoekje. .eisgroep__kop haalt
   dat al weg; .uitklap__kop deed dat niet, en daar stonden dus twee tekens naast
   elkaar. In Chromium en Firefox verdwijnt de marker al doordat de summary
   display:flex draagt - daar was het niet te zien. */
.uitklap__kop { list-style: none; }
.uitklap__kop::-webkit-details-marker { display: none; }

/* --- Uitleg achter een vraagteken ---------------------------------------- */

/* DE ENE VORM VOOR ALLE UITLEG OP EEN SCHERM (werkitem 88). Een alinea met
   uitleg hoorde niet tussen de gegevens te staan, maar hij mag ook niet stil
   verdwijnen: <details> zet hem dicht en houdt hem vindbaar. Bewust geen
   tooltip op hover - die is op een telefoon niet te openen en met het
   toetsenbord niet te bereiken - en bewust geen eigen knop met aria-expanded,
   want <details> doet dat van zichzelf en zonder een regel JavaScript. De
   focusring komt uit de regel voor summary bovenin dit bestand.

   Geen nieuw blok maar een variant op .uitklap, dat deze codebase al gebruikt
   voor het herzien van een definitie en voor de uitleg per eis. Alleen het
   teken verschilt: een ? in plaats van een pijl. */
/* GEEN KADER EN NIET OVER DE VOLLE BREEDTE. Met de rand van .uitklap eromheen
   staat er in een formulier een vlak dat er net zo uitziet als een invoerveld,
   en dan lijkt de uitleg iets om in te vullen. Twee klassen in de selector en
   niet een: dan wint deze regel van .uitklap ongeacht de volgorde in dit
   bestand - val 8 uit docs/12 werkt ook andersom. */
.uitklap.uitklap--uitleg {
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin: 0 0 11px;
}

.uitklap.uitklap--uitleg > .uitklap__kop {
    width: fit-content;
    max-width: 100%;
    padding: 3px 8px 3px 0;
    font-size: var(--tekst-s);
    color: var(--kleur-muted);
    background: none;
}

/* Aanwijzen verft hier geen vlak - er is geen vlak - maar de tekst. */
.uitklap.uitklap--uitleg > .uitklap__kop:hover { color: var(--kleur-tekst-secundair); }

.uitklap.uitklap--uitleg[open] > .uitklap__kop { color: var(--kleur-tekst-secundair); }

.uitklap__vraag {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid var(--kleur-line-sterk);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tekst-xs);
    line-height: 1;
    color: var(--kleur-muted);
}

/* De alinea houdt zijn eigen klasse, zodat kleur en regelafstand gelijk blijven
   aan de uitleg die niet is ingeklapt. Alleen de ruimte eromheen komt nu van
   het uitklapblok. Deze selector is MET OPZET specifieker (twee klassen) dan
   .kaart__uitleg en .kaart__voet zelf - anders wint de marge van daarginds en
   staat de tekst scheef in het blok. Val 8 uit docs/12. */
.uitklap--uitleg > .kaart__uitleg,
.uitklap--uitleg > .kaart__voet,
.uitklap--uitleg > p {
    margin: 0;
    padding: 2px 0 6px 23px;
}

/* Losse mini-formulieren naast elkaar in een veldrij (de knoppen per stap).
   Een <form> is standaard een blok en breekt de rij; display:contents laat de
   knop zelf meedoen in de flexrij. */
.veldrij > form { margin: 0; display: flex; align-items: center; }