:root {
  /* ── Accent ──────────────────────────────────────────────────────────────
     ÉÉN plek voor de merkkleur. --accent-rgb is dezelfde kleur als losse RGB-
     componenten, zodat afgeleide tints via rgba(var(--accent-rgb), <alpha>) de
     accentkleur automatisch volgen. Een nieuw palet = alleen deze regels wijzigen;
     nergens anders in dit bestand staat nog een losse accent-hex (afgedwongen,
     niet toevallig — zie de afgeleide tokens hieronder). */
  --accent: #138a8a;          /* teal — zachter/moderner dan het oude harde blauw */
  --accent-rgb: 19, 138, 138;
  --accent-dark: #0f6e6e;
  --op-accent: #fff;          /* tekst/icoon op een accent-vlak (knop, actieve tab) */
  --accent-zacht: rgba(var(--accent-rgb), 0.08);  /* hover-vulling */
  --accent-ring: rgba(var(--accent-rgb), 0.12);   /* focus-ring (box-shadow) */
  --accent-ring-sterk: rgba(var(--accent-rgb), 0.15);
  --knop-schaduw: 0 1px 2px rgba(var(--accent-rgb), 0.3);

  --text: #1a2222;
  --muted: #5a6a6a;
  --line: #dfe6e6;            /* iets zachtere, koelere randkleur */
  --bg: #fafbfb;
  --card: #fff;
  --section-alt: #eef4f4;     /* lichte teal-getinte vlakken i.p.v. blauwgrijs */
  --radius: 12px;             /* iets ronder/moderner */
  --radius-s: 9px;            /* kleinere radius: inputs, panelen, knoppen met hoek */
  /* Focus-ring: zachter dan de oude 3px harde outline — 2px + een subtiele ring. Nog
     goed zichtbaar, minder schreeuwerig (vorm, niet toegankelijkheid). */
  --focus-outline: 2px solid var(--accent);
  --focus-ring: 0 0 0 4px var(--accent-ring);

  /* Afgeleide/neutrale oppervlakken en tints (volgden voorheen als losse hex door
     het bestand). */
  --rij-hover: #f0f6f6;       /* table.list rij-hover (teal-getint) */
  --cel-hover: #e4f0f0;       /* evaluatie/indeel-cel hover */
  --cluster-1: #eef3f3;       /* les-strip doel-clustertinten (neutraal, koel) */
  --cluster-2: #f5f7f7;
  --cluster-3: #e7eeee;
  --env-badge: #b26a00;       /* STAGING-badge */
  --schaduw-licht: 0 1px 3px rgba(0, 0, 0, 0.05);   /* kaarten/tabellen */
  --schaduw-paneel: 0 6px 16px rgba(0, 0, 0, 0.09);  /* uitleg-paneel */
  --schaduw-dropdown: 0 8px 22px rgba(0, 0, 0, 0.11); /* doel-zoeker-dropdown */

  /* Toegankelijke status-kleuren (sleepdoel/duiding), afgestemd op het palet.
     Altijd samen met icoon + tekst gebruikt, nooit kleur-alleen. */
  --zorg: #b00020;
  --zorg-bg: #fdecec;
  --aandacht: #8a5a00;
  --aandacht-bg: #fff6e5;
  --goed: #1a7f3c;
  --goed-bg: #e7f5ec;
  /* Geel — de tussenstap tussen groen en oranje in de urgentie-schaal (R53). Donker genoeg
     voor AA-contrast op de lichte achtergrond; onderscheidend van --aandacht (oranje). */
  --geel: #7a6a00;
  --geel-bg: #fcf7d6;
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}
.muted { color: var(--muted); }
.msg { min-height: 1.2em; color: var(--accent-dark); font-size: 0.9rem; }
.fout { color: var(--zorg); font-weight: 600; }
.melding { color: var(--goed); font-weight: 600; }

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-outline); outline-offset: 2px; box-shadow: var(--focus-ring);
}

/* Skip-link (a11y) */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: var(--op-accent); padding: .5rem 1rem; z-index: 20;
}
.skip-link:focus { left: 0; }

/* Alleen voor schermlezers: uit beeld, maar wel in de toegankelijkheidsboom. Zo houden
   we een h1 per pagina (a11y) zonder de titel visueel te herhalen naast de actieve nav-tab. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* App-brede status (autosave + server-side meldingen). Zit rechts in de nav-rij (zie
   .navrij) als een contrasterende pill, zodat een melding duidelijk zichtbaar is i.p.v.
   weg te vallen tegen de header. Leeg → volledig onzichtbaar (geen lege gekleurde pill).
   Krijgt tekst van de scherm-JS (autosave) of server-side (PRG). Standaard = "goed"
   (melding), .fout = rood. Het id/.app-status-contract blijft (de JS schrijft erop). */
