/* ============================================================================
   Thuiszorg KMS — Design System v2 "Warme zorg, premium afwerking"
   ----------------------------------------------------------------------------
   Inhoud:
     1.  Design-tokens (kleurschalen, semantiek, spacing, radius, schaduw, typo)
     2.  Basis & typografie
     3.  Layout + sidebar
     4.  Hero & KPI-kaarten (dashboard)
     5.  Kaarten & grids
     6.  Knoppen
     7.  Formulieren (incl. mobiele kleef-balk)
     8.  Tabellen
     9.  Status-pillen & badges
     10. Meldingen (toast-stijl)
     11. Modals
     12. Tabs & accordeon
     13. Auth / login (glaskaart)
     14. Agenda & planning
     15. Stepper / zorgplan
     16. Lege staten
     17. Module-specifiek (batches 3 t/m 7)
     18. Print
     19. Responsive & toegankelijkheid
   Regels: geen externe bronnen (CSP 'self'), animaties alleen op
   transform/opacity, prefers-reduced-motion gerespecteerd.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN-TOKENS
   ------------------------------------------------------------------------- */

/* Twee lettertypen, zelf gehost (CSP font-src 'self'): Inter voor de tekst,
   Plus Jakarta Sans voor koppen, cijfers in tegels en labels. Richting D
   (1 oktober 2026): de hiërarchie komt uit de kopfamilie, niet meer uit
   kapitalen en gewicht alleen. Beide zijn variabele fonts, alleen het
   latijnse deel (ë, ï en € zitten erin). Ontbreekt een bestand, dan valt
   alles stil terug op de systeemstack — niets breekt. */
@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2");
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* -----------------------------------------------------------------------
       MERKKLEUR PER ORGANISATIE

       De hele accentschaal hangt aan vijf variabelen die de layout op <body>
       zet vanuit config/organisaties.php — TZM magenta, ZGM turquoise, Adoria
       petrol. De basis eronder (papier, panelen, inkt) is voor alle drie
       gelijk; alleen het accent verschilt. Wie in drie bijna identieke
       systemen werkt moet in een oogopslag zien waar hij zit.

       De waarden hier zijn de terugval voor schermen buiten de layout om (het
       inlogscherm, een foutpagina): het turquoise van ADORIA groep.

       Let op de rolverdeling. `--merk` is de logokleur en is ALLEEN geldig als
       vlak; de felle turquoise van ZGM haalt op papierwit 2,3:1 en is dus
       onleesbaar als tekst. Daarvoor is `--merk-tekst`, die op AA zit.
       ----------------------------------------------------------------------- */
    /* De layout zet --org-* als inline stijl op <html>; dit zijn de
       terugvalwaarden voor schermen buiten de layout om. Ze worden hier
       omgezet naar de tokens die de rest van het bestand gebruikt, zodat het
       donkere thema die omzetting kan overnemen. */
    --org-kleur: #0E9098;
    --org-tekst: #046A72;
    --org-diep:  #045057;
    --org-zacht: #E7F4F5;
    --org-rand:  #C1E3E6;

    --merk:       var(--org-kleur);
    --merk-tekst: var(--org-tekst);
    --merk-diep:  var(--org-diep);
    --merk-zacht: var(--org-zacht);
    --merk-rand:  var(--org-rand);

    /* -- Accentschaal, afgeleid van de merkkleur --------------------------
       `color-mix` maakt van één merkkleur een volledige tintenschaal, zodat
       een nieuwe werkmaatschappij niets meer nodig heeft dan haar logokleur.
       De naam `salie` is blijven staan omdat hij op 68 plekken in dit bestand
       wordt gebruikt; hij betekent nu "accent", niet "groen". */
    --salie-50:  color-mix(in srgb, var(--merk)  5%, #FFFFFF);
    --salie-100: var(--merk-zacht);
    --salie-200: var(--merk-rand);
    --salie-300: color-mix(in srgb, var(--merk) 45%, #FFFFFF);
    --salie-400: color-mix(in srgb, var(--merk) 72%, #FFFFFF);
    --salie-500: var(--merk);
    --salie-600: var(--merk-tekst);
    --salie-700: var(--merk-tekst);
    --salie-800: var(--merk-diep);
    --salie-900: color-mix(in srgb, var(--merk-diep) 82%, #000000);

    /* -- Tweede accent: de diepe merkkleur -------------------------------
       Was terracotta. Eén merkhue door het hele scherm houdt rood, amber en
       groen vrij voor wat ze moeten betekenen: allergie, aandacht, akkoord.
       In een dossier is dat geen smaakkwestie. */
    --terra-50:  color-mix(in srgb, var(--merk-diep)  5%, #FFFFFF);
    --terra-100: color-mix(in srgb, var(--merk-diep) 11%, #FFFFFF);
    --terra-200: color-mix(in srgb, var(--merk-diep) 24%, #FFFFFF);
    --terra-300: color-mix(in srgb, var(--merk-diep) 45%, #FFFFFF);
    --terra-400: color-mix(in srgb, var(--merk-diep) 70%, #FFFFFF);
    --terra-500: var(--merk-diep);
    --terra-600: var(--merk-diep);
    --terra-700: color-mix(in srgb, var(--merk-diep) 88%, #000000);
    --terra-800: color-mix(in srgb, var(--merk-diep) 76%, #000000);
    --terra-900: color-mix(in srgb, var(--merk-diep) 64%, #000000);

    /* -- Kleurschaal: neutralen --
       Richting D "Het portaal" (1 oktober 2026, gekozen na de mockup in
       docs/ui/richtingen/richting-d.html): koele neutralen met een vleug
       navy, dezelfde familie als de zijbalk. Daarvóór waren het warme
       zandtinten ("Het instrument", 21 september). De naam `zand` is
       gebleven omdat hij op honderden plekken wordt gebruikt. */
    --zand-50:  #F9FBFC;
    --zand-100: #F1F4F7;
    --zand-200: #E3E9EE;
    --zand-300: #D2DAE2;
    --zand-400: #B9C4CF;
    --zand-500: #8795A3;
    --zand-600: #6B7A89;
    --zand-700: #5B6B7B;
    --zand-800: #2E3E4F;
    --zand-900: #1B2A3A;

    /* -- Semantische tokens -- */
    --succes:              #2C7A5B;
    --succes-donker:       #1F5C44;
    --succes-licht:        #E5F0E9;
    --succes-rand:         #C2DECB;
    --alert:               #B0412F;
    --alert-donker:        #8E3323;
    --alert-licht:         #F7E6E1;
    --alert-rand:          #E8C5BC;
    --waarschuwing:        #8A5F13;
    --waarschuwing-donker: #6E4C0E;
    --waarschuwing-licht:  #F8EFDC;
    --waarschuwing-rand:   #EAD9B0;
    --info:                #2E5E75;
    --info-licht:          #E4EEF3;
    --info-rand:           #C0D6E1;
    /* Afgekeurd in de dossiercontrole. Bewust paars en geen rood: rood is in
       dit systeem "ontbreekt", en die twee mogen op hetzelfde scherm niet op
       elkaar lijken. */
    --afkeur:              #6D4B8F;
    --afkeur-licht:        #F0EAF6;
    --afkeur-rand:         #DBCCE9;

    /* -- Legacy-aliassen (elders in views/CSS gebruikt; NIET verwijderen) -- */
    --kleur-primair: var(--salie-700);
    --kleur-primair-licht: var(--salie-500);
    --kleur-primair-donker: var(--salie-800);
    --kleur-accent: var(--terra-500);
    --kleur-accent-donker: var(--terra-600);
    --kleur-accent-licht: var(--terra-100);
    --kleur-achtergrond: #FFFFFF;
    --kleur-pagina: #F6F8FA;
    --kleur-kaart: var(--zand-100);
    --kleur-rand: var(--zand-300);
    --kleur-rand-zacht: var(--zand-200);
    --kleur-tekst: var(--zand-900);
    --kleur-tekst-zacht: var(--zand-700);
    --kleur-tekst-hint: #637385; /* AA-contrast (≥4.5:1) op wit */
    /* Koppen in de navy van de zijbalk. Een eigen token en niet --zij-grond:
       in het donkere thema blijft de zijbalk donker en moet een kop licht. */
    --kleur-kop: #0B2545;
    --vlak: #FFFFFF;             /* opvlak van kaarten/tabellen/inputs; donker thema overschrijft */
    --vlak-zacht: var(--zand-50);
    --kleur-alert: var(--alert);
    --kleur-alert-licht: var(--alert-licht);
    --kleur-succes: var(--succes);
    --kleur-succes-licht: var(--succes-licht);
    --kleur-waarschuwing: var(--waarschuwing);
    --kleur-waarschuwing-licht: var(--waarschuwing-licht);
    --accent: var(--salie-700);        /* gebruikt in kwaliteit/dashboard.php */
    --terracotta: var(--terra-500);    /* idem */

    /* -- Gradients (gericht ingezet, niet overal) -- */
    --gradient-primair: linear-gradient(165deg, var(--merk-tekst) 0%, var(--merk-diep) 100%);
    --gradient-hero: linear-gradient(135deg, var(--merk-tekst) 0%, var(--merk-diep) 62%, color-mix(in srgb, var(--merk-diep) 80%, #000000) 100%);
    --gradient-hero-zacht: linear-gradient(135deg, var(--merk-zacht) 0%, var(--zand-100) 62%, var(--merk-zacht) 100%);
    --gradient-accentrand: linear-gradient(120deg, var(--merk), var(--merk-diep));
    /* Van --merk-tekst en niet van --merk: witte initialen op de felle
       logokleur van ZGM halen 2,5:1. Beide eindpunten zitten nu op AA. */
    --gradient-avatar: linear-gradient(140deg, var(--merk-tekst), var(--merk-diep));
    --avatar-tekst: #FFFFFF;

    /* -- Spacing (4px-grid) -- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* -- Radius-schaal: ronder dan vóór richting D (was 4/6/8/10/12).
       Pillen en tellers blijven volledig rond. -- */
    --radius-xs: 5px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-pil: 999px;

    /* -- Schaduw-schaal (3 niveaus: rust, zweef, modal), getint op navy.
       Sinds richting D heeft een kaart in rust wél een zachte schaduw
       (--schaduw-sm) naast zijn hairline; --schaduw is voor wat zweeft
       (popover, gesleept blokje), --schaduw-lg alleen voor een modal. -- */
    --schaduw-sm: 0 1px 2px rgba(11, 37, 69, 0.06), 0 4px 16px rgba(11, 37, 69, 0.06);
    --schaduw: 0 2px 4px rgba(11, 37, 69, 0.08), 0 8px 24px rgba(11, 37, 69, 0.10);
    --schaduw-lg: 0 12px 40px rgba(11, 37, 69, 0.22), 0 4px 12px rgba(11, 37, 69, 0.10);

    /* -- Typografie (modular scale ~1.2) -- */
    --lettertype: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* De kopfamilie: paginatitels, bloktitels, KPI-cijfers, tabelkoppen en
       kapitaallabels. Zie de @font-face bovenaan. */
    --lettertype-kop: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Tien stappen, en niets ertussen. Er stonden 144 losse rem-waarden in
       dit bestand (0.62, 0.7, 0.74, 0.82, 0.87, 0.94, 1.02, …); die zijn op
       21 september 2026 elk op de dichtstbijzijnde stap gezet. Wil je een
       maat die hier niet staat, dan is de vraag welke stap je bedoelt. */
    --fs-2xs: 0.68rem;     /* tellers, chips, tabelkoppen in een dichte tabel */
    --fs-xs: 0.72rem;      /* micro-labels, tabelkoppen, kapitalen */
    --fs-klein: 0.8rem;    /* bijschriften, voetregels, hints */
    --fs-sm: 0.85rem;      /* secundaire tekst */
    --fs-tekst: 0.92rem;   /* tabelcellen, velden, knoppen, compacte tekst */
    --fs-basis: 1rem;      /* body */
    --fs-md: 1.1rem;       /* h2, kaarttitels */
    --fs-lg: 1.5rem;       /* h1, begroeting */
    --fs-xl: 1.75rem;      /* KPI-cijfer */
    --fs-2xl: 2rem;        /* display (kiosk, hero van het portaal) */
    --fs-3xl: 2.6rem;      /* kioskbord */
    --ls-kop: -0.02em;
    --ls-caps: 0.07em;
    --lh-strak: 1.15;
    --lh-kop: 1.25;
    --lh-body: 1.6;

    /* -- Beweging -- */
    --transitie-snel: 150ms cubic-bezier(0.2, 0, 0, 1);
    --transitie: 200ms cubic-bezier(0.2, 0, 0, 1);
    --transitie-traag: 250ms cubic-bezier(0.2, 0, 0, 1);

    /* -- Zijbalk ----------------------------------------------------------
       De zijbalk was donkergroen: het zwaarste vlak op het scherm, in een
       kleur die in geen enkel logo voorkomt. Nu licht, met de merkkleur
       alleen op het actieve item — daar waar hij iets betekent. */
    /* Navy (richting D): het enige donkere vlak op het scherm, zodat de
       navigatie zich losmaakt van de inhoud. Dezelfde navy voor alle
       organisaties; het actieve item is gevuld in de leesbare merkkleur
       (--merk-tekst, niet --merk: witte tekst op het turquoise van ZGM
       haalt 2,3:1). */
    --zij-grond: #0B2545;
    --zij-rand: #16365F;
    --zij-tekst: #D7E3F0;
    --zij-tekst-zacht: #8FB3D9;
    --zij-hover: #16365F;
    --zij-actief-vlak: var(--merk-tekst);
    --zij-actief-tekst: #FFFFFF;

    /* -- App-shell -- */
    --topbar-hoogte: 52px;
}

/* ---------------------------------------------------------------------------
   2. BASIS & TYPOGRAFIE
   ------------------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--lettertype);
    color: var(--kleur-tekst);
    background: var(--kleur-pagina);
    font-size: 15px;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--kleur-primair);
    text-decoration: none;
    transition: color var(--transitie-snel);
}

a:hover, a:focus {
    color: var(--kleur-accent-donker);
    text-decoration: underline;
    text-underline-offset: 2px;
}

:focus-visible {
    outline: 3px solid var(--salie-400);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: var(--terra-200);
    color: var(--terra-900);
}

h1, h2, h3 {
    line-height: var(--lh-kop);
    color: var(--kleur-tekst);
    font-family: var(--lettertype-kop);
}

h1 {
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: var(--lh-strak);
    margin: 0 0 0.85rem;
}

h2 {
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--fs-basis);
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* ---------------------------------------------------------------------------
   3. LAYOUT + SIDEBAR
   ------------------------------------------------------------------------- */

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

.sidebar {
    width: 268px;
    flex-shrink: 0;
    background: var(--zij-grond);
    color: var(--zij-tekst);
    border-right: 1px solid var(--zij-rand);
    display: flex;
    flex-direction: column;
    padding: 1rem 0.75rem;
    position: relative;
    z-index: 16;
}

.sidebar__logo {
    /* Het logo op een wit tegeltje: elk logo is voor een lichte achtergrond
       getekend en op donker verliest het zijn kleuren. */
    margin: 0 0.25rem 1rem;
    padding: 0.55rem 0.7rem;
    background: #FFFFFF;
    border-radius: var(--radius);
    display: block;
}

.sidebar__logo img {
    display: block;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.sidebar__nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--zij-tekst);
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    position: relative;
    transition: background var(--transitie-snel), color var(--transitie-snel), transform var(--transitie-snel);
}

.sidebar__nav a svg {
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity var(--transitie-snel);
}

.sidebar__nav a:hover, .sidebar__nav a:focus {
    background: var(--zij-hover);
    color: var(--zij-actief-tekst);
    text-decoration: none;
}

.sidebar__nav a:hover svg {
    opacity: 1;
}

.sidebar__nav a:active {
    transform: translateX(1px);
}

/* Actief item: accentbalk links + zachte achtergrondtint. */
.sidebar__nav a.actief {
    background: var(--zij-actief-vlak);
    color: var(--zij-actief-tekst);
    font-weight: 600;
}

/* Actief: gevuld in de leesbare merkkleur, witte tekst en wit icoon -- op
   de navy zijbalk is dat de enige plek waar de merkkleur staat. De 2px
   merkstreep van vóór richting D is weg: een gevuld item heeft hem niet
   nodig. */
.sidebar__nav a.actief svg {
    opacity: 1;
    color: currentColor;
}

.sidebar__sectie {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--zij-tekst-zacht);
    padding: 0.5rem 0.85rem 0.3rem;
    margin-top: 0.5rem;
}

.sidebar__nav a .nav-badge {
    margin-left: auto;
    background: var(--alert);
    color: #fff;
    border-radius: var(--radius-pil);
    font-size: var(--fs-2xs);
    font-weight: 700;
    min-width: 1.3rem;
    height: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Gebruikerskaart onderin: avatar met gradient-cirkel. */
.sidebar__gebruiker {
    border-top: 1px solid var(--zij-rand);
    padding: 0.85rem 0.6rem 0.1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--fs-sm);
    border-radius: var(--radius);
}

.sidebar__avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--gradient-avatar);
    color: var(--avatar-tekst);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-sm);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.sidebar__gebruiker-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.sidebar__gebruiker-naam {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__gebruiker-rol {
    color: var(--zij-tekst-zacht);
    font-size: var(--fs-xs);
}

.sidebar__gebruiker a {
    color: var(--zij-tekst-zacht);
    flex-shrink: 0;
    padding: 0.4rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    transition: background var(--transitie-snel), color var(--transitie-snel);
}

.sidebar__gebruiker a:hover {
    color: var(--zij-actief-tekst);
    background: var(--zij-hover);
}

/* Inklapbare sidebar-secties (accordeon per sectie, scrollbaar). */
.sidebar__nav {
    overflow-y: auto;
    min-height: 0;
    padding-right: 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: var(--zand-300) transparent;
}

.sidebar__nav::-webkit-scrollbar {
    width: 7px;
}

.sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--zand-300);
    border-radius: 4px;
}

.sidebar__groep {
    margin-top: 0.35rem;
}

.sidebar__sectie-knop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    /* Sinds richting D een navigatie-item met icoon in plaats van een
       kapitaallabel: de zeven secties zijn de hoofdingangen van de zijbalk. */
    color: var(--zij-tekst);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    transition: background var(--transitie-snel), color var(--transitie-snel);
}

.sidebar__sectie-naam {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}
.sidebar__sectie-naam svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* De items van een open sectie hangen aan een dunne lijn onder het
   sectie-icoon, zodat je ziet waar ze bij horen. */
.sidebar__groep .sidebar__items {
    margin-left: 1.25rem;
    padding-left: 0.45rem;
    border-left: 1px solid var(--zij-rand);
}
.sidebar__groep .sidebar__items a {
    font-weight: 400;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.sidebar__groep .sidebar__items a.actief {
    font-weight: 600;
}

.sidebar__sectie-knop:hover,
.sidebar__sectie-knop:focus-visible {
    background: var(--zij-hover);
    color: var(--zij-actief-tekst);
    outline: none;
}

.sidebar__chevron {
    font-size: var(--fs-tekst);
    line-height: 1;
    transition: transform 0.22s ease;
}

.sidebar__groep--dicht .sidebar__chevron {
    transform: rotate(-90deg);
}

.sidebar__items {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 640px;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease;
    opacity: 1;
}

.sidebar__groep--dicht .sidebar__items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Kopjes binnen een sectie (6 oktober 2026: "niets weghalen, beter
   ordenen"). Een kopje leest als een link met een pijltje; zijn links hangen
   een niveau dieper aan dezelfde dunne lijn als de sectie. */
.sidebar__sub-knop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--zij-tekst);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 400;
    text-align: left;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    transition: background var(--transitie-snel), color var(--transitie-snel);
}
.sidebar__sub-knop:hover,
.sidebar__sub-knop:focus-visible {
    background: var(--zij-hover);
    color: var(--zij-actief-tekst);
    outline: none;
}
.sidebar__sub-knop:focus-visible {
    box-shadow: 0 0 0 2px var(--zij-tekst-zacht);
}
.sidebar__sub--dicht .sidebar__chevron {
    transform: rotate(-90deg);
}
.sidebar__sub-items {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-left: 1.25rem;
    padding-left: 0.45rem;
    border-left: 1px solid var(--zij-rand);
}
.sidebar__sub--dicht .sidebar__sub-items {
    display: none;
}

/* De buren onder hetzelfde kopje, bovenaan het scherm. Pillen en geen
   tabbladen met een onderlijn: sommige schermen (Aanwezigheid) hebben al
   eigen tabbladen, en die moeten van deze te onderscheiden zijn. Ze lopen
   door op een volgende regel; op de telefoon schuift er niets zijwaarts. */
.module-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
}
.module-tabs__tab {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-pil);
    background: var(--vlak);
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}
.module-tabs__tab:hover {
    color: var(--kleur-tekst);
    border-color: var(--merk-rand);
    text-decoration: none;
}
.module-tabs__tab--actief {
    background: var(--merk-zacht);
    border-color: var(--merk-rand);
    color: var(--merk-diep);
}

.sidebar__label {
    flex: 1;
}

/* Hoofdkolom naast de sidebar: topbar + inhoud, met ambient-gradient bovenaan. */
.layout__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.layout__main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 260px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--merk) 7%, transparent), transparent 65%);
    pointer-events: none;
}

.layout__inhoud {
    flex: 1;
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1480px;
    min-width: 0;
    width: 100%;
    position: relative;
    animation: pagina-entree 240ms cubic-bezier(0.2, 0, 0, 1) both;
}

/*
 * Alleen opacity, geen transform. Dat was ooit `translateY(5px)` naar
 * `transform: none`, in de veronderstelling dat de eindwaarde `none` geen
 * containing block oplevert. Dat klopt niet: met `animation-fill-mode: both`
 * blijft de eindwaarde staan, en een uit een keyframe berekende `none` wordt
 * `matrix(1,0,0,1,0,0)` -- een tránsform, dus wél een containing block. Elk
 * `position: fixed` hierbinnen ging daardoor tegen de pagina staan in plaats
 * van tegen het venster: de modals van het weekprogramma werden zo hoog als de
 * pagina en waren niet meer te scrollen, terwijl de body op overflow:hidden
 * stond. Vijf pixels beweging zijn dat niet waard.
 */
@keyframes pagina-entree {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* De paginatitel staat kaal in de kopfamilie; de streep in gradient eronder
   is met richting D weggehaald. De sectie erboven (het "eyebrow") komt uit
   de topbar, die hem al kent. */
.layout__inhoud h1:not(.hero__begroeting) {
    color: var(--kleur-kop);
}

/* ---------------------------------------------------------------------------
   3b. TOPBAR (app-shell)
   ------------------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 14;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: var(--topbar-hoogte, 60px);
    padding: 0 1.5rem;
    background: rgba(246, 248, 250, 0.94);
    border-bottom: 1px solid var(--zand-200);
}

@supports (backdrop-filter: blur(12px)) {
    .topbar {
        background: rgba(246, 248, 250, 0.78);
        backdrop-filter: blur(12px) saturate(1.1);
        -webkit-backdrop-filter: blur(12px) saturate(1.1);
    }
}

.topbar__hamburger,
.topbar__inklap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--kleur-tekst-zacht);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transitie-snel), color var(--transitie-snel), transform var(--transitie-snel);
}

.topbar__hamburger:hover, .topbar__inklap:hover {
    background: var(--zand-100);
    color: var(--salie-700);
}

.topbar__hamburger:active, .topbar__inklap:active {
    transform: scale(0.92);
}

.topbar__hamburger {
    display: none; /* alleen mobiel */
}

.topbar__kop {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    margin-right: auto;
}

/* Het eyebrow: de sectie in de merkkleur boven de titel, in de kopfamilie. */
.topbar__sectie {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--merk-tekst);
}

.topbar__titel {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-basis);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--kleur-tekst);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zoekknop die de command palette opent. */
.topbar__zoek {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 220px;
    max-width: 320px;
    flex: 0 1 auto;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--zand-300);
    border-radius: var(--radius-sm);
    background: var(--vlak);
    color: var(--kleur-tekst-hint);
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transitie-snel), box-shadow var(--transitie-snel), color var(--transitie-snel);
}

.topbar__zoek:hover {
    border-color: var(--salie-400);
    color: var(--kleur-tekst-zacht);
    box-shadow: var(--schaduw-sm);
}

.topbar__zoek svg {
    flex-shrink: 0;
}

.topbar__zoek-tekst {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__kbd,
.palet__kbd {
    font-family: inherit;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--kleur-tekst-hint);
    background: var(--zand-100);
    border: 1px solid var(--zand-300);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
    white-space: nowrap;
}

.topbar__bel {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--kleur-tekst-zacht);
    flex-shrink: 0;
    transition: background var(--transitie-snel), color var(--transitie-snel);
}

.topbar__bel .thema-icoon--maan,
.topbar__bel .thema-icoon--zon {
    display: inline-flex;
}

.thema-icoon--zon {
    display: none !important;
}

[data-thema="donker"] .thema-icoon--zon {
    display: inline-flex !important;
}

[data-thema="donker"] .thema-icoon--maan {
    display: none !important;
}

.topbar__bel:hover {
    background: var(--zand-100);
    color: var(--salie-700);
    text-decoration: none;
}

.topbar__badge {
    position: absolute;
    top: 0.15rem;
    right: 0.1rem;
    background: var(--terra-500);
    color: #fff;
    border-radius: var(--radius-pil);
    font-size: var(--fs-2xs);
    font-weight: 700;
    min-width: 1.05rem;
    height: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    border: 2px solid var(--kleur-pagina);
}

.topbar__avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--gradient-avatar);
    color: var(--avatar-tekst);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-klein);
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: var(--schaduw-sm);
}

/* ---------------------------------------------------------------------------
   3c. COMMAND PALETTE (Ctrl+K)
   ------------------------------------------------------------------------- */

.palet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 24, 20, 0.4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
    z-index: 60;
    animation: tabs-fade-in 120ms ease;
}

@supports (backdrop-filter: blur(5px)) {
    .palet-overlay {
        background: rgba(28, 24, 20, 0.3);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

.palet-overlay[hidden] {
    display: none;
}

.palet {
    width: 100%;
    max-width: 560px;
    background: var(--vlak);
    border-radius: var(--radius-lg);
    box-shadow: var(--schaduw-lg);
    overflow: hidden;
    animation: modal-entree 200ms cubic-bezier(0.2, 0, 0, 1) both;
}

.palet__zoekrij {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--zand-200);
    color: var(--kleur-tekst-hint);
}

.palet__invoer {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--fs-basis);
    padding: 0;
    min-height: 0;
    color: var(--kleur-tekst);
}

.palet__invoer:focus {
    outline: none;
    box-shadow: none;
}

.palet__lijst {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    max-height: 46vh;
    overflow-y: auto;
}

.palet__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--kleur-tekst);
    font-size: var(--fs-tekst);
    font-weight: 500;
}

.palet__item svg {
    flex-shrink: 0;
    color: var(--kleur-tekst-zacht);
}

.palet__item-sectie {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--kleur-tekst-hint);
}

.palet__item--actief {
    background: var(--salie-50);
    color: var(--salie-800);
}

.palet__item--actief svg {
    color: var(--salie-700);
}

.palet__leeg {
    padding: 1.25rem;
    text-align: center;
    color: var(--kleur-tekst-hint);
    font-size: var(--fs-tekst);
}

.palet__voet {
    padding: 0.55rem 1.1rem;
    border-top: 1px solid var(--zand-200);
    font-size: var(--fs-xs);
    color: var(--kleur-tekst-hint);
    display: flex;
    gap: 1rem;
}

/* ---------------------------------------------------------------------------
   3d. SIDEBAR MINI-RAIL (ingeklapt op desktop)
   ------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    body.zijbalk-smal .sidebar {
        width: 76px;
        padding: 1.25rem 0.7rem;
    }

    body.zijbalk-smal .sidebar__logo {
        padding: 0.45rem;
        align-self: center;
    }

    body.zijbalk-smal .sidebar__logo img {
        width: 40px;
        height: auto;
    }

    body.zijbalk-smal .sidebar__sectie-knop,
    body.zijbalk-smal .sidebar__sub-knop {
        display: none;
    }

    body.zijbalk-smal .sidebar__sub-items {
        display: flex !important;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    body.zijbalk-smal .sidebar__items {
        max-height: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    body.zijbalk-smal .sidebar__label,
    body.zijbalk-smal .sidebar__gebruiker-info,
    body.zijbalk-smal .sidebar__gebruiker > a {
        display: none;
    }

    body.zijbalk-smal .sidebar__nav a {
        justify-content: center;
        padding: 0.62rem 0;
    }

    body.zijbalk-smal .sidebar__nav a.actief::before {
        left: -0.7rem;
    }

    body.zijbalk-smal .sidebar__nav a .nav-badge {
        position: absolute;
        top: 0.15rem;
        right: 0.3rem;
        margin: 0;
        min-width: 0.95rem;
        height: 0.95rem;
        font-size: var(--fs-2xs);
        padding: 0 0.2rem;
    }

    body.zijbalk-smal .sidebar__gebruiker {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    body.zijbalk-smal .topbar__inklap svg {
        transform: rotate(180deg);
    }
}

/* ---------------------------------------------------------------------------
   3e. SKELETON / SHIMMER (voor asynchrone of ladende blokken)
   ------------------------------------------------------------------------- */

.skelet {
    position: relative;
    color: transparent !important;
    background: var(--zand-100);
    border-radius: var(--radius-sm);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.skelet::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: skelet-glans 1.4s ease infinite;
}

@keyframes skelet-glans {
    to { transform: translateX(100%); }
}

.skelet--regel {
    display: block;
    height: 0.95rem;
    margin: 0.3rem 0;
}

.skelet--blok {
    display: block;
    height: 6rem;
}

.skelet--cirkel {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
}

/* MPA-paginatransities (progressive enhancement; Chrome 126+). */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation-duration: 140ms;
}

::view-transition-new(root) {
    animation-duration: 200ms;
}

/* ---------------------------------------------------------------------------
   4. HERO & KPI-KAARTEN (dashboard per rol)
   ------------------------------------------------------------------------- */

/* Hero: gradient in de merkkleur van de organisatie, met subtiel lichtspel. */
.hero {
    /* Was een paars gradient-blok met twee lichtvlekken waar de KPI-kaarten
       overheen schoven. Nu één regel: begroeting, datum, een lijn, en dan de
       cijfers. Het dashboard is een werkblad, geen welkomstpagina. */
    position: relative;
    background: transparent;
    color: var(--kleur-tekst);
    border-bottom: 1px solid var(--zand-200);
    border-radius: 0;
    padding: 0.25rem 0 1rem;
    margin-bottom: 0.75rem;
}

.hero__inhoud {
    position: relative;
    z-index: 1;
}

.hero__begroeting {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: var(--ls-kop);
    line-height: var(--lh-strak);
    margin: 0 0 0.35rem;
    color: var(--kleur-tekst);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hero__datum {
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-sm);
    margin: 0;
    letter-spacing: 0.01em;
}

.hero__datum::first-letter {
    text-transform: uppercase;
}

.hero__acties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: var(--sp-5);
}

/* Zachtere hero voor het cliëntportaal: licht, veel witruimte, grote letters. */
.hero--zacht {
    /* Het portaal: iets meer lucht, verder dezelfde regel. */
    padding: var(--sp-4) 0 var(--sp-5);
}


.hero--zacht .hero__datum {
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-basis);
}


.kpi-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.6rem;
    margin-bottom: var(--sp-6);
}

/* Portaal: een bezoek is één regel met één knop; wijzigen of afzeggen
   zit achter een uitklapregel. */
.portaal-bezoek {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}
.portaal-bezoek:last-of-type { border-bottom: none; }
.portaal-bezoek__kop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
}
.portaal-bezoek__kop .inline-formulier { margin-left: auto; }
.portaal-bezoek__anders > summary {
    list-style: none;
    cursor: pointer;
    margin-top: 0.3rem;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.portaal-bezoek__anders > summary::-webkit-details-marker { display: none; }
.portaal-bezoek__anders[open] > summary { margin-bottom: 0.5rem; }
.portaal-bezoek__anders .formulier-rij .knop { flex: 0 0 auto; }

/* De dienstknop op Mijn dag met zijn uitleg eronder, niet ernaast. */
.dienst-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

/* Betalingsvoortgang in de factuurlijst: hoeveel van het bedrag binnen is.
   Een balk zegt het sneller dan twee bedragen naast elkaar. */
.betaalbalk {
    display: block;
    height: 5px;
    width: 100%;
    max-width: 9rem;
    margin-top: 0.3rem;
    border-radius: 3px;
    background: var(--zand-200);
    overflow: hidden;
}
.betaalbalk > span {
    display: block;
    height: 100%;
    background: var(--succes);
    border-radius: 3px;
}
.betaalbalk--open > span { background: var(--waarschuwing); }

/* ---------------------------------------------------------------------------
   DE COCKPIT (dashboard van de coördinator, richting D, 2 oktober 2026)

   Vier themakaarten in plaats van elf gelijke KPI-tegels: dossiers,
   planning, zorg en kwaliteit, administratie en personeel. Elke kaart heeft
   één cijfer, een stoplicht en de regels die eronder vallen; elke regel is
   een link naar het scherm waar je het oplost. De gekleurde linkerstreep is
   hier een staat (rood, amber, groen), geen versiering.
   ------------------------------------------------------------------------- */
.eyebrow {
    margin: 0 0 var(--sp-1);
    font-family: var(--lettertype-kop);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--merk-tekst);
}

/* Vier naast elkaar op een breed scherm, anders twee bij twee: met
   auto-fit vielen ze op een laptop als drie plus één. */
.thema-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
@media (min-width: 1440px) {
    .thema-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .thema-raster { grid-template-columns: minmax(0, 1fr); }
}

.thema-kaart {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-left: 5px solid var(--zand-300);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-sm);
    min-width: 0;
}
.thema-kaart--succes { border-left-color: var(--succes); }
.thema-kaart--waarschuwing { border-left-color: var(--waarschuwing); }
.thema-kaart--alert { border-left-color: var(--alert); }

.thema-kaart__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.thema-kaart__kop .eyebrow { margin: 0; }

.thema-kaart__cijfer {
    margin: 0;
    font-family: var(--lettertype-kop);
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--kleur-kop);
    font-variant-numeric: tabular-nums;
}
.thema-kaart__cijfer small {
    margin-left: var(--sp-1);
    font-family: var(--lettertype);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--kleur-tekst-zacht);
}

.thema-kaart__sub {
    margin: 0;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
}

.thema-kaart__balk {
    height: 8px;
    border-radius: var(--radius-pil);
    background: var(--zand-200);
    overflow: hidden;
}
.thema-kaart__balk > span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pil);
    background: var(--succes);
}
.thema-kaart__balk--laag > span { background: var(--waarschuwing); }

.thema-kaart__regels {
    list-style: none;
    margin: var(--sp-1) 0 0;
    padding: var(--sp-2) 0 0;
    border-top: 1px solid var(--zand-200);
    display: grid;
    gap: 2px;
}

.thema-regel {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    margin: 0 calc(-1 * var(--sp-2));
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--kleur-tekst);
    text-decoration: none;
}
.thema-regel:hover, .thema-regel:focus-visible {
    background: var(--zand-100);
    text-decoration: none;
}
.thema-regel__aantal {
    flex: 0 0 1.7rem;
    font-family: var(--lettertype-kop);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--kleur-tekst-hint);
}
.thema-regel--alert .thema-regel__aantal { color: var(--alert); }
.thema-regel--waarschuwing .thema-regel__aantal { color: var(--waarschuwing); }
.thema-regel__tekst small {
    display: block;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
}

.cockpit-raster {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-4);
    align-items: start;
    margin-bottom: var(--sp-6);
}
.cockpit-raster__kolom {
    display: grid;
    gap: var(--sp-4);
}

.aandacht-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aandacht-lijst > li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--zand-200);
}
.aandacht-lijst > li:last-child { border-bottom: none; }
.aandacht-lijst__aantal {
    flex: 0 0 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--merk-zacht);
    border: 1px solid var(--merk-rand);
    color: var(--merk-tekst);
    font-family: var(--lettertype-kop);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.aandacht-lijst__tekst {
    flex: 1;
    min-width: 0;
}
.aandacht-lijst__tekst b {
    display: block;
    font-weight: 600;
    color: var(--kleur-kop);
}
.aandacht-lijst__tekst span {
    display: block;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kaart__voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--zand-200);
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

@media (max-width: 900px) {
    .cockpit-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Snelle acties op het dashboard: een rij tegels met een iconchip en een
   werkwoord. Geen kaart eromheen -- de tegels zijn de kaart. */
.snelle-acties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.6rem;
    margin-bottom: var(--sp-6);
}
.snelle-actie {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    color: var(--kleur-tekst);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transitie-snel), background var(--transitie-snel);
}
.snelle-actie:hover, .snelle-actie:focus-visible {
    border-color: var(--merk-rand);
    background: var(--merk-zacht);
    text-decoration: none;
}
.snelle-actie__icoon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--salie-100);
    color: var(--salie-700);
}
.snelle-actie__icoon svg { width: 18px; height: 18px; }
.snelle-actie__icoon--info { background: var(--info-licht); color: var(--info); }
.snelle-actie__icoon--succes { background: var(--succes-licht); color: var(--succes); }
.snelle-actie__icoon--alert { background: var(--alert-licht); color: var(--alert); }
.snelle-actie__icoon--waarschuwing { background: var(--waarschuwing-licht); color: var(--waarschuwing); }

/* KPI-tegel: klein, plat, met een hairline. Was glasachtig wit met blur en
   een gradient-rand -- decoratie zonder betekenis, en op een tablet zonder
   backdrop-filter gewoon een halfdoorzichtig vlak. Hover verandert alleen de
   rand: een tegel is een getal, geen knop. */
.kpi-kaart {
    position: relative;
    /* Een zachte kleurloop van wit naar de lichte tint van de soort, met
       rechtsonder het icoon als watermerk (app.js kloont de chip erin).
       Op verzoek van de opdrachtgever (22 september 2026), naar zijn andere
       systeem -- maar veel zachter: de tint blijft onder de tien procent en
       het cijfer blijft in de inkt of de betekeniskleur. */
    --kpi-tint: var(--merk-zacht);
    background: linear-gradient(135deg, var(--vlak) 0%, var(--vlak) 45%, var(--kpi-tint) 100%);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    padding: 0.85rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow: hidden;
    transition: border-color var(--transitie);
}
.kpi-kaart:has(.kpi-kaart__chip--alert), .kpi-kaart--alert { --kpi-tint: var(--alert-licht); }
.kpi-kaart:has(.kpi-kaart__chip--waarschuwing), .kpi-kaart--waarschuwing { --kpi-tint: var(--waarschuwing-licht); }
.kpi-kaart:has(.kpi-kaart__chip--info), .kpi-kaart--info { --kpi-tint: var(--info-licht); }
.kpi-kaart:has(.kpi-kaart__chip--succes), .kpi-kaart--succes { --kpi-tint: var(--succes-licht); }
.kpi-kaart:has(.kpi-kaart__chip--terra) { --kpi-tint: var(--terra-100); }

/* Het watermerk: een grote, bijna doorzichtige kopie van het icoon. Het
   zit achter de tekst (z-index) en vangt geen klik of tik. */
.kpi-kaart__watermerk {
    position: absolute;
    right: -0.6rem;
    bottom: -0.9rem;
    width: 5.2rem;
    height: 5.2rem;
    opacity: 0.09;
    color: var(--kleur-tekst);
    pointer-events: none;
    z-index: 0;
}
.kpi-kaart:has(.kpi-kaart__chip--alert) .kpi-kaart__watermerk, .kpi-kaart--alert .kpi-kaart__watermerk { color: var(--alert); }
.kpi-kaart:has(.kpi-kaart__chip--waarschuwing) .kpi-kaart__watermerk { color: var(--waarschuwing); }
.kpi-kaart:has(.kpi-kaart__chip--info) .kpi-kaart__watermerk { color: var(--info); }
.kpi-kaart:has(.kpi-kaart__chip--succes) .kpi-kaart__watermerk { color: var(--succes); }
.kpi-kaart:not(:has(.kpi-kaart__chip--alert, .kpi-kaart__chip--waarschuwing, .kpi-kaart__chip--info, .kpi-kaart__chip--succes, .kpi-kaart__chip--terra)) .kpi-kaart__watermerk { color: var(--merk); }
.kpi-kaart__watermerk svg { width: 100%; height: 100%; }
.kpi-kaart > *:not(.kpi-kaart__watermerk) { position: relative; z-index: 1; }

.kpi-kaart:hover {
    border-color: var(--zand-300);
}

.kpi-kaart__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.kpi-kaart__label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kleur-tekst-zacht);
    margin: 0;
}

/* Icoon in een zachte gekleurde chip. */
.kpi-kaart__chip {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--salie-100);
    color: var(--salie-700);
}

.kpi-kaart__chip--terra {
    background: var(--terra-100);
    color: var(--terra-600);
}

.kpi-kaart__chip--alert {
    background: var(--alert-licht);
    color: var(--alert);
}

.kpi-kaart__chip--waarschuwing {
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing);
}

.kpi-kaart__chip--info {
    background: var(--info-licht);
    color: var(--info);
}

.kpi-kaart__cijfer {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--kleur-tekst);
    margin: 0.2rem 0 0;
    font-variant-numeric: tabular-nums;
}

.kpi-kaart__cijfer--alert {
    color: var(--alert);
}

.kpi-kaart__cijfer small {
    font-size: 0.45em;
    font-weight: 600;
    color: var(--kleur-tekst-zacht);
    letter-spacing: 0;
}

/* Trend-/signaalchip (▲/▼ of tekst) onder het cijfer. */
.kpi-kaart__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-xs);
    background: var(--zand-100);
    color: var(--kleur-tekst-zacht);
}

.kpi-kaart__trend--positief {
    background: var(--succes-licht);
    color: var(--succes-donker);
}

.kpi-kaart__trend--negatief {
    background: var(--alert-licht);
    color: var(--alert-donker);
}

.kpi-kaart__trend--waarschuwing {
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing-donker);
}

.kpi-kaart__voet {
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    margin: 0.35rem 0 0;
}

.kpi-kaart__voet a {
    font-weight: 600;
}


/* Grote actiekaarten (zorgverlener mobiel): touch targets ≥48px. */
.actie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.actie-kaart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 96px;
    padding: var(--sp-4);
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--schaduw-sm);
    color: var(--kleur-tekst);
    font-weight: 600;
    font-size: var(--fs-tekst);
    line-height: 1.3;
    transition: transform var(--transitie), box-shadow var(--transitie), border-color var(--transitie);
}

.actie-kaart:hover, .actie-kaart:focus {
    text-decoration: none;
    color: var(--salie-800);
    border-color: var(--salie-300);
    transform: translateY(-2px);
    box-shadow: var(--schaduw);
}

.actie-kaart:active {
    transform: translateY(0) scale(0.985);
}

.actie-kaart__chip {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--salie-100);
    color: var(--salie-700);
}

.actie-kaart--terra .actie-kaart__chip {
    background: var(--terra-100);
    color: var(--terra-600);
}

/* Eerstvolgende afspraak als grote kaart (zorgverlener-hero). */
.volgende-afspraak {
    position: relative;
    z-index: 2;
    background: var(--vlak);
    border-radius: var(--radius-lg);
    box-shadow: var(--schaduw);
    padding: var(--sp-5);
    margin: 0 var(--sp-5) var(--sp-5);
    border-left: 4px solid var(--terra-500);
}

.volgende-afspraak__tijd {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--salie-800);
}

.volgende-afspraak__label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--terra-600);
    margin-bottom: 0.15rem;
}

/* ---------------------------------------------------------------------------
   5. KAARTEN & GRIDS
   ------------------------------------------------------------------------- */

.kaart {
    --kaart-px: 1.25rem;
    --kaart-py: 1.1rem;
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-sm);
    padding: var(--kaart-py) var(--kaart-px);
    transition: box-shadow var(--transitie), transform var(--transitie), border-color var(--transitie);
}

.kaart h2 {
    margin-top: 0;
    font-size: var(--fs-md);
}

/* ---------------------------------------------------------------------------
   DE KAARTKOP: één vorm voor elke titel van een blok

   Er waren drie vormen door elkaar: een <h2> als eerste kind van een kaart,
   een .paneel__kop met de titel en een teller, en een <h2> los bóven een
   kaart. Op één scherm zag je ze naast elkaar, en dat leest als drie soorten
   blokken. Nu is de kop van een blok een band over de volle breedte van het
   blok, in de zachte merkkleur, met de titel links en een teller of knop
   rechts. De <h2> hoort ín het blok; een titel erboven is sinds 21
   september 2026 een fout in de view, geen stijlkeuze.

   De band trekt zichzelf met negatieve marges tot in de rand van de kaart;
   daarvoor kent elke kaart zijn eigen --kaart-px/--kaart-py.
   ------------------------------------------------------------------------- */
/* 1. De band zelf: elke h2 in de inhoud, elke .paneel__kop (ook los of in
      een kaart), de kop van kerngegevens en "dossier op orde", en de
      summary van een inklapkaart. */
/* :where() houdt de specificiteit laag, zodat de uitzonderingen hieronder
   (een h2 ín een band) gewoon winnen. */
/* Sinds richting D (1 oktober 2026) is de band niet meer in de zachte
   merkkleur maar een kale kop in de kopfamilie met een hairline eronder,
   zoals de card-head van het Abyco-portaal. De opbouw (één vorm, tot in de
   kaartrand) is gebleven. */
.layout__inhoud :where(h2:not(.modal__titel):not(.jaarmaand__naam):not(.kiosk-bord__groep)),
.layout__inhoud .paneel__kop,
.kerngegevens__kop,
.compleet__kop,
.inklapkaart > summary {
    margin: var(--sp-5) 0 var(--sp-4);
    padding: 0.7rem 1.1rem;
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    font-family: var(--lettertype-kop);
    font-size: var(--fs-basis);
    font-weight: 700;
    line-height: var(--lh-kop);
    color: var(--kleur-kop);
}
.layout__inhoud :where(h2:first-child) { margin-top: 0; }

/* Een h2 ín een band (paneel__kop, kerngegevens__kop, compleet__kop) is
   gewone tekst: de ouder is al de band. */
.paneel__kop h2, .kerngegevens__kop h2, .compleet__kop h2,
.paneel__kop h2:first-child {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* 2. Als eerste kind van een kaart trekt de band zichzelf tot in de
      kaartrand: geen eigen rand meer (de kaart heeft er een), alleen een
      hairline eronder, en de bovenhoeken volgen de kaart. */
.kaart > h2:first-child,
.kaart > h3:first-child,
.kaart > input[type="hidden"]:first-child + h2,
.kaart > .paneel__kop:first-child,
.formulier-kaart > h2:first-child,
.formulier-kaart > h3:first-child,
.formulier-kaart > input[type="hidden"]:first-child + h2,
.formulier-kaart > .paneel__kop:first-child,
.paneel > .paneel__kop,
.kerngegevens > .kerngegevens__kop,
.compleet > .compleet__kop {
    margin: calc(-1 * var(--kaart-py)) calc(-1 * var(--kaart-px)) var(--sp-4);
    padding: 0.7rem max(var(--kaart-px), 1.1rem);
    border: none;
    border-bottom: 1px solid var(--zand-200);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    font-size: var(--fs-basis);
    font-weight: 700;
}

/* Een h3 als kaartkop leest als de h2. */
.kaart > h3:first-child, .formulier-kaart > h3:first-child {
    background: var(--vlak);
    font-family: var(--lettertype-kop);
    line-height: var(--lh-kop);
    color: var(--kleur-kop);
}

/* Een tweede h2 halverwege een kaart: dezelfde band, tot in de rand, met
   een lijn erboven in plaats van eronder. */
.kaart > h2:not(:first-child),
.formulier-kaart > h2:not(:first-child) {
    margin-left: calc(-1 * var(--kaart-px));
    margin-right: calc(-1 * var(--kaart-px));
    border: none;
    border-top: 1px solid var(--zand-200);
    border-bottom: 1px solid var(--zand-200);
    border-radius: 0;
    padding-left: max(var(--kaart-px), 1.1rem);
    padding-right: max(var(--kaart-px), 1.1rem);
}

/* De formulierkaart is een flex-kolom met een eigen tussenruimte. */
.formulier-kaart > h2:first-child,
.formulier-kaart > input[type="hidden"]:first-child + h2,
.formulier-kaart > .paneel__kop:first-child {
    margin-bottom: 0;
}

/* De inklapkaart: de summary ís de kop. Dicht: alleen de band. Open: de
   band met een hairline eronder en de inhoud eronder. */
.inklapkaart > summary {
    margin: 0;
    border: none;
    border-radius: calc(var(--radius) - 1px);
}
.inklapkaart[open] > summary {
    border-bottom: 1px solid var(--zand-200);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* Geen overflow: hidden op de kaart voor de hoeken: een popover of
   uitklaplijst in een kaart zou dan worden afgeknipt. De band heeft zelf
   afgeronde bovenhoeken, één pixel kleiner dan de kaart. */

/* Een kaart die dichtgevouwen begint.

   Op een lijstscherm is de lijst waar je voor komt; een invoerformulier dat
   altijd openstaat duwt hem onder de vouw en je moet er elke keer langs. Een
   <details> is hier de juiste vorm: native, dus geen JavaScript en daarmee
   geen ruzie met de CSP.

   Zet hem wél open als er iets is misgegaan -- anders verdwijnt het formulier
   waar de foutmelding over gaat. */
.inklapkaart {
    padding: 0;
    margin-bottom: var(--sp-6);
    overflow: hidden;
}

.inklapkaart > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--kleur-tekst);
}

.inklapkaart > summary::-webkit-details-marker {
    display: none;
}

/* Het driehoekje wijst opzij als hij dicht is en omlaag als hij open staat --
   dat is het enige dat verklapt dat er iets in zit. */
.inklapkaart > summary::before {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    border-left: 0.4rem solid currentColor;
    border-top: 0.32rem solid transparent;
    border-bottom: 0.32rem solid transparent;
    transition: transform var(--transitie-snel);
}

.inklapkaart[open] > summary::before {
    transform: rotate(90deg);
}

.inklapkaart > summary:hover,
.inklapkaart > summary:focus-visible {
    background: var(--zand-100);
}

.inklapkaart > summary small {
    color: var(--kleur-tekst-zacht);
    font-weight: 400;
}

/* De inhoud krijgt de padding die de kaart zelf kwijt is; de summary moet over
   de volle breedte kunnen oplichten. */
.inklapkaart > *:not(summary) {
    padding: 0 1.6rem 1.6rem;
}

/* Een formulier ín een inklapkaart hoeft zijn eigen omlijsting niet: die zou
   dan dubbel om de velden heen staan. */
.inklapkaart > .formulier-kaart {
    background: none;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    max-width: none;
}

/* 230px gaf op een breed scherm vijf kolommen naast elkaar; labels als
   "Wettelijke vertegenwoordiging" braken dan over drie regels. Met 300px komen
   er twee tot drie kolommen en blijft een regel een regel. */
.kaart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.1rem;
    margin-bottom: var(--sp-6);
}

.kaart-grid .kaart:hover {
    box-shadow: var(--schaduw);
    transform: translateY(-2px);
}

.kaart--gestapeld {
    margin-bottom: 1rem;
}

/* De scan van het identiteitsbewijs (stap 3): bestandsvak en knop op één
   lijn, knop gelijk met de onderkant van het vak. */
.intake-idscan__formulier {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
}
.intake-idscan__bestand {
    flex: 1 1 16rem;
}
.intake-idscan__bestand label,
.intake-idscan__bestand input {
    margin-bottom: 0;
}
.intake-idscan__lijst {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
}
.intake-idscan__lijst li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}
.intake-idscan__lijst small {
    color: var(--kleur-tekst-zacht);
}
.intake-idscan__lijst .inline-formulier {
    margin-left: auto;
}

/* Het icoon van een kaart staat ín de kop (h2), als kleine chip vóór de
   titel. Het was een los blok van 2,5rem bóven de titel, waardoor die
   kaarten een andere kop hadden dan alle andere. */
.kaart__icoon {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--radius-xs);
    background: var(--salie-100);
    color: var(--salie-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 0.55rem;
    flex-shrink: 0;
}
.kaart__icoon svg { width: 15px; height: 15px; }

.alert-rood {
    color: var(--alert);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   6. KNOPPEN
   ------------------------------------------------------------------------- */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.85rem;
    min-height: 34px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: transform var(--transitie-snel), box-shadow var(--transitie-snel), background var(--transitie-snel), border-color var(--transitie-snel), color var(--transitie-snel);
}

.knop:hover {
    text-decoration: none;
}

/* Tastbare press-state. */
.knop:active {
    transform: translateY(1px) scale(0.98);
}

.knop--primair {
    background: var(--kleur-primair);
    color: #fff;
}

.knop--primair:hover {
    background: var(--kleur-primair-donker);
    color: #fff;
}

.knop--accent {
    background: var(--kleur-accent);
    color: #fff;
    box-shadow: var(--schaduw-sm);
}

.knop--accent:hover {
    background: var(--kleur-accent-donker);
    box-shadow: var(--schaduw);
    color: #fff;
}

.knop--alert {
    background: var(--alert);
    color: #fff;
}

.knop--alert:hover {
    background: var(--alert-donker);
    color: #fff;
}

.knop--secundair {
    background: var(--vlak);
    color: var(--kleur-tekst);
    border: 1px solid var(--zand-300);
}

.knop--secundair:hover {
    border-color: var(--salie-400);
    color: var(--salie-700);
    background: var(--salie-50);
}

.knop-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   7. FORMULIEREN
   ------------------------------------------------------------------------- */

label {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
    letter-spacing: 0.01em;
    display: inline-block;
    margin-bottom: 0.2rem;
}

input, select, textarea {
    font-family: inherit;
    font-size: var(--fs-tekst);
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--zand-300);
    border-radius: var(--radius-sm);
    background: var(--vlak);
    color: var(--kleur-tekst);
    width: 100%;
    min-height: 36px;
    transition: border-color var(--transitie-snel), box-shadow var(--transitie-snel);
}

textarea {
    min-height: 0;
}

input::placeholder, textarea::placeholder {
    color: var(--kleur-tekst-hint);
}

input:hover, select:hover, textarea:hover {
    border-color: var(--zand-400);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    /* --merk is de logokleur en is voor een focusrand te licht: het turquoise
       van ZGM haalt op wit 2,5:1, waar WCAG voor een focusindicator 3:1 vraagt.
       --merk-tekst zit op minimaal 5,8:1. */
    border-color: var(--merk-tekst);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 30%, transparent);
}

input[type="checkbox"], input[type="radio"] {
    min-height: 0;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--salie-600);
}

/* Padding en tussenruimte op de 4px-schaal bovenaan dit bestand, en niet op een
   los gekozen 1,75rem: de plakkende knoppenbalk trekt zichzelf met negatieve
   marges tot in deze rand, en die twee moeten dezelfde maat aanhouden. */
.formulier-kaart {
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    --kaart-px: var(--sp-6);
    --kaart-py: var(--sp-5);
    border-radius: var(--radius);
    padding: var(--kaart-py) var(--kaart-px);
    margin-bottom: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 900px;
}

.formulier-rij {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.formulier-rij > div, .formulier-rij > input, .formulier-rij > select {
    flex: 1;
    min-width: 160px;
}

/* ---------------------------------------------------------------------------
   DE ACTIEKOLOM VAN EEN TABEL (22 september 2026)

   Rechts uitgelijnd, op één regel, kleine knoppen met dezelfde tussenruimte.
   Een cel krijgt class="acties", of wordt herkend aan zijn inhoud: de
   laatste cel van een rij met alleen knoppen of inline formulieren. Een
   "Bekijken"-tekstlink is sinds deze ronde een kleine secundaire knop, net
   als "Bewerken" en "Openen" -- drie woorden, één vorm.
   ------------------------------------------------------------------------- */
td.acties,
td:last-child:has(> .knop),
td:last-child:has(> form.inline-formulier),
td:last-child:has(> .meer-acties),
td:last-child:has(> details.meer-menu) {
    text-align: right;
    white-space: nowrap;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
td.acties > .knop, td.acties > form, td.acties > details,
td:last-child:has(> .knop) > .knop, td:last-child:has(> .knop) > form {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.3rem;
}
td.acties > small, td:last-child:has(> .knop) > small {
    display: block;
    text-align: right;
    color: var(--kleur-tekst-zacht);
}
th:last-child:empty { width: 1%; }

/* ---------------------------------------------------------------------------
   ÉÉN FORMULIERRITME (22 september 2026)

   Er waren twee families formulieren: de dossierschermen via _veld.php
   (raster, tussenruimte --sp-3, knoppen in een balk rechts) en 130
   handgeschreven formulieren met .formulier-rij, waar de rijen tegen elkaar
   stonden en de opslaanknop als los blok onderaan links stond -- of over de
   volle breedte, omdat een flex-kolom een knop uitrekt. Dezelfde maten voor
   allebei; en de laatste knop van een formulier staat rechts, op een eigen
   regel, met wat lucht erboven. Op een telefoon is hij volle breedte.
   ------------------------------------------------------------------------- */
/* `:not(.formulier-raster)`: in een raster is de afstand de `gap`, en een
   marge erbovenop duwt élk veld ná het eerste een rij-afstand omlaag. Dat
   was niet te zien op een formulier van één kolom, maar in een raster stond
   het tweede veld van elke rij 12px lager dan het eerste -- op
   Klachtenregeling, Facturatie, Pauzeregel, overal. Gemeten op 25-09-2026:
   veld 1 op y=311, veld 2 op y=323. */
form:not(.formulier-kaart):not(.formulier-raster) > .formulier-rij + .formulier-rij,
form:not(.formulier-kaart):not(.formulier-raster) > .formulier-rij + .formulier-veld,
form:not(.formulier-kaart):not(.formulier-raster) > .formulier-veld + .formulier-rij,
form:not(.formulier-kaart):not(.formulier-raster) > .formulier-veld + .formulier-veld,
form:not(.formulier-kaart):not(.formulier-raster) > .formulier-rij + .checkbox-label,
form:not(.formulier-kaart):not(.formulier-raster) > .formulier-rij + .formulier-raster,
form:not(.formulier-kaart):not(.formulier-raster) > .formulier-raster + .formulier-rij {
    margin-top: var(--sp-3);
}

/* Een raster is een raster, ook als het zelf het formulier is: nooit een
   marge tussen de velden. */
.formulier-raster > .formulier-veld {
    margin-top: 0;
}

/* De laatste knop van een formulier: rechts, eigen regel, lucht erboven.
   Niet voor een inline formulier (één knop in een tabelcel of een kop). */
:is(.kaart, .formulier-kaart, .paneel__lijf, .modal, .inklapkaart, .layout__inhoud, .formulier-groep) > form:not(.inline-formulier) > .knop:last-child,
form.formulier-kaart > .knop:last-child {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-top: var(--sp-4);
    align-self: flex-end;
}
/* Een knop in een veld van het raster (de "Ziekmelden"-vorm): een veld is een
   flex-kolom en rekt de knop uit tot volle breedte. Niet uitrekken; en in
   het laatste veld van het raster rechts, zoals elke slotknop. */
.formulier-veld > .knop { align-self: flex-start; }
.formulier-raster > .formulier-veld:last-child > .knop:first-child { align-self: flex-end; }
.formulier-raster > .formulier-veld:last-child > .knop:first-child ~ .auth-kaart__hint { text-align: right; }

form:not(.inline-formulier) > .knop-rij:last-child,
form.formulier-kaart > .knop-rij:last-child {
    justify-content: flex-end;
    margin-top: var(--sp-4);
}
/* Annuleren of Vorige als eerste, secundaire knop van zo'n rij staat links;
   de rest rechts. Zelfde verdeling als de kleefbalk van het dossier. */
form > .knop-rij:last-child > .knop--secundair:first-child:not(:last-child),
form > .knop-rij:last-child > .knop--tekst:first-child:not(:last-child) {
    margin-right: auto;
}
@media (max-width: 640px) {
    :is(.kaart, .formulier-kaart, .paneel__lijf, .modal, .inklapkaart, .layout__inhoud, .formulier-groep) > form:not(.inline-formulier) > .knop:last-child,
    form.formulier-kaart > .knop:last-child {
        width: 100%;
    }
    form > .knop-rij:last-child > .knop { flex: 1 1 45%; }
}

.formulier-rij--meerkoloms {
    flex-wrap: wrap;
}

.formulier-rij--meerkoloms > div {
    flex: 0 0 150px;
}

.herhaalbare-rij {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    padding: 0.75rem;
    background: var(--vlak);
}

/* Een zorgmoment (stap 5): dag, van, tot, hoe vaak en toelichting, elk met
   een labeltje erboven. Van/tot smal, de toelichting krijgt de rest. */
.zorgmoment-rij {
    align-items: flex-end;
    gap: var(--sp-3);
}

/* Het raster van formulier 13 onder de zorgmomenten (oktober 2026): klein en
   leesbaar, geen invoer. Een gevuld vakje krijgt de zachte merkkleur. */
.zorgmoment-raster {
    margin-top: var(--sp-4);
}
.zorgmoment-raster__tabel {
    width: auto;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.zorgmoment-raster__tabel th,
.zorgmoment-raster__tabel td {
    min-width: 2.75rem;
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--kleur-rand-zacht);
    text-align: center;
}
.zorgmoment-raster__tabel tbody th {
    text-align: left;
    color: var(--kleur-tekst-zacht);
}
.zorgmoment-raster__tabel td.is-gevuld {
    background: var(--merk-zacht);
    color: var(--merk-diep);
    font-weight: 600;
}
.zorgmoment-rij__veld {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1 1 9rem;
    min-width: 0;
    font-weight: 400;
}
.zorgmoment-rij__veld > span {
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kleur-tekst-hint);
    font-weight: 600;
}
.zorgmoment-rij__veld select,
.zorgmoment-rij__veld input {
    margin: 0;
}
.zorgmoment-rij__veld--tijd {
    flex: 0 1 8rem;
}
.zorgmoment-rij__veld--breed {
    flex: 2 1 16rem;
}
.zorgmoment-rij .veld-hint {
    flex-basis: 100%;
    margin: 0;
}

/* Wat er bij dít zorgonderdeel hoort: de handelingen van formulier 13/14 A, of
   een regel met de stand van het scherm waar de doelen of taken staan. Eén
   blok tegelijk zichtbaar; de rest staat op `hidden`. De regel hieronder is
   nodig omdat een flex-kind een expliciete display kan krijgen -- zelfde reden
   als bij `.bezoek-popover [hidden]`. */
.zorgmoment-rij__lijst {
    flex-basis: 100%;
    min-width: 0;
}
.zorgmoment-rij [data-onderdeelblok][hidden] {
    display: none;
}

/* Eén contactpersoon (stap 9): drie regels onder elkaar in het blokje. Het
   vinkje "eerste contactpersoon" staat op de hoogte van de vakjes ernaast. */
.contactpersoon-rij {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.contactpersoon-rij .formulier-veld--breed input {
    width: 100%;
}
.contactpersoon-rij__eerste {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--sp-2);
}
.contactpersoon-rij__eerste .veld-hint {
    margin: var(--sp-1) 0 0;
}
.contactpersoon-rij__acties {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(-1 * var(--sp-2));
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    margin-right: 1rem;
}

.checkbox-label input {
    width: auto;
}

/* Aanraakschermen: een vinkje of keuzerondje van 22px hoog raak je met een
   vinger de helft van de tijd naast. De hele labelregel wordt het tikvlak
   (44px, de richtlijn) en het vakje zelf iets groter. Alleen bij een grove
   aanwijzer (vinger), zodat het op een desktop met muis niet luchtiger wordt.
   De intake wordt bij cliënten thuis op tablets ingevoerd; de checklist van
   stap 12 alleen al heeft 41 x 4 keuzerondjes. */
@media (pointer: coarse) {
    .checkbox-label,
    .checkbox-inline {
        min-height: 44px;
        padding: var(--sp-2) var(--sp-1);
        margin-right: var(--sp-2);
        border-radius: var(--radius-sm);
    }

    .checkbox-label input[type="checkbox"],
    .checkbox-label input[type="radio"],
    .checkbox-inline input[type="checkbox"],
    .checkbox-inline input[type="radio"] {
        width: 1.5rem;
        height: 1.5rem;
        flex-shrink: 0;
    }

    /* Het sluitkruisje van een melding was 22px. */
    .melding__sluit {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Gegroepeerde fieldsets met zachte kaartachtergrond. */
fieldset {
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    padding: 0.85rem 1rem 1rem;
    background: var(--zand-50);
    margin: 0 0 0.5rem;
}

legend {
    font-weight: 600;
    padding: 0 0.4rem;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

.veld-fout {
    color: var(--alert);
    font-size: var(--fs-klein);
    margin: 0.2rem 0 0;
    font-weight: 600;
}

/* De foutmelding stond onder het veld, maar het veld zelf zag er ongemoeid uit.
   Op een lang formulier zoek je dan waar het misging. Nu tekent het veld zich
   af — en niet alleen op kleur, want dat is voor een deel van de gebruikers
   geen signaal: de rand wordt ook dikker. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
input:has(+ .veld-fout),
select:has(+ .veld-fout),
textarea:has(+ .veld-fout) {
    border-color: var(--alert);
    border-width: 2px;
    background: var(--alert-licht);
}

input:has(+ .veld-fout):focus,
select:has(+ .veld-fout):focus,
textarea:has(+ .veld-fout):focus {
    border-color: var(--alert);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 30%, transparent);
}

.inline-formulier {
    display: inline;
}

.handtekening-canvas {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    background: var(--vlak);
    touch-action: none;
    max-width: 100%;
    height: auto;
    cursor: crosshair;
}

.veld-groep {
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: var(--zand-50);
}

.veld-groep legend {
    padding: 0 0.4rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--kleur-tekst-zacht);
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 1.1rem;
    font-weight: 400;
}

.checkbox-inline input {
    width: auto;
    margin: 0;
}

/* Kleefbare submit-balk: op mobiel plakt de knoppenrij onderaan het scherm. */
.kleef-balk {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.5rem;
}

/* Een knoppenrij die onderaan blijft plakken op een lang formulier (audit). */
.knop-rij--kleef {
    position: sticky;
    bottom: 0;
    padding: var(--sp-3) 0;
    background: var(--vlak);
    border-top: 1px solid var(--kleur-rand-zacht);
    z-index: 2;
}

@media (max-width: 640px) {
    .kleef-balk {
        position: sticky;
        bottom: 0;
        z-index: 12;
        /* Zijwaarts precies de marge van .layout__inhoud op een telefoon
           (0.8rem); met --sp-4 stak de balk 4px uit en schoof het scherm. */
        margin: 0.5rem -0.8rem calc(-1 * var(--sp-4));
        padding: var(--sp-3) 0.8rem calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.92);
        border-top: 1px solid var(--zand-200);
        box-shadow: 0 -6px 18px rgba(58, 46, 34, 0.08);
    }

    @supports (backdrop-filter: blur(8px)) {
        .kleef-balk {
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
    }

    .kleef-balk .knop {
        flex: 1 1 auto;
        min-height: 48px;
    }
}

/* ---------------------------------------------------------------------------
   8. TABELLEN
   ------------------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
    font-variant-numeric: tabular-nums;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--zand-200);
    font-size: var(--fs-sm);
}

thead th {
    background: var(--zand-50);
    color: var(--kleur-tekst-zacht);
    font-family: var(--lettertype-kop);
    font-weight: 700;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: sticky;
    /* LET OP: tabellen staan (via initTabelScroll) in een .tabel-scroll met
       overflow-x:auto. Dat maakt die wrapper een scroll-container, waardoor een
       sticky kop zich richt op de wrapper en niet op het venster. Een offset
       zoals var(--topbar-hoogte) duwt de kop dan omlaag ÓVER de eerste rij heen
       — die rij wordt daardoor onzichtbaar en onklikbaar. Daarom top:0. */
    top: 0;
    z-index: 2;
}

tbody tr {
    transition: background var(--transitie-snel);
}

tbody tr:hover td {
    background: var(--salie-50);
}

tbody tr:last-child td {
    border-bottom: none;
}

tfoot th, tfoot td {
    background: var(--zand-100);
    font-weight: 700;
    border-bottom: none;
    text-transform: none;
    font-size: var(--fs-tekst);
    color: var(--kleur-tekst);
}

/* Numerieke kolommen netjes rechts uitlijnen. */
th.num, td.num {
    text-align: right;
}

/* Tabellen binnen een kaart blijven kaal (geen dubbele omlijsting). */
.kaart table {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    margin-bottom: 0;
}

.kaart thead th {
    background: transparent;
    position: static;
}

.kaart th, .kaart td {
    padding: 0.6rem 0.5rem;
}

/* Horizontaal scrollen op smalle schermen i.p.v. overlopen. */
.tabel-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.tabel-scroll > table {
    margin-bottom: 0;
}

/* Brede tabellen: de eerste kolom blijft staan, de rest schuift eronderdoor.

   Zonder dit ben je bij een lijst van zestien kolommen -- verlof, afwezigheid,
   verbruik, registraties -- kwijt naar wíé je zit te kijken zodra je naar
   rechts schuift: de naamkolom verdwijnt als eerste. Dat is wat een lijst
   onoverzichtelijk maakt, niet de vormgeving.

   `data-vast` wordt door initTabelScroll() gezet en alleen als de tabel echt
   breder is dan zijn omhulsel. Past hij, dan verandert er niets. De waarde is
   het aantal vastgezette kolommen: 1 normaal, 2 als er een selectievakje
   voorop staat -- dan is de naam de tweede kolom en heb je aan het vakje
   alleen niets. */
.tabel-scroll[data-vast] > table {
    /* De tabel heeft `overflow: hidden` voor zijn afgeronde hoeken. Dat maakt
       van de tabel zélf een scroll-container, en een `position: sticky` cel
       richt zich op de dichtstbijzijnde scroll-container. Die staat stil, dus
       de cel zou gewoon meeschuiven en het vastzetten doet niets. Hier dus
       zichtbaar laten overlopen; het omhulsel vangt de overloop al op. */
    overflow: visible;
}

/* Overloopt hij, dan is er te weinig ruimte -- dan is ademende celvulling het
   eerste wat eraf kan. Scheelt bij zestien kolommen zo'n 200 pixels, waarmee
   een deel van de lijsten helemaal niet meer hoeft te schuiven. */
.tabel-scroll[data-vast] th,
.tabel-scroll[data-vast] td {
    padding: 0.55rem 0.6rem;
}

.tabel-scroll[data-vast] th:first-child,
.tabel-scroll[data-vast] td:first-child,
.tabel-scroll[data-vast="2"] th:nth-child(2),
.tabel-scroll[data-vast="2"] td:nth-child(2) {
    position: sticky;
    z-index: 1;
    background: var(--vlak);
}

.tabel-scroll[data-vast] th:first-child,
.tabel-scroll[data-vast] td:first-child {
    left: 0;
}

/* De breedte van de eerste kolom komt uit initTabelScroll(); zonder die maat
   zou de tweede kolom over de eerste heen komen te liggen. */
.tabel-scroll[data-vast="2"] th:nth-child(2),
.tabel-scroll[data-vast="2"] td:nth-child(2) {
    left: var(--vast-breedte, 3rem);
}

/* De koprij ligt al sticky over de rijen heen; de hoekcel moet over allebei. */
.tabel-scroll[data-vast] thead th:first-child,
.tabel-scroll[data-vast="2"] thead th:nth-child(2) {
    background: var(--zand-100);
    z-index: 3;
}

/* Een randje op de laatste vastgezette kolom: anders zie je niet dat de rest
   eronderdoor schuift en lijkt het alsof de lijst kapot is. */
.tabel-scroll[data-vast="1"] th:first-child,
.tabel-scroll[data-vast="1"] td:first-child,
.tabel-scroll[data-vast="2"] th:nth-child(2),
.tabel-scroll[data-vast="2"] td:nth-child(2) {
    box-shadow: 1px 0 0 var(--zand-200);
}

/* De arcering bij het aanwijzen van een rij loopt door tot in de vastgezette
   kolom; de achtergrond hierboven is specifieker en zou hem anders wegdrukken,
   waardoor juist de naam als enige niet oplicht. */
.tabel-scroll[data-vast] tbody tr:hover td:first-child,
.tabel-scroll[data-vast="2"] tbody tr:hover td:nth-child(2) {
    background: var(--salie-50);
}

.mini-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-tekst);
    border: none;
    box-shadow: none;
}

.mini-tabel td {
    padding: 0.2rem 0;
    border: none;
}

.mini-tabel td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   9. STATUS-PILLEN & BADGES
   ------------------------------------------------------------------------- */

.status-pil {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.6rem;
    border-radius: var(--radius-pil);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    background: var(--zand-100);
    color: var(--kleur-tekst-zacht);
    border: 1px solid var(--kleur-rand);
    white-space: nowrap;
}

/* Dot-indicator vóór de tekst. */
.status-pil::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.75;
}

.status-pil--succes {
    background: var(--succes-licht);
    color: var(--succes-donker);
    border-color: var(--succes-rand);
}

.status-pil--alert {
    background: var(--alert-licht);
    color: var(--alert-donker);
    border-color: var(--alert-rand);
}

.status-pil--waarschuwing {
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing-donker);
    border-color: var(--waarschuwing-rand);
}

.status-pil--open {
    background: var(--zand-100);
    color: var(--kleur-tekst-zacht);
    border-color: var(--kleur-rand);
}
.status-pil--info {
    background: var(--info-licht);
    color: var(--info);
    border-color: var(--info-rand);
}
.status-pil--akkoord {
    background: var(--succes-licht);
    color: var(--succes-donker);
    border-color: var(--succes-rand);
}
.status-pil--afgekeurd {
    background: var(--afkeur-licht);
    color: var(--afkeur);
    border-color: var(--afkeur-rand);
}

/* Onvolledige cliënten: per cliënt alles wat ontbreekt. Een stap noemt zijn
   lege velden, dus een pil mag hier over twee regels lopen. */
.ontbreekt-lijst {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}
.ontbreekt-lijst .status-pil {
    white-space: normal;
    text-decoration: none;
}
.ontbreekt-lijst .status-pil:hover {
    border-color: currentColor;
}

.aftekenen-rij {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.aftekenen-rij select, .aftekenen-rij input {
    width: auto;
}

/* KPI-cijfer (legacy-klasse, gebruikt op oudere kaarten). */
.kpi-getal {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--salie-800);
    margin: 0.35rem 0 0.5rem;
    font-variant-numeric: tabular-nums;
}

.zorgplan-badge {
    background: var(--alert);
    color: #fff;
    border-radius: 50%;
    min-width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-klein);
    padding: 0 0.3rem;
}

/* ---------------------------------------------------------------------------
   10. MELDINGEN (toast-stijl flash)
   ------------------------------------------------------------------------- */

/* `display: flex` wint van het `hidden`-attribuut: de melding "0 moment(en)
   zonder tijd" onder het raster stond zo altijd in beeld (livetest
   6 oktober 2026). */
.melding[hidden] {
    display: none;
}

.melding {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    font-size: var(--fs-tekst);
    font-weight: 500;
    border: 1px solid transparent;
    border-left-width: 4px;
    box-shadow: var(--schaduw-sm);
    margin-bottom: 1rem;
    animation: melding-entree var(--transitie-traag) both;
}

/* Kale .melding (zonder modifier) krijgt een neutrale info-stijl. */
.melding {
    background: var(--info-licht);
    color: var(--info);
    border-color: var(--info-rand);
    border-left-color: var(--info);
}

/* Icoon via CSS (inline SVG data-URI is CSP-veilig binnen style-src). */
.melding::before {
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    margin-top: 0.12rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 7h2V7h-2v2zm0 8h2v-6h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 7h2V7h-2v2zm0 8h2v-6h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.melding--fout {
    background: var(--alert-licht);
    color: var(--alert-donker);
    border-color: var(--alert-rand);
    border-left-color: var(--alert);
}

.melding--fout::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E");
}

.melding--succes {
    background: var(--succes-licht);
    color: var(--succes-donker);
    border-color: var(--succes-rand);
    border-left-color: var(--succes);
}

/* Uitleg zonder oordeel: hoe een scherm werkt, wat er straks gebeurt. Vijf
   views gebruikten deze klasse al vóór hij bestond (gevonden 21-09-2026). */
.melding--info {
    background: var(--info-licht);
    color: var(--info);
    border-color: var(--info-rand);
    border-left-color: var(--info);
}

/* Niet fout, wel iets om recht te zetten: een instelling die nog niet klopt. */
.melding--waarschuwing {
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing-donker);
    border-color: var(--waarschuwing-rand);
    border-left-color: var(--waarschuwing);
}

/* De blokkades boven stap 1 van de intake: dichtgeklapt één regel met de
   telling, de lijst na een tik. Een eigen klasse en niet .melding: app.js
   (initMeldingen) wikkelt de inhoud van elke .melding in een span en zet er
   een sluitknop bij, en dan is de <summary> geen kind meer van de <details>
   en toont de browser het woord "Details".

   Amber, niet rood: een nieuwe cliënt begint met alle punten open, en rood
   op elk nieuw dossier leert de coördinator rood te negeren. Rood alleen
   met --dringend, als de zorg al loopt terwijl de checklist niet in orde is. */
.blokkades {
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing-donker);
    border: 1px solid var(--waarschuwing-rand);
    border-left: 4px solid var(--waarschuwing);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-tekst);
}
.blokkades--dringend {
    background: var(--alert-licht);
    color: var(--alert-donker);
    border-color: var(--alert-rand);
    border-left-color: var(--alert);
}
.blokkades > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 32px;
}
.blokkades > summary::-webkit-details-marker { display: none; }
.blokkades__uitklap {
    margin-left: auto;
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.blokkades[open] > summary .blokkades__uitklap { display: none; }
.blokkades ul { margin: var(--sp-2) 0 var(--sp-2) 1.2rem; padding: 0; }
.blokkades a { color: inherit; font-weight: 600; }

/* Een melding ín een formulier, onder een groep vinkjes: kleiner en zonder
   de entree-animatie, want hij staat er altijd. */
.melding--compact {
    font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-3);
    margin: var(--sp-3) 0 0;
    animation: none;
}

.melding--succes::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E");
}

@keyframes melding-entree {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   11. MODALS
   ------------------------------------------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 24, 20, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
    z-index: 50;
    overflow-y: auto;
    animation: tabs-fade-in 140ms ease;
}

@supports (backdrop-filter: blur(4px)) {
    .modal-overlay {
        background: rgba(28, 24, 20, 0.35);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

.modal-overlay[hidden] {
    display: none;
}

.modal {
    background: var(--vlak);
    border-radius: var(--radius-lg);
    box-shadow: var(--schaduw-lg);
    width: 100%;
    max-width: 720px;
    padding: 1.75rem;
    position: relative;
    animation: modal-entree var(--transitie-traag) both;
}

@keyframes modal-entree {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.modal__titel {
    margin: 0 2rem 1.25rem 0;
}

.modal__sluit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: var(--zand-100);
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-md);
    line-height: 1;
    cursor: pointer;
    transition: background var(--transitie-snel), color var(--transitie-snel), transform var(--transitie-snel);
}

.modal__sluit:hover {
    background: var(--alert-licht);
    color: var(--alert);
}

.modal__sluit:active {
    transform: scale(0.92);
}

.modal .formulier-kaart {
    border: none;
    box-shadow: none;
    padding: 0;
    --kaart-px: 0px;
    --kaart-py: 0px;
    overflow: visible;
    margin: 0;
    max-width: none;
}

/* ---------------------------------------------------------------------------
   12. TABS & ACCORDEON
   ------------------------------------------------------------------------- */

.tabs {
    margin-bottom: 1.5rem;
}

.tabs__lijst {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--kleur-rand);
    margin-bottom: 1.5rem;
}

.tabs__knop {
    appearance: none;
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--fs-tekst);
    font-weight: 600;
    color: var(--kleur-tekst-zacht);
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    position: relative;
    top: 1px;
    border-bottom: 2px solid transparent;
    transition: color var(--transitie-snel), background var(--transitie-snel);
}

.tabs__knop:hover {
    color: var(--salie-700);
    background: var(--salie-50);
}

.tabs__knop[aria-selected="true"] {
    color: var(--salie-700);
    border-bottom-color: var(--terra-500);
}

.tabs__paneel {
    animation: tabs-fade-in 140ms ease;
}

.tabs__paneel[hidden] {
    display: none;
}

@keyframes tabs-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

.accordeon {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.accordeon-item {
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    background: var(--vlak);
    overflow: hidden;
    box-shadow: var(--schaduw-sm);
}

.accordeon-kop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--zand-100);
    border: none;
    font-family: inherit;
    text-align: left;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-size: var(--fs-basis);
    font-weight: 600;
    color: var(--kleur-tekst);
    transition: background var(--transitie-snel);
}

.accordeon-kop:hover {
    background: var(--zand-200);
}

.accordeon-kop__chevron {
    flex-shrink: 0;
    transition: transform var(--transitie);
    color: var(--kleur-tekst-zacht);
}

.accordeon-kop[aria-expanded="true"] .accordeon-kop__chevron {
    transform: rotate(180deg);
}

.accordeon-paneel {
    padding: 1.25rem;
    border-top: 1px solid var(--zand-200);
    animation: tabs-fade-in 160ms ease;
}

.accordeon-paneel[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   13. AUTH / LOGIN — het visitekaartje
   ------------------------------------------------------------------------- */

.auth-pagina {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kleur-pagina);
    padding: 1rem;
}

.auth-kaart {
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-lg);
    box-shadow: var(--schaduw-lg);
    padding: 2.25rem;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Split-layout: navy merkpaneel (subtiel bladpatroon) + glasformulier. Het
   paarse verloop is met richting D weg: het inlogscherm heeft dezelfde navy
   als de zijbalk, en de merkkleur van de organisatie staat op de knop. */
.auth-layout {
    min-height: 100vh;
    display: flex;
    background: var(--zij-grond);
}

.auth-layout__merk {
    flex: 1.1;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}

/* Subtiel organisch patroon (inline SVG data-URI, CSP-veilig). */
.auth-layout__merk::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M30 90c0-25 12-42 30-52M60 98c0-18 8-32 22-42'/%3E%3Ccircle cx='92' cy='30' r='9'/%3E%3Ccircle cx='22' cy='36' r='5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
    pointer-events: none;
}

.auth-layout__merk::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 70%;
    height: 140%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), transparent 72%);
    border-radius: 50%;
    pointer-events: none;
}

.auth-layout__merk-logo {
    background: #fff;
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
    display: inline-block;
    margin-bottom: 2.5rem;
    align-self: flex-start;
    position: relative;
    z-index: 1;
    box-shadow: var(--schaduw);
}

.auth-layout__merk h2 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: var(--ls-kop);
    line-height: 1.2;
    max-width: 24rem;
    margin: 0 0 1rem;
    position: relative;
    z-index: 1;
    color: #fff;
}

.auth-layout__merk p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 24rem;
    font-size: var(--fs-basis);
    line-height: 1.65;
    position: relative;
    z-index: 1;
}

.auth-layout__merk-punten {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: relative;
    z-index: 1;
    font-size: var(--fs-tekst);
    color: rgba(255, 255, 255, 0.85);
}

.auth-layout__merk-punten li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.auth-layout__merk-punten li::before {
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--terra-300);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.auth-layout__formulier {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

/* Een dichte witte kaart op de navy. Het was een glaskaart op het verloop;
   op een effen navy wordt half doorzichtig wit grijs. */
.auth-layout__formulier .auth-kaart {
    background: var(--vlak);
    border: 1px solid var(--zand-200);
}

@supports (backdrop-filter: blur(14px)) {
    .auth-layout__formulier .auth-kaart {
        background: var(--vlak);
    }
}

@media (max-width: 860px) {
    .auth-layout__merk {
        display: none;
    }
}

.auth-kaart--breed {
    max-width: 640px;
}

.auth-kaart__logo {
    align-self: center;
    margin-bottom: 0.5rem;
}

.auth-kaart__titel {
    margin: 0;
    font-family: var(--lettertype-kop);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--salie-700);
    text-align: center;
}

.auth-kaart__subtitel {
    margin: 0 0 0.5rem;
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-tekst);
    text-align: center;
}

.auth-kaart__link {
    text-align: center;
    font-size: var(--fs-tekst);
}

.auth-kaart__hint {
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    margin: 0;
}

/* De tweede stap (migratie 181): de codekaart met daaronder een kleinere
   kaart voor de herstelcode of een nieuwe mailcode, onder elkaar. */
.auth-stapel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    width: 100%;
    max-width: 400px;
}

.auth-kaart--klein {
    padding: var(--sp-5);
    box-shadow: var(--schaduw-sm);
}

/* Herstelcodes na het inschrijven: in een raster, om af te drukken. */
.herstelcodes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-6);
    margin: var(--sp-3) 0;
    padding: var(--sp-4);
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--fs-md);
    list-style: none;
}

/* Balk boven elk scherm zolang de ingangsdatum nog moet komen. */
.tweestaps-balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

/* Passkey op het inlogscherm en achter de inloglink (migratie 221). De
   kaart is een flex-kolom; dit blok houdt zijn eigen stapeling. */
.auth-kaart__passkey {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Een formulier-rij is flex; zonder dit wint die van het hidden-attribuut. */
.auth-kaart__passkey[hidden],
[data-passkey-registreren][hidden] {
    display: none;
}

.auth-kaart__passkey p {
    margin: 0;
}

.auth-kaart__scheiding {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-klein);
}

.auth-kaart__scheiding::before,
.auth-kaart__scheiding::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--kleur-rand-zacht);
}

/* Korte toelichting onder een invoerveld: wat er met de invoer gebeurt, of
   waarom het veld er is. Bewust dichter op het veld dan een losse alinea. */
.veld-hint {
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    margin: -0.4rem 0 0.9rem;
}

/* Het tekstvak onder een keuzelijst met "Anders, namelijk…" (zie _veld.php).
   Iets ingesprongen zodat het leest als een vervolg op de keuze erboven. */
.veld-anders {
    margin-top: var(--sp-2);
    margin-left: var(--sp-4);
    width: calc(100% - var(--sp-4));
}

.auth-kaart__avg {
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    margin-top: 0.5rem;
}

.avg-tekst h2 {
    font-size: var(--fs-basis);
    color: var(--salie-700);
}

.avg-tekst p {
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-tekst);
}

/* ---------------------------------------------------------------------------
   14. AGENDA & PLANNING
   ------------------------------------------------------------------------- */

.agenda-balk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.agenda-balk__nav,
.agenda-balk__acties {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.agenda-balk__titel {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-basis);
    font-weight: 600;
    margin: 0 0.25rem;
    min-width: 12rem;
    text-align: center;
}

.agenda-wrap {
    /* De view zet deze twee: de uurhoogte en de totale hoogte van het raster.
       Staan ze er niet, dan geldt de oude vaste maat. */
    --agenda-uur: 52px;
    --agenda-hoogte: 780px;
    border: 1px solid var(--zand-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--schaduw-sm);
    background: var(--vlak);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.agenda__head {
    display: flex;
    border-bottom: 1px solid var(--kleur-rand);
    background: var(--zand-100);
}

.agenda__hoek {
    width: 58px;
    flex: none;
    border-right: 1px solid var(--zand-200);
}

.agenda__heads {
    flex: 1;
    display: flex;
}

.agenda__body {
    display: flex;
    height: var(--agenda-hoogte);
}

.agenda__cols {
    flex: 1;
    display: flex;
}

.agenda__daghead {
    flex: 1 1 0;
    min-width: 0;
    border-left: 1px solid var(--zand-200);
    background: var(--zand-100);
    padding: 0.55rem 0.4rem;
    text-align: center;
    line-height: 1.2;
}

.agenda__daghead-naam {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kleur-tekst-zacht);
}

.agenda__daghead-datum {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--kleur-tekst);
}

.agenda__daghead--vandaag {
    background: var(--terra-100);
}

.agenda__daghead--vandaag .agenda__daghead-datum {
    color: var(--terra-600);
}

.agenda__gutter {
    width: 58px;
    flex: none;
    position: relative;
    border-right: 1px solid var(--zand-200);
}

.agenda__uur {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: var(--fs-2xs);
    color: var(--kleur-tekst-hint);
    white-space: nowrap;
}

.agenda__dag {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    position: relative;
    border-left: 1px solid var(--zand-200);
    background-image: repeating-linear-gradient(
        to bottom,
        var(--zand-200) 0,
        var(--zand-200) 1px,
        transparent 1px,
        transparent var(--agenda-uur)
    );
}

.agenda__dag--vandaag {
    background-color: rgba(194, 104, 61, 0.04);
}

.agenda__afspraak {
    position: absolute;
    left: 2%;
    width: 96%;
    border-radius: 7px;
    border-left: 3px solid currentColor;
    padding: 3px 6px;
    overflow: hidden;
    font-size: var(--fs-xs);
    line-height: 1.25;
    text-decoration: none;
    box-shadow: var(--schaduw-sm);
    transition: transform var(--transitie-snel), box-shadow var(--transitie-snel);
}

.agenda__afspraak:hover {
    text-decoration: none;
    box-shadow: var(--schaduw);
    transform: translateY(-1px);
    z-index: 5;
}

.agenda__afspraak-tijd {
    display: block;
    font-size: var(--fs-2xs);
    opacity: 0.85;
}

.agenda__afspraak-client {
    display: block;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda__afspraak-mw {
    display: block;
    font-size: var(--fs-2xs);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda__afspraak-x {
    position: absolute;
    top: 2px;
    right: 3px;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 4px;
    width: 16px;
    height: 16px;
    line-height: 1;
    font-size: var(--fs-klein);
    cursor: pointer;
    color: var(--alert);
    padding: 0;
    display: none;
}

.agenda__afspraak:hover .agenda__afspraak-x {
    display: block;
}

.agenda__nu {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--alert);
    z-index: 4;
}

.agenda__nu::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alert);
}

.agenda-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    font-size: var(--fs-klein);
}

.agenda-legenda__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--kleur-tekst-zacht);
}

.agenda-legenda__stip {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.weekplanner {
    overflow-x: auto;
}

.weekplanner table {
    min-width: 800px;
}

.weekplanner td.dag-cel {
    vertical-align: top;
    min-width: 110px;
}

.afspraak-blokje {
    background: var(--kleur-primair);
    color: #fff;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.3rem;
    font-size: var(--fs-klein);
}

.weekkiezer {
    display: flex;
    flex-wrap: wrap; /* op een telefoon viel "Volgende dag →" buiten beeld (05-10-2026) */
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
   15. STEPPER / ZORGPLAN
   ------------------------------------------------------------------------- */

.stepper {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 1.5rem 0 2.25rem;
    padding-bottom: 0.25rem;
}

.stepper__stap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    flex-shrink: 0;
    min-width: 108px;
    padding: 0 0.25rem;
}

.stepper__stap:hover, .stepper__stap:focus {
    text-decoration: none;
}

.stepper__cirkel {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-basis);
    border: 2px solid var(--kleur-rand);
    background: var(--vlak);
    color: var(--kleur-tekst-hint);
    position: relative;
    transition: transform var(--transitie-snel), box-shadow var(--transitie-snel), background var(--transitie-snel), border-color var(--transitie-snel), color var(--transitie-snel);
}

.stepper__stap:hover .stepper__cirkel {
    transform: translateY(-2px);
    box-shadow: var(--schaduw-sm);
}

.stepper__label {
    font-size: var(--fs-klein);
    font-weight: 600;
    color: var(--kleur-tekst-zacht);
    text-align: center;
    line-height: 1.3;
}

.stepper__lijn {
    flex: 1 1 auto;
    height: 2px;
    min-width: 1.75rem;
    background: var(--kleur-rand);
    margin-top: 1.3rem;
}

.stepper__lijn--voltooid {
    background: var(--terra-500);
}

.stepper__stap--beschikbaar .stepper__cirkel {
    border-color: var(--salie-400);
    color: var(--salie-700);
}

.stepper__stap--actief .stepper__cirkel {
    background: var(--salie-700);
    border-color: var(--salie-700);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--merk) 22%, transparent);
}

.stepper__stap--actief .stepper__label {
    color: var(--salie-800);
}

.stepper__stap--voltooid .stepper__cirkel {
    background: var(--terra-500);
    border-color: var(--terra-500);
    color: #fff;
}

.stepper__stap--voltooid .stepper__label {
    color: var(--kleur-tekst);
}

.stepper__stap--afsluiten:not(.stepper__stap--actief):not(.stepper__stap--voltooid) .stepper__cirkel {
    border-color: var(--terra-500);
    color: var(--terra-600);
    border-style: dashed;
}

.stepper__cirkel .zorgplan-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.5rem;
    min-width: 1.3rem;
    height: 1.3rem;
    font-size: var(--fs-2xs);
    border: 2px solid #fff;
}

.omaha-koppelblok {
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--zand-100);
}

.omaha-koppelblok--onvolledig {
    background: var(--alert-licht);
}

.omaha-koppelblok--volledig {
    background: var(--succes-licht);
}

/* ---------------------------------------------------------------------------
   16. LEGE STATEN
   ------------------------------------------------------------------------- */

.leeg-staat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    padding: var(--sp-10) var(--sp-6);
    background: var(--vlak);
    border: 1px dashed var(--zand-300);
    border-radius: var(--radius-lg);
    color: var(--kleur-tekst-zacht);
    margin-bottom: 1.25rem;
}

.leeg-staat svg {
    color: var(--salie-300);
    margin-bottom: 0.25rem;
}

.leeg-staat__titel {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--kleur-tekst);
    margin: 0;
}

.leeg-staat p {
    margin: 0;
    max-width: 34rem;
    font-size: var(--fs-sm);
}

.leeg-staat .knop {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   17. MODULE-SPECIFIEK (batches 3 t/m 7 — bestaande klassen behouden)
   ------------------------------------------------------------------------- */

/* Cliënten / dossier */

/* Aandachtsblok boven een lijst.
   De telling is zelf de filterknop: één getal, niet twee keer hetzelfde
   ergens anders herhaald. Kleur blijft hier bewust terughoudend — het blok
   trekt de aandacht met zijn rand en positie, niet met een vlak vol
   waarschuwingskleur, want dan verliest de statuspil in de tabel eronder
   zijn zeggingskracht. */
.aandacht {
    background: var(--waarschuwing-licht);
    border: 1px solid var(--waarschuwing-rand);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
}

.aandacht__kop {
    margin-bottom: 0.85rem;
}

.aandacht__titel {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: var(--fs-basis);
    color: var(--waarschuwing-donker);
}

.aandacht__titel svg {
    flex-shrink: 0;
}

.aandacht__uitleg {
    margin: 0.25rem 0 0;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

.aandacht__punten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.aandacht__punt {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    background: var(--vlak);
    border: 1px solid var(--waarschuwing-rand);
    border-radius: var(--radius-sm);
    color: var(--kleur-tekst);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: border-color var(--transitie), box-shadow var(--transitie);
}

.aandacht__punt:hover,
.aandacht__punt:focus-visible {
    border-color: var(--waarschuwing-donker);
    box-shadow: var(--schaduw-sm);
}

.aandacht__punt--actief {
    background: var(--waarschuwing-donker);
    border-color: var(--waarschuwing-donker);
    color: var(--vlak);
}

.aandacht__punt--actief:hover,
.aandacht__punt--actief:focus-visible {
    color: var(--vlak);
}

.aandacht__aantal {
    font-weight: 700;
    font-size: var(--fs-basis);
    font-variant-numeric: tabular-nums;
}

.aandacht__wissen {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.6rem;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
}

@media (max-width: 640px) {
    .aandacht__punt {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

.filterbalk {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.filterbalk input[type="search"] {
    flex: 1;
    min-width: 200px;
}

.filterbalk select {
    width: auto;
}

/* Alleen het zoekveld rekt op. Een datum- of maandveld erfde de volle breedte
   van de algemene inputregel en duwde daarmee elk filter erachter naar een
   volgende regel -- precies de rommel die een filterbalk moet voorkomen. */
.filterbalk input:not([type="search"]) {
    width: auto;
    flex: none;
}

.resultaat-telling {
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-sm);
}

.paginering {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.paginering a {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    transition: background var(--transitie-snel), border-color var(--transitie-snel);
}

.paginering a:hover {
    background: var(--salie-50);
    border-color: var(--salie-300);
    text-decoration: none;
}

.paginering a[aria-current="page"] {
    background: var(--salie-700);
    color: #fff;
    border-color: var(--salie-700);
}

.dossier-koptekst {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dossier-koptekst__acties {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Batch 3: kwaliteit & administratie */
.protocol-inhoud {
    padding: 0.75rem 1rem;
    background: var(--zand-100);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    line-height: 1.5;
}

.audit-json {
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.8rem;
    background: var(--zand-900);
    color: #E8E4DE;
    border-radius: var(--radius-sm);
    font-size: var(--fs-klein);
    overflow-x: auto;
    max-width: 420px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Batch 4: wondzorg (foto-verloop) */
.wond-verloop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.wond-observatie {
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    padding: 0.85rem;
    background: var(--zand-50);
    box-shadow: var(--schaduw-sm);
}

.wond-observatie__kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wond-observatie__kop small {
    color: var(--kleur-tekst-zacht);
}

.wond-foto {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
    margin-bottom: 0.5rem;
}

/* Meetwaarden bij een wondobservatie: chips op een rij in plaats van vier
   losse regels. Wie het verloop volgt vergelijkt afmeting en pijnscore tussen
   observaties; naast elkaar gaat dat, onder elkaar niet. */
.wond-observatie__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    font-size: var(--fs-klein);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.wond-observatie__meta li {
    border: 1px solid var(--kleur-rand);
    background: var(--vlak-zacht);
    border-radius: var(--radius-pil);
    padding: 0.08rem 0.55rem;
    color: var(--kleur-tekst-zacht);
    font-variant-numeric: tabular-nums;
}

.wond-observatie__meta li b {
    color: var(--kleur-tekst);
    font-weight: 600;
}

/* Batch 5: zorgveiligheid — dossierbanner */
.veiligheidsbanner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.6rem 0.9rem;
    background: var(--waarschuwing-licht);
    border: 1px solid var(--waarschuwing-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-sm);
}

.veiligheidsbanner__item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    background: var(--vlak);
    border: 1px solid var(--terra-200);
    border-radius: var(--radius-pil);
    font-size: var(--fs-klein);
    font-weight: 600;
}

.veiligheidsbanner__item--kritiek {
    background: var(--alert-licht);
    border-color: var(--alert-rand);
    color: var(--alert-donker);
}

.veiligheidsbanner__link {
    margin-left: auto;
    font-size: var(--fs-klein);
    font-weight: 600;
    white-space: nowrap;
}

/* Dossier op orde — de vijf vaste dossierpunten, met per openstaand punt
   meteen de knop die het gat dicht.

   Staat bewust ónder de veiligheidsbanner: dat een cliënt niet gereanimeerd
   wil worden weegt zwaarder dan een verlopen evaluatietermijn, en die volgorde
   hoort op het scherm te staan. Daarom ook geen alertkleur hier — dit blok is
   administratief, geen klinisch signaal. */
/* --- Kerngegevens bovenaan het dossier (clienten/_kerngegevens.php) ------
   Vijf blokken naast elkaar in de merkkleur, elk een korte veldenlijst. Lege
   velden blijven verborgen (veldenlijst), dus een dun dossier is een kort
   blok en een vol dossier wordt niet breder, alleen hoger. */
.kerngegevens {
    --kaart-px: 1.15rem;
    --kaart-py: 1rem;
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    padding: var(--kaart-py) var(--kaart-px) 1.15rem;
    margin-bottom: 1.25rem;
}
.kerngegevens__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.kerngegevens__kop h2 {
    margin: 0;
    font-size: var(--fs-basis);
}
.kerngegevens__raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem 1.6rem;
}
.kerngegevens__blok h3 {
    font-family: var(--lettertype);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--merk-tekst);
    font-weight: 700;
    margin: 0 0 0.55rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}
.kerngegevens__blok .velden {
    gap: 0.55rem;
}
.kerngegevens__blok .velden dd {
    font-size: var(--fs-tekst);
}
.kerngegevens__blok .velden dd small {
    color: var(--kleur-tekst-zacht);
}
.kerngegevens__blok .velden dd .status-pil {
    vertical-align: middle;
}

.compleet {
    --kaart-px: 1.15rem;
    --kaart-py: 1rem;
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-left: 3px solid var(--waarschuwing-donker);
    border-radius: var(--radius);
    padding: var(--kaart-py) var(--kaart-px);
    margin-bottom: 1.25rem;
}

/* De kop van "dossier op orde" draagt de staat: amber zolang er iets open
   staat, groen als alles rond is. */
.compleet > .compleet__kop {
    background: var(--waarschuwing-licht);
    border-bottom-color: var(--waarschuwing-rand);
    justify-content: space-between;
}
.compleet--rond > .compleet__kop {
    background: var(--succes-licht);
    border-bottom-color: var(--succes-rand);
}

.compleet--rond {
    border-left-color: var(--succes-donker);
}

.compleet__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.compleet__titel {
    margin: 0;
    font-size: var(--fs-tekst);
}

.compleet__telling {
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleur-tekst-zacht);
}

.compleet--rond .compleet__telling {
    color: var(--succes-donker);
}

/* Dossier op orde: de punten dichtgeklapt achter één regel. */
.compleet__details > summary.compleet__uitklap {
    list-style: none;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0.25rem 0 0.1rem;
}
.compleet__details > summary::-webkit-details-marker { display: none; }
.compleet__details[open] > summary.compleet__uitklap { margin-bottom: 0.35rem; }

.compleet__punten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.compleet__punt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--kleur-rand-zacht);
}

.compleet__punt:first-child {
    border-top: 0;
}

.compleet__merk {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--waarschuwing-donker);
}

.compleet__punt--rond .compleet__merk {
    color: var(--succes-donker);
}

.compleet__naam {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-tekst);
    font-weight: 600;
}

.compleet__punt--rond .compleet__naam {
    font-weight: 400;
    color: var(--kleur-tekst-zacht);
}

/* Niet van toepassing (migratie 168): geen groen vinkje maar een grijs
   streepje, zodat "n.v.t." niet leest als "ingevuld". */
.compleet__punt--nvt .compleet__merk {
    color: var(--kleur-tekst-zacht);
    font-weight: 700;
}

/* De keuze "Niet van toepassing…": dicht een tekstknop, open een reden en
   een knop op één regel. */
.nvt-keuze {
    flex-shrink: 0;
}

/* Open op een eigen regel onder het punt: naast de tekst drukte het
   formulier de uitleg tot een smalle kolom. */
.compleet__punt:has(.nvt-keuze[open]) {
    flex-wrap: wrap;
}

.nvt-keuze[open] {
    flex-basis: 100%;
    padding-left: 1.6rem;
}

.nvt-keuze[open] form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.nvt-keuze[open] form label {
    flex-basis: 100%;
    margin: 0;
}

.nvt-keuze[open] form input[type="text"] {
    flex: 1 1 16rem;
}

.nvt-balk {
    margin-bottom: var(--sp-4);
}

/* "Uit de tabbladen" op het overzicht van een medewerker (05-10-2026): per
   tabblad een tegel met de stand en de weg erheen. */
.tab-overzicht {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--sp-3);
}

.tab-overzicht__tegel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    color: var(--kleur-tekst);
    text-decoration: none;
    font-size: var(--fs-klein);
}

.tab-overzicht__tegel:hover,
.tab-overzicht__tegel:focus-visible {
    border-color: var(--merk-rand);
}

.tab-overzicht__tegel strong {
    font-size: var(--fs-tekst);
}

.tab-overzicht__tegel small {
    margin-top: auto;
    color: var(--merk-tekst);
}

.tab-overzicht__tegel--aandacht {
    border-left: 3px solid var(--waarschuwing-donker);
}

/* De uiterste datum, alleen bij een openstaand punt dat er een heeft. Staat
   vóór de uitleg omdat "wanneer" dringender is dan "waarom". */
.compleet__termijn {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: var(--fs-klein);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kleur-tekst-zacht);
}

.compleet__termijn--verstreken {
    color: var(--alert-donker);
}

/* De uitleg staat er altijd bij: wie het scherm voor het eerst ziet moet niet
   hoeven raden waaróm een punt openstaat. */
.compleet__uitleg {
    display: block;
    font-size: var(--fs-klein);
    font-weight: 400;
    line-height: 1.45;
    color: var(--kleur-tekst-hint);
}

.compleet__actie {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .compleet__punt {
        flex-wrap: wrap;
    }

    .compleet__actie {
        margin-left: 2.1rem;
    }
}

/* Balk boven een gearchiveerd dossier: lezen mag, bewerken niet, en de twee
   uitwegen (terughalen, definitief weg) staan er meteen bij. */
.archiefbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    background: var(--waarschuwing-licht, var(--vlak));
    border: 1px solid var(--waarschuwing-rand, var(--kleur-rand));
    border-left: 3px solid var(--waarschuwing-donker);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
}

.archiefbalk__tekst p {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

.archiefbalk__acties {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* De werklijst "Nog te doen" op de dossierchecklist: hetzelfde blok als
   "Dossier op orde", maar met groepen en soms twee knoppen per regel. */
.werklijst__intro {
    margin: 0 0 var(--sp-2);
}

.werklijst__groep {
    margin: var(--sp-4) 0 var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kleur-tekst-zacht);
}

.werklijst__groeptelling {
    margin-left: var(--sp-1);
    font-weight: 600;
    color: var(--kleur-tekst-hint);
}

.werklijst__punt--alert .compleet__merk {
    color: var(--alert-donker);
}

.werklijst__acties {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--sp-1);
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .werklijst__acties {
        width: 100%;
        justify-content: flex-start;
        margin-left: 2.1rem;
    }

    .werklijst__acties .compleet__actie {
        margin-left: 0;
    }
}

/* Dossierchecklist (migratie 063) — van papieren map naar digitaal dossier. */

.checklist-stand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-left: 3px solid var(--waarschuwing-donker);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.5rem;
}

.checklist-stand--vrij {
    border-left-color: var(--succes-donker);
}

.checklist-stand__cijfer {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--waarschuwing-donker);
    white-space: nowrap;
}

.checklist-stand--vrij .checklist-stand__cijfer {
    color: var(--succes-donker);
}

.checklist-stand__cijfer span {
    font-size: var(--fs-basis);
    font-weight: 600;
    color: var(--kleur-tekst-hint);
}

.checklist-stand__tekst {
    flex: 1;
    min-width: 15rem;
}

.checklist-stand__tekst p {
    margin: 0.2rem 0 0;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

.checklist-stand__actie form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.checklist-stand__actie input[type="text"] {
    min-width: 12rem;
}

/* De lijst zelf */

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.checklist__item {
    padding: 0.9rem 0;
    border-top: 1px solid var(--kleur-rand-zacht);
}

.checklist__item:first-child {
    border-top: 0;
}

.checklist__item--nvt {
    opacity: 0.72;
}

.checklist__kop {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.checklist__naam {
    font-weight: 600;
}

.checklist__optioneel {
    font-size: var(--fs-xs);
    color: var(--kleur-tekst-hint);
    font-style: italic;
}

.checklist__uitleg {
    margin: 0.3rem 0 0;
    font-size: var(--fs-klein);
    line-height: 1.5;
    color: var(--kleur-tekst-hint);
}

.checklist__afkeur {
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.75rem;
    background: var(--afkeur-licht);
    border-left: 3px solid var(--afkeur);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

/* Scan en module onder elkaar, met een label ervoor zodat de twee stappen
   visueel uit elkaar blijven. */
.checklist__regels {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.checklist__regel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
}

.checklist__label {
    flex: 0 0 4.5rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kleur-tekst-hint);
}

.checklist__regel small {
    color: var(--kleur-tekst-hint);
}

.checklist__form {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.checklist__form input[type="text"] {
    min-width: 10rem;
}

/* De stapel scans bij één onderdeel (migratie 067).

   Een onderdeel draagt er meer dan één: de risicosignalering komt jaarlijks
   terug, de evaluatie elk half jaar. De regel ernaast is daarmee geen regel
   meer maar een blok, dus het label lijnt uit op de bovenkant in plaats van op
   het midden — anders zweeft "Scans" halverwege een lijst van vier. */
.checklist__regel--stapel {
    align-items: flex-start;
}

.scanstapel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scanstapel__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scanstapel__regel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Een verticale streep langs de stapel: zonder die lijn valt bij vier scans
   niet in één oogopslag te zien dat ze bij elkaar horen. Alleen als er echt
   een stapel is — bij één scan zou het een streep om niets zijn. */
.scanstapel__lijst:has(> :nth-child(2)) {
    padding-left: 0.6rem;
    border-left: 2px solid var(--kleur-rand-zacht);
}

/* Ligt er nog niets, dan staat het uploadformulier gewoon open: dat is de
   handeling waarvoor je hier bent. Hangt er al iets, dan is een volgende scan
   de uitzondering en gaat hij achter deze regel — anders staat onder elk
   afgerond onderdeel een uitnodiging om nóg iets te uploaden. */
/* Bestand, datum en omschrijving naast elkaar.

   Formuliervelden zijn in dit systeem standaard `width: 100%`; in een flexrij
   betekent dat drie volle balken onder elkaar voor wat één regel hoort te zijn.
   De breedtes hieronder zijn wensen, geen vaste maten: op een smal scherm
   breekt de rij vanzelf af. */
.scanstapel__form input[type="file"] {
    flex: 1 1 15rem;
    width: auto;
    min-width: 0;
}

.scanstapel__form input[type="date"] {
    flex: 0 0 9.5rem;
    width: auto;
    min-width: 0;
}

.scanstapel__form input[type="text"] {
    flex: 2 1 13rem;
    width: auto;
    min-width: 0;
}

/* Hetzelfde in het bijwerkpaneel, waar datum en omschrijving samen een regel
   delen. */
.scanbeheer .checklist__form input[type="date"] {
    flex: 0 0 9.5rem;
    width: auto;
    min-width: 0;
}

.scanbeheer .checklist__form input[type="text"] {
    flex: 1 1 13rem;
    width: auto;
    min-width: 0;
}

/* De <summary> is de knop.

   Hij stond als kale link links onder de stapel en las daar als een voetnoot
   in plaats van als de handeling die hij is. Een <summary> met de knopklassen
   houdt het open- en dichtklappen bij de browser — geen JavaScript nodig — en
   ziet eruit als de rest. Gecentreerd onder de stapel, want links uitgelijnd
   valt hij samen met de bestandsnamen erboven.

   `list-style: none` plus de WebKit-regel halen het driehoekje weg; zonder
   allebei blijft het in één van de twee browsers staan. */
.scanstapel__toevoegen > summary {
    list-style: none;
    width: fit-content;
    margin: 0.5rem auto 0;
}

.scanstapel__toevoegen > summary::-webkit-details-marker {
    display: none;
}

.scanstapel__toevoegen[open] > summary {
    margin-bottom: 0.6rem;
}

/* Komt dit stuk periodiek terug? (migratie 068)

   Staat er ook als het onderdeel nog leeg is — juist dan is het de informatie
   die je nodig hebt: dit wordt een reeks, dus de vorige afname hoort ernaast
   en niet eronder. Andere toon dan de status-pil ernaast: dit is een
   eigenschap van het soort stuk, geen toestand van dít dossier. */
.checklist__herhaling {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--kleur-rand);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--kleur-tekst-hint);
    white-space: nowrap;
}

/* Het corrigeerpaneel bij een gekoppelde scan. Zit achter een <details>,
   want in het gewone geval klopt de scan gewoon. */
.scanbeheer {
    margin-top: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: var(--zand-50);
    border: 1px solid var(--kleur-rand-zacht);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.scanbeheer .checklist__uitleg {
    margin: 0;
}

.scanbeheer form + p {
    margin-top: 0.5rem;
}

/* De correctieknop bij een gekoppelde scan.

   Stond eerst als ingeklapte <details> midden in de scanregel, tussen de
   bestandsnaam en de naam van wie scande. Daar las hij als een derde stukje
   bijschrift in plaats van als een handeling, en uitgeklapt duwde het paneel
   de regel uit elkaar. Nu een echte knop, aan het einde van de regel
   losgetrokken van de gegevens, met het paneel in een modal. */
.checklist__corrigeer {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    /* Op een smal scherm breekt de regel toch al af; dan is rechts uitlijnen
       alleen maar een knop die los in het niets hangt. */
    .checklist__corrigeer {
        margin-left: 0;
    }
}

/* Het aanwijzen van een document dat al in het dossier staat, naast het
   gewone uploadveld. Iets ingesprongen zodat de twee wegen naar dezelfde
   uitkomst niet als één formulier lezen. */
.checklist__form--uit-dossier {
    flex-basis: 100%;
    padding-left: 5.1rem;
}

.checklist__form--uit-dossier select {
    max-width: 22rem;
}

@media (max-width: 640px) {
    .checklist__form--uit-dossier {
        padding-left: 0;
    }
}

/* In de modal draagt het paneel zijn eigen kader niet meer: de modal is al
   een afgebakend vlak, en een kader in een kader maakt het onrustig. */
.modal .scanbeheer {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 0.5rem;
}

.checklist__afwijking {
    margin-top: 0.55rem;
}

.checklist__afwijking summary {
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-hint);
    cursor: pointer;
}

.checklist__afwijking form {
    margin-top: 0.5rem;
}

/* Vroegsignalering — het risicobeeld per cliënt.

   Bewust géén rood-oranje-groen op het aantal. Het getal is geen oordeel: drie
   signalen kan rustig zijn en één kan urgent zijn. Kleur zit alleen op losse
   signalen die nog niemand heeft bekeken. */
.risicobeeld {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-left: 3px solid var(--merk);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.25rem;
}

.risicobeeld--stil {
    border-left-color: var(--kleur-rand-zacht);
}

.risicobeeld__cijfer {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--merk-tekst);
    min-width: 2ch;
    text-align: center;
}

.risicobeeld--stil .risicobeeld__cijfer {
    color: var(--kleur-tekst-hint);
}

.risicobeeld__tekst {
    flex: 1;
    min-width: 16rem;
}

.risicobeeld__tekst p {
    margin: 0.25rem 0 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--kleur-tekst-zacht);
}

/* De signalen zelf */

.signaallijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.signaallijst__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--kleur-rand-zacht);
}

.signaallijst__item:first-child {
    border-top: 0;
}

/* Alleen wat nog niemand heeft bekeken krijgt kleur. */
.signaallijst__item--urgent {
    border-left: 3px solid var(--alert-donker);
    padding-left: 0.75rem;
    margin-left: -0.75rem;
}

.signaallijst__icoon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--kleur-tekst-hint);
}

.signaallijst__item--urgent .signaallijst__icoon {
    color: var(--alert-donker);
}

.signaallijst__hoofd {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.signaallijst__titel {
    font-weight: 600;
    font-size: var(--fs-tekst);
}

.signaallijst__detail {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--kleur-tekst-zacht);
}

.signaallijst__bron {
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    color: var(--kleur-tekst-hint);
}

@media (max-width: 640px) {
    .signaallijst__item {
        flex-wrap: wrap;
    }
}

/* Groepje bij elkaar horende vinkjes met een kop erboven. Gebruikt voor de
   zorgvormen per dienst; fieldset/legend omdat een schermlezer dan voorleest
   waar die vinkjes bij horen. */
.veldgroep {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem 0.9rem;
    margin: 0 0 1rem;
}

.veldgroep legend {
    padding: 0 0.4rem;
    font-size: var(--fs-klein);
    font-weight: 600;
    color: var(--kleur-tekst-zacht);
}

.veldgroep .veld-hint {
    margin-top: 0.5rem;
}

/* Scanscherm: alles wat nog gescand moet worden op één pagina, één knop.
   De naam links, het bestandsveld rechts, zodat je met de map naast je van
   boven naar beneden werkt. */
.scanrij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    cursor: pointer;
}

.scanrij__naam {
    flex: 1;
    min-width: 14rem;
    font-weight: 600;
    font-size: var(--fs-tekst);
}

.scanrij input[type="file"] {
    flex: 0 1 22rem;
    min-width: 0;
}

/* Blijft in beeld bij het scrollen: bij achttien rijen is de knop anders
   telkens buiten beeld. */
.scanbalk {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    box-shadow: var(--schaduw-sm);
}

.scanbalk .checklist__uitleg {
    flex: 1;
    min-width: 14rem;
    margin: 0;
}

@media (max-width: 640px) {
    .scanrij input[type="file"] {
        flex-basis: 100%;
    }
}

/* Controlescherm: scan links, module rechts. Dat die twee náást elkaar staan
   is de reden dat dit scherm bestaat — moet de beoordelaar twee vensters
   openen, dan wordt de controle een doorklikoefening. */
.controle-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.controle-scan {
    width: 100%;
    height: min(70vh, 780px);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    background: var(--zand-50);
}

@media (max-width: 1080px) {
    .controle-raster {
        grid-template-columns: 1fr;
    }

    .controle-scan {
        height: 55vh;
    }
}

@media (max-width: 640px) {
    .checklist__label {
        flex-basis: 100%;
    }

    .checklist__form,
    .checklist-stand__actie form {
        width: 100%;
    }
}

/* Batch 6: cliëntbeleving & kwaliteit (dashboard + vragenlijsten) */
.kw-grafiek {
    width: 100%;
    height: auto;
    max-width: 480px;
}

.kw-balk {
    position: relative;
    background: var(--zand-200);
    border-radius: var(--radius-xs);
    height: 1.35rem;
    margin: 0.3rem 0;
    overflow: hidden;
}

.kw-balk__vul {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--salie-600), var(--salie-400));
    border-radius: var(--radius-xs);
    transform-origin: left center;
    animation: balk-groei 600ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes balk-groei {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Staafdiagram-groei (kwaliteitsdashboard, inline SVG). */
.kw-staaf {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: staaf-groei 550ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes staaf-groei {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.kw-staaf-waarde {
    animation: tabs-fade-in 300ms ease both;
}

.kw-balk__label {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 0.5rem;
    line-height: 1.35rem;
    font-size: var(--fs-klein);
    color: var(--salie-900);
    font-weight: 600;
}

.kw-resultaat {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--zand-200);
}

.kw-resultaat:last-child {
    border-bottom: none;
}

.kw-pos { color: var(--salie-700); }
.kw-neg { color: var(--alert); }

.schaal-keuze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.schaal-optie {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-sm);
}

.schaal-optie input {
    width: auto;
    margin: 0;
}

/* Batch 7: km-registratie & declaraties */
.tab-balk {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.lijst-los {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
}

.lijst-los li {
    min-width: 12rem;
}

.adres-groep {
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem 0.9rem;
    margin: 0 0 0.9rem;
    background: var(--zand-50);
}

.adres-groep legend {
    font-weight: 600;
    padding: 0 0.35rem;
    color: var(--kleur-tekst-zacht);
}

/* Afdruk-/PDF-weergave per werknemer (zakelijk, inktzuinig). */
.afdruk-kop {
    margin-bottom: 1rem;
}

.afdruk-kop p {
    margin: 0.2rem 0 0;
    color: var(--kleur-tekst-zacht);
}

.afdruk-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    box-shadow: none;
    border-radius: 0;
}

.afdruk-tabel th,
.afdruk-tabel td {
    border: 1px solid var(--zand-400);
    padding: 0.35rem 0.55rem;
    text-align: left;
    font-size: var(--fs-tekst);
    position: static;
}

.afdruk-tabel tfoot td {
    background: var(--zand-100);
}

.afdruk-totaal {
    font-size: var(--fs-md);
    margin-top: 1rem;
}

.afdruk-handtekening {
    margin-top: 2rem;
    line-height: 2.4;
    font-size: var(--fs-tekst);
}

/* Foutpagina's */
.foutpagina {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zand-100);
}

.foutpagina__kaart {
    text-align: center;
    background: var(--vlak);
    border-radius: var(--radius-lg);
    box-shadow: var(--schaduw);
    padding: 3rem 2rem;
}

.foutpagina__kaart h1 {
    font-size: 3rem;
    color: var(--salie-700);
    margin: 0;
}

/* Sessietimer */
.sessie-timer {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: var(--zand-900);
    color: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    z-index: 30;
    box-shadow: var(--schaduw);
}

/* ---------------------------------------------------------------------------
   18. PRINT — zakelijk en inktzuinig, geen fancy effecten
   ------------------------------------------------------------------------- */

.print-pagina {
    background: var(--vlak);
    padding: 2rem;
}

.print-pagina__inhoud {
    max-width: 900px;
    margin: 0 auto;
}

/* Printpagina's hebben geen topbar: kop niet laten zweven. */
.print-pagina thead th {
    position: static;
}

@media print {
    .print-pagina {
        padding: 0;
    }

    body {
        background: var(--vlak);
    }

    .knop, .filterbalk, .sidebar, .topbar, .kleef-balk,
    .sessie-timer, .hero__acties, .palet-overlay, [data-print-verberg] {
        display: none !important;
    }

    .kaart, .kpi-kaart, table {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .hero, .hero--zacht {
        background: var(--vlak);
        color: #000;
        box-shadow: none;
        border: none;
        padding: 0 0 1rem;
        margin-bottom: 1rem;
    }

    .hero__begroeting, .hero--zacht .hero__begroeting {
        color: #000;
    }

    thead th {
        position: static;
    }
}

/* ---------------------------------------------------------------------------
   19. RESPONSIVE & TOEGANKELIJKHEID
   ------------------------------------------------------------------------- */

/* Tot en met 1024px is een tablet, ook liggend. De grens lag op 768px, en
   een iPad liggend (1024) kreeg dus de desktopindeling: zijbalk 268px plus
   de stappenlijst van 250px liet voor het intakeformulier 391px over --
   velden van 125px en een kleefbalk van drie regels. De intake wordt bij
   cliënten thuis op tablets ingevoerd; vandaar 1024. Het mini-rail-punt
   (1025) en de dossierstrook verderop lopen hiermee gelijk. */
@media (max-width: 1024px) {
    :root {
        --topbar-hoogte: 54px;
    }

    .layout {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: transform 0.22s ease-in-out;
        z-index: 18;
        width: 80%;
        max-width: 300px;
    }

    .sidebar.sidebar--open {
        transform: translateX(0);
    }

    .zijbalk-backdrop {
        position: fixed;
        inset: 0;
        z-index: 17;
        background: rgba(28, 24, 20, 0.4);
        border: none;
        padding: 0;
        animation: tabs-fade-in 160ms ease;
    }

    .zijbalk-backdrop[hidden] {
        display: none;
    }

    .topbar {
        padding: 0 0.8rem;
        gap: 0.5rem;
    }

    .topbar__hamburger {
        display: inline-flex;
    }

    .topbar__inklap {
        display: none;
    }

    .topbar__zoek {
        min-width: 0;
        flex: 0 0 auto;
        padding: 0.45rem 0.55rem;
    }

    .topbar__zoek-tekst,
    .topbar__kbd {
        display: none;
    }

    .topbar__sectie {
        display: none;
    }

    .layout__inhoud {
        padding: 1.25rem 1rem 2rem;
    }

    .hero {
        padding: var(--sp-6) var(--sp-5);
        border-radius: var(--radius-lg);
    }

    .hero__begroeting {
        font-size: var(--fs-xl);
    }

    .kpi-grid {
        padding: 0 var(--sp-3);
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--sp-3);
    }

    .kpi-kaart__cijfer {
        font-size: var(--fs-2xl);
    }

    .volgende-afspraak {
        margin: 0 var(--sp-3) var(--sp-4);
    }
}

@media (max-width: 640px) {
    .layout__inhoud {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    /* Grotere, beter aantikbare knoppen op mobiel. */
    .knop {
        padding: 0.6rem 0.9rem;
        min-height: 48px;
    }

    /* Formulierrijen stapelen netjes onder elkaar. */
    .formulier-rij {
        flex-wrap: wrap;
    }

    .formulier-rij > div {
        flex: 1 1 100%;
    }

    /* Grote invoervelden op mobiel (km-/declaratieformulieren). */
    input, select, textarea {
        min-height: 48px;
        font-size: var(--fs-basis);
    }

    textarea {
        min-height: 0;
    }

    input[type="checkbox"], input[type="radio"] {
        min-height: 0;
    }

    /* Tabellen iets compacter zodat er meer past. */
    .layout__inhoud table {
        font-size: var(--fs-tekst);
    }

    h1 {
        font-size: var(--fs-lg);
    }
}

/* ---------------------------------------------------------------------------
   20. PAKKET A–F: nieuwe componenten
   ------------------------------------------------------------------------- */

/* Skip-link voor toetsenbordgebruikers (E1). */
.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 100;
    background: var(--salie-700);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    box-shadow: var(--schaduw);
    transition: top var(--transitie-snel);
}

.skip-link:focus {
    top: 0.6rem;
    color: #fff;
    text-decoration: none;
}

/* Laadstatus op submit-knoppen (A3). */
.knop--laden {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.knop--laden::after {
    content: "";
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    animation: knop-spin 0.7s linear infinite;
}

.knop--secundair.knop--laden::after {
    border-color: var(--salie-200);
    border-top-color: var(--salie-700);
}

@keyframes knop-spin {
    to { transform: rotate(1turn); }
}

/* Meldingen: sluitknop + verdwijn-animatie (A6). */
/* Het omhulsel om de meldingtekst, gezet door app.js.

   Zonder dit is elke losse tekstregel en elke <strong> een eigen flexitem,
   met de gap van de melding ertussen: de zin krijgt gaten rond vetgedrukte
   woorden en breekt niet af. `min-width: 0` is nodig omdat een flexitem
   standaard niet kleiner wil worden dan zijn min-content — precies wat de
   sluitknop op een smal scherm buiten beeld duwde. */
.melding__tekst {
    flex: 1 1 auto;
    min-width: 0;
}

.melding__sluit {
    margin-left: auto;
    border: none;
    background: transparent;
    color: inherit;
    font-size: var(--fs-md);
    line-height: 1;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs);
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-start;
}

.melding__sluit:hover {
    background: rgba(0, 0, 0, 0.07);
}

.melding--weg {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Foutpagina's (A1). */
.foutpagina__illustratie {
    color: var(--salie-300);
    margin-bottom: 0.5rem;
}

.foutpagina__titel {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0.25rem 0 0.5rem;
}

.foutpagina__kaart {
    max-width: 460px;
}

.foutpagina__kaart > p {
    color: var(--kleur-tekst-zacht);
}

/* Dossier-profielkaart (B1). */
.dossier-profiel {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    /* De accentrand bovenaan is een achtergrondlaag en geen los ::before-element.
       Een achtergrond wordt vanzelf bijgesneden door de afgeronde hoeken, dus
       `overflow: hidden` is er niet meer voor nodig — en dat knipte juist het
       uitklapmenu "Meer" af zodra het buiten de kaart viel. */
    background: var(--gradient-accentrand) no-repeat top left / 100% 3px, var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--schaduw-sm);
    margin-bottom: var(--sp-5);
}

.dossier-profiel__avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: var(--gradient-avatar);
    color: var(--avatar-tekst);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lettertype-kop);
    font-weight: 700;
    font-size: var(--fs-md);
    flex-shrink: 0;
    box-shadow: var(--schaduw-sm);
}

.dossier-profiel__info {
    flex: 1;
    min-width: 220px;
}

.dossier-profiel__info h1 {
    margin: 0 0 0.4rem;
    padding-bottom: 0;
}

.dossier-profiel__info h1::after {
    content: none;
}

.dossier-profiel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.dossier-profiel__chip {
    background: var(--zand-100);
    border: 1px solid var(--zand-200);
    color: var(--kleur-tekst-zacht);
    border-radius: var(--radius-pil);
    font-size: var(--fs-klein);
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

.dossier-profiel__acties {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* "Meer ▾"-dropdown (native details, CSP-veilig). */
.meer-menu {
    position: relative;
    display: inline-block;
}

.meer-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.meer-menu > summary::-webkit-details-marker {
    display: none;
}

.meer-menu[open] > summary {
    background: var(--salie-50);
    border-color: var(--salie-300);
    color: var(--salie-700);
}

.meer-menu__lijst {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 230px;
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-lg);
    padding: 0.4rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    animation: tabs-fade-in 140ms ease;
}

.meer-menu__lijst a,
.meer-menu__knop {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-xs);
    color: var(--kleur-tekst);
    font-size: var(--fs-tekst);
    font-weight: 500;
}

/* Een knop in het menu (modal openen, afdrukken) ziet eruit als een regel. */
.meer-menu__knop {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.meer-menu__scheiding {
    display: block;
    height: 1px;
    background: var(--zand-200);
    margin: 0.35rem 0.25rem;
}

.meer-menu__lijst a:hover,
.meer-menu__knop:hover {
    background: var(--salie-50);
    color: var(--salie-800);
    text-decoration: none;
}

/* Avatar-chips in lijsten (B2). */
.tabel-persoon {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--kleur-tekst);
}

.tabel-persoon:hover {
    color: var(--salie-700);
}

.tabel-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--salie-100);
    color: var(--salie-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* Dagworkflow-bord als kanban (B3). */
.bord {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--sp-4);
    align-items: start;
}

.bord-kolom {
    background: var(--zand-100);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
}

.bord-kolom__kop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: var(--fs-tekst);
    min-width: 0;
}

.bord-kolom__telling {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--kleur-tekst-zacht);
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: var(--radius-pil);
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

.bord-kolom__voortgang {
    height: 5px;
    border-radius: 3px;
    background: var(--zand-200);
    overflow: hidden;
    margin-bottom: var(--sp-3);
}

.bord-kolom__voortgang-vul {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--salie-500), var(--salie-400));
}

.bord-kaart {
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-left: 3px solid var(--zand-500);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 8px;
    box-shadow: var(--schaduw-sm);
    transition: transform var(--transitie-snel), box-shadow var(--transitie-snel);
}

.bord-kaart:hover {
    transform: translateY(-1px);
    box-shadow: var(--schaduw);
}

.bord-kaart--afspraak {
    border-left-color: var(--info);
}

.bord-kaart__meta {
    font-size: var(--fs-2xs);
    color: var(--kleur-tekst-hint);
    margin-bottom: 0.1rem;
}

.bord-kaart__titel {
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* Berichten als chat-bubbels (B5). */
.bericht-lijst {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 760px;
}

.bericht-bubbel {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.bericht-bubbel__inhoud {
    background: var(--vlak);
    border: 1px solid var(--zand-200);
    border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
    padding: 0.8rem 1rem;
    box-shadow: var(--schaduw-sm);
    flex: 1;
    min-width: 0;
}

.bericht-bubbel__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    margin-bottom: 0.25rem;
}

.bericht-bubbel__meta strong {
    color: var(--kleur-tekst);
    font-size: var(--fs-sm);
}

.bericht-bubbel__onderwerp {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: var(--fs-tekst);
}

.bericht-bubbel__tekst {
    margin: 0;
    font-size: var(--fs-tekst);
}

/* Notificatiegroepen met accent (B6). */
.kaart--signaal {
    border-top: 3px solid var(--terra-400);
}

/* Bonnetjes bij een declaratieregel: miniatuur i.p.v. kale bestandsnaam. */
.bon-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bon-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: 84px;
    padding: 0.3rem;
    border: 1px solid var(--zand-200);
    border-radius: var(--radius-sm);
    background: var(--vlak);
    color: var(--kleur-tekst-zacht);
    transition: transform var(--transitie-snel), box-shadow var(--transitie-snel), border-color var(--transitie-snel);
}

.bon-strip__item:hover {
    text-decoration: none;
    border-color: var(--salie-300);
    transform: translateY(-2px);
    box-shadow: var(--schaduw);
}

.bon-strip__item img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    display: block;
    background: var(--zand-100);
}

.bon-strip__bestand {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    background: var(--terra-100);
    color: var(--terra-600);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.bon-strip__naam {
    font-size: var(--fs-2xs);
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Live inzetbaarheidscontrole in het planformulier. */
.inzet-controle {
    background: var(--waarschuwing-licht);
    border: 1px solid var(--waarschuwing-rand);
    border-left: 4px solid var(--waarschuwing);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    color: var(--waarschuwing-donker);
    font-size: var(--fs-tekst);
    animation: melding-entree var(--transitie-traag) both;
}

.inzet-controle[hidden] {
    display: none;
}

.inzet-controle ul {
    margin: 0.35rem 0 0;
    padding-left: 1.15rem;
}

.inzet-controle li {
    margin: 0.15rem 0;
}

.inzet-controle--blokkade {
    background: var(--alert-licht);
    border-color: var(--alert-rand);
    border-left-color: var(--alert);
    color: var(--alert-donker);
}

.inzet-controle__hard {
    font-weight: 700;
}

/* Sorteerbare kolomkoppen (C2). */
th.sorteerbaar {
    cursor: pointer;
    user-select: none;
}

th.sorteerbaar:hover {
    color: var(--salie-700);
}

th.sorteerbaar::after {
    content: "↕";
    margin-left: 0.35rem;
    opacity: 0.4;
    font-size: 0.85em;
}

th.sorteerbaar[aria-sort="ascending"]::after {
    content: "↑";
    opacity: 1;
}

th.sorteerbaar[aria-sort="descending"]::after {
    content: "↓";
    opacity: 1;
}

/* Wachtwoord-oogje (C3). */
.wachtwoord-veld {
    position: relative;
}

.wachtwoord-veld input {
    padding-right: 2.8rem;
}

.wachtwoord-veld__oog {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    background: transparent;
    color: var(--kleur-tekst-hint);
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wachtwoord-veld__oog:hover {
    color: var(--salie-700);
    background: var(--zand-100);
}

.wachtwoord-veld__oog--actief {
    color: var(--salie-700);
}

/* Sneltoetsen-overlay (C5). */
.sneltoets-kaart {
    max-width: 380px;
    padding: var(--sp-5);
}

.sneltoets-kaart__titel {
    margin: 0 0 0.75rem;
    font-size: var(--fs-md);
}

.sneltoets-lijst {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sneltoets-lijst div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sneltoets-lijst dt {
    min-width: 5.5rem;
}

.sneltoets-lijst dd {
    margin: 0;
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-tekst);
}

/* Agenda-verfijning (B4): weekend-tint + gloed op de nu-lijn. */
.agenda__cols .agenda__dag:nth-child(6),
.agenda__cols .agenda__dag:nth-child(7) {
    background-color: rgba(58, 46, 34, 0.03);
}

.agenda__nu {
    box-shadow: 0 0 6px rgba(176, 65, 47, 0.55);
}

/* Thema-toggle-iconen (D1): maan in licht, zon in donker. */
.thema-icoon--zon {
    display: none;
}

[data-thema="donker"] .thema-icoon--zon {
    display: inline;
}

[data-thema="donker"] .thema-icoon--maan {
    display: none;
}

/* ---------------------------------------------------------------------------
   21. DONKER THEMA (D1) — token-overrides + gerichte fixes
   ------------------------------------------------------------------------- */

[data-thema="donker"] {
    color-scheme: dark;
    /* Sinds richting D in dezelfde koele familie als het lichte thema:
       navy-donker in plaats van bruin-donker. */
    --vlak: #16243A;
    --vlak-zacht: #132033;
    --kleur-pagina: #0F1B2B;
    --kleur-achtergrond: #16243A;
    --kleur-kaart: #1B2B42;
    --zand-50: #132033;
    --zand-100: #1B2B42;
    --zand-200: #26384F;
    --zand-300: #33465E;
    --zand-400: #45586F;
    --zand-500: #8092A6;
    --kleur-rand: #26384F;
    --kleur-rand-zacht: #1B2B42;
    --kleur-tekst: #E6EDF4;
    --kleur-kop: #E6EDF4;
    --kleur-tekst-zacht: #B2C0CF;
    --kleur-tekst-hint: #93A3B4;
    /* De merkkleur blijft dezelfde hue, maar de tintvlakken draaien om: op een
       donkere ondergrond is "zacht" niet lichter maar juist donkerder, en de
       diepe variant wordt de lichtste — anders verdwijnt het accent. */
    /* Afgeleid van --org-kleur, niet van de lichte tinten: die zijn voor
       papierwit berekend en zouden hier onleesbaar zijn. */
    --merk: var(--org-kleur);
    --merk-zacht: color-mix(in srgb, var(--org-kleur) 18%, #0F1B2B);
    --merk-rand: color-mix(in srgb, var(--org-kleur) 34%, #0F1B2B);
    --merk-tekst: color-mix(in srgb, var(--org-kleur) 42%, #FFFFFF);
    --merk-diep: color-mix(in srgb, var(--org-kleur) 30%, #FFFFFF);
    --salie-50: color-mix(in srgb, var(--merk) 12%, #0F1B2B);
    --salie-100: var(--merk-zacht);
    --salie-200: var(--merk-rand);
    --salie-300: color-mix(in srgb, var(--merk) 52%, #0F1B2B);
    --salie-800: var(--merk-diep);
    --terra-100: color-mix(in srgb, var(--merk) 20%, #0F1B2B);
    --terra-200: color-mix(in srgb, var(--merk) 34%, #0F1B2B);
    --terra-300: var(--merk-tekst);
    --succes: #4FAE85;
    --succes-donker: #8AD5B2;
    --succes-licht: #20352B;
    --succes-rand: #31513F;
    --alert: #CE5B45;
    --alert-donker: #EE9E8D;
    --alert-licht: #3D2521;
    --alert-rand: #5A362F;
    --waarschuwing: #D2A24A;
    --waarschuwing-donker: #E6C077;
    --waarschuwing-licht: #39301C;
    --waarschuwing-rand: #524427;
    --info: #8FBBD3;
    --info-licht: #20313A;
    --info-rand: #324855;
    --afkeur: #C3A5DD;
    --afkeur-licht: #2C2438;
    --afkeur-rand: #45385A;
    /* De hero is sinds de zorgbalie-ronde een licht paneel (--vlak) met de
       begroeting in --merk-diep; die tokens zijn hierboven al donker gemaakt,
       dus de hero heeft geen eigen gradient meer nodig. */
    --gradient-primair: linear-gradient(165deg, color-mix(in srgb, var(--org-kleur) 30%, #0F1B2B) 0%, #0F1B2B 100%);
    --gradient-hero-zacht: linear-gradient(135deg, var(--merk-zacht) 0%, #16243A 62%, var(--merk-zacht) 100%);
    --gradient-accentrand: linear-gradient(120deg, var(--merk), var(--merk-tekst));
    /* Zijbalk in het donkere thema: nog iets dieper navy dan de pagina. Het
       actieve item is hier niet gevuld in de merkkleur (die is in dit thema
       een lichte tint, en witte tekst zou erop verdwijnen) maar een zacht
       vlak met de merktint als tekst. */
    --zij-grond: #0B1A30;
    --zij-rand: #1C2E48;
    --zij-tekst: #D7E3F0;
    --zij-tekst-zacht: #8FB3D9;
    --zij-hover: #16294A;
    --zij-actief-vlak: var(--merk-zacht);
    --zij-actief-tekst: var(--merk-tekst);
    /* Het accent is in dit thema een lichte tint; witte initialen zouden
       daarop verdwijnen. */
    --avatar-tekst: var(--kleur-pagina);
    --schaduw-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --schaduw: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --schaduw-lg: 0 18px 44px rgba(0, 0, 0, 0.55), 0 5px 12px rgba(0, 0, 0, 0.35);
}

[data-thema="donker"] .topbar {
    background: rgba(15, 27, 43, 0.82);
    border-bottom-color: #26384F;
}

[data-thema="donker"] .kleef-balk {
    background: rgba(15, 27, 43, 0.88);
    border-top-color: #322D29;
}

[data-thema="donker"] .auth-layout__formulier .auth-kaart {
    background: rgba(42, 38, 35, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-thema="donker"] .layout__main::before {
    background: linear-gradient(180deg, rgba(110, 154, 137, 0.05), transparent);
}

[data-thema="donker"] .hero--zacht .hero__begroeting {
    color: #CFE2D8;
}

[data-thema="donker"] .modal-overlay {
    background: rgba(0, 0, 0, 0.55);
}

[data-thema="donker"] .melding__sluit:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-thema="donker"] .veiligheidsbanner {
    background: #3A2B1D;
    border-color: #55392A;
    border-left-color: var(--terra-300);
}

[data-thema="donker"] .veiligheidsbanner__item {
    background: var(--vlak);
    border-color: #55392A;
}

[data-thema="donker"] .agenda__dag--vandaag {
    background-color: rgba(201, 138, 100, 0.08);
}

[data-thema="donker"] .agenda__cols .agenda__dag:nth-child(6),
[data-thema="donker"] .agenda__cols .agenda__dag:nth-child(7) {
    background-color: rgba(0, 0, 0, 0.18);
}

[data-thema="donker"] .kw-grafiek text {
    fill: #B9AEA1;
}

[data-thema="donker"] .kw-balk__label {
    color: #DFEEE7;
}

[data-thema="donker"] .omaha-koppelblok--onvolledig {
    background: var(--alert-licht);
}

[data-thema="donker"] .omaha-koppelblok--volledig {
    background: var(--succes-licht);
}

/* Animaties uit voor wie daarom vraagt (blijft als laatste regel gelden). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Organisatiemerk in de topbar
   ---------------------------------------------------------------------------
   Het systeem bedient meerdere ondernemingen met elk een eigen database. De
   naam en de kleur maken in één oogopslag duidelijk waar je zit — dat voorkomt
   de fout die hier het makkelijkst te maken is: gegevens invoeren bij de
   verkeerde organisatie.
   ------------------------------------------------------------------------- */

.organisatie-merk {
    position: relative;
    margin-left: auto;
}

.organisatie-merk__knop {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--kleur-rand);
    background: var(--kleur-vlak, var(--zand-50, #fff));
    font-size: var(--fs-klein);
    font-weight: 600;
    color: var(--kleur-tekst);
    cursor: pointer;
    white-space: nowrap;
    list-style: none;
}

.organisatie-merk__knop::-webkit-details-marker { display: none; }

.organisatie-merk__knop:hover { border-color: var(--organisatie-kleur, var(--salie-700)); }

.organisatie-merk__stip {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--organisatie-kleur, var(--salie-700));
    flex: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--merk) 25%, transparent);
}

.organisatie-merk__uitleg {
    margin: 0 0 0.4rem;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    max-width: 22ch;
}

.organisatie-merk__optie {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.5rem;
    border: none;
    background: none;
    font: inherit;
    color: var(--kleur-tekst);
    border-radius: var(--radius);
    cursor: pointer;
}

.organisatie-merk__optie:hover { background: var(--zand-100, rgba(0, 0, 0, .05)); }

@media (max-width: 720px) {
    .organisatie-merk__naam { display: none; }
}

/* ---------------------------------------------------------------------------
   22. DOSSIER — panelen, veldenlijsten, meters

   Het clientdossier was een raster van negen even zware kaarten met regels in
   de vorm "Label: waarde", waarvan meer dan de helft een streepje was. Label en
   waarde stonden in dezelfde letter, dus je moest lezen waar je wilde scannen.

   Deze componenten draaien dat om: het label wordt klein en gespatieerd, de
   waarde krijgt het gewicht, en lege velden verdwijnen tot je ze opvraagt.
   ------------------------------------------------------------------------- */

/* Twee kolommen: links de zorg, rechts wie je belt en welke papieren er zijn. */
.dossier-raster {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    align-items: start;
    margin-top: var(--sp-4);
}

.dossier-kolom {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
    min-width: 0;
}

@media (max-width: 1080px) {
    .dossier-raster { grid-template-columns: 1fr; }
}

/* --- paneel ---------------------------------------------------------------- */
.paneel {
    --kaart-px: 0px;
    --kaart-py: 0px;
    background: var(--vlak);
    border: 1px solid var(--kleur-rand-zacht);
    border-radius: var(--radius);
    overflow: hidden;
}

/* De kop van een paneel is dezelfde band als de kaartkop (zie KAARTKOP);
   het paneel heeft zelf geen padding, dus de band ligt al tegen de rand. */
.paneel__kop {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.paneel__kop h2 {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-basis);
    font-weight: 600;
    line-height: var(--lh-kop);
    margin: 0;
}

/* Het aantal hoort bij de kop, niet in de lijst: je ziet meteen of er iets is. */
.paneel__telling {
    font-size: var(--fs-xs);
    font-weight: 700;
    /* --kleur-tekst-hint haalt op dit vlak maar 4,2:1; op klein cijferwerk is
       dat te weinig. Een tint donkerder zit op 5,1:1. */
    color: var(--kleur-tekst-zacht);
    background: var(--zand-100);
    border-radius: var(--radius-pil);
    padding: 0.05rem 0.45rem;
    font-variant-numeric: tabular-nums;
}

.paneel__kop .knop { margin-left: auto; }
/* Twee knoppen in een kop: samen rechts. Met allebei margin-left: auto
   kwam de eerste los in het midden te staan (Documenten: Scans koppelen
   naast Inscannen, 05-10-2026). */
.paneel__kop .knop + .knop { margin-left: 0; }

.paneel__lijf { padding: 0.25rem 1.1rem 1.05rem; }

/* --- veldenlijst ----------------------------------------------------------- */
.velden {
    display: grid;
    gap: 0.75rem 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0;
}

.velden--enkel { grid-template-columns: 1fr; }

.velden > div { min-width: 0; }

.velden dt {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--kleur-tekst-hint);
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.velden dd {
    margin: 0;
    font-size: var(--fs-tekst);
    color: var(--kleur-tekst);
    overflow-wrap: break-word;
}

.velden dd.leeg {
    color: var(--kleur-tekst-hint);
    font-style: italic;
}

.velden-schakel {
    margin: 0.9rem 0 0;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-hint);
}

.velden-schakel button {
    font: inherit;
    font-weight: 600;
    color: var(--merk-tekst);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- rij: contactpersoon, document, melding -------------------------------- */
.dossier-rij {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}

.dossier-rij:first-child { padding-top: 0; }
.dossier-rij:last-child { border-bottom: 0; padding-bottom: 0; }

.dossier-rij__initialen {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    flex: none;
    display: grid;
    place-items: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--merk-diep);
    background: var(--merk-zacht);
}

.dossier-rij__hoofd { flex: 1; min-width: 0; }
.dossier-rij__titel { font-size: var(--fs-tekst); font-weight: 600; }
.dossier-rij__titel a { text-decoration: none; }
.dossier-rij__sub { font-size: var(--fs-klein); color: var(--kleur-tekst-hint); }

.dossier-rij__actie {
    font-size: var(--fs-klein);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-xs);
    padding: 0.15rem 0.5rem;
    color: var(--merk-tekst);
}

.dossier-rij__actie:hover { background: var(--merk-zacht); text-decoration: none; }

.dossier-rij__tijd {
    font-size: var(--fs-xs);
    color: var(--kleur-tekst-hint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- lege staat binnen een paneel ------------------------------------------ */
/* De lege rij die app.js in een tabel zonder rijen zet (initLegeTabellen).
   Een tabel kan een eigen tekst meegeven met data-leeg-tekst. */
.leegrij td {
    text-align: center;
    color: var(--kleur-tekst-hint);
    font-size: var(--fs-sm);
    padding: 1.1rem 0.8rem;
    background: var(--vlak-zacht);
}

.leegvak {
    text-align: center;
    padding: 1.1rem 0.8rem;
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--radius-sm);
    background: var(--vlak-zacht);
}

.leegvak p {
    margin: 0 0 0.6rem;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-hint);
}

/* --- ADL-schaal als meter --------------------------------------------------
   "Wassen: 3 / 6" moet je omrekenen; zes blokjes lees je in een oogopslag.
   Hoge afhankelijkheid (5 of 6) kleurt af — daar zit de zorg. */
.adl {
    display: grid;
    gap: 0.45rem;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
}

.adl li {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    gap: 0.6rem;
    align-items: center;
    font-size: var(--fs-sm);
}

.adl__naam { color: var(--kleur-tekst-zacht); }
.adl__balk { display: flex; gap: 2px; }

.adl__blok {
    height: 7px;
    flex: 1;
    border-radius: 2px;
    background: var(--zand-200);
}

.adl__blok--aan { background: var(--merk); }
.adl__blok--aan.adl__blok--hoog { background: var(--waarschuwing); }

.adl__waarde {
    font-variant-numeric: tabular-nums;
    color: var(--kleur-tekst-hint);
    font-size: var(--fs-klein);
}

/* --- volledigheid ----------------------------------------------------------
   Tijdens de digitaliseringsslag is een leeg veld geen ruis maar een taak.
   Daarom geen streepjes in het dossier, maar een meter met directe links. */
.volledig {
    background: var(--info-licht);
    border: 1px solid var(--info-rand);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    display: grid;
    gap: 0.5rem;
}

.volledig__kop {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--fs-sm);
}

.volledig__kop b {
    font-family: var(--lettertype-kop);
    font-size: var(--fs-basis);
    color: var(--info);
    font-variant-numeric: tabular-nums;
}

.volledig__kop span { color: var(--kleur-tekst-zacht); }

.volledig__meter {
    height: 6px;
    border-radius: 3px;
    background: var(--vlak);
    overflow: hidden;
    border: 1px solid var(--info-rand);
}

.volledig__vul {
    height: 100%;
    background: linear-gradient(90deg, var(--info), var(--merk));
}

.volledig__mist { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.volledig__mist a {
    font-size: var(--fs-xs);
    border: 1px solid var(--info-rand);
    background: var(--vlak);
    border-radius: var(--radius-pil);
    padding: 0.1rem 0.5rem;
    color: var(--info);
    text-decoration: none;
}

.volledig__mist a:hover { background: var(--info-licht); text-decoration: none; }

/* --- administratie: ingeklapt ----------------------------------------------
   BSN, IBAN en polisnummer zijn backofficewerk. Wie het dossier opent staat op
   het punt naar binnen te gaan en heeft ze niet nodig. */
.administratie {
    margin-top: var(--sp-4);
    background: var(--vlak);
    border: 1px solid var(--kleur-rand-zacht);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-sm);
}

.administratie > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--lettertype-kop);
    font-size: var(--fs-basis);
    font-weight: 600;
}

.administratie > summary::-webkit-details-marker { display: none; }

.administratie > summary::after {
    content: "\25BE";
    margin-left: auto;
    color: var(--kleur-tekst-hint);
    font-family: var(--lettertype);
    transition: transform var(--transitie);
}

.administratie[open] > summary::after { transform: rotate(180deg); }

.administratie > summary small {
    font-family: var(--lettertype);
    font-weight: 400;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-hint);
}

.administratie__lijf {
    padding: 0 1.1rem 1.1rem;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.administratie__blok h3 {
    font-family: var(--lettertype);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--merk-tekst);
    font-weight: 700;
    margin: 0 0 0.55rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}

/* Kleine knop in een paneelkop: mag de kop niet overstemmen. */
.knop--klein {
    font-size: var(--fs-klein);
    padding: 0.25rem 0.6rem;
    min-height: 28px;
}

/* Tussenkopje binnen een paneel (bijvoorbeeld "ADL-schaal"). */
.paneel__subkop {
    font-family: var(--lettertype);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--kleur-tekst-hint);
    font-weight: 700;
    margin: 1rem 0 0.5rem;
}

/* In het donkere thema is de accentkleur juist een LICHTE tint — daar hoort
   donkere tekst op. Witte tekst op licht magenta haalde 1,8:1. */
/* --alert is in dit thema de vlakvariant en haalt als kleine tekst 3,7:1.
   --alert-donker is de lichte variant die hier hoort. */
[data-thema="donker"] .veld-fout {
    color: var(--alert-donker);
}

[data-thema="donker"] .knop--primair {
    background: var(--merk-tekst);
    color: var(--kleur-pagina);
}

[data-thema="donker"] .knop--primair:hover {
    background: var(--merk-diep);
    color: var(--kleur-pagina);
}

/* ---------------------------------------------------------------------------
   Cliëntenoverzicht: klikbare tegels, kaartweergave, selectie en filterchips

   De tegels dragen de merkkleur van de werkmaatschappij en niet zes vaste
   kleuren. Die merkkleur komt uit het logo en verschilt per bedrijf; zes vaste
   verlopen zouden dat onderscheid juist bovenaan de pagina wegpoetsen. Alleen
   de tegel die een probleem meldt krijgt de alertkleur — kleur betekent hier
   één ding tegelijk.
   ------------------------------------------------------------------------- */

.kpi-grid--klikbaar .kpi-kaart {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* De variant kleurt het cijfer, niet de rand: een gekleurde zijstreep is
   voor een staat (gekozen filter, prioriteit), niet voor een soort. */

.kpi-kaart--merk .kpi-kaart__cijfer {
    color: var(--merk-tekst);
}


.kpi-kaart--alert .kpi-kaart__cijfer {
    color: var(--kleur-alert, #b3261e);
}

/* De tegel die op dit moment de lijst filtert. */
.kpi-kaart--gekozen {
    outline: 2px solid var(--merk);
    outline-offset: 1px;
}

/* --- Actieve filters -------------------------------------------------- */

.actieve-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.actieve-filters__label {
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-hint);
}

.filterchip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--kleur-rand);
    border-radius: 999px;
    background: var(--vlak);
    font-size: var(--fs-klein);
    text-decoration: none;
    color: inherit;
}

.filterchip:hover {
    border-color: var(--merk);
}

.filterchip__weg {
    font-size: var(--fs-basis);
    line-height: 1;
    color: var(--kleur-tekst-hint);
}

/* Alleen voor schermlezers: het kruisje alleen zegt niet wat er gebeurt. */
.filterchip__uitleg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.actieve-filters__wissen {
    font-size: var(--fs-klein);
}

/* --- Balk met telling en weergaveknoppen ------------------------------ */

.lijstbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.75rem 0 0.5rem;
}

.lijstbalk .resultaat-telling {
    margin: 0;
}

.weergave-schakelaar {
    display: flex;
    gap: 0.3rem;
}

/* --merk-tekst en niet --merk: witte tekst op de logokleur haalt bij ZGM
   geen AA (zie "De Logokleur-is-geen-tekst-Regel"). */
.weergave-schakelaar [aria-pressed="true"] {
    background: var(--merk-tekst);
    color: #fff;
    border-color: var(--merk-tekst);
}

/* --- Bulkbalk ----------------------------------------------------------
   De opmaak staat verderop, bij de tweede ".bulkbalk". Hier stond een oudere
   versie met labels bóven de keuzelijsten (kolom, kapitalen); de nieuwere zet
   ze ernaast, maar overschreef de kolom en de kapitalen niet, zodat elke
   bulkbalk een mengsel van de twee was: label erboven, knoppen ernaast
   halverwege gecentreerd. Eén definitie, geen tweede. */

.bulkbalk[hidden] {
    display: none;
}

.kolom-vinkje {
    width: 2.2rem;
    text-align: center;
}

/* --- Kaartweergave ----------------------------------------------------- */

/* Kaartweergave voor personen. Heette eerst `clientkaart`; hernoemd toen de
   medewerkerslijst dezelfde opmaak kreeg, want twee sets regels die hetzelfde
   doen lopen gegarandeerd uit elkaar. Cliënt- en medewerkerkaarten verschillen
   alleen in wat erin staat, niet in hoe ze eruitzien. */
.persoonskaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.9rem;
}

/* Letterkop tussen de A's en de B's: een letter in de merkkleur met een lijn
   erachter. In het kaartraster neemt hij een hele rij; in de tabel staat hij
   in een cel over alle kolommen. */
/* De groepskop in een lijst (de beginletter, een jaar, een reis): een band
   over de volle breedte in de zachte merkkleur, zoals de kaartkop. Was een
   los blokje met een lijn ernaast, dat tussen de rijen verdween. */
.letterkop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--merk-diep);
    background: var(--merk-zacht);
    border: 1px solid var(--merk-rand);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.75rem;
    font-size: var(--fs-sm);
}
.letterkop > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-xs);
    background: var(--vlak);
    font-size: var(--fs-sm);
    line-height: 1;
}
.persoonskaarten > .letterkop {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
}
.persoonskaarten > .letterkop:first-child {
    margin-top: 0;
}
.letterkop-rij td {
    padding: 0.6rem 0.75rem 0.3rem;
    border-bottom: none;
    background: transparent;
}
.letterkop-rij .letterkop {
    border-radius: var(--radius-xs);
}

/* Een bewerkformulier onder zijn rij (indicaties in stap 7): de rij erboven
   is de samenvatting, deze rij klapt het formulier uit over alle kolommen. */
.rij--bewerken td {
    padding-top: 0;
    padding-bottom: var(--sp-3);
}
.rij--bewerken .formulier-kaart {
    margin-top: var(--sp-3);
}
/* De knop "Bewerken" in de actiecel is een <details> met alleen een summary;
   de formulierrij erna volgt zijn open-stand. Zonder :has() (oude browser)
   staat het formulier gewoon open -- lelijk, niet stuk. */
.rij-uitklap {
    display: inline-block;
    margin-right: var(--sp-2);
}
.rij-uitklap > summary {
    list-style: none;
    cursor: pointer;
}
.rij-uitklap > summary::-webkit-details-marker {
    display: none;
}
tr:has(> td > .rij-uitklap:not([open])) + tr.rij--bewerken {
    display: none;
}

.persoonskaart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-lg);
    box-shadow: var(--schaduw-sm);
}

.persoonskaart__vinkje {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}

.persoonskaart__kop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-right: 1.6rem;
}

.persoonskaart__avatar {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--merk);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--fs-tekst);
}

.persoonskaart__titel {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
    min-width: 0;
}

.persoonskaart__naam {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.persoonskaart__naam:hover {
    text-decoration: underline;
}

/* Definitielijst als twee kolommen: label links, waarde rechts. */
.persoonskaart__gegevens {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    margin: 0;
    font-size: var(--fs-sm);
}

.persoonskaart__gegevens dt {
    color: var(--kleur-tekst-hint);
    font-size: var(--fs-klein);
}

.persoonskaart__gegevens dd {
    margin: 0;
}

.persoonskaart__dossier {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    background: var(--zand-50);
    font-size: var(--fs-klein);
}

.persoonskaart__dossier span {
    color: var(--kleur-tekst-hint);
}

.persoonskaart__dossier--alert {
    background: var(--kleur-alert-licht, #fdeceb);
}

.persoonskaart__dossier--alert strong {
    color: var(--kleur-alert, #b3261e);
}

.persoonskaart__acties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
}

/* De X/Y in de lijstweergave. */
.dossierstand {
    font-variant-numeric: tabular-nums;
}

.dossierstand--alert {
    color: var(--kleur-alert, #b3261e);
    font-weight: 600;
}

@media (max-width: 640px) {
    .bulkbalk {
        position: static;
    }

    .bulkbalk__veld select {
        min-width: 0;
        width: 100%;
    }

    .lijstbalk {
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   Cliëntenlijst, tweede ronde: minder hoogte boven de lijst, meer scheiding

   Gemeten vóór deze wijziging: 1330 pixels scrollen voordat de eerste cliënt in
   beeld kwam. De tegels vielen in drie rijen (445px), de filterbalk was 334px.
   Drie ingrepen: compactere tegels, het filterblok in een inklapbaar paneel, en
   duidelijke afstand tussen de blokken zodat ze niet als één brok lezen.
   ------------------------------------------------------------------------- */

.kpi-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.6rem;
    padding: 0;
    margin-bottom: 1.25rem;
}

.kpi-grid--compact .kpi-kaart {
    padding: 0.75rem 0.85rem 0.7rem;
    gap: 0.1rem;
}

.kpi-grid--compact .kpi-kaart__cijfer {
    font-size: var(--fs-xl);
    line-height: 1.1;
}

.kpi-grid--compact .kpi-kaart__label {
    font-size: var(--fs-xs);
}

.kpi-grid--compact .kpi-kaart__voet {
    font-size: var(--fs-xs);
}

/* --- Het filterpaneel -------------------------------------------------- */

.filterpaneel {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    background: var(--vlak);
    margin-bottom: 1.25rem;
}

.filterpaneel__kop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
    list-style: none;
}

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

/* Eigen driehoekje, zodat het in beide richtingen dezelfde plek houdt. */
.filterpaneel__kop::before {
    content: "▸";
    display: inline-block;
    transition: transform var(--transitie);
    color: var(--kleur-tekst-hint);
}

.filterpaneel[open] .filterpaneel__kop::before {
    transform: rotate(90deg);
}

.filterpaneel__telling {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--merk-tekst);
    color: #fff;
    font-size: var(--fs-xs);
}

.filterpaneel .filterbalk,
.filterpaneel .actieve-filters {
    padding: 0 0.9rem;
}

.filterpaneel .filterbalk {
    padding-top: 0.2rem;
}

.filterpaneel .actieve-filters {
    margin-top: 0;
    padding-bottom: 0.9rem;
}

/* Het aandachtsblok staat tussen de tegels en de filters; wat lucht eromheen
   voorkomt dat de drie blokken als één muur lezen. */
.aandacht {
    margin-top: 0.25rem;
}

/* --- Kaart: rijker en minder somber ------------------------------------ */

.persoonskaart__pillen {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.persoonskaart__zorgvorm {
    font-size: var(--fs-xs);
    color: var(--kleur-tekst-hint);
}

.persoonskaart__gegevens dd strong {
    font-weight: 600;
}

.persoonskaart__gegevens dd small {
    color: var(--kleur-tekst-hint);
    margin-left: 0.25rem;
}

/* Voortgangsbalkje boven de dossierstand: één oogopslag in plaats van rekenen. */
.persoonskaart__balk {
    height: 4px;
    border-radius: 999px;
    background: var(--kleur-rand);
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.persoonskaart__balk span {
    display: block;
    height: 100%;
    background: var(--merk);
    border-radius: inherit;
}

.persoonskaart__dossier--alert .persoonskaart__balk span {
    background: var(--kleur-alert);
}

.persoonskaart__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.contactknop {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    background: var(--zand-50);
    font-size: var(--fs-klein);
    text-decoration: none;
    color: var(--kleur-tekst-zacht);
}

.contactknop:hover {
    border-color: var(--merk);
    color: var(--merk-tekst);
}

/* WhatsApp heeft een eigen herkenbare kleur; dat is hier geen decoratie maar
   herkenning van een dienst van buiten, net als een logo. */
.contactknop--whatsapp {
    border-color: #25d366;
    color: #128c4a;
}

.contactknop--whatsapp:hover {
    background: #e8f8ee;
    border-color: #128c4a;
    color: #0b6b38;
}

@media (max-width: 640px) {
    .kpi-grid--compact {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }

    .filterpaneel .filterbalk,
    .filterpaneel .actieve-filters {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

/* Kop en uitleg van het aandachtsblok op één regel.

   Ze stonden onder elkaar, en samen met de chips daaronder werd het blok het
   hoogste onderdeel boven de lijst — 302 pixels waar je langs moest voordat de
   eerste cliënt in beeld kwam. De uitleg is bijzin, geen alinea. Op een smal
   scherm valt hij alsnog onder de titel. Geldt ook voor het aandachtsblok op
   de medewerkerslijst, dat dezelfde opbouw heeft. */
.aandacht__kop {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    margin-bottom: 0.6rem;
}

.aandacht__kop .aandacht__uitleg {
    margin: 0;
    font-size: var(--fs-klein);
}

.aandacht__punt {
    padding: 0.3rem 0.6rem;
}

/* Op een telefoon stond er 1029 pixels boven de lijst, terwijl het scherm er
   812 hoog is: je zag dus nooit een cliënt zonder te scrollen. Twee oorzaken,
   allebei hier opgelost.

   De aandachtschips stonden op `flex: 1 1 100%`, dus elk een hele regel. Ze
   sizen nu naar hun inhoud en wikkelen met twee of drie op een rij. */
@media (max-width: 640px) {
    .aandacht__punt {
        flex: 0 1 auto;
    }

    /* En de tegels passen met drie op een rij in plaats van twee. Smaller dan
       dit gaat het label over te veel regels lopen en wint het niets meer. */
    .kpi-grid--compact {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .kpi-grid--compact .kpi-kaart {
        padding: 0.55rem 0.5rem;
    }

    .kpi-grid--compact .kpi-kaart__cijfer {
        font-size: var(--fs-lg);
    }

    /* De voetregel is op deze breedte bijzaak en kost twee regels per tegel. */
    .kpi-grid--compact .kpi-kaart__voet {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Cliëntkaart, derde ronde: gecentreerde kop, iconen, taken

   Naar het voorbeeld van de gebruiker: de kop met naam en status gecentreerd op
   een eigen vlak, de gegevens met een icoontje ervoor, en de contactacties als
   ronde icoonknoppen in plaats van tekstknoppen.
   ------------------------------------------------------------------------- */

.persoonskaart {
    padding: 0;
    overflow: hidden;
}

/* De kop krijgt een eigen vlak in de merkkleur, zacht genoeg om achtergrond te
   blijven. `--merk-zacht` verschilt per werkmaatschappij, dus de kaart blijft
   meekleuren met het bedrijf. */
.persoonskaart__kop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 1rem 0.85rem;
    background: var(--merk-zacht);
    border-bottom: 1px solid var(--kleur-rand-zacht, var(--kleur-rand));
    text-align: center;
}

.persoonskaart__avatar {
    width: 3.1rem;
    height: 3.1rem;
    font-size: var(--fs-basis);
    box-shadow: 0 0 0 3px var(--vlak);
}

.persoonskaart__naam {
    font-size: var(--fs-basis);
    font-weight: 600;
    text-align: center;
}

.persoonskaart__pillen {
    justify-content: center;
}

/* --- Gegevens met een icoontje ervoor -------------------------------- */

.persoonskaart__gegevens {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0.85rem 1rem 0;
    font-size: var(--fs-sm);
}

.persoonskaart__gegevens li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.persoonskaart__gegevens svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--kleur-tekst-hint);
}

.persoonskaart__gegevens span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.persoonskaart__gegevens small {
    display: block;
    color: var(--kleur-tekst-hint);
    font-size: var(--fs-xs);
}

/* --- Dossierstand en acties ----------------------------------------- */

.persoonskaart__dossier {
    margin: 0.85rem 1rem 0;
}

/* --- Contactknoppen als ronde iconen -------------------------------- */

.persoonskaart__contact {
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 1rem 0;
}

.contactknop {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.contactknop svg {
    width: 16px;
    height: 16px;
}

/* De actieknoppen vullen samen de breedte van de kaart: elk even breed, zodat
   de onderrand een rustige rij vormt in plaats van links uitgelijnde blokjes
   met een gat erachter. Geldt voor cliënt- en medewerkerkaarten allebei; ze
   hebben er drie, of vier als er een toestandsafhankelijke actie bij komt. */
.persoonskaart__acties {
    padding: 0.85rem 1rem 1rem;
    flex-wrap: nowrap;
}

.persoonskaart__acties > * {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

@media (max-width: 640px) {
    /* Op een telefoon blijven drie knoppen op één regel; ze worden alleen wat
       smaller. Altijd laten afbreken gaf één brede knop onder twee smalle, en
       dat leest als een fout in plaats van als een ontwerp. */
    .persoonskaart__acties > * {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        font-size: var(--fs-klein);
    }

    /* Komt er een vierde knop bij — de toestandsafhankelijke actie, die alleen
       verschijnt als je op een openstaand punt filtert — dan past een label als
       "Zorgplan opstellen" niet meer in zijn kolom. Alleen in dat geval twee
       rijen van twee. */
    .persoonskaart__acties:has(> :nth-child(4)) {
        flex-wrap: wrap;
    }

    .persoonskaart__acties:has(> :nth-child(4)) > * {
        flex: 1 1 45%;
    }

    /* Vangnet voor browsers zonder :has(): dan liever afgekapt met een beletsel
       dan tekst die over de rand van de knop loopt. */
    .persoonskaart__acties > * {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Telling in een knop, zoals "Taken 3". */
.knop__telling {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-left: 0.3rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--merk);
    color: #fff;
    font-size: var(--fs-2xs);
    line-height: 1;
}

.knop__telling--alert {
    background: var(--kleur-alert);
}

/* --- Het takenvenster ------------------------------------------------ */

.takenstand {
    display: flex;
    gap: 1.25rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.85rem;
    background: var(--zand-50);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.takenstand strong {
    font-size: var(--fs-basis);
    margin-right: 0.2rem;
}

.takenstand--alert {
    color: var(--kleur-alert);
}

.takenlijst {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.takenlijst__item {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--kleur-rand);
    border-left: 3px solid var(--merk);
    border-radius: var(--radius-sm);
}

.takenlijst__item--gedaan {
    border-left-color: var(--kleur-rand);
    opacity: 0.7;
}

.takenlijst__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.takenlijst__titel {
    font-weight: 600;
    font-size: var(--fs-tekst);
}

.takenlijst__item--gedaan .takenlijst__titel {
    text-decoration: line-through;
}

.takenlijst__regel {
    margin: 0.15rem 0 0;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-hint);
}

.takenlijst__omschrijving {
    margin: 0.3rem 0 0;
    font-size: var(--fs-klein);
}

/* --- Actieblok naast de weergaveknoppen ------------------------------ */

.lijstbalk__acties {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* "Meer" met een uitklappaneel; het scheelt vier knoppen in de balk. */
.meer-acties {
    position: relative;
}

.meer-acties > summary {
    list-style: none;
    cursor: pointer;
}

.meer-acties > summary::-webkit-details-marker {
    display: none;
}

/* Standaard verborgen, en pas zichtbaar als het menu open staat.

   Zonder de eerste regel bleef het paneel gewoon staan: een expliciete
   `display: flex` op een kind van een dichte <details> wint van het verbergen
   dat de browser zelf doet, en dan zweeft er een menu over de lijst. */
.meer-acties:not([open]) .meer-acties__paneel {
    display: none;
}

.meer-acties__paneel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 20;
    min-width: 12rem;
    max-width: calc(100vw - 2rem);
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
}

.meer-acties__paneel a {
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    text-decoration: none;
    color: inherit;
}

.meer-acties__paneel a:hover {
    background: var(--zand-50);
}

/* Géén `left: 0` op smalle schermen: de knop staat rechts in de balk, dus
   vanaf zijn linkerrand loopt een paneel van 12rem het scherm uit. Met
   `right: 0` hangt het paneel aan de rechterrand van de knop en past het. */

/* De zijbalk scrolt voortaan zelf, in plaats van de hele pagina langer te maken.

   Hij was `position: relative` en groeide mee met zijn inhoud: bij 44 menu-items
   werd hij 1912 pixels hoog op een venster van 910. Alles onder ongeveer de
   twintigste regel viel daarmee buiten beeld, en om erbij te komen moest je de
   página scrollen -- waarbij het menu meeschoof. Een gebruiker meldde daardoor
   dat de postkamer alleen via een cliënt bereikbaar was.

   Alleen boven 768px: daaronder is de zijbalk een uitschuiflade met
   `position: fixed`, en die regelt zijn eigen hoogte al.

   `min-height: 0` op de nav is geen sierregel: een flexitem krimpt standaard
   niet onder zijn inhoud, en zonder die regel scrolt het paneel niet maar
   groeit het alsnog door. */
@media (min-width: 1025px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }

    .sidebar__nav {
        overflow-y: auto;
        min-height: 0;
        /* Ruimte onderaan, zodat de laatste knop niet tegen de rand plakt. */
        padding-bottom: 0.5rem;
    }
}

/* Planning in bulk aanpassen (migratie 070)
   ------------------------------------------------------------------------ */

/* Doorlink naar het bulkscherm, naast het annuleerkruisje in de weekkalender.
   Verschijnt net als dat kruisje pas bij hover: de blokjes zijn krap en moeten
   in rust leesbaar blijven. */
.agenda__afspraak-reeks {
    position: absolute;
    top: 2px;
    right: 22px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    width: 16px;
    height: 16px;
    line-height: 15px;
    font-size: var(--fs-klein);
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 0;
    display: none;
}

.agenda__afspraak:hover .agenda__afspraak-reeks {
    display: block;
}

/* Potlood: één bezoek bewerken (fase A). Zelfde plek-logica als ⋮ en ×. */
.agenda__afspraak-bewerk {
    position: absolute;
    top: 2px;
    right: 41px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    width: 16px;
    height: 16px;
    line-height: 15px;
    font-size: var(--fs-xs);
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 0;
    display: none;
}
.agenda__afspraak:hover .agenda__afspraak-bewerk { display: block; }
.agenda__afspraak--afwezig { opacity: 0.55; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.06) 6px 8px) !important; }
.agenda__afspraak--afwezig .agenda__afspraak-tijd::after { content: ' · cliënt afwezig'; }
.agenda__afspraak--uitgevoerd .agenda__afspraak-tijd::after { content: ' ✓'; }
.agenda__daghead-link { color: inherit; text-decoration: none; display: block; }
.agenda__daghead-link:hover { text-decoration: underline; }
.agenda__afspraak--open { outline: 2px dashed var(--waarschuwing); outline-offset: -2px; }
.agenda__afspraak--open .agenda__afspraak-tijd::after { content: ' · open'; color: var(--waarschuwing); font-weight: 700; }
/* Open bezoeken en teamtaken op Mijn dag: elk op een eigen regel met de knop
   rechts ervan. .inline-formulier is `display: inline`, dus zonder dit
   liepen de regels in elkaar over. */
.kaart--gestapeld .inline-formulier { margin: var(--sp-1) 0; }
#open-bezoeken .inline-formulier, #teamtaken .inline-formulier, #ziekmelding .inline-formulier { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
#open-bezoeken .inline-formulier > span, #teamtaken .inline-formulier > span, #ziekmelding .inline-formulier > span { flex: 1 1 12rem; }
#open-bezoeken > a { display: block; margin-top: var(--sp-2); }

/* Het bezoek-popover (pakket 1): naast het blokje, op een telefoon onderaan. */
.bezoek-popover {
    position: absolute;
    z-index: 60;
    width: min(22rem, calc(100vw - 2 * var(--sp-4)));
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: var(--sp-4) var(--sp-5);
    color: var(--kleur-tekst);
}
.bezoek-popover[hidden] { display: none; }
.bezoek-popover__sluit { position: absolute; top: var(--sp-2); right: var(--sp-2); background: none; border: 0; font-size: var(--fs-lg); line-height: 1; cursor: pointer; color: var(--kleur-tekst-zacht); }
.bezoek-popover__tijd { margin: 0; font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); }
.bezoek-popover__client { margin: var(--sp-1) 0; font-size: var(--fs-lg); }
.bezoek-popover__regel { margin: 0; font-size: var(--fs-sm); }
.bezoek-popover__notitie { font-style: italic; }
.bezoek-popover__status { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--waarschuwing); }
.bezoek-popover__acties { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.bezoek-popover__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--kleur-rand-zacht); }
.bezoek-popover__form label { flex: 1 1 12rem; font-size: var(--fs-sm); }
.bezoek-popover__form input { width: 100%; margin-top: var(--sp-1); }
.bezoek-popover__form[hidden], .bezoek-popover [hidden] { display: none; }
.bezoek-popover__gevaar { color: var(--alert); }
.agenda__afspraak--gekozen { outline: 2px solid var(--merk); outline-offset: 1px; }
.agenda__afspraak--gemist { border-left-color: var(--alert) !important; box-shadow: inset 0 0 0 1px var(--alert); }
.agenda__afspraak--gemist .agenda__afspraak-tijd::after { content: ' · gemist'; color: var(--alert); font-weight: 700; }
.agenda__afspraak-notitie { display: block; font-style: italic; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 719px) {
    .bezoek-popover { position: fixed; left: var(--sp-4) !important; right: var(--sp-4); bottom: var(--sp-4); top: auto !important; width: auto; max-height: 80vh; overflow: auto; }
}

/* Filterbalk en klikbare legenda. */
.planning-filter { margin-bottom: var(--sp-4); }
.planning-filter > summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.planning-filter__form { margin-top: var(--sp-3); padding: var(--sp-4); background: var(--vlak); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius); }
.planning-filter__mw { border: 0; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.planning-filter__mw legend { font-weight: 600; margin-bottom: var(--sp-2); }
.planning-filter__vinkje { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); }
.planning-filter__rij { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.planning-filter__rij select { max-width: 16rem; }
.agenda-legenda__item { text-decoration: none; color: inherit; border-radius: var(--radius-pil); padding: 2px var(--sp-2); }
.agenda-legenda__item:hover { background: var(--merk-zacht); }
.agenda-legenda__item--actief { background: var(--merk-zacht); font-weight: 600; }

/* Planformulier: zoekvak boven een keuzelijst, duurknoppen, weekdagen. */
.select-zoek { margin-bottom: var(--sp-1); }
.duur-knoppen { display: inline-flex; gap: var(--sp-1); margin-top: var(--sp-1); flex-wrap: wrap; }
.weekdagen { border: 0; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.weekdagen[hidden] { display: none; }
.weekdagen legend { font-weight: 600; margin-bottom: var(--sp-1); width: 100%; }
.weekdagen__dag { display: inline-flex; align-items: center; gap: var(--sp-1); }
.client-context ul { margin: var(--sp-1) 0 0; padding-left: 1.2em; }

/* Mijn rooster als lijst (pakket 3) en de agenda-link. */
.rooster-dag--vandaag { border-left: 4px solid var(--merk); }
.rooster-dag__bezoek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--kleur-rand-zacht); }
.rooster-dag__bezoek--open { background: var(--waarschuwing-zacht, transparent); }
.agenda-link { display: block; word-break: break-all; font-size: var(--fs-sm); padding: var(--sp-2); background: var(--zand-50); border-radius: var(--radius-sm); }

/* Weekplanning en rooster afdrukken: alleen de agenda, op zijn breedst. */
@media print {
    .agenda-balk, .planning-filter, .inklapkaart, .bezoek-popover, .modal-overlay, .agenda-legenda__item::after { display: none !important; }
    .agenda-wrap { overflow: visible !important; box-shadow: none; }
    .agenda__head, .agenda__body { min-width: 0 !important; }
    .agenda__afspraak { box-shadow: none; border: 1px solid #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .agenda-legenda { page-break-inside: avoid; }
}

/* Dagbord (pakket 2): kolommen per medewerker, slepen. */
.dagbord .agenda__heads, .dagbord .agenda__cols { display: grid; grid-template-columns: repeat(var(--dagbord-kolommen, 5), minmax(9rem, 1fr)); }
.dagbord .agenda__cols .agenda__dag:nth-child(6), .dagbord .agenda__cols .agenda__dag:nth-child(7) { background-color: transparent; }
.dagbord .agenda__head, .dagbord .agenda__body { min-width: calc(3.5rem + var(--dagbord-kolommen, 5) * 9rem); }
.dagbord { overflow-x: auto; }
.dagbord__kop small { color: var(--kleur-tekst-zacht); }
.dagbord__kolom--vrij { background: var(--zand-50); }
.dagbord__kolom--doel { background: var(--merk-zacht); }
.dagbord__rooster { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, 0.035); pointer-events: none; }
.agenda__afspraak[draggable="true"] { cursor: grab; }
.agenda__afspraak--sleept { opacity: 0.5; cursor: grabbing; }
.rij--uit { opacity: 0.55; }

/* Werkplek Plannen (fase 3, 18-10-2026): rijen per medewerker, een week of een
   tijdlijn van één dag, en "Nog te plannen" ernaast. Slepen met pointer-events
   (muis en vinger): initWerkplek in app.js. */
.werkplek__balk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.werkplek__weergave { display: inline-flex; flex-wrap: wrap; gap: 2px; border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil); padding: 2px; background: var(--vlak); }
.werkplek__weergave a { padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pil); color: inherit; text-decoration: none; font-size: var(--fs-sm); }
/* Zelfde als een actief tabblad (.module-tabs__tab--actief): merk-tekst op het
   merk zelf was donker op donker. */
.werkplek__weergave a.is-actief { background: var(--merk-zacht); color: var(--merk-diep); font-weight: 600; }
.werkplek__filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
.werkplek { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--sp-4); align-items: start; }
@media (max-width: 1100px) { .werkplek { grid-template-columns: minmax(0, 1fr); } }
.werkplek__bord { overflow-x: auto; background: var(--vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); }
.werkplek__rij { display: grid; grid-template-columns: 11rem repeat(7, minmax(7rem, 1fr)); min-width: 60rem; border-bottom: 1px solid var(--kleur-rand-zacht); }
/* Een uur hoort minstens zo breed te zijn als een naam: anders staat er "08:…". */
.werkplek[data-weergave="dag"] .werkplek__rij { grid-template-columns: 11rem minmax(calc(var(--uren, 15) * 5.5rem), 1fr); min-width: calc(11rem + var(--uren, 15) * 5.5rem); }
.werkplek__blok .werkplek__tijd { display: none; }
.werkplek__rij:last-child { border-bottom: 0; }
.werkplek__rij--kop { background: var(--vlak-zacht); }
.werkplek__naam { position: sticky; left: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--sp-2) var(--sp-3); background: var(--vlak); border-left: 4px solid transparent; }
.werkplek__rij--kop .werkplek__naam { background: var(--vlak-zacht); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; }
.werkplek__naam small { color: var(--kleur-tekst-zacht); font-size: var(--fs-xs); }
.werkplek__cel { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 4.5rem; padding: var(--sp-1); border-left: 1px solid var(--kleur-rand-zacht); }
.werkplek__cel--kop { min-height: 0; padding: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; }
.werkplek__cel--kop a { color: inherit; }
.werkplek__cel--vrij { background: repeating-linear-gradient(135deg, var(--zand-50), var(--zand-50) 6px, var(--zand-100) 6px, var(--zand-100) 12px); }
.werkplek__cel--afwezig { background: var(--alert-licht); }
.werkplek .is-vandaag { box-shadow: inset 0 3px 0 var(--merk); }
.werkplek__label { font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); text-transform: uppercase; letter-spacing: 0.04em; }
.werkplek__bezoek { display: block; padding: 2px var(--sp-2); border: 1px solid transparent; border-radius: 6px; background: var(--zand-100); color: inherit; font-size: var(--fs-xs); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.werkplek__bezoek:hover { border-color: var(--kleur-rand); }
.werkplek__bezoek--conflict { background: var(--waarschuwing-licht); border-color: var(--waarschuwing-rand); }
.werkplek__bezoek--open { border-style: dashed; border-color: var(--info-rand); }
.werkplek__bezoek--laat { background: var(--alert-licht); border-color: var(--alert-rand); }
.werkplek__bezoek--klaar { color: var(--kleur-tekst-zacht); }
.werkplek__tijd { font-variant-numeric: tabular-nums; font-weight: 600; }
.werkplek__teken { color: var(--waarschuwing); }
.werkplek__som { margin-top: auto; font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); text-align: right; }
.werkplek__tijdlijn { position: relative; min-height: 3.5rem; border-left: 1px solid var(--kleur-rand-zacht);
    background-image: linear-gradient(to right, var(--kleur-rand-zacht) 1px, transparent 1px); background-size: calc(100% / var(--uren, 15)) 100%; }
.werkplek__tijdlijn--kop { min-height: 2rem; background-image: none; }
.werkplek__uur { position: absolute; top: var(--sp-2); padding-left: 3px; font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); font-variant-numeric: tabular-nums; }
.werkplek__tijdlijn .werkplek__label { position: absolute; right: var(--sp-2); top: 2px; }
.werkplek__rooster { position: absolute; top: 0; bottom: 0; background: var(--succes-licht); pointer-events: none; }
.werkplek__blok { position: absolute; top: var(--sp-2); bottom: var(--sp-2); display: flex; align-items: center; overflow: hidden; border-left: 4px solid; border-radius: 6px; }
.werkplek__blok .werkplek__bezoek { flex: 1; min-width: 0; background: transparent; }
.werkplek__blok .werkplek__bezoek--conflict { background: var(--waarschuwing-licht); }
.werkplek__reis { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); background: var(--info-rand); border-radius: 3px; pointer-events: auto; }
.werkplek__reis--krap { background: var(--alert); }
.werkplek__reis--legenda { position: static; display: inline-block; width: 1.5rem; transform: none; }
.werkplek__nog { position: sticky; top: var(--sp-4); max-height: calc(100vh - 7rem); overflow: auto; padding: var(--sp-3) var(--sp-4); background: var(--vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); }
.werkplek__nog h2 { font-size: var(--fs-md, 1rem); margin: 0 0 var(--sp-1); }
.werkplek__nog h3 { font-size: var(--fs-sm); margin: var(--sp-3) 0 var(--sp-2); }
.werkplek__lijst { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.werkplek__gat { display: block; padding: var(--sp-2); border: 1px dashed var(--waarschuwing-rand); border-radius: 6px; background: var(--waarschuwing-licht); color: inherit; font-size: var(--fs-sm); text-decoration: none; }
.werkplek__gat--open { border-color: var(--info-rand); background: var(--info-licht); }
.werkplek__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.werkplek__leeg { padding: var(--sp-4); }
.werkplek [data-sleep] { cursor: grab; touch-action: none; }
.werkplek [data-doel].is-doel { outline: 2px solid var(--merk); outline-offset: -2px; background-color: var(--merk-zacht); }
.werkplek__spook { position: fixed; z-index: 1000; pointer-events: none; max-width: 14rem; box-shadow: var(--schaduw-sm); }
.werkplek .is-gesleept { opacity: 0.4; }

/* Kaart van de route (fase 5): tegels van PDOK, punten en lijn als SVG. */
.routekaart { margin: var(--sp-3) 0 0; }
.routekaart__vlak { position: relative; overflow: hidden; border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); background: var(--zand-100); }
.routekaart__tegel { position: absolute; height: auto; max-width: none; }
.routekaart__laag { position: absolute; inset: 0; width: 100%; height: 100%; }
.routekaart__lijn { fill: none; stroke: var(--merk); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 6 4; }
.routekaart__punt { fill: var(--merk); stroke: #fff; stroke-width: 2; }
.routekaart__nummer { fill: #fff; font-size: 12px; font-weight: 700; text-anchor: middle; }
.routekaart__bron { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }

/* "Melding sturen? Ja / Nee" vóór een wijziging aan een bezoek (migratie 222). */
.client-melding-venster { max-width: 28rem; padding: var(--sp-6); border: 1px solid var(--kleur-rand); border-radius: var(--radius); background: var(--vlak); color: var(--kleur-tekst); box-shadow: var(--schaduw-sm); }
.client-melding-venster::backdrop { background: rgba(11, 37, 69, 0.35); }
.client-melding-venster h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.client-melding-venster p { margin: 0 0 var(--sp-4); }
/* Wijzigingen in de afspraken, in het portaal. */
.portaal-wijzigingen { margin: 0; padding: 0; list-style: none; }
.portaal-wijzigingen li { padding: var(--sp-2) 0; border-top: 1px solid var(--kleur-rand-zacht); }
.portaal-wijzigingen li:first-child { border-top: 0; }
.portaal-wijzigingen time { display: block; font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }

/* Taken (pakket 1/2): gedaan-kaart, kale lijst, doorgestreept. */
.kaart--gedaan { opacity: 0.6; }
.kaart--gedaan a { text-decoration: line-through; }
.lijst-kaal { list-style: none; margin: 0; padding: 0; }
.lijst-kaal li { padding: var(--sp-1) 0; border-top: 1px solid var(--kleur-rand-zacht); }
/* In een kaart met .paneel__kop erboven: dezelfde zijkanten als de kop. */
.paneel__kop + .lijst-kaal { padding: 0 1.1rem 0.85rem; }
.lijst-kaal li:first-child { border-top: 0; }

/* Mijn dossier: wat de medewerker nog moet aanleveren (migratie 169). Naam
   links, stand en knop rechts; op de telefoon schuift de knop eronder. */
.aanlever-lijst { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.aanlever-lijst__regel {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) 0; border-top: 1px solid var(--kleur-rand-zacht);
}
.aanlever-lijst__regel:first-child { border-top: 0; }
.aanlever-lijst__naam { flex: 1 1 12rem; font-weight: 600; }
.aanlever-lijst__regel .knop { margin-left: auto; }
.tekst-gedaan { color: var(--kleur-tekst-zacht); }
.tekst-gedaan a { text-decoration: line-through; }

/* Planbord: rijen medewerkers, kolommen dagen. */
.planbord-wrap { overflow-x: auto; padding: 0; }
.planbord { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.planbord th, .planbord td { vertical-align: top; border-bottom: 1px solid var(--kleur-rand-zacht); padding: var(--sp-2); }
.planbord thead th { position: sticky; top: 0; background: var(--vlak); z-index: 1; text-align: left; }
.planbord__naam { min-width: 12rem; white-space: nowrap; text-align: left; }
.planbord__naam small { display: block; font-weight: normal; color: var(--kleur-tekst-zacht); white-space: normal; }
.planbord__cel { min-width: 7rem; }
.planbord__cel--vrij { background: var(--zand-50); }
.planbord__vandaag { background: var(--merk-zacht); }
.planbord__bezoek {
    display: block;
    padding: 2px var(--sp-1);
    margin-bottom: 2px;
    border-left: 3px solid var(--merk);
    background: var(--vlak);
    color: var(--kleur-tekst);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--radius-sm);
}
.planbord__bezoek { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.planbord__bezoek:hover { background: var(--merk-zacht); }.planbord__bezoek--client_afwezig { opacity: 0.55; border-left-style: dashed; }
.planbord__bezoek--uitgevoerd { border-left-color: var(--succes); }
.planbord__tijd { font-variant-numeric: tabular-nums; color: var(--kleur-tekst-zacht); margin-right: var(--sp-1); }
.planbord__som { display: block; color: var(--kleur-tekst-zacht); text-align: right; }
.planbord__teveel { color: var(--alert); }

/* Planhulp: voorstellen als knoppen onder het planformulier. */
.planhulp__kandidaat {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: var(--fs-sm);
    margin-top: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    background: var(--vlak);
    color: var(--kleur-tekst);
    cursor: pointer;
}
.planhulp__kandidaat:hover { background: var(--merk-zacht); border-color: var(--merk); }
.planhulp__kandidaat:first-of-type { border-color: var(--merk); font-weight: 600; }
.reisregel { display: flex; align-items: center; gap: var(--sp-2); color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); padding: 0 var(--sp-4); }
.reisregel--krap { color: var(--alert); }

/* Een regel in het voorbeeldscherm die hard botst. Die staat standaard uit;
   de kleur is er zodat je hem niet per ongeluk alsnog aanvinkt zonder te zien
   waarom hij uitstond. */
.rij--conflict {
    background: var(--alert-zacht, #fdf1f1);
}

.rij--conflict td {
    opacity: 0.75;
}

/* De statuspillen met belemmeringen staan onder elkaar en zijn hele zinnen,
   geen labels van één woord. */
.rij--conflict .status-pil,
td > .status-pil + br + .status-pil {
    white-space: normal;
}

/* Voorletters naast de naam van een cliënt.
   Eerst stonden ze in een <small> met een eigen grootte en gewicht. Dat viel op
   als een ander lettertype: <small> brengt de browserstandaard `font-size:
   smaller` mee, en daar kwam nog een eigen 0.82em overheen — samen zo'n 0,66
   keer de naam. Ze horen bij de naam, dus erven ze nu alles van de naam.
   Alleen niet afbreken: "J." mag nooit alleen op de volgende regel eindigen. */
.persoon-voorletters {
    white-space: nowrap;
}

/* De weg terug, één vorm op elk scherm.
   Stond eerder op 33 detailschermen helemaal niet, en waar hij wél stond had
   hij twintig verschillende bewoordingen en soms wel en soms geen knopstijl.
   Bewust een link en geen knop: teruggaan is navigatie, geen handeling, en een
   knop naast "Opslaan" zet die twee ten onrechte op één lijn. */
.terugweg {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    padding: 0.25rem 0;
    font-size: var(--fs-tekst);
    font-weight: 500;
    color: var(--tekst-zacht, #6B6258);
    text-decoration: none;
}

.terugweg:hover,
.terugweg:focus-visible {
    color: var(--kleur-tekst, #2A2521);
    text-decoration: underline;
}

.terugweg__pijl {
    font-size: 1.05em;
    line-height: 1;
}

/* De pijl schuift mee bij hover — kleine bevestiging dat dit terug gaat en
   niet vooruit. Uit bij wie beweging heeft afgezet. */
@media (prefers-reduced-motion: no-preference) {
    .terugweg__pijl {
        transition: transform 0.12s ease-out;
    }

    .terugweg:hover .terugweg__pijl {
        transform: translateX(-2px);
    }
}

/* Het weekrooster voor de gemeente (dagbesteding)
   ------------------------------------------------------------------------
   Het raster van het Excel-blad: per dag een personeelsregel, daaronder
   Ochtend en Middag, genummerde plekken. Dezelfde partial als de PDF; de
   opmaak daar staat in de pdf-view. */
.weekrooster {
    width: 100%;
    min-width: 1100px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--fs-xs, 0.8rem);
}

.weekrooster th,
.weekrooster td {
    border: 1px solid var(--kleur-rand-zacht, #E6DFD5);
    padding: var(--sp-1) var(--sp-2);
}

.weekrooster__dagen th {
    background: var(--merk, #2F5249);
    color: var(--merk-tekst, #fff);
    text-align: center;
    font-size: var(--fs-sm, 0.85rem);
}

.weekrooster__dagen small {
    font-weight: normal;
    margin-left: var(--sp-1);
}

.weekrooster__bron {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 0 var(--sp-2);
    border-radius: var(--radius-pil, 999px);
    background: var(--vlak, #fff);
    color: var(--merk, #2F5249);
    font-size: var(--fs-2xs);
    font-weight: normal;
}

.weekrooster__personeel th {
    background: var(--zand-50, #F5F1EB);
    text-align: left;
    font-weight: normal;
    white-space: normal;
}

.weekrooster__label {
    font-weight: 600;
    color: var(--kleur-tekst-zacht, #6B6258);
    margin-right: var(--sp-1);
}

.weekrooster__leeg { color: var(--kleur-tekst-zacht, #9A8E7F); }

.weekrooster__dagdelen th {
    background: var(--zand-100, #EFE9E0);
    text-align: center;
    font-size: var(--fs-2xs);
    letter-spacing: 0.04em;
}

.weekrooster__nr {
    width: 2.4rem;
    text-align: right;
    color: var(--kleur-tekst-zacht, #9A8E7F);
    background: var(--zand-50, #F5F1EB);
}

.weekrooster__naam {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.weekrooster__naam--dicht {
    background: var(--waarschuwing-licht, #FBEFD3);
    color: var(--waarschuwing-donker, #7B5A16);
}

.weekrooster sup { font-size: var(--fs-2xs); color: var(--merk, #2F5249); }
.weekrooster b { color: var(--alert-donker, #B0412F); }

/* De verantwoording van de dagbesteding (per cliënt, per periode)
   ------------------------------------------------------------------------ */
.verantwoording {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: var(--fs-sm, 0.85rem);
}

.verantwoording th,
.verantwoording td {
    border: 1px solid var(--kleur-rand-zacht, #E6DFD5);
    padding: var(--sp-1) var(--sp-2);
    vertical-align: middle;
}

.verantwoording thead th {
    background: var(--zand-100, #EFE9E0);
    text-align: left;
    font-size: var(--fs-xs, 0.72rem);
}

.verantwoording th.num,
.verantwoording td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.verantwoording small { color: var(--kleur-tekst-zacht, #6B6258); }
.verantwoording__kern { background: var(--zand-50, #F5F1EB); font-weight: 600; }
.verantwoording__over { color: var(--alert-donker, #B0412F); font-weight: 600; }
.verantwoording__let-op { color: var(--waarschuwing-donker, #7B5A16); font-style: italic; }
.verantwoording__leeg { color: var(--kleur-tekst-zacht, #9A8E7F); font-style: italic; text-align: center; }
.verantwoording tfoot th { background: var(--zand-50, #F5F1EB); text-align: left; }

/* Het weekpatroon van een dagbestedingscliënt (ma-vr x ochtend/middag)
   ------------------------------------------------------------------------ */
.weekpatroon {
    border-collapse: collapse;
    font-size: var(--fs-sm, 0.85rem);
}

.weekpatroon th,
.weekpatroon td {
    border: 1px solid var(--kleur-rand-zacht, #E6DFD5);
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
    vertical-align: middle;
}

.weekpatroon thead th {
    background: var(--zand-100, #EFE9E0);
    font-size: var(--fs-xs, 0.72rem);
}

.weekpatroon tbody th,
.weekpatroon td:first-child {
    text-align: left;
    white-space: nowrap;
}

.weekpatroon__sub th {
    font-weight: normal;
    color: var(--kleur-tekst-zacht, #6B6258);
    padding-top: 0;
}

/* `label.weekpatroon__vak`, niet `.weekpatroon__vak`: in het bewerkformulier
   is het vak een <label> dat de hele cel moet vullen (display: block), maar
   in de lijst per cliënt staat dezelfde klasse op de <td> zelf. Een td met
   display: block valt uit de tabel en stapelt alle dagdelen in de eerste
   kolom -- zo stond het plaatsingenoverzicht in productie. */
label.weekpatroon__vak {
    display: block;
    padding: var(--sp-2);
    cursor: pointer;
}

.weekpatroon__vak input { width: 1.25rem; height: 1.25rem; }

/* Presentie en vervoer van één cliënt per maand (dagbesteding/maand_client). */
.presentie-snel {
    border: 1px solid var(--kleur-rand-zacht);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-4);
    display: grid;
    gap: var(--sp-3);
}

.presentie-snel[hidden] { display: none; }

.presentie-maand {
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.presentie-maand th,
.presentie-maand td {
    border-bottom: 1px solid var(--kleur-rand-zacht);
    padding: var(--sp-1) var(--sp-3);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.presentie-maand td input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }

/* Een lijn boven elke maandag: zo lees je de maand per week, zoals het briefje. */
.presentie-maand__weekbegin th,
.presentie-maand__weekbegin td { border-top: 2px solid var(--kleur-rand); }

.presentie-maand tfoot th,
.presentie-maand tfoot td { font-weight: 600; border-bottom: 0; }

.presentie-weken {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.weekpatroon--lijst td.weekpatroon__vak { padding: var(--sp-1) 0; text-align: center; cursor: default; }
.weekpatroon--lijst td.weekpatroon__vak--aan { background: var(--merk-zacht, #E4EEEA); color: var(--merk, #2F5249); font-weight: 700; }
.weekpatroon__notitie { display: block; color: var(--kleur-tekst-zacht, #6B6258); font-weight: normal; }

/* Het cliëntdossier per onderdeel
   ------------------------------------------------------------------------
   Lijst links met de stand per onderdeel, één onderdeel tegelijk rechts. Het
   dossier telt 93 velden; die passen niet zinvol op één scherm, en één
   opslaanknop voor alles maakte wegklikken eng. */
.dossier-indeling {
    display: grid;
    grid-template-columns: minmax(200px, 250px) 1fr;
    gap: 1.25rem;
    align-items: start;
    /* Het paneel rechts is een .formulier-kaart van hooguit 900px; zonder deze
       grens liep het raster (en de knoppenkop erboven) breder door dan het
       paneel en stonden de knoppen buiten de lijn van het formulier. */
    max-width: calc(250px + 1.25rem + 900px);
}
.dossier-koptekst--intake {
    max-width: calc(250px + 1.25rem + 900px);
}
/* Een rasterkind is standaard minstens zo breed als zijn inhoud; een tabel
   met een breed formulier drukte het paneel dan buiten het raster. Met
   min-width: 0 blijft het paneel in zijn kolom en scrolt een te brede tabel
   binnen zijn kaart. */
.dossier-indeling__paneel {
    min-width: 0;
}
.dossier-indeling__paneel .kaart > table,
.dossier-indeling__paneel .kaart > .tabel-scroll {
    max-width: 100%;
}
.dossier-indeling__paneel .kaart {
    overflow-x: auto;
}

/* Tablet: een tabel van zeven kolommen (gemachtigden, indicaties) past niet
   in de kolom en schoof zijwaarts. Als kaartjes: elke rij een blokje, elke
   cel een regel met het kolomkopje ervoor (data-label). De uitklaprij met het
   bewerkformulier volgt gewoon zijn rij. Formulierrijen gaan van drie naar
   twee velden naast elkaar; 160px per veld was te smal om in te typen. */
@media (max-width: 900px) {
    /* table.tabel--kaartjes en niet .tabel--kaartjes: zo winnen deze regels van
       een eigen tabelklasse (.presentietabel td) die later in dit bestand staat. */
    table.tabel--kaartjes thead { display: none; }
    table.tabel--kaartjes,
    table.tabel--kaartjes tbody,
    table.tabel--kaartjes tr,
    table.tabel--kaartjes td { display: block; width: 100%; box-sizing: border-box; }
    table.tabel--kaartjes tr:not(.rij--bewerken) {
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius);
        padding: var(--sp-2) var(--sp-3);
        margin-bottom: var(--sp-3);
        background: var(--vlak);
    }
    table.tabel--kaartjes td {
        display: flex;
        gap: var(--sp-3);
        align-items: baseline;
        padding: var(--sp-1) 0;
        border: none;
        white-space: normal;
    }
    table.tabel--kaartjes td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 6.5rem;
        font-size: var(--fs-xs);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--kleur-tekst-hint);
    }
    table.tabel--kaartjes td:not([data-label]) {
        flex-wrap: wrap;
        gap: var(--sp-2);
        padding-top: var(--sp-2);
    }
    table.tabel--kaartjes tr.rij--bewerken { margin-bottom: var(--sp-3); }
    table.tabel--kaartjes tr.rij--bewerken td { padding: 0; display: block; }

    .dossier-indeling__paneel .formulier-rij > div {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    /* Op een smal scherm wordt de lijst een blok bovenaan in plaats van een
       kolom van 200px die de velden platdrukt. */
    .dossier-indeling {
        grid-template-columns: 1fr;
    }
}

.dossier-indeling__lijst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 1rem;
}

/* De wikkel om de stappen bestaat alleen voor het smalle scherm; op desktop
   doet hij niets en zijn de stappen gewone kinderen van de kolom. */
.dossier-indeling__strook {
    display: contents;
}

@media (max-width: 1024px) {
    /* Op een tablet wordt de lijst een strook die zijwaarts schuift, geen
       blok van dertien regels boven het formulier -- dan scrol je bij elke
       stap eerst langs de hele lijst. De stand per onderdeel blijft aan het
       merkteken te zien; de teller ("3 velden leeg") past er niet bij. */
    .dossier-indeling__lijst {
        position: static;
        gap: var(--sp-1);
        /* Een rasterkind is minstens zo breed als zijn inhoud, en de strook
           eronder is 3000px aan stappen: zonder deze grens werd de hele
           pagina zo breed. Met min-width: 0 blijft de lijst in zijn kolom
           en scrolt de strook binnen zichzelf. */
        min-width: 0;
    }
    .dossier-indeling__strook {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    /* Het voortgangsblok stond ín de strook als eerste "tab" en was weg zodra
       de actieve stap in beeld stond. Nu één regel erboven: "3 stappen af ·
       8 nog open — Nog open: stap 3, 5, 7". De balk en de kernveldentelling
       vallen weg, die staan in de stand per stap al. */
    .dossier-indeling__lijst .dossier-voortgang {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--sp-3);
        margin-bottom: 0;
        padding: var(--sp-2) var(--sp-3);
    }
    .dossier-indeling__lijst .dossier-voortgang__balk,
    .dossier-indeling__lijst .dossier-voortgang > small:not(.dossier-voortgang__open) {
        display: none;
    }
    .dossier-indeling__lijst .dossier-voortgang__open {
        display: inline;
        margin-top: 0;
    }

    /* De kop erboven ook compacter: kleinere titel, minder wit eronder. */
    .dossier-koptekst--intake {
        margin-bottom: var(--sp-3);
    }
    .dossier-koptekst--intake h1 {
        font-size: var(--fs-lg);
        margin-bottom: 0;
    }

    .dossier-indeling__lijst .dossier-onderdeel {
        flex: none;
        align-items: center;
        white-space: nowrap;
        scroll-snap-align: start;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 8px 8px 0 0;
        padding-top: var(--sp-3);
        padding-bottom: var(--sp-3);
    }

    .dossier-indeling__lijst .dossier-onderdeel--actief {
        border-bottom-color: var(--organisatie-kleur, #2F5249);
    }

    /* Het kopje boven de losse modules: in de strook een verticale scheiding
       met alleen het woord, de uitleg past er niet. */
    .dossier-indeling__lijst .dossier-indeling__kopje {
        flex: none;
        align-self: center;
        margin: 0 var(--sp-2);
        padding: 0 0 0 var(--sp-3);
        border-top: none;
        border-left: 1px solid var(--kleur-rand);
        white-space: nowrap;
    }
    .dossier-indeling__lijst .dossier-indeling__kopje small {
        display: none;
    }

    .dossier-indeling__lijst .dossier-onderdeel__tekst small {
        display: none;
    }
}

.dossier-voortgang {
    background: var(--vlak, #fff);
    border: 1px solid var(--zand-200, #E6DFD5);
    border-radius: var(--radius, 10px);
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.5rem;
    font-size: var(--fs-sm);
}

.dossier-voortgang small {
    color: var(--tekst-zacht, #6B6258);
}
.dossier-voortgang__open {
    display: block;
    margin-top: var(--sp-1);
    font-weight: 600;
    color: var(--merk-tekst);
}

.dossier-voortgang__balk {
    height: 6px;
    background: var(--zand-200, #E6DFD5);
    border-radius: 3px;
    margin: 0.45rem 0 0.3rem;
    overflow: hidden;
}

.dossier-voortgang__balk span {
    display: block;
    height: 100%;
    background: var(--organisatie-kleur, #2F5249);
    border-radius: 3px;
}

.dossier-onderdeel {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    text-decoration: none;
    color: var(--kleur-tekst, #2A2521);
    font-size: var(--fs-tekst);
    line-height: 1.3;
}

.dossier-onderdeel:hover {
    background: var(--zand-50, #F5F1EB);
}

.dossier-onderdeel--actief {
    background: var(--zand-100);
    border-left-color: var(--merk);
    font-weight: 600;
}

/* Stapchip (richting D, 05-10-2026, naar de mockup richting-d.html): het
   stapnummer -- of zonder nummer het teken ✓ ● – -- in een vakje van 24px
   dat de stand kleurt. Groen af, amber open, de merkkleur voor het
   onderdeel dat open staat in het paneel, grijs zonder meter. Het losse
   kleine nummer vóór de naam is daarmee weg. */
.dossier-onderdeel__merk {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-family: var(--lettertype-kop);
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--zand-100);
    color: var(--kleur-tekst-zacht);
}

.dossier-onderdeel--compleet .dossier-onderdeel__merk {
    background: var(--succes-licht);
    color: var(--succes-donker);
}

.dossier-onderdeel--open .dossier-onderdeel__merk {
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing-donker);
}

/* Zoals het actieve item in de zijbalk: --merk-tekst gevuld, witte tekst
   (de lichte merkkleuren halen op wit geen contrast). */
.dossier-onderdeel--actief .dossier-onderdeel__merk {
    background: var(--zij-actief-vlak);
    color: var(--zij-actief-tekst);
}

/* Tekst alleen voor een schermlezer ("Stap 3: ") naast de chip, die
   aria-hidden is. */
.visueel-weg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.dossier-onderdeel__tekst small {
    display: block;
    font-weight: 400;
    font-size: var(--fs-klein);
    color: var(--waarschuwing, #C2683D);
}

.dossier-onderdeel--extern {
    color: var(--tekst-zacht, #6B6258);
}

/* Kopje boven de losse modules onder de intakestappen in de lijst links. */
.dossier-indeling__kopje {
    margin: var(--sp-4) 0 var(--sp-1);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--kleur-rand-zacht);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kleur-tekst-zacht);
}
.dossier-indeling__kopje small {
    display: block;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
/* Bij de instellingen begint de lijst met een kopje (Organisatie, …); de
   scheidingslijn is er om groepen te scheiden, niet om de lijst te openen. */
.dossier-indeling__strook > .dossier-indeling__kopje:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
@media (max-width: 1024px) {
    .dossier-indeling__strook > .dossier-indeling__kopje:first-child {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

.dossier-onderdeel--extern .dossier-onderdeel__tekst small {
    color: var(--tekst-zacht, #9A8E7F);
}

/* Het stapnummer van intakeformulier 8 vóór de naam van het onderdeel. Klein
   en gedempt: het is een verwijzing naar het papier, niet de rangorde in de
   lijst -- leefsituatie heeft er geen en staat er gewoon onder. */
.dossier-onderdeel__stap {
    display: inline-block;
    min-width: 1.3em;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--tekst-zacht, #9A8E7F);
}

.dossier-paneel__stap {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.1em 0.5em;
    border-radius: var(--radius-xs);
    background: var(--zand-100);
    color: var(--kleur-tekst-zacht);
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Op "Nieuwe cliënt" staat de lijst er al, maar de cliënt bestaat nog niet:
   niets is klikbaar. Gedempt, en geen aanwijshand. */
.dossier-onderdeel--wacht {
    color: var(--tekst-zacht, #9A8E7F);
    cursor: default;
}

.dossier-onderdeel--wacht:hover {
    background: transparent;
}

/* Vorige links, opslaan en verder rechts. */
.dossier-indeling__acties .knop--secundair:first-child {
    margin-right: auto;
}

/* Velden op een raster van twaalf kolommen, zodat de breedte van een veld iets
   zegt over wat erin hoort. Elk veld was even breed: een postcode van zes
   tekens kreeg net zoveel ruimte als een straatnaam, en dat leest als een
   willekeurig ingedeeld formulier. Nu is een gewoon veld een halve regel, een
   datum of een bedrag een derde, en een textarea of een rij vinkjes de volle
   breedte. Welk veld wat krijgt bepaalt `_veld.php` uit het soort veld.

   Waarom twaalf kolommen en niet gewoon drie: bij een vaste driedeling wordt
   een datumveld smaller dan zijn eigen inhoud zodra het paneel krimpt — dat was
   de reden dat hier eerder twee kolommen stonden. Met twaalf kan de terugval
   per breedteklasse: een kort veld wordt hieronder eerst een half veld, en pas
   op een telefoon een hele regel.

   `> *` en niet `.formulier-veld`: een paar schermen zetten hun eigen div's in
   het raster, en die hoorden een halve regel te blijven zoals voorheen. */
.formulier-raster {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-3);
    align-items: start;
}

.formulier-raster > * {
    grid-column: span 6;
    min-width: 0;
}

/* Het invoervak staat op dezelfde hoogte als dat van de buurman, ook als het
   ene label één regel is en het andere drie ("Waarschuwen bij verschil
   incheck/rapportage vanaf (minuten)"). Zonder dit begint elk vak onder zijn
   eigen label en staat een rij van drie velden als een trap.
   `subgrid` laat de velden de rijen van het raster delen, dus label, vak en
   hint liggen per rij op één lijn. Een afgekeurd veld heeft een regel extra
   (de foutmelding), vandaar de vierde rij -- `_veld.php` zet die klasse zelf.
   Browsers zonder subgrid (Chrome < 117) houden het oude gedrag; dat is de
   uitlijning missen, niet een kapot scherm. */
/* Een paar getallen naast elkaar: de stand van een koppeling (reistijd,
   tekstassistent) of de uitkomst van een proef. Stond eerder als zin in een
   alinea -- "vandaag 0 van maximaal 500 aanroepen, in totaal 8" -- en dan
   leest niemand het. Geen tegels met randen en schaduwen: een label erboven,
   het getal eronder, meer heeft het niet nodig. */
.kerngetallen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-8);
    margin: var(--sp-4) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--kleur-rand-zacht);
}

.kerngetallen > div {
    min-width: 0;
}

.kerngetallen dt {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kleur-tekst-zacht);
}

.kerngetallen dd {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    color: var(--kleur-tekst);
}

.kerngetallen__van {
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

/* Een naam wijzigen ín een tabelcel (de kiosktablets): veld en knop naast
   elkaar. Een invoerveld vult hier anders de hele cel -- `size` telt niet,
   want elke input krijgt width:100% -- en dan valt de knop eronder en wordt
   elke rij twee regels hoog. */
.naamveld {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

.naamveld input {
    flex: 1 1 7rem;
    min-width: 0;
}

/* De uitkomst van een proefberekening staat op zichzelf, niet onder een
   streep als vervolg op de kaart erboven. */
.kerngetallen--uitkomst {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--succes-rand, var(--kleur-rand));
    border-radius: var(--radius);
    background: var(--succes-licht, var(--zand-50));
}

@supports (grid-template-rows: subgrid) {
    .formulier-raster > .formulier-veld {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        align-content: start;
    }

    .formulier-raster > .formulier-veld--fout {
        grid-row: span 4;
    }

    /* Een subgrid maakt geen rijen bij: wat er na de derde (bij een fout de
       vierde) zichtbare regel in een veld staat, komt bóvenop de laatste
       rij te liggen. Zo lag op het bezoekscherm "+ Handeling" over het
       invoervak, stonden de twee taakvinkjes door elkaar en verdwenen de
       snelle notities onder de tekstassistent (livetest 6 oktober 2026).
       Zo'n veld is dus weer een gewone kolom; de uitlijning met de buurman
       speelt bij zo'n samengesteld veld toch niet. Verborgen velden en
       sjablonen tellen niet mee, die tekenen niets. */
    .formulier-raster > .formulier-veld:not(.formulier-veld--fout):has(> :nth-child(4 of :not(input[type="hidden"], template))),
    .formulier-raster > .formulier-veld--fout:has(> :nth-child(5 of :not(input[type="hidden"], template))) {
        display: flex;
        grid-row: auto;
    }

    /* Een vinkje is zijn eigen label: het hoort op de regel van de
       invoervakken ernaast en niet op die van hún labels, waar het los boven
       de rij zweefde (gemeten: 27px hoger dan het vak ernaast). */
    .formulier-raster > .formulier-veld > label:has(input[type="checkbox"]):first-child {
        grid-row: 2;
    }

    /* Een veld is nu een grid en niet langer een flex-kolom, en daarin rekt
       een knop over de volle breedte uit -- de opslaanknop werd een paarse
       balk van rand tot rand. `align-self` regelt in een grid de verticale
       as, dus die hield hem niet tegen; `justify-self` wel. */
    .formulier-raster > .formulier-veld > .knop {
        justify-self: start;
    }

    .formulier-raster > .formulier-veld:last-child > .knop:first-child {
        justify-self: end;
    }
}

.formulier-veld--kort { grid-column: span 4; }
.formulier-veld--half { grid-column: span 6; }
.formulier-veld--breed { grid-column: 1 / -1; }

/* Onder deze breedte is een derde van het paneel smaller dan een datumveld
   nodig heeft; dan liever twee even brede kolommen dan drie te smalle. */
@media (max-width: 1200px) {
    .formulier-veld--kort { grid-column: span 6; }
}

@media (max-width: 640px) {
    .formulier-raster > * { grid-column: 1 / -1; }
    /* Een kort veld (postcode, huisnummer, datum, bedrag) blijft ook op een
       telefoon een half veld: een vak van 265px voor "12A" leest als een
       willekeurig formulier, en postcode + huisnummer horen naast elkaar. */
    .formulier-raster > .formulier-veld--kort { grid-column: span 6; }
}

/* Eén veld: label, invoer, hint, fout — altijd met dezelfde tussenruimte. De
   wisselende witruimte was juist de klacht, dus die staat hier één keer en komt
   uit de 4px-schaal bovenaan dit bestand. */
.formulier-veld {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    /* Een ankerlink uit de foutmelding mag het veld niet onder de plakkende
       knoppenbalk parkeren. */
    scroll-margin-block: var(--sp-8);
}

.formulier-veld > label {
    margin-bottom: 0;
}

/* Vinkjes uitgezonderd: die zijn 1,15rem breed en werden hier honderd procent,
   dus een enkel vakje besloeg de halve regel. */
.formulier-veld input:not([type="checkbox"]):not([type="radio"]),
.formulier-veld select,
.formulier-veld textarea {
    width: 100%;
}

/* En dan alsnog de maat teruggeven: `.checkbox-inline input` zet de breedte op
   auto, en dan valt een vakje terug op de dertien pixels van de browser —
   kleiner dan elk ander vakje in de applicatie. */
.formulier-veld .checkbox-inline input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
}

.veld-hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--kleur-tekst-zacht);
}

.formulier-veld .veld-fout {
    margin: 0;
}

.formulier-veld--fout > label {
    color: var(--alert);
}

/* Een kernveld dat nog niets bevat krijgt een steviger label dan de rest; het
   merkje ernaast zegt waarom. Zacht en niet rood: leeg is geen fout, het is
   werk dat nog moet gebeuren. */
.formulier-veld--leeg > label {
    color: var(--kleur-tekst);
}

.veld-merk {
    display: inline-block;
    margin-left: var(--sp-1);
    padding: 0 var(--sp-2);
    border-radius: var(--radius-pil);
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
}

/* Spring je via "nog leeg" of via de foutmelding naar een veld, dan licht het
   op. Zonder dat sprong de pagina en mocht je zelf zoeken waarheen. */
.formulier-veld input:target,
.formulier-veld select:target,
.formulier-veld textarea:target {
    border-color: var(--merk-tekst);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 30%, transparent);
}

.vinkjes-rij {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
}

/* Kern en aanvulling als twee omkaderde groepen. De indelingsklassen kenden dat
   onderscheid al — het voedde de voortgangsmeter — maar op het formulier zelf
   was het onzichtbaar, en dat was precies de klacht: je zag niet waar het ene
   onderwerp ophield. Een fieldset met legend, zodat een schermlezer de kop bij
   elk veld in de groep noemt. */
.formulier-groep {
    border: 1px solid var(--kleur-rand-zacht);
    border-radius: var(--radius);
    background: transparent;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    margin: 0 0 var(--sp-4);
}

.formulier-groep > legend {
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kleur-tekst-zacht);
}

/* De aanvulling op een zachte ondergrond: in één blik zie je welk deel moet en
   welk deel mag. */
.formulier-groep--aanvullend {
    background: var(--zand-100);
}

.formulier-groep--letop {
    border-color: var(--alert);
}

/* De samenvatting boven een afgekeurd formulier: per veld één regel met een
   link erheen. */
.formulier-fouten__kop {
    margin: 0 0 var(--sp-2);
    font-weight: 600;
}

.formulier-fouten__lijst {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin: 0;
    padding-left: var(--sp-5);
}

.formulier-fouten__lijst a {
    font-weight: 600;
}

.dossier-indeling__acties {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--kleur-rand-zacht);
}

/* De opslaanknop plakt onderaan zolang het formulier in beeld is. Hij stond
   onder het laatste veld, en op een onderdeel van twintig velden betekende dat:
   eerst terugscrollen voor je kunt opslaan. De negatieve marges trekken de balk
   tot in de rand van de kaart, anders schuift de inhoud er naast langs.

   Alleen op het formulier dat lang kan worden. Zet je dit op elk formulier van
   een pagina, dan stapelen de balken zich onderin op. */
/* De opslaanknop van een blok dat nog niet is opgeslagen, na "Annuleren" op
   de vraag bij weglopen (app.js, initOnopgeslagenWacht): hier moet je klikken. */
.knop--aandacht {
    outline: 3px solid var(--waarschuwing);
    outline-offset: 3px;
}

.dossier-indeling__acties--kleef,
.intake-acties--kleef {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--vlak);
    margin-left: calc(-1 * var(--sp-6));
    margin-right: calc(-1 * var(--sp-6));
    padding-left: var(--sp-6);
    padding-right: var(--sp-6);
    padding-bottom: var(--sp-3);
    box-shadow: 0 -8px 14px -10px rgba(58, 46, 34, 0.28);
}

/* Het cliëntportaal: ouderen en mantelzorgers. Grotere tekst en de volle
   tikmaat, ongeacht het scherm. De klasse komt van de layout (rol Client). */
body.rol-client { font-size: 17px; }
body.rol-client .knop { min-height: 44px; padding: 0.55rem 1rem; font-size: 0.95rem; }
body.rol-client .knop--klein { min-height: 36px; font-size: 0.85rem; }
body.rol-client input, body.rol-client select, body.rol-client textarea { min-height: 44px; font-size: 1rem; }
body.rol-client .kaart { padding: 1.25rem 1.4rem; }
body.rol-client .layout__inhoud { max-width: 1100px; }

/* Telefoon: de compacte maten van het instrument zijn voor een muis. Met een
   duim moet een knop of veld 44px hoog zijn (PRODUCT.md: de zorgverlener
   bedient dit met één hand), dus hier terug naar de volle tikmaat. */
@media (max-width: 640px) {
    .knop {
        min-height: 44px;
        padding: 0.55rem 1rem;
        font-size: var(--fs-tekst);
    }
    /* Telefoonronde 05-10-2026: op het bezoekscherm waren de vinkjes onder
       de rapportage 27px hoog en "Kan ik niet — afstaan" op Mijn dag 24px.
       Elk label met een vinkje of keuzerondje erin, elke uitklapknop en de
       terug-link krijgen de volle tikmaat, ook zonder .checkbox-label. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        min-height: 44px;
    }
    label > input[type="checkbox"],
    label > input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
        min-height: 0;
        flex-shrink: 0;
    }
    main summary {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    .terugweg,
    .velden-schakel button,
    .snelnotities__open,
    .week-voortgang__open,
    .veiligheidsbanner__link,
    .volledig__mist a,
    .paneel__kop > a:not(.knop) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .dossier-tabs__tab,
    .module-tabs__tab {
        min-height: 44px;
    }
    .sidebar__sub-knop {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
    input, select, textarea {
        min-height: 44px;
        font-size: var(--fs-basis);
        padding: 0.55rem 0.75rem;
    }
    .sidebar__nav a {
        padding: 0.65rem 0.8rem;
        font-size: var(--fs-tekst);
    }
}

/* Telefoon: vier knoppen naast elkaar werden vier smalle blokken van 99px
   hoog met de tekst over drie regels, en "Overslaan" stak buiten het scherm.
   Nu twee rijen: boven Vorige en Overslaan (allebei weg zonder opslaan),
   onder Opslaan en, het breedst, Opslaan-en-verder. De primaire knop is zo
   de grootste tikvlek, en Overslaan staat niet meer naast hem. */
@media (max-width: 640px) {
    .dossier-indeling__acties--kleef {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }
    .dossier-indeling__acties--kleef .knop {
        white-space: nowrap;
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }
    .dossier-indeling__acties--kleef .knop--secundair:first-child { order: 0; flex: 1 1 40%; }
    .dossier-indeling__acties--kleef .knop--tekst { order: 1; flex: 1 1 40%; text-align: center; }
    .dossier-indeling__acties--kleef .knop--secundair:not(:first-child) { order: 2; flex: 1 1 35%; }
    .dossier-indeling__acties--kleef .knop--primair { order: 3; flex: 2 1 55%; }

    /* De kop erboven: de volledige naam in h1-grootte nam drie regels. */
    .dossier-koptekst--intake h1 {
        font-size: var(--fs-md);
    }
}

/* De knoppenrij van een stap-voor-stapscherm (afwezigheid, voeding,
   plaatsingen). De stappenbalk die hier stond is weg: de intake van cliënt
   én medewerker loopt via de lijst links in het dossierscherm.
   ------------------------------------------------------------------------ */
.intake-acties {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--kleur-rand-zacht);
}

.intake-acties__rechts {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Overslaan is een geldige keuze en geen fout, maar het mag niet even zwaar
   wegen als opslaan — vandaar een tekstknop naast een gevulde knop. */
.knop--tekst {
    background: none;
    border: none;
    padding: 0.35rem 0.2rem;
    color: var(--tekst-zacht, #6B6258);
    font-size: var(--fs-sm);
    cursor: pointer;
    text-decoration: underline;
}

.knop--tekst:hover {
    color: var(--kleur-tekst, #2A2521);
}

@media (max-width: 640px) {
    .intake-acties {
        flex-direction: column;
        align-items: stretch;
    }

    .intake-acties__rechts {
        justify-content: space-between;
    }
}

/* ---------- Systeeminfo ----------
   Drie kolommen: wat het is, wat het nu is, en of dat goed is. De statuspil
   staat rechts uitgelijnd zodat je met één blik langs de kolom kunt scannen
   in plaats van elke regel te moeten lezen. */
.systeeminfo-tabel {
    width: 100%;
    border-collapse: collapse;
}

.systeeminfo-tabel th,
.systeeminfo-tabel td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--kleur-rand-zacht, #e4e7eb);
    vertical-align: top;
    text-align: left;
}

.systeeminfo-tabel tr:last-child th,
.systeeminfo-tabel tr:last-child td {
    border-bottom: 0;
}

.systeeminfo-tabel th {
    width: 15rem;
    font-weight: 600;
}

.systeeminfo-tabel td small {
    color: var(--kleur-tekst-zacht, #667);
}

.systeeminfo-tabel__stand {
    width: 6.5rem;
    text-align: right;
    white-space: nowrap;
}

/* Onder de 640px past de derde kolom er niet meer naast: label boven,
   waarde eronder, stand rechts van het label. */
@media (max-width: 640px) {
    .systeeminfo-tabel,
    .systeeminfo-tabel tbody,
    .systeeminfo-tabel tr,
    .systeeminfo-tabel th,
    .systeeminfo-tabel td {
        display: block;
        width: auto;
    }

    .systeeminfo-tabel tr {
        border-bottom: 1px solid var(--kleur-rand-zacht, #e4e7eb);
        padding: 0.4rem 0;
    }

    .systeeminfo-tabel th,
    .systeeminfo-tabel td {
        border-bottom: 0;
        padding: 0.15rem 0;
    }

    .systeeminfo-tabel__stand {
        text-align: left;
    }
}

/* ---------- Weekprogramma dagbesteding ----------
   Vijf dagkolommen naast elkaar. Blokken uit het dagsjabloon liggen rustig op
   de achtergrond; wat deze week met opzet is gekozen springt eruit. Zo scan je
   in één blik wat er afwijkt van het gewone ritme. */
/* De datumbalk van de dagbesteding is sinds 22 september 2026 dezelfde
   als de agendabalk van de planning: geen eigen kaart, navigatie links met
   pijlknoppen en de datum ertussen, acties rechts. Dertien views gebruiken
   hem; de klassen zijn gebleven, de vorm is gelijkgetrokken. */
.weekbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.weekbalk__kiezer { display: flex; align-items: center; gap: .45rem; margin: 0; }
.weekbalk__kiezer label {
    font-size: var(--fs-xs, 12px);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kleur-tekst-zacht);
}
.weekbalk__kiezer select { margin: 0; width: auto; }

.weekbalk__navigatie { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.weekbalk__nu { display: flex; flex-direction: column; line-height: 1.25; min-width: 12rem; text-align: center; }
.weekbalk__nu strong { font-size: var(--fs-basis); font-weight: 600; }
.weekbalk__nu small { color: var(--kleur-tekst-zacht); font-variant-numeric: tabular-nums; }

.weekbalk__acties { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.weekbalk__acties form { margin: 0; }

.dagbesteding-rooster {
    display: grid;
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    gap: .6rem;
    overflow-x: auto;
    padding-bottom: .4rem;
}

.dagkolom {
    background: var(--vlak, #fff);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.dagkolom__kop {
    padding: .55rem .7rem;
    background: var(--merk-zacht);
    border-bottom: 1px solid var(--merk-rand);
    border-radius: var(--radius) var(--radius) 0 0;
}
.dagkolom__dag { font-weight: 620; color: var(--merk-tekst); }
.dagkolom__kop small {
    display: block;
    color: var(--kleur-tekst-zacht);
    font-variant-numeric: tabular-nums;
}

.dagkolom__blokken { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; }
.dagkolom__leeg { color: var(--kleur-tekst-zacht); font-size: var(--fs-sm, 13px); margin: .3rem 0; }

.dagkolom__toevoegen {
    font: inherit;
    font-size: var(--fs-sm, 13px);
    padding: .4rem;
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--kleur-tekst-zacht);
    cursor: pointer;
}
.dagkolom__toevoegen:hover { border-color: var(--merk); color: var(--merk-tekst); }
.dagkolom__toevoegen:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; }

.programmablok {
    position: relative;
    padding: .45rem .55rem .45rem .7rem;
    border: 1px solid var(--kleur-rand-zacht);
    border-radius: var(--radius-sm);
    background: var(--vlak, #fff);
    font-size: var(--fs-sm, 13px);
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.programmablok::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--merk);
}

/* Ongewijzigd uit het dagsjabloon: aanwezig, maar het vraagt geen aandacht. */
.programmablok--sjabloon { background: var(--zand-100, #F5F1EB); }
.programmablok--sjabloon::before { background: var(--zand-400, #D6CCBD); }

.programmablok--uitje { background: var(--waarschuwing-licht, #FDF3E2); }
.programmablok--uitje::before { background: var(--waarschuwing, #B26B00); }

.programmablok__tijd {
    font-size: var(--fs-xs, 11.5px);
    color: var(--kleur-tekst-zacht);
    font-variant-numeric: tabular-nums;
}
.programmablok__naam { font-weight: 600; }
.programmablok__detail { color: var(--kleur-tekst-zacht); font-size: var(--fs-xs, 12px); }
.programmablok__merkjes { display: flex; flex-wrap: wrap; gap: .22rem; }
.programmablok__pauze {
    font-size: var(--fs-xs, 11.5px);
    color: var(--kleur-tekst-zacht);
    border-top: 1px dashed var(--kleur-rand);
    padding-top: .2rem;
    font-variant-numeric: tabular-nums;
}
.programmablok__voet {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .2rem;
    padding-top: .3rem;
    border-top: 1px solid var(--kleur-rand-zacht);
    font-size: var(--fs-xs, 12px);
}
.programmablok__voet form { margin: 0; }

/* Het merkje dat vertelt of het dagrapport zichzelf kan invullen. */
.chip {
    font-size: 11px;
    font-weight: 560;
    padding: .08rem .38rem;
    border-radius: var(--radius-pil);
    white-space: nowrap;
}
.chip--gekoppeld { background: var(--merk-zacht); color: var(--merk-tekst); border: 1px solid var(--merk-rand); }
.chip--los {
    background: transparent;
    color: var(--kleur-tekst-zacht);
    border: 1px dashed var(--kleur-rand);
}
.chip--uitje {
    background: var(--waarschuwing-licht, #FDF3E2);
    color: var(--waarschuwing, #B26B00);
    border: 1px solid var(--waarschuwing-rand, #F0DCB6);
}
.chip--concept { background: transparent; color: var(--kleur-tekst-zacht); border: 1px dashed var(--zand-500, #B3A794); }
.chip--deelnemers { background: var(--zand-200, #EFEAE2); color: var(--zand-800, #4A433C); border: 1px solid var(--kleur-rand); }

.knop--tekst-weg { color: var(--alert, #B3261E); }

.uitjevelden {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem 1rem;
    margin-top: .8rem;
}
.uitjevelden legend {
    font-size: var(--fs-xs, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kleur-tekst-zacht);
    padding: 0 .3rem;
}

.keuzelijst-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .3rem .8rem;
    margin: .6rem 0 .2rem;
}

/* Vijf kolommen passen niet op een telefoon; dan wordt het een lijst per dag. */
@media (max-width: 900px) {
    .dagbesteding-rooster { grid-template-columns: 1fr; overflow-x: visible; }
    .dagkolom { min-width: 0; }
    .weekbalk { flex-direction: column; align-items: stretch; }
    .weekbalk__navigatie { justify-content: space-between; }
}

/* ---------- Presentie dagbesteding ----------
   De stand van een dagdeel staat naast de kop, zodat je bij het scrollen door
   een dag ziet waar nog iets openstaat zonder de tabel te lezen. */
.presentiestand { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.presentiestand__bezetting {
    font-size: var(--fs-sm, 13px);
    color: var(--kleur-tekst-zacht);
    font-variant-numeric: tabular-nums;
}

.presentietabel { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.presentietabel th,
.presentietabel td {
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--kleur-rand-zacht);
    text-align: left;
    vertical-align: middle;
}
.presentietabel th {
    font-size: var(--fs-xs, 12px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kleur-tekst-zacht);
}
.presentietabel select,
.presentietabel input { margin: 0; width: 100%; min-width: 6rem; }
.presentietabel td:first-child { min-width: 12rem; }

/* Nog niet afgetekend: geen fout, maar het mag niet wegvallen in de rij. */
.presentietabel__open { background: var(--waarschuwing-licht, #FDF3E2); }

/* Wie het dagdeel het laatst aftekende, naast de knop (_aftekenen.php). */
.aftekenstand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, .5rem);
    margin: 0;
    padding: var(--sp-1, .25rem) var(--sp-3, .75rem);
    border-radius: var(--radius-pil);
    font-size: var(--fs-sm, .875rem);
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing-donker);
}
.aftekenstand--af {
    background: var(--succes-licht);
    color: var(--succes-donker);
    border: 1px solid var(--succes-rand);
}
.aftekenstand svg { width: 1rem; height: 1rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2.5; }
@media (max-width: 760px) {
    .intake-acties__rechts:has(.aftekenstand) { flex-wrap: wrap; }
}

@media (max-width: 760px) {
    .presentietabel,
    .presentietabel tbody,
    .presentietabel tr,
    .presentietabel td { display: block; width: auto; }
    .presentietabel thead { display: none; }
    .presentietabel tr {
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius-sm);
        padding: .5rem;
        margin-bottom: .5rem;
    }
    .presentietabel td { border-bottom: 0; padding: .2rem 0; }
}

/* ---------- Maaltijdlijst ----------
   De kok leest de kop, niet de tabel: alleen wat afwijkt staat in de pillen. */
.maaltijdtabel { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.maaltijdtabel th,
.maaltijdtabel td {
    padding: .45rem .5rem;
    border-bottom: 1px solid var(--kleur-rand-zacht);
    text-align: left;
    vertical-align: top;
}
.maaltijdtabel th {
    font-size: var(--fs-xs, 12px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kleur-tekst-zacht);
}
.maaltijdtabel td small { color: var(--kleur-tekst-zacht); }
.maaltijdtabel .status-pil { margin-right: .25rem; }

/* Nooit naar gevraagd is iets anders dan "geen bijzonderheden"; dat verschil
   telt in een keuken, dus het valt op. */
.maaltijdtabel__onbekend { background: var(--waarschuwing-licht, #FDF3E2); }

@media print {
    .weekbalk,
    .auth-kaart__hint { display: none; }
    .maaltijdtabel { font-size: 11pt; }
}

@media (max-width: 760px) {
    .maaltijdtabel,
    .maaltijdtabel tbody,
    .maaltijdtabel tr,
    .maaltijdtabel td { display: block; width: auto; }
    .maaltijdtabel thead { display: none; }
    .maaltijdtabel tr {
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius-sm);
        padding: .5rem;
        margin-bottom: .5rem;
    }
    .maaltijdtabel td { border-bottom: 0; padding: .15rem 0; }
}

/* ---------- Bulkselectie in het weekprogramma ---------- */
.dagkolom__alles {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    font-size: var(--fs-xs, 12px);
    font-weight: 500;
    color: var(--kleur-tekst-zacht);
    cursor: pointer;
}
.dagkolom__alles input { margin: 0; }

.programmablok__kop { display: flex; align-items: center; gap: .4rem; }
.programmablok__kiezen { display: flex; margin: 0; }
.programmablok__kiezen input { margin: 0; cursor: pointer; }

/* De balk verschijnt pas als er iets geselecteerd is, en blijft dan in beeld:
   de selectie loopt over vijf kolommen en je wilt niet terugscrollen. */
.bulkbalk {
    position: sticky;
    top: .5rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    margin-bottom: .8rem;
    background: var(--merk-zacht);
    border: 1px solid var(--merk-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-sm);
}
.bulkbalk__telling { font-size: var(--fs-sm, 13px); color: var(--merk-tekst); }
.bulkbalk__acties { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-left: auto; }
.bulkbalk__veld {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--fs-xs, 12px);
    color: var(--kleur-tekst-zacht);
}
.bulkbalk__veld select { margin: 0; width: auto; max-width: 11rem; }

/* Een keuzelijst met de knop die erbij hoort, aan elkaar vast: "kies een
   zorgcoördinator → Toewijzen". Los van elkaar, met een label erboven, was
   niet te zien welke knop bij welke lijst hoorde. Alles in de balk is even
   hoog (36px), zodat telling, lijsten en knoppen op één lijn staan. */
.bulkbalk__groep {
    display: inline-flex;
    align-items: stretch;
}
.bulkbalk__groep select,
.bulkbalk__groep .knop {
    min-height: 36px;
    height: 36px;
    margin: 0;
}
.bulkbalk__groep select {
    width: auto;
    max-width: 13rem;
    padding: 0 2rem 0 .7rem;
    font-size: var(--fs-sm, 13px);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right-width: 0;
}
.bulkbalk__groep .knop {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.bulkbalk__scheiding {
    width: 1px;
    align-self: stretch;
    background: var(--merk-rand);
    margin: 0 .2rem;
}
.bulkbalk .knop--klein { min-height: 36px; }
@media (max-width: 720px) {
    .bulkbalk__scheiding { display: none; }
    .bulkbalk__acties { margin-left: 0; }
}

/* Omlijnd gevaar (DESIGN.md: "gevaar omlijnd"). Een eigen vlak en rand: .knop
   heeft border: none en geen achtergrond, dus zonder deze twee kreeg de knop
   tot 2 oktober 2026 de grijze standaardknop van de browser. */
.knop--gevaar { background: var(--vlak); color: var(--alert); border: 1px solid var(--alert-rand, var(--kleur-rand)); }
.knop--gevaar:hover { background: var(--alert-licht, transparent); }

/* ---------- Rittenlijst dagbesteding ----------
   Wie rijdt heeft drie dingen nodig: tijd, naam, adres. Die staan links en
   groot; vervoerder en bijzonderheden ernaast en klein. */
.rittabel { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.rittabel th,
.rittabel td {
    padding: .45rem .5rem;
    border-bottom: 1px solid var(--kleur-rand-zacht);
    text-align: left;
    vertical-align: top;
}
.rittabel th {
    font-size: var(--fs-xs, 12px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kleur-tekst-zacht);
}
.rittabel td small { color: var(--kleur-tekst-zacht); }
.rittabel__tijd { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Een rit zonder tijd is waar de planner nog wat moet. */
.rittabel__open { background: var(--waarschuwing-licht, #FDF3E2); }

/* Rijdt vandaag niet mee: blijft staan, met een eigen kleur en een streep
   links, zodat het opvalt maar niet als rit gelezen wordt. Afgemeld (uit de
   presentielijst) in de alertkleur, eigen vervoer of niet ophalen in info. */
.rittabel tr.rittabel__niet-mee > td { background: var(--info-licht); color: var(--kleur-tekst-zacht); }
.rittabel tr.rittabel__niet-mee > td:first-child { border-left: 4px solid var(--info); }
.rittabel tr.rittabel__niet-mee--afgemeld > td { background: var(--alert-licht); }
.rittabel tr.rittabel__niet-mee--afgemeld > td:first-child { border-left-color: var(--alert); }
.rittabel tr.rittabel__niet-mee strong { color: var(--kleur-tekst); }

.ritafwijking { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 0; }
.ritafwijking select,
.ritafwijking input { margin: 0; width: auto; min-width: 6rem; max-width: 10rem; }

/* De uitzonderingskolom is bediening, geen informatie: die hoort niet op het
   papier dat in het busje ligt. */
@media print {
    .rittabel__actie { display: none; }
    .rittabel { font-size: 11pt; }
}

@media (max-width: 820px) {
    .rittabel,
    .rittabel tbody,
    .rittabel tr,
    .rittabel td { display: block; width: auto; }
    .rittabel thead { display: none; }
    .rittabel tr {
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius-sm);
        padding: .5rem;
        margin-bottom: .5rem;
    }
    .rittabel td { border-bottom: 0; padding: .15rem 0; }
    .ritafwijking { margin-top: .4rem; }

    /* Als kaart: de kleur en de streep op de hele kaart, niet per cel. */
    .rittabel tr.rittabel__niet-mee { background: var(--info-licht); border-left: 4px solid var(--info); }
    .rittabel tr.rittabel__niet-mee--afgemeld { background: var(--alert-licht); border-left-color: var(--alert); }
    .rittabel tr.rittabel__niet-mee > td,
    .rittabel tr.rittabel__niet-mee--afgemeld > td { background: transparent; }
    .rittabel tr.rittabel__niet-mee > td:first-child { border-left: 0; }
}

/* ---------- Bezetting dagbesteding ----------
   Wie hier komt wil weten wát er moet gebeuren, dus de knelpunten staan als
   gewone zinnen boven de tabel. */
.knelpunten { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.knelpunten li { font-size: var(--fs-sm, 13.5px); }

.bezettingtabel { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.bezettingtabel th,
.bezettingtabel td {
    padding: .45rem .5rem;
    border-bottom: 1px solid var(--kleur-rand-zacht);
    text-align: left;
    vertical-align: top;
}
.bezettingtabel thead th {
    font-size: var(--fs-xs, 12px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kleur-tekst-zacht);
}
.bezettingtabel tbody th {
    white-space: nowrap;
    border-right: 1px solid var(--kleur-rand-zacht);
    font-weight: 620;
}
.bezettingtabel td small { color: var(--kleur-tekst-zacht); }
.bezettingtabel__ratio { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Een dagdeel waarop niemand komt hoeft geen oordeel; die regel valt terug. */
.bezettingtabel__stil td { color: var(--kleur-tekst-zacht); }
.bezettingtabel__leeg { font-style: italic; }

@media (max-width: 820px) {
    .bezettingtabel thead { display: none; }
    .bezettingtabel,
    .bezettingtabel tbody,
    .bezettingtabel tr,
    .bezettingtabel th,
    .bezettingtabel td { display: block; width: auto; }
    .bezettingtabel tbody th {
        border-right: 0;
        border-bottom: 0;
        padding-bottom: 0;
    }
    .bezettingtabel tr {
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius-sm);
        padding: .5rem;
        margin-bottom: .5rem;
    }
    .bezettingtabel td { border-bottom: 0; padding: .15rem 0; }
}

/* ---------- Evaluatie van het dagdeel ----------
   Een <details> zodat het aftekenen van de presentie voorop blijft staan; wie
   de evaluatie al heeft ingevuld ziet hem openstaan. */
.evaluatie {
    margin-top: .8rem;
    border-top: 1px solid var(--kleur-rand-zacht);
    padding-top: .6rem;
}
/*
 * Het was een regel tekst zonder enige aanwijzing dat er iets achter zit: door
 * `display: flex` verdween het driehoekje dat de browser er anders zelf voor
 * zet, en wat overbleef las als een onderschrift. Nu een knopregel over de
 * volle breedte, met een pijl die meedraait -- klikken op de tekst doet wat je
 * verwacht, en je ziet dát er iets te klikken valt.
 */
.evaluatie > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-sm, 13.5px);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    margin: -.2rem -.6rem;
    border-radius: var(--radius-sm);
    list-style: none;
    transition: background var(--transitie-snel);
}
.evaluatie > summary::-webkit-details-marker { display: none; }
.evaluatie > summary::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: 5px solid var(--kleur-tekst-zacht);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--transitie-snel);
}
.evaluatie[open] > summary::before { transform: rotate(90deg); }
.evaluatie > summary:hover,
.evaluatie > summary:focus-visible { background: var(--zand-100); }
.evaluatie__hint {
    margin-left: auto;
    font-weight: 400;
    color: var(--kleur-tekst-zacht);
}
.evaluatie textarea { width: 100%; }
.evaluatie form { margin-top: .5rem; }

/* ---------- Weekprogramma: knoppen op een blok ----------
   Deelnemers en Bewerken waren een link naast een tekstknop, wat als twee
   verschillende soorten dingen las. Nu twee gelijke knopjes onderaan het blok. */
.programmablok__voet {
    display: flex;
    gap: .3rem;
}

.blokknop {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 1;
    justify-content: center;
    font: inherit;
    font-size: var(--fs-xs, 12px);
    font-weight: 550;
    line-height: 1.2;
    padding: .3rem .4rem;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-xs, 6px);
    background: var(--vlak, #fff);
    color: var(--kleur-tekst-zacht);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.blokknop:hover {
    border-color: var(--merk);
    color: var(--merk-tekst);
    background: var(--merk-zacht);
    text-decoration: none;
}
.blokknop:focus-visible { outline: 2px solid var(--merk); outline-offset: 1px; }
.blokknop span { font-size: 11px; opacity: .8; }

/* Het blokformulier is breder dan een gewone modal: acht velden naast elkaar
   lezen prettiger dan acht onder elkaar. */
.modal--breed { max-width: 46rem; width: 100%; }

/* Een hint die iets meldt wat de gebruiker moet oplossen, niet iets uitlegt. */
.veld-hint--let-op { color: var(--waarschuwing, #B26B00); }

/* ---------- Overzicht dagrapporten ---------- */
.rapportentabel { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.rapportentabel th,
.rapportentabel td {
    padding: .45rem .5rem;
    border-bottom: 1px solid var(--kleur-rand-zacht);
    text-align: left;
    vertical-align: middle;
}
.rapportentabel thead th {
    font-size: var(--fs-xs, 12px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kleur-tekst-zacht);
}
.rapportentabel td small { color: var(--kleur-tekst-zacht); }
.rapportentabel__actie { text-align: right; white-space: nowrap; }

/* Wat nog geschreven moet worden valt op; dat is de reden dat dit scherm er is. */
.rapportentabel__open { background: var(--waarschuwing-licht, #FDF3E2); }

@media (max-width: 700px) {
    .rapportentabel thead { display: none; }
    .rapportentabel, .rapportentabel tbody, .rapportentabel tr, .rapportentabel td {
        display: block; width: auto;
    }
    .rapportentabel tr {
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius-sm);
        padding: .5rem;
        margin-bottom: .5rem;
    }
    .rapportentabel td { border-bottom: 0; padding: .15rem 0; }
    .rapportentabel__actie { text-align: left; }
}

/* ---------- Weekprogramma: de twee dagdelen gescheiden ----------
   Ochtend en middag zijn twee verschillende groepen met elk een eigen
   presentielijst. Door elkaar in één kolom lezen ze als één lange dag, en dan
   is niet te zien dat je per dagdeel aftekent. */
.dagdeelblok { margin-bottom: 1.6rem; }
.dagdeelblok + .dagdeelblok {
    border-top: 2px solid var(--kleur-rand);
    padding-top: 1.2rem;
}

.dagdeelblok__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem 1rem;
    margin-bottom: .6rem;
}
.dagdeelblok__kop h2 {
    margin: 0;
    font-size: var(--fs-basis);
    font-weight: 640;
    color: var(--merk-tekst);
}
.dagdeelblok__uitleg {
    margin: 0;
    font-size: var(--fs-sm, 13px);
    color: var(--kleur-tekst-zacht);
}

.dagkolom__deelnemers {
    display: block;
    margin-top: .15rem;
    color: var(--merk-tekst);
    font-weight: 550;
}

/* ---------- Presentieknop in de dagkolom ----------
   Wie het rooster nakijkt is meestal ook degene die de dag aftekent; dat hoeft
   geen schermwissel te zijn. De knop toont meteen of er nog iets openstaat. */
.dagkolom__presentie {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .25rem .4rem;
    font: inherit;
    font-size: var(--fs-xs, 11.5px);
    text-align: left;
    border: 1px solid var(--merk-rand);
    border-radius: var(--radius-xs, 6px);
    background: var(--vlak, #fff);
    color: var(--merk-tekst);
    cursor: pointer;
}
.dagkolom__presentie:hover { background: var(--merk-zacht); }
.dagkolom__presentie:focus-visible { outline: 2px solid var(--merk); outline-offset: 1px; }

.dagkolom__open,
.dagkolom__af {
    display: inline-block;
    margin-left: .2rem;
    padding: 0 .3rem;
    border-radius: var(--radius-pil);
    font-size: 10.5px;
    font-weight: 600;
}
.dagkolom__open { background: var(--waarschuwing-licht, #FDF3E2); color: var(--waarschuwing, #B26B00); }
.dagkolom__af { background: var(--succes-licht, #E8F3EC); color: var(--succes, #2F6B44); }

/* In een modal mag de presentietabel scrollen; twintig cliënten passen anders
   niet op een laptopscherm. */
.modal .presentietabel { display: block; max-height: 55vh; overflow-y: auto; }

/*
 * De weekagenda op een smal scherm.
 *
 * Zeven dagkolommen in 375 pixels is vijftig pixels per dag: een afspraak wordt
 * dan een gekleurd streepje zonder leesbare tekst. In plaats van de kolommen
 * verder te laten krimpen krijgt het raster hier een ondergrens en schuift het
 * horizontaal. De urenkolom blijft daarbij staan, anders weet je na één veeg
 * niet meer hoe laat het ergens is.
 */
@media (max-width: 760px) {
    .agenda-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .agenda__head,
    .agenda__body {
        min-width: 44rem;
    }

    .agenda__hoek,
    .agenda__gutter {
        position: sticky;
        left: 0;
        z-index: 5;
        background: var(--vlak);
    }

    .agenda__hoek {
        background: var(--zand-100);
    }

    .agenda__daghead,
    .agenda__dag {
        min-width: 5.5rem;
    }
}

/*
 * Annuleren en "reeks aanpassen" verschijnen bij hover. Op een aanraakscherm
 * bestaat hover niet, dus daar zouden die twee onbereikbaar zijn. Dit gaat over
 * het aanwijsapparaat, niet over de schermbreedte -- een tablet met muis houdt
 * de rustige weergave.
 */
@media (hover: none) {
    .agenda__afspraak-x,
    .agenda__afspraak-reeks {
        display: block;
    }
}

/* ---------- Begeleiding bij de dagbesteding ----------
   In de dagkop, onder de presentieknop: wie dit dagdeel draait. Ontbreekt die,
   dan is er straks ook niemand die de dagrapporten aftekent -- dat hoort hier
   op te vallen en niet pas bij het rapporteren. */
.dagkolom__begeleiding {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .2rem .4rem;
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--kleur-tekst-zacht);
    font: inherit;
    font-size: var(--fs-xs, 12px);
    text-align: left;
    cursor: pointer;
}

.dagkolom__begeleiding:hover { background: var(--zand-100); }

.dagkolom__begeleiding--leeg {
    border-color: var(--waarschuwing);
    color: var(--waarschuwing);
}

.dagkolom__extra {
    color: var(--kleur-tekst-zacht);
    font-weight: 600;
}

/* Een kolom vinkjes die bij drie namen niet de halve modal vult en bij dertig
   niet uit beeld loopt. */
.vinkjesraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .2rem .8rem;
    max-height: 40vh;
    overflow-y: auto;
}

.programmablok__begeleiding {
    margin: .25rem 0 0;
    font-size: var(--fs-xs, 12px);
    color: var(--kleur-tekst-zacht);
}

.dagkolom__feestdag {
    margin: .4rem 0;
    padding: .35rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--info-licht, var(--zand-100));
    color: var(--kleur-tekst-zacht);
    font-size: var(--fs-xs, 12px);
    text-align: center;
}

/* ---------- Sluitingsdagen ----------
   Twee kolommen: wat de kalender zegt en wat deze werkmaatschappij ervan
   gemaakt heeft. Onder elkaar op smal, want twee tabellen naast elkaar op een
   telefoon is twee onleesbare tabellen. */
.sluitingsraster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.sluitingsdag--weekend td { color: var(--kleur-tekst-zacht); }

@media (max-width: 900px) {
    .sluitingsraster { grid-template-columns: 1fr; }
}

/* ---------- Indicatieverbruik ----------
   De volgorde is op urgentie, dus de kleur moet dat volgen: rood is over de
   indicatie, zand is geplaatst zonder beschikking. */
.getalkolom { text-align: right; white-space: nowrap; }
.verbruikrij--over td { background: var(--alert-licht); }
.verbruikrij--zonder td { background: var(--waarschuwing-licht); }
.verbruik--over { color: var(--alert); }

/* Een kaart die om actie vraagt. Alleen de rand en de kop kleuren mee; een
   volledig gekleurd vlak maakt de tabel erin slechter leesbaar. */
.kaart--waarschuwing {
    border-left: 4px solid var(--waarschuwing);
}

.kaart--waarschuwing .paneel__kop h2 {
    color: var(--waarschuwing);
}

/* ---------- Mijn dagdeel ----------
   Alles wat een begeleider tussen negen en één nodig heeft. Twee kolommen op
   een breed scherm, één op een smal -- en de volgorde in de HTML is de
   volgorde van de dag, zodat het op een telefoon vanzelf klopt. */
.dagdeelraster {
    display: grid;
    /* min(24rem, 100%): op een telefoon is 24rem (384px) breder dan het
       scherm, en dan liep het hele dagdeelscherm 22px over de rand. */
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
/* Een kaart die de hele rij pakt (de presentielijst met zes kolommen). */
.dagdeelraster__breed {
    grid-column: 1 / -1;
}

/* De blokken van het dagdeel als een tijdbalk: de tijd links, de inhoud
   rechts. Een tabel zou hier vier lege kolommen opleveren. */
.dagloop { list-style: none; margin: 0; padding: 0; }

.dagloop__blok {
    display: flex;
    gap: .8rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}

.dagloop__blok:last-child { border-bottom: none; }

.dagloop__tijd {
    flex: none;
    width: 3.4rem;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs, 12px);
    color: var(--kleur-tekst-zacht);
    line-height: 1.3;
}

.dagloop__inhoud { min-width: 0; }

.ritlijst,
.maaltijdlijst,
.rapportlijst {
    list-style: none;
    margin: 0 0 .6rem;
    padding: 0;
}

.ritlijst li,
.maaltijdlijst li,
.rapportlijst li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}

.rapportlijst li > a { margin-left: auto; }

.ritlijst--vervalt { color: var(--kleur-tekst-zacht); text-decoration: line-through; }
.ritlijst--vervalt .chip { text-decoration: none; }

/* Een allergie is het enige op deze schermen waar een vergissing een medisch
   gevolg heeft; die mag niet dezelfde kleur hebben als "dieet" of "hulp". */
.chip--alert {
    background: var(--alert-licht);
    color: var(--alert);
    border: 1px solid var(--alert);
    font-weight: 600;
}

/* ---------- Portaal: mijn dagbesteding ----------
   Een lijst en geen tabel: op een telefoon leest een dag met vier activiteiten
   als een blokje, niet als vier rijen die je horizontaal moet scrollen. */
.agendalijst { list-style: none; margin: 0; padding: 0; }

.agendalijst__dag {
    padding: .7rem 0;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}

.agendalijst__dag:last-child { border-bottom: none; }

.agendalijst__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .3rem;
}

.agendalijst__locatie { color: var(--kleur-tekst-zacht); font-size: var(--fs-sm, 13px); }

.agendalijst__programma { list-style: none; margin: .2rem 0 0; padding: 0 0 0 .2rem; }

.agendalijst__programma li {
    display: flex;
    gap: .6rem;
    padding: .12rem 0;
    font-size: var(--fs-sm, 13px);
}

.agendalijst__tijd {
    flex: none;
    width: 3rem;
    font-variant-numeric: tabular-nums;
    color: var(--kleur-tekst-zacht);
}

.agendalijst__melding { margin: .2rem 0 0; color: var(--kleur-tekst-zacht); }

.agendalijst__dag--vervalt .agendalijst__kop strong { text-decoration: line-through; }

/* Een afspraak in de merkkleur van de organisatie. Het weekrooster van de
   planner kleurt per medewerker (categorisch palet); "mijn rooster" en het
   portaal tonen maar één persoon, en dan is de merkkleur de juiste. */
.agenda__afspraak--merk {
    border-left-color: var(--merk);
    background: var(--merk-zacht);
    color: var(--merk-diep);
}

/* Een veld dat de volle breedte van zijn kader inneemt. Stond als inline
   stijl op de reset-link; hier kan een donker thema er tenminste bij. */
.volle-breedte { width: 100%; }

/* ---------- Hulpklassen ----------
   Zes patronen die tientallen keren als inline stijl in de views stonden. Een
   inline stijl kan geen mediaquery en geen donker thema volgen -- zo werd de
   weekagenda op een telefoon onbruikbaar. `nowrap` werd bovendien al als klasse
   gebruikt in twee lijstweergaven terwijl hij nergens gedefinieerd stond, en
   deed daar dus niets. */
.breed { flex: 2; }
.gelijk { flex: 1; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }
.links { text-align: left; }
.inline { display: inline; }
.ruimte-boven { margin-top: .5rem; }

/* Een rij die niet meer actief is: leesbaar maar duidelijk op de achtergrond.
   Niet verbergen -- wat er stond hoort terug te vinden te zijn. */
.is-inactief { opacity: .55; }

/* De cliëntknoppen om een MIC-melding te starten vanuit een dagdeel. Naast
   elkaar en niet onder elkaar: het is een keuzelijst, geen opsomming. */
.micknoppen {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
}

/* ---------- Jaaroverzicht dagbesteding ----------
   Twaalf maanden naast elkaar, elke dag een vakje. Kleur zegt de stand: een
   lege werkdag springt eruit, het weekend blijft rustig. */
.jaarraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.jaarmaand {
    background: var(--vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    padding: .6rem .7rem .8rem;
}

.jaarmaand__naam {
    margin: 0 0 .5rem;
    font-size: var(--fs-sm, 13px);
    text-transform: capitalize;
}

.jaarmaand__dagen {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin: 0;
    padding: 0;
}

.jaardag {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-width: 1.5rem;
    border-radius: 3px;
    font-size: var(--fs-xs, 11px);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--kleur-tekst);
}

.jaardag:hover { outline: 2px solid var(--merk); }

.jaardag--gevuld { background: var(--succes-licht); color: var(--succes); }
.jaardag--leeg { background: var(--waarschuwing-licht); color: var(--waarschuwing); }
.jaardag--gesloten { background: var(--zand-200); color: var(--kleur-tekst-zacht); }
.jaardag--weekend { background: transparent; color: var(--kleur-tekst-hint, var(--kleur-tekst-zacht)); }

/* In de legenda zijn het vlakjes zonder cijfer; die mogen niet uitrekken. */
.jaarlegenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    font-size: var(--fs-sm, 13px);
    color: var(--kleur-tekst-zacht);
}

.jaarlegenda .jaardag {
    width: 1.1rem;
    min-width: 0;
    border: 1px solid var(--kleur-rand-zacht);
}

.jaarmaand__kop {
    text-align: center;
    font-size: var(--fs-xs, 11px);
    color: var(--kleur-tekst-zacht);
    text-transform: uppercase;
    padding-bottom: .1rem;
}

.jaarmaand__gat { aspect-ratio: 1; }

/* ---------- Demobalk ----------
   Eigen kleuren, en met opzet niet die van de organisatie: deze balk moet
   eruit springen, want hij zegt dat dit géén echte omgeving is. Ze stonden als
   inline stijl in de layout en sneden daarmee dwars door het donkere thema. */
.demobalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    padding: .4rem 1rem;
    background: #412402;
    color: #FAC775;
    font-size: .85rem;
}

.demobalk a { color: #FAC775; text-decoration: underline; }
.demobalk__merk { color: #FFF; }

/* Een tabelrij die aandacht vraagt, en een die juist naar de achtergrond mag. */
.rij--aandacht > td,
.rij--aandacht > th { background: var(--alert-licht); }

.rij--gedempt > td { background: var(--zand-100); }

/* Checklist (stap 12): de toelichting als memoregel onder het punt. Geen
   bovenrand, en de rij erboven geen onderrand, zodat punt en memo één geheel
   zijn. Het vak groeit mee met de tekst (data-groeit). */
.checklist-tabel__memo > td {
    padding-top: 0;
    border-top: none;
}
.checklist-tabel tbody tr:not(.checklist-tabel__memo) > td {
    border-bottom: none;
    padding-bottom: var(--sp-1);
}
.checklist-tabel__memo textarea {
    min-height: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    resize: vertical;
    margin: 0;
}

/* Een afspraak tussen de taken in "mijn dag": andere soort, andere rand. */
.kaart--afspraak { border-left: 4px solid var(--info, #3E6CA6); }

/* De twee koppelblokken in het Omaha-zorgplan: wat aandacht vraagt en wat op
   orde is. */
.omaha-koppelblok--aandacht { background: var(--alert-licht); }
.omaha-koppelblok--goed { background: var(--succes-licht); }

/* Wat er op een dagdeel is gedaan, in een tabelcel. Geen bolletjes en geen
   inspringing: het zijn er twee of drie en ze staan naast andere kolommen. */
.gedaanlijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gedaanlijst li + li { margin-top: .15rem; }

/* De weg terug naar het overzicht, boven de titel. Klein en grijs: het is een
   uitweg, geen actie -- wie hier kwam om iets in te stellen moet de kop als
   eerste zien. */
.terug-naar {
    margin: 0 0 .25rem;
    font-size: var(--fs-sm);
}

.terug-naar a { color: var(--kleur-tekst-zacht); text-decoration: none; }
.terug-naar a:hover { color: var(--merk-tekst); text-decoration: underline; }

/* Een rij declaratiecategorieën: onderling gescheiden, uitgelijnd op de knop. */
.entiteitrij {
    align-items: end;
    border-bottom: 1px solid var(--kleur-rand-zacht);
    padding-bottom: .6rem;
    margin-bottom: .6rem;
}

/* De categorierij vult de ruimte naast de verwijderknop. */
.categorierij { align-items: end; flex: 1; }

/* Een knop of veld dat op de onderrand van zijn rij uitlijnt, naast velden met
   een label erboven. */
.zelf-onderaan { align-self: end; }

/* Prioriteitskleuren voor taken. Stonden als palet in PHP in twee views --
   twee kopieën die bij de eerste wijziging uit elkaar lopen -- en als inline
   kleur volgden ze het donkere thema niet. */
.prio--urgent { border-left-color: var(--alert); }
.prio--hoog { border-left-color: var(--waarschuwing); }
.prio--normaal { border-left-color: var(--kleur-tekst-zacht); }
.prio--laag { border-left-color: var(--kleur-rand); }

/* In "mijn dag" is de kaart zelf de drager van de prioriteit; daar moet de
   rand er eerst zijn voordat de kleur iets doet. */
.kaart--prio { border-left-width: 4px; border-left-style: solid; }

/* ---------------------------------------------------------------------------
   JAARBALK — afwezigheid dagbesteding

   Twaalf hokjes per cliënt, met het aantal dagen erin. Drie kleurtreden en niet
   een vloeiende schaal: uit een verloop lees je geen verschil af, uit "licht,
   midden, vol" wel. Het getal staat er altijd bij, want kleur alleen is voor
   een deel van de gebruikers geen informatie.
   ------------------------------------------------------------------------- */
.jaarbalk {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.jaarbalk th,
.jaarbalk td {
    padding: var(--sp-2);
    border: 1px solid var(--kleur-rand-zacht);
    text-align: center;
}

.jaarbalk th[scope="row"] {
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
}

.jaarbalk__cel {
    min-width: 2.4rem;
    font-variant-numeric: tabular-nums;
}

.jaarbalk__cel--licht  { background: color-mix(in srgb, var(--merk) 14%, transparent); }
.jaarbalk__cel--midden { background: color-mix(in srgb, var(--merk) 34%, transparent); }
.jaarbalk__cel--vol    { background: color-mix(in srgb, var(--merk) 58%, transparent); font-weight: 600; }

.jaarbalk__cel--totaal {
    background: var(--zand-100);
    font-weight: 700;
}

/* Het inhaalformulier staat binnen één tabelcel — een <form> mag geen kind van
   een <tr> zijn. Datum, dagdeel en knop naast elkaar, en op een smal scherm
   onder elkaar in plaats van de kolom uit te rekken. */
.inhaal-formulier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.inhaal-formulier input[type="date"] { width: auto; min-width: 9rem; }
.inhaal-formulier select { width: auto; }

/* ==========================================================================
   Kiosk — de tablet bij de ingang (layout/kiosk.php)

   Eén donker scherm dat van een afstand leesbaar is: glasachtige panelen op
   een diep verloop, een grote klok, kaartjes die één voor één binnenkomen.
   Alles in CSS; app.js doet alleen de klok, het pasveld, het passen en het
   cijferblok. Rechte hoeken op verzoek van de opdrachtgever. Wie "minder
   beweging" heeft ingesteld krijgt hetzelfde scherm zonder animatie.
   ========================================================================== */
/*
 * Het palet van de kiosk staat in dít blok en nergens anders: alles hieronder
 * tekent zich met deze tokens, dus het bord is om te kleuren zonder één regel
 * opmaak aan te raken. Het was donkergroen en is op 24 september 2026 op
 * verzoek van de opdrachtgever licht geworden, met dezelfde kleuren als de
 * rest van het systeem (zand + de semantische tokens). Zet je hier ooit weer
 * een donker palet neer, kijk dan naar --k-op-accent en --k-schaduw: dat zijn
 * de twee die op een donkere achtergrond iets anders moeten zijn.
 */
body.kiosk {
    /* De achtergrond is zand en de kaarten zijn wit: zonder dat verschil
       verdwijnen de kaartjes in de pagina en is het bord één wit vlak. */
    --k-bg1: var(--kleur-pagina);
    --k-bg2: var(--zand-200);
    --k-bg3: var(--zand-100);
    --k-glas: #ffffff;                 /* opvlak van kop, teller, kaart, toets */
    --k-glas-zacht: var(--zand-100);   /* een kaartje dat naar de achtergrond mag */
    --k-glas-rand: var(--zand-300);
    --k-glas-actief: var(--zand-100);  /* ingedrukt of onder de muis */
    --k-avatar: var(--zand-100);
    --k-veld: #ffffff;
    --k-voet: var(--zand-100);
    --k-schaduw: 0 1px 2px rgba(27, 27, 25, 0.06), 0 8px 24px rgba(27, 27, 25, 0.08);
    --k-tekst: var(--zand-900);
    --k-tekst-zacht: var(--zand-700);
    --k-op-accent: #ffffff;            /* tekst op een gevulde accentknop */
    --k-groen: var(--succes);
    --k-groen-vlak: var(--succes-licht);
    --k-groen-rand: var(--succes-rand);
    --k-blauw: var(--info);
    --k-blauw-vlak: var(--info-licht);
    --k-blauw-rand: var(--info-rand);
    --k-rood: var(--alert);
    --k-rood-vlak: var(--alert-licht);
    --k-rood-rand: var(--alert-rand);
    --k-goud: var(--waarschuwing);
    --k-goud-vlak: var(--waarschuwing-licht);
    --k-goud-rand: var(--waarschuwing-rand);
    --k-grijs: var(--zand-500);
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--k-tekst);
    text-align: center;
    background: linear-gradient(135deg, var(--k-bg1) 0%, var(--k-bg3) 45%, var(--k-bg2) 130%);
    background-size: 200% 200%;
    animation: kiosk-verloop 40s ease-in-out infinite alternate;
    -webkit-font-smoothing: antialiased;
}

@keyframes kiosk-verloop {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

.kiosk__scherm {
    width: min(100%, 640px);
    padding: var(--sp-6);
}

/* Het paneel voor pincode, gast en uitkomst. */
.kiosk__paneel {
    background: var(--k-glas);
    border: 1px solid var(--k-glas-rand);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--k-schaduw);
    padding: var(--sp-12) var(--sp-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    animation: kiosk-opkomen 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes kiosk-opkomen {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.kiosk__datum { margin: 0; font-size: var(--fs-md); color: var(--k-tekst-zacht); }
.kiosk__klok {
    margin: 0;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.kiosk__klok--klein { font-size: 2.5rem; }
.kiosk__icoon { color: var(--k-blauw); margin-top: var(--sp-2); }
.kiosk__icoon svg { width: 72px; height: 72px; }
.kiosk__kop { margin: 0; font-size: var(--fs-2xl); color: var(--k-tekst); }
.kiosk__naam { margin: 0; font-size: var(--fs-lg); color: var(--k-tekst-zacht); }
.kiosk__tekst { margin: 0; font-size: var(--fs-lg); }
.kiosk__uitleg { margin: 0; color: var(--k-tekst-zacht); font-size: var(--fs-md); }
.kiosk__uitleg a, .kiosk__nummer a { color: var(--k-blauw); }

/* Knoppen op het kioskscherm. */
body.kiosk .knop--secundair {
    background: var(--k-glas);
    border-color: var(--k-glas-rand);
    color: var(--k-tekst);
}
body.kiosk .knop--secundair:hover { background: var(--k-glas-actief); }
body.kiosk .knop--primair {
    background: var(--k-groen);
    border-color: var(--k-groen);
    color: var(--k-op-accent);
    box-shadow: var(--k-schaduw);
}
body.kiosk .knop { border-radius: 0; transition: transform 0.12s ease, background 0.2s ease; }
body.kiosk .knop:active { transform: scale(0.97); }
.kiosk__knop { font-size: var(--fs-lg); padding: var(--sp-3) var(--sp-6); margin-top: var(--sp-2); }
/* De sleutel intypen op het weigeringsscherm (kiosk-app, onderdeel F). */
.kiosk__aanmelden { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); width: min(100%, 24rem); margin: var(--sp-4) auto 0; }
.kiosk__aanmelden input { font-size: var(--fs-lg); }

/* Het pasformulier: zichtbaar zonder JavaScript, weggezet mét (app.js zet
   de klasse). Nooit display:none — een verborgen veld krijgt geen focus en
   dan komt de UID van de lezer nergens aan. */
.kiosk__pasformulier { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; width: 100%; }
.kiosk__pasveld { font-size: var(--fs-lg); text-align: center; max-width: 20rem; }
body.kiosk--js .kiosk__pasformulier {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
}

/* Invoer op het kioskscherm. */
body.kiosk input[type="text"],
body.kiosk input[type="password"] {
    background: var(--k-veld);
    border: 1px solid var(--k-glas-rand);
    color: var(--k-tekst);
    border-radius: 0;
}
body.kiosk label { color: var(--k-tekst-zacht); }
.kiosk__pinformulier { width: 100%; max-width: 22rem; display: flex; flex-direction: column; gap: var(--sp-4); text-align: left; }
.kiosk__pinvelden { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Liggend op een tablet is er hoogte tekort: klok, naam, twee velden, twaalf
   toetsen en een knop passen niet onder elkaar. Dan komen de velden links en
   het cijferblok rechts, en krimpen de koptekst en de toetsen mee. Staand of
   op een groot scherm blijft alles onder elkaar staan. */
@media (orientation: landscape) and (max-height: 900px) {
    /* Breder dan de 640px van een gewoon kioskscherm: liggend is breedte
       juist wat er over is. */
    .kiosk__scherm:has(.kiosk__paneel--pin) { width: min(100%, 60rem); padding: var(--sp-4); }

    .kiosk__paneel--pin {
        display: grid;
        /* Vijf rijen: klok, naam, uitleg, velden, knop. Ze staan er allemaal
           altijd, en het cijferblok ernaast spant ze met `1 / -1`. Zonder
           deze regel bestaat het expliciete raster uit één rij en betekent
           `-1` dus rij 1: het cijferblok bleef rechtsboven hangen. */
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
        grid-template-rows: auto auto auto 1fr auto;
        align-items: start;
        text-align: left;
        padding: var(--sp-6) var(--sp-8);
        gap: var(--sp-3) var(--sp-8);
    }
    .kiosk__paneel--pin > * { grid-column: 1; }
    .kiosk__paneel--pin .kiosk__klok { font-size: var(--fs-xl); color: var(--k-tekst-zacht); }
    .kiosk__paneel--pin .kiosk__kop { font-size: var(--fs-2xl); }
    /* Het formulier is hier geen doos maar geeft zijn twee helften aan het
       raster door: de velden links, het cijferblok rechts. */
    .kiosk__paneel--pin .kiosk__pinformulier { display: contents; }
    .kiosk__paneel--pin .kiosk__pinvelden { grid-column: 1; align-self: start; }
    .kiosk__paneel--pin .kiosk__toetsen {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
    }
    .kiosk__paneel--pin .kiosk__toets { padding: var(--sp-3) 0; }
    .kiosk__paneel--pin .kiosk__knop { justify-self: start; margin-top: 0; white-space: nowrap; }
}
.kiosk__invoer { font-size: var(--fs-xl); letter-spacing: 0.08em; }
.kiosk__invoer--pin { text-align: center; letter-spacing: 0.5em; font-size: var(--fs-2xl); }

/* Het cijferblok: grote toetsen voor een vinger; app.js houdt het
   tablettoetsenbord dicht. */
.kiosk__toetsen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); width: 100%; }
.kiosk__toets {
    font: inherit;
    font-size: var(--fs-xl);
    font-weight: 600;
    padding: var(--sp-4) 0;
    border: 1px solid var(--k-glas-rand);
    border-radius: 0;
    background: var(--k-glas);
    color: var(--k-tekst);
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.08s ease, background 0.15s ease;
}
.kiosk__toets:active { transform: scale(0.94); background: var(--k-glas-actief); }
.kiosk__toets--wis { font-size: var(--fs-lg); color: var(--k-tekst-zacht); }
.kiosk__toets--ok { background: var(--k-groen); border-color: var(--k-groen); color: var(--k-op-accent); }

/* De uitkomst: gestart, beëindigd, fout. Het vinkje tekent zichzelf. De
   uitkomst is het enige scherm dat je van een paar meter moet kunnen lezen
   ("is het gelukt?"), vandaar het gekleurde vlak achter het hele paneel. */
.kiosk__uitkomst--gestart { border-color: var(--k-groen); background: var(--k-groen-vlak); }
.kiosk__uitkomst--gestart .kiosk__icoon { color: var(--k-groen); }
.kiosk__uitkomst--beeindigd { border-color: var(--k-blauw); background: var(--k-blauw-vlak); }
.kiosk__uitkomst--beeindigd .kiosk__icoon { color: var(--k-blauw); }
.kiosk__uitkomst--info { border-color: var(--k-goud); background: var(--k-goud-vlak); }
.kiosk__uitkomst--info .kiosk__icoon { color: var(--k-goud); }
.kiosk__uitkomst--fout { border-color: var(--k-rood); background: var(--k-rood-vlak); animation: kiosk-opkomen 0.45s both, kiosk-schud 0.4s 0.45s ease; }
.kiosk__uitkomst--fout .kiosk__icoon { color: var(--k-rood); }
.kiosk__uitkomst .kiosk__icoon svg { stroke-dasharray: 60; stroke-dashoffset: 60; animation: kiosk-tekenen 0.6s 0.2s ease-out forwards; }

/* Geen verbinding (migratie 227): de service worker zet deze balk in een
   onthouden scherm. Vast bovenaan en over de kop heen, zodat het bord niet
   kleiner wordt -- elke regel extra gaat af van het aantal namen dat past.
   --klaar is de melding als bewaarde tikken alsnog zijn aangekomen. */
.kiosk-offline {
    position: fixed;
    top: var(--sp-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    max-width: calc(100% - 32px);
    padding: var(--sp-2) var(--sp-5);
    border: 1px solid var(--k-goud-rand);
    border-radius: var(--radius-pil);
    background: var(--k-goud-vlak);
    color: var(--k-tekst);
    font-size: var(--fs-sm);
    box-shadow: var(--k-schaduw);
}
.kiosk-offline--klaar {
    top: auto;
    bottom: var(--sp-3);
    border-color: var(--k-groen-rand);
    background: var(--k-groen-vlak);
}

@keyframes kiosk-tekenen { to { stroke-dashoffset: 0; } }
@keyframes kiosk-schud {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* --------------------------------------------------------------------------
   Het bord (kiosk/index.php): de hele breedte, de lijst in het midden
   scrolt niet maar past zichzelf (app.js), kop en voet blijven staan.
   -------------------------------------------------------------------------- */
/* Het bord ís het scherm: vastgezet op het venster in plaats van uitgerekend
   met een viewporthoogte. `100vh` is op Android de hoogte zónder de adresbalk
   (ook zolang die er staat) en `dvh` kent niet elke tablet-browser, dus viel
   de voet er half buiten -- en na een omweg langs het pincodescherm stond hij
   ineens goed, want dan was de balk weg. Een doos met `inset: 0` rekent niet
   met hoogtes en kan er dus ook niet naast vallen. */
.kiosk__scherm:has(.kiosk-bord) {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    padding: var(--sp-4);
}
body.kiosk:has(.kiosk-bord) { align-items: stretch; overflow: hidden; }

.kiosk-bord {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    /* De hoogte komt van de vastgezette doos eromheen (zie hierboven), niet
       van een viewporteenheid. Breder dan 1400px wordt een kaartje zo breed
       dat de naam links en de tijd rechts niets meer met elkaar te maken
       hebben, dus daar houdt het op en staat het bord gecentreerd. */
    height: 100%;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
}

.kiosk-bord__kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-6);
    /* Een kwart lager dan eerst: elke pixel in de kop gaat af van het aantal
       medewerkers dat op het bord past. Ook het streepje onder de titel en de
       ondertitel zijn daarom krapper. */
    padding: var(--sp-3) var(--sp-6);
    background: var(--k-glas);
    border: 1px solid var(--k-glas-rand);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: kiosk-opkomen 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kiosk-bord__titel { margin: 0; font-size: var(--fs-xl); color: var(--k-tekst); letter-spacing: -0.01em; }
.kiosk-bord__titel::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin-top: var(--sp-1);
    background: linear-gradient(90deg, var(--k-groen), var(--k-blauw));
}
.kiosk-bord__ondertitel { margin: var(--sp-1) 0 0; color: var(--k-tekst-zacht); font-size: var(--fs-sm); }
.kiosk-bord__tijd { text-align: right; }
.kiosk-bord__klok {
    margin: 0;
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--k-tekst);
}
.kiosk-bord__datum { margin: 2px 0 0; color: var(--k-tekst-zacht); font-size: var(--fs-sm); }

/* Tellers: vier tegels met een gekleurde bovenrand. */
.kiosk-bord__tellers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.kiosk-bord__teller {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--k-glas);
    border: 1px solid var(--k-glas-rand);
    border-top: 3px solid var(--k-grijs);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: kiosk-opkomen 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kiosk-bord__teller:nth-child(1) { animation-delay: 0.05s; }
.kiosk-bord__teller:nth-child(2) { animation-delay: 0.1s; }
.kiosk-bord__teller:nth-child(3) { animation-delay: 0.15s; }
.kiosk-bord__teller:nth-child(4) { animation-delay: 0.2s; }
.kiosk-bord__teller-getal { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--k-tekst); }
.kiosk-bord__teller-label { font-size: var(--fs-sm); color: var(--k-tekst-zacht); }
.kiosk-bord__teller--aanwezig { border-top-color: var(--k-groen); }
.kiosk-bord__teller--aanwezig .kiosk-bord__teller-getal { color: var(--k-groen); }
.kiosk-bord__teller--bij_client { border-top-color: var(--k-blauw); }
.kiosk-bord__teller--bij_client .kiosk-bord__teller-getal { color: var(--k-blauw); }
.kiosk-bord__teller--klaar .kiosk-bord__teller-getal { color: var(--k-tekst-zacht); }
.kiosk-bord__teller--afwezig { border-top-color: var(--k-rood); }
.kiosk-bord__teller--afwezig .kiosk-bord__teller-getal { color: var(--k-rood); }

/* De lijst en het raster. --bord-schaal draait app.js terug tot het past. */
.kiosk-bord__lijst {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    position: relative;
    --bord-schaal: 1;
    font-size: calc(var(--fs-md) * var(--bord-schaal));
}
.kiosk-bord__raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--sp-3) * var(--bord-schaal));
    align-content: start;
}
.kiosk-bord__groep {
    grid-column: 1 / -1;
    margin: 0.5em 0 0;
    padding-bottom: 0.25em;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--k-tekst-zacht);
    border-bottom: 1px solid var(--k-glas-rand);
}
.kiosk-bord__groep:first-child { margin-top: 0; }
.kiosk-bord__groep[hidden] { display: none; }
.kiosk-bord__groep--aanwezig { color: var(--k-groen); border-image: linear-gradient(90deg, var(--k-groen), transparent) 1; }
.kiosk-bord__groep--afwezig { color: var(--k-rood); border-image: linear-gradient(90deg, var(--k-rood), transparent) 1; }
.kiosk-bord__groep--gasten { color: var(--k-goud); border-image: linear-gradient(90deg, var(--k-goud), transparent) 1; }

.kiosk-bord__kaart {
    display: flex;
    align-items: center;
    gap: calc(var(--sp-3) * var(--bord-schaal));
    padding: calc(var(--sp-2) * var(--bord-schaal)) calc(var(--sp-4) * var(--bord-schaal));
    background: var(--k-glas);
    border: 1px solid var(--k-glas-rand);
    border-left: 4px solid var(--k-grijs);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    animation: kiosk-opkomen 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(0.15s + var(--i, 0) * 0.035s);
    transition: background 0.2s ease, transform 0.15s ease;
}
.kiosk-bord__kaart:active { transform: scale(0.98); background: var(--k-glas-actief); }
.kiosk-bord__raster--meten .kiosk-bord__kaart { animation: none; }
.kiosk-bord__kaart[hidden] { display: none; }
.kiosk-bord__kaart--aanwezig { border-left-color: var(--k-groen); background: linear-gradient(90deg, var(--k-groen-vlak), var(--k-glas) 60%); }
.kiosk-bord__kaart--bij_client { border-left-color: var(--k-blauw); background: linear-gradient(90deg, var(--k-blauw-vlak), var(--k-glas) 60%); }
.kiosk-bord__kaart--klaar { border-left-color: var(--k-grijs); }
/* Niet aanwezig is de grootste groep en hoeft de aandacht niet te trekken --
   maar niet met `opacity`: op een licht bord haalt dat de naam onder het
   leesbare contrast, en juist die naam wordt van een meter afstand gelezen.
   Een zandkleurig vlak zet het kaartje net zo goed naar achteren. */
.kiosk-bord__kaart--afwezig { border-left-color: var(--k-rood); background: var(--k-glas-zacht); }
.kiosk-bord__kaart--gast { border-left-color: var(--k-goud); }
.kiosk-bord__kaart--gast.kiosk-bord__kaart--aanwezig { background: linear-gradient(90deg, var(--k-goud-vlak), var(--k-glas) 60%); }

.kiosk-bord__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    background: var(--k-avatar);
    border: 1px solid var(--k-glas-rand);
    color: var(--k-tekst);
    font-weight: 700;
    font-size: 0.95em;
}
.kiosk-bord__kaart--aanwezig .kiosk-bord__avatar { background: var(--k-groen-vlak); border-color: var(--k-groen-rand); color: var(--k-groen); }
.kiosk-bord__kaart--bij_client .kiosk-bord__avatar { background: var(--k-blauw-vlak); border-color: var(--k-blauw-rand); color: var(--k-blauw); }
.kiosk-bord__kaart--gast .kiosk-bord__avatar { background: var(--k-goud-vlak); border-color: var(--k-goud-rand); color: var(--k-goud); }
/* Eén regel per kaartje. De naam krijgt alle ruimte en is daarmee van een
   afstand te lezen; de status stond eronder en zei hetzelfde als de groepskop
   en de gekleurde rand. De tijd staat rechts en krimpt nooit de naam weg. */
.kiosk-bord__naam {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.15;
    color: var(--k-tekst);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kiosk-bord__kaart--afwezig .kiosk-bord__naam { color: var(--k-tekst-zacht); }
.kiosk-bord__status { font-weight: 700; }
.kiosk-bord__status--aanwezig { color: var(--k-groen); }
.kiosk-bord__status--bij_client { color: var(--k-blauw); }
.kiosk-bord__status--klaar { color: var(--k-tekst-zacht); }
.kiosk-bord__status--afwezig { color: var(--k-rood); }
.kiosk-bord__status--gast { color: var(--k-goud); }
.kiosk-bord__tijden { flex: 0 0 auto; font-size: 0.85em; color: var(--k-tekst-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kiosk-bord__pagina { position: absolute; right: var(--sp-2); bottom: 0; margin: 0; font-size: var(--fs-sm); color: var(--k-tekst-zacht); }

/* Het stipje dat ademt naast "Aanwezig". */
.kiosk-bord__stip {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-right: 0.35em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    box-shadow: 0 0 0 0 currentColor;
    animation: kiosk-adem 2.4s ease-out infinite;
}
/* `currentColor` in plaats van een vaste groentint: het stipje staat ook bij
   een gast (goud) en bij "bij cliënt" (blauw), en ademt nu in zijn eigen kleur. */
@keyframes kiosk-adem {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70% { box-shadow: 0 0 0 0.5em transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* De voet: links de instructie met een pulserende NFC-ring, rechts de knop
   voor bezoekers. Het beeldmerk stond er rechts naast en is eraf; de voet is
   daarmee een kwart lager en de knop staat waar een rechtshandige hem zoekt. */
.kiosk-bord__voet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-2) var(--sp-5);
    background: var(--k-voet);
    border: 1px solid var(--k-glas-rand);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--k-tekst);
    animation: kiosk-opkomen 0.5s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kiosk-bord__instructie { display: flex; align-items: center; gap: var(--sp-4); }
.kiosk-bord__instructie strong { display: block; font-size: var(--fs-md); }
.kiosk-bord__instructie span { font-size: var(--fs-sm); color: var(--k-tekst-zacht); }
.kiosk-bord__nfc {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--k-blauw);
    background: var(--k-blauw-vlak);
    flex: 0 0 auto;
}
.kiosk-bord__nfc svg { width: 28px; height: 28px; }
.kiosk-bord__nfc::before,
.kiosk-bord__nfc::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--k-blauw-rand);
    animation: kiosk-ring 2.8s ease-out infinite;
}
.kiosk-bord__nfc::after { animation-delay: 1.4s; }
@keyframes kiosk-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.9); opacity: 0; }
}
/* `.kiosk-bord__logos` stond hier; het beeldmerk is van de voet af zodat de
   knop voor bezoekers helemaal rechts staat en het bord een regel wint. */
.kiosk-bord__afspraak { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: 0; white-space: nowrap; }

/* "Ik heb een afspraak": dezelfde opbouw als het bord, maar het formulier
   is de buitenste doos en de kaartjes zijn verzendknoppen. De lijst scrolt
   (geen bladeren: een naam die wegdraait terwijl je ernaar reikt is fout). */
.kiosk__scherm:has(.kiosk-bezoeker) { width: 100%; max-width: 1400px; padding: var(--sp-4); }
body.kiosk:has(.kiosk-bezoeker) { align-items: stretch; }
.kiosk-bezoeker__velden {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--k-glas);
    border: 1px solid var(--k-glas-rand);
}
.kiosk-bezoeker__velden .formulier-veld { margin: 0; }
.kiosk-bezoeker__velden .kiosk__invoer { font-size: var(--fs-lg); letter-spacing: 0; width: 100%; }
body.kiosk input[type="search"] {
    background: var(--k-veld);
    border: 1px solid var(--k-glas-rand);
    color: var(--k-tekst);
    border-radius: 0;
}
.kiosk-bezoeker__fout {
    margin: 0;
    padding: var(--sp-3) var(--sp-5);
    background: var(--k-rood-vlak);
    border: 1px solid var(--k-rood);
    color: var(--k-tekst);
    font-size: var(--fs-lg);
}
.kiosk-bezoeker__kaart {
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    border-radius: 0;
}
.kiosk-bezoeker__kaart[hidden] { display: none; }
.kiosk-bezoeker__leeg { padding: var(--sp-4) 0; }
.kiosk-bezoeker .kiosk-bord__voet .kiosk__knop { margin-top: 0; }

/* De paskoppeling per gast op /gasten — het beheerscherm, niet de kiosk.
   Ingeklapt is het één regel in de tabel ("Pas gekoppeld" / "Geen pas"); open
   staat het veld met de knop ernaast. De breedte staat vast, anders springt
   de hele tabel bij het openklappen. */
.gast-pas { min-width: 18rem; }
.gast-pas > summary { cursor: pointer; font-weight: 600; }
.gast-pas > * + * { margin-top: var(--sp-2); }
.gast-pas input[name="uid"] { min-width: 11rem; }

@media (max-width: 900px) {
    .kiosk-bord__tellers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kiosk-bord__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kiosk-bord__voet { flex-direction: column; align-items: flex-start; }
    .kiosk-bezoeker__velden { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    body.kiosk,
    body.kiosk *,
    body.kiosk *::before,
    body.kiosk *::after { animation: none !important; transition: none !important; }
    .kiosk__uitkomst .kiosk__icoon svg { stroke-dashoffset: 0; }
}

/* Verzuimcijfers (migratie 117): een balkje per maand, breedte t.o.v. de hoogste maand. */
.verzuim-balk { display: inline-block; height: 0.8rem; min-width: 2px; background: var(--alert); border-radius: var(--radius-sm); vertical-align: middle; }

/* Verlof (migratie 118): de roosterhint boven de beoordeelknoppen. */
.verlof-hint { display: block; margin-bottom: var(--sp-1); }

/* In-/uitdienstchecklist (migratie 119). */
.checklist__punt { display: flex; align-items: center; gap: var(--sp-2); }
.checklist__punt--af .checklist__naam { color: var(--kleur-tekst-zacht); }
.checklist__merk { display: inline-flex; color: var(--waarschuwing); }
.checklist__punt--af .checklist__merk { color: var(--succes); }
.checklist__naam { flex: 1 1 auto; }
.contract-nieuw { margin-top: var(--sp-3); }
.contract-nieuw > summary { list-style: none; cursor: pointer; display: inline-block; }
.contract-nieuw > summary::-webkit-details-marker { display: none; }

/* Bekwaamhedenmatrix (migratie 120). */
.matrix th { font-size: var(--fs-xs); }
.matrix__cel { text-align: center; white-space: nowrap; }

/* Openbare pagina's (migratie 122): ervaringsmeting via een link. */
.openbaar { background: var(--zand-50); margin: 0; }
.openbaar__scherm { max-width: 44rem; margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
.openbaar__kaart { background: var(--vlak); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--schaduw-sm); }
.schaal-keuze--groot .schaal-optie span { min-width: 2.6rem; padding: var(--sp-2) 0; font-size: var(--fs-lg); }
.schaal-keuze--groot .schaal-optie--nvt span { padding-inline: var(--sp-2); font-size: var(--fs-basis); }
.knop--groot { font-size: var(--fs-lg); padding: var(--sp-3) var(--sp-6); }
.link-klein { font-size: var(--fs-xs); word-break: break-all; }
/* De intake via de link (migratie 143): de stappen als rij knoppen, want in
   een kaart van 44rem past geen zijbalk. 44px hoog: dit wordt op een
   telefoon ingevuld. */
.intake-link__stappen { list-style: none; margin: var(--sp-4) 0 var(--sp-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.intake-link__stap { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil); font-size: var(--fs-sm); color: var(--kleur-tekst); text-decoration: none; }
.intake-link__stap:hover { border-color: var(--merk-rand); }
.intake-link__stap--klaar { color: var(--kleur-tekst-zacht); }
.intake-link__stap--actief { background: var(--merk-zacht); border-color: var(--merk-rand); color: var(--kleur-tekst); font-weight: 600; }
.intake-link__stap--insturen { border-style: dashed; }
.intake-link__verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Kwaliteitsbeeld: cijferblokken in het bewerkscherm. */
.cijferraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--sp-3); }
.cijferblok { border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); padding: var(--sp-3); }
.cijferblok h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.cijferblok dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-3); font-size: var(--fs-sm); }
.cijferblok dt { color: var(--kleur-tekst-zacht); }
.cijferblok dd { margin: 0; font-weight: 600; text-align: right; }
.kaart-grid--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .kaart-grid--drie { grid-template-columns: 1fr; } }

/* Audits (migratie 123): één punt per rij met oordeel, toelichting, bewijs. */
.auditpunt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr); gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--kleur-rand-zacht); }
.auditpunt:first-of-type { border-top: 0; }
.auditpunt__oordeel { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.auditpunt__keuze { white-space: nowrap; }
.auditpunt__velden { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.auditpunt__velden input { flex: 1 1 14rem; }
.auditpunt--niet { background: var(--alert-licht); border-radius: var(--radius-sm); padding-left: var(--sp-2); padding-right: var(--sp-2); }
.auditpunt--deels { background: var(--waarschuwing-licht); border-radius: var(--radius-sm); padding-left: var(--sp-2); padding-right: var(--sp-2); }
@media (max-width: 800px) { .auditpunt { grid-template-columns: 1fr; } }
/* Normenkader-cockpit op het kwaliteitsdashboard. */
.cockpit__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.cockpit__thema { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); }
.cockpit__regels { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }

/* Meldcode (migratie 124): de vijf stappen als kaarten; een vastgelegde stap krijgt een groene rand. */
.meldcode-stap--gedaan { border-left: 4px solid var(--succes); }

/* Dossier in tabbladen (migratie 129): links, geen JS, de tab zit in de URL. */
.dossier-tabs {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--kleur-rand);
    margin: var(--sp-4) 0 var(--sp-4);
}

.dossier-tabs__tab {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--kleur-tekst-zacht);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: -1px;
}

.dossier-tabs__tab:hover { color: var(--kleur-tekst); background: var(--zand-50); }

.dossier-tabs__tab--actief {
    color: var(--merk-diep);
    background: var(--vlak);
    border-color: var(--kleur-rand);
    border-bottom: 1px solid var(--vlak);
}

.dossier-linkkaart__lijst { display: grid; gap: var(--sp-2); }

.dossier-linkkaart__link {
    display: flex;
    flex-direction: column;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--kleur-rand-zacht);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--kleur-tekst);
}

.dossier-linkkaart__link:hover { border-color: var(--merk-rand); background: var(--merk-zacht); }
.dossier-linkkaart__link small { color: var(--kleur-tekst-zacht); }

/* Mijn beveiliging: de TOTP-sleutel om over te typen. */
.beveiliging__qr {
    margin: var(--sp-2) 0;
}

/* Wit blijft wit, ook in de donkere modus: een scanner wil contrast, geen thema. */
.beveiliging__qr svg {
    display: block;
    width: min(220px, 100%);
    height: auto;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
}

.beveiliging__handmatig {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

.beveiliging__handmatig summary {
    cursor: pointer;
    color: var(--kleur-tekst);
}

.beveiliging__sleutel {
    display: inline-block;
    margin: var(--sp-1) 0;
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-md);
    letter-spacing: 0.08em;
    background: var(--zand-50);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-sm);
    user-select: all;
}

/* ---------------------------------------------------------------------------
   Rapportage dagbesteding: weekscherm en tekstassistent (migratie 133)
   --------------------------------------------------------------------------- */

/* Tien dagdelen onder elkaar; doelen en activiteiten naast elkaar zolang het past. */
.week-dagdeel h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
}

.week-dagdeel__kolommen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}

.week-dagdeel__kolommen h3 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
}

.week-dagdeel__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-1) var(--sp-3);
    align-items: center;
    padding: var(--sp-1) 0;
    border-bottom: 1px solid var(--kleur-rand-zacht);
}

.week-dagdeel__item textarea {
    grid-column: 1 / -1;
    margin: 0;
}

/* De toelichting uit de catalogus (Instellingen → Formulieren) onder een
   doel op 13A/13B en het doelenscherm. Ingesprongen tot onder de tekst van
   het vakje, zodat hij bij het doel hoort en niet bij het volgende. */
.doel-toelichting {
    display: block;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    margin: 0 0 var(--sp-1) 1.6em;
}

.week-dagdeel__item .doel-toelichting {
    grid-column: 1 / -1;
    margin-top: calc(-1 * var(--sp-1));
}

/* Doel tegenover de laatste evaluatie (DoelToets), onder elk doel. */
.doel-toets {
    display: block;
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
    margin: 0 0 var(--sp-2) 1.6em;
}

.week-dagdeel__item .doel-toets { grid-column: 1 / -1; }

/* De periode van de doeltelling (overzicht en weekscherm), één regel. */
.telling-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
}
.telling-filter label,
.telling-filter__titel {
    margin: 0;
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kleur-tekst-zacht);
}
.telling-filter input[type="date"] { width: auto; margin: 0; }
.telling-filter__knoppen { display: flex; gap: var(--sp-2); }

/* Snelle notities onder "Bijzonderheden" (migratie 155). */
.snelnotities {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 var(--sp-4);
}

.snelnotities[hidden] { display: none; }

.snelnotities__kop {
    font-size: var(--fs-klein);
    color: var(--kleur-tekst-zacht);
}

.snelnotitie {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-pil);
    background: var(--vlak);
    color: var(--kleur-tekst);
    font: inherit;
    font-size: var(--fs-klein);
    padding: var(--sp-1) var(--sp-3);
    min-height: 32px;
    cursor: pointer;
}

.snelnotitie:hover { border-color: var(--merk-rand); }

.snelnotitie[aria-pressed="true"] {
    background: var(--merk-zacht);
    border-color: var(--merk);
    color: var(--merk-tekst);
}

.snelnotitie:focus-visible {
    outline: 2px solid var(--merk);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .snelnotitie { min-height: 44px; }
}

/* Per doel (migratie 157): ingeklapt achter een kleine knop onder de notitie. */
.snelnotities--doel { margin: var(--sp-1) 0 var(--sp-2); grid-column: 1 / -1; }

.snelnotities__open {
    border: 0;
    background: none;
    padding: var(--sp-1) 0;
    font: inherit;
    font-size: var(--fs-klein);
    color: var(--merk-tekst);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.snelnotities__open[aria-expanded="true"] { text-decoration: none; font-weight: 600; }
.snelnotities__open:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; }

.snelnotities__lijst { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex-basis: 100%; }
.snelnotities__lijst[hidden] { display: none; }

/* Weekscherm 13B: hoeveel geplaatste dagdelen al een rapportage hebben. */
.week-voortgang {
    flex: 1 1 14rem;
    min-width: 12rem;
    max-width: 26rem;
}

.week-voortgang__tekst {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

.week-voortgang__tekst strong {
    font-size: var(--fs-md);
    color: var(--kleur-tekst);
    font-variant-numeric: tabular-nums;
}

.week-voortgang__balk {
    height: 8px;
    margin-top: var(--sp-1);
    background: var(--zand-200);
    border-radius: var(--radius-pil);
    overflow: hidden;
}

.week-voortgang__balk span {
    display: block;
    height: 100%;
    background: var(--merk);
    border-radius: var(--radius-pil);
    transition: width 0.4s ease;
}

.week-voortgang--klaar .week-voortgang__balk span { background: var(--succes); }
.week-voortgang--klaar .week-voortgang__tekst strong { color: var(--succes); }

.week-voortgang__open { font-size: var(--fs-sm); white-space: nowrap; }

/* De kleefbalk van het weekscherm: assistent links, voortgang in het
   midden, opslaan helemaal rechts; eronder de uitleg en de weekknoppen. */
.week-balk { gap: var(--sp-3) var(--sp-4); }
.week-balk__assistent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.week-balk__assistent .assistent__status { font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); }
.week-balk__opslaan { margin-left: auto; }

.week-balk__onder {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--kleur-rand-zacht);
    color: var(--kleur-tekst-zacht);
}

.week-balk__weken { display: flex; gap: var(--sp-2); }

/* Op een groot scherm een zwevende kaart met lucht aan de zijkanten; op de
   telefoon blijft het de balk over de volle breedte (zie .kleef-balk). */
@media (min-width: 641px) {
    .week-balk {
        bottom: var(--sp-3);
        margin-top: var(--sp-5);
        padding: var(--sp-4) var(--sp-5);
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius);
        box-shadow: 0 -2px 12px rgba(58, 46, 34, 0.06), var(--schaduw-sm);
    }
}

/* Rapportageoverzicht: het verslag afdrukken, ingeklapt tot je het nodig hebt. */
.verslag-kiezer > summary { cursor: pointer; list-style: revert; }
.verslag-kiezer > summary h2 { display: inline; margin: 0; }
.verslag-kiezer__formulier { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.verslag-kiezer__groep { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-1); }
.verslag-kiezer__groep legend { font-weight: 600; margin-bottom: var(--sp-1); }

.week-assistent { display: grid; gap: var(--sp-2); }
.week-assistent .veld-hint { margin: 0; }

/* Een dagdeel zonder plaatsing: niets in te vullen, dus naar achteren. */
.week-dagdeel--leeg {
    background: var(--zand-50);
    box-shadow: none;
}

.week-dagdeel--leeg h2 { color: var(--kleur-tekst-zacht); margin-bottom: var(--sp-1); }

@media (prefers-reduced-motion: reduce) {
    .week-voortgang__balk span { transition: none; }
}

/* Het voorbeeld op het beheerscherm: dezelfde knoppen, niet klikbaar. */
.snelnotities--voorbeeld {
    padding: var(--sp-3);
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--radius-sm);
    min-height: 48px;
}

.snelnotities--voorbeeld .snelnotitie {
    display: inline-flex;
    align-items: center;
    cursor: default;
}

/* Beheerlijst van de snelle notities. */
.notitielijst {
    list-style: decimal;
    padding-left: var(--sp-6);
    margin: var(--sp-4) 0 var(--sp-2);
    display: grid;
    gap: var(--sp-2);
    max-width: 44rem;
}

.notitielijst__rij {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.notitielijst__rij input { flex: 1; min-width: 0; }

/* Op een telefoon laten drie knoppen naast het vak te weinig tekst over. */
@media (max-width: 480px) {
    .notitielijst { padding-left: var(--sp-5); gap: var(--sp-5); }
    .notitielijst__rij { flex-wrap: wrap; justify-content: flex-end; }
    .notitielijst__rij input { flex-basis: 100%; }
}

.notitielijst__acties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.week-dagdeel__scores {
    display: inline-flex;
    gap: var(--sp-2);
    white-space: nowrap;
}

.week-dagdeel__scores .checkbox-label { margin: 0; }

/* minmax(0, …): een "1fr" kolom is minstens zo breed als zijn breedste
   inhoud, en dan schoof het weekscherm op een telefoon 100px zijwaarts
   (telefoonronde 05-10-2026). Op een telefoon staan de scoreknoppen onder
   de naam van het doel of de activiteit in plaats van ernaast. */
@media (max-width: 760px) {
    .week-dagdeel__kolommen { grid-template-columns: minmax(0, 1fr); }
    .week-dagdeel__item { grid-template-columns: minmax(0, 1fr); }
}

/* De knoppen van de assistent onder het rapportageveld. */
.assistent {
    margin: var(--sp-2) 0 var(--sp-4);
    padding: var(--sp-3);
    background: var(--merk-zacht);
    border: 1px solid var(--merk-rand);
    border-radius: var(--radius-sm);
}

.assistent__knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

.assistent__status {
    font-size: var(--fs-sm);
    color: var(--kleur-tekst-zacht);
}

.assistent__correctie { margin-top: var(--sp-2); }
.assistent__correctie summary { cursor: pointer; font-size: var(--fs-sm); }
.assistent__correctie textarea { margin: var(--sp-2) 0; }
.assistent .veld-hint { margin-bottom: 0; }

/* Weekplanning PV/VP (formulier 13, migratie 135). Achtentwintig smalle
   kolommen -- zeven dagen maal vier dagdelen -- naast een brede kolom met de
   handeling. De tabel staat in een .tabel-scroll, dus hij mag breder zijn dan
   het scherm; zonder min-width knijpt hij de dagdelen onleesbaar samen.

   De lijn links van elk eerste dagdeel is wat op papier de dagscheiding is.
   Zonder die lijn is niet te zien waar dinsdag begint. */
.weekplanning { min-width: 46rem; }
.weekplanning th,
.weekplanning td { text-align: center; padding: var(--sp-1) var(--sp-1); }
.weekplanning th[scope="row"],
.weekplanning thead th:first-child { text-align: left; white-space: normal; }
.weekplanning thead th { font-size: var(--fs-xs); white-space: nowrap; }
.weekplanning thead th abbr { text-decoration: none; border-bottom: 0; }
.weekplanning__dagrand { border-left: 2px solid var(--kleur-rand); }
.weekplanning__vink { color: var(--merk); font-weight: 600; }
.weekplanning__groep th { background: var(--zand-100); color: var(--merk-diep); text-align: left; }

/* ---------------------------------------------------------------------------
   Boodschappen en inkoop (migratie 144)

   De lijst wordt in de winkel gebruikt, op een telefoon, vaak met één hand:
   grote vinkvakken, een gekocht artikel doorgestreept maar leesbaar (geen
   opacity -- dat zakt onder het contrast), en de acties per regel achter
   één knop zodat de rij zelf rustig blijft.
   --------------------------------------------------------------------------- */
.inkoop-acties { flex-wrap: wrap; margin-bottom: var(--sp-4); }
/* .melding is flex en wint anders van het hidden-attribuut. */
.melding[data-inkoop-ververs-melding][hidden] { display: none; }
.inkoop-meta { color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); }
.inkoop-kop { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.inkoop-notitie { background: var(--zand-100); border-left: 3px solid var(--merk-rand); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); }
.inkoop-over { color: var(--alert); font-weight: 600; }
.inkoop-werklijst { list-style: none; margin: 0; padding: 0; }
.inkoop-werklijst li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--kleur-rand-zacht); }
.inkoop-werklijst li:last-child { border-bottom: 0; }

.inkoop-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.inkoop-kaart {
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-4); background: var(--vlak); border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-lg); color: var(--kleur-tekst); text-decoration: none;
}
.inkoop-kaart:hover { border-color: var(--merk-rand); box-shadow: var(--schaduw-sm); }
.inkoop-kaart:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; }
.inkoop-kaart--eigen { border-left: 3px solid var(--merk); }
.inkoop-kaart__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.inkoop-kaart__naam { font-weight: 600; font-size: var(--fs-md); }

.inkoop-voortgang { display: block; height: 6px; background: var(--zand-200); border-radius: var(--radius-pil); overflow: hidden; margin: var(--sp-2) 0; }
.inkoop-voortgang__balk { display: block; height: 100%; background: var(--succes); border-radius: var(--radius-pil); transition: width .2s ease; }
.inkoop-stand__cijfers { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }

.inkoop-menu { position: relative; }
.inkoop-menu > summary { list-style: none; cursor: pointer; }
.inkoop-menu > summary::-webkit-details-marker { display: none; }
.inkoop-regel .inkoop-menu > summary {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; border-radius: var(--radius); color: var(--kleur-tekst-zacht); font-size: var(--fs-lg); line-height: 1;
}
.inkoop-regel .inkoop-menu > summary:hover { background: var(--zand-100); }
.inkoop-menu__inhoud {
    position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 20;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
    min-width: 230px; padding: var(--sp-2); background: var(--vlak);
    border: 1px solid var(--kleur-rand); border-radius: var(--radius); box-shadow: var(--schaduw);
}
.inkoop-menu--kop .inkoop-menu__inhoud { left: 0; right: auto; }
.inkoop-menu__inhoud form { margin: 0; }
.inkoop-menu__inhoud .knop--tekst { width: 100%; justify-content: flex-start; text-align: left; }
.inkoop-menu__formulier { display: flex; gap: var(--sp-1); align-items: center; }
.inkoop-menu__formulier input, .inkoop-menu__formulier select { flex: 1; min-width: 0; }
.inkoop-menu__formulier .knop--tekst { width: auto; white-space: nowrap; }

/* Toevoegen (migratie 146): artikel, aantal, knop op één regel; de rest
   achter een uitklap. Het suggestielijstje hangt onder het artikelveld. */
.inkoop-snel__rij { display: flex; align-items: flex-end; gap: var(--sp-2); }
.inkoop-snel__artikel { position: relative; flex: 1; min-width: 0; }
.inkoop-snel__aantal { width: 5rem; flex: none; }
.inkoop-snel__knop { flex: none; min-height: 40px; }
.inkoop-snel__meer { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); padding-top: var(--sp-2); }
.inkoop-suggesties {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: var(--sp-1) 0 0; padding: var(--sp-1);
    list-style: none; background: var(--vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius); box-shadow: var(--schaduw);
}
.inkoop-suggesties[hidden] { display: none; }
.inkoop-suggesties__knop {
    display: block; width: 100%; min-height: 40px; padding: var(--sp-2) var(--sp-3); text-align: left;
    background: none; border: 0; border-radius: var(--radius-sm); color: var(--kleur-tekst); font: inherit; cursor: pointer;
}
.inkoop-suggesties__knop:hover, .inkoop-suggesties__knop:focus-visible { background: var(--merk-zacht); }
.inkoop-uitklap { margin-top: var(--sp-3); }
.inkoop-uitklap > summary { cursor: pointer; color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); min-height: 32px; display: flex; align-items: center; }
.inkoop-uitklap .inkoop-chips { padding-top: var(--sp-2); }

/* Nieuwe lijst: kostenplaats als knoppen, en de vaste producten als
   keuzelijst met - en + (grote tikdoelen: dit gebeurt op een telefoon). */
.inkoop-segment { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.inkoop-segment__knop {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4);
    border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil); background: var(--vlak);
    color: var(--kleur-tekst); text-decoration: none; font-weight: 600;
}
.inkoop-segment__knop--actief { background: var(--kleur-primair); border-color: var(--kleur-primair); color: #fff; }
.inkoop-nieuw__velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.inkoop-kies__lijstnaam { margin: var(--sp-4) 0 0; font-size: var(--fs-md); }
.inkoop-kies__categorie { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--kleur-tekst-zacht); }
.inkoop-kies { list-style: none; margin: 0; padding: 0; }
.inkoop-kies__regel {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm);
}
.inkoop-kies__regel--gekozen { background: var(--merk-zacht); }
/* Het label is hier de hele regel en geen veldlabel: gewone tekstkleur en
   -maat, en het vinkje blijft links staan als een lange naam afbreekt. */
.inkoop-kies__vink {
    display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; min-height: 44px; margin: 0;
    cursor: pointer; color: var(--kleur-tekst); font-size: var(--fs-tekst); font-weight: 400; text-transform: none; letter-spacing: 0;
}
.inkoop-kies__vink input { width: 22px; height: 22px; flex: none; margin: 0; }
.inkoop-kies__tekst { display: flex; flex-direction: column; min-width: 0; }
.inkoop-kies__artikel { font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.inkoop-stapper { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; }
.inkoop-stapper__knop {
    width: 40px; height: 40px; border: 1px solid var(--kleur-rand); border-radius: var(--radius);
    background: var(--vlak); color: var(--kleur-tekst); font-size: var(--fs-lg); line-height: 1; cursor: pointer;
}
.inkoop-stapper__knop:active { background: var(--zand-100); }
.inkoop-stapper__aantal { width: 2.8rem; padding-left: 0; padding-right: 0; text-align: center; }
.inkoop-nieuw__opslaan {
    position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-3) 0; background: var(--kleur-pagina);
}

/* Een vaste lijst is een rustige productenlijst, geen boodschappenlijst. */
.inkoop-producten { list-style: none; margin: 0; padding: 0; }
.inkoop-producten__regel { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--kleur-rand-zacht); }
.inkoop-producten__regel:last-child { border-bottom: 0; }
.inkoop-producten__aantal { min-width: 4.5rem; color: var(--kleur-tekst-zacht); font-variant-numeric: tabular-nums; }
.inkoop-producten__artikel { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.inkoop-producten__artikel .inkoop-meta { font-weight: 400; margin-left: var(--sp-1); }
.inkoop-producten__acties { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
.inkoop-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.inkoop-chip { cursor: pointer; min-height: 32px; font: inherit; font-size: var(--fs-sm); }

.inkoop-groep__kop { display: flex; align-items: center; gap: var(--sp-2); }
.inkoop-regels { list-style: none; margin: 0; padding: 0; }
.inkoop-regel {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) 0; border-bottom: 1px solid var(--kleur-rand-zacht);
}
.inkoop-regel:last-child { border-bottom: 0; }
.inkoop-regel:target { background: var(--merk-zacht); }
.inkoop-regel__vink { margin: 0; }
.inkoop-regel__tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); min-width: 0; }
.inkoop-regel__artikel { font-weight: 600; overflow-wrap: anywhere; }
.inkoop-regel__opmerking { color: var(--kleur-tekst); font-size: var(--fs-sm); }
.inkoop-regel--gekocht .inkoop-regel__artikel,
.inkoop-regel--gekocht .inkoop-regel__opmerking { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--kleur-tekst-zacht); font-weight: 400; }
.inkoop-regel--niet-gekocht .inkoop-regel__artikel { color: var(--waarschuwing); font-style: italic; font-weight: 400; }

.inkoop-vink {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    border: 2px solid var(--kleur-rand); border-radius: var(--radius); background: var(--vlak); color: transparent;
}
.inkoop-vink:hover { border-color: var(--succes); }
.inkoop-vink:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; }
.inkoop-vink[aria-pressed="true"] { background: var(--succes); border-color: var(--succes); color: #FFFFFF; }
.inkoop-vink:disabled { cursor: not-allowed; opacity: 1; background: var(--zand-100); }
.inkoop-vink[aria-pressed="true"]:disabled { background: var(--succes-donker); border-color: var(--succes-donker); }

.inkoop-vinkje { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 var(--sp-4) var(--sp-2) 0; font-weight: 400; }
.inkoop-hulpinkopers { border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius); padding: var(--sp-3); }
.inkoop-hulpinkopers--kort { margin-top: var(--sp-3); }
.inkoop-hulpinkopers--kort .veld-hint { flex-basis: 100%; margin: var(--sp-1) 0 0; }
.inkoop-vinkje--regel { display: flex; min-height: 36px; }
/* Hulpinkopers op Nieuwe lijst: een naam om aan te tikken, aangevinkt in
   de merkkleur. Het vakje zelf blijft (toetsenbord en schermlezer). */
.inkoop-keuzechip {
    display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 var(--sp-2) var(--sp-2) 0;
    min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil);
    background: var(--vlak); color: var(--kleur-tekst); font-size: var(--fs-tekst); font-weight: 400; cursor: pointer;
}
.inkoop-keuzechip:has(input:checked) { background: var(--merk-zacht); border-color: var(--merk-rand); font-weight: 600; }
.inkoop-keuzechip input { margin: 0; }
.inkoop-keuzechip[hidden] { display: none; }
.inkoop-afrekenregels { list-style: none; margin: 0; padding: 0; }
.inkoop-afrekenregels li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--kleur-rand-zacht); }
.inkoop-afrekenregels .inkoop-vinkje { margin: 0; flex-wrap: wrap; }
.inkoop-totaal { font-size: var(--fs-md); margin: var(--sp-2) 0 0; }
.inkoop-bonnen { list-style: none; margin: 0; padding: 0; }
.inkoop-bonnen li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; }

.inkoop-twee { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); }
.inkoop-gegevens { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-4); }
.inkoop-gegevens dt { color: var(--kleur-tekst-zacht); }
.inkoop-gegevens dd { margin: 0; }
.inkoop-bedragen { width: 100%; }
.inkoop-bedragen__totaal td { border-top: 2px solid var(--kleur-rand); font-weight: 600; }
.inkoop-bon { display: block; margin-bottom: var(--sp-3); }
.inkoop-bon img { display: block; max-width: 100%; max-height: 560px; border: 1px solid var(--kleur-rand); border-radius: var(--radius); }
.inkoop-uitgaven { overflow-x: auto; }
.inkoop-uitgaven td { vertical-align: top; }

@media (max-width: 760px) {
    .inkoop-snel__rij { flex-wrap: wrap; }
    .inkoop-snel__artikel { flex-basis: 100%; }
    .inkoop-snel__aantal { flex: 1; }
    .inkoop-snel__knop { flex: 2; min-height: 44px; }
    .inkoop-suggesties__knop { min-height: 44px; }
    .inkoop-stapper__knop { width: 44px; height: 44px; }
    .inkoop-nieuw__opslaan .knop { flex: 1; min-height: 48px; justify-content: center; }
    .inkoop-producten__regel { flex-wrap: wrap; }
    .inkoop-twee { grid-template-columns: 1fr; }
    .inkoop-vink { width: 44px; height: 44px; }
    .inkoop-regel .inkoop-menu > summary { min-width: 44px; min-height: 44px; }
    .inkoop-chip { min-height: 44px; }
    .inkoop-keuzechip, .inkoop-vinkje--regel { min-height: 44px; }
    .inkoop-menu__inhoud { position: fixed; left: var(--sp-4); right: var(--sp-4); top: auto; bottom: var(--sp-4); min-width: 0; }
}

/* ---------- HKZ-controle (migratie 160) ---------- */

/* De weg terug naar de controle, op elk invoerscherm waar je vanuit de
   controle naartoe ging. Bovenaan en opvallend: wie een gat dicht en daarna
   de controle kwijt is, begint weer bij het menu. */
.hkz-werkbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    background: var(--info-licht);
    border: 1px solid var(--info-rand);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-sm);
    color: var(--kleur-tekst);
}
.hkz-werkbalk__tekst { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 1 1 auto; font-weight: 600; }
.hkz-werkbalk__sluit { margin: 0; }

.hkz-keuze__zoek { margin-bottom: var(--sp-2); }
.hkz-keuze__lijst { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); }
.hkz-keuze__lijst li { border-top: 1px solid var(--kleur-rand-zacht); }
.hkz-keuze__lijst li:first-child { border-top: 0; }
.hkz-keuze__lijst label { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); cursor: pointer; }
.hkz-keuze__geboren { margin-left: auto; color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); }

.hkz-dossiers td { vertical-align: top; }
.hkz-medewerker { border-top: 1px solid var(--kleur-rand-zacht); padding: var(--sp-3) 0; }
.hkz-medewerker:first-of-type { border-top: 0; }
.hkz-medewerker > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); cursor: pointer; }
.hkz-medewerker__naam { font-weight: 600; }
.hkz-medewerker__waarom { flex-basis: 100%; color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); }
.hkz-medewerker .compleet__punten { margin-top: var(--sp-3); }

@media (max-width: 760px) {
    .hkz-keuze__lijst label { min-height: 44px; }
    .hkz-werkbalk .knop { min-height: 44px; }
}
.hkz-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.hkz-kop h2 { margin: 0; }

/* Kwaliteit → Te doen (8 oktober 2026): alle controles op één scherm. De
   punten gebruiken de lijst van "Nog te doen" (.compleet__punten); hier
   alleen de filterbalk, de kop per groep en de kleur van de linkerrand. */
.te-doen__balk { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-3); }
.te-doen__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.te-doen__filter { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil); color: var(--kleur-tekst); text-decoration: none; font-size: var(--fs-sm); background: var(--vlak); }
.te-doen__filter:hover, .te-doen__filter:focus-visible { border-color: var(--merk-rand); }
.te-doen__filter--actief { border-color: var(--merk); background: var(--merk-zacht); color: var(--merk-tekst); font-weight: 600; }
.te-doen__filter--alert:not(.te-doen__filter--actief) .te-doen__telling { color: var(--alert-donker); }
.te-doen__filter--waarschuwing:not(.te-doen__filter--actief) .te-doen__telling { color: var(--waarschuwing-donker); }
.te-doen__telling { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.te-doen__domein { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-tekst); }
.te-doen__groep { border-left: 3px solid var(--kleur-rand); margin-bottom: var(--sp-3); }
.te-doen__groep--alert { border-left-color: var(--alert-donker); }
.te-doen__groep--waarschuwing { border-left-color: var(--waarschuwing-donker); }
.te-doen__groep--info { border-left-color: var(--info-rand); }
.te-doen__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.te-doen__titel { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-tekst); }
.te-doen__samenvatting { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.te-doen__punt .status-pil { flex-shrink: 0; min-width: 6.5rem; justify-content: center; }
.te-doen__tekst { font-weight: 600; }
.te-doen__meer > summary { cursor: pointer; padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--merk-tekst); }

@media (max-width: 640px) {
    .te-doen__punt { flex-wrap: wrap; }
    .te-doen__punt .status-pil { min-width: 0; }
    .te-doen__filter { min-height: 44px; }
}

/* ---------- Zorg per dienst (15-10-2026) ----------
   Een pil per dienst boven de drie schermen; het rapportageraster met een
   gekleurde cel per bezoek en de rapportage ernaast. */
.dienstkeuze { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); }
.dienstkeuze__pil {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pil);
    border: 1px solid var(--kleur-rand); background: var(--vlak);
    color: var(--kleur-tekst); font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
}
.dienstkeuze__pil:hover { border-color: var(--merk); }
.dienstkeuze__pil.is-actief { background: var(--merk); border-color: var(--merk); color: #fff; }
.dienstkeuze__tal { font-size: var(--fs-xs); padding: 0 var(--sp-2); border-radius: var(--radius-pil); background: var(--zand-100); color: var(--kleur-tekst-zacht); }
.dienstkeuze__pil.is-actief .dienstkeuze__tal { background: rgba(255, 255, 255, .22); color: inherit; }
.dienstkeuze__pil--onbekend { border-style: dashed; border-color: var(--waarschuwing-rand); }
.dienstkeuze__pil--module { border-style: dashed; color: var(--kleur-tekst-zacht); font-weight: 500; }

.zpd-twee { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 1100px) { .zpd-twee { grid-template-columns: minmax(0, 1fr); } }
.zpd-raster th.zpd-raster__dag { text-align: center; }
.zpd-raster td.zpd-raster__cel { text-align: center; vertical-align: middle; }
.zpd-cel {
    display: inline-block; min-width: 4.2rem; margin: 1px; padding: 3px var(--sp-2);
    border-radius: var(--radius-sm); border: 1px solid var(--kleur-rand-zacht);
    background: var(--zand-100); color: var(--kleur-tekst-zacht);
    font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none;
}
.zpd-cel--ok { background: var(--succes-licht); color: var(--succes-donker); border-color: var(--succes-rand); }
.zpd-cel--mist { background: var(--alert-licht); color: var(--alert-donker); border-color: var(--alert); }
.zpd-cel--let { background: var(--waarschuwing-licht); color: var(--waarschuwing-donker); border-color: var(--waarschuwing-rand); }
a.zpd-cel:hover { border-color: var(--merk); }
.zpd-cel.is-gekozen { outline: 2px solid var(--merk); outline-offset: 1px; }
.zpd-legenda { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.zpd-legenda .zpd-cel { min-width: 0; }
.zpd-rapport { position: sticky; top: var(--sp-4); }
.zpd-rapport__stuk { padding: var(--sp-3) 0; border-top: 1px solid var(--kleur-rand-zacht); }
.zpd-rapport__stuk h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.zpd-rapport__tekst { margin: 0 0 var(--sp-1); line-height: 1.6; max-width: 70ch; }
.zpd-rapport__stuk small, .zpd-sub { color: var(--kleur-tekst-zacht); display: block; }
.zpd-balk { display: block; width: 7.5rem; height: 6px; margin-top: var(--sp-1); border-radius: var(--radius-pil); background: var(--zand-100); overflow: hidden; }
.zpd-balk i { display: block; height: 100%; background: var(--merk); border-radius: inherit; }
.zpd-balk--bijna i { background: var(--waarschuwing); }
.zpd-balk--over i { background: var(--alert); }
/* Filter, de stip voor "nog niet gelezen" en de teamreacties. */
.zpd-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.zpd-filter select { width: auto; min-width: 12rem; margin: 0; }
.zpd-filter__vinkje { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 500; }
.zpd-cel--nieuw { position: relative; padding-right: 14px; }
.zpd-cel--nieuw::after {
    content: ""; position: absolute; top: 50%; right: 5px; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: var(--merk);
}
.zpd-reacties { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.zpd-reacties li { background: var(--zand-100); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
.zpd-reacties p { margin: var(--sp-1) 0 0; }
.zpd-reacties small { color: var(--kleur-tekst-zacht); margin-left: var(--sp-2); }
.zpd-reactieform { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.zpd-reactieform textarea { margin: 0; }
.zpd-reactieform .knop { justify-self: start; }

/* Signalen per dienst: een streep in de kleur van de ernst, de knop rechts. */
.zpd-signalen { list-style: none; margin: 0; padding: 0; }
.zpd-signaal {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--kleur-rand-zacht);
    border-left: 4px solid var(--info);
}
.zpd-signaal:last-child { border-bottom: 0; }
.zpd-signaal p { margin: 2px 0 0; color: var(--kleur-tekst-zacht); }
.zpd-signaal--fout { border-left-color: var(--alert); }
.zpd-signaal--let { border-left-color: var(--waarschuwing); }

/* Zorg per dienst, fase 3: het dienstoverzicht. */
.zpd-overzicht .paneel__kop h2 { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.zpd-doelen, .zpd-handelingen, .zpd-lijstjes { list-style: none; margin: 0; padding: 0; }
.zpd-doelen li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--kleur-rand-zacht); }
.zpd-doelen li:first-child { border-top: 0; }
.zpd-doelen .status-pil { flex: none; }
.zpd-handelingen { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0; }
.zpd-handelingen li, .zpd-lijstjes li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.zpd-handelingen .zpd-sub { flex-basis: 100%; padding-left: calc(5.5rem + var(--sp-2)); }
.zpd-handelingen .zpd-cel { min-width: 5.5rem; }
.zpd-lijstjes { display: grid; gap: var(--sp-1); }
.zpd-knoppen { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (max-width: 640px) {
    .zpd-doelen li { flex-direction: column; }
    .zpd-handelingen .zpd-sub { padding-left: 0; }
}

/* ==========================================================================
   Sjablooneditor (Instellingen → Documentsjablonen → Ontwerpen, migratie 179)
   Een ontwerpvlak met banden; maten komen uit app.js in pixels per mm.
   Alleen voor een laptop of pc: op een smal scherm een melding.
   ========================================================================== */
.sjabloon-editor__smal { display: none; }
@media (max-width: 900px) { .sjabloon-editor__smal { display: block; } }

.sjabloon-editor { margin-bottom: var(--sp-6); }
.sjabloon-editor__balk {
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center;
    position: sticky; top: 0; z-index: 5;
    padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
    background: var(--vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm);
    box-shadow: var(--schaduw-sm);
}
.sjabloon-editor__groep { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.sjabloon-editor__groep--rechts { margin-left: auto; }
.sjabloon-editor__klein { font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); display: inline-flex; gap: var(--sp-1); align-items: center; }
.sjabloon-editor__status { font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.sjabloon-editor__fouten {
    margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--alert); border-radius: var(--radius-sm); font-size: var(--fs-sm);
}
.sjabloon-editor__fouten p { margin: 0 0 var(--sp-1); }

.sjabloon-editor__werk { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 16rem; gap: var(--sp-3); align-items: start; }
@media (max-width: 1100px) { .sjabloon-editor__werk { grid-template-columns: 13rem minmax(0, 1fr) 14rem; } }
@media (max-width: 900px) { .sjabloon-editor__werk { grid-template-columns: 1fr; } }

.sjabloon-editor__zij {
    background: var(--vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm);
    max-height: calc(100vh - 8rem); overflow-y: auto; position: sticky; top: 4rem;
}
.sjabloon-editor__zij details + details { border-top: 1px solid var(--kleur-rand-zacht); margin-top: var(--sp-2); padding-top: var(--sp-2); }
.sjabloon-editor__zij summary { font-weight: 600; cursor: pointer; padding: var(--sp-1) 0; }
.sjabloon-editor__kop { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.sjabloon-editor__velden { display: flex; flex-direction: column; gap: 2px; }
.sjabloon-editor__upload { margin-top: var(--sp-2); cursor: pointer; }
.sjabloon-editor__eisen { list-style: none; margin: 0; padding: 0; }

.se-veldknop {
    display: block; width: 100%; text-align: left; font: inherit; font-size: var(--fs-xs);
    padding: var(--sp-1) var(--sp-2); border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: inherit; cursor: pointer;
}
.se-veldknop:hover, .se-veldknop:focus-visible { background: var(--merk-zacht); border-color: var(--kleur-rand); }
.se-veldknop--som { font-style: italic; }
.se-eis { font-size: var(--fs-xs); padding: 2px 0; }
.se-eis--ok { color: var(--succes); }
.se-eis--mist { color: var(--alert); font-weight: 600; }

.se-eig { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); font-size: var(--fs-xs); }
.se-eig__label { color: var(--kleur-tekst-zacht); }
.se-eig input, .se-eig select, .se-eig textarea { font-size: var(--fs-sm); width: 100%; }
.se-eig--vinkje { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
.se-eig--vinkje input { width: auto; }
.se-eig__soort { font-weight: 600; margin: 0 0 var(--sp-2); }
.se-eig__kop { font-weight: 600; margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-xs); }
.se-achtergrond { border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-2); }
/* Fase 5: velden per categorie, en de achtergronden als kaarten onder een
   schets van de pagina. */
.se-veldfilter { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.se-veldfilter__keuze, .se-veldfilter__zoek { width: 100%; font-size: var(--fs-sm); }
.se-veldlijst { display: flex; flex-direction: column; gap: 2px; }
.se-veldlijst__kop { margin: var(--sp-2) 0 0; font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--kleur-tekst-zacht); }
.se-veldlijst__kop:first-child { margin-top: 0; }
.sjabloon-editor__zij .se-achtergrond summary.se-achtergrond__kop { font-weight: 500; font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-achtergrond[open] { border-color: var(--merk); }
.se-achtergrond__lijf { padding-top: var(--sp-2); }
.se-achtergrond__acties { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.se-achtergrond-nieuw { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); }
.se-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.se-proef-houder { display: flex; justify-content: center; margin-bottom: var(--sp-1); }
.se-proef {
    position: relative; width: 100%; max-width: 12rem; background: #fff; overflow: hidden;
    container-type: inline-size; box-shadow: 0 0 0 1px var(--kleur-rand), var(--schaduw-sm);
}
.se-proef__inhoud {
    position: absolute; z-index: 50; pointer-events: none; outline: 1px dashed var(--kleur-rand);
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .14) 0 1.5cqw, transparent 1.5cqw 4cqw);
}
.se-proef__laag {
    position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden;
    padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit;
}
.se-proef__laag img { width: 100%; height: 100%; display: block; pointer-events: none; }
.se-proef__binnen { position: absolute; display: block; pointer-events: none; }
.se-proef__laag--pdf { background: repeating-linear-gradient(45deg, var(--zand-100) 0 6px, var(--zand-50) 6px 12px); }
.se-proef__laag--leeg { background: var(--zand-100); }
.se-proef__tegels { display: block; width: 100%; height: 100%; }
.se-proef__laag--tekst { overflow: visible; }
.se-proef__laag--open { outline: 2px solid var(--merk); outline-offset: -2px; }
.se-proef__laag:focus-visible { outline: 2px solid var(--merk); outline-offset: -2px; }
.se-proef__label { font-size: var(--fs-2xs); color: var(--kleur-tekst-zacht); }
.se-proef__tekst { white-space: pre; line-height: 1.15; pointer-events: none; }

.sjabloon-editor__vlak {
    overflow: auto; padding: var(--sp-4); background: var(--zand-100);
    border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); min-height: 24rem; outline-offset: 2px;
}
.sjabloon-editor__pagina { display: inline-flex; flex-direction: column; gap: 0; }
.se-band { display: grid; grid-template-columns: 7rem auto; align-items: start; }
.se-band__label {
    font-size: var(--fs-2xs); color: var(--kleur-tekst-zacht); padding: 2px var(--sp-2) 0 0; text-align: right;
    border-top: 1px solid var(--kleur-rand); grid-row: 1 / span 2;
}
.se-band--actief .se-band__label { color: var(--merk); font-weight: 600; }
.se-band__vlak {
    position: relative; background: #fff; border-top: 1px solid var(--kleur-rand);
    overflow: hidden; box-shadow: 0 0 0 1px var(--kleur-rand-zacht);
}
.se-band__vlak--raster {
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, .05) 1px, transparent 1px);
}
.se-band--actief .se-band__vlak { box-shadow: 0 0 0 1px var(--merk); }
.se-band__greep {
    grid-column: 2; height: 6px; cursor: ns-resize; background: var(--kleur-rand-zacht);
}
.se-band__greep:hover { background: var(--merk); }

.se-el {
    position: absolute; box-sizing: border-box; cursor: move; user-select: none;
    white-space: pre-wrap; overflow: hidden; word-break: break-word;
    outline: 1px dashed transparent;
}
.se-band__vlak:hover .se-el { outline-color: rgba(0, 0, 0, .15); }
.se-el--groeit { overflow: visible; }
.se-el--gekozen, .se-band__vlak:hover .se-el--gekozen { outline: 2px solid var(--merk); outline-offset: 1px; z-index: 2; }
.se-el img { width: 100%; height: 100%; display: block; pointer-events: none; }
.se-el--afbeelding:not(:has(img)) { background: var(--zand-50); font-size: 11px; color: var(--kleur-tekst-zacht); }
.se-el--lijn { overflow: visible; }
.se-lijn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.se-greep {
    position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid var(--merk);
    border-radius: 2px; z-index: 3;
}
.se-greep--o { right: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.se-greep--z { bottom: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.se-greep--zo { right: -6px; bottom: -6px; cursor: nwse-resize; }
.se-greep--eind { right: -6px; bottom: -6px; cursor: crosshair; }
/* Fase 2: de bandnaam is een knop (eigenschappen van de band), een element
   met een voorwaarde of paginakeuze krijgt een stippelrand. */
button.se-band__label { background: none; border: 0; border-top: 1px solid var(--kleur-rand); font: inherit; font-size: var(--fs-2xs); cursor: pointer; width: 100%; }
button.se-band__label:hover, button.se-band__label:focus-visible { color: var(--merk); }
.se-el--voorwaarde { outline: 1px dotted var(--waarschuwing); }
.se-voorwaarde { border-left: 2px solid var(--kleur-rand-zacht); padding-left: var(--sp-2); margin-bottom: var(--sp-2); }
/* Fase 3: formule, tabel (subrapport) en QR-code. Op het ontwerpvlak is een
   formule zijn tekst met "= ", een tabel zijn kop met de naam van de lijst,
   een QR-code een geruit vlak. */
.se-el--formule { font-style: italic; }
.se-el--tabel { overflow: visible; background: rgba(255, 255, 255, .6); }
.se-tabel__rij { display: flex; white-space: nowrap; }
.se-tabel__rij--kop { border-bottom: 1px solid currentColor; }
.se-tabel__rij--leeg { color: var(--kleur-tekst-zacht); font-style: italic; }
.se-tabel__cel { flex: none; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; box-sizing: border-box; }
.se-el--qr {
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--kleur-tekst-zacht);
    background: repeating-conic-gradient(var(--zand-200) 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
    border: 1px solid var(--kleur-rand);
}
.se-kolom { border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); padding: var(--sp-2); margin-bottom: var(--sp-2); }
.se-kolom > .knop { justify-self: start; }
.se-hulp { margin: var(--sp-2) 0; }
.se-hulp summary { cursor: pointer; font-size: var(--fs-sm); }
.se-hulp ul { margin: var(--sp-1) 0; padding-left: var(--sp-4); }
/* Fase 4: een blok toont zijn eigen elementen, alleen om te zien. */
.se-el--blok { overflow: visible; outline: 1px dashed var(--merk-rand); }
.se-el--in-blok { pointer-events: none; }
.se-blok__naam {
    position: absolute; right: 0; top: -1.4em; font-size: 10px; font-style: normal; font-weight: 600;
    color: var(--merk-tekst); background: var(--merk-zacht); padding: 0 var(--sp-1); border-radius: var(--radius-sm);
}

/* Meetinstrumenten met vragen en een score (migratie 190). */
.meetlijsten { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.meetlijsten li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--kleur-rand-zacht); }
.meetlijsten li:first-child { border-top: 0; }
.meetlijsten__stand { display: block; color: var(--kleur-tekst-zacht); margin-top: 2px; }
.afname { display: grid; gap: var(--sp-4); }
.afname__vraag { border: 1px solid var(--kleur-rand-zacht); margin: 0; }
.afname__vraag legend { font-weight: 600; padding: 0 var(--sp-1); }
.afname__nummer { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-right: var(--sp-1); border-radius: var(--radius-pil); background: var(--merk-zacht); color: var(--merk-tekst); font-size: var(--fs-sm); }
.afname__opties { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.afname__optie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); cursor: pointer; }
.afname__optie:has(input:checked) { border-color: var(--merk); background: var(--merk-zacht); }
.afname__optie input { margin: 0; }
.afname__punten { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kleur-tekst-zacht); min-width: 2ch; text-align: right; }
.afname__stand { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.afname__stand small { color: var(--kleur-tekst-zacht); }
.afname__samenvatting { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.afname__score { margin: 0; }
.afname__score strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.afname__score span { color: var(--kleur-tekst-zacht); }
.instrument-vragen { margin: var(--sp-3) 0 0; padding-left: var(--sp-6); display: grid; gap: var(--sp-3); }
.instrument-vragen__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.instrument-vragen ul { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: 2px; }
.instrument-vragen ul .afname__punten { display: inline-block; min-width: 3ch; }

/* Verloop van de wond (oppervlakte per meting). */
.wond-grafiek { width: 100%; height: auto; max-width: 720px; display: block; margin: var(--sp-2) 0 var(--sp-4); }
.wond-grafiek__as { stroke: var(--kleur-rand); stroke-width: 1; }
.wond-grafiek__raster { stroke: var(--kleur-rand-zacht); stroke-width: 1; stroke-dasharray: 4 4; }
.wond-grafiek__lijn { fill: none; stroke: var(--merk); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.wond-grafiek__punt { fill: var(--vlak); stroke: var(--merk); stroke-width: 2; }
.wond-grafiek__punt--laatste { fill: var(--merk); }
.wond-grafiek__label { fill: var(--kleur-tekst-zacht); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Zorgplan met eigen indeling (migratie 191): gebied en standaarddoel vóór de regel. */
.zorgplan-rij--gebied { flex-wrap: wrap; }
.zorgplan-rij--gebied select { flex: 1 1 12rem; min-width: 0; }

/* Zorgpaden per cliënt (migratie 192). */
.zorgpad-stappen { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.zorgpad-stap { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--kleur-rand-zacht); }
.zorgpad-stap:first-child { border-top: 0; }
.zorgpad-stap__datum { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kleur-tekst-zacht); }
.zorgpad-stap--te-laat .zorgpad-stap__datum { color: var(--alert); }
@media (max-width: 640px) { .zorgpad-stap { grid-template-columns: 3rem minmax(0, 1fr); } .zorgpad-stap > .status-pil, .zorgpad-stap > .knop { grid-column: 2; justify-self: start; } }

/* ---------- Planning: capaciteit en route (bouwlijst, pakket B) ---------- */
.capaciteit-reeks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.capaciteit-reeks__week { display: grid; grid-template-columns: 4rem 1fr auto; gap: var(--sp-3); align-items: center; }
.capaciteit-reeks__week--actief .capaciteit-reeks__label { font-weight: 700; }
.capaciteit-reeks__label { font-size: var(--fs-sm); }
.capaciteit-reeks__balken { display: grid; gap: 2px; }
.capaciteit-reeks__balk { display: block; height: 8px; border-radius: var(--radius-pil); min-width: 2px; }
.capaciteit-reeks__balk--vraag, .capaciteit-legenda__item--vraag::before { background: var(--waarschuwing); }
.capaciteit-reeks__balk--beschikbaar, .capaciteit-legenda__item--beschikbaar::before { background: var(--succes); }
.capaciteit-reeks__balk--gepland, .capaciteit-legenda__item--gepland::before { background: var(--merk); }
.capaciteit-reeks__getallen { font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.capaciteit-legenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.capaciteit-legenda__item::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--sp-1); vertical-align: middle; }
@media (max-width: 640px) {
    .capaciteit-reeks__week { grid-template-columns: 3rem 1fr; }
    .capaciteit-reeks__getallen { grid-column: 2; }
}

.route-naast { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--sp-4); }
.route-plan--voorstel { border-color: var(--succes); }
.route-plan__lijst { margin: 0; padding-left: var(--sp-6); display: grid; gap: var(--sp-3); }
.route-plan__stap { display: grid; gap: 2px; }
.route-plan__reis { font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.route-plan__tijd { font-variant-numeric: tabular-nums; font-weight: 600; }
.route-plan__tijd--anders { color: var(--succes); }
.route-plan__client { font-weight: 600; }
.dagbord__route { font-size: var(--fs-xs); }

/* ---------- Dubbele controle: meetekenen (migratie 194) ---------- */
.dubbele-controle__gegevens { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.dubbele-controle__gegevens dt { color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); }
.dubbele-controle__gegevens dd { margin: 0; }
.dubbele-controle__formulier { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }

/* ---------- Inspreken (migratie 195) ---------- */
.spraak { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.spraak__balk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.spraak__knop { min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-2); }
/* .knop zet een display; zonder dit blijft een verborgen knop in beeld. */
.spraak [hidden] { display: none !important; }
.spraak__teller { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--alert); }
.spraak__status { font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); }
.spraak__controle { border: 1px solid var(--waarschuwing); border-radius: var(--radius-sm); padding: var(--sp-3); margin: 0; }
.spraak__controle legend { font-weight: 600; padding: 0 var(--sp-1); }
.spraak__punten { display: grid; gap: var(--sp-2); }
.spraak__punt { min-height: 44px; align-items: center; }
.spraak__punt--let-op { color: var(--alert); font-weight: 600; }
.spraak__transcript summary { cursor: pointer; font-size: var(--fs-sm); }
.spraak__transcript p { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); }

/* ---------- Werken zonder bereik (migratie 196) ---------- */
.offline-status [data-offline-status] { margin: 0; font-size: var(--fs-sm); }
.offline-mislukt { display: grid; gap: var(--sp-3); }
.offline-mislukt[hidden] { display: none; }
.offline-mislukt__regel { display: grid; gap: var(--sp-2); border-top: 1px solid var(--kleur-rand-zacht); padding-top: var(--sp-2); }
.offline-mislukt__tekst { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--waarschuwing); white-space: pre-wrap; font-size: var(--fs-sm); }
.offline-pagina { max-width: 40rem; width: 100%; text-align: left; }
.offline-dag { display: grid; gap: var(--sp-4); }
.offline-dag[hidden] { display: none; }
.offline-bezoek { display: grid; gap: var(--sp-2); }
.offline-bezoek__stand { font-weight: 600; margin: 0; }
.offline-bezoek__taken, .offline-bezoek__rapportage { display: grid; gap: var(--sp-2); border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); padding: var(--sp-3); margin: 0; }
.offline-bezoek__taak { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; min-height: 44px; }
.offline-bezoek .knop { min-height: 44px; }

/* ---------- Naasten, gesprek, gedeelde agenda, dagkalender (migratie 197) ---------- */
.naaste-rechten { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.naaste-rechten--aan { color: var(--succes); }
.naaste-rechten--uit { color: var(--kleur-tekst-zacht); }
.naaste-koppellink { word-break: break-all; font-family: ui-monospace, monospace; font-size: var(--fs-sm); margin: 0; }
.naaste-schermen { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); display: grid; gap: var(--sp-2); }
.kaart--uit { opacity: 0.85; border-style: dashed; }
.gesprek { display: grid; gap: var(--sp-3); }
.gesprek__bericht { max-width: 42rem; padding: var(--sp-3); border-radius: var(--radius); background: var(--zand-50); border: 1px solid var(--kleur-rand-zacht); }
.gesprek__bericht--team { margin-inline-start: auto; background: var(--merk-zacht); border-color: var(--merk-rand); }
.gesprek__wie { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.gesprek__tekst { margin: 0; white-space: pre-wrap; }
.portaal-agenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.portaal-agenda__dag h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.portaal-agenda__dag--vandaag { border-color: var(--merk); }
.portaal-agenda__tijd { font-variant-numeric: tabular-nums; font-weight: 600; }
.portaal-agenda__zorg { margin: 0 0 var(--sp-2); }
.portaal-agenda__taak { border-top: 1px solid var(--kleur-rand-zacht); padding-top: var(--sp-2); margin-top: var(--sp-2); }
.portaal-agenda__taak p { margin: 0 0 var(--sp-1); }
.portaal-agenda__taak--gedaan { opacity: 0.7; }
.sidebar__taal { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
.sidebar__taal select { min-height: 44px; }

html:has(body.thuis) { background: var(--zand-50); }
body.thuis { margin: 0; min-height: 100vh; background: var(--zand-50); color: var(--kleur-tekst); }
.thuis__scherm { max-width: 60rem; margin: 0 auto; padding: var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-8); }
.thuis__groet { margin: 0; font-size: 1.6rem; color: var(--kleur-tekst-zacht); }
.thuis__datum { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; }
body.thuis .thuis__blok h2 { font-size: 1.8rem; margin: 0 0 var(--sp-4); }
.thuis__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.thuis__regel { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: var(--sp-4); align-items: baseline; font-size: clamp(1.6rem, 3.4vw, 2.4rem); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--vlak); }
.thuis__regel--nu { background: var(--merk-zacht); border-inline-start: 6px solid var(--merk); }
.thuis__regel--geweest { opacity: 0.55; }
.thuis__tijd { font-variant-numeric: tabular-nums; font-weight: 700; }
.thuis__stand { font-size: 0.6em; color: var(--kleur-tekst-zacht); }
.thuis__leeg { font-size: 1.6rem; color: var(--kleur-tekst-zacht); }
.thuis__voet { color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 640px) {
    .thuis__scherm { padding: var(--sp-4); gap: var(--sp-6); }
    .thuis__regel { grid-template-columns: 5rem 1fr; }
    .thuis__stand { grid-column: 2; }
}

/* ---------- Mededelingen, smoelenboek, importhulp (migratie 198, pakket E) ---------- */
.mededeling__tekst { white-space: pre-wrap; margin: var(--sp-1) 0 var(--sp-2); }
.smoelenboek { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-3); }
.smoelenboek__kaart { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.smoelenboek__kaart p { margin: 0 0 var(--sp-1); }
.smoelenboek__avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--merk-zacht); color: var(--merk-tekst); font-weight: 700; }
.smoelenboek__naam { margin: 0; font-size: var(--fs-lg); }
.smoelenboek__functie { color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); }
.import-voorbeelden { margin: 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-2); }
.import-voorbeelden small { display: block; color: var(--kleur-tekst-zacht); }
.import-regel--fout td { background: var(--alert-licht); }
.import-fouten { margin: 0; padding-left: var(--sp-4); color: var(--alert); font-size: var(--fs-sm); }

/* ------------------------------------------------------------------
   Documentbeheer fase 1 (16-10-2026): mappen, lijst en voorbeeld in
   één dossier. Een container query, geen media query: dezelfde
   weergave staat op een volle pagina (cliënt, organisatie) en in het
   smalle paneel van het personeelsdossier.
   ------------------------------------------------------------------ */
.docbeheer { container-type: inline-size; }
.docbeheer__raster { display: grid; grid-template-columns: minmax(160px, 210px) minmax(0, 1fr) minmax(0, 420px); gap: var(--sp-4); align-items: start; }
.docbeheer__mappen ul { list-style: none; margin: 0; padding: var(--sp-2); display: grid; gap: 2px; border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius); background: var(--vlak); }
.docbeheer__kop { padding: var(--sp-3) var(--sp-3) var(--sp-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--kleur-tekst-hint); }
.docbeheer__map { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--kleur-tekst); font-size: var(--fs-klein); text-decoration: none; }
.docbeheer__map:hover { background: var(--vlak-zacht); text-decoration: none; }
.docbeheer__map--leeg { color: var(--kleur-tekst-zacht); }
.docbeheer__map[aria-current="true"] { background: var(--merk-zacht); color: var(--merk-tekst); font-weight: 600; }
.docbeheer__tel { color: var(--kleur-tekst-hint); font-variant-numeric: tabular-nums; }

.docbeheer__lijst { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.docbeheer__drop { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1.5px dashed var(--merk-rand); border-radius: var(--radius); background: var(--vlak-zacht); cursor: pointer; transition: background var(--transitie-snel), border-color var(--transitie-snel); }
.docbeheer__drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.docbeheer__drop:hover, .docbeheer__drop--erboven { border-color: var(--merk); background: var(--merk-zacht); }
.docbeheer__drop:focus-within { outline: 2px solid var(--merk); outline-offset: 2px; }
.docbeheer__drop-tekst small { display: block; margin-top: 2px; color: var(--kleur-tekst-zacht); font-size: var(--fs-klein); overflow-wrap: anywhere; }
.docbeheer__velden { margin-top: var(--sp-3); }
.docbeheer__velden[hidden] { display: none; }

.docbeheer__stukken { list-style: none; margin: 0; padding: 0; border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius); background: var(--vlak); overflow: hidden; }
.docbeheer__stukken li + li { border-top: 1px solid var(--kleur-rand-zacht); }
.docbeheer__stuk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); color: var(--kleur-tekst); text-decoration: none; }
.docbeheer__stuk:hover { background: var(--vlak-zacht); text-decoration: none; }
.docbeheer__stuk[aria-current="true"] { background: var(--merk-zacht); box-shadow: inset 3px 0 0 var(--merk); }
.docbeheer__stuk-tekst strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.docbeheer__stuk-tekst small { color: var(--kleur-tekst-zacht); font-size: var(--fs-klein); }
.docbeheer__datum { color: var(--kleur-tekst-zacht); font-size: var(--fs-klein); font-variant-numeric: tabular-nums; white-space: nowrap; }
.docbeheer__ico { display: grid; place-items: end center; width: 34px; height: 40px; padding-bottom: 3px; border: 1px solid var(--kleur-rand); border-radius: var(--radius-xs); background: var(--vlak); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em; }
.docbeheer__ico--pdf { color: var(--alert); }
.docbeheer__ico--foto { color: var(--info); }
.docbeheer__ico--doc { color: var(--kleur-primair); }
.docbeheer__ico--kms { color: var(--merk-tekst); }

.docbeheer__voorbeeld { min-width: 0; border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius); background: var(--vlak); overflow: hidden; }
.docbeheer__vak { padding: var(--sp-3); background: var(--vlak-zacht); }
.docbeheer__frame { display: block; width: 100%; height: 520px; border: 0; border-radius: var(--radius-sm); background: var(--vlak); }
.docbeheer__foto { display: block; max-width: 100%; max-height: 520px; margin: 0 auto; border-radius: var(--radius-sm); }
.docbeheer__geluid { display: block; width: 100%; margin: var(--sp-6) 0; }
.docbeheer__vak--postkamer { margin-top: var(--sp-4); border-radius: var(--radius); }
.docbeheer__vak--postkamer .docbeheer__frame { height: 680px; }
.docbeheer__details { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.docbeheer__details h3 { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.docbeheer__details .status-pil { justify-self: start; }
.docbeheer__kenmerken { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-klein); }
.docbeheer__kenmerken dt { color: var(--kleur-tekst-zacht); }
.docbeheer__kenmerken dd { margin: 0; overflow-wrap: anywhere; }
.docbeheer__acties { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.docbeheer__leeg { display: grid; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); color: var(--kleur-tekst-zacht); font-size: var(--fs-klein); }
.docbeheer__leeg strong { color: var(--kleur-tekst); }
.docoverzicht__telling { margin: var(--sp-3) 0; color: var(--kleur-tekst-zacht); font-size: var(--fs-klein); }
/* Fase 2 (migratie 204): merkjes, archief, weghalen en de versies. Een
   gearchiveerd stuk zakt naar de achtergrond met zachte tekst, niet met
   opacity: dan zakt de titel onder het leesbare contrast. */
.docbeheer__oud { margin: 0; font-size: var(--fs-klein); }
.docbeheer__merkjes { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.docbeheer__stuk--archief { background: var(--vlak-zacht); }
.docbeheer__stuk--archief .docbeheer__stuk-tekst strong { color: var(--kleur-tekst-zacht); font-weight: 500; }
.docbeheer__acties--weg { align-items: center; padding-top: var(--sp-3); border-top: 1px solid var(--kleur-rand-zacht); }
.docbeheer__acties--weg small { color: var(--kleur-tekst-zacht); font-size: var(--fs-klein); }
.docbeheer__geschiedenis h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--kleur-tekst-hint); }
.docbeheer__versies { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-klein); }
.docbeheer__versies li { overflow-wrap: anywhere; color: var(--kleur-tekst-zacht); }
.docbeheer__versies li[aria-current="true"] { color: var(--kleur-tekst); }
.docbeheer__personen { display: grid; gap: var(--sp-1); max-height: 240px; overflow-y: auto; margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); }
/* Instellingen → Documentcategorieën: de drie plekken naast elkaar. */
.dc-keuze { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); }
.dc-keuze legend { padding: 0 var(--sp-1); font-weight: 600; font-size: var(--fs-klein); }
/* Instellingen → Teams (migratie 212): een lange lijst namen in een venster scrolt zelf. */
.team-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-1) var(--sp-4); max-height: 16rem; overflow-y: auto; margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); }
.team-keuze legend { padding: 0 var(--sp-1); font-weight: 600; font-size: var(--fs-klein); }
/* Dossier exporteren (migratie 209): de onderdelen per groep naast elkaar. */
.export-snel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.export-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.export-groep { display: grid; gap: var(--sp-2); margin: 0; padding: var(--sp-3); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius-sm); }
.export-groep legend { padding: 0 var(--sp-1); font-weight: 600; font-size: var(--fs-klein); }
.export-onderdeel { align-items: flex-start; }
.export-onderdeel small { display: block; color: var(--kleur-tekst-zacht); font-size: var(--fs-xs); }
.docbeheer__personen legend { padding: 0 var(--sp-1); font-weight: 600; font-size: var(--fs-klein); }
/* Onderaan het blok: deze regels moeten winnen van de basisregels hierboven. */
@container (max-width: 1050px) {
    .docbeheer__raster { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); }
    .docbeheer__voorbeeld { grid-column: 1 / -1; }
}
@container (max-width: 620px) {
    .docbeheer__raster { grid-template-columns: minmax(0, 1fr); }
    .docbeheer__mappen ul { display: flex; overflow-x: auto; }
    .docbeheer__mappen li { flex: none; }
    .docbeheer__kop { align-self: center; }
    .docbeheer__frame { height: 420px; }
}

/* Vertalingen portaal: de Nederlandse tekst links, per taal een veld dat de cel vult. */
.vertaaltabel { width: 100%; table-layout: fixed; }
.vertaaltabel thead th:first-child { width: 30%; }
.vertaaltabel th[scope="row"] { font-weight: 500; vertical-align: top; }
.vertaaltabel td { vertical-align: top; }
.vertaaltabel input[type="text"], .vertaaltabel textarea { width: 100%; }
.vertaaltabel .veld-hint { margin-top: var(--sp-1); }
@media (max-width: 720px) {
    .vertaaltabel { table-layout: auto; min-width: 640px; }
}

/* Noodkopie (migratie 211): de sleutel past niet op een regel, de stappen staan genummerd. */
.noodkopie-sleutel { display: inline-block; margin: var(--sp-1) 0; word-break: break-all; font-size: var(--fs-sm); }
.noodkopie-stappen { margin: var(--sp-3) 0; padding-left: var(--sp-6); }
.noodkopie-stappen li { margin-bottom: var(--sp-2); }

/* Alle documenten (17-10-2026): een filter in een raster in plaats van een
   lange regel die halverwege afbrak ("Tot en met" los van zijn veld), chips
   voor wat er gekozen is, en een lijst die per dossier of per map een
   kopregel krijgt. Op de telefoon onder elkaar. */
.docoverzicht__intro { max-width: 72ch; color: var(--kleur-tekst-zacht); }
.docfilter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); align-items: end; }
.docfilter__veld { display: grid; gap: var(--sp-1); grid-column: span 3; min-width: 0; margin: 0; padding: 0; border: 0; }
.docfilter__veld--breed { grid-column: span 6; }
.docfilter__veld label, .docfilter__veld legend { font-size: var(--fs-sm); font-weight: 600; color: var(--kleur-tekst-zacht); padding: 0; }
.docfilter__veld select, .docfilter__veld input { width: 100%; }
.docfilter__periode { grid-column: span 4; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.docfilter__periode legend { grid-column: 1 / -1; margin-bottom: var(--sp-1); }
.docfilter__acties { grid-column: span 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.docfilter__acties .checkbox-inline { margin-right: auto; }
.docfilter + p, .docfilter + .auth-kaart__hint { margin-top: var(--sp-4); }
.docfilter__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--kleur-rand-zacht); }
.docfilter__chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pil); background: var(--merk-zacht); color: var(--merk-tekst); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.docfilter__chip:hover, .docfilter__chip:focus-visible { background: var(--merk-rand); }
.docfilter__wis { font-size: var(--fs-sm); }
.kaart--tabel { padding-top: var(--sp-2); }
.doclijst { width: 100%; }
.doclijst td { vertical-align: top; }
.doclijst__titel { display: block; font-weight: 600; overflow-wrap: anywhere; }
.doclijst__afzender, .doclijst__soort { display: block; color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); }
.doclijst__merkjes:empty { display: none; }
.doclijst__merkjes { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.doclijst__merkjes .docbeheer__merkjes { margin-top: 0; }
.doclijst__dossier { font-weight: 500; }
.doclijst__datum { white-space: nowrap; }
.doclijst__acties { white-space: nowrap; text-align: right; }
.doclijst__acties .knop + .knop { margin-left: var(--sp-1); }
.doclijst__groep th { padding: var(--sp-4) var(--sp-3) var(--sp-2); background: var(--vlak); border-top: 2px solid var(--merk-rand); text-align: left; font-weight: 400; }
.doclijst tbody .doclijst__groep:first-child th { border-top: 0; }
.doclijst__groepnaam { font-weight: 700; font-size: var(--fs-md); color: var(--kleur-tekst); }
.doclijst__groepsoort, .doclijst__groepaantal { margin-left: var(--sp-2); color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); }
.doclijst__groeplink { float: right; font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 1100px) {
    .docfilter__veld, .docfilter__periode { grid-column: span 6; }
    .docfilter__veld--breed, .docfilter__acties { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .docfilter__veld, .docfilter__periode, .docfilter__veld--breed, .docfilter__acties { grid-column: 1 / -1; }
    .doclijst__groeplink { float: none; display: block; margin-top: var(--sp-1); }
}

/* Documenten in een dossier (17-10-2026): zonder gekozen stuk krijgt de lijst
   de ruimte en wordt het voorbeeldvak een smalle kolom met de uitleg; op een
   smaller scherm valt die uitleg weg in plaats van onder de lijst te hangen.
   Lege mappen staan in een inklapgroep onderaan. */
.docbeheer__raster--zonder-keuze { grid-template-columns: minmax(160px, 210px) minmax(0, 1fr) minmax(0, 240px); }
.docbeheer__lege-mappen summary { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--kleur-tekst-zacht); font-size: var(--fs-klein); cursor: pointer; }
.docbeheer__lege-mappen summary:hover { background: var(--vlak-zacht); }
.docbeheer__lege-mappen[open] summary { margin-bottom: 2px; }
.docbeheer__lege-mappen ul { padding: 0; border: 0; background: none; }
@container (max-width: 1050px) {
    .docbeheer__raster--zonder-keuze { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); }
    .docbeheer__raster--zonder-keuze .docbeheer__voorbeeld { display: none; }
}
@container (max-width: 620px) {
    .docbeheer__raster--zonder-keuze { grid-template-columns: minmax(0, 1fr); }
}
/* Stuurinformatie (migratie 212, fase 1). Grafieken als SVG van de server
   (App\Helpers\Grafiek): grijs voor de reeks, de merkkleur op de gekozen maand. */
.grafiek { display: block; width: 100%; height: auto; max-height: 260px; }
.grafiek__as { stroke: var(--kleur-rand); stroke-width: 1; }
.grafiek__staaf { fill: var(--zand-300); }
.grafiek__staaf--accent { fill: var(--merk); }
.grafiek__waarde { fill: var(--kleur-tekst-zacht); font-size: 12px; }
.grafiek__waarde--accent { fill: var(--kleur-tekst); font-weight: 600; }
.grafiek__label { fill: var(--kleur-tekst-zacht); font-size: 12px; }
.grafiek__leeg { fill: var(--kleur-tekst-zacht); font-size: 14px; }
.sparkline { display: block; width: 120px; height: 32px; }
.sparkline__lijn { fill: none; stroke: var(--merk); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.periodekeuze { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.periodekeuze input[type="month"] { width: auto; }

.kengetal-domein { margin-top: var(--sp-6); }
.kengetal-domein > h2 { margin-bottom: var(--sp-3); }
.kengetal-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-3); }
.kengetal-tegel { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--vlak); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius); box-shadow: var(--schaduw-sm); color: inherit; text-decoration: none; }
a.kengetal-tegel:hover, a.kengetal-tegel:focus-visible { border-color: var(--merk-rand); }
.kengetal-tegel__naam { font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); }
.kengetal-tegel__waarde { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kengetal-tegel__verschil { font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.kengetal-tegel__verschil--beter { color: var(--succes); }
.kengetal-tegel__verschil--slechter { color: var(--alert); }
.kengetal-tegel__voet { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }
.kengetal-tegel__soort { font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }

.rapport-ingangen { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; }
.rapport-ingangen a { font-weight: 600; }
.rapport-ingangen small { display: block; color: var(--kleur-tekst-zacht); }
.kengetal-definitie { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; }
.kengetal-definitie dt { color: var(--kleur-tekst-zacht); }
.kengetal-definitie dd { margin: 0; }
.kengetal-getal { text-align: right; font-variant-numeric: tabular-nums; }
/* Op een telefoon schaalt de grafiek naar ongeveer de halve breedte: de tekst in SVG-eenheden moet dan groter om leesbaar te blijven. */
@media (max-width: 600px) { .grafiek__label, .grafiek__waarde { font-size: 22px; } .grafiek__leeg { font-size: 24px; } }
/* Rechtenmatrix (instellingen/rollen). Per module een inklapbare regel met de
   telling, eronder vaste kolommen Geen–Beheren die over alle modules op één
   lijn staan. De gekozen cel kleurt naar zijn niveau; de stippellijn is wat
   de basisrol zonder keuze mag. */
.rechten-matrix [hidden] { display: none !important; }
.rechten-kop { display: flex; flex-direction: column; gap: var(--sp-3); }
.rechten-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); }
.rechten-legenda li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.rechten-legenda strong { color: var(--kleur-tekst); font-weight: 600; }
.rechten-stip { display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--zand-300); }
.rechten-stip--lezen { background: var(--info); }
.rechten-stip--bewerken { background: var(--merk); }
.rechten-stip--beheren { background: var(--merk-diep); box-shadow: 0 0 0 2px var(--merk-zacht); }
.rechten-stip--standaard { background: transparent; border: 1.5px dashed var(--kleur-tekst-hint); }
.rechten-gereedschap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--kleur-rand-zacht); }
.rechten-gereedschap__zoek { flex: 1 1 16rem; max-width: 24rem; }
.rechten-gereedschap__filter { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); margin: 0; }
.rechten-gereedschap .knop-rij { margin: 0 0 0 auto; }
.rechten-leeg { margin: 0; color: var(--kleur-tekst-zacht); font-size: var(--fs-sm); }

.rechten-modules { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); container: rechten / inline-size; }
.rechten-module { background: var(--vlak); border: 1px solid var(--zand-200); border-radius: var(--radius); box-shadow: var(--schaduw-sm); }
.rechten-module--uit { background: var(--vlak-zacht); }
.rechten-module__kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; border-radius: var(--radius); }
.rechten-module__kop::-webkit-details-marker { display: none; }
.rechten-module__kop::before {
    content: ""; flex: none; width: 0.5rem; height: 0.5rem;
    border-right: 2px solid var(--kleur-tekst-zacht); border-bottom: 2px solid var(--kleur-tekst-zacht);
    transform: rotate(-45deg); transition: transform var(--transitie-snel); margin-right: var(--sp-1);
}
.rechten-module[open] > .rechten-module__kop::before { transform: rotate(45deg); }
.rechten-module__kop:hover { background: var(--zand-50); }
.rechten-module[open] > .rechten-module__kop { border-bottom: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius) var(--radius) 0 0; }
.rechten-module__naam { font-weight: 600; color: var(--kleur-tekst); }
.rechten-module__aantal { font-size: var(--fs-xs); color: var(--kleur-tekst-hint); }
.rechten-module__telling { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-left: auto; font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.rechten-telling { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.rechten-telling .rechten-stip { width: 0.55rem; height: 0.55rem; }
.rechten-module__inhoud { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.rechten-snel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); margin-bottom: var(--sp-2); }

.rechten-tabel { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.rechten-tabel thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--kleur-tekst-hint); text-transform: none; text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--kleur-rand); background: none; }
.rechten-tabel thead th.rechten-tabel__niveau { width: 5.25rem; text-align: center; }
.rechten-tabel thead th.rechten-tabel__bereik { width: 8rem; text-align: center; }
.rechten-rij > * { border-bottom: 1px solid var(--kleur-rand-zacht); }
.rechten-rij:last-child > * { border-bottom: none; }
.rechten-rij:hover > * { background: var(--zand-50); }
.rechten-rij__naam { text-align: left; font-weight: 500; color: var(--kleur-tekst); padding: var(--sp-2); line-height: 1.35; }
.rechten-rij__naam .status-pil { margin-left: var(--sp-1); vertical-align: middle; }
.rechten-rij__boven { display: none; margin-left: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--waarschuwing-donker); }
.rechten-rij--boven .rechten-rij__boven { display: inline; }
.rechten-module--uit .rechten-rij__naam { color: var(--kleur-tekst-zacht); }

.rechten-cel { padding: 3px; text-align: center; vertical-align: middle; }
.rechten-cel > label {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 2.4rem; margin: 0; border-radius: var(--radius-sm); cursor: pointer;
    transition: background var(--transitie-snel);
}
.rechten-cel > label:hover { background: var(--zand-100); }
.rechten-cel input[type="radio"] { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--merk); cursor: pointer; }
.rechten-cel__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rechten-cel--standaard > label { outline: 1.5px dashed var(--kleur-tekst-hint); outline-offset: -4px; }
.rechten-cel--geen > label:has(input:checked) { background: var(--zand-100); }
.rechten-cel--lezen > label:has(input:checked) { background: var(--info-licht); }
.rechten-cel--bewerken > label:has(input:checked) { background: var(--merk-zacht); }
.rechten-cel--beheren > label:has(input:checked) { background: var(--merk-zacht); box-shadow: inset 0 0 0 2px var(--merk); }
.rechten-cel--geen input[type="radio"] { accent-color: var(--kleur-tekst-zacht); }
.rechten-cel--lezen input[type="radio"] { accent-color: var(--info); }
.rechten-cel--beheren input[type="radio"] { accent-color: var(--merk-diep); }
.rechten-cel__leeg { color: var(--kleur-tekst-hint); }

.rechten-bereik { display: inline-flex; border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil); overflow: hidden; }
.rechten-bereik__keuze { position: relative; margin: 0; cursor: pointer; }
.rechten-bereik__keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rechten-bereik__keuze span { display: block; padding: 0.3rem 0.75rem; font-size: var(--fs-xs); font-weight: 600; color: var(--kleur-tekst-zacht); }
.rechten-bereik__keuze + .rechten-bereik__keuze span { border-left: 1px solid var(--kleur-rand); }
/* --merk-tekst is tekst óp wit, niet op --merk: daarom de zachte tint als vlak. */
.rechten-bereik__keuze input:checked + span { background: var(--merk-zacht); color: var(--merk-tekst); box-shadow: inset 0 0 0 1.5px var(--merk); }
.rechten-bereik__keuze input:focus-visible + span { outline: 2px solid var(--merk); outline-offset: -2px; }

/* Smal paneel (telefoon, of een laptop met zijbalk en rollenlijst ernaast):
   geen kolommen meer, per onderdeel de naam en daaronder vier knoppen met
   hun woord erop, het bereik eronder. Op de breedte van de matrix zelf, niet
   van het venster: op 1100px bleef er voor de naam bijna niets over. */
@media (max-width: 720px) {
    .rechten-gereedschap .knop-rij { margin-left: 0; }
}
@container rechten (max-width: 680px) {
    .rechten-module__telling { margin-left: 0; flex-basis: 100%; }
    .rechten-module__inhoud { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
    .rechten-tabel, .rechten-tabel tbody { display: block; }
    .rechten-tabel thead { display: none; }
    .rechten-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--kleur-rand-zacht); }
    .rechten-rij:last-child { border-bottom: none; }
    .rechten-rij > * { border-bottom: none; }
    .rechten-rij:hover > * { background: none; }
    .rechten-rij__naam { grid-column: 1 / -1; padding: 0 0 var(--sp-1); }
    .rechten-cel { padding: 0; }
    .rechten-cel > label { min-height: 44px; border: 1px solid var(--kleur-rand); flex-direction: column; gap: 2px; font-size: var(--fs-xs); }
    .rechten-cel__tekst { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .rechten-cel--bereik { grid-column: 1 / -1; text-align: left; }
    .rechten-cel--bereik .rechten-cel__leeg { display: none; }
    .rechten-bereik__keuze span { padding: 0.55rem 1rem; }
}

/* Stuurinformatie fase 2 (migratie 213): norm op de tegel, de balk met periode en exports, tegels kiezen. */
.kengetal-tegel--afwijking { border-color: var(--alert); box-shadow: inset 3px 0 0 var(--alert), var(--schaduw-sm); }
.kengetal-tegel__norm { font-size: var(--fs-xs); color: var(--kleur-tekst-zacht); }
.kengetal-tegel--afwijking .kengetal-tegel__norm strong { color: var(--alert); }
.kengetal-tegels--dashboard { margin-top: var(--sp-3); }
.stuur-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0 var(--sp-2); }
.stuur-balk .periodekeuze { margin: 0; }
.tegel-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.tegel-keuze legend { font-weight: 600; padding: 0 var(--sp-1); }
.tegel-keuze__regel { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tegel-keuze__nummer { width: 4.5rem; }
/* Alle documenten: de index van de dossiers boven een lijst per dossier. */
.docindex summary { cursor: pointer; color: var(--kleur-tekst-zacht); }
.docindex summary strong { color: var(--kleur-tekst); }
.docindex__lijst { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-1) var(--sp-3); }
.docindex__lijst a { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); text-decoration: none; }
.docindex__lijst a:hover, .docindex__lijst a:focus-visible { background: var(--merk-zacht); }
.docindex__tel { color: var(--kleur-tekst-hint); font-variant-numeric: tabular-nums; }
/* Stuurinformatie fase 3: de uitleg in gewone taal onder de grafiek. */
.kengetal-uitleg { margin: var(--sp-3) 0; max-width: 72ch; line-height: 1.55; }

/* Voorstel uit de toedienlijst (migratie 220): drie keuzes naast elkaar per regel. */
.medvoorstel__keuze { border: 0; padding: 0; margin: 0 0 var(--sp-1); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.medvoorstel__keuze label { display: inline-flex; align-items: center; gap: var(--sp-1); }