/* Schermspecifiek. Alles wat maar op één plek gebruikt wordt. */

.zoekbalk { display: flex; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: center; }
.zoekbalk input[type="search"] { flex: 1 1 18rem; }
.zoekbalk select { flex: 0 0 12rem; }
/* Datumvelden erven width:100% van de algemene invoerregel en duwden daardoor
   elk de rest van de balk naar de volgende regel. Ze hebben een vaste,
   voorspelbare breedte nodig: een datum is altijd even lang. */
.zoekbalk input[type="date"] { flex: 0 0 11rem; width: 11rem; }
.zoekbalk .veldnaam { color: var(--inkt-licht); font-size: .9rem; }

.clientrij td:first-child { font-weight: 600; }
.clientnummer { color: var(--inkt-licht); }

.dossierkop { margin-bottom: 1rem; }

/* De gegevens van een cliënt: het label klein en gedempt vlak boven de waarde,
   en weinig lucht tussen de rijen. Met de gewone .veld (label, .3rem, waarde,
   1rem, en dan nog 1rem rastergat) kostte één gegeven 85px hoogte. */
.gegevensrooster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .65rem 1.5rem; margin-top: .15rem;
}
.gegevensrooster .veld { margin: 0; min-width: 0; }
.gegevensrooster .veld > label {
  font-size: .8rem; font-weight: 600; color: var(--inkt-zacht); margin-bottom: .05rem;
}
.leeggelaten { margin-top: .6rem; }
/* Een lege lijst in een dichte kaart is één regel, geen vak van 70px. */
.kaart.dicht .leeg { padding: .25rem 0; }
.kaart.dicht .lijst > li { padding: .6rem 0; }
.dossierkop h1 { margin-bottom: .2rem; }
.dossierkop .meta { color: var(--inkt-zacht); }

/* Een beëindigd netwerkcontact blijft staan maar hoeft geen aandacht te
   trekken; het is historie, geen werkvoorraad. */
.lijst > li.beeindigd { opacity: .6; }

/* ── Journaal ──────────────────────────────────────────────────────────────
   De algemene rapportage is een chronologie, en dat is de enige as die er
   echt is — dus die draagt de structuur. Eén datum per dag in een smalle
   kolom, de regels ernaast. Je oog loopt langs de dagen naar beneden.

   Elke regel staat in een eigen vlak. Dat stond hier eerst niet: alleen
   witruimte en een dunne lijn ertussen, om te voorkomen dat een verhaal een
   lijst met formulieren wordt. Maar bij een regel van vijf zinnen met twee
   reacties eronder is met een lijn niet meer te zien waar het ene voorval
   ophoudt en het volgende begint — en dat is wat je hier doet: losse voorvallen
   teruglezen. Het vlak groepeert de regel mét zijn reacties tot één ding.

   Het is geen kaart en geen chatbel: geen kleur, geen punt, geen kant. De
   rapportages komen allemaal van dezelfde kant — begeleiding — dus links en
   rechts zou iets suggereren wat er niet is. */
.journaal { margin-top: .5rem; }
/* Alleen de regels scrollen; het schrijfvak en de kop erboven blijven staan.
   Wie terugleest wat er vorige week was, verliest anders het invoerveld uit
   beeld. Het blok is .vult (layout.css) en krijgt de hoogte die in .inhoud
   overblijft; de lijst zelf scrolt daarbinnen. min-height: 0, anders groeit
   een flexitem mee met zijn inhoud en begrenst het niets. */
.journaal-lijst { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* De ondervulling van .inhoud is hier de marge onder de lijst; 4rem wit onder
   een lijst die zelf scrolt, is ruimte die de lijst had kunnen hebben. */
.inhoud:has(> .journaal.vult) { padding-bottom: 1.25rem; }
@media (max-width: 800px) {
  /* Op een telefoon scrolt de pagina zelf, zoals overal; een lijst van 12rem
     in een scherm van 800px is dan kleiner dan wat je wilt lezen. */
  .inhoud > .journaal.vult { flex: none; }
  .journaal-lijst { overflow: visible; }
}
.journaal-kop {
  color: var(--inkt-licht); font-size: .85rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--rand-sterk);
}

/* Twee sterktes scheiding, en dat verschil is informatie:
   een lijn over de volle breedte betekent een nieuwe dag, een lijn die pas bij
   de tekst begint betekent nóg een regel op diezelfde dag. Zonder dat tweede
   stonden regels van dezelfde dag alleen met witruimte uit elkaar, en dan is
   bij twintig regels niet meer te zien waar de ene ophoudt. */
.journaal-dag {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rand-sterk);
}
.journaal-dag:first-child { border-top: 0; }

.journaal-datum { text-align: right; padding-top: .1rem; }
.journaal-dagnummer {
  display: block;
  font-size: 1.5rem; font-weight: 600; line-height: 1.1;
  /* Cijfers even breed, zodat 9 en 30 onder elkaar uitlijnen. */
  font-variant-numeric: tabular-nums;
}
.journaal-maand { display: block; color: var(--inkt-licht); font-size: .8rem; }

.rapportageregel + .rapportageregel { margin-top: .7rem; }

/* Het vlak loopt door tot de rechterrand van het werkvlak, net als het
   schrijfvak erboven. Het stond eerder op 65 tekens — de leesmaat waarbij je
   aan het eind van een regel het begin van de volgende niet kwijtraakt — maar
   dan stopte het halverwege en bleef er rechts een handbreedte leeg, terwijl
   alles eromheen wél tot de rand loopt. Het werkvlak zelf heeft al een plafond
   (--breedte-werkvlak), dus er is een bovengrens; die ligt alleen hoger dan de
   ideale leesmaat. */
.rapportageregel {
  position: relative;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: .8rem 1.05rem 1rem;
  /* Eén lange sliert zonder spatie — een geplakte URL, een bestandsnaam, een
     achternaam van 80 tekens — brak anders niet af en liep dwars door de rand
     van het vlak heen, tot ver buiten het scherm. Erfelijk, dus het geldt ook
     voor de kop, de reacties en de toelichtingen erin. Gevonden met de
     rapportage van 5.000 tekens uit ops/nepdata.py. */
  overflow-wrap: anywhere;
}

/* In Mijn dossier: wie en wanneer op één regel, de datum gedempt ernaast. Eerst
   stonden ze even zwaar tegen elkaar aan en las "Wende Kastelein 23-09-2026"
   als één naam. */
.rapportageregel .kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.rapportageregel .kop .wie { font-weight: 600; }
.rapportageregel .kop .wanneer { color: var(--inkt-licht); font-size: .875rem; }

.rapportageregel .tekst {
  white-space: pre-wrap;
  font-size: 1.0625rem; line-height: 1.7;
}

/* Een gecorrigeerde regel blijft leesbaar. Doorstrepen was hier verkeerd: de
   oorspronkelijke tekst is onderdeel van het dossier en moet te lezen blijven,
   ook — juist — als er iets aan is rechtgezet. Alleen gedempt en gemerkt. */
.rapportageregel.vervangen .tekst { color: var(--inkt-zacht); }
/* Een gecorrigeerde regel krijgt een gedempt vlak: hij hoort erbij en blijft te
   lezen, maar hij is niet meer de versie die geldt. */