.app-status {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--goed-bg);
  color: var(--goed);
  border: 1px solid var(--goed);
  flex: 0 0 auto;        /* krimpt niet; blijft rechts naast de nav staan */
  margin-left: auto;     /* duwt de pill naar rechts, ook als de nav smaller is */
  max-width: 45%;        /* bij een lange melding niet de halve balk opeten */
}
.app-status:empty { display: none; margin-left: 0; }
.app-status.fout { background: var(--zorg-bg); color: var(--zorg); border-color: var(--zorg); }

/* Login-kaart */
.card {
  max-width: 26rem;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-licht);
}
.card h1 { margin-top: 0; color: var(--accent-dark); }
/* 404-pagina: een nagebootst Evaluatie-scherm met een "onvoldoende" (zie niet-gevonden.ts). */
.nf { margin: 2rem auto; text-align: center; }
.nf h2 { font-size: 2.4rem; line-height: 1.2; margin: 0.4rem 0 1.4rem; }
.nf-tekst { max-width: 46rem; margin: 1.2rem auto; }
/* De mockup is een illustratie: links uitgelijnd (zoals het echte scherm), niet bedienbaar,
   en horizontaal scrollbaar op smalle schermen i.p.v. de pagina te verbreden. */
.nf-mock {
  text-align: left; overflow-x: auto; pointer-events: none; user-select: none;
  padding: 0.8rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--schaduw-licht);
}
.nf-mock .vak-tabs { margin-bottom: 0.8rem; }
/* Op desktop gebruikt: niets laten wrappen (tabs, kolomkoppen, namen, opmerkingen). Past het niet
   (smal scherm), dan scrolt de mockup horizontaal i.p.v. te wrappen. */
.nf-mock .vak-tabs a, .nf-mock th, .nf-mock td { white-space: nowrap; }
.nf-mock .nf-pad { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }

/* App-shell — header + hoofdnav samen bovenaan vastgezet (sticky), zodat de navigatie
   niet wegscrolt bij een lange pagina (bv. het groepsplan). */
.app-top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
header.app {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--card);
}
header.app .brand { font-weight: 700; color: var(--accent-dark); font-size: 1.1rem; }
.header-titel { font-size: 1.05rem; font-weight: 600; color: var(--accent-dark); }
.env-badge {
  background: var(--env-badge);
  color: var(--op-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
header.app .spacer { flex: 1; }
header.app .gebruiker { font-size: 0.85rem; color: var(--muted); }

/* R54: school-logo in de header (beeldmerk-icoon vóór het woordmerk). */
header.app .brand-logo { height: 1.5rem; width: auto; display: block; margin-right: 0.1rem; }

/* R55/R56: tandwiel-icoon rechtsboven → schoolinstellingen (naast het gebruikersmenu). */
.instel-icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; color: var(--muted);
  margin-right: 0.3rem; text-decoration: none;
}
.instel-icoon:hover { background: var(--section-alt); color: var(--accent); }
.instel-icoon:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-ring); }

/* R54: gebruikersmenu — initialen-avatar + naam als trigger, uitklappaneel eronder. */
.gebruikersmenu { position: relative; }
.gebruikersmenu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0.4rem; border-radius: 999px;
}
.gebruikersmenu > summary::-webkit-details-marker { display: none; }
.gebruikersmenu > summary:hover { background: var(--section-alt); }
.gebruikersmenu > summary:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-ring); }
.gebruikersmenu .avatar {
  width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--accent);
  color: var(--op-accent); font-size: 0.75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.gebruikersmenu .gebruiker-naam { font-size: 0.85rem; color: var(--text); font-weight: 600; }
.gebruikersmenu .menu-pijl { font-size: 0.7rem; color: var(--muted); transition: transform 0.15s ease; }
.gebruikersmenu[open] .menu-pijl { transform: rotate(180deg); }
.gebruikersmenu-paneel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 30;
  min-width: 16rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--schaduw); padding: 0.8rem 0.9rem;
}
.gebruikersmenu-paneel .gm-naam { font-weight: 700; color: var(--accent-dark); margin: 0 0 0.5rem; font-size: 1rem; }
.gebruikersmenu-paneel .gm-regel { margin: 0.25rem 0; font-size: 0.85rem; color: var(--text); }
.gebruikersmenu-paneel .gm-label { color: var(--muted); display: inline-block; min-width: 7rem; }
.gebruikersmenu-paneel .gm-sessie { color: var(--muted); font-size: 0.8rem; }
.gebruikersmenu-paneel .gm-uitloggen {
  display: inline-block; margin-top: 0.7rem; padding: 0.3rem 0.8rem; border-radius: 6px;
  background: var(--section-alt); color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.85rem;
}
.gebruikersmenu-paneel .gm-uitloggen:hover { background: var(--accent-zacht); }

/* Nav-rij: de hoofdnav links, de app-status-pill rechts uitgelijnd. Zo staat een melding
   los van de nav-items, rechts in beeld en met contrast — niet weggemoffeld in de header.
   GEEN wrap op deze rij: anders zakt de status-pill onder de (brede) nav i.p.v. rechtsboven
   te blijven (bug: op Beheer is de nav het breedst en wrapte de pill eronder). De nav neemt
   de resterende ruimte en wrapt zijn eigen pillen; de status-pill blijft rechts staan. */
