/* ============================================================
   Forms - gedeelde stijl (Opvoeddesk & Onderwijsdesk)
   Huisstijl: crème / terracotta / salie. Ronde, zachte vormen,
   veel witruimte, weinig accenten per scherm.
   ============================================================ */

:root {
  --creme:        #FDFAF6;  /* hoofdachtergrond */
  --creme-diep:   #FFF3E6;  /* warme vlakken: header, hero, footer */
  --wit:          #FFFFFF;
  --bruin:        #2D1F0E;  /* tekst en koppen */
  --bruin-70:     rgba(45,31,14,0.70);
  --bruin-30:     rgba(45,31,14,0.30);
  --grijs:        #8A7B6A;  /* subtekst, hints */
  --border:       #EAD9C6;
  --veld-bg:      #FBF6EE;

  --terra:        #C4703A;  /* hoofdaccent */
  --terra-donker: #8B4A1E;  /* hover */
  --terra-rgb:    196,112,58; /* accent als rgb, voor transparante tinten/schaduwen */
  --perzik:       #FFD6A9;
  --perzik-mid:   #F5B87A;

  /*  De kleur die zegt: hier wordt iets van je gevraagd. Alleen voor het
      telbolletje en voor een enkel signaalvlak, nooit voor een hele knop.
      Opvoeddesk kent geen los oranje, dus dat is hier de terracotta. */
  --let:          #C4703A;

  --salie:        #A8C5A0;
  --salie-licht:  #D6EAD3;
  --salie-donker: #5E8A56;  /* succes / verzenden */

  --rood:         #C0392B;
  --rood-bg:      #FFF3F0;
  --rood-border:  #F5B8A8;

  --radius:       12px;
  --radius-groot: 16px;
  /* Strakker: plattere, neutrale schaduwen; nadruk op dunne lijntjes. */
  --schaduw:      0 1px 2px rgba(45,31,14,0.05);
  --schaduw-diep: 0 6px 22px rgba(45,31,14,0.10);

  /*  De pil onderin: hoe glasachtig hij is, op één plek per bestand.
      Houd deze drie gelijk aan die in `verkoop-app.html`.

      LET OP BIJ HET BEOORDELEN. De previewbrowser hier tekent `backdrop-filter`
      NIET betrouwbaar. Op 1 augustus gaf hij op een kale testpagina van 400x300
      een echte blur (scherpte van 5207 naar 172), en op de app zelf en op een
      kale pagina van 390x844 alleen een lichte waas, ook bij blur(40px). Een
      schermafdruk uit de preview zegt dus NIETS over hoe glasachtig dit is.
      Beoordeel dit op een toestel, via een deploy-preview. Twee keer heb ik hier
      een conclusie op een schermafdruk gebaseerd en twee keer was hij fout.

      De helderheid is geen opsmuk: zonder die opgetrokken waarde leest donkere,
      vette tekst gewoon door de balk heen. */
  --pil-dek:   0.65;   /* dekking van het vlak */
  --pil-blur:  52px;   /* hoe zacht wat eronder ligt */
  --pil-licht: 1.12;   /* donkere tekst eronder oplichten, anders leest hij door */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--creme);
  color: var(--bruin);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .kop {
  font-family: 'Nexa', 'DM Sans', sans-serif;
  color: var(--bruin);
  line-height: 1.25;
}

a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--terra-donker); text-decoration: underline; }

/* Een bestandsnaam of een tabelnaam in lopende tekst. Stond tot 3 augustus
   nergens in dit bestand, terwijl de verantwoordingspagina er al <code> voor
   gebruikte: die kwam er dus uit als gewone tekst in de browserstandaard.
   Zacht vlak, geen kader: het moet opvallen als "dit is letterlijk zo", niet
   als een knop. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--creme-diep);
  color: var(--bruin-70);
  border-radius: 5px;
  padding: 1px 5px;
  word-break: break-word;
}

/* ---------- Topbalk ---------- */
.topbar {
  background: var(--creme-diep);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar .merk {
  font-family: 'Nexa', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--bruin);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.topbar .merk .stip {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--terra);
  display: inline-block;
}
.topbar nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: 8px;
}
.topbar nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bruin-70);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.topbar nav a:hover { background: rgba(var(--terra-rgb),0.09); color: var(--terra); text-decoration: none; }
.topbar nav a.actief { background: var(--terra); color: var(--wit); }
.topbar .rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar .wie { font-size: 12.5px; color: var(--grijs); text-align: right; line-height: 1.35; }
.topbar .wie strong { color: var(--bruin); display: block; font-weight: 600; }
.topbar .wie .badge { margin-top: 3px; }

/* Organisatie-wisselknop (voor wie toegang heeft tot beide) */
.org-switch { display: inline-flex; background: var(--veld-bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; flex-shrink: 0; }
.org-switch button {
  border: none; background: transparent; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--bruin-70); padding: 6px 12px; border-radius: 8px; transition: all 0.15s;
}
.org-switch button.actief { background: var(--terra); color: var(--wit); box-shadow: 0 2px 6px rgba(var(--terra-rgb),0.22); }
.org-switch button:not(.actief):hover { color: var(--terra); }

/* ---------- Zijpaneel (navigatie) ---------- */
/*  ⭐⭐⭐ 236 EN 64 STAAN HIER, EN NERGENS ANDERS (1 september 2026).
    De zijbalk is breed of smal, en drie andere dingen hangen aan die maat: de
    inspring van de pagina, de linkerkant van de topbalk en het instellingenvak.
    Stond het getal op vier plekken, dan is een vergeten plek een gat van 172 px
    of iets dat over de zijbalk heen ligt. Nu leest iedereen `--zb-b`, en de
    smalle stand zet alleen die ene variabele om.

    Dit kwam boven bij een cursuscockpit-paneel dat er als VIJFDE bij zou komen.
    Dat paneel is dezelfde dag weer teruggedraaid, maar de opruiming blijft: de
    val zat er al voordat het paneel bestond. `test-zijbalk.js` bewaakt hem. */
body { --zb-b: 236px; }

.zijbalk {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--zb-b);
  background: var(--creme-diep); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px 14px; z-index: 50; overflow-y: auto;
}
/* Alles links op dezelfde inspring (12px) zodat logo, wisselknop en menu uitlijnen */
.zb-merk { margin: 0 0 4px; padding: 0 12px; }
.zb-merk img { height: 30px; width: auto; display: block; }
.zb-boven .org-switch { margin: 12px 0 8px; width: 100%; }
.zb-boven .org-switch button { flex: 1; font-size: 11px; padding: 5px 8px; }
.zb-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.zb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--bruin-70); text-decoration: none; cursor: pointer;
  border: none; background: transparent; width: 100%; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.zb-item:hover { background: rgba(var(--terra-rgb),0.10); color: var(--terra); text-decoration: none; }
.zb-item.actief { background: var(--terra); color: var(--wit); box-shadow: 0 3px 10px rgba(var(--terra-rgb),0.22); }
/*  ⭐ 18 EN NIET 16, en ook niet 20 (1 september 2026). Ze stonden op 16, de
    maat van toen ze alleen bij het wieltje stonden; naast tekst van 14 px is 18
    de goede verhouding. Twintig is geprobeerd en weer teruggezet. In de SMALLE
    stand mogen ze wél groter: zie het blok onderaan. */
.zb-item svg { width: 18px; height: 18px; flex-shrink: 0; }
/*  ⭐⭐ HET LABEL HEEFT EEN EIGEN SPAN, want dat is wat de smalle stand straks
    verbergt. `min-width:0` erbij zodat een lange naam als "Mailinggenerator"
    afkapt in plaats van de zijbalk op te rekken. */
.zb-lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*  ⭐ EEN ITEM ZONDER ICOON VALT TERUG OP ZIJN EERSTE LETTER. Beter een letter
    dan een gat waar de rij uit de pas gaat lopen, en het valt genoeg op om
    gerepareerd te worden. Zelfde maat als een icoon, zodat de tekst uitlijnt. */
.zb-letter {
  width: 18px; flex-shrink: 0; text-align: center;
  font-weight: 700; font-size: 13px; opacity: .8;
}
/*  Zelfde bolletje als `.telbol.let` verderop: een getal in het menu betekent
    dat er iets openstaat, en dat is de aandachtkleur. Was vol accent, en dat
    leest als "gekozen" in plaats van als "er ligt iets". */
.zb-item .zb-teller {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--let); color: var(--wit);
  font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.zb-item.actief .zb-teller { background: var(--wit); color: var(--let); }
/*  Een teller die je kunt AANKLIKKEN. Nu alleen die bij Verkoop: daar opent hij
    de lijst met wat er is binnengekomen, met de knop om hem op gezien te zetten.
    Martijn, 4 augustus: "waar kan ik deze resetten zodra gezien". Dat kon alleen
    via het venster dat één keer per sessie opengaat; wie het wegklikte kwam er
    niet meer bij en hield het getal tot de volgende sessie.

    De maat: het bolletje blijft klein (het is een merkje), maar er ligt een
    trefvlak van 36px omheen, want dit moet met een duim te raken zijn. Dat
    pseudo-element hangt aan de PADDING-box en steekt niet buiten de zijbalk uit,
    dus het kan de pagina niet zijwaarts laten schuiven. */
.zb-item .zb-teller.klikbaar { position: relative; min-width: 24px; height: 24px; cursor: pointer; }
.zb-item .zb-teller.klikbaar::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 999px;
}
.zb-item .zb-teller.klikbaar:hover { filter: brightness(1.1); }
.zb-item .zb-teller.klikbaar:focus-visible { outline: 2px solid var(--wit); outline-offset: 1px; }
.zb-binnenkort { color: var(--bruin-30); cursor: default; }
.zb-binnenkort:hover { background: transparent; color: var(--bruin-30); }
.zb-soon { margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: var(--perzik); color: var(--terra-donker); padding: 2px 7px; border-radius: 20px; }
.zb-voet { display: flex; flex-direction: column; gap: 6px; }
/* ---------- Instellingen: een breed vak, geen lange lijst ----------
   Zeven regels onder elkaar in een zijbalk van 236px is een lijst die je moet
   lezen om hem te begrijpen, en er komen alleen maar onderdelen bij. Het
   wieltje klapt daarom naast de zijbalk een vak open, met de onderdelen als
   tegels in twee kolommen en per tegel één regel die zegt waar het over gaat.
   Zo hoef je de naam niet te kennen om te weten waar je moet zijn. */