.rapportageregel.vervangen { background: var(--vlak-zacht); box-shadow: none; }
/* Alleen voor het team: een blauwe streep links en een lichte tint, in het
   journaal én in het schrijfvak als het vinkje aanstaat. Een vinkje alleen zie
   je over het hoofd; dan staat er een teamnotitie bij de cliënt. */
.rapportageregel.team {
  background: var(--team-zacht); border-color: var(--team);
  box-shadow: inset 4px 0 0 var(--team);
}
.regelmerk.team {
  display: flex; align-items: center; gap: .35rem;
  color: var(--team); font-weight: 600;
}
.regelmerk.team .icoon, .teamband .icoon { width: 1.05rem; height: 1.05rem; flex: none; }
.schrijfvak.team {
  background: var(--team-zacht); border-color: var(--team);
  box-shadow: inset 4px 0 0 var(--team);
}
.teamband {
  display: none; align-items: center; gap: .4rem;
  margin-bottom: .5rem; color: var(--team); font-weight: 600;
}
.schrijfvak.team .teamband { display: flex; }
/* De knop zegt wat er gebeurt. Twee teksten, één klasse die kiest. */
.schrijfvak .knop .voor-team, .schrijfvak.team .knop .voor-iedereen { display: none; }
.schrijfvak.team .knop .voor-team { display: inline; }
.schrijfvak.team .knop[type="submit"] { background: var(--team); border-color: var(--team); }
.schrijfvak.team .knop[type="submit"]:hover { filter: brightness(.9); }
.schrijfvak.team input[type="checkbox"]:checked { background-color: var(--team); border-color: var(--team); }
.regelmerk {
  font-size: .85rem; color: var(--inkt-licht);
  margin-bottom: .35rem;
}
.regelmerk.aandacht {
  color: var(--aandacht);
  border-left: 3px solid var(--aandacht);
  padding-left: .6rem;
}

/* De ondertekening staat onder de tekst, zoals in een logboek: eerst wat er
   gebeurd is, dan wie het opschreef. */
/* Even breed als de tekst erboven, met de ondertekening links en de acties
   rechts. Op één hoop staan ze als één grijze zin achter elkaar en is niet te
   zien waar het lezen ophoudt en het klikken begint. */
.regelvoet {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .25rem 1rem;
  margin-top: .6rem;
}
.ondertekening { color: var(--inkt-zacht); font-size: .85rem; }
.ondertekening:empty { display: none; }

/* Acties als tekst, niet als knop. Drie omrande knoppen onder elke regel wegen
   zwaarder dan de tekst waar ze bij horen. Het klikdoel blijft 44px — dat zit
   in de opvulling, niet in een zichtbaar kader. */
.regelacties { display: flex; flex-wrap: wrap; }
/* Op een scherm met een muis staan de acties er pas als je bij de regel bent.
   Bij twintig regels zijn het anders zestig klikbare woorden onder elkaar,
   terwijl je hier komt om te lézen — corrigeren en verbergen gebeuren zelden.
   Met visibility en niet met display: de ruimte blijft staan, dus er springt
   niets. Toetsenbord komt er gewoon bij via :focus-within, en op een tablet of
   telefoon — waar geen muis is om mee te wijzen — staan ze altijd zichtbaar. */
@media (hover: hover) {
  .regelacties { visibility: hidden; }
  .rapportageregel:hover .regelacties,
  .rapportageregel:focus-within .regelacties { visibility: visible; }

  /* En ze nemen geen eigen regel meer in beslag: ze staan rechts naast de kop,
     waar toch niets stond. Anders blijft er onder elke regel een strook van
     44px leeg staan om het springen te voorkomen — en dat is bij twintig
     regels een halve pagina lucht zonder betekenis. */
  .regelvoet { position: absolute; top: .3rem; right: .55rem; margin: 0; }
  /* Ruimte voor die acties vrijhouden in de kop. Zonder deze reservering
     schuift een lange kop — "geschreven 13 september om 22:43" — eronderdoor
     en loopt de tekst door de knoppen heen zodra je met de muis bij de regel
     komt. Gemeten: twaalf pixels overlap. */
  .regelkop { padding-right: 15rem; }
}

/* Een streep links en inspringen, geen gevuld vlak: dit is een citaat van een
   andere stem, en dat is precies wat een kantlijnstreep betekent. Ik had hier
   eerst het vlak gehouden en de streep geschrapt — dat was de verkeerde van de
   twee: een grijs blok legt méér gewicht in de schaal dan een lijn, terwijl een
   reactie juist ondergeschikt is aan de regel waar hij bij hoort. */
.reacties {
  margin: .75rem 0 0 .5rem; padding-left: 1rem;
  border-left: 3px solid var(--rand-sterk);
}
.reactie + .reactie { margin-top: .75rem; }
.reactie-wie { font-size: .85rem; color: var(--inkt-zacht); margin-bottom: .1rem; }
.reactie .tekst { white-space: pre-wrap; font-size: 1rem; line-height: 1.6; }

@media (max-width: 800px) {
  /* Op een telefoon is 4,5rem datumkolom plus een ruime tussenruimte een derde
     van de regelbreedte. De datum mag daar smaller en dichterbij staan. */
  .journaal-dag { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .75rem; }
  .journaal-dagnummer { font-size: 1.25rem; }
  .regelvoet { justify-content: flex-start; }
}

/* Het schrijfvak hoort bovenaan maar mag het journaal niet verdringen: het was
   een volle kaart met een kop, een losse datumveldgroep en een grote tekstbak,
   samen een derde van het scherm voordat je één regel zag. */
.schrijfvak {
  margin-bottom: 1.25rem; padding: .9rem 1rem;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
}
.schrijfvak-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}
.schrijfvak-kop label { font-weight: 600; }
.schrijfvak-kop input[type="date"] { width: 11rem; flex: none; }
.schrijfvak textarea { min-height: 5.5rem; }
.schrijfvak-voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: .6rem; flex-wrap: wrap;
}
.schrijfvak-voet .uitleg { margin: 0; flex: 1 1 22rem; }
.schrijfvak-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* De conceptstand is een mededeling, geen knop: hij mag niet meer gewicht
   krijgen dan de tekst die je aan het schrijven bent. Vaste breedte zodat de
   knoppen ernaast niet verspringen als "Bezig met bewaren…" wisselt met
   "Concept bewaard". */
.conceptstand {
  color: var(--inkt-licht); font-size: .85rem;
  min-width: 10.5rem; text-align: right;
}

/* ── Signaalbalk (audit-inzicht) ────────────────────────────────────────────
   Drie knoppen die de lijst eronder filteren, met een telling erop.

   Twee betekenissen, en die mogen niet dezelfde vorm krijgen:

   - "er is iets"  → alleen het getal kleurt. Geen achtergrond, geen rand.
   - "dit filter staat aan" → de knop wordt gevuld met de accentkleur.

   Eerder kregen ze allebei een gekleurd vlak met een gekleurde rand, en dan
   ziet een knop met een rood getal eruit als een knop die aanstaat. Vulling is
   nu het enige dat "ingedrukt" betekent, en dat kan maar bij één knop tegelijk
   waar zijn. */