.navrij {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 1.5rem;
  flex-wrap: nowrap;
}

/* Navigatie — segmented control (pills in een lichte houder) */
nav.app {
  display: flex;
  gap: 0.15rem;
  padding: 0.2rem;
  margin: 0.5rem 1.5rem;
  background: var(--section-alt);
  border-radius: 999px;
  flex: 1 1 auto;    /* neemt de ruimte naast de status-pill; wrapt zijn eigen pillen */
  min-width: 0;      /* mag krimpen i.p.v. de status-pill weg te duwen */
  flex-wrap: wrap;
}
nav.app a {
  text-decoration: none;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--muted);
  transition: background 0.12s ease, color 0.12s ease;
}
nav.app a:hover { background: var(--accent-zacht); color: var(--accent); }
nav.app a.active { background: var(--accent); color: var(--op-accent); font-weight: 600; }

/* Hoofdnav-uitklap ("Meer"): de secundaire pillen schuiven inline naar rechts uit.
   De verberg-staat geldt ALLEEN mét JS (nav[data-js]) — zonder JS staat alles zichtbaar,
   zodat niets onbereikbaar is (progressive enhancement; zie app-shell.js). */
.nav-meer {
  background: none; border: none; box-shadow: none; cursor: pointer; align-self: center;
  color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.4rem 0.8rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.25rem;
}
.nav-meer:hover { background: var(--accent-zacht); color: var(--accent); }
.nav-meer .nav-meer-pijl { font-size: 0.7rem; transition: transform 0.15s ease; }
.nav-secundair { display: contents; }
/* Met JS: verberg de "Meer"-knop pas tonen en de secundaire pillen inklappen. */
nav.app[data-js] .nav-secundair { display: none; }
nav.app[data-js][data-open] .nav-secundair { display: contents; }
nav.app[data-js][data-open] .nav-meer .nav-meer-pijl { transform: rotate(90deg); }
/* Zonder JS is de "Meer"-knop zinloos (hij doet niets) → verberg 'm, toon alles. */
nav.app:not([data-js]) .nav-meer { display: none; }

/* Twee-lagen-schermindeling (zie de scherm()-helper in keuzebalk.ts): vaste kop +
   scrollende body. Werkt ALLEEN mét JS (scherm[data-js] + de gemeten --kop-hoogte);
   zonder JS blijft het een gewone, meescrollende pagina. */