.zb-groep { position: relative; }
.zb-submenu {
  position: fixed; left: 244px; bottom: 18px;
  width: 560px; max-width: calc(100vw - 264px);
  background: var(--wit); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20, 1, 82, .16);
  padding: 16px; z-index: 165;
}
.in-kop {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grijs); margin: 2px 4px 12px;
}
.in-rooster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.in-tegel {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 13px; border-radius: 12px; text-decoration: none;
  color: var(--bruin); transition: background .13s;
}
.in-tegel:hover { background: var(--creme-diep, #F1ECFA); text-decoration: none; }
.in-tegel.actief { background: var(--creme-diep, #F1ECFA); }
/*  De iconen erven GEEN currentColor: de Onderwijsdesk-regel kleurt elke <a>
    fuchsia, en zeven fuchsia iconen naast elkaar is precies het drukke beeld
    dat we nergens willen. Eén rustige kleur; het accent bewaren we voor waar
    het iets betekent. */
.in-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--creme-diep, #F1ECFA); color: var(--bruin-70);
  display: flex; align-items: center; justify-content: center;
}
.in-tegel:hover .in-ic, .in-tegel.actief .in-ic { background: var(--wit); }
.in-ic svg { width: 18px; height: 18px; display: block; }
.in-tekst { min-width: 0; }
/* Expliciet, want de Onderwijsdesk-regel kleurt elke <a> fuchsia. Een menu-item
   is geen accent: labels blijven de tekstkleur, net als in de zijbalk. */
.in-lab { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--bruin); }
.in-uit { display: block; font-size: 11.5px; color: var(--grijs); line-height: 1.4; margin-top: 2px; }

/* Op een telefoon schuift de zijbalk zelf open; een vak ernaast past dan niet.
   Daar komt het als vel van onderen op, over de volle breedte, in één kolom.
   Dezelfde beweging als de andere vellen in de app (#meerOverlay). */
@media (max-width: 900px) {
  .zb-submenu {
    left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none;
    z-index: 70; animation: meer-omhoog .22s ease;
  }
  .in-rooster { grid-template-columns: 1fr; gap: 4px; }
  .in-tegel { padding: 11px 11px; }
}
@keyframes meer-omhoog { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

.heeft-zijbalk { padding-left: var(--zb-b); }

/* ---------- Vaste balk bovenin (account rechtsboven) ---------- */
.topbalk {
  position: fixed; top: 0; left: var(--zb-b); right: 0; height: 56px;
  background: var(--creme); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 22px; z-index: 45;
}
.tb-rechts { display: flex; align-items: center; gap: 12px; }
/*  Waren wit met een dun grijs randje: dat leest als een uitgezette knop.
    Nu een zachte vulling in de merkkleur, crème bij Opvoeddesk en lavendel
    bij Onderwijsdesk, met het randje weg. Zelfde vulling als de aandachtpil
    en als de i-knop, zodat alles wat "hier kun je op drukken" zegt er
    hetzelfde uitziet. */
.tb-info {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--terra); background: var(--creme-diep); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tb-info svg { width: 20px; height: 20px; display: block; }
.tb-info:hover { background: var(--creme-diep); color: var(--terra); border-color: rgba(var(--terra-rgb),0.28); }
.tb-info.actief { background: var(--terra); color: var(--wit); border-color: var(--terra); }
/* ---- Teststand of live, rechtsboven op elke pagina ----
   Live is de rustige stand: alleen een klein groen rondje, geen woord erbij.
   Teststand is de stand die op moet vallen, want dan komt er geen enkele mail
   aan bij een deelnemer: oranje pil met het woord erin. */
.tb-stand {
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--bruin-70); transition: background .15s, color .15s, border-color .15s;
}
.tb-stand .tb-lamp { width: 9px; height: 9px; border-radius: 50%; background: #C7CBD4; flex: 0 0 auto; }
.tb-stand .tb-standtekst:empty { display: none; }
.tb-stand.live .tb-lamp { background: #2E9E6B; box-shadow: 0 0 0 3px rgba(46,158,107,.16); }
.tb-stand.live:hover { border-color: #2E9E6B; }
.tb-stand.test {
  background: #FF641A; border-color: #FF641A; color: #fff; padding: 0 13px 0 10px;
}
.tb-stand.test .tb-lamp { background: #fff; }
.tb-stand.test:hover { background: #D94E0C; border-color: #D94E0C; }
/*  ⭐ DE STILLE STAND (25 augustus 2026): de strengste stand krijgt de rustigste
    kleur. Teststand schreeuwt oranje omdat je hem moet OPMERKEN; stil is een
    stand waar je bewust in gaat zitten en die je niet vergeet, want er komt
    niets meer aan. */
.tb-stand.stil {
  background: #140152; border-color: #140152; color: #fff;
}
.tb-stand.stil .tb-lamp { background: #fff; }
.tb-stand.stil:hover { background: #2E1A6B; border-color: #2E1A6B; }
.tb-stand.laden { opacity: .4; }
/* Op een telefoon is de balk krap: de pil blijft, het woord gaat eraf. Het
   oranje rondje zegt genoeg, en aantikken vertelt de rest. */
@media (max-width: 560px) {
  .tb-stand { padding: 0 9px; }
  .tb-stand.test, .tb-stand.stil { padding: 0 9px; }
  .tb-stand .tb-standtekst { display: none; }
}

.tb-profiel { position: relative; }
.tb-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--terra); color: var(--wit); border: none; cursor: pointer;
  font-family: 'Nexa','DM Sans',sans-serif; font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; transition: background 0.15s;
}
.tb-avatar:hover { background: var(--terra-donker); }
.tb-avatar.heeft-foto { background-color: var(--creme-diep); }

/* Kleine, herbruikbare avatar (initialen of foto), o.a. bij de behandelaar in dossiers */
.mini-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--creme-diep); color: var(--terra-donker);
  font-family: 'Nexa','DM Sans',sans-serif; font-weight: 700; font-size: 10.5px;
  background-size: cover; background-position: center; overflow: hidden;
  border: 1px solid var(--border); vertical-align: middle;
}
.mini-avatar.heeft-foto { color: transparent; border-color: rgba(0,0,0,0.06); }
.mini-avatar-groot { width: 64px; height: 64px; font-size: 22px; }
.c-beh { display: inline-flex; align-items: center; gap: 8px; }
.tb-profiel-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--wit); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--schaduw-diep); padding: 8px; min-width: 220px; z-index: 60;
}
.pm-kop { padding: 6px 10px 10px; border-bottom: 1px solid var(--creme-diep); margin-bottom: 6px; }
.pm-kop strong { display: block; font-size: 14px; color: var(--bruin); }
.pm-kop span { font-size: 12px; color: var(--grijs); word-break: break-all; }
.pm-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--bruin-70);
}
.pm-item:hover { background: var(--creme-diep); color: var(--terra); }
.pm-rol { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--terra-donker); background: var(--creme-diep); border: 1px solid var(--border); padding: 2px 9px; border-radius: 20px; }
.pm-uitloggen { border-top: 1px solid var(--creme-diep); margin-top: 4px; padding-top: 11px; color: var(--rood); }
.pm-uitloggen:hover { background: var(--rood-bg); color: var(--rood); }

.heeft-topbalk { padding-top: 56px; }

/* Mobiele knoppen in de balk (verborgen op desktop) */
.tb-menu, .tb-logo { display: none; }
.tb-menu { border: none; background: transparent; cursor: pointer; color: var(--bruin); padding: 6px; border-radius: 8px; }
.tb-menu svg { width: 24px; height: 24px; display: block; }
.tb-menu:hover { background: rgba(var(--terra-rgb),0.10); color: var(--terra); }
.tb-logo { height: 26px; width: auto; }
.zb-scrim { display: none; }

/* ============================================================
   ⭐⭐⭐ DE ZIJBALK ALS STRIP  (1 september 2026)
   ============================================================
   Waarom hij er is staat bij `toggleZijbalk()` in `admin.js`. Kort: de zijbalk
   is 236 px, en die gaan volledig van de marge af waarin de cockpitpanelen
   moeten staan. Op een venster van 1440 blijft er met de volle balk 82 px marge
   per kant over, met de strip 168.

   ⭐⭐⭐ DIT BLOK STAAT BEWUST HIER: ná `.zijbalk`, `.heeft-zijbalk`, `.topbalk`
   en `.zb-submenu`, want het overschrijft ze alle vier. Een override die bóven
   zijn origineel staat werkt wel (de specificiteit wint) maar leest verkeerd,
   en dan repareert de volgende het verkeerde.

   ⭐⭐⭐ EN DE VAL: VIER MATEN HANGEN VAN DIE 236 AF, elk op een andere plek.

     .zijbalk        width         de balk zelf
     .heeft-zijbalk  padding-left  de ruimte die de pagina links vrijhoudt
     .topbalk        left          de balk bovenin begint waar de zijbalk stopt
     .zb-submenu     left          het instellingenvak opent ernaast

   Vergeet er één in de smalle stand en er valt een gat van 172 px, of er ligt
   iets overheen. `test-zijbalk.js` telt ze na en speelt het na.

   ⭐⭐ DE SMALLE STAND GELDT ALLEEN BOVEN 860 PX. Daaronder is de zijbalk een
   uitschuifpaneel, en een strip binnen een drawer is een half ding. Alleen de
   draairichting van het pijltje staat buiten de media query: dat is geen maat
   maar een richting, en die klopt in beide standen.
   ============================================================ */
.zb-merk { display: flex; align-items: center; gap: 8px; }
.zb-klap {
  margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--wit); color: var(--bruin-70);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.zb-klap:hover { border-color: var(--terra); color: var(--terra); }