/* Eén blok voor alles wat de lijst inperkt. Het staat als één vlak op het
   scherm, zodat zichtbaar is dat de knoppen bovenin en de velden eronder
   hetzelfde ding doen — eerder waren het twee losse balken met elk een eigen
   knop, en dan weet je niet meer wat er nu aanstaat. */
.filterbalk {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .6rem .75rem;
  margin-bottom: 1rem;
  background: var(--vlak-zacht);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.filterrij { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filterrij .knop.klein { margin-left: auto; }
.filterbalk select { flex: 0 0 12rem; }
.filterbalk input[type="date"] { flex: 0 0 11rem; width: 11rem; }
.filterbalk .veldnaam { color: var(--inkt-licht); font-size: .9rem; }
.filterbalk .vinkje { font-size: .9rem; }
.filtertoelichting {
  color: var(--inkt-zacht); font-size: .9rem;
  padding-top: .1rem;
}
.signaaltegel {
  display: flex; align-items: baseline; gap: .55rem;
  min-height: 44px; padding: .5rem .9rem;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--vlak); color: var(--inkt-zacht);
  cursor: pointer; text-align: left;
  font: inherit;
}
.signaaltegel:hover { border-color: var(--rand-sterk); background: var(--vlak-zacht); }
.signaal-aantal { font-size: 1.15rem; font-weight: 700; color: var(--inkt); }
.signaal-label { font-size: .9rem; }

/* Alleen het getal. Nul blijft gewoon donker: rood bij nul zou betekenen dat
   het scherm alarmerend kijkt terwijl er niets aan de hand is. */
.signaaltegel.stop .signaal-aantal { color: var(--stop); }

/* Aanstaan is gevuld — dat is niet te verwarren met een gekleurd cijfer. */
.signaaltegel.actief {
  background: var(--accent); border-color: var(--accent); color: var(--op-gevuld);
}
.signaaltegel.actief:hover { background: var(--accent-donker); border-color: var(--accent-donker); }
.signaaltegel.actief .signaal-aantal,
.signaaltegel.actief.stop .signaal-aantal { color: var(--op-gevuld); }

.knop.klein { min-height: 44px; padding: .4rem .8rem; font-size: .9rem; }

.qr { background: #fff; padding: 1rem; border-radius: var(--radius-klein); max-width: 15rem; }
.qr svg { width: 100%; height: auto; display: block; }

.herstelcodes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .4rem; margin: .75rem 0;
}
.herstelcodes code {
  background: var(--vlak-zacht); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: .45rem .6rem; text-align: center;
}

.rechtenvinkjes { display: grid; margin-top: .5rem; }

/* ── Lijsten met instellingen (Beheer) ──────────────────────────────────────
   Organisatie, Keuzelijsten en Bewaarbeleid zijn lijsten met korte regels, en
   die stonden hier als losse kaarten met elk een eigen kop, twee losse labels
   en een knop op een eigen regel. Eén bewaartermijn nam zo 260px in beslag om
   één getal te tonen, en dan scrol je door een halve meter lucht op zoek naar
   het ding dat je wilt wijzigen.

   Nu één kaart per groep, met regels eronder gescheiden door een haarlijn:
   links waar het over gaat, rechts wat je kunt zetten. De regel zelf blijft
   44px hoog, want dat is het klikdoel uit briefing §4.8 — de ruimte die
   verdwijnt is de ruimte die niets deed. */
/* De acties bij een gebruiker op één regel. Ze stonden als drie omrande
   knoppen naast elkaar en pasten niet in de kolom, dus brak "Deactiveren" naar
   een tweede regel en werd elke rij 90px hoog voor drie handelingen die je
   zelden doet. */
.rijacties { white-space: nowrap; text-align: right; }

.instellijst > * + * { border-top: 1px solid var(--rand); }
.instelrij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem 1rem; align-items: center;
  padding: .45rem 0;
}
/* De sleutel en zijn uitleg naast elkaar zolang het past, eronder zodra het
   niet meer past. Ze stonden altijd onder elkaar, en dat is twee regels hoog
   voor wat vaak op één regel kan. */
.instelnaam { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; }
.instelnaam .sleutel { font-weight: 600; margin-bottom: 0; }
.instelnaam .omschrijving { color: var(--inkt-licht); font-size: .85rem; }
.bediening { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Invoervelden zijn standaard 100% breed. In een regel is dat verkeerd: dan
   duwt elk veld de knop naar de volgende regel, en daar kwam de helft van de
   lucht op deze schermen vandaan. */
.bediening input, .bediening select { width: 11rem; }
/* Behalve het vinkje: dat is een vierkantje en geen invoerveld. Zonder deze
   regel kreeg het 11rem en stond er een uitgerekt vlak van 176 bij 22.
   Als uitzondering erná en niet als :not() ervóór — dat laatste tilt de
   basisregel boven .smalveld en .groeiveld uit, en dan verliest de
   organisatienaam zijn meegroeiende breedte. Dat was de tweede fout. */
.bediening input[type="checkbox"] { width: var(--vinkje); }
.bediening .smalveld { width: 7.5rem; }
.bediening .getalveld { width: 6.5rem; text-align: right; }
.bediening input[type="time"] { width: 8.5rem; }

/* ── Beheer ────────────────────────────────────────────────────────────────
   Een gewijzigd veld is te herkennen aan zijn rand; de opslaanbalk staat pas
   in beeld als er iets gewijzigd is, en blijft onderin staan terwijl je
   scrolt. Eén Opslaan voor alles, in plaats van één per regel. */
.beheerkop { justify-content: space-between; margin-bottom: .5rem; }
.beheerkop p { margin: 0; }
.beheerinstellingen [data-opslaan].gewijzigd { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.opslaanbalk {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem;
  margin-top: .5rem; padding: .6rem 1rem;
  background: var(--vlak); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
}
.opslaanbalk[hidden] { display: none; }
.opslaanbalk [data-wijzigingen] { margin-right: auto; font-weight: 600; }
.bewaarsignalen { margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--rand); }
.bewaarsignalen p { margin: 0 0 .3rem; }

/* Een keuzelijst in één regel: naam links, waarden als merkjes, en Toevoegen
   erachter. Het invoerveld verschijnt op dezelfde plek. */
.lijstrij { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); align-items: start; }
.lijstrij .instelnaam { padding-top: .55rem; }
.lijstwaarden { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.waardechip {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .65rem;
  border: 1px solid var(--rand); border-radius: 999px; background: var(--vlak-zacht);
  font-size: .9rem; overflow-wrap: anywhere;
}
.waardechip.inactief { color: var(--inkt-licht); text-decoration: line-through; }
.lijstwaarden .tekstknop .icoon { width: 1rem; height: 1rem; margin-right: .2rem; }
.lijstwaarden form.bediening { flex: 1 1 100%; }
.bediening .groeiveld { flex: 1 1 14rem; width: auto; min-width: 8rem; }
/* Een keuzelijst is uit zichzelf zo breed als zijn langste optie, en die
   breedte geeft hij door als ondergrens aan alles eromheen: één cliënt met een
   naam van tachtig tekens in "Toewijzen" maakte de hele medewerkerstabel breder
   dan zijn kaart, met de knoppen erbuiten. Met een breedte in procenten telt een
   keuzelijst niet meer mee voor die ondergrens; de flex-basis hierboven bepaalt
   nog steeds hoe breed hij wordt. `max-width` of `contain` doet dat niet. */
.bediening select.groeiveld { width: 100%; }
.bediening .veldnaam { color: var(--inkt-licht); font-size: .85rem; }

/* Kop van een kaart die een lijst draagt: naam, code en kenmerk op één regel
   in plaats van drie. */
.kaartkop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem;
  margin-bottom: .5rem;
}
.kaartkop h2 { margin-bottom: 0; }
/* Een kop met een handeling rechts: de naam van de kaart en de knop op één
   lijn, gecentreerd in plaats van op de grondlijn — de knop is 44px hoog. */