.scherm { display: contents; }
.scherm[data-js] .scherm-body {
  height: calc(100vh - var(--kop-hoogte, 0px));
  overflow-y: auto;
  overflow-x: auto;
  /* Trek de main-padding naar binnen zodat het scrollgebied de volle breedte benut en de
     scrollbar netjes rechts staat; de onderrand krijgt wat lucht. */
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Kolomkoppen blijven in beeld tijdens het scrollen van de rijen. */
.scherm[data-js] .scherm-body table.list thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Vak-selectie binnen een scherm: zelfde pill-look als de hoofdnav, maar links
   uitgelijnd binnen de main (geen eigen horizontale marge). */
nav.app.vak-pillen { margin: 0 0 1rem; }

/* Vak-keuze als échte tabstrip (Variant 2): onderstreept, visueel apart van de
   pil-keuzes eronder. */
.vak-tabs { display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--line); margin: 0 0 1rem; }
.vak-tabs a {
  text-decoration: none; color: var(--muted); font-size: 0.95rem; font-weight: 600;
  padding: 0.4rem 0.9rem; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.vak-tabs a:hover { color: var(--accent); }
.vak-tabs a.actief { color: var(--accent-dark); border-bottom-color: var(--accent); }
/* Dezelfde tabstrip ook voor JS-tabs (.vtab met aria-selected) — bv. Overzicht per groep.
   Reset de generieke button-stijl (ronde pil + schaduw) volledig, zodat het een strakke
   onderstreepte tab wordt, identiek aan de <a>-tabs hierboven. */
.vak-tabs .vtab {
  background: none; border: none; border-radius: 0; box-shadow: none; cursor: pointer;
  align-self: auto; font: inherit; text-decoration: none; color: var(--muted);
  font-size: 0.95rem; font-weight: 600;
  padding: 0.4rem 0.9rem; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.vak-tabs .vtab:hover { color: var(--accent); background: none; }
.vak-tabs .vtab[aria-selected="true"] { color: var(--accent-dark); border-bottom-color: var(--accent); }
/* Rechter-groep op de tabstrip-regel: een optioneel extra-slot (bv. de Les/Toets-toggle)
   gevolgd door het ?-icoon. De margin-left:auto staat op het eerste rechter-element, zodat
   extra + ? samen naar rechts duwen en als groepje bij elkaar staan (extra links van ?). */
.vak-tabs .vak-tabs-extra { margin-left: auto; display: inline-flex; align-items: center; }
.vak-tabs .vak-tabs-extra + .vak-tabs-hulp { margin-left: 0.5rem; }
/* Geen extra-slot? Dan duwt de ?-hulp zelf naar rechts (ongewijzigd gedrag). */
.vak-tabs .vak-tabs-hulp { margin-left: auto; display: inline-flex; align-items: center; }
/* De toggle in de tabstrip-regel is compacter dan een losstaande segmented control. */
.vak-tabs-extra .modus-toggle { margin-bottom: -1px; align-self: center; }
.vak-tabs-extra .modus-toggle a { font-size: 0.8rem; padding: 0.2rem 0.6rem; }


/* R48: modus- en toetssoort-toggle als segmented control (pills in een lichte houder) —
   visueel een SCHAKELAAR, bewust anders dan de onderstreepte vak-tabs. */
.modus-toggle, .toetssoort-toggle {
  display: inline-flex; gap: 0.15rem; padding: 0.15rem;
  background: var(--section-alt); border: 1px solid var(--line); border-radius: var(--radius);
}
.modus-toggle a, .toetssoort-toggle a {
  text-decoration: none; color: var(--muted); font-size: 0.9rem; font-weight: 600;
  padding: 0.3rem 0.8rem; border-radius: calc(var(--radius) - 2px);
}
.modus-toggle a:hover, .toetssoort-toggle a:hover { color: var(--accent); }
.modus-toggle a.actief, .toetssoort-toggle a.actief {
  background: var(--accent); color: #fff;
}
/* Toets-ingang: toetssoort-toggle + doel-zoeker als één blok (zoals de leskiezer). Op één rij om
   hoogte te sparen op kleine schermen: toggle links, zoeker rechts uitgelijnd op de onderkant van
   het zoekveld. Te smal → de zoeker wrapt naar een eigen regel (dan volle breedte, max 26rem). */
.toets-ingang {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--section-alt);
  padding: 0.6rem 0.8rem; margin: 0 0 1rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.5rem 1rem;
}
.toets-ingang .zoek-kiezer { flex: 1 1 24rem; max-width: 36rem; margin: 0 0 0 auto; }
/* Label LINKS van het zoekveld (één regel i.p.v. twee). Te smal → het veld zakt onder het label. */
.toets-ingang .zoek-kiezer-label { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.toets-ingang .zoek-kiezer-label > span { white-space: nowrap; }
.toets-ingang .zoek-kiezer-veld { flex: 1 1 12rem; width: auto; min-width: 0; }

/* Leskiezer: blok-balk + les-strip in één omkaderd blok. */
.leskiezer {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--section-alt);
  padding: 0.6rem 0.8rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.leskiezer .lijst-balk { margin-top: 0; }

/* Les-strip: één horizontaal scrollende regel i.p.v. wrappende pillen. */
.les-strip {
  display: flex; align-items: center; gap: 0.4rem; overflow-x: auto; padding: 0.15rem 0 0.3rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
/* "Les"-label links, uitgelijnd met het "Blok"-label erboven (zelfde min-breedte). Scrollt
   niet mee (flex:none) en blijft links staan als de pillen horizontaal scrollen. */
.les-strip .les-strip-label {
  flex: 0 0 auto; min-width: 5rem; position: sticky; left: 0;
  background: var(--section-alt); z-index: 1;
}
.les-strip .les-strip-hint { flex: 0 0 auto; font-size: 0.85rem; font-style: italic; }
.les-strip .les-pil {
  flex: 0 0 auto; text-decoration: none; font-size: 0.85rem; padding: 0.25rem 0.7rem;
  border-radius: 999px; border: 1px solid var(--line); color: var(--text); background: var(--card);
  white-space: nowrap;
}
/* Neutrale clustertinten (géén betekeniskleur): 4 roterende grijs/blauwtinten die alleen
   "deze lessen horen bij één doel" aangeven, zonder te botsen met de statuskleuren. */
.les-strip .les-pil.cluster-0 { background: var(--card); }
.les-strip .les-pil.cluster-1 { background: var(--cluster-1); }
.les-strip .les-pil.cluster-2 { background: var(--cluster-2); }
.les-strip .les-pil.cluster-3 { background: var(--cluster-3); }
.les-strip .les-pil.eindles { border-color: var(--muted); font-weight: 600; }
.les-strip .les-pil.actief {
  background: var(--accent); color: var(--op-accent); border-color: var(--accent); font-weight: 600;
}

/* Uitleg achter een ?-knop (vervangt de vaste instructie-alinea). */
.uitleg { position: relative; display: inline-block; }
.uitleg-knop {
  width: 1.3rem; height: 1.3rem; padding: 0; border-radius: 999px; font-size: 0.8rem;
  line-height: 1; background: var(--card); border: 1px solid var(--accent); color: var(--accent);
  box-shadow: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.uitleg-knop:hover, .uitleg-knop[aria-expanded="true"] { background: var(--accent); color: var(--op-accent); }
.uitleg-paneel {
  position: absolute; top: 1.8rem; z-index: 10; width: min(28rem, 80vw);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0.6rem 0.8rem;
  font-size: 0.85rem; color: var(--muted); font-weight: 400; box-shadow: var(--schaduw-paneel);
}
/* Standaard opent het paneel links uitgelijnd op de knop (naar rechts). Maar de ?-knop staat
   in de praktijk altijd RECHTS op de tabstrip (.vak-tabs-hulp, margin-left:auto); daar zou een
   naar-rechts openend paneel het scherm uit lopen. Dus: rechts uitlijnen → opent naar links. */
.uitleg-paneel { left: 0; }
.vak-tabs-hulp .uitleg-paneel { left: auto; right: 0; }

/* "Doel bij deze les" als inklapbaar blok (standaard dicht). */
details.doel-toelichting { margin: 0 0 0.6rem; }
details.doel-toelichting > summary {
  cursor: pointer; font-size: 0.85rem; color: var(--muted); font-weight: 600;
  padding: 0.3rem 0; width: fit-content;
}
details.doel-toelichting > summary:hover { color: var(--accent); }
details.doel-toelichting ul { margin: 0.2rem 0 0; padding-left: 1.2rem; }

main { max-width: 66rem; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.5rem; }
h1, h2, h3 { color: var(--accent-dark); font-weight: 600; }
h2 { font-size: 1.2rem; margin-top: 1.6rem; }
/* Zichtbare paginakop op een losse pagina (bv. Instellingen) — de layout-<h1> is sr-only. */
h2.paginakop { font-size: 1.5rem; margin-top: 0; margin-bottom: 0.3rem; }

/* Formulieren */
form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; max-width: 40rem; }
.row { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.row > label { flex: 1; min-width: 12rem; }
/* Jaargroep-keuze (Instellingen → Groepen): vast 3-koloms raster, links uitgelijnd — anders
   rekt de generieke .row het laatste item (bv. "8") op en lijkt het gecentreerd. */
.jaargroep-keuze { display: grid; grid-template-columns: repeat(3, minmax(4rem, 1fr)); gap: 0.4rem 0.9rem; }
.jaargroep-keuze > label { justify-self: start; }
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
/* Het hidden-attribuut moet winnen van de expliciete display-regels hierboven: een label
   met hidden kreeg anders alsnog display:flex (dat overschrijft de UA-default display:none
   van hidden). Globaal afgedwongen zodat elk hidden element betrouwbaar verborgen blijft. */
[hidden] { display: none !important; }
input, select, textarea {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
textarea { resize: vertical; }
button, .knop {
  font: inherit;
  padding: 0.55rem 1.25rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--op-accent);
  cursor: pointer;
  align-self: flex-start;
  text-decoration: none;
  display: inline-block;
  transition: background 0.12s ease;
  box-shadow: var(--knop-schaduw);
}
button:hover, .knop:hover { background: var(--accent-dark); }
button.btn-new::before { content: "+"; margin-right: 0.4rem; font-weight: 600; }
button.btn-secondary, .knop.btn-secondary {
  background: var(--card); border: 1px solid var(--accent); color: var(--accent); box-shadow: none;
}
button.btn-secondary:hover, .knop.btn-secondary:hover { background: var(--accent-zacht); }
button.linkish, .linkish {
  background: none; color: var(--accent); padding: 0.28rem 0.5rem; border-radius: 6px;
  font-size: 0.85rem; box-shadow: none; border: none; cursor: pointer;
}
button.linkish:hover, .linkish:hover { background: var(--section-alt); }
button:disabled, button:disabled:hover { background: var(--muted); opacity: 0.5; cursor: not-allowed; }

/* Lijst-balk: 'Nieuw' links, zoek rechts */
.lijst-balk { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.lijst-balk .zoek { margin-left: auto; min-width: 16rem; max-width: 24rem; border-radius: 999px; }

/* Kaart-tabellen */
table.list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1rem;
  font-size: 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* clip i.p.v. hidden: knipt de afgeronde hoeken net zo, maar maakt de tabel GEEN eigen
     scroll-container — anders "plakt" de sticky kolomkop (thead th) aan de tabel zelf en
     scrolt hij mee weg. Met clip plakt hij aan het scrollende schermdeel. */
  overflow: clip;
  box-shadow: var(--schaduw-licht);
}
table.list th, table.list td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.list th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--section-alt);
}
table.list tbody tr:last-child td { border-bottom: none; }
table.list tbody tr:hover td { background: var(--rij-hover); }
td.nowrap, th.nowrap { white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.acties, th.acties { text-align: right; white-space: nowrap; width: 1%; }

/* Sorteerbare kolomkoppen (/sorteer.js): klikbaar, met ▲/▼-indicator. */
th.sorteerbaar-kop { cursor: pointer; user-select: none; white-space: nowrap; }
th.sorteerbaar-kop:hover { color: var(--text); }
th.sorteerbaar-kop .sort-pijl { font-size: 0.7rem; color: var(--accent); }

/* Badges (status) — altijd met icoon/tekst, kleur is ondersteunend */
.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-zorg { background: var(--zorg-bg); color: var(--zorg); }
.badge-aandacht { background: var(--aandacht-bg); color: var(--aandacht); }
.badge-geel { background: var(--geel-bg); color: var(--geel); }
.badge-goed { background: var(--goed-bg); color: var(--goed); }
.badge-muted { background: var(--section-alt); color: var(--muted); }

/* OTP-vakjes */
.otp-fieldset { border: none; padding: 0; margin: 0; }
.otp-fieldset legend { font-size: 0.85rem; color: var(--muted); font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.otp-boxes { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
.otp-box {
  width: 3rem; height: 3.5rem; text-align: center; font-size: 1.5rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--text); padding: 0;
}
.otp-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring-sterk); }

/* Lege staat */
.leeg { color: var(--muted); background: var(--section-alt); border-radius: var(--radius); padding: 1.5rem; text-align: center; }

/* Evaluatie-tabel: compacte, klikbare status-cellen (checkbox-gedrag per rij). */
table.eval-tabel td, table.eval-tabel th { padding: 0.35rem 0.6rem; }
td.eval-cel { width: 7.5rem; }
td.eval-cel:hover { background: var(--cel-hover); }
td.eval-cel[aria-checked="true"] { background: var(--goed-bg); }
td.eval-cel[aria-checked="true"] .eval-vink { color: var(--goed); font-weight: 700; }
td.eval-cel:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }

/* Aandacht-lijsten: compacte rijen. De opgelost-actie staat in drie losse kolommen
   (Opgelost bij / Opmerking / Opgelost); smalle kolommen wrappen niet. */
table[data-aandacht-lijst] td, table[data-aandacht-lijst] th { padding: 0.35rem 0.6rem; white-space: nowrap; }
table[data-aandacht-lijst] .opgelost-keuze { padding: 0.3rem 0.5rem; max-width: 10rem; }
table[data-aandacht-lijst] .opgelost-opmerking { width: 9rem; min-width: 0; padding: 0.3rem 0.5rem; }
table[data-aandacht-lijst] .opgelost-check { width: 1.1rem; height: 1.1rem; }

caption, .sr-caption { text-align: left; font-weight: 600; margin-bottom: .4rem; }
code { background: var(--section-alt); padding: .1rem .3rem; border-radius: 3px; }

/* Groepsplan: onderdeel-tabs als onderstreepte tabstrip (.gp-tab draagt nu .vtab in een
   .vak-tabs-nav, dus de tabstrip-stijl geldt al). De tabstrip mag horizontaal scrollen bij
   smalle schermen i.p.v. wrappen. */
.vak-tabs.gp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.vak-tabs.gp-tabs .vtab { white-space: nowrap; flex: 0 0 auto; }
.gp-paneel { margin-top: .5rem; }
/* De eerste kop/inhoud van een groepsplan-paneel strak bovenaan: de globale h2-margin
   (1.6rem) duwde de paneeltitel anders ver onder de tabstrip (grote witruimte). */
.gp-paneel > :first-child { margin-top: 0; }
/* Context-regel bovenaan het groepsplan: kruimel-kiezers Groep › Vak › Periode (R58).
   Geen uitspringen meer: de linkerrand van de eerste kiezer lijnt uit met de eerste tab
   (die heeft geen linker-padding) en met de paneelinhoud. */
.gp-context { margin: 0 0 .5rem; }
.gp-kruimels { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: 1rem; }
.kruimel { position: relative; }
.kruimel > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border: 1px solid var(--accent); border-radius: var(--radius-s);
  background: var(--card); color: var(--accent-dark); font-weight: 700;
}
.kruimel > summary::-webkit-details-marker { display: none; }
.kruimel > summary:hover { background: var(--accent-zacht); }
.kruimel > summary:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-ring); }
.kruimel-pijl { font-size: .75rem; transition: transform .15s ease; }
.kruimel[open] > summary .kruimel-pijl { transform: rotate(180deg); }
/* Het menu valt over de (scrollende) body heen. */
.kruimel-menu {
  position: absolute; top: calc(100% + .25rem); left: 0; z-index: 40;
  min-width: 12rem; max-height: 22rem; overflow-y: auto;
  margin: 0; padding: .3rem; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: var(--schaduw-paneel);
}
.kruimel-menu a {
  display: block; padding: .4rem .6rem; border-radius: 6px; white-space: nowrap;
  color: var(--text); text-decoration: none; font-weight: 500;
}
.kruimel-menu a:hover, .kruimel-menu a:focus-visible { background: var(--accent-zacht); color: var(--accent-dark); }
.kruimel-menu a[aria-current="page"] { background: var(--cel-hover); color: var(--accent-dark); font-weight: 700; }
.kruimel-menu .kruimel-los { border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .3rem; }
.kruimel-menu .kruimel-kop {
  padding: .45rem .6rem .1rem; font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted);
}
.kruimel-vast { padding: .3rem 0; font-weight: 700; color: var(--accent-dark); }
.kruimel-sep { color: var(--muted); }
.kruimel-jaar { color: var(--muted); margin-left: .3rem; }
/* Extra actie rechts in de context-regel (Gedrag: "Plan leegmaken"). */
form.kruimel-actie { margin: 0 0 0 auto; max-width: none; }
/* Groepsplan-tabs: iets groter (zelfde orde als de paneelkop) en de eerste tab zonder
   linker-padding, zodat het label uitlijnt met de context-regel en de paneelinhoud. */