.zb-klap:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
/*  Een chevron uit twee randen: geen svg nodig, en hij draait met de stand mee. */
.zb-klap .chev {
  width: 6px; height: 6px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); margin-left: 2px;
}
body.zb-smal .zb-klap .chev { transform: rotate(-135deg); margin: 0 2px 0 0; }

@media (min-width: 861px) {
  body.zb-smal { --zb-b: 64px; }
  body.zb-smal .zijbalk { padding: 20px 8px; }
  /*  Het instellingenvak hangt aan de body en weet niets van de zijbalk; zonder
      deze regel opent het over de strip heen of met een gat ernaast. */
  body.zb-smal .zb-submenu { left: calc(var(--zb-b) + 8px); max-width: calc(100vw - var(--zb-b) - 28px); }

  /*  Wat er wegvalt: het label, het logo, de organisatiewisselaar en het merkje
      "binnenkort". Wat blijft: het icoon, en de teller als bolletje erop. */
  body.zb-smal .zb-lab,
  body.zb-smal .zb-soon,
  body.zb-smal .zb-merk img,
  body.zb-smal .zb-boven .org-switch { display: none; }
  body.zb-smal .zb-merk { justify-content: center; padding: 0; margin-bottom: 10px; }
  body.zb-smal .zb-klap { margin: 0; }

  body.zb-smal .zb-item { position: relative; justify-content: center; gap: 0; padding: 12px 0; }
  /*  ⭐ HIER MOGEN ZE GROTER: in de strip is het icoon het enige dat er staat,
      en dan is 18 aan de kleine kant. */
  body.zb-smal .zb-item svg { width: 21px; height: 21px; }
  body.zb-smal .zb-letter { width: auto; font-size: 15px; }
  /*  ⭐⭐ DE TELLER WORDT EEN BOLLETJE OP HET ICOON. `margin-left:auto` duwt hem
      in de brede stand naar rechts; in een gecentreerd item zou dat het icoon
      uit het midden trekken. */
  body.zb-smal .zb-item .zb-teller {
    position: absolute; top: 5px; right: 7px; margin: 0;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
  }
  body.zb-smal .zb-item .zb-teller.klikbaar { min-width: 18px; height: 18px; }
}

@media (max-width: 860px) {
  /* Zijmenu wordt een uitschuifbaar paneel (drawer) */
  .zijbalk {
    width: 264px; transform: translateX(-100%);
    transition: transform 0.25s ease; box-shadow: none; z-index: 60;
  }
  body.menu-open .zijbalk { transform: translateX(0); box-shadow: var(--schaduw-diep); }
  .zb-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(45,31,14,0.35); opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.menu-open .zb-scrim { opacity: 1; pointer-events: auto; }

  /* Balk bovenin over de volle breedte, met menuknop + logo links */
  .topbalk { left: 0; justify-content: space-between; padding: 0 12px; }
  .tb-menu { display: inline-flex; }
  .tb-logo { display: block; }
  .tb-rechts .badge-rol { display: none; }  /* rol staat in het profielmenu */

  .heeft-zijbalk { padding-left: 0; }
  .heeft-topbalk { padding-top: 56px; }

  .container { padding: 20px 14px 64px; }
}

@media (max-width: 480px) {
  .paginakop h1 { font-size: 22px; }
  .modaal { padding: 20px; }
  .veld-rij { gap: 10px; }
  .veld-rij > .veld { min-width: 140px; }
}

/* ---------- Layout ---------- */
.container { max-width: 1040px; margin: 0 auto; padding: 32px 20px 80px; }
.container-smal { max-width: 560px; }

.paginakop { margin-bottom: 24px; }
.paginakop .eyebrow {
  display: inline-block;
  background: rgba(var(--terra-rgb),0.10);
  color: var(--terra);
  font-family: 'Nexa', 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 30px; font-weight: 600; margin-bottom: 12px;
}
.paginakop h1 { font-size: clamp(22px, 4vw, 30px); font-weight: 700; margin-bottom: 6px; }
.paginakop p.sub { font-size: 14.5px; color: var(--grijs); max-width: 560px; }

/* ---------- Kaart ---------- */
.kaart {
  background: var(--wit);
  border: 1px solid var(--border);
  border-radius: var(--radius-groot);
  padding: 24px;
  box-shadow: var(--schaduw);
  margin-bottom: 18px;
}
.kaart-warm { background: var(--creme-diep); border: 1px solid var(--border); }
.kaart-titel {
  font-family: 'Nexa', 'DM Sans', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--bruin);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--creme-diep);
  display: flex; align-items: center; gap: 10px;
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none; white-space: nowrap;
}
.btn:disabled, .btn.laden { opacity: 0.6; pointer-events: none; }
/* Strak: platte vlakken met een dunne rand i.p.v. gekleurde slagschaduw. */
.btn-primair { background: var(--terra); color: var(--wit); border-color: var(--terra); }
.btn-primair:hover { background: var(--terra-donker); border-color: var(--terra-donker); color: var(--wit); text-decoration: none; }
.btn-succes { background: var(--salie-donker); color: var(--wit); border-color: var(--salie-donker); }
.btn-succes:hover { background: #4C7345; border-color: #4C7345; color: var(--wit); text-decoration: none; }
.btn-stil { background: var(--wit); color: var(--terra); border: 1px solid var(--border); }
.btn-stil:hover { background: var(--creme-diep); border-color: var(--perzik-mid); color: var(--terra-donker); text-decoration: none; }
.btn-gevaar { background: var(--wit); color: var(--rood); border: 1px solid var(--rood-border); }
.btn-gevaar:hover { background: var(--rood-bg); text-decoration: none; }
.btn-klein { padding: 7px 13px; font-size: 13px; }

/* ---------- Formuliervelden ---------- */
.veld { margin-bottom: 18px; }
.veld:last-child { margin-bottom: 0; }
.veld label.vraag,
label.vraag { display: block; font-size: 13.5px; font-weight: 600; color: var(--bruin); margin-bottom: 8px; }
.veld-hint { font-size: 12px; color: var(--grijs); margin-bottom: 8px; font-style: italic; }
.ster { color: var(--terra); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="date"], input[type="number"], textarea, select {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--bruin);
  background: var(--veld-bg); outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--terra); background: var(--wit);
  box-shadow: 0 0 0 2px rgba(var(--terra-rgb),0.12);
}
textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.veld-rij { display: flex; gap: 14px; flex-wrap: wrap; }
.veld-rij > .veld { flex: 1; min-width: 180px; }