.kaartkop.met-knop { align-items: center; min-height: 44px; }
/* Het formulier dat een kopknop openklapt: eigen vlak onder de lijst. */
.toevoegpaneel { display: grid; gap: .6rem; margin-top: .6rem;
  padding-top: .75rem; border-top: 1px solid var(--rand); }
.toevoegpaneel .rij { align-items: center; }
/* Wat je zelden doet en niet per ongeluk wilt doen — uitschrijven, verwijderen —
   als tekst onderaan de kaart, links uitgelijnd met de gegevens erboven. */
.kaartvoet { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: .25rem; }
.kaartvoet .tekstknop { padding-left: 0; font-size: .875rem; }

/* Keuzewaarden zijn kort — een label en een code. Onder elkaar met .9rem
   vulling per regel werd één lijst van vijf waarden een halve pagina; naast
   elkaar in kolommen passen ze in twee regels. */
.waardenlijst {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 1rem;
}
.waardenlijst li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem;
  padding: .15rem 0;
}

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

/* ── Begeleidingsplan ──────────────────────────────────────────────────────
   Een boom van drie lagen: hulpvraag → doel → actie. De diepte is de enige
   structuur die er echt is, dus die draagt het scherm: elke laag springt in en
   hangt aan een lijn, zoals in Mextra. Het soort onderdeel staat er klein en
   gedempt voor, zodat je bij het scannen de tekst leest en niet de labels. */
.plannen { display: grid; gap: 1rem; }
.plannen-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plannen-kop .stil { margin: 0; }

.plankop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .25rem 1rem; }
.plankop-tekst {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
  flex: 1 1 20rem; min-width: 0;
}
.plankop-tekst h2, .plankop-tekst h3 { margin: 0; }
.planmeta { flex-basis: 100%; color: var(--inkt-licht); font-size: .9rem; }
.planacties { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.plankop-formulier { margin-bottom: .25rem; }

/* Een afgesloten plan hoort er nog, maar vraagt niets meer van je. */
.plankaart.afgesloten .plankop-tekst h2 { color: var(--inkt-zacht); }

/* Het soort onderdeel als vaste kolom — zo staat het bij de doelrapportage.
   In het plan zelf staat het boven de tekst (hieronder, onder .plannen). */
.onderdeel-soort { flex: none; width: 5rem; color: var(--inkt-licht); font-size: .85rem; }
@media (max-width: 800px) { .onderdeel-soort { width: auto; flex-basis: 100%; } }

.planboom, .planlaag { list-style: none; }
.planboom {
  display: grid; gap: .6rem;
  margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--rand);
}
/* Elke hulpvraag is een eigen blok; de doelen en acties hangen eronder aan een
   lijn. Het soort onderdeel staat klein bóven de tekst en niet in een kolom
   ervoor: die kolom schoof per laag mee in, en dan begon de tekst van een
   hulpvraag, een doel en een actie op drie verschillende plekken. */
.plannen .onderdeel-hulpvraag {
  padding: .35rem .9rem .5rem;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--vlak);
}
.plannen .planlaag {
  margin: .1rem 0 .15rem .35rem; padding-left: 1rem;
  border-left: 2px solid var(--rand);
}
.plannen .onderdeel-doel, .plannen .onderdeel-actie { padding: 0; }
.plannen .onderdeel-regel {
  display: flex; align-items: center; gap: .25rem 1rem; min-height: 44px;
  padding: .3rem 0;
}
.plannen .onderdeel-hoofd { flex: 1 1 auto; min-width: 0; display: grid; gap: .05rem; }
.plannen .onderdeel-soort {
  width: auto; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--inkt-licht);
}
.plannen .onderdeel-tekst { overflow-wrap: anywhere; }
.plannen .onderdeel-hulpvraag > .onderdeel-regel .onderdeel-tekst { font-weight: 600; font-size: 1.05rem; }
.plannen .onderdeel-doel > .onderdeel-regel .onderdeel-tekst { font-weight: 500; }
.plannen .onderdeel-extra { margin: 0; color: var(--inkt-zacht); font-size: .9rem; }
.onderdeel-acties {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0 .25rem;
}
/* Wijzigen en schrappen verschijnen bij de regel waar je bent — met de muis of
   met de tab-toets. Op elke regel twee knoppen was in een concept met drie
   onderdelen al negen keer "Wijzigen · Schrappen". Op een aanraakscherm is er
   geen "waar je bent", en staan ze er gewoon. */
@media (hover: hover) {
  .plannen .onderdeel-regel .bewerk { opacity: 0; }
  .plannen .onderdeel-regel:hover .bewerk,
  .plannen .onderdeel-regel:focus-within .bewerk { opacity: 1; }
}
.onderdeel-formulier { padding: .35rem 0; }
.onderdeel-formulier .smart { flex: 1 1 100%; width: auto; min-height: 4rem; }
/* Een knoppenpaar in een regel met velden gaat samen naar de volgende regel,
   nooit los: eerst stond "Annuleren" alleen op een eigen regel. */
.bediening-knoppen { display: inline-flex; align-items: center; gap: .5rem; flex: none; }

/* Toevoegen: dezelfde stille knop met een plus als op de basisgegevens. */
.toevoegknop {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: 0 .4rem 0 0;
  border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--accent); cursor: pointer;
}
.toevoegknop:hover { text-decoration: underline; }
.toevoegknop .icoon { width: 1rem; height: 1rem; flex: none; }
.planboom > .onderdeel-nieuw { padding-left: .1rem; }

/* Twee versies van één plan: kies welke je ziet. Eerst stond de versie in de
   maak als tweede, volledige boom onder de geldende, in dezelfde kaart. */
.versiekeuze {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin-top: .85rem; padding: .25rem;
  background: var(--vlak-zacht); border-radius: var(--radius-klein);
  width: fit-content; max-width: 100%;
}
.versietab {
  min-height: 40px; padding: 0 .9rem;
  border: 0; border-radius: var(--radius-klein); background: none;
  font: inherit; font-size: .9rem; color: var(--inkt-zacht); cursor: pointer;
}
.versietab[aria-selected="true"] {
  background: var(--vlak); color: var(--inkt); font-weight: 600;
  box-shadow: var(--schaduw), 0 0 0 1px var(--rand);
}
/* Een concept — een nieuwe versie, of een plan dat nog nooit gold — staat in
   een eigen stand: oranje tint, rand en streep, en een balk die zegt dat wat je
   hier typt nog niet geldt. Eerst was het een grijs vlak met een streepjesrand,
   en voor wie het scherm niet kent niet te onderscheiden van het plan zelf. */