.vak-tabs.gp-tabs .vtab { font-size: 1.05rem; }
.vak-tabs.gp-tabs .vtab:first-child { padding-left: 0; }
/* Paneelkop in het groepsplan: niet groter dan de tabs, alleen kleur/gewicht onderscheidt. */
.gp-paneel > h2 { font-size: 1.1rem; }
/* Lucht tussen de invoervelden van een groepsplan-formulier (een lege regel ertussen).
   Niet voor de per-doel-formulieren van Toetsevaluatie, die bewust compact zijn. */
.gp-paneel form.gp-sectie:not(.tussen-doel) { gap: 1.5rem; }

/* Verticale sub-tabs als map-tabblad (Aanpak, variant A): de inhoud staat in een witte
   kaart; de actieve tab heeft dezelfde witte achtergrond, een accentstreep links, en loopt
   zonder rand de kaart in (overlapt de linkerrand met 1px). Inactieve tabs zijn grijs en
   raken de kaart niet. Alleen via de modifier .gp-subtabs--kaart. */
/* Dubbele class: moet winnen van de latere basisregel .gp-subtabs { gap: 1rem }, anders
   blijft er ruimte tussen tab en kaart en sluiten ze niet aan. */
.gp-subtabs.gp-subtabs--kaart { gap: 0; }
.gp-subtabs--kaart .gp-subtab-lijst { position: relative; z-index: 1; }
.gp-subtabs--kaart .gp-subtab {
  background: var(--section-alt); color: var(--muted);
  border-color: var(--line); border-radius: var(--radius-s) 0 0 var(--radius-s);
  margin-right: .5rem;
}
.gp-subtabs--kaart .gp-subtab:hover { color: var(--accent-dark); }
.gp-subtabs--kaart .gp-subtab[aria-selected="true"] {
  background: var(--card); color: var(--accent-dark); font-weight: 700;
  border-color: var(--line); border-right-color: var(--card);
  box-shadow: inset 4px 0 0 var(--accent);
  margin-right: -1px;
}
.gp-subtabs--kaart .gp-subtab-panelen {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0 var(--radius-s) var(--radius-s) var(--radius-s);
  padding: calc(.5rem) 1.25rem 1.25rem;
}
/* In de kaart regelt de kaart-padding de uitlijning met het tab-label. */
.gp-subtabs--kaart .gp-subtab-paneel > p:first-child { padding-top: 0; }
/* Groep + periode binnen de leskiezer op het keuzescherm. */
.keuze-periode { display: flex; flex-direction: column; gap: .4rem; }
.keuze-periode .keuze-jaargroep { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
/* Checkbox-rij: vinkje VÓÓR de tekst, horizontaal uitgelijnd (overschrijft de
   kolom-stapeling van de globale label-regel). */
label.check {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  color: var(--text);
}
label.check input { flex: none; }
ul.doel-lijst { display: flex; flex-direction: column; gap: .4rem; }

/* Analyse: verticale sub-tabs (onderwerpen links, veld rechts) */
.gp-subtabs { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
/* Ruimte tussen de indeeltabel (<details>) en de niveau-tabs eronder: zonder marge raakt
   de eerste tab de onderrand van de tabel. Bij Aanpak staat er een introtekst tussen. */
details.hulpvragen + .gp-subtabs { margin-top: 1rem; }
.gp-aanpak-intro { margin: 1.25rem 0 .75rem; }
.gp-subtab-lijst { display: flex; flex-direction: column; gap: .25rem; min-width: 12rem; }
.gp-subtab {
  text-align: left;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .5rem .75rem;
  box-shadow: none;
  align-self: stretch;
}
.gp-subtab[aria-selected="true"] { background: var(--accent); color: var(--op-accent); border-color: var(--accent); }
.gp-subtab-panelen { flex: 1; min-width: 16rem; }
/* Lijn de bovenkant van het rechterpaneel uit met de eerste tab links: het formulier
   binnen een subtab-paneel krijgt geen top-marge (de globale form-margin-top van 1rem
   duwde het veld anders ~1rem lager dan de tab-rij). Geldt voor het groepsplan (.gp-subtab-
   paneel) én de Instellingen-panelen (.vtab-paneel). */
.gp-subtab-paneel, .vtab-paneel { margin-top: 0; }
.gp-subtab-paneel > form, .vtab-paneel > form { margin-top: 0; }
/* Eerste regel van een subtab-paneel (bv. "Leerlingen:" bij Aanpak) lijnt uit met de
   eerste tab links. */
/* padding-top = de padding (.5rem) + rand (1px) van .gp-subtab, zodat de tekst op dezelfde
   hoogte staat als het tab-label. */
.gp-subtab-paneel > p:first-child { margin-top: 0; padding-top: calc(.5rem + 1px); }
/* De <section> in een Instellingen-paneel en haar eerste kind strak bovenaan (geen h2 meer
   die het tab-label herhaalde → de eerste inhoud lijnt uit met de eerste tab). */
.vtab-paneel > section { margin-top: 0; }
.vtab-paneel > section > :first-child { margin-top: 0; }

/* Tussenevaluatie per doel: benut de volle paneelbreedte (het evaluatieveld mag breed,
   lange teksten lezen prettiger dan de algemene 40rem-formulierbreedte). De doel-kop houdt
   titel + "x/y gegeven" + status-badge op één regel; de badge blijft heel bij krapte. */
form.tussen-doel { max-width: none; gap: .4rem; margin-top: 0; }
form.tussen-doel .tussen-doel-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
}
form.tussen-doel .tussen-doel-kop .badge { flex: none; align-self: center; }
form.tussen-doel textarea { width: 100%; }

/* Zoek-kiezer als combobox (R43, design §17.2a): zoekveld met de treffers als dropdown
   eronder (leeg tot je typt). Gedeeld door de lesdoel-zoeker (Evaluatie/Aandacht) én de
   leerling-kiezer (PDCA/Aandacht). */
.zoek-kiezer { position: relative; margin: 0 0 1rem; max-width: 32rem; }
.zoek-kiezer-label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; }
.zoek-kiezer-veld {
  width: 100%; padding: 0.45rem 0.8rem; border: 1px solid var(--line);
  border-radius: 999px; font: inherit;
}
/* Dropdown: zweeft onder het veld, boven de rest van het scherm. */
.zoek-kiezer-dropdown {
  position: absolute; z-index: 20; left: 0; right: 0; margin-top: 0.25rem;
  max-height: 18rem; overflow-y: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); scrollbar-width: thin;
  box-shadow: var(--schaduw-dropdown);
}
.zoek-kiezer-dropdown[hidden] { display: none; }
.zoek-kiezer-lijst { list-style: none; margin: 0; padding: 0; }
.zoek-kiezer-lijst .zoek-regel { border-bottom: 1px solid var(--line); }
.zoek-kiezer-lijst .zoek-regel:last-child { border-bottom: none; }
.zoek-kiezer-lijst .zoek-regel[hidden] { display: none; }
.zoek-regel-link {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.8rem;
  text-decoration: none; color: var(--text);
}
.zoek-regel-link:hover, .zoek-regel-link:focus { background: var(--section-alt); }
.zoek-regel-hoofd { font-weight: 500; }
.zoek-regel-meta { color: var(--muted); font-size: 0.8rem; }
.zoek-kiezer-geen { margin: 0; padding: 0.5rem 0.8rem; color: var(--muted); font-size: 0.85rem; }
.zoek-kiezer-geen[hidden] { display: none; }
.zoek-kiezer-leeg { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0; }