/* ---------- Tabel ---------- */
.tabel-wrap { overflow-x: auto; border-radius: var(--radius); }
table.lijst { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.lijst th {
  text-align: left; font-family: 'Nexa', 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--grijs); font-weight: 700;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.lijst td {
  padding: 13px 14px; border-bottom: 1px solid #F2EAE0;
  color: var(--bruin); vertical-align: middle;
}
table.lijst tbody tr { transition: background 0.12s; }
table.lijst tbody tr:hover { background: var(--creme-diep); cursor: pointer; }
table.lijst tbody tr:last-child td { border-bottom: none; }
table.lijst tr.ongelezen td { font-weight: 600; color: var(--bruin); }
.ongelezen-stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--terra); margin-right: 8px; vertical-align: middle; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  white-space: nowrap;
}
.badge-nieuw        { background: rgba(var(--terra-rgb),0.12); color: var(--terra-donker); }
.badge-in_behandeling { background: var(--perzik); color: var(--terra-donker); }
.badge-afgehandeld  { background: var(--salie-licht); color: var(--salie-donker); }
.badge-gearchiveerd { background: #EDE7DF; color: var(--grijs); }
.badge-gevoelig     { background: rgba(var(--terra-rgb),0.10); color: var(--terra); }
.badge-anoniem      { background: var(--salie-licht); color: var(--salie-donker); }
.badge-in-dossier   { background: var(--salie-licht); color: var(--salie-donker); border: 1px solid var(--salie); }
.badge-rol          { background: var(--creme-diep); color: var(--bruin-70); border: 1px solid var(--border); }
.badge-open         { background: var(--salie-licht); color: var(--salie-donker); }
.badge-gebruikt     { background: #EDE7DF; color: var(--grijs); }
.badge-verlopen     { background: var(--rood-bg); color: var(--rood); }
.badge-ingetrokken  { background: #EDE7DF; color: var(--grijs); }

/* ---------- Statistiektegels ---------- */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tegel {
  background: var(--wit); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--schaduw);
}
.tegel .cijfer { font-family: 'Nexa', 'DM Sans', sans-serif; font-size: 32px; font-weight: 700; color: var(--terra); line-height: 1.1; }
.tegel .label { font-size: 12.5px; color: var(--grijs); margin-top: 4px; }
.tegel .detail { font-size: 11.5px; color: var(--bruin-30); margin-top: 2px; }

/* ---------- Verdeelbalk (1..10) ---------- */
.verdeling { display: flex; flex-direction: column; gap: 7px; }
.verdeling-rij { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.verdeling-rij .num { width: 22px; text-align: right; color: var(--grijs); font-weight: 600; }
.verdeling-rij .baan { flex: 1; height: 20px; background: var(--veld-bg); border-radius: 6px; overflow: hidden; }
.verdeling-rij .vul { height: 100%; background: var(--perzik-mid); border-radius: 6px; min-width: 2px; transition: width 0.4s; }
.verdeling-rij .aantal { width: 34px; color: var(--bruin-70); font-weight: 600; }

/* ---------- Sleutel/waarde detail ---------- */
.kv-rij { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid #F2EAE0; font-size: 13.5px; }
.kv-rij:last-child { border-bottom: none; }
.kv-sleutel { color: var(--grijs); font-weight: 600; min-width: 200px; flex-shrink: 0; }
.kv-waarde { color: var(--bruin); flex: 1; white-space: pre-wrap; word-break: break-word; }
.kv-waarde.leeg { color: #C9BBA8; font-style: italic; }

/* Gestructureerde antwoorden: per sectie een eigen kader (zoals in de vragenlijst) */
.detail-sectie {
  margin-bottom: 14px; background: var(--wit);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 2px 8px rgba(var(--terra-rgb),0.06);
}
.detail-sectie:last-child { margin-bottom: 0; }
.detail-sectie-titel {
  background: var(--terra); color: var(--wit);
  font-family: 'Nexa', 'DM Sans', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.3px; padding: 11px 16px;
}
.detail-sectie .kv-rij { padding: 11px 16px; }
.kv-nr {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; margin-right: 8px;
  font-size: 11px; font-weight: 700; color: var(--terra-donker);
  background: var(--creme-diep); border-radius: 8px; vertical-align: baseline;
}
.kv-sleutel { display: flex; align-items: baseline; }

/* Handtekening-galerij */
.sig-galerij { display: flex; flex-wrap: wrap; gap: 16px; }
.sig-fig { margin: 0; max-width: 320px; }
.sig-fig img {
  display: block; width: 100%; height: auto; max-height: 150px;
  object-fit: contain; background: #fff;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px;
}
.sig-fig figcaption { font-size: 12px; color: var(--grijs); margin-top: 6px; text-align: center; }
.veld-afb { max-width: 100%; width: auto; max-height: 150px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: block; }

/* Inklapbare originele tekstweergave (herleidbaarheid) */
.herkomst > summary {
  cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--terra);
  list-style: none;
}
.herkomst > summary::-webkit-details-marker { display: none; }
.herkomst > summary::before { content: '▸ '; color: var(--terra); }
.herkomst[open] > summary::before { content: '▾ '; }

/* Filter-checkbox in de balk */
.dossier-toggle .toggle-rij { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grijs); height: 42px; }
.dossier-toggle input { width: auto; }

/* ---------- Tabbladen (browser-/mapjesstijl, overal gelijk) ----------
   Zelfde vorm als de dossiertabs: afgeronde bovenhoeken, omlijnd actief
   tabblad dat op de onderlijn "plakt". Werkt via de themavariabelen, dus
   op de Onderwijsdesk-kant kleuren de tabs automatisch mee (paars). */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-end;
  border-bottom: 1px solid var(--border); margin: 6px 0 20px; padding: 6px 0 0;
}
.tab {
  border: 1px solid var(--border); border-bottom: none; border-radius: 12px 12px 0 0;
  margin-bottom: -1px; background: var(--creme-diep); color: var(--bruin-70);
  padding: 9px 16px; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background 0.12s, color 0.12s;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { background: rgba(var(--terra-rgb),0.10); color: var(--terra-donker); }
.tab.actief { background: var(--wit); color: var(--terra-donker); border-color: var(--border); position: relative; z-index: 2; }
/*  Een telling op een tab is een AANTAL, geen opdracht: dus de rustige stand
    van het bolletje. Maat en vorm gelijk aan `.telbol`. */
.tab .tab-telling {
  font-size: 11.5px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: rgba(var(--terra-rgb),0.12); color: var(--terra-donker);
  display: inline-flex; align-items: center; justify-content: center;
}
.tab.actief .tab-telling { background: rgba(var(--terra-rgb),0.18); color: var(--terra-donker); }
/*  ⭐⭐⭐ EN SOMS IS EEN TELLING WÉL EEN OPDRACHT (27 augustus 2026).
    De regel hierboven klopt voor een aantal dat alleen zegt hoeveel er zijn.
    Maar de tabs van Cursussen tellen WERK: hoeveel lunches nog niet besteld
    zijn, hoeveel mensen nog wachten. Die stonden daar in de aandachtkleur, in
    een eigen klasse `.cu-tabteller`.

    Die klasse is weg en dit is wat ervoor in de plaats komt: niet een tweede
    bolletje, maar dezelfde met een merkteken erop. Zo groeit de gedeelde vorm
    mee in plaats van dat er een variant naast ontstaat. Zelfde kleur en
    dezelfde naam als `.telbol.let`. */
.tab .tab-telling.let, .tab.actief .tab-telling.let { background: var(--let); color: #FFFFFF; }
.tab .tab-soon { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--terra-donker); background: var(--perzik); padding: 2px 7px; border-radius: 20px; }
.tabpanel { display: none; }
.tabpanel.actief { display: block; animation: tabin 0.18s ease both; }
@keyframes tabin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   De modulebalk
   ============================================================
   Elke MODULE uit het hoofdmenu (Verkoop, Cursussen, Cursisten, Planning,
   Evaluatie, Analyse) heeft binnenin zijn eigen schermen. Op een telefoon
   staan die niet meer als mappentabs bovenaan maar als ZWEVENDE PIL onderaan,
   precies zoals in de verkoopmodule: de duim zit onderaan het scherm en de
   inhoud loopt er zichtbaar onderdoor.

   Het hoofdmenu zelf verandert hier NIET door: dat blijft de zijbalk met de
   hamburger. Deze balk gaat alleen over navigeren bínnen één module.

   Zet `modbalk` op de rij en `modtab` op elke knop, dan volgt de rest. De
   iconen staan in de HTML en zijn op een breed scherm verborgen, net als in
   verkoop-app.html.
   ============================================================ */
.modtab svg { display: none; }

@media (max-width: 860px) {
  /*  `body` ervoor om dezelfde reden als de .modtab-regels hieronder: de
      modules hebben hun eigen CSS in de pagina, en die staat na stijl.css.
      Zonder dit hield .dl-schakel van Cursisten zijn eigen ronding van 12px. */
  body .modbalk {
    /*  22px en niet 9. Op een iPhone staat er GEEN `viewport-fit=cover` in de
        meta-viewport, en dan geeft `env(safe-area-inset-bottom)` gewoon 0 terug.
        De 9px die op papier bovenop de veilige zone kwam, was op het toestel dus
        de hele afstand tot de onderrand, en dan plakt de pil aan de rand.
        Gemeten aan een schermafdruk van Martijn op 1 augustus. */
    position: fixed; left: 10px; right: 10px; bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 40; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 2px;
    margin: 0; padding: 5px; border-radius: 27px;
    /* Hoe glasachtig: --pil-dek en --pil-blur bovenin dit bestand. */
    background: rgba(255,255,255,var(--pil-dek));
    -webkit-backdrop-filter: blur(var(--pil-blur)) saturate(180%) brightness(var(--pil-licht));
    backdrop-filter: blur(var(--pil-blur)) saturate(180%) brightness(var(--pil-licht));
    border: 1px solid rgba(45,31,14,0.06);
    box-shadow: 0 10px 30px rgba(45,31,14,0.14), 0 1px 3px rgba(45,31,14,0.06);
    overflow-x: auto; scrollbar-width: none;
  }
  body.org-onderwijsdesk .modbalk {
    border-color: rgba(20,1,82,0.06);
    box-shadow: 0 10px 30px rgba(20,1,82,0.16), 0 1px 3px rgba(20,1,82,0.07);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body .modbalk { background: #fff; }
  }
  .modbalk::-webkit-scrollbar { display: none; }
  /* 44px hoog, ruim boven de 36 die op deze schermen geldt.
     Let op de .modbalk ervoor: elke module heeft zijn eigen tab-CSS in een
     <style> IN de pagina, en die staat NA stijl.css. Bij gelijke specificiteit
     wint de pagina dan, en bleef bijvoorbeeld de marge van .cu-tab staan. */
  .modbalk .modtab {
    position: relative;   /* de teller hieronder hangt hieraan */
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    border: none; border-radius: 22px; margin: 0; background: transparent;
    color: var(--bruin-70); padding: 6px 3px; min-height: 44px;
    font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background .18s ease, color .18s ease;
  }
  .modbalk .modtab svg { display: block; width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }
  /* Het label mag inkorten, maar de balk niet uitrekken. */
  .modbalk .modtab > span:not([class]) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .modbalk .modtab:hover { background: transparent; color: var(--bruin-70); }
  .modbalk .modtab.actief, .modbalk .modtab.aan {
    background: var(--creme-diep); color: var(--terra-donker); border: none; box-shadow: none;
  }
  body.org-onderwijsdesk .modbalk .modtab.actief, body.org-onderwijsdesk .modbalk .modtab.aan {
    background: #F1ECFA; color: #140152;
  }
  .modbalk .modtab.actief svg, .modbalk .modtab.aan svg { opacity: 1; }
  /* Een onderstreping onder een zwevende pil slaat nergens op: de pil zelf is
     de markering. Gold voor de tabs van Cursussen (.cu-tab.aan::after). */
  .modbalk .modtab.aan::after { display: none; }
  /*  `.cu-tabteller` stond hier ook. Die klasse is op 27 augustus 2026 uit
      cursussen.html verdwenen ten gunste van de gedeelde `.tab-telling`. */
  .modbalk .modtab .tab-soon, .modbalk .modtab .tab-telling {
    position: absolute; transform: translate(14px, -10px);
    font-size: 9.5px; padding: 1px 5px; min-width: 0; height: auto;
  }
  .modbalk .modtab .tab-soon { display: none; }
  /* De balk zweeft, dus de inhoud loopt eronder door. Zonder deze ruimte staat
     de laatste regel van de pagina achter de pil. */
  body:has(.modbalk) .container { padding-bottom: calc(115px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   DE AANDACHTPIL EN HET TELBOLLETJE
   ============================================================
   Er stonden zes vormen voor hetzelfde signaal "er ligt iets voor je":
   de statusknop in Verkoop, Te controleren in Cursisten, twee perzik chips
   in Cursussen, een openstaande kaart bij Lunch, een teller op een tab in de
   modulebalk en een teller in de zijbalk. Elk met een eigen kleur en maat.

   Nu één vorm, en één regel over het getal:

     TELBOLLETJE ZACHT  = alleen een aantal, er hoeft niets.
     TELBOLLETJE OPVALLEND = er wordt iets van je gevraagd.

   De pil zelf blijft altijd rustig: hij draagt de kleur van het merk
   (crème bij Opvoeddesk, lavendel bij Onderwijsdesk) en niet de urgentie.
   Alleen het bolletje kleurt op. Dat is bewust: een scherm met drie
   openstaande dingen hoort niet in drie oranje vlakken te veranderen.

   Gebruik:
     <button class="attpil">Gastvrouw <span class="telbol let">1</span></button>
     <button class="attpil aan">Aandacht <span class="telbol">4</span></button>

   `aan` is de ingedrukte stand van een filter. Opent de knop een venster,
   dan blijft hij rustig staan.                                            */

.attpil {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid transparent; background: var(--creme-diep);
  color: var(--bruin); font: inherit; font-size: 13px; font-weight: 600;
  line-height: 1; cursor: pointer; text-align: left;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.attpil:hover { border-color: rgba(var(--terra-rgb),0.28); }
.attpil:active { transform: scale(0.98); }
.attpil.aan { background: var(--terra); color: var(--wit); border-color: var(--terra); }
.attpil svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
/*  Een pil is 36px hoog en dat is precies de ondergrens voor een duim, dus
    hier geen extra trefvlak nodig. */

.telbol {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(var(--terra-rgb),0.12); color: var(--terra);
  font-size: 11.5px; font-weight: 700; line-height: 1; flex-shrink: 0;
}
.telbol.let { background: var(--let); color: var(--wit); }
.telbol.verborgen, .telbol:empty { display: none; }
.attpil.aan .telbol { background: rgba(255,255,255,0.22); color: var(--wit); }
.attpil.aan .telbol.let { background: var(--wit); color: var(--let); }

/* ============================================================
   HET ZOEKVAK: een loep die opengaat
   ============================================================
   Een zoekbalk over de volle breedte trekt de aandacht naar iets wat je
   meestal niet doet. Het scherm gaat over de lijst eronder, niet over het
   zoeken. Dus: een loep ter grootte van de andere ronde knoppen, en pas als
   je erop drukt schuift het veld open.

   Markup:
     <div class="zoekvak">
       <button class="zoekvak-knop" aria-label="Zoeken" aria-expanded="false"
               onclick="Forms.zoekvakOpen(this)"> ... loep ... </button>
       <input type="search" placeholder="Zoek op ..." oninput="...">
     </div>

   De regel hierboven geeft ELKE input[type=search] een eigen kader en bij
   focus een gekleurde rand. Binnen dit vak moet dat er weer af, ook de
   :focus-regel: die weegt even zwaar en wint anders alsnog.               */
.zoekvak { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 100%;
  border: 1px solid transparent; border-radius: 999px; background: transparent;
  transition: background 0.18s, border-color 0.18s; }
.zoekvak-knop { width: 36px; height: 36px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: var(--creme-diep); color: var(--terra); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; }
.zoekvak-knop svg { width: 18px; height: 18px; display: block; }
.zoekvak input[type="search"] { width: 0; min-width: 0; padding: 0; border: none; background: transparent;
  opacity: 0; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--bruin);
  transition: width 0.18s, opacity 0.18s; }
.zoekvak input[type="search"]:focus { border: none; background: transparent; box-shadow: none; }
/* Safari en Chrome zetten hun eigen wisknop in een type=search. */
.zoekvak input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.zoekvak.open { flex: 1 1 240px; background: var(--veld-bg); border-color: var(--border); }
.zoekvak.open .zoekvak-knop { background: transparent; }
.zoekvak.open input[type="search"] { width: auto; flex: 1 1 auto; opacity: 1; padding: 9px 14px 9px 2px; }
/* Staat er iets in, dan blijft het vak open: anders lijkt het filter weg. */

/* ============================================================
   ⭐ 16px IN ELK INVOERVELD OP EEN AANRAAKSCHERM
   ============================================================
   Martijn, 1 augustus, met een schermafdruk van Cursisten op zijn iPhone:
   "als je op zoeken drukt wordt het veld groot en valt buiten het scherm."

   GEMETEN, en het is NIET een te breed veld. Op 390x844 is het geopende
   zoekvak 350px in een venster van 390, en `document.scrollWidth` blijft
   precies 390. Er loopt niets buiten de rand.

   Wat er wél gebeurt: iOS Safari ZOOMT IN zodra je een tekstveld met een
   lettergrootte ONDER 16px focust. De hele pagina wordt dan groter dan het
   scherm en schuift opzij: op de schermafdruk staat er "ursisten" in plaats
   van "Cursisten" en is de bovenbalk half weg. Het veld valt niet buiten het
   scherm; het scherm is te klein geworden voor de pagina.

   Er is maar één manier om dat te stoppen en dat is 16px. Meer of minder
   padding, een andere breedte of `user-scalable=no` helpen niet (dat laatste
   zet ook het knijpzoomen uit en dat willen we niet: "Kunnen inzoomen" staat
   in de ontwerplijn).

   `pointer: coarse` staat er náást de breedte omdat een iPad in liggende stand
   1024px breed is en net zo goed zoomt. Die tak is hier niet te meten: deze
   previewbrowser meldt altijd `pointer: fine`. De breedtetak wordt wél gemeten,
   door `prev-cursus-cursist-mobiel.cjs`.

   ZET DUS NOOIT EEN LETTERGROOTTE ONDER DE 16px OP EEN INVOERVELD. Op een
   breed scherm mag het, en daar staat deze regel dan ook niet.            */
@media (max-width: 860px), (pointer: coarse) {
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="password"], input[type="date"],
  input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
  input:not([type]), select, textarea { font-size: 16px; }
  /*  ⭐ EEN MEDIA QUERY VERANDERT DE SPECIFICITEIT NIET. `.zoekvak
      input[type=search]` hierboven weegt (0,2,1) en de regel in dit blok
      (0,1,1), dus het zoekveld bleef gewoon op 14px staan ook al stond deze
      regel eronder. Gemeten, niet bedacht: het script wees hem aan.
      Zet een veld met een eigen regel dus ook hier met die eigen selector. */
  .zoekvak input[type="search"] { font-size: 16px; }
  /*  Het zoekvak is een pil van 36px. Met 16px erin wordt hij een paar pixels
      hoger; dat mag, maar de padding gaat omlaag zodat hij niet uit de rij
      groeit waar hij in staat. */
  .zoekvak.open input[type="search"] { padding: 7px 14px 7px 2px; }
}

/* Klikbare rij in een lijst-tabel (bijv. ingevulde vragenlijst openen) */
.lijst tr.klikbaar { cursor: pointer; }
.lijst tr.klikbaar:hover { background: var(--creme-diep); }

/* Brede modaal voor de vragenlijst-popup */
.modaal.breed { max-width: 760px; }
.modaal-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.modaal-sluit { background: none; border: none; font-size: 22px; line-height: 1; color: var(--grijs); cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.modaal-sluit:hover { color: var(--terra); background: var(--creme-diep); }

/* ---------- Meldingen ---------- */
.melding { border-radius: var(--radius); padding: 13px 16px; font-size: 13.5px; margin-bottom: 16px; }
.melding-fout    { background: var(--rood-bg); border: 1px solid var(--rood-border); color: var(--rood); }
.melding-info    { background: var(--creme-diep); border: 1px solid var(--border); color: var(--bruin-70); }
.melding-succes  { background: var(--salie-licht); border: 1px solid var(--salie); color: var(--salie-donker); }
.melding-waarschuwing { background: #FFF7E8; border: 1px solid var(--perzik-mid); color: var(--terra-donker); }
.verborgen { display: none !important; }

/* ---------- Leeg / laden ---------- */
.leeg-staat { text-align: center; padding: 48px 24px; color: var(--grijs); }
.leeg-staat .icoon { font-size: 34px; margin-bottom: 12px; opacity: 0.6; }
.laden-staat { text-align: center; padding: 40px; color: var(--grijs); font-size: 14px; }
.spinner {
  width: 26px; height: 26px; margin: 0 auto 14px;
  border: 3px solid var(--creme-diep); border-top-color: var(--terra);
  border-radius: 50%; animation: draai 0.8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

/* ---------- Filterbalk ---------- */
.filterbalk { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.filterbalk .veld { margin-bottom: 0; }
.filterbalk select, .filterbalk input { min-width: 150px; }

/* ---------- Modaal ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(45,31,14,0.35);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 170;
}
.modaal {
  background: var(--wit); border-radius: var(--radius-groot);
  padding: 26px; max-width: 520px; width: 100%;
  box-shadow: var(--schaduw-diep); max-height: 90vh; overflow-y: auto;
}
.modaal h3 { font-size: 18px; margin-bottom: 16px; }
.modaal .knoprij { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ---------- Toast ---------- */
/*  ⭐⭐⭐ 1500 EN NIET 80 (31 augustus 2026). Een toast is de melding die zegt
    of het gelukt is, en hij hoort dus boven ALLES: boven de zwevende
    werkstrook (150), boven een uitschuivend paneel, en boven een venster
    (1200) of een bevestiging (1400). Op 80 lag hij onder de strook, en dan
    verdwijnt precies de melding die je na een actie wilt zien. De volledige
    ladder staat bij `.lade-overlay` in `public/admin/cursussen.html`. */
.toast-laag { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1500; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--bruin); color: var(--wit);
  padding: 12px 20px; border-radius: 10px; font-size: 13.5px;
  box-shadow: 0 6px 20px rgba(45,31,14,0.25);
  animation: toastin 0.25s ease both;
}
.toast.succes { background: var(--salie-donker); }
.toast.fout { background: var(--rood); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 24px; font-size: 12px; color: #B3A695; }

/* ---------- Hulp ---------- */
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; }
.rij-acties { display: flex; gap: 6px; flex-wrap: wrap; }
.tussen { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.terug-link { font-size: 13px; color: var(--grijs); display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.terug-link:hover { color: var(--terra); text-decoration: none; }

/* ---------- Terugknop ----------
   ⭐ ÉÉN VORM VOOR "TERUG NAAR HET OVERZICHT", OP ELK SCHERM DEZELFDE.
   Martijn, 19 augustus 2026: "De knop terug bovenin de pagina, zie pijl alle
   cursussen, vind ik niet duidelijk en zou een duidelijker knop moeten zijn.
   Dit geldt voor alle schermen."

   Het was een grijze tekstregel met een pijltje; die leest als bijschrift en
   niet als knop. Nu een echt vlak: witte vulling, randje, afgeronde hoeken en
   de tekstkleur van het merk. Hij blijft linksboven staan, want daar zoekt
   iedereen hem, en hij kleurt vanzelf mee met Opvoeddesk of Onderwijsdesk
   omdat hij alleen de gedeelde variabelen gebruikt. */
.terugknop {
  font: inherit; font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bruin); background: var(--wit);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 15px 9px 12px; margin: 0 0 16px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--schaduw);
  transition: background .15s, border-color .15s, transform .15s;
}
.terugknop:hover { background: var(--creme-diep); border-color: var(--bruin-30); text-decoration: none; color: var(--bruin); }
.terugknop:active { transform: translateY(1px); }
.terugknop svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; }
  .topbar .rechts { margin-left: 0; width: 100%; justify-content: space-between; }
  /* Sleutel/waarde op smalle schermen onder elkaar: label boven, antwoord eronder.
     Voorkomt dat brede waarden (zoals een handtekening-afbeelding) buiten beeld vallen. */
  .kv-rij { flex-direction: column; gap: 4px; }
  .kv-sleutel { min-width: 0; }
  .sig-galerij { gap: 14px; }
  .sig-fig { max-width: 100%; width: 100%; }
}

/* ============================================================
   Onderwijsdesk-thema (actief bij org-wissel: body.org-onderwijsdesk)
   Merkkleuren van onderwijsdesk.nl: diep paars #140152, fuchsia
   #E6296A, oranje #FF641A, warm-wit #FFFDF8. De hele Onderwijsdesk-
   kant kleurt hiermee mee, inclusief de organisatie-wisselknop.
   ============================================================ */
body.org-onderwijsdesk {
  --creme:        #FFFDF8;   /* warm-wit, zoals de site */
  --creme-diep:   #F1ECFA;   /* zacht lavendel: zijbalk, balken, vlakken */
  --wit:          #FFFFFF;
  --bruin:        #140152;   /* koppen + tekstaccent = merkpaars */
  --bruin-70:     rgba(20,1,82,0.72);
  --bruin-30:     rgba(20,1,82,0.32);
  --grijs:        #7C7597;   /* subtekst, paars-grijs */
  --border:       #E5DDF3;
  --veld-bg:      #F7F3FC;

  --terra:        #140152;   /* hoofdaccent = merkpaars (actief menu, wisselknop, avatar) */
  --terra-donker: #2E1A6B;   /* hover, iets opgelicht paars */
  --terra-rgb:    20,1,82;
  --perzik:       #FFE0BC;   /* zacht oranje (badges 'binnenkort') */
  --perzik-mid:   #FF641A;   /* oranje accent van de site */
  --let:          #FF641A;   /* aandacht: het oranje van de site */

  color: #33373D;            /* bodytekst iets zachter dan de diep-paarse koppen */
}
/* Inline links in de INHOUD in fuchsia zodat ze opvallen tegen het paars.
   Menu-items (.zb-item) en de infoknop (.tb-info) blijven gedempt/wit. */
body.org-onderwijsdesk a:not(.zb-item):not(.tb-info) { color: #E6296A; }
body.org-onderwijsdesk a:not(.zb-item):not(.tb-info):hover { color: #C21E58; }

/* ============================================================
   Venster: nieuwe boekingen sinds je hier voor het laatst keek
   ============================================================
   Verschijnt één keer per sessie bij het openen van DESK, zodra de
   WooCommerce-webhook iets nieuws heeft binnengehaald. Wegwerken zet
   'gezien' op de server, dus op je andere toestellen is het ook weg. */
.nb-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(20,1,82,0.34); backdrop-filter: blur(2px);
}
.nb-kaart {
  background: #FFFFFF; border-radius: 20px; width: min(520px, 100%);
  max-height: min(80vh, 720px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(20,1,82,0.28); overflow: hidden;
}
.nb-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; }
.nb-titel { font-size: 18px; font-weight: 700; color: #140152; }
.nb-sub { font-size: 12.5px; color: #7C7597; margin-top: 3px; }
.nb-sluit { border: none; background: #F1ECFA; color: #140152; width: 30px; height: 30px; border-radius: 9px;
  font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.nb-sluit:hover { background: #E6DDF7; }
.nb-lijst { overflow: auto; padding: 0 22px; }
.nb-rij { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid #F3EEFA; }
.nb-rij:first-child { border-top: none; }
.nb-l { min-width: 0; }
.nb-wie { font-size: 14px; font-weight: 700; color: #140152; }
.nb-wat { font-size: 13px; color: #33373D; margin-top: 2px; }
.nb-meta { font-size: 11.5px; color: #7C7597; margin-top: 2px; }
.nb-bedrag { font-size: 14.5px; font-weight: 700; color: #140152; white-space: nowrap; }
.nb-meer { font-size: 12.5px; color: #7C7597; padding: 12px 0 2px; border-top: 1px solid #F3EEFA; }
.nb-acties { display: flex; gap: 10px; padding: 16px 22px 20px; }
.nb-knop { flex: 1; font: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid #E5DDF3;
  background: #FFFFFF; color: #140152; border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.nb-knop:hover { background: #F7F3FC; }
.nb-knop.pri { background: #140152; color: #FFFFFF; border-color: #140152; }
.nb-knop.pri:hover { background: #2E1A6B; }
@media (max-width: 520px) { .nb-acties { flex-direction: column; } }

/* ============================================================
   Het werkpaneel: één plek waar alles samenkomt
   ============================================================
   Negen knoppen met een aantal, zwevend over elk scherm van Onderwijsdesk.
   Druk op een knop en je ziet wie of wat het betreft; bij Cursusdagen is er
   nog een stap: wat staat er voor die dag open.

   ⭐⭐⭐ BREED EN NIET SMAL. Martijn, 25 augustus: "liever een wat breder
   scherm dan een smal en heel lang scherm." Twee kolommen knoppen, zodat je
   negen knoppen in één blik ziet in plaats van te scrollen.

   ⭐⭐⭐ DEKKEND, EN HET SCHERM ERONDER BLIJFT MET RUST. Het aandachtvenster is
   een kaart op een half doorschijnende laag over de jaarplanning en die leest
   er dwars doorheen; bovendien wisselt het de tab áchter zich om. Hier ligt
   een dekkende laag onder de kaart en verandert er niets aan het scherm
   eronder.

   ⭐⭐ DE KNOP RECHTSONDER STAAT BOVEN DE .modbalk. Die zweeft op mobiel al
   onderin bij Cursussen, Deelnemers, Analyse, Evaluatie en Cursusbeheer, en
   twee zwevende dingen over elkaar is er een te veel.
   ============================================================ */
/*  ⭐⭐⭐ DE STROOK: WAT ER SPEELT, EN NIET ALLEEN DAT ER IETS SPEELT.
    Boven de knop staan de knoppen waar iets in staat, onder elkaar, met hun
    icoon en hun getal. Eén klik gaat rechtstreeks naar die lijst.

    Alleen wat iets heeft, en hooguit vijf: zouden ze er allemaal staan, dan is
    het een tweede menu op elk scherm en kijkt niemand er meer naar. */
.wo-strook {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
}
/*  ⭐⭐⭐ OP EEN TELEFOON ALLEEN DE KNOP, EN GEEN CHIPS.
    Martijn, 25 augustus, met een schermafdruk erbij: "op mobiel komt het niet
    zo mooi uit op deze manier." Hij had gelijk: vijf chips onder elkaar zijn op
    een telefoon een kolom die een derde van het scherm afdekt, en op die
    afdruk lagen ze precies over de weekgrafiek heen.

    Op een breed scherm is de strook een randje; op een smal scherm is het een
    muur. Vandaar dat er onder de 900px alleen de knop met het totaal overblijft
    en het paneel zelf de rest doet. 900px is niet willekeurig: daar schakelt de
    verkoopmodule van een tabrij bovenin naar een vaste balk onderin
    (`.tabs`), en dat is precies de grens waar het scherm krap wordt.

    ⭐⭐ EN DE KNOP MOET BOVEN ELKE ZWEVENDE ONDERBALK UITKOMEN. Er zijn er twee:
    `.modbalk` in Cursussen, Deelnemers, Analyse, Evaluatie en Cursusbeheer, en
    `.tabs` in de verkoopmodule. Op de schermafdruk stond de knop bovenop die
    tweede. */
body:has(.modbalk) .wo-strook { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 899px) {
  .wo-strook .wo-chip { display: none; }
  .wo-strook { gap: 0; bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/*  ⭐ ZE WAREN TE KLEIN (25 augustus, na het in de echte app te hebben gezien).
    Ze stonden als kleine satellieten naast een veel grotere knop, en dan lees je
    ze als versiering in plaats van als iets waar je op moet klikken. Ze zijn nu
    even hoog als de knop eronder, zodat ze er familie van zijn. */
.wo-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #FFFFFF; color: rgba(20,1,82,0.72); border: 1px solid #E5DDF3;
  border-radius: 999px; padding: 7px 15px 7px 9px; font: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 5px 18px rgba(20,1,82,0.15);
}
.wo-chip:hover { background: #F7F3FC; }
.wo-chip:focus-visible { outline: 2px solid #E6296A; outline-offset: 2px; }
.wo-chip .i { width: 27px; height: 27px; flex-shrink: 0; border-radius: 9px;
  background: #F7F3FC; display: flex; align-items: center; justify-content: center; }
.wo-chip .i svg { width: 15px; height: 15px; }
.wo-chip .n { color: #140152; font-variant-numeric: tabular-nums; min-width: 15px;
  text-align: right; }
/*  Oranje blijft zeldzaam: alleen als er iets knelt, en dan op het getal. */
.wo-chip.let .n { color: #FF641A; }

.wo-knop {
  display: inline-flex; align-items: center; gap: 9px;
  background: #FFFFFF; color: #140152; border: 1px solid #E5DDF3; border-radius: 999px;
  padding: 10px 16px 10px 13px; font: inherit; font-size: 13.5px; font-weight: 700;
  box-shadow: 0 8px 26px rgba(20,1,82,0.20); cursor: pointer;
}
.wo-knop:hover { background: #F7F3FC; }
.wo-knop:focus-visible { outline: 2px solid #E6296A; outline-offset: 2px; }
.wo-knop svg { width: 17px; height: 17px; flex-shrink: 0; }
.wo-bol {
  min-width: 20px; height: 20px; border-radius: 999px; background: #FF641A; color: #FFFFFF;
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; padding: 0 5px;
  font-variant-numeric: tabular-nums;
}


/*  ⭐⭐⭐ GEEN DONKERE LAAG, EN GEEN KLIKVANGER.
    Er lag hier een half doorschijnende laag over de hele pagina. Die vangt elke
    klik, dus buiten het paneel klikken sloot het alleen maar en daarna moest je
    nóg een keer klikken om te doen wat je wilde. Erger: het scherm eronder was
    niet meer leesbaar, en dat is precies waar het aandachtvenster op stukloopt.

    Nu laat de laag klikken door en vangt alleen de kaart ze op. Eén klik naast
    het paneel sluit het én landt op de knop eronder. */
.wo-overlay {
  position: fixed; inset: 0; z-index: 210; display: flex;
  align-items: flex-end; justify-content: flex-end; padding: 20px;
  background: transparent; pointer-events: none;
}
.wo-overlay .wo-kaart { pointer-events: auto; }
.wo-kaart {
  background: #FFFFFF; border-radius: 20px; width: min(660px, 100%);
  max-height: min(88vh, 820px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(20,1,82,0.30), 0 0 0 1px rgba(20,1,82,0.06);
  overflow: hidden; text-align: left;
}

/* ---------- de kop ---------- */
.wo-kop {
  padding: 15px 16px 13px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #E5DDF3; flex-shrink: 0;
}
.wo-koptekst { min-width: 0; }
.wo-titel { font-size: 16px; font-weight: 700; color: #140152; line-height: 1.25; }
.wo-sub { font-size: 11.5px; color: #7C7597; margin-top: 1px; }
.wo-terug, .wo-tand, .wo-sluit {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px;
  border: 1px solid #E5DDF3; background: #FFFFFF; color: rgba(20,1,82,0.72);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; font-size: 15px; line-height: 1;
}
.wo-terug svg, .wo-tand svg { width: 14px; height: 14px; }
.wo-terug:hover, .wo-tand:hover, .wo-sluit:hover { background: #F7F3FC; }
.wo-tand { margin-left: auto; }
.wo-sluit:not(:nth-child(3)) { margin-left: 0; }
.wo-kop > .wo-koptekst + .wo-sluit { margin-left: auto; }

/* ---------- de periode: één schakelbalk ----------
   Vier omlijnde pillen naast elkaar zijn vier randen boven een kop die er maar
   één heeft, en ze schreeuwen de titel eronder weg. Eén balk met een zachte
   achtergrond en een wit blokje op de keuze is stiller, en hij zegt wat het is:
   één instelling met een stand, en geen vier losse knoppen. */
.wo-periode { padding: 12px 16px 2px; flex-shrink: 0; overflow-x: auto; }
.wo-balk {
  display: inline-flex; align-items: center; gap: 2px;
  background: #F1ECFA; border-radius: 999px; padding: 3px;
}
.wo-seg {
  border: none; background: transparent; color: rgba(20,1,82,0.66);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.wo-seg:hover { color: #140152; }
.wo-seg.aan {
  background: #FFFFFF; color: #140152; font-weight: 700;
  box-shadow: 0 1px 2px rgba(20,1,82,0.14);
}
.wo-seg:focus-visible { outline: 2px solid #E6296A; outline-offset: 1px; }
/*  Het streepje zet de paren uit elkaar: week en maand, de twee jaren, en dan
    Alles. Het is een scheiding en geen knop, dus het vangt geen klik. */
.wo-streep {
  width: 1px; height: 15px; background: rgba(20,1,82,0.14); margin: 0 4px;
  flex-shrink: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .wo-seg { transition: none; } }

/* ---------- de knoppen, twee kolommen ---------- */
.wo-blokkop {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #7C7597; padding: 15px 16px 6px; font-weight: 600;
}
/*  De ondergrens die voor dit blok geldt, in gewone taal. Kleine letter en geen
    hoofdletters: het is een toelichting en geen tweede kop. */
.wo-blokkop .grens { text-transform: none; letter-spacing: 0; font-weight: 400; }
/*  ⭐⭐ LIJNEN TUSSEN DE KNOPPEN, WANT ACHT VAKJES ZONDER SCHEIDING ZIJN SOEP.
    Martijn, 25 augustus: "misschien de tussenlijnen wat zichtbaarder?" Ze waren
    er helemaal niet. Een haarlijn tussen de rijen en tussen de twee kolommen
    maakt er een tabel van, en in een tabel vindt je oog het getal terug op
    dezelfde plek.

    Met randen en niet met een raster-gap: bij een oneven aantal knoppen zou de
    lege cel anders als een grijs blok in beeld komen. */
.wo-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 560px) {
  .wo-raster { grid-template-columns: 1fr; }
  .wo-kn:nth-child(odd) { border-right: none; }
}

.wo-kn {
  display: flex; align-items: center; gap: 11px; padding: 12px 16px;
  background: transparent; font: inherit; text-align: left;
  border: none; border-bottom: 1px solid #EFE9F8;
  cursor: pointer; width: 100%; min-width: 0;
}
.wo-kn:nth-child(odd) { border-right: 1px solid #EFE9F8; }
/*  Bij een oneven aantal knoppen blijft er rechtsonder een lege cel over. De
    verticale lijn liep daar gewoon doorheen en tekende een scheiding tussen
    niets en niets. */
.wo-kn:last-child:nth-child(odd) { border-right: none; }
/*  En onder de laatste rij hing een streep in de lucht, vlak boven de rand van
    de kaart. De blokkop erboven doet het scheiden al. */
.wo-raster:last-of-type .wo-kn { border-bottom: none; }
.wo-kn:hover { background: #FBF8FE; }
.wo-kn:focus-visible { outline: 2px solid #E6296A; outline-offset: -2px; }
/*  ⭐⭐⭐ HET ICOON IS DECORATIE EN KLEURT DUS NOOIT. Het perzikvlak stond eerst
    achter het icoon van elke knop waar iets in stond, en dan zijn er zes
    accenten in één klein paneel. Wat aandacht vraagt is het GETAL, en daar
    staat de kleur nu ook. */
.wo-kn .ico {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: #F7F3FC;
  display: flex; align-items: center; justify-content: center; color: rgba(20,1,82,0.72);
}
.wo-kn .ico svg { width: 15px; height: 15px; }
.wo-kn .tk { min-width: 0; flex: 1; }
.wo-kn .t1 { display: block; font-size: 14px; font-weight: 700; color: #140152; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-kn .t2 { display: block; font-size: 11.5px; color: #7C7597; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-kn .n { font-size: 15px; font-weight: 700; color: #140152;
  font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
.wo-kn .pijl { width: 13px; height: 13px; flex-shrink: 0; color: rgba(20,1,82,0.32);
  display: flex; }
.wo-kn .pijl svg { width: 13px; height: 13px; }

/*  ⭐⭐ STIL BETEKENT: HIER IS NIETS, EN DAT MAG JE ZIEN. De knop verdwijnt
    niet, want een regel die weggaat vertelt niet of er niets was of dat de
    telling stuk is. */
.wo-kn.stil .t1 { color: rgba(20,1,82,0.42); font-weight: 600; }
.wo-kn.stil .n { color: rgba(20,1,82,0.32); font-weight: 600; }
.wo-kn.stil .ico { background: transparent; color: rgba(20,1,82,0.28); }
/*  ⭐⭐⭐ LET IS ZELDZAAM, EN DAAROM IS HET IETS WAARD.
    Niet "er staat iets in deze knop" maar "hier knelt iets": een boeking zonder
    cursusdag, een cursusdag binnen twee weken waar nog werk ligt, een vervallen
    dag zonder vervangende datum, iemand die langer dan twee weken wacht. Stond
    het aan bij elk getal boven nul, dan brandt de kleur altijd, en EEN KLEUR
    DIE ALTIJD BRANDT WORDT GENEGEERD.

    En hij zit op het GETAL en niet op het icoon: het getal is waar het over
    gaat. Eén accent per knop, nooit twee. */
.wo-kn.let .n { color: #FF641A; }

/* ---------- de lijst ---------- */
.wo-lijst { padding: 4px 10px 10px; overflow: auto; }
/*  ⭐ EEN LIJST DIE EEN REGEL DOORMIDDEN KAPT ZIET ERUIT ALSOF ER IETS STUK
    IS. Hij scrolt, dus hij werkt, maar een half afgesneden naam leest als een
    fout. Gevonden op een schermafdruk. */
.wo-lijst.wo-kort { max-height: 214px; padding-bottom: 14px; }
.wo-li {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; width: 100%;
  border: none; border-bottom: 1px solid #F1ECFA; background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.wo-li:last-child { border-bottom: none; }
.wo-li:hover:not([disabled]) { background: #F7F3FC; }
.wo-li[disabled], .wo-li.stil { cursor: default; }
.wo-li:focus-visible { outline: 2px solid #E6296A; outline-offset: -2px; }
.wo-merk { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; margin-top: 7px;
  background: rgba(20,1,82,0.28); }
.wo-merk.let { background: #FF641A; }
.wo-tk { min-width: 0; flex: 1; }
.wo-t1 { display: block; font-size: 13.5px; font-weight: 700; color: #140152; line-height: 1.35; }
.wo-t2 { display: block; font-size: 12px; color: #7C7597; line-height: 1.4; }
.wo-rechts { font-size: 11.5px; color: #7C7597; font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-top: 2px; }
.wo-rechts.let { color: #FF641A; font-weight: 700; }
.wo-pijl { width: 13px; height: 13px; flex-shrink: 0; color: rgba(20,1,82,0.32); padding-top: 4px; }
.wo-pijl svg { width: 13px; height: 13px; }
.wo-meerregel { padding: 10px 8px 2px; font-size: 12px; color: #7C7597; }

/* ---------- wat er per cursusdag openstaat ---------- */
.wo-checks { padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 6px; }
.wo-check {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: #F7F3FC; font-size: 13px; color: #140152;
}
.wo-check .v { width: 17px; height: 17px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; }
.wo-check .v svg { width: 10px; height: 10px; }
.wo-check.open .v { background: #FF641A; color: #FFFFFF; }
.wo-check.klaar .v { background: #DDEBD9; color: #3F6A38; }
.wo-check .w { flex: 1; min-width: 0; font-weight: 700; }
.wo-check .g { font-size: 11.5px; color: #7C7597; font-weight: 400; }

/* ---------- de voet ---------- */
.wo-voet {
  padding: 12px 16px; border-top: 1px solid #E5DDF3; display: flex; gap: 8px;
  flex-shrink: 0; margin-top: auto;
}
.wo-b {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; border: 1px solid #E5DDF3; background: #FFFFFF; color: #140152;
  font: inherit; font-size: 13px; font-weight: 700; padding: 10px 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wo-b:hover { background: #F7F3FC; }
.wo-b.pri { background: #140152; border-color: #140152; color: #FFFFFF; }
.wo-b.pri:hover { background: #2E1A6B; }
.wo-b:focus-visible { outline: 2px solid #E6296A; outline-offset: 1px; }

/* ---------- instellen ---------- */
.wo-uitleg { padding: 14px 18px 4px; font-size: 13px; color: rgba(20,1,82,0.72); }
.wo-schakel {
  width: 34px; height: 20px; flex-shrink: 0; border-radius: 999px; margin-top: 1px;
  background: #E5DDF3; position: relative; transition: background .16s ease;
}
.wo-schakel::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 999px; background: #FFFFFF; transition: transform .16s ease;
  box-shadow: 0 1px 2px rgba(20,1,82,0.2);
}
.wo-schakel.aan { background: #140152; }
.wo-schakel.aan::after { transform: translateX(14px); }

/* ---------- leeg en stuk ---------- */
/*  ⭐⭐⭐ EEN LEGE LIJST MAG NOOIT LEZEN ALS "ER IS NIETS TE DOEN" wanneer er
    in werkelijkheid iets niet kon worden opgehaald. Vandaar dat een storing
    altijd in beeld komt, in plaats van stilletjes een lager getal. */
.wo-leeg { padding: 26px 18px 30px; text-align: center; font-size: 13px; color: #7C7597; }
.wo-leeg b { color: #140152; display: block; font-size: 15px; margin-bottom: 4px; }
.wo-storing { margin: 12px 10px 4px; padding: 10px 14px; border-radius: 10px;
  font-size: 12px; color: #8A3200; background: #FFE0BC; }

@media (max-width: 560px) {
  .wo-overlay { padding: 10px; }
  .wo-kaart { width: 100%; max-height: 90vh; }
}
@media (prefers-reduced-motion: reduce) {
  .wo-schakel, .wo-schakel::after { transition: none; }
}


/* --- Proefmelding sturen (venster onder het profielmenu) ------------- */
.pf-lijst { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pf-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--veld-bg);
}
.pf-wie { min-width: 0; }
.pf-wie strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.pf-wat { font-size: 12px; color: var(--grijs); margin-top: 2px; }
.pf-leeg { color: var(--rood); }
.pf-knop {
  flex: none; padding: 8px 14px; border: 0; border-radius: var(--radius);
  background: var(--terra); color: var(--wit); font-size: 13px; cursor: pointer;
}
.pf-knop:hover { background: var(--terra-donker); }

/* --- Pushmeldingen: wat wil je horen -------------------------------- */
.vk-let, .vk-goed {
  padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin: 12px 0;
}
.vk-let  { background: var(--rood-bg); border: 1px solid var(--rood-border); color: var(--bruin); }
.vk-goed { background: var(--salie-licht); border: 1px solid var(--salie); color: var(--bruin); }

.vk-kies { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.vk-kies label { font-size: 12px; color: var(--grijs); }
.vk-kies select {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--veld-bg); font-size: 13px; color: inherit;
}

.vk-lijst { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vk-groep { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.vk-kop {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 0; background: var(--veld-bg);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.vk-kop:hover { background: var(--creme-diep); }
.vk-wanneer { font-size: 12px; color: var(--grijs); margin-top: 2px; }
.vk-telling { flex: none; font-size: 12px; color: var(--grijs); display: flex; align-items: center; gap: 8px; }
.vk-pijl { font-size: 10px; color: var(--terra); }

.vk-punten { padding: 4px 14px 12px; background: var(--wit); }
.vk-punt { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.vk-punt:first-child { border-top: 0; }
.vk-tekst { min-width: 0; flex: 1; }
.vk-tekst strong { font-size: 14px; }
.vk-uitleg { font-size: 12px; color: var(--grijs); margin-top: 2px; }
.vk-dagen { font-size: 12px; color: var(--grijs); margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vk-dagen input {
  width: 62px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--veld-bg); font-size: 13px; color: inherit;
}
.vk-mailt {
  padding: 2px 8px; border-radius: 8px; background: var(--creme-diep);
  color: var(--terra-donker); font-size: 11px;
}

/* De schakelaar. Bewust groot genoeg voor een duim op een telefoon. */
.vk-schakel { flex: none; position: relative; width: 44px; height: 26px; cursor: pointer; }
.vk-schakel input { position: absolute; opacity: 0; width: 0; height: 0; }
.vk-schakel span {
  position: absolute; inset: 0; border-radius: 13px;
  background: var(--bruin-30); transition: background .18s;
}
.vk-schakel span::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--wit); transition: transform .18s;
  box-shadow: var(--schaduw);
}
.vk-schakel input:checked + span { background: var(--terra); }
.vk-schakel input:checked + span::before { transform: translateX(18px); }
.vk-schakel input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }

/* --- Het bezorgvenster per groep ------------------------------------ */
.vk-venster {
  padding: 12px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.vk-vlabel { font-size: 12px; color: var(--grijs); margin-bottom: 8px; }
.vk-keuzes { display: flex; gap: 6px; flex-wrap: wrap; }
.vk-keuze {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--wit); font: inherit; font-size: 13px; color: inherit; cursor: pointer;
}
.vk-keuze:hover { background: var(--veld-bg); }
.vk-keuze.aan { background: var(--terra); border-color: var(--terra); color: var(--wit); }

.vk-detail { margin-top: 10px; }
.vk-dagrij { display: flex; gap: 5px; flex-wrap: wrap; }
.vk-dag {
  position: relative; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--wit); font-size: 12px; cursor: pointer;
  color: var(--grijs); user-select: none;
}
.vk-dag input { position: absolute; opacity: 0; width: 0; height: 0; }
.vk-dag.aan { background: var(--perzik); border-color: var(--perzik-mid); color: var(--bruin); }
.vk-uren { margin-top: 10px; font-size: 12px; color: var(--grijs); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vk-uren input {
  width: 58px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--veld-bg); font-size: 13px; color: inherit;
}

/* ============================================================
   ⭐⭐⭐ DE SCHAKELAAR (1 september 2026)
   ============================================================
   Martijn wees een vorm aan die hij mooier vindt dan twee knoppen naast
   elkaar: een pil met een bolletje, het label ernaast en de stand eronder.

   ⭐⭐⭐ HIJ STAAT HIER EN NIET IN EEN SCHERM, want dit is de eerste van een
   soort en niet de laatste. De mailstand, de stille stand en elk filter dat
   je aan- of uitzet krijgen dezelfde vraag. Zie je dezelfde vorm twee keer,
   geef hem dan een naam en zet hem in het gedeelde bestand VOORDAT je de
   tweede plek bouwt; erna staan er twee die uit elkaar gaan lopen.

   ⭐⭐⭐ EEN SCHAKELAAR IS AAN OF UIT, EN DAT IS EEN EIS AAN DE TEKST.
   Twee gelijkwaardige standen ("Alles" naast "Openstaand") horen NIET in
   deze vorm: een bolletje links betekent dan niets. Het label moet een
   bewering zijn die waar of niet waar is. Dus "Alleen openstaand" en niet
   "Alles / openstaand".

   ⭐⭐ EN DE REGEL ERONDER ZEGT DE UITKOMST, niet de instelling. "2 van 2
   zichtbaar" is iets anders dan "aan", en het is het enige wat je wilt weten
   nadat je hem hebt omgezet.

   ⭐ DE KLEUR KOMT UIT `--terra`, het hoofdaccent van de organisatie. Bij
   Onderwijsdesk is dat het merkpaars, bij Opvoeddesk de terracotta. Zo hoeft
   geen enkel scherm hier een eigen kleur overheen te zetten.
   ============================================================ */
.schakel {
  display: inline-flex; align-items: center; gap: 11px;
  cursor: pointer; user-select: none; min-height: 36px;
}
/*  De echte checkbox blijft bestaan en blijft bedienbaar met het toetsenbord;
    hij is alleen niet te zien. `appearance:none` alleen is niet genoeg: in
    Safari houdt hij dan nog steeds ruimte. */
.schakel input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.sch-pil {
  position: relative; flex: none; width: 44px; height: 25px; border-radius: 999px;
  background: var(--border); transition: background .16s ease;
}
.sch-bol {
  position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--wit);
  box-shadow: 0 1px 3px rgba(0,0,0,.20);
  transition: transform .16s ease;
}
.schakel input:checked + .sch-pil { background: var(--terra); }
.schakel input:checked + .sch-pil .sch-bol { transform: translateX(19px); }
/*  ⭐ EEN ZICHTBARE FOCUSSTAAT, want de pil zelf is geen knop meer. Zonder
    deze regel is de schakelaar met het toetsenbord onvindbaar. */
.schakel input:focus-visible + .sch-pil {
  outline: 2px solid var(--terra); outline-offset: 3px;
}
.schakel:hover .sch-pil { background: var(--bruin-30); }
.schakel:hover input:checked + .sch-pil { background: var(--terra-donker); }

.sch-tekst { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sch-lab { font-size: 13px; font-weight: 600; color: var(--bruin); white-space: nowrap; }
.sch-sub { font-size: 11.5px; color: var(--grijs); white-space: nowrap; }

/*  ⭐ EEN SCHAKELAAR DIE NIETS KAN DOEN HOORT UIT TE STAAN en niet te wachten
    met een melding tot je erop drukt. */
.schakel.uitgezet { cursor: default; opacity: .5; }
.schakel.uitgezet:hover .sch-pil { background: var(--border); }

@media (prefers-reduced-motion: reduce) {
  .sch-pil, .sch-bol { transition: none; }
}