.versie-in-de-maak { margin-top: .75rem; padding: .75rem 1rem 1rem; border-radius: var(--radius); }
.planconcept {
  background: var(--concept-zacht); border: 1px solid var(--concept);
  box-shadow: inset 4px 0 0 var(--concept);
}
.planconcept .planboom { border-top-color: var(--concept); }
.conceptband {
  display: flex; align-items: flex-start; gap: .45rem;
  margin: 0 0 .6rem; color: var(--concept); font-weight: 600;
}
.conceptband .icoon { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .15rem; }
.versietab[data-weergave="concept"][aria-selected="true"] {
  background: var(--concept-zacht); color: var(--concept);
  box-shadow: 0 0 0 1px var(--concept);
}

.eerdere-versies { margin-top: .75rem; border-top: 1px solid var(--rand); }
.eerdere-versies summary {
  display: flex; align-items: center; min-height: 44px;
  color: var(--inkt-zacht); cursor: pointer;
}
.eerdere-versie { padding: .5rem 0 .75rem; color: var(--inkt-zacht); }
.eerdere-versie + .eerdere-versie { border-top: 1px dashed var(--rand); }
.planboom-leeg { margin-top: .5rem; }

@media (max-width: 800px) {
  .plannen .onderdeel-regel { flex-wrap: wrap; }
  .onderdeel-acties { justify-content: flex-start; }
  .plannen .planlaag { margin-left: .15rem; padding-left: .7rem; }
}

/* ── Doelrapportage ────────────────────────────────────────────────────────
   Per plan een kaart, per doel een blok met zijn rapportages eronder. De
   regels zelf zijn dezelfde vlakken als in de algemene rapportage. */