/* Modal (native <dialog>, zie modal.js): knop opent 'm; dicht via sluitknop/Escape/backdrop.
   Zonder JS staat de dialoog 'open' en toont 'm inline (geen overlay) — gewoon bruikbaar. */
dialog.modal {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0;
  max-width: 42rem; width: calc(100% - 2rem); box-shadow: var(--schaduw-dropdown);
  color: var(--text); background: var(--card);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.35); }
dialog.modal .modal-body { padding: 1.25rem 1.5rem 1.5rem; }
dialog.modal .modal-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
dialog.modal .modal-sluit {
  background: none; border: none; box-shadow: none; cursor: pointer; align-self: center;
  color: var(--muted); font-size: 1.4rem; line-height: 1; padding: 0.1rem 0.4rem; border-radius: var(--radius-s);
}
dialog.modal .modal-sluit:hover { background: var(--section-alt); color: var(--text); }
dialog.modal .modal-acties { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.5rem; }
/* Zonder JS blijft <dialog open> inline staan; geef 'm dan wat lucht van de lijst erboven. */
dialog.modal[open] { margin: 1.5rem auto; }

/* Gedeeld OTP-login-blok — leerlingmonitor-huisstijl (teal) via de theme-custom-properties
   (otp-auth-standaard Req 5.6/5.7). GEEN fork van het blok: we overschrijven alleen de
   kleuren op de container; structuur/maten/gedrag blijven gedeeld. De default van het blok
   is tS-X-blauw; hier zetten we onze accentkleuren zodat de login bij de app past. */
#otp-login-container .tsx-otp-login {
  --otp-accent: var(--accent);
  --otp-accent-text: var(--op-accent);
  --otp-focus-ring: var(--accent-ring);
  --otp-text: var(--text);
  --otp-bg: var(--card);
  --otp-muted: var(--muted);
  --otp-border: var(--line);
}
#otp-login-container .tsx-otp-login .otp-btn:hover:not(:disabled) { background: var(--accent-dark); }