.doelrapportages { display: grid; gap: 1rem; }
.uitlegkaart p { color: var(--inkt-zacht); max-width: 60ch; }
.doelblok { padding: .9rem 0; border-top: 1px solid var(--rand); }
.doelplan .plankop + .doelblok { margin-top: .75rem; }
.doelkop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .25rem .6rem; }
.doelkop .onderdeel-soort {
  display: block; width: auto; font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
/* Inklappen: een doel met een jaar rapportage wordt één regel, met het aantal
   en de laatste datum erbij. Een pijl in een knop van 44px, zonder animatie. */
.klapknop, .klapknop-plek { flex: none; width: 44px; height: 44px; }
.klapknop {
  display: inline-flex; align-items: center; justify-content: center; margin-top: -.3rem;
  border: 0; border-radius: var(--radius-klein); background: none;
  color: var(--inkt-zacht); cursor: pointer;
}
.klapknop:hover { background: var(--vlak-zacht); color: var(--inkt); }
.klapknop .icoon { width: 1.25rem; height: 1.25rem; }
.doelblok.ingeklapt .klapknop .icoon { transform: rotate(-90deg); }
.doelblok.ingeklapt .doelregels { display: none; }
.doelteller { color: var(--inkt-zacht); }
/* In een raster zorgt de gap voor de ruimte; de marge tussen twee regels uit de
   algemene rapportage kwam er anders bovenop, en dan stonden de eerste drie
   verder uit elkaar dan de rest. */
.doelregels .rapportageregel + .rapportageregel { margin-top: 0; }
/* Een lange tekst in het overzicht: zes regels en een knop, zodat één verslag
   van 5.000 tekens niet de hele pagina vult. */
.rapportageregel .tekst.ingekort {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.heletekst { padding-left: 0; margin-top: .15rem; }
.doelkop-tekst { flex: 1 1 18rem; min-width: 0; }
.doeltekst { font-weight: 600; }
.doeltekst .merkje { margin-left: .35rem; font-weight: 600; }
.doel-hulpvraag { color: var(--inkt-licht); font-size: .85rem; }
.doelschrijven {
  display: grid; gap: .5rem;
  margin: .75rem 0 .25rem calc(44px + .6rem); max-width: calc(65ch + 2.1rem);
}
/* Onder de tekst van het doel, na de klapknop. */
.doelregels { display: grid; gap: .7rem; margin: .75rem 0 0 calc(44px + .6rem); }
.doelregels > .stil { margin: 0; }

@media (max-width: 800px) {
  .doelschrijven, .doelregels { margin-left: 0; }
}

/* ── Evaluatie ─────────────────────────────────────────────────────────────
   Per plan een kaart, zoals bij de doelrapportage. De evaluatie in de maak
   staat in hetzelfde gestreepte vlak als een planversie in de maak: hij geldt
   nog niet, en niemand anders ziet hem. Een afgeronde evaluatie is een vlak
   zoals een rapportageregel, met de drie vragen als kopjes erin. */
.evaluaties { display: grid; gap: 1rem; }
.evaluatieplan .versie-in-de-maak { margin-top: .9rem; }
.evaluatiekop h3 { margin: 0; }
.evaluatiekop .planmeta { margin: .1rem 0 .6rem; }
.evaluatieformulier .bediening { margin-bottom: .75rem; }
.evaluatieformulier .veld { margin-bottom: .6rem; }
.evaluatieformulier textarea { min-height: 5.5rem; }
.evaluatieformulier .rij { margin-top: .6rem; }
.evaluatieformulier > .uitleg { margin-top: .4rem; }

.evaluatielijst { display: grid; gap: .7rem; margin-top: .9rem; }
.evaluatielijst > .stil { margin: 0; }
.evaluatie {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: .8rem 1.05rem 1rem;
  /* Zelfde reden als bij .rapportageregel: een sliert zonder spatie loopt
     anders dwars door de rand. */
  overflow-wrap: anywhere;
}
.evaluatievragen dt { margin-top: .75rem; font-weight: 600; }
.evaluatievragen dd {
  margin: .15rem 0 0;
  white-space: pre-wrap; line-height: 1.7;
}
.evaluatietekst { margin-top: .6rem; white-space: pre-wrap; line-height: 1.7; overflow-wrap: anywhere; }
.evaluatievoet { margin-top: .75rem; color: var(--inkt-licht); font-size: .85rem; }

/* Wat er is meegewogen: dicht, want het is achtergrond bij de evaluatie en
   niet de evaluatie zelf. Met een pijl, anders ziet een uitklapkop eruit als
   een gewone regel tekst. */
.meegewogen { margin-top: .75rem; border-top: 1px solid var(--rand); }
.meegewogen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.meegewogen li { padding: .55rem 0 .35rem; border-top: 1px dashed var(--rand); }
.meegewogen .regelmerk { margin-bottom: .15rem; }
.meegewogen .tekst { white-space: pre-wrap; }
.meegewogen-leeg { margin: .6rem 0 0; }

.meegewogen summary, .eerdere-versies summary, .eerdere-documenten summary {
  list-style: none; gap: .35rem;
}
.meegewogen summary::-webkit-details-marker,
.eerdere-versies summary::-webkit-details-marker,
.eerdere-documenten summary::-webkit-details-marker { display: none; }
.meegewogen summary::after, .eerdere-versies summary::after, .eerdere-documenten summary::after {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem;
  background: var(--pijl-omlaag) center / contain no-repeat;
}
.meegewogen[open] > summary::after,
.eerdere-versies[open] > summary::after,
.eerdere-documenten[open] > summary::after { transform: rotate(180deg); }
.meegewogen summary {
  display: flex; align-items: center; min-height: 44px;
  color: var(--inkt-zacht); cursor: pointer;
}

/* ── Aanwezigheid ──────────────────────────────────────────────────────────
   Per dagdeel de statussen als knoppen naast elkaar, als één blok: je ziet in
   één oogopslag wat er staat, en wat je bedoelt is één klik. De gekozen status
   is gevuld; de andere zijn rustig. Geen kleur per status — "Afwezig" rood
   maken zegt iets wat er niet staat, en de statussen zijn per klant anders. */
.dagkeuze {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-bottom: .9rem;
}
/* Het dagoverzicht: de dag als kop, de knoppen om te wisselen ernaast. */
.dagkop {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; margin-bottom: 1rem;
}
.dagkop .dagkeuze { margin-bottom: 0; }
.dagtitel { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.dagtitel .merkje { font-size: .8rem; }
.dagkeuze input[type="date"] { width: 11rem; }
.dagkeuze .maandnaam { margin: 0; min-width: 10rem; text-align: center; font-size: 1.15rem; }
.daglabel { color: var(--inkt-zacht); }

.aanwezigheidstelling {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 .9rem; color: var(--inkt-zacht);
}
/* Per dagdeel een blokje: in één oogopslag hoeveel er nog open staan. */
.tellingdeel {
  padding: .45rem .8rem; border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--vlak);
}
.tellingdeel strong { color: var(--inkt); margin-right: .3rem; }

.aanwezigheidstabel td { vertical-align: middle; padding-top: .5rem; padding-bottom: .5rem; }
.aanwezigheidstabel tbody tr:hover td { background: var(--vlak-zacht); }
.aanwezigheidsnaam { min-width: 12rem; }
.aanwezigheidsnaam .naamlink { font-weight: 600; color: var(--inkt); text-decoration: none; }
.aanwezigheidsnaam .naamlink:hover { color: var(--accent); text-decoration: underline; }
.aanwezigheidsnaam .clientnummer {
  display: block; color: var(--inkt-zacht); font-size: .8rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; margin-top: .1rem;
}
.dagnaam { width: 7rem; font-variant-numeric: tabular-nums; }
.dagnaam .merkje { margin-left: .35rem; }
/* Het weekend staat erbij, want soms is er iets, maar het is niet de gewone
   week. Gedempt vlak, de tekst houdt zijn contrast. */
.aanwezigheidstabel tr.weekend td { background: var(--vlak-zacht); }
.aanwezigheidstabel tr.vandaag td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.dagzoeken { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .75rem; }
.dagzoeken input[type="search"] { flex: 0 1 24rem; }
.aanwezigheidstabel tr[hidden] { display: none; }
.aanwezigheidscel { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
/* Een rustige knoppenrij: de gekozen status zacht gevuld, omlijnd en vet —
   niet alleen een kleur. Eerst was de gekozen knop donker gevuld, en in een
   lijst van veertig cliënten was dat een schaakbord. Een vinkje voor de tekst
   stond er ook; dat oogde goedkoop (L&T, 12 oktober), en de lijn en het vet
   zeggen al wat gekozen is. */
.statuskeuze {
  display: inline-flex; flex-wrap: nowrap;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  overflow: hidden; background: var(--vlak);
}
.statusknop {
  min-height: 44px; padding: 0 .8rem;
  font: inherit; font-size: .9rem; white-space: nowrap;
  background: var(--vlak); color: var(--inkt-zacht);
  border: 0; border-left: 1px solid var(--rand);
  cursor: pointer;
}
.statusknop:first-child { border-left: 0; }
.statusknop:hover { background: var(--vlak-zacht); color: var(--inkt); }
.statusknop[aria-pressed="true"] {
  background: var(--accent-zacht); color: var(--accent-donker); font-weight: 600;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.statusknop[aria-pressed="true"]:hover { background: var(--accent-zacht); }
.notitieknop { font-size: .85rem; min-height: 44px; }
/* De focusring binnenin: het blok heeft overflow hidden, en een ring erbuiten
   valt dan weg. */
.statusknop:focus-visible { outline-offset: -4px; }
.redenkeuze { width: 11rem; }
/* De notitie onder de knoppen, zo breed als de cel: een opmerking bij een
   dagdeel, geen rapportage. Alleen als er een status staat — een lege cel in
   een dagoverzicht van veertig cliënten krijgt geen extra veld. */
.notitieveld { flex: 1 1 100%; min-width: 0; }

@media (max-width: 800px) {
  .aanwezigheidsnaam { min-width: 0; }
  .statusknop { padding: 0 .55rem; }
}
.statusknop[aria-pressed="true"]:focus-visible { outline-color: var(--accent); }

/* ── Maandkalender in het dossier ──────────────────────────────────────────
   Werkdagen in kolommen, per dag een teken per dagdeel. Een naslag, geen
   werklijst: de knoppen staan in het paneel eronder, voor de dag die je kiest.
   De kleuren zijn gedempt en nooit het enige: elk teken staat in de legenda en
   wordt voorgelezen. */
.kalenderkaart { overflow-x: auto; }
.kalender { width: 100%; table-layout: fixed; border-collapse: collapse; }
.kalender th {
  text-align: center; padding: .5rem 0; border-bottom: 1px solid var(--rand);
  color: var(--inkt-zacht); font-weight: 600;
}
.kalender td { padding: 0; border: 1px solid var(--rand); border-top: 0; vertical-align: top; }
.kalender tr td:first-child { border-left: 0; }
.kalender tr td:last-child { border-right: 0; }
.kalender tbody tr:last-child td { border-bottom: 0; }
.kalenderleeg { background: var(--vlak-zacht); }
.kalenderdag {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  width: 100%; min-height: 4.25rem; padding: .45rem .55rem;
  background: var(--vlak); border: 0; color: var(--inkt);
  font: inherit; text-align: left; cursor: pointer;
}
.kalenderdag:hover { background: var(--vlak-zacht); }
.kalenderdag.later { color: var(--inkt-zacht); }
.kalenderdag.gekozen { box-shadow: inset 0 0 0 2px var(--accent); }
.kalenderdag:focus-visible { outline-offset: -4px; }
.kalendernummer { font-weight: 600; font-variant-numeric: tabular-nums; }
.kalenderdag.vandaag .kalendernummer {
  background: var(--accent); color: var(--op-gevuld); border-radius: 999px; padding: 0 .45rem;
}
.kalendertekens { display: flex; gap: .3rem; font-size: .95rem; line-height: 1; min-height: 1.5rem; }
/* Per dagdeel een blokje met het teken, in de zachte kleur van de status. Een
   leeg dagdeel houdt zijn plek, maar laat niets zien. */
.kalendertekens .markering {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 6px; background: var(--vlak-zacht);
}
.kalendertekens .markering.leeg { background: transparent; }
.kalendertekens .markering.status-aanwezig { background: var(--goed-zacht); }
.kalendertekens .markering.status-afwezig { background: var(--stop-zacht); }
.kalendertekens .markering.status-afgemeld { background: var(--aandacht-zacht); }
/* Altijd aanwezig, ook leeg: dan zijn alle dagen in een week even hoog, en
   staat er onder een dag zonder reden geen strook van de cel. */
.kalenderreden { font-size: .8rem; color: var(--inkt-zacht); line-height: 1.1; min-height: 1.1em; }
.markering { display: inline-block; min-width: 1ch; text-align: center; }
.markering.status-aanwezig { color: var(--goed); }
.markering.status-afwezig { color: var(--stop); }
.markering.status-afgemeld { color: var(--aandacht); }
.markering.status-anders { color: var(--rust); font-weight: 600; font-size: .85rem; }
.markering.open { color: var(--inkt-licht); }
.kalenderlegenda {
  display: flex; flex-wrap: wrap; gap: .3rem 1.25rem;
  margin: .6rem 0 0; color: var(--inkt-zacht); font-size: .9rem;
}
.kalenderlegenda .markering { margin-right: .2rem; }
.dagpaneel { margin-top: 1rem; display: grid; gap: .6rem; }
.dagpaneelkop { margin: 0; font-size: 1.05rem; }
.dagdeelregel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.dagdeelnaam { min-width: 5rem; font-weight: 600; }

/* ── Documenten ────────────────────────────────────────────────────────────
   Eén lijst, van deze cliënt alleen. Bovenaan één filter op categorie en de
   knop om toe te voegen; een formulier voor een bestaand document opent onder
   zijn eigen regel, op een gedempt vlak. */
.documenten { display: grid; gap: 1rem; }
/* Een griditem is minstens zo breed als zijn inhoud. Zonder deze regel duwt een
   brede tabel de hele kaart het werkvlak uit, in plaats van binnen zijn eigen
   vak te scrollen. */
.documenten > * { min-width: 0; }
.documentenkop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.documentenkop select { width: auto; min-width: 14rem; max-width: 100%; }
.documentenkop .knop { margin-left: auto; }

.documentformulier { display: grid; gap: .6rem; }
/* "categorie kiezen" paste niet in de 11rem van een veld in een regel. */
.documentformulier .bediening select[name=categorie_id] { width: 15rem; }
.documentformulier .uitleg, .documentformulier .melding { margin: 0; }
.formulierkop { margin: 0; }
.documentformulierrij > td { background: var(--vlak-zacht); padding: .9rem 1rem; }

/* Het bestandsvak (js/ui/bestandvak.js): kiezen of slepen. Het echte veld ligt
   doorzichtig over het hele vak, dus klikken, het toetsenbord en een losgelaten
   bestand komen allemaal in dat veld terecht. */
.bestandvak {
  position: relative; display: flex; align-items: center; gap: .9rem;
  min-height: 5.5rem; padding: .9rem 1.1rem; margin: 0;
  border: 2px dashed var(--rand-sterk); border-radius: var(--radius);
  background: var(--vlak-zacht); font-weight: 400; cursor: pointer;
}
.bestandvak:hover, .bestandvak.sleept { border-color: var(--accent); background: var(--accent-zacht); }
.bestandvak:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.bestandsveld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.bestandvak-icoon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--vlak); color: var(--accent); box-shadow: 0 0 0 1px var(--rand);
}
.bestandvak-icoon .icoon { width: 1.4rem; height: 1.4rem; }
.bestandvak-leeg, .bestandvak-gekozen { display: grid; gap: .15rem; min-width: 0; }
.bestandvak-leeg[hidden], .bestandvak-gekozen[hidden] { display: none; }
.bestandvak-tekst { color: var(--inkt); }
.bestandvak-tekst strong { color: var(--accent); }
.bestandvak-uitleg { color: var(--inkt-zacht); font-size: .875rem; }
.bestandvak-naam { font-weight: 600; overflow-wrap: anywhere; }
.bestandvak-ander { color: var(--accent); text-decoration: underline; }
.bestandvak.heeft-bestand { border-style: solid; border-color: var(--accent); }
.bestandvak.te-groot { border-style: solid; border-color: var(--stop); background: var(--stop-zacht); }
.bestandvak.te-groot .bestandvak-uitleg { color: var(--stop); font-weight: 600; }

.documententabel td { vertical-align: top; }
.documentgeldig .niet-breken { white-space: nowrap; }
.documentgeldig .merkje { display: inline-block; margin-top: .2rem; }
.documentcel { min-width: 16rem; }
.documenttitel { font-weight: 600; }
.documentdetail { display: block; color: var(--inkt-zacht); font-size: .85rem; overflow-wrap: anywhere; }
.eerdere-documenten summary {
  display: flex; align-items: center; min-height: 44px;
  color: var(--inkt-zacht); cursor: pointer;
}
.eerdere-documenten ul { list-style: none; margin: 0; padding: 0 0 .25rem; display: grid; gap: .45rem; }

.eerdere-documenten li .merkje { margin-right: .4rem; }

/* Een bericht uit Mijn dossier in het dagoverzicht: een merkje onder de naam,
   dat naar de rapportage leidt. */
.berichtmerkje { display: inline-block; margin-top: .3rem; text-decoration: none; }

/* Dossier verwijderen: een eigen kaart onder de gegevens, met een rand in de
   kleur van stoppen. Rustig, maar niet te missen: dit is niet terug te draaien. */
.verwijderkaart { border-color: var(--stop); }
.verwijderkaart form { display: grid; gap: .6rem; margin-top: .6rem; }

/* ── Medewerkers en bestuur (briefing §5.9) ─────────────────────────────────
   Dezelfde documententabel als bij een cliënt; alleen de lijst met dossiers is
   eigen. Een beëindigd dossier blijft staan — het contract valt onder de
   fiscale bewaarplicht — maar mag rustiger. */
/* Soort en aantal documenten breken niet af; de cliëntenkolom wel — een
   begeleider met acht cliënten is een lange regel. */
.medewerkerstabel td:nth-child(2), .medewerkerstabel td:nth-child(4) { white-space: nowrap; }
.clientencel { min-width: 14rem; }
.clientencel .toegewezen { margin-right: .5rem; }

/* Toewijzen, onder de regel van de begeleider: wie hij nu heeft, en iemand
   erbij. Zelfde vlak als de formulieren onder een document. */
.toewijspaneel { display: grid; gap: .6rem; }
.toewijslijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.toewijslijst li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .25rem 1rem; padding: .15rem 0; border-bottom: 1px solid var(--rand);
}
.toewijslijst li:last-child { border-bottom: 0; }
.toewijsnaam { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.toewijspaneel .bediening .vinkje { white-space: nowrap; }

/* Geen eigen kopregel met een lege tabelkop erboven: één regel die zegt dat
   hieronder de beëindigde dossiers staan. */
.medewerkerstabel .tussenkop td {
  background: var(--vlak-zacht); color: var(--inkt-zacht);
  font-weight: 600; padding: .5rem 1rem;
}
.medewerkerstabel .uit-dienst td:first-child a { color: var(--inkt-zacht); }

.kruimel { margin: 0 0 .15rem; font-size: .9rem; }

/* ── Adressen en telefoonnummers in Gegevens bewerken ──────────────────────
   Onder het e-mailadres, in de groep Contact. Een bestaande rij beëindig je
   met een markering die pas bij Opslaan doorgaat: doorgestreept, met de
   uitleg erbij, en de knop wordt "Toch houden". Nieuwe rijen staan eronder
   in dezelfde bedieningsregel als elders. */
.contactlijsten { display: grid; gap: .6rem; margin-top: 1rem; }
.contactlijsten [data-nieuw]:empty { display: none; }
.contactlijsten [data-nieuw] { display: grid; gap: .5rem; }
.wordt-beeindigd-uitleg { display: none; }
.instelrij.wordt-beeindigd .sleutel { text-decoration: line-through; color: var(--inkt-zacht); }
.instelrij.wordt-beeindigd .wordt-beeindigd-uitleg { display: inline; color: var(--aandacht); }
/* Hetzelfde gewicht als een gewoon veldlabel (label in components.css), zodat
   het kopje boven de adressen leest als "nog een veld" en niet als een kaart. */
.contactlijsten .veldlabel { font-weight: 600; margin: 0; }
/* "Nog geen adres" klopt tot je er een gaat invullen; daarna spreekt het de
   rij eronder tegen. */
.contactlijsten:has([data-rij]) .contact-leeg { display: none; }

/* Beheer › Gebruikers: de kolom Toegang. Merkje en tijdstip onder elkaar, zodat
   de kolom smal blijft naast e-mail en acties. */
.toegang .merkje { white-space: nowrap; }
.toegang-wanneer { display: block; font-size: .8125rem; margin-top: .15rem; white-space: nowrap; }

/* Medewerkers: Gegevens wijzigen en Uit dienst naast elkaar rechts in de kop,
   als tekst en niet als twee grote knoppen — hetzelfde gewicht als "Gegevens
   bewerken" in het dossier van een cliënt. */
.paginakop-knoppen { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.paginakop-knoppen .kopknop { margin-left: 0; }

/* Netwerkcontact: of hij kan inloggen, en de knop om hem uit te nodigen. */
.contactaccount { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.contactaccount .tekstknop { padding-left: 0; }

/* Beheer › Toegang: naam en e-mailadres in één cel, het adres eronder. Als
   twee kolommen drukten de knoppen rechts ze zo smal dat "Kastelein" als
   "Kastele-in" brak en het adres letter voor letter onder elkaar stond. */
.toegangnaam { min-width: 12rem; }
.toegangnaam .documentdetail { display: block; }

/* Na het toevoegen: de vraag of iemand nu een uitnodiging krijgt. */
.vervolgkaart { border-left: 4px solid var(--accent); margin-bottom: 1rem; }
.vervolgkaart p { margin-bottom: .75rem; }
/* Bij een medewerker die nog niet binnen is: de stand onder zijn naam. */
.medewerkerstand { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
.medewerkerstand .tekstknop { padding-left: 0; }
/* Dossier › Mijn dossier: of de cliënt zelf kan meelezen, met het merkje voorop. */
.mijndossierstand { margin: 0; }
.mijndossierstand .merkje { margin-right: .4rem; }

/* ── Ziek melden in Mijn dossier ─────────────────────────────────────────────
   Dezelfde kalender als het maandoverzicht, met één stand per dag: gekozen
   (omlijnd, zoals een gekozen knop) of ziek gemeld (het woord "ziek"). Nooit
   alleen een kleur. */
.ziekmelden .dagkeuze { margin: .5rem 0 .75rem; }
.ziekkalender .kalenderdag { min-height: 3.5rem; }
.ziekdag-buiten { background: var(--vlak-zacht); }
.ziekdag-buiten .kalenderdag { cursor: default; background: transparent; }
.ziekdag.gemeld { background: var(--aandacht-zacht); }
.ziekstand { font-size: .85rem; font-weight: 600; height: 1.1rem; line-height: 1.1rem; color: var(--inkt); }
.ziekdag.gekozen .ziekstand { color: var(--accent); }
.ziekonder { margin-top: 1rem; display: grid; gap: .6rem; }
.ziekonder p { margin: 0; }
.ziekonder .veld { margin-bottom: 0; }
.ziekonder .statuskeuze { justify-self: start; }
.ziekdeel { font-size: .8rem; color: var(--inkt-zacht); line-height: 1.1; }
.ziekdag.gekozen, .ziekdag.gekozen:hover { background: var(--accent-zacht); }

/* ── Incidentmelding ─────────────────────────────────────────────────────────
   Het formulier volgt Mextra van boven naar beneden; elke kaart is een stap.
   Een deelnemer die niet aan jou is toegewezen staat als initialen, cursief,
   met uitleg in de title — zonder aparte uitlegtekst op het scherm. */
.incidentenkop { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.incidentfilter { margin-bottom: 1rem; }
.incidentfilter select { width: auto; min-width: 16rem; }
.incidententabel td { vertical-align: top; }
.incidentstand { white-space: nowrap; }
.initialen { font-style: italic; }
.incidentformulier .kaart { margin-bottom: 1rem; }
.incidentvelden { border: 0; margin: 0; padding: 0; min-width: 0; }
.incidentvelden:disabled .statusknop[aria-pressed="false"] { color: var(--inkt-zacht); }
.incidentvelden:disabled input, .incidentvelden:disabled textarea,
.incidentvelden:disabled select { color: var(--inkt); }
.incidentvraag { display: grid; gap: .4rem; justify-items: start; }
.veldlabel { font-weight: 600; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
fieldset.veld { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
fieldset.veld legend { padding: 0; margin-bottom: .3rem; }
.betrokkenenlijst { list-style: none; margin: 0 0 1rem; padding: 0; }
.betrokkene {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem;
  padding: .45rem 0; border-bottom: 1px solid var(--rand);
}
.betrokkene:last-child { border-bottom: 0; }
.betrokkene-naam { font-weight: 600; }
.betrokkene-knoppen { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.statusknop.losse { border: 1px solid var(--rand); border-radius: var(--radius-klein); }
.betrokkene-toevoegen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: .6rem; }
.betrokkene-zoek { flex: 1 1 18rem; min-width: 0; }
.betrokkene-toevoegen > input[type="text"] { flex: 1 1 18rem; width: auto; min-width: 0; }
.ggdblok {
  margin: .25rem 0 1rem; padding: .75rem 1rem; border-radius: var(--radius-klein);
  background: var(--aandacht-zacht); color: var(--inkt);
}
.ggdblok p { margin: 0 0 .6rem; }
.ggdblok .veld { margin-bottom: 0; max-width: 14rem; }
.ggdregel { margin: .4rem 0 0; }
.formulierknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0 1rem; }
.formulierknoppen select { width: auto; }