/* Kleurwaarden overgenomen uit brc-auth/templates_html.py (visuele
   continuïteit met het oude portaal) — daar stonden ze als losse hex-
   literalen; hier voor het eerst als echte custom properties. */
:root {
  --kleur-achtergrond: #f5f5f5;
  --kleur-tekst: #222;
  --kleur-nav-achtergrond: #1a1a1a;
  --kleur-merk: #f08030;
  --kleur-accent: #e06520;
  --kleur-kaart: #fff;
  --kleur-succes: #2e7d32;
  --kleur-succes-achtergrond: #e8f5e9;
  --kleur-fout: #b3261e;
  --kleur-fout-achtergrond: #fdecea;
  --kleur-waarschuwing: #ef6c00;
  --kleur-secundair: #607d8b;
  --schaduw-kaart: 0 1px 3px rgba(0, 0, 0, .12);
  --zijmenu-breedte: 240px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: sans-serif;
}

/* Layout ingelogd: links een zwart zijmenu, rechts de inhoud. Er is geen
   bovenbalk meer (die had alleen nog merk + naam/Uitloggen, en die staan nu
   boven- en onderaan het zijmenu zelf). Staging- en impersonatie-balk staan
   als volle-breedte regels boven .portaal-lijf.

   body.met-zijmenu is een kolom: eventuele balken (vaste hoogte) en
   .portaal-lijf (de rest, flex:1 — vult ook bij een korte pagina de hele
   resterende hoogte). Daarbinnen staan zijmenu en inhoud naast elkaar.

   Uitgelogd (body.zonder-zijmenu) blijft er een gewone .topbar met merk +
   Inloggen over de volle breedte. */
body.met-zijmenu {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  background: var(--kleur-nav-achtergrond);
  padding: 0 1rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}

.portaal-lijf {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  position: relative;
}

.topbar .merk,
.mobiel-kop .merk {
  color: var(--kleur-merk);
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
}

.topbar .merk:hover {
  color: var(--kleur-accent);
}

/* "Naar inhoud": buiten beeld tot het focus krijgt (eerste Tab op de
   pagina), dan linksboven over alles heen. */
.naar-inhoud {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--kleur-merk);
  color: var(--kleur-nav-achtergrond);
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
}

.naar-inhoud:focus {
  top: 0.5rem;
}

/* De sprong van "Naar inhoud" geeft <main tabindex="-1"> focus; dat hoeft
   geen zichtbare ring te krijgen (het is geen bedienbaar element). */
.inhoud:focus {
  outline: none;
}

.schermlezer-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Portaalbreed zichtbare focusring (#123 se toegankelijkheidseis voor het
   maandraster, maar geldt net zo goed overal elders — er was nog geen
   eigen :focus-visible-stijl, dus de browserdefault deed dienst). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kleur-merk);
  outline-offset: 2px;
}

.topbar-rechts {
  color: #ccc;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.topbar-rechts a {
  color: var(--kleur-merk);
}

/* Balk met "Bekijkt als …" + Stoppen, direct boven de inhoud — op elke
   schermbreedte (er is geen bovenbalk meer waar dit op desktop in stond). */
.impersonatie-balk {
  display: flex;
  background: var(--kleur-nav-achtergrond);
  color: #ccc;
  padding: 0.4rem 1rem;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Portaalbreed op staging (config.staging_mode), ook zonder sessie — zie
   base.html voor waarom (CSV-exports zijn qua bestandsformaat niet van
   echte AllUnited-data te onderscheiden). Altijd zichtbaar: dit moet nooit
   per ongeluk uit het zicht verdwijnen. */
.staging-balk {
  background: var(--kleur-waarschuwing);
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 0.4rem 1rem;
}

/* Eigen knopstijl i.p.v. .link-knop: die is bedoeld als kleine inline
   tekstlink met padding:0, hier is juist een ruim tikvlak nodig (≥44px,
   zie #129). */
.impersonatie-stop-knop {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  color: var(--kleur-merk);
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.impersonatie-stop-knop:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Kop voor smalle schermen (merk + account), zie de media query onderaan
   dit bestand. Op desktop staat het merk bovenin het zijmenu. */
.mobiel-kop {
  display: none;
}

/* Ronde initialen (zijmenu-voet en de mobiele kop). */
.avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3a3632;
  color: var(--kleur-merk);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
}

.icoon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

/* Zijmenu: zwart, staat links van de inhoud zolang er iemand is ingelogd —
   óók tijdens impersonatie: base.html rendert dit blok bij `ingelogd_account`,
   ongeacht `impersoneert`. Alleen items waar de ingelogde (tijdens
   impersonatie: geïmpersoneerde) gebruiker rol-technisch bij mag komen
   worden gerenderd (per blueprint z'n eigen `*_zichtbaar`/`is_beheerder`
   context-processor); er zit hier geen aparte permissiecheck in het
   template.

   Sticky en schermhoog: bij een lange pagina scrolt de inhoud, het menu
   (met naam/Uitloggen onderaan) blijft staan. Past het menu zelf niet (veel
   submenu's open op een laag scherm), dan scrolt het zijmenu los. */
.zijmenu {
  background: var(--kleur-nav-achtergrond);
  color: #d9d5d0;
  flex: 0 0 var(--zijmenu-breedte);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0.75rem 0.75rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.zijmenu-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.zijmenu-merk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--kleur-merk);
  font-weight: bold;
  font-size: 1.15rem;
  text-decoration: none;
}

.zijmenu-schild {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--kleur-merk);
  color: var(--kleur-nav-achtergrond);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Sluitknop hoort alleen bij de mobiele lade. */
.zijmenu-sluiten {
  display: none;
}

.zijmenu-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

/* Groepskopje ("Club", "Beheer", …). Een <p> en geen <h2>: het zijmenu
   staat vóór <main> in de bron, en een kopje hier zou de koppenvolgorde
   van elke pagina (h1 in de inhoud) verstoren. De lijst eronder verwijst
   ernaar met aria-labelledby. */
.zijmenu-sectiekop {
  margin: 0 0 0.35rem;
  padding: 0 0.6rem;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a847e;
}

/* Eén regel in het menu: icoon + label, ≥38px hoog (44px op mobiel). Ook
   de <summary> van een menugroep gebruikt deze klasse, zodat beide er
   hetzelfde uitzien. */
.zijmenu-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 38px;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  color: #d9d5d0;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.zijmenu-link:hover {
  background: #242220;
  color: #fff;
}

/* Teller achter een menu-item (bv. Feedback: aantal nieuwe meldingen); alleen
   getoond als het aantal > 0. */
.zijmenu-teller {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--kleur-merk);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}

/* Actief: lichtere achtergrond + oranje streep links + vet — bewust meer
   dan alleen een andere kleur (herkenbaar voor kleurenblinden). */
.zijmenu-link[aria-current="page"] {
  background: #2d2a27;
  color: #fff;
  font-weight: bold;
  box-shadow: inset 3px 0 0 var(--kleur-merk);
}

.zijmenu-link[aria-current="page"] .icoon,
.zijmenu-link.actief .icoon {
  color: var(--kleur-merk);
}

.zijmenu-link.actief {
  color: #fff;
  font-weight: bold;
}

/* <summary> als menuregel: eigen pijltje (rechts, draait bij openklappen)
   i.p.v. het browserdriehoekje. */
.zijmenu-groep > summary {
  list-style: none;
}

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

.zijmenu-groep > summary::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.6;
  transition: transform 0.15s;
}

.zijmenu-groep[open] > summary::after {
  transform: rotate(45deg);
}

/* Submenu: ingesprongen onder het icoon, met een dunne lijn links. */
.submenu {
  list-style: none;
  margin: 0.15rem 0 0.4rem 1.55rem;
  padding: 0 0 0 0.6rem;
  border-left: 1px solid #34312e;
  display: grid;
  gap: 1px;
}

.submenu a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #b3aca5;
  text-decoration: none;
}

.submenu a:hover {
  color: #fff;
  background: #242220;
}

.submenu a[aria-current="page"] {
  color: var(--kleur-merk);
  font-weight: bold;
}

/* Naam (link naar Mijn account) + Uitloggen, onderaan het zijmenu. */
.zijmenu-gebruiker {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #2d2a27;
  display: grid;
  gap: 2px;
}

.zijmenu-persoon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  color: #d9d5d0;
  text-decoration: none;
}

.zijmenu-persoon:hover,
.zijmenu-persoon[aria-current="page"] {
  background: #242220;
  color: #fff;
}

.zijmenu-persoon .ingelogde-gebruiker {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.zijmenu-persoon small {
  color: #8a847e;
  font-size: 0.78rem;
  font-weight: normal;
}

.zijmenu-gebruiker .inline-form {
  display: block;
}

/* Knop met dezelfde vorm als een menuregel; ≥44px tikvlak (#129). */
.zijmenu-uitloggen-knop {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.6rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: #d9d5d0;
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.zijmenu-uitloggen-knop:hover {
  color: #fff;
  background: #242220;
}

/* Onderbalk: alleen op smalle schermen, zie de media query onderaan. */
.onderbalk {
  display: none;
}

.inline-form {
  display: inline;
}

.link-knop {
  background: none;
  border: none;
  padding: 0;
  color: var(--kleur-merk);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

/* Verwijderen-knop op de gebruikerspagina — een destructieve actie hoort
   er anders uit te zien dan de rest (activeren/deactiveren/impersoneren). */
.link-knop-gevaar {
  color: var(--kleur-fout);
}

.inhoud {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

body.met-zijmenu .inhoud {
  flex: 1 1 0;
  min-width: 0;
}

.kaart {
  background: var(--kleur-kaart);
  border-radius: 6px;
  box-shadow: var(--schaduw-kaart);
  padding: 1rem;
}

.kaart-smal {
  max-width: 360px;
  margin: 0 auto;
}

/* Door python-markdown's "toc"-extensie gegenereerde inhoudsopgave (een
   `[TOC]`-marker in een handleiding-.md-bestand) — alleen in
   .handleiding-inhoud (auth/rooster/planning-documentatie), nergens anders
   in de app gebruikt. */
.handleiding-inhoud .toc {
  background: #f7f7f7;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.handleiding-inhoud .toc ul {
  margin: 0;
  padding-left: 1.25rem;
}

.kaart-smal form label {
  display: block;
  margin-bottom: 0.75rem;
}

.kaart-smal form input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.kaart-smal form button {
  background: var(--kleur-merk);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1rem;
  cursor: pointer;
}

.kaart-smal form button:hover {
  background: var(--kleur-accent);
}

.meldingen {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.melding {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.melding-fout {
  background: var(--kleur-fout-achtergrond);
  color: var(--kleur-fout);
}

.melding-succes {
  background: var(--kleur-succes-achtergrond);
  color: var(--kleur-succes);
}

.melding-info {
  background: #e3f2fd;
  color: #1565c0;
}

.impersonatie-banner {
  background: var(--kleur-waarschuwing);
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: bold;
}

/* docs/archief/impersonatie-schrijfacties-plan.md stap 5: sinds rooster's ledenkant
   tijdens impersonatie schrijfbaar is (stap 4), moet er hier meteen bij
   staan dat het niet langer alleen-lezen is — anders denkt een beheerder
   dat nog steeds. Bewust een losse, kleinere tekst i.p.v. in de
   .impersonatie-banner-pil zelf: die pil blijft de identiteit tonen. */
.impersonatie-schrijf-hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

.kaart + .kaart {
  margin-top: 1rem;
}

/* Uitnodigformulier (gebruikerspagina): zichtbare labels, naam vóór e-mail
   (een naamsuggestie kiezen vult het e-mailveld in). Velden naast elkaar
   zolang ze passen, anders onder elkaar. */
.uitnodig-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.uitnodig-form > div {
  flex: 1 1 14rem;
  min-width: 0;
}

.uitnodig-form label {
  display: block;
}

.uitnodig-form input[type="text"],
.uitnodig-form input[type="email"] {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* De suggestielijst zweeft over het formulier: in de flow duwde hij het
   e-mailveld en de knop omlaag zodra hij verscheen. */
.uitnodig-form .zoekresultaten-lijst {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: var(--schaduw-kaart);
}

.tabel-scroll {
  overflow-x: auto;
}

.tabel {
  width: 100%;
  border-collapse: collapse;
}

.tabel th,
.tabel td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

/* Gebruikerspagina: de Rollen-kolom (4 rol-knoppen per rij) hoeft niet op
   één regel te passen — met .tabel td's algemene white-space:nowrap erbij
   werd de hele tabel breder dan .inhoud (max-width 960px) en moest je
   binnen .tabel-scroll opzijschuiven om de laatste rol/Impersoneer-link te
   zien. Laat deze ene kolom gewoon wrappen, dan past de rij weer. */
.tabel td.tabel-cel-rollen {
  white-space: normal;
}

/* Zelfde reden als tabel-cel-rollen hierboven: de Acties-kolom (impersoneren/
   activeren-deactiveren/wachtwoord/verwijderen) hoeft ook niet op één regel
   te passen. */
.tabel td.tabel-cel-acties {
  white-space: normal;
}

/* Teamledenlijst (personen/team_detail.html): op een smal scherm wordt elke
   rij een eigen blokje met de naam vetgedrukt en daaronder de kolomnaam
   (data-label) voor elke waarde — zo past een rij met e-mail, telefoon en
   geboortedatum op een telefoon zonder opzij te scrollen. Lege cellen
   verdwijnen daar, zodat er geen losse "E-mail:" zonder adres staat. */
.ledenlijst-velden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1rem;
}

@media (max-width: 720px) {
  .tabel-stapel thead {
    display: none;
  }

  .tabel-stapel,
  .tabel-stapel tbody,
  .tabel-stapel tr,
  .tabel-stapel td {
    display: block;
    width: 100%;
  }

  .tabel-stapel tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
  }

  .tabel-stapel td {
    padding: 0.1rem 0;
    border-bottom: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tabel-stapel td[data-label]::before {
    content: attr(data-label) ": ";
    color: #666;
  }

  .tabel-stapel td.tabel-stapel-kop {
    font-weight: 600;
  }

  .tabel-stapel td:empty {
    display: none;
  }

  /* Tikbaar: een telefoonnummer of adres moet je met een duim kunnen raken. */
  .tabel-stapel td a {
    display: inline-block;
    padding: 0.25rem 0;
  }
}

/* Klikbare kolomkoppen, zie portaal.js::koppelSorteerbareTabel. De pijl komt
   uit aria-sort (dat JS ook al zet voor screenreaders) i.p.v. een losse
   klasse, zodat opmaak en toegankelijkheidsstatus niet uit elkaar kunnen
   lopen. */
.th-sorteerbaar {
  cursor: pointer;
  user-select: none;
}

.th-sorteerbaar::after {
  display: inline-block;
  width: 1em;
  margin-left: 0.25rem;
  color: #999;
  content: '\2195';
}

.th-sorteerbaar[aria-sort="ascending"]::after {
  color: inherit;
  content: '\2191';
}

.th-sorteerbaar[aria-sort="descending"]::after {
  color: inherit;
  content: '\2193';
}

.tabel-cel-acties .inline-form,
.tabel-cel-acties .wachtwoord-zetten {
  display: inline-block;
  margin: 0.1rem 0.4rem 0.1rem 0;
}

/* <details>-uitklapper voor het wachtwoord-zetten-formulier op de
   gebruikerspagina — dicht staat het gewoon een link, net als de andere
   acties in deze kolom. */
.wachtwoord-zetten > summary {
  color: var(--kleur-merk);
  text-decoration: underline;
  cursor: pointer;
}

.wachtwoord-zetten .formulier {
  margin-top: 0.5rem;
  min-width: 220px;
}

.rol-knop {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  margin: 0.1rem;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.rol-knop.rol-actief {
  background: var(--kleur-merk);
  color: #fff;
  border-color: var(--kleur-merk);
}

/* Gebruikerspagina: aan/uit-stand ook zonder kleur te lezen (aria-pressed
   staat in het template). */
.rol-knop.rol-actief::before {
  content: "\2713  ";
}

/* Gebruikerslijst: een tabel zolang de lijst er breed genoeg voor is,
   anders een kaart per gebruiker. Een container query en geen media query,
   omdat de zijbalk vanaf 721px ruimte inneemt: de schermbreedte zegt dan
   niet hoeveel plek de tabel heeft. Alles is gescoped op de gebruikers-
   klassen, want .tabel-cel-acties wordt ook door rooster/soorten.html
   gebruikt. */
.gebruikers-lijst {
  container: gebruikers / inline-size;
}

/* Vaste kolombreedtes, op maat van twee rolknoppen per regel (ook met een
   vinkje ervoor) en de acties in twee rijen van twee; Gebruiker krijgt de
   rest. Vast, zodat een opengeklapt wachtwoordformulier de kolommen niet
   laat verspringen. Alleen met container queries: zonder de kaartweergave
   zou Gebruiker op een smal scherm tot niets krimpen, en dan is gewoon
   opzij scrollen in .tabel-scroll beter. Het e-mailadres breekt af in
   plaats van afgekapt te worden: op een touchscherm is een title niet te
   lezen. */
@supports (container-type: inline-size) {
  .gebruikers-tabel {
    table-layout: fixed;
  }

  .gebruikers-tabel .gebruiker-k-status {
    width: 7.5rem;
  }

  .gebruikers-tabel .gebruiker-k-rollen {
    width: 19rem;
  }

  .gebruikers-tabel .gebruiker-k-acties {
    width: 16rem;
  }

  .gebruiker-c-naam small {
    overflow-wrap: anywhere;
  }
}

.gebruikers-tabel td {
  vertical-align: top;
  white-space: normal;
}

.gebruiker-c-naam small {
  display: block;
  color: #666;
}

/* De globale .pil heeft een linkermarge voor pillen naast tekst; hier
   zou een typepil die onder de naam doorloopt daardoor inspringen. */
.gebruikers-tabel .pil {
  margin-left: 0;
}

.gebruiker-acties {
  display: grid;
  /* Vaste eerste kolom, breder dan "Wachtwoord…" met zijn driehoekje: zo
     staat de tweede kolom op elke rij op dezelfde plek en houdt het raster
     speling binnen de Acties-kolom. */
  grid-template-columns: 8rem auto;
  justify-content: start;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.gebruiker-acties .inline-form,
.gebruiker-acties .wachtwoord-zetten {
  margin: 0;
}

/* Wachtwoord… altijd in de eerste kolom: op de eigen rij ontbreekt
   Deactiveren en zou hij anders in de smallere tweede kolom vallen. */
.gebruiker-acties .wachtwoord-zetten {
  grid-column: 1;
}

/* Het opengeklapte wachtwoordformulier krijgt een eigen regel, en zijn
   min-width (voor de losse actiekolom elders) mag de kolom niet oprekken. */
.gebruiker-acties .wachtwoord-zetten[open] {
  grid-column: 1 / -1;
}

.gebruiker-acties .wachtwoord-zetten .formulier {
  min-width: 0;
}

@media (max-width: 720px) {
  .uitnodig-form > div,
  .uitnodig-form button {
    flex-basis: 100%;
  }

  .uitnodig-form input[type="text"],
  .uitnodig-form input[type="email"],
  .uitnodig-form button {
    min-height: 44px;
  }

  .uitnodig-form .zoekresultaat {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .gebruikers-filter label,
  .gebruikers-filter select {
    width: 100%;
  }

  .gebruikers-filter select {
    min-height: 44px;
  }
}

/* Kaartweergave (zelfde patroon als .fb-tabel in feedback-beheer.css):
   naam + status bovenaan, dan rollen, dan acties. De drempel is de breedte
   die de vaste kolommen hierboven plus een leesbare Gebruiker-kolom nodig
   hebben. */
@container gebruikers (max-width: 53rem) {
  .gebruikers-tabel,
  .gebruikers-tabel tbody {
    display: block;
  }

  .gebruikers-tabel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .gebruiker-rij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "naam status"
      "rollen rollen"
      "acties acties";
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }

  .gebruiker-rij td {
    display: block;
    padding: 0;
    border: 0;
  }

  .gebruiker-rij .gebruiker-c-naam { grid-area: naam; }
  .gebruiker-rij .gebruiker-c-status { grid-area: status; }
  .gebruiker-rij .tabel-cel-rollen { grid-area: rollen; }
  .gebruiker-rij .tabel-cel-acties { grid-area: acties; }

  .gebruiker-rij td.tabel-cel-rollen::before {
    content: "Rollen";
    display: block;
    font-size: 0.8rem;
    color: #666;
  }

  .gebruiker-rij .rol-knop {
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.9rem;
  }

  .gebruiker-acties {
    display: flex;
    flex-wrap: wrap;
  }

  .gebruiker-acties .wachtwoord-zetten[open] {
    flex-basis: 100%;
  }

  .gebruiker-acties .link-knop,
  .gebruiker-acties .wachtwoord-zetten > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Verwijderen los van de andere acties, tegen misklikken. */
  .gebruiker-acties .gebruiker-actie-verwijderen {
    margin-left: auto;
  }

  .gebruiker-acties .wachtwoord-zetten input,
  .gebruiker-acties .wachtwoord-zetten .formulier button {
    min-height: 44px;
  }
}

/* Teams/personen (PR-6) — algemene knop-/kaart-uitbreidingen op de
   bestaande stijlbasis hierboven, niet alleen voor deze module. */
.hint {
  color: #666;
  font-size: 0.9rem;
}

.pil {
  display: inline-block;
  background: #eee;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  margin-left: 0.3rem;
}

.knop {
  display: inline-block;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  color: var(--kleur-tekst);
}

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

.knop-primair:hover {
  background: var(--kleur-accent);
}

.knop-gevaar {
  background: var(--kleur-fout);
  border-color: var(--kleur-fout);
  color: #fff;
}

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

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.tegel {
  display: block;
  background: var(--kleur-kaart);
  border-radius: 6px;
  box-shadow: var(--schaduw-kaart);
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--kleur-tekst);
}

.tegel b {
  display: block;
}

.formulier label {
  display: block;
  margin-bottom: 0.75rem;
}

.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="password"],
.formulier input[type="number"],
.formulier input[type="date"],
.formulier input[type="datetime-local"],
.formulier select,
.formulier textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Een <textarea> is van zichzelf inline-block, niet block (anders dan
   <input>) — zonder de regel hierboven bleef 'm dus naast z'n eigen
   <label>-tekst staan i.p.v. eronder, zodra de tekst+textarea samen niet
   breed genoeg waren om te forceren wrappen (event_form.html's
   Omschrijving-veld, browsercheck fix-ronde: gold al vóór deze fix-ronde
   voor élk .formulier-textarea in de repo, nooit eerder opgemerkt). */
.formulier textarea {
  font: inherit;
  resize: vertical;
}

/* .formulier-inline (portaalbreed, o.a. agenda.html/wedstrijden/audit-
   pagina's): een klein filter-/zoekformulier op één regel i.p.v. de
   .formulier-default van gestapelde, volle-breedte velden hierboven — de
   klasse bestond al in negen templates maar had nog geen eigen CSS (#123
   fix-ronde: de agenda se Team-select viel daardoor terug op
   .formulier select's width:100%, altijd de volle breedte). */
.formulier-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.formulier-inline label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
}

/* .formulier-inline wordt op acht pagina's gebruikt (agenda, audit,
   rooster, wedstrijden, vakantie, agenda_teams, #123 fix-ronde punt 13) —
   nowrap-labels zijn prima op desktop (voorkomt een label dat lelijk breekt
   na één woord), maar op smalle schermen (~400px) laat diezelfde nowrap een
   label als "Zoek in de agenda" of "Duur (min.)" naast een volle-breedte
   veld zonder wrap-ruimte overlopen. Alleen boven 720px aanzetten. */
@media (min-width: 721px) {
  .formulier-inline label {
    white-space: nowrap;
  }
}

.formulier-inline input[type="text"],
.formulier-inline input[type="email"],
.formulier-inline input[type="number"],
.formulier-inline select {
  display: inline-block;
  width: auto;
  margin-top: 0;
  font-size: 1rem;
}

/* Portaalbreed: een [hidden]-element hoort altijd verborgen te zijn, ook als
   een class op datzelfde element display:flex/grid/... zet — zonder deze
   regel wint zo'n class puur op brontekst-volgorde (zelfde specificiteit als
   de UA-stylesheet se [hidden]{display:none}), wat de hele-dag-toggle in
   event_form.html kapotmaakte: .formulier-rij{display:flex} verborg het
   [hidden]-attribuut niet meer (#123 fix-ronde). Gecontroleerd dat dit
   verder nergens anders een element zichtbaar hoort te laten dat bewust
   hidden gezet is (grep op `hidden` in templates/) — overal is het doel
   steeds "helemaal weg", nooit "weg maar nog steeds flex/grid".
   !important is hier bewust: [hidden] moet win­nen van ELKE toekomstige
   display-override, niet afhankelijk zijn van de specificiteit-wedstrijd. */
[hidden] {
  display: none !important;
}

.tabbladen {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tabblad {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--kleur-tekst);
  border-bottom: 3px solid transparent;
}

.tabblad-actief {
  border-bottom-color: var(--kleur-merk);
  font-weight: bold;
}

.zoekresultaten {
  position: relative;
}

.zoekresultaten-lijst {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 0.25rem;
}

.zoekresultaat {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.zoekresultaat:hover {
  background: #f5f5f5;
}

/* .alleen-mobiel/.alleen-desktop (agenda-maandraster, #123): moeten ook
   BUITEN de media query hieronder een default hebben — zonder deze regel
   stond .alleen-mobiel's mobiele dagenlijst altijd (ook op desktop) gewoon
   te renderen, want er was nergens een niet-mobiele regel die 'm verborg
   (fix-ronde). .alleen-desktop hoeft geen desktop-default: block/inline is
   toch al de normale weergave van een niet eerder verborgen element.
   !important op alle vier de regels hier (en hieronder in de media query):
   deze twee klassen worden op elementen gezet die ZELF ook een
   component-klasse met een eigen `display` hebben (bv.
   .maandraster-dagnummer.alleen-mobiel/.alleen-desktop, allebei
   specificiteit 0,1,0) — zonder !important wint puur de brontekst-volgorde
   in het bestand, niet de bedoeling van de utility-klasse (browsercheck
   fix-ronde: beide dagnummer-varianten stonden zo tegelijk zichtbaar). */
.alleen-mobiel {
  display: none !important;
}

@media (max-width: 720px) {
  .inhoud {
    padding: 1rem;
  }

  /* #109: op dit breakpoint krijgen zijmenu en inhoud elk hun eigen
     volle-breedte regel (zie .zijmenu hieronder, dat hier position:fixed
     wordt en dus feitelijk uit de flex-flow van .portaal-lijf valt) —
     zonder deze override verdeelt align-content:stretch (de flexbox-
     default, zie de basisregel van .portaal-lijf hierboven) de resterende
     ruimte gelijk over de regels, met een lege zwarte lap onderaan tot
     gevolg. Alleen hier zetten i.p.v. in een losse "vanaf 721px"-query
     voorkomt een gat bij fractionele breedtes (bv. 720.5px, #129). */
  .portaal-lijf {
    align-content: flex-start;
  }

  /* Kop met merk + account, want het zijmenu is hier een lade. */
  .mobiel-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--kleur-nav-achtergrond);
    padding: 0.5rem 1rem;
    min-height: 3rem;
  }

  /* Zijmenu = lade van links, standaard dicht. Openen gebeurt via "Meer"
     in de onderbalk: portaal.js zet .zijmenu-open, zonder JS doet
     :target (de link wijst naar #zijmenu) hetzelfde. */
  .zijmenu {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 320px);
    height: auto;
    z-index: 30;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.35);
  }

  .zijmenu.zijmenu-open,
  .zijmenu:target {
    display: flex;
  }

  /* Donkere laag over de pagina zolang de lade open is; tikken erop sluit
     (portaal.js). */
  body.zijmenu-is-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.4);
  }

  /* Pagina erachter scrolt niet mee zolang de lade open is; scrollen
     gebeurt in de lade zelf, en bereikt die zijn einde dan scrollt de
     pagina niet alsnog door (overscroll-behavior). */
  body.zijmenu-is-open {
    overflow: hidden;
  }

  .zijmenu {
    overscroll-behavior: contain;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* bottom:0 reikt op mobiel tot achter de browserbalk, waardoor de
       onderste menu-items onbereikbaar zijn; dvh volgt de zichtbare
       viewport (vh als terugval voor oudere browsers). */
    bottom: auto;
    height: 100vh;
    height: 100dvh;
  }

  /* Niet laten krimpen: anders wordt de lade nooit hoger dan het scherm
     en valt er niets te scrollen. */
  .zijmenu > * {
    flex-shrink: 0;
  }

  .zijmenu-sluiten {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -0.5rem;
    color: #d9d5d0;
    border-radius: 8px;
  }

  .zijmenu-sluiten .icoon {
    width: 22px;
    height: 22px;
  }

  .zijmenu-link,
  .zijmenu-persoon {
    min-height: 44px;
  }

  .submenu a {
    min-height: 40px;
  }

  body.met-zijmenu .inhoud {
    flex-basis: 100%;
    /* Ruimte voor de vaste onderbalk, zodat de laatste regel van een
       pagina er niet achter verdwijnt. */
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Onderbalk: vast onderaan, gelijke vakken van ≥48px hoog — meestal
     vijf, minder als er modules uit staan (MODULES_AAN). */
  .onderbalk {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: #fff;
    border-top: 1px solid #e3e0dc;
    padding: 0.25rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
  }

  .onderbalk a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    color: #6b6560;
    font-size: 0.7rem;
    text-decoration: none;
  }

  .onderbalk .icoon {
    width: 22px;
    height: 22px;
  }

  .onderbalk a[aria-current="page"] {
    color: var(--kleur-accent);
    font-weight: bold;
  }

  /* Agenda-maandraster (#123): op mobiel geen hover (dus geen .dag-nieuw,
     geen items-lijst in de cel zelf — die zijn te druk voor een tikvlak van
     ~49px breed op 375px), wel een compact raster (dagnummer + max. 3
     stippen) met een volledige dagenlijst eronder. */
  .alleen-desktop {
    display: none !important;
  }

  .alleen-mobiel {
    display: block !important;
  }

  /* !important nodig (#123 mobiel fix-ronde): zonder wint de generieke
     `.alleen-mobiel{display:block!important}` hierboven alsnog — !important
     verslaat specificiteit, dus een simpele extra klasse zonder !important
     kwam hier nooit doorheen. Gevolg was dat de stippenrij als `display:
     block` rendere (een <svg> is default inline, dus met de normale
     regelhoogte van de cel erbij — dat verklaarde de te hoge rastercel:
     ~14px extra in plaats van de ~6-8px van een echte flex-rij stippen). */
  .maandraster-stippen.alleen-mobiel {
    display: flex !important;
  }

  .maandraster th,
  .maandraster td {
    padding: 0.25rem;
    font-size: 0.75rem;
  }

  /* Zelfde height-i.p.v.-min-height-reden als punt 1 hierboven — min-height
     wordt door table-cells genegeerd. `height: 52px` i.p.v. de eerdere
     2.75rem/44px (#123 mobiel fix-ronde): 44px was nog te krap zodra het
     dagnummer zelf al 32px hoog is plus de stippenregel eronder, en de
     desktop-regel (7.75rem/124px) mag hier sowieso nooit doorheen lekken —
     vandaar de expliciete override met een selector die specifieker is dan
     ".maandraster th, .maandraster td" hierboven (anders wint de
     kleine `padding: 0.25rem` daar alsnog van een kale `.maandraster-dag`,
     zelfde specificiteit-som maar element+klasse tegen klasse+element).
     `padding: 4px 0` (niet links/rechts, dat doet de flex-kolom hieronder
     al met align-items:center) i.p.v. de generieke 0.25rem rondom. */
  .maandraster td.maandraster-dag {
    height: 52px;
    padding: 4px 0;
  }

  /* Inhoud van de mobiele rastercel (dagnummer + stippen) als gecentreerde
     kolom (#123 mobiel fix-ronde) — dagnummer boven, stippen eronder,
     beide horizontaal gecentreerd. Vervangt de eerdere aanpak waarbij
     dagnummer/stippen los in de <td> stonden en puur op de blokstroom
     leunden (die stapelde wel verticaal, maar centreerde niets horizontaal
     — met de smalle ~50px-cel zag het dagnummer er daardoor scheef/tegen de
     celrand uit i.p.v. in het midden). Op desktop geen eigen CSS voor deze
     klasse nodig: buiten deze media query blijft het een gewone <div> in de
     normale blokstroom, geen visueel verschil (alleen de desktop-
     dagnummer-span is daar zichtbaar). */
  .maandraster-dag-cel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  /* Elk dagnummer op mobiel een vaste 32×32px cirkel (#123 polish-ronde,
     punt 10, mockup) — de gedeelde .maandraster-dagnummer-basisstijl
     hierboven (min-width 1.5rem + padding 0 0.3rem, de desktop-pilvorm)
     rekt bij mobiele tweecijferige dagnummers uit tot een ovaal i.p.v. een
     cirkel, en de hoogte (1.5rem/24px) is te klein voor het mockup-
     tikvlak. Overschrijft bewust breedte/hoogte/min-width/padding/radius/
     font-size EXPLICIET (niet enkel breedte/hoogte) zodat de desktop-
     pilvorm (min-width 1.5rem + padding 0 0.3rem) hier nooit doorheen kan
     lekken — alleen achtergrond/kleur blijven aan .vandaag/.standaard
     hieronder. */
  /* `display: inline-flex !important` (#123 vandaag-cirkel-fix): zonder
     !important wint de generieke `.alleen-mobiel{display:block!important}`
     hierboven alsnog — zelfde reden als de stippenrij (punt 653-655
     hierboven) en punt 851-856 verderop, hier eerder gemist. Gevolg was dat
     dit element als `display:block` rendere i.p.v. inline-flex: de
     align-items/justify-content-centrering deed dan niets (die vereisen een
     flex-container), dus stond het dagnummer gewoon linksboven in de 32×32
     box i.p.v. gecentreerd in de cirkel erachter. */
  .maandraster-dagnummer.alleen-mobiel {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
  }

  /* Gekozen dag (#123 polish-ronde, punt 11): zwarte ring om het
     dagnummer van de dag die zonder url-fragment standaard in de
     dagenlijst hieronder opengeklapt staat (routes.py::
     _markeer_standaard_dag(), template zet daarvoor de .standaard-klasse
     op dezelfde <td> als hierboven). `:not(.vandaag)` voorkomt dat de ring
     de oranje "vandaag"-pil overtekent op de (meest voorkomende) dag dat
     de standaarddag ook gewoon vandaag is.

     Beperking: dit werkt ALLEEN voor de server-berekende standaarddag, niet
     voor een dag die via #dag-... in de URL is aangeklikt (:target) — CSS
     kan deze mobiele-raster-<td> niet aan een verderop in de DOM staande
     #dag-...:target-sectie knopen zonder voor ÉLKE dag in de maand een
     eigen CSS-regel te genereren (er bestaat geen attr()-vergelijking in
     selectors, en twee elementen dezelfde id geven is ongeldig/onbetrouw-
     baar). Dat kan alleen met JS, wat hier bewust niet wordt ingezet. */
  .maandraster-dag.standaard:not(.vandaag) .maandraster-dagnummer.alleen-mobiel {
    box-shadow: inset 0 0 0 2px #1a1a1a;
    font-weight: bold;
  }

  /* Dubbele kop (#123 polish-ronde, punt 8): de H1 "Agenda — september
     2026" is op mobiel dubbelop met de zichtbare "September 2026"-kop
     hieronder — dezelfde "clip"-truc als .schermlezer-only (portaal.css
     bovenin), maar SCOPED tot deze media query/pagina i.p.v. portaalbreed. */
  .agenda-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  /* Filterrij (#123 polish-ronde, punt 15, mockup): schakelaar (Maand|
     Lijst) en team-select naast elkaar op één rij. De twee wrapper-divs
     (.agenda-filterbalk-links/-rechts) bestaan alleen om op DESKTOP twee
     losse groepen te vormen (mockup Main.dc.html) — op mobiel worden ze
     met display:contents "platgeslagen" zodat hun kinderen rechtstreeks
     als flex-items van de buitenste .agenda-filterbalk meedoen. De
     brontekstvolgorde (←, maand-blok, →, schakelaar, team-select,
     +Nieuw-item) blijft daarbij gewoon staan, dus geen `order` nodig: de
     ←/maand-blok/→-drie-eenheid vult regel 1, schakelaar+team-select
     wikkelen vanzelf door naar regel 2 (Mobiel.dc.html-mockup).

     `div.` ervoor is bewust (#123 mobiel fix-ronde, punt 3-bugfix): zonder
     die extra elementselector heeft deze regel dezelfde specificiteit
     (0,1,0) als de portaalbrede `.agenda-filterbalk-links,
     .agenda-filterbalk-rechts { display:flex; ... }` verderop in dit
     bestand (buiten elke media query, dus geldt hij altijd) — en die staat
     LATER in het bestand, dus wint hij bij een specificiteitsgelijkspel
     altijd, media query of niet. Gevolg (browsercheck, dit was de eerdere
     mislukte poging): `display:contents` kwam op mobiel nooit verder dan
     hier, de twee wrapper-divs bleven gewoon `display:flex` en schakelaar/
     team-select stonden daardoor nooit als losse flex-items in de
     buitenste .agenda-filterbalk, dus nooit op dezelfde regel. */
  div.agenda-filterbalk-links,
  div.agenda-filterbalk-rechts {
    display: contents;
  }

  /* Schakelaar+team-select op één rij (#123 mobiel fix-ronde, punt 3): de
     schakelaar houdt zijn natuurlijke breedte (flex-shrink:0 — mag nooit
     krimpen ten koste van leesbaarheid van "Maand"/"Lijst"), de team-select
     vult de rest van de rij (flex:1 1 auto, min-width:0 zodat een lange
     teamnaam 'm niet breder dan de rij kan duwen). Beide zijn gewone
     flex-items van de buitenste .agenda-filterbalk (hierboven, via
     display:contents op de twee wrapper-divs) — geen aparte 8px-gap-
     container nodig, ze delen gewoon de bestaande 0.75rem-gap van die
     buitenste rij, net als alle andere filterbalk-controls. */
  .schakelaar {
    flex: 0 0 auto;
  }

  /* min-height i.p.v. height: in de lijstweergave staan hier twee selects
     (periode + team) die op mobiel naar een tweede regel wikkelen — met
     een vaste hoogte liep die regel over de rij eronder heen. */
  .agenda-team-filter {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
  }

  .agenda-team-filter select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* De algemene "+ Nieuw item"-knop verdwijnt op mobiel (punt 15) — elke
     dag in de dagenlijst hieronder heeft al zijn eigen "+ Nieuw item op
     <dag>"-knop, een tweede algemene knop zonder datumcontext was
     overbodig op een scherm waar ruimte schaars is. */
  .agenda-filterbalk-rechts > .knop-primair {
    display: none;
  }

  /* Tikvlak ≥44px (WCAG-vuistregel) voor de "+ Nieuw item op <dag>"-knoppen
     onder de mobiele dagenlijst — mat voorheen 36.5px (padding uit .knop
     alleen, browsercheck fix-ronde), dus expliciet opgehoogd i.p.v. op de
     font-/regelhoogte te vertrouwen. */
  .maandraster-dagenlijst .knop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }

  /* Filterbalk-navigatieknoppen (←/Vandaag/→), de weergaveschakelaar en de
     team-select krijgen op mobiel ook een tikvlak ≥44px — op desktop
     volstaat ±38px (Main.dc.html-mockup), mobiel is dat te krap om precies
     te raken (Mobiel.dc.html-mockup: 44px). `height: auto` ontkoppelt hier
     eerst de vaste 2.375rem/100%-hoogtes van de desktop-regel hierboven —
     anders zou .schakelaar op mobiel bij 38px blijven hangen (met
     overflow: hidden) terwijl de optie zelf al naar 44px probeert te
     groeien (#123 fix-ronde, punt 3). Hoeft op mobiel niet pixel-exact
     gelijk te zijn (dat is alleen een desktop-eis, punt 4) — alleen ≥44px. */
  .agenda-filterbalk .knop,
  .schakelaar,
  .schakelaar-optie,
  .agenda-filterbalk select {
    height: auto;
    min-height: 44px;
  }

  /* Mobiele kopregel (Mobiel.dc.html-mockup, #123 fix-ronde punt 3):
     vervangt de tekstknop "Vandaag" tussen ←/→ door een gestapeld
     maand+"Naar vandaag"-blok. */
  .agenda-mobiel-maand {
    /* !important nodig: wint anders niet van de generieke
       .alleen-mobiel{display:block!important} hierboven (zelfde
       specificiteit, en dit blok/deze regel moet block naar flex omzetten
       om de twee regels — maandnaam/"Naar vandaag" — verticaal te
       stapelen). */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
  }

  .agenda-mobiel-maand strong {
    font-size: 1.1rem;
  }

  /* Merkkleur i.p.v. browserblauw (#123 polish-ronde, punt 9) — er was hier
     nog nooit een eigen kleur gezet, dus viel dit linkje terug op de
     useragent-default. */
  .agenda-mobiel-maand a {
    color: var(--kleur-merk);
    font-size: 0.8125rem;
    text-decoration: underline;
  }

  /* event_form.html (#123 mobiel fix-ronde): Team en de (nog lege) plek
     voor Soort naast elkaar op desktop (.formulier-2koloms, grid met
     minmax(200px,1fr) per kolom) past niet op een 390px-scherm — twee
     kolommen van elk minstens 200px plus de 1rem-gap is al 416px, breder
     dan het scherm. Op mobiel dus terug naar één kolom; de Team-select
     zelf heeft daarbinnen al width:100% (.formulier select, portaal.css
     bovenin) — deze regel geeft 'm dus zijn volle breedte door zijn
     ouderkolom net zo breed te maken, in plaats van een losse override op
     de <select> zelf.

     `div.` ervoor is bewust, zelfde reden als `div.agenda-filterbalk-links`
     hierboven: zonder extra elementselector heeft deze regel dezelfde
     specificiteit (0,1,0) als de portaalbrede `.formulier-2koloms {
     grid-template-columns: repeat(2, minmax(200px,1fr)); }` verderop in dit
     bestand (buiten elke media query) — die staat LATER in het bestand en
     zou dus bij een gelijkspel win­nen, media query of niet (browsercheck:
     precies dat gebeurde eerst, de select bleef op 200px vaste kolombreedte
     hangen i.p.v. de volle 358px). */
  div.formulier-2koloms {
    grid-template-columns: 1fr;
  }

  /* Zoekrij (#126, Mobiel.dc.html-mockup: "volle breedte"): het
     tekstveld-vak groeit naar de volle breedte i.p.v. de vaste 280px van
     desktop, en krijgt hetzelfde 44px-tikvlak als de andere
     filterbalk-controls op mobiel (regel hierboven, punt 3/4).

     `form.`/`div.` ervoor is bewust (zelfde reden als `div.agenda-
     filterbalk-links` hierboven): zonder die extra elementselector heeft
     deze regel dezelfde specificiteit (0,1,0) als .agenda-zoekveld-form/
     .agenda-zoekveld's eigen desktop-`width`/`height` verderop in dit
     bestand (buiten elke media query) — die staan LATER en zouden dus bij
     een gelijkspel winnen, media query of niet (browsercheck: precies dat
     gebeurde eerst, het vak bleef op mobiel bij de vaste 280px/38px van
     desktop hangen). */
  form.agenda-zoekveld-form {
    flex: 1 1 100%;
  }

  div.agenda-zoekveld {
    flex: 1 1 auto;
    width: auto;
    height: 44px;
  }
}

/* Kleine opmaakhulpjes — vervangen de inline style=""-attributen die de
   Content-Security-Policy (common/headers.py, style-src 'self') sowieso
   niet toepaste. */
.ruimte-boven {
  margin-top: 0.75rem;
}

.ruimte-boven-ruim {
  margin-top: 1rem;
}

.ruimte-boven-extra {
  margin-top: 1.5rem;
}

/* Een checkbox hoort niet de volle breedte van .formulier input te krijgen. */
.vinkje {
  width: auto;
}

/* Een niet-actief vast slot: zichtbaar, maar duidelijk op de achtergrond. */
.rij-inactief {
  opacity: 0.5;
}

/* Agendapagina (#123): mag breder dan de portaalbrede 960px (max ~1200px),
   alleen deze ene pagina — via het block inhoud_extra_klasse in base.html,
   dus geen aparte per-blueprint uitzondering nodig. */
.inhoud-breed {
  max-width: 1200px;
}

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

/* Linkrijtje onder de h1 (agenda.html): "Handleiding | Abonneren en
   insluiten" — kleine links met een scheidingsteken, maten uit
   Main.dc.html (mockup, fix-ronde). Abonneren en insluiten is een eigen
   pagina (agenda_delen.html, .agenda-delen hieronder). */
.agenda-linkrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 1rem;
}

/* > i.p.v. een gewone nakomeling-selector: raakt alleen de rechtstreekse
   links, niet een eventuele knop dieper in de rij (die zou anders oranje
   tekst op een oranje achtergrond krijgen, zoals ooit in de oude
   abonneer-dropdown). */
.agenda-linkrij > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--kleur-merk);
  text-decoration: none;
}

.agenda-linkrij > a:hover {
  color: var(--kleur-accent);
  text-decoration: underline;
}

.agenda-linkrij .scheiding {
  color: #ccc;
}

/* "← Terug naar de agenda" (event_form.html, #123 polish-ronde punt 16):
   merkkleur i.p.v. browserblauw. Scoped op deze ENE link (niet een
   portaalbrede `a`-kleurregel) — event_form.html is de enige plek waar dit
   speelde. */
.agenda-terug {
  color: var(--kleur-merk);
}

.agenda-terug:hover {
  color: var(--kleur-accent);
}

/* Filterbalk (agenda.html): één flex-rij, alle controls even hoog en op één
   lijn — links de maandnavigatie + weergaveschakelaar, rechts de
   teamfilter + "+ Nieuw item" (Main.dc.html-mockup, fix-ronde). */
.agenda-filterbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.agenda-filterbalk-links,
.agenda-filterbalk-rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Alle filterbalk-controls (navigatieknoppen, schakelaar, team-select,
   "+ Nieuw item") op precies dezelfde hoogte/rand/radius zetten — anders
   dan aan font-/regelhoogte overlaten (die per element-type net iets
   verschilt), expliciet dezelfde hoogte als de knoppen. Een vaste `height`
   i.p.v. `min-height` op desktop (#123 fix-ronde, punt 4): met min-height
   alleen klopte de schakelaar niet — .schakelaar-optie kreeg zelf al
   2.375rem, en de omringende .schakelaar-wrapper legde daar nóg een eigen
   1px-rand omheen, dus 40px totaal tegenover 38px voor de knoppen/select
   (browsercheck fix-ronde). Nu draagt de WRAPPER de vaste hoogte/rand en
   vult de optie 'm met height:100% op, zodat het totaal (incl. rand) exact
   2.375rem is, gelijk aan .knop/select — en met align-items:center op
   .agenda-filterbalk-links staan ze daardoor ook exact op dezelfde top. */
.agenda-filterbalk .knop,
.agenda-filterbalk select {
  height: 2.375rem;
  box-sizing: border-box;
}

.schakelaar {
  height: 2.375rem;
  box-sizing: border-box;
}

.schakelaar-optie {
  height: 100%;
  box-sizing: border-box;
}

.knop-icoon {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Weergaveschakelaar (Maand|Lijst) — vervangt de eerder losse .tabbladen-
   onderstreepte tabs op de agendapagina door een gesegmenteerde knoppenrij
   (mockup); .tabbladen zelf blijft portaalbreed bestaan voor andere
   pagina's. */
.schakelaar {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.schakelaar-optie {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--kleur-tekst);
  font-size: 1rem;
  border-left: 1px solid #ccc;
}

.schakelaar-optie:first-child {
  border-left: none;
}

.schakelaar-actief {
  background: var(--kleur-merk);
  color: #fff;
  font-weight: bold;
}

/* Team-select in de filterbalk: min. 190px/16px-font/zelfde hoogte-rand-
   radius als de knoppen (mockup) — los van .formulier-inline's algemene
   width:auto hierboven, die geeft geen minimumbreedte. */
.agenda-team-filter select {
  min-width: 190px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Zoekrij (agenda.html, #126): eigen rij ONDER .agenda-filterbalk i.p.v.
   erin — #124's soortenrij komt op dezelfde plek te staan (Main.dc.html-
   mockup toont soort-pils + zoekveld samen), justify-content:flex-end laat
   daar nu al ruimte voor zonder dat #126 hoeft te weten hoe die pils er
   straks uitzien. */
.agenda-zoekrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: -0.25rem 0 1rem;
}

.agenda-zoekveld-form {
  margin: 0;
}

/* Vakantieformulier (Alembic 037): "Geldt voor" — alle teams of een
   aangevinkte selectie. De teamlijst in kolommen die vanzelf wikkelen. */
.vakantie-teams {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.vakantie-teams legend {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.vakantie-teamlijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.25rem 1rem;
  margin: 0.25rem 0 0 1.5rem;
}

.vakantie-teams label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  font-weight: normal;
}

/* Soortfilter (#124 deel B): links in de zoekrij (margin-right:auto duwt
   het zoekveld naar rechts). Elke soort is een checkbox-als-pil: het
   <input> blijft focusbaar maar onzichtbaar, de <span> erna is de knop.
   Even hoog als de filterbalk (38px), op mobiel 44px. */
.agenda-soortfilter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 0 0;
}

.agenda-soortknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.agenda-soortknop {
  position: relative;
  display: inline-flex;
}

.agenda-soortknop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.agenda-soortknop span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.375rem;
  box-sizing: border-box;
  padding: 0 0.8rem;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  color: #666;
  font-size: 0.9rem;
  cursor: pointer;
}

.agenda-soortknop input:checked + span {
  border-color: var(--kleur-merk);
  background: #fdf0e6;
  color: var(--kleur-tekst);
  font-weight: 600;
}

.agenda-soortknop input:not(:checked) + span .agenda-stip {
  opacity: 0.35;
}

.agenda-soortknop input:focus-visible + span {
  outline: 2px solid var(--kleur-merk);
  outline-offset: 1px;
}

@media (max-width: 720px) {
  .agenda-soortknop span {
    height: 44px;
  }
}

/* Vak (icoon + tekstveld) even hoog als de filterbalk-controls (2.375rem,
   zie .agenda-filterbalk .knop hierboven) — het <input> zelf draagt geen
   eigen rand/achtergrond, dat zit op dit omhullende vak (Main.dc.html-
   mockup: één bordered box met het vergrootglas-icoon ervoor). */
.agenda-zoekveld {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 280px;
  max-width: 100%;
  height: 2.375rem;
  box-sizing: border-box;
  padding: 0 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #666;
}

.agenda-zoekveld svg {
  flex: 0 0 auto;
}

.agenda-zoekveld input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--kleur-tekst);
  background: transparent;
}

/* Focusring op het hele vak i.p.v. alleen het kale <input> (geen eigen
   rand/achtergrond, zie hierboven) — de portaalbrede
   input:focus-visible-regel (bovenin dit bestand) blijft gewoon gelden,
   dit is een AANVULLING op het omhullende vak, geen override. */
.agenda-zoekveld:focus-within {
  outline: 2px solid var(--kleur-merk);
  outline-offset: 1px;
}

.agenda-zoek-wissen {
  font-size: 0.9rem;
  color: var(--kleur-merk);
  text-decoration: underline;
}

/* Zoekresultaten (_agenda_zoekresultaten.html, #126): maand-/sectiekoppen
   als eigen rij in dezelfde .tabel i.p.v. een aparte kop buiten de tabel —
   zo blijft de kolombreedte van de koprij (colspan) gelijk aan de rest. */
.zoekresultaten-maandkop th,
.zoekresultaten-sectiekop th {
  text-align: left;
  background: #f5f5f5;
  color: #666;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.5rem;
}

.zoekresultaten-sectiekop th {
  color: var(--kleur-merk);
}

/* <mark> (routes.py::logic.markeer_zoekterm(), altijd al HTML-geëscapet
   voordat de tag erin komt) — merkkleur-tint i.p.v. de knalgele
   useragent-default, blijft leesbaar op zowel de gewone als de
   maandkop-achtergrond. */
mark {
  background: rgba(240, 128, 48, 0.3);
  color: inherit;
  border-radius: 2px;
  padding: 0 0.1rem;
}

/* Van/Tot resp. Startdatum/Einddatum naast elkaar op desktop, onder elkaar
   op mobiel (event_form.html) — puur flex-wrap, geen aparte media query
   nodig. */
.formulier-rij {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.formulier-rij label {
  flex: 1 1 200px;
}

.formulier-groep {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.25rem 1rem 0.75rem;
  margin: 0 0 0.75rem;
}

.formulier-groep legend {
  padding: 0 0.4rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: #666;
}

/* Nieuw-/bewerk-itemformulier (event_form.html, Formulier.dc.html-mockup):
   een kaart tot ~720px, met een duidelijke blokverdeling (Titel; Team +
   Soort-plek naast elkaar; "Wanneer"; Locatie; Beschrijving; grijs
   Wedstrijd-detailsblok) — puur flex-wrap/grid, dus mobiel vanzelf onder
   elkaar. */
.formulier-kaart {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.formulier-kaart > .formulier-groep,
.formulier-kaart > .formulier-blok {
  margin: 0;
}

.formulier-2koloms {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 1rem;
}

.formulier-2koloms label {
  margin-bottom: 0;
}

/* 13px hinttekst onder de Team-select (#123 polish-ronde, punt 18, mockup)
   — scoped tot dit ene 2-koloms-blok, niet de portaalbrede .hint (0.9rem),
   die her en der elders in het portaal blijft staan zoals-ie was. */
.formulier-2koloms .hint {
  font-size: 0.8125rem;
}

.formulier-blok {
  padding-top: 0.6rem;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.formulier-blok-titel {
  display: block;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.formulier-wedstrijd-details {
  background: var(--kleur-achtergrond);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.formulier-wedstrijd-details .formulier-blok-titel {
  margin-bottom: 0;
}

/* Abonneren en insluiten (agenda_delen.html): teamkeuze + trainingen, en
   de links/iframe-code in alleen-lezen velden met een kopieerknop
   (portaal.js, data-kopieer). */
.agenda-delen-teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.25rem 1rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.agenda-delen-teams label,
.agenda-delen-trainingen {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  font-weight: normal;
}

.agenda-delen-veld {
  display: flex;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
}

.agenda-delen-veld input,
.agenda-delen-veld textarea {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

.agenda-delen-veld textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.agenda-delen-voorbeeld {
  width: 100%;
  height: 700px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

@media (max-width: 720px) {
  .agenda-delen-veld {
    flex-direction: column;
  }

  .agenda-delen-veld .knop {
    min-height: 44px;
  }
}

/* Maandraster (#123) — een echte <table> (caption/th scope="col") met
   ma-t/m-zo-weken, aanloop-/uitloopdagen van de buurmaanden gedempt
   (.buiten-maand), vandaag gemarkeerd (.vandaag, plus aria-current="date"
   in de template). */
.maandraster {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.maandraster caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.maandraster th,
.maandraster td {
  border: 1px solid #eee;
  vertical-align: top;
  padding: 0.375rem;
}

.maandraster th {
  background: #fafafa;
  font-weight: normal;
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
}

/* Koprij-onderrand #ddd i.p.v. het algemene cel-#eee hierboven (#123
   polish-ronde, punt 7, mockup) — .maandraster thead th is specifieker
   (1 klasse + 2 elementen) dan .maandraster th (1 klasse + 1 element), dus
   deze wint zonder !important nodig te hebben. */
.maandraster thead th {
  border-bottom-color: #ddd;
}

/* Geen stippel-onderstreping/hand-cursor op de <abbr>-weekdagkoppen (#123
   polish-ronde, punt 2) — de browserdefault voor <abbr> is een onderstippelde
   onderstreping + title-tooltip, wat in het raster oogde als een kapotte
   link. Scoped tot het maandraster (niet portaalbreed: <abbr> elders in het
   portaal mag zijn default-styling gewoon houden). */
.maandraster thead abbr {
  text-decoration: none;
  cursor: default;
}

/* .maandraster-kaart (punt 7): witte kaart met radius/schaduw om het hele
   raster (mockup) — een eigen klasse i.p.v. .tabel-scroll zelf aanpassen,
   want die is portaalbreed (elke andere tabel zou anders ook een
   kaart-look krijgen). overflow:hidden rondt de rechte tabelhoeken af
   zonder .tabel-scroll's eigen overflow-x:auto (nodig op zeer smalle
   schermen) te verliezen — die blijft op de BINNENSTE laag staan. */
.maandraster-kaart {
  background: var(--kleur-kaart);
  border-radius: 6px;
  box-shadow: var(--schaduw-kaart);
  overflow: hidden;
}

/* `height` i.p.v. `min-height` (#123 polish-ronde, punt 1) — Chromium (en
   kennelijk elke gangbare engine) NEGEERT min-height op een table-cell
   volledig zodra de rijhoogte berekend wordt: een reproductie met een kale
   <table><td style="min-height:124px"> gaf een gerenderde hoogte van maar
   ~21px. `height` op een table-cell werkt WEL zoals je van min-height zou
   verwachten — de rij wordt nooit korter dan deze waarde, maar groeit
   gewoon mee als een cel (met bv. 4-5 items) meer ruimte nodig heeft, want
   op table-cells is `height` altijd een minimum, nooit een harde clip. Dat
   gaf voorheen dus ongelijke weekrijen: ~62px voor lege weken tegenover
   ~126px voor weken met items — dezelfde `height` op elke cel geeft nu een
   gelijkmatig raster, ook bij lege weken. */
.maandraster-dag {
  position: relative;
  height: 7.75rem;
}

.buiten-maand {
  background: #fafafa;
  color: #999;
}

/* Vandaag (#123 polish-ronde, punt 3/10): GEEN celrand/achtergrond meer —
   alleen het dagnummer wordt een oranje pil (.vandaag .maandraster-dagnummer
   hieronder). De vorige versie zette hier nog een lichtoranje achtergrond +
   een 2px-outline op de hele cel, wat op zowel desktop als mobiel niet
   overeenkwam met de mockup (die daar helemaal niets op de cel zelf doet). */

/* Dagnummer: op desktop een vast <span> (item 8, fix-ronde — was eerder een
   focusbare <a aria-hidden="true">, een tegenstrijdige combinatie), op
   mobiel alleen een <a> naar de dagenlijst als de dag ook echt items heeft
   (zie _agenda_maandraster.html); "vandaag" krijgt een ronde oranje pil
   (mockup). */
.maandraster-dagnummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.3rem;
  font-size: 0.8125rem;
  text-decoration: none;
  color: inherit;
}

a.maandraster-dagnummer:hover {
  text-decoration: underline;
}

.vandaag .maandraster-dagnummer {
  border-radius: 999px;
  background: var(--kleur-merk);
  color: #fff;
  font-weight: bold;
}

/* Hover-plus (desktop): visueel verborgen tot :hover/:focus-within op de
   dagcel — géén display:none, dus met het toetsenbord altijd bereikbaar
   (Tab + Enter werkt ook zonder dat de cel ooit :hover was). Maat/positie
   uit Main.dc.html (mockup): 24px oranje vierkantje rechtsboven. */
.dag-nieuw {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 4px;
  background: var(--kleur-merk);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.125rem;
  opacity: 0;
}

.maandraster-dag:hover .dag-nieuw,
.maandraster-dag:focus-within .dag-nieuw,
.dag-nieuw:focus {
  opacity: 1;
}

.maandraster-items {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
}

.maandraster-items li {
  margin-bottom: 0.2rem;
  min-width: 0;
}

.maandraster-items summary {
  cursor: pointer;
  color: var(--kleur-accent);
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 1.125rem;
}

/* Compacte item-regel in de desktop-rastercel (en de "+N meer"-details):
   stip + tijd + titel op één regel, titel met ellipsis i.p.v. een tweede
   regel met team/locatie — dat maakte de cellen voorheen ongelijk hoog
   (Main.dc.html-mockup: 12px/18px, ~124px hoge cel bij 5 items; #123
   fix-ronde punt 2). Team/locatie/bron staan nog wel in het title-attribuut
   (hover) en de .schermlezer-only-tekst in de macro zelf. */
.maandraster-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.125rem;
  text-decoration: none;
  color: inherit;
}

a.maandraster-item:hover .maandraster-item-titel {
  text-decoration: underline;
}

.maandraster-item-tijd {
  flex: 0 0 auto;
  color: #666;
}

.buiten-maand .maandraster-item-tijd {
  color: #aaa;
}

.maandraster-item-titel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-stip {
  flex: 0 0 auto;
  vertical-align: middle;
  margin-right: 0.2rem;
}

.agenda-stip-neutraal circle {
  fill: #bbb;
}

/* Clubbreed item (geen team) — merkkleur-stip i.p.v. grijs (#123
   polish-ronde, punt 6). Grijs (.agenda-stip-neutraal hierboven) betekent
   voortaan uitsluitend "dit item HEEFT een team, maar zonder geldige
   kleur" — een echt andere situatie dan "geen team". */
.agenda-stip-merk circle {
  fill: var(--kleur-merk);
}

.buiten-maand .agenda-stip {
  opacity: 0.5;
}

/* Hele-dag-item als volle-breedte balk i.p.v. stip+tijd+titel (#123
   polish-ronde, punt 5, mockup): witte vette tekst op een gekleurde
   achtergrond. Drie achtergrond-varianten, geen van alle via
   style="background:..." (CSP style-src 'self' negeert een inline style-
   attribuut toch stilzwijgend, common/headers.py):
   - geldige teamkleur → een absoluut gepositioneerde SVG <rect> met een
     fill-attribuut (géén `style=`, dus CSP-veilig — dezelfde techniek als
     de teamstip hierboven) achter de tekst;
   - geen team (clubbreed) → vaste CSS-klasse in de merkkleur;
   - wél een team, maar zonder geldige kleur → vaste CSS-klasse in grijs
     (dezelfde tweedeling als de stip: grijs = "team zonder geldige kleur",
     nooit "geen team"). */
.maandraster-item-heledag {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 3px;
  overflow: hidden;
}

.maandraster-item-heledag-merk {
  background: var(--kleur-merk);
}

.maandraster-item-heledag-grijs {
  background: #999;
}

.maandraster-item-heledag-achtergrond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.maandraster-item-heledag-titel {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: bold;
}

.maandraster-stippen {
  display: none;
  flex-wrap: nowrap;
  gap: 3px;
  margin-top: 0.2rem;
}

/* 6px i.p.v. de standaard 8px agenda-stip (#123 polish-ronde, punt 12) —
   anders paste max. 2 stippen op één regel in plaats van 3 op de ~50px
   brede mobiele dagcel. */
.maandraster-stippen .agenda-stip {
  width: 6px;
  height: 6px;
}

.maandraster-dagenlijst {
  margin-top: 1rem;
}

.maandraster-dag-detail {
  padding: 0.75rem 0;
  border-bottom: 1px solid #eee;
}

/* 18px vet (#123 polish-ronde, punt 13). text-transform NIET "capitalize"
   (dat kapitaliseert élk woord — dus ook de maandnaam, terwijl
   `dag_omschrijving` bewust een kleine letter voor de maand gebruikt, zie
   routes.py::_dag_omschrijving()): alleen de allereerste letter van de hele
   kop een hoofdletter via ::first-letter, zodat "zaterdag 12 september"
   wordt weergegeven als "Zaterdag 12 september" (kleine "s"). */
.maandraster-dag-detail h2 {
  font-size: 1.125rem;
  font-weight: bold;
  margin: 0 0 0.35rem;
  text-transform: none;
}

.maandraster-dag-detail h2::first-letter {
  text-transform: uppercase;
}

.maandraster-dag-detail.buiten-maand h2 {
  color: #999;
}

/* Geen oranje kader/achtergrond meer om de gekozen dag (#123 polish-ronde,
   punt 13) — de zichtbaarheid van de gekozen sectie wordt al puur door
   `display` geregeld (.agenda-dagenlijst section/:target/.standaard
   hieronder), dit was uitsluitend decoratie en oogde als een oranje
   omkaderd blok om de hele dagkaarten-sectie + "+ Nieuw item"-knop heen. */

/* Mobiele dagkaarten (Mobiel.dc.html-mockup, #123 fix-ronde punt 1): tijd
   los links (vet), titel + team-/bron-pillen eronder, chevron als het item
   een bewerklink heeft. */
.dagkaarten {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.dagkaart {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.75rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
}

.dagkaart-tijd {
  flex: 0 0 3rem;
  font-weight: bold;
  font-size: 0.9375rem;
}

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

.dagkaart-titel {
  font-size: 1rem;
}

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

.dagkaart-team-pil {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dagkaart-chevron {
  flex: 0 0 auto;
  color: #aaa;
  font-size: 1.125rem;
}

/* Op mobiel alleen de gekozen dag (via #dag-...-target) tonen — zonder JS,
   dus alle secties standaard verborgen en :target zichtbaar. Zonder een
   target in de URL toont in plaats daarvan de sectie die server-side als
   `standaard` gemarkeerd is (routes.py::_markeer_standaard_dag(): vandaag,
   anders de eerste dag met items, anders de 1e — #123 fix-ronde punt 1).
   :has() i.p.v. JS om "is er al een :target actief" te detecteren. */
.agenda-dagenlijst section {
  display: none;
}

.agenda-dagenlijst section:target {
  display: block;
}

.agenda-dagenlijst:not(:has(section:target)) section.standaard {
  display: block;
}

/* Verwijderaanvraag (#154): de standaard .kaart-smal-formulierknop is
   ~34 px hoog — prima voor de ingelogde portaalformulieren (muis/
   toetsenbord), maar deze pagina is publiek en wordt bijna altijd vanuit
   de mail op een telefoon geopend. Bouwafspraken-valkuil "tikvlakken
   ≥ 44 px op mobiel" — alleen deze ene knop opgehoogd, geen wijziging aan
   `.kaart-smal form button` zelf (dat zou elke bestaande formulierknop in
   het portaal raken). */
.kaart-smal form button.knop-tikvlak {
  min-height: 44px;
}

/* ── Weekraster (#125) ──────────────────────────────────────────────────
   Google-Agenda-stijl: tijdkolom + 7 dagkolommen, items als blokken op hun
   tijd. Eén enkele scrollcontainer (.weekraster-scroll) om kop/hele-dag-
   strook/urenraster HEEN (niet elk apart) — anders zou mobiel drie losse
   scrollbars krijgen die niet gesynchroniseerd zijn; nu scrollt alles
   samen, met de tijdkolom `position: sticky` erin. */
.weekraster-kaart {
  background: var(--kleur-kaart);
  border-radius: 6px;
  box-shadow: var(--schaduw-kaart);
  overflow: hidden;
  /* min-width:0 (niet de flex-default "auto"): zonder dit liet de brede
     .weekraster-scroll-inhoud (875px bij 7 kolommen) `.inhoud` — een
     flex-item, base.html/portaal.css `body.met-zijmenu .inhoud{flex:1 1
     0}` — als geheel meegroeien, met een paginabrede horizontale scroll
     tot gevolg (browsercheck: document.documentElement.scrollWidth stond
     op 390px breedte). */
  min-width: 0;
}

.weekraster-scroll {
  overflow-x: auto;
}

.weekraster-kop-rij,
.weekraster-heledag-rij,
.weekraster-body-rij {
  display: flex;
}

.weekraster-kop-rij,
.weekraster-heledag-rij {
  border-bottom: 1px solid #ddd;
}

/* Tijdkolom/labels: overal sticky (op desktop zonder scroll heeft dat
   geen zichtbaar effect, dus geen aparte media-query-regel nodig). */
.weekraster-kop-tijdlabel,
.weekraster-heledag-label,
.weekraster-tijdkolom {
  flex: 0 0 56px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--kleur-kaart);
}

.weekraster-heledag-label {
  font-size: 11px;
  color: #666;
  padding: 6px 6px 6px 0;
  text-align: right;
}

.weekraster-kop-dag,
.weekraster-heledag-dag,
.weekraster-dag {
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid #eee;
}

.weekraster-kop-dag {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* position:relative (niet de default static): zonder een eigen
     containing block zoekt de .schermlezer-only-span hierin (position:
     absolute, portaal.css bovenin) zijn containing block verderop de
     boom in — nooit geclipt door .weekraster-scroll's overflow-x:auto
     (overflow alleen creëert GEEN containing block voor absolute
     nakomelingen, alleen position doet dat). Het gevolg: de STATISCHE
     positie van die span (ongeclipt tot aan het initiële containing
     block) lag voor de latere dagkolommen ver voorbij de 390px-viewport
     en blies zo de HELE pagina se scrollbreedte op (browsercheck:
     document.documentElement.scrollWidth bleef 834px i.p.v. 390px,
     precies totdat deze regel erbij kwam — .weekraster-dag hiernaast had
     dit probleem niet, die heeft al langer z'n eigen position:relative
     nodig voor de itemblokken). */
  position: relative;
}

.weekraster-kop-dagnaam {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.weekraster-kop-dagnummer {
  font-size: 22px;
  color: #222;
}

/* Vandaag (Besluiten #125: "vandaag-kolom gemarkeerd") — de hele kolom
   krijgt een lichte tint; het dagnummer zelf krijgt bovendien dezelfde
   oranje pil als het maandraster (logic._fmt_minuten/#123-conventie). Eén
   getal alleen zou in een urenraster te makkelijk over het hoofd gezien
   worden, vandaar de kolomtint erbij. */
.weekraster-vandaag {
  background: #fff4ec;
}

.weekraster-kop-dag.weekraster-vandaag .weekraster-kop-dagnummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--kleur-merk);
  color: #fff;
  font-weight: bold;
  font-size: 15px;
}

.weekraster-heledag-dag {
  min-height: 28px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weekraster-heledag-item {
  position: relative;
  display: block;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  line-height: 16px;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}

.weekraster-heledag-item-merk { background: var(--kleur-merk); }
.weekraster-heledag-item-grijs { background: #999; }

.weekraster-heledag-achtergrond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.weekraster-heledag-item span {
  position: relative;
  z-index: 1;
}

.weekraster-tijdkolom {
  display: grid;
  position: relative;
}

.weekraster-uur-label {
  grid-column: 1;
  align-self: start;
  justify-self: end;
  transform: translateY(-50%);
  font-size: 11px;
  color: #666;
  padding-right: 6px;
  white-space: nowrap;
}

.weekraster-dag {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  /* Uurlijnen zonder een element per lijn: een herhalend verloop i.p.v.
     een <div> per uur. 44px = 4 kwartier * 11px (één .weekraster-lengte-N-
     eenheid per uur). */
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 43px, #eee 43px, #eee 44px
  );
}

/* Blokpositie: absoluut BINNEN de grid-cel die rij-start-N/rij-span-M
   toekennen (#125, Besluiten: CSS-grid i.p.v. inline style — de CSP negeert
   style="" toch stilzwijgend). `top/bottom: 0` rekt het blok naar de volle
   hoogte van die cel; kol-I-van-N (portaal.css, machinaal gegenereerd
   verderop) plaatst het blok daarbinnen horizontaal bij overlap. */
.weekraster-item {
  position: absolute;
  top: 0;
  bottom: 0;
  grid-column: 1;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

.weekraster-item-achtergrond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.weekraster-item-merk { background: var(--kleur-merk); border: 1px solid var(--kleur-merk); }
.weekraster-item-grijs { background: #999; border: 1px solid #999; }

/* Training (Besluiten #125: licht getint met stippelrand in teamkleur) —
   #124 deel A (soorten) is op deze basis nog niet beschikbaar (zie
   PR-tekst), dus elk item is momenteel altijd "soort": "event"
   (routes.py::_agenda_items()). Deze klasse is alvast klaar voor zodra
   #124 hier landt, maar degradeert nu naar een neutrale gestippelde stijl
   i.p.v. een teamkleur-tint (die #124 nog moet aanleveren). */
.weekraster-item-training {
  background: #f5f5f5;
  border: 1px dashed #999;
  color: #222;
}

.weekraster-item-titel,
.weekraster-item-tijd,
.weekraster-item-extra {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weekraster-item-titel {
  font-weight: bold;
}

.weekraster-item-tijd {
  opacity: .9;
}

.weekraster-item-training .weekraster-item-tijd {
  opacity: .75;
}

.weekraster-item-extra {
  font-weight: bold;
}

/* Hover-plus per dagkolom (zelfde patroon als .dag-nieuw in het
   maandraster, #123) — één per dag, niet per uur/kwartier: tientallen
   losse uur-klikvlakken per dag zonder JS zouden al gauw de klikbare
   itemblokken zelf in de weg zitten. Besluiten #125 staat deze
   vereenvoudiging expliciet toe ("...anders alleen datum"). Staat in
   .weekraster-kop-dag (de dagkop), NIET in .weekraster-dag (de
   urenraster-kolom, PR #148-review punt 6) — daar lag de knop over de
   blokken van 07:00 heen: op desktop onzichtbaar maar toch klikbaar (een
   klik op zo'n blok ging naar "nieuw item" i.p.v. naar het blok zelf), op
   mobiel (altijd zichtbaar, geen hover) zichtbaar overlappend. */
.weekraster-nieuw {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 4px;
  background: var(--kleur-merk);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.125rem;
  opacity: 0;
  /* pointer-events:none zolang de knop onzichtbaar is (punt 6) — anders
     bleef hij, ook op desktop, gewoon klikbaar terwijl hij optisch niet
     bestond. */
  pointer-events: none;
}

.weekraster-kop-dag:hover .weekraster-nieuw,
.weekraster-kop-dag:focus-within .weekraster-nieuw,
.weekraster-nieuw:focus {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 720px) {
  /* Mobiel (Besluiten #125): horizontaal scrollen met scroll-snap per
     dag, ±3 dagen zichtbaar, tijdkolom sticky (hierboven, portaalbreed) —
     geen JS nodig. Geen hover op touch: de "+" hierboven blijft daarom
     hier gewoon zichtbaar i.p.v. pas bij :hover. */
  .weekraster-kop-dag,
  .weekraster-heledag-dag,
  .weekraster-dag {
    flex: 0 0 30vw;
    min-width: 96px;
  }

  /* width:max-content (i.p.v. de standaard "auto", die een flex-rij zo
     breed als zijn CONTAINER maakt) + min-width:100% (PR #148-review,
     punt 5): zonder dit was elke rij precies zo breed als
     .weekraster-scroll's zichtbare doos (358px op 390px-viewport), NIET
     als de optelsom van de 7 vaste dagkolombreedtes (875px) — de sticky
     tijdkolom (.weekraster-tijdkolom hierboven) kan alleen "plakken"
     BINNEN de breedte van zijn eigen ouderrij, dus met een rij van maar
     358px verdween de tijdkolom zodra er verder dan ~(358-56)=302px
     gescrold was (hij had dan geen ouder-breedte meer over om zich
     binnen vast te zetten). Alleen hier in de media query, niet
     portaalbreed: op desktop hebben de dagkolommen `flex: 1 1 0` (basis
     0), en width:max-content zou een flex-rij dan intrinsiek proberen te
     meten aan de CONTENT-breedte van elk kind i.p.v. de bedoelde volle
     kaartbreedte — met de vrijwel lege dagkolommen (itemblokken staan
     position:absolute, tellen niet mee voor intrinsieke breedte) zou dat
     de hele week-kaart op desktop samenknijpen tot een smal randje. */
  .weekraster-kop-rij,
  .weekraster-heledag-rij,
  .weekraster-body-rij {
    width: max-content;
    min-width: 100%;
  }

  /* Scroll-snap-doelwitten staan UITSLUITEND op de urenraster-rij (niet
     ook op de kop-/hele-dag-rij, al delen die dezelfde kolombreedtes) —
     alle drie rijen zitten in dezelfde .weekraster-scroll en schuiven dus
     toch al samen op één scrollLeft; dezelfde snap-punten in DRIE
     sibling-rijen tegelijk registreren liet Chromium de totale
     scrollbreedte van de hele PAGINA verkeerd berekenen (browsercheck:
     document.documentElement.scrollWidth bleef 834px i.p.v. 390px, alleen
     als alle drie rijen tegelijk snap-doelwitten waren; met snap-align
     alleen hier verdween dat weer). Ook de sticky tijdkolom is zelf een
     snap-doelwit (start) — zonder dat sprong `scroll-snap-type: x
     mandatory` bij het laden meteen naar de eerste DAGKOLOM als
     "snappunt 0" en scrolde zo de tijdkolom buiten beeld (scrollLeft
     stond na page-load al op 56px, exact de breedte van de tijdkolom). */
  .weekraster-tijdkolom,
  .weekraster-dag {
    scroll-snap-align: start;
  }

  .weekraster-scroll {
    scroll-snap-type: x mandatory;
  }

  /* Geen hover op touch — de "+" blijft daarom hier altijd zichtbaar en
     klikbaar. Tikvlak >=44px (WCAG-vuistregel, PR #148-review punt 6) via
     een ::before met een negatieve inset i.p.v. de zichtbare knop zelf
     groter te maken (24px blijft dezelfde compacte maat als op desktop —
     alleen het ONZICHTBARE klikvlak eromheen groeit). `top`/`right` op
     minstens 0.65rem (i.p.v. de 0.35rem van de zichtbare-op-hover-desktop-
     variant, tweede PR #148-review punt 2): de inset:-10px hieronder trekt
     het tikvlak 10px buiten de zichtbare knop, en met een 0.35rem-marge
     (5,6px) tot de rand van de dagkop stak dat ~4px over de BUURDAGKOP
     heen (10px - 5,6px). Bij 0.65rem (10,4px) marge blijft het tikvlak
     net binnen de eigen dagkop. **Nog handmatig te controleren op
     375px** (geen browser-tooling beschikbaar in deze sessie). */
  .weekraster-nieuw {
    top: 0.65rem;
    right: 0.65rem;
    opacity: 1;
    pointer-events: auto;
  }

  .weekraster-nieuw::before {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

/* Tablet/desktop met alleen aanraakbediening (PR #148-review, tweede
   ronde punt 3): zonder een :hover-mogelijkheid bleef de "+"-knop
   hierboven (opacity:0/pointer-events:none tot :hover/:focus-within) op
   zo'n apparaat volledig onbereikbaar — er is geen muis om overheen te
   bewegen, dus de knop werd nooit zichtbaar/klikbaar. `(hover: none)`
   geldt voor elk aanraakscherm ongeacht breedte (dus ook >720px, een
   tablet in liggende stand die de mobiele media query hierboven mist) —
   dezelfde "altijd zichtbaar en klikbaar"-regel als daar, hier los
   herhaald omdat deze buiten de @media (max-width: 720px)-blok valt.
   **Nog handmatig te controleren op een tablet.** */
@media (hover: none) {
  .weekraster-nieuw {
    opacity: 1;
    pointer-events: auto;
  }
}
/* Rij-plaatsing per KWARTIER (#125, Besluiten: CSS-grid i.p.v. inline
   style — CSP style-src 'self' negeert een style="" toch stilzwijgend).
   rij-start-N = grid-row-start N (1-based, kwartieren vanaf het begin van
   het venster), rij-span-M = de blokhoogte in kwartieren. Machinaal
   gegenereerd voor het volledige etmaal (96 kwartier = 24 uur) — het
   venster zelf is altijd korter of gelijk (zie logic.py::weekraster_venster()),
   dus dit dekt elk mogelijk venster ruim. */
.rij-start-1 { grid-row-start: 1; }
.rij-start-2 { grid-row-start: 2; }
.rij-start-3 { grid-row-start: 3; }
.rij-start-4 { grid-row-start: 4; }
.rij-start-5 { grid-row-start: 5; }
.rij-start-6 { grid-row-start: 6; }
.rij-start-7 { grid-row-start: 7; }
.rij-start-8 { grid-row-start: 8; }
.rij-start-9 { grid-row-start: 9; }
.rij-start-10 { grid-row-start: 10; }
.rij-start-11 { grid-row-start: 11; }
.rij-start-12 { grid-row-start: 12; }
.rij-start-13 { grid-row-start: 13; }
.rij-start-14 { grid-row-start: 14; }
.rij-start-15 { grid-row-start: 15; }
.rij-start-16 { grid-row-start: 16; }
.rij-start-17 { grid-row-start: 17; }
.rij-start-18 { grid-row-start: 18; }
.rij-start-19 { grid-row-start: 19; }
.rij-start-20 { grid-row-start: 20; }
.rij-start-21 { grid-row-start: 21; }
.rij-start-22 { grid-row-start: 22; }
.rij-start-23 { grid-row-start: 23; }
.rij-start-24 { grid-row-start: 24; }
.rij-start-25 { grid-row-start: 25; }
.rij-start-26 { grid-row-start: 26; }
.rij-start-27 { grid-row-start: 27; }
.rij-start-28 { grid-row-start: 28; }
.rij-start-29 { grid-row-start: 29; }
.rij-start-30 { grid-row-start: 30; }
.rij-start-31 { grid-row-start: 31; }
.rij-start-32 { grid-row-start: 32; }
.rij-start-33 { grid-row-start: 33; }
.rij-start-34 { grid-row-start: 34; }
.rij-start-35 { grid-row-start: 35; }
.rij-start-36 { grid-row-start: 36; }
.rij-start-37 { grid-row-start: 37; }
.rij-start-38 { grid-row-start: 38; }
.rij-start-39 { grid-row-start: 39; }
.rij-start-40 { grid-row-start: 40; }
.rij-start-41 { grid-row-start: 41; }
.rij-start-42 { grid-row-start: 42; }
.rij-start-43 { grid-row-start: 43; }
.rij-start-44 { grid-row-start: 44; }
.rij-start-45 { grid-row-start: 45; }
.rij-start-46 { grid-row-start: 46; }
.rij-start-47 { grid-row-start: 47; }
.rij-start-48 { grid-row-start: 48; }
.rij-start-49 { grid-row-start: 49; }
.rij-start-50 { grid-row-start: 50; }
.rij-start-51 { grid-row-start: 51; }
.rij-start-52 { grid-row-start: 52; }
.rij-start-53 { grid-row-start: 53; }
.rij-start-54 { grid-row-start: 54; }
.rij-start-55 { grid-row-start: 55; }
.rij-start-56 { grid-row-start: 56; }
.rij-start-57 { grid-row-start: 57; }
.rij-start-58 { grid-row-start: 58; }
.rij-start-59 { grid-row-start: 59; }
.rij-start-60 { grid-row-start: 60; }
.rij-start-61 { grid-row-start: 61; }
.rij-start-62 { grid-row-start: 62; }
.rij-start-63 { grid-row-start: 63; }
.rij-start-64 { grid-row-start: 64; }
.rij-start-65 { grid-row-start: 65; }
.rij-start-66 { grid-row-start: 66; }
.rij-start-67 { grid-row-start: 67; }
.rij-start-68 { grid-row-start: 68; }
.rij-start-69 { grid-row-start: 69; }
.rij-start-70 { grid-row-start: 70; }
.rij-start-71 { grid-row-start: 71; }
.rij-start-72 { grid-row-start: 72; }
.rij-start-73 { grid-row-start: 73; }
.rij-start-74 { grid-row-start: 74; }
.rij-start-75 { grid-row-start: 75; }
.rij-start-76 { grid-row-start: 76; }
.rij-start-77 { grid-row-start: 77; }
.rij-start-78 { grid-row-start: 78; }
.rij-start-79 { grid-row-start: 79; }
.rij-start-80 { grid-row-start: 80; }
.rij-start-81 { grid-row-start: 81; }
.rij-start-82 { grid-row-start: 82; }
.rij-start-83 { grid-row-start: 83; }
.rij-start-84 { grid-row-start: 84; }
.rij-start-85 { grid-row-start: 85; }
.rij-start-86 { grid-row-start: 86; }
.rij-start-87 { grid-row-start: 87; }
.rij-start-88 { grid-row-start: 88; }
.rij-start-89 { grid-row-start: 89; }
.rij-start-90 { grid-row-start: 90; }
.rij-start-91 { grid-row-start: 91; }
.rij-start-92 { grid-row-start: 92; }
.rij-start-93 { grid-row-start: 93; }
.rij-start-94 { grid-row-start: 94; }
.rij-start-95 { grid-row-start: 95; }
.rij-start-96 { grid-row-start: 96; }

.rij-span-1 { grid-row-end: span 1; }
.rij-span-2 { grid-row-end: span 2; }
.rij-span-3 { grid-row-end: span 3; }
.rij-span-4 { grid-row-end: span 4; }
.rij-span-5 { grid-row-end: span 5; }
.rij-span-6 { grid-row-end: span 6; }
.rij-span-7 { grid-row-end: span 7; }
.rij-span-8 { grid-row-end: span 8; }
.rij-span-9 { grid-row-end: span 9; }
.rij-span-10 { grid-row-end: span 10; }
.rij-span-11 { grid-row-end: span 11; }
.rij-span-12 { grid-row-end: span 12; }
.rij-span-13 { grid-row-end: span 13; }
.rij-span-14 { grid-row-end: span 14; }
.rij-span-15 { grid-row-end: span 15; }
.rij-span-16 { grid-row-end: span 16; }
.rij-span-17 { grid-row-end: span 17; }
.rij-span-18 { grid-row-end: span 18; }
.rij-span-19 { grid-row-end: span 19; }
.rij-span-20 { grid-row-end: span 20; }
.rij-span-21 { grid-row-end: span 21; }
.rij-span-22 { grid-row-end: span 22; }
.rij-span-23 { grid-row-end: span 23; }
.rij-span-24 { grid-row-end: span 24; }
.rij-span-25 { grid-row-end: span 25; }
.rij-span-26 { grid-row-end: span 26; }
.rij-span-27 { grid-row-end: span 27; }
.rij-span-28 { grid-row-end: span 28; }
.rij-span-29 { grid-row-end: span 29; }
.rij-span-30 { grid-row-end: span 30; }
.rij-span-31 { grid-row-end: span 31; }
.rij-span-32 { grid-row-end: span 32; }
.rij-span-33 { grid-row-end: span 33; }
.rij-span-34 { grid-row-end: span 34; }
.rij-span-35 { grid-row-end: span 35; }
.rij-span-36 { grid-row-end: span 36; }
.rij-span-37 { grid-row-end: span 37; }
.rij-span-38 { grid-row-end: span 38; }
.rij-span-39 { grid-row-end: span 39; }
.rij-span-40 { grid-row-end: span 40; }
.rij-span-41 { grid-row-end: span 41; }
.rij-span-42 { grid-row-end: span 42; }
.rij-span-43 { grid-row-end: span 43; }
.rij-span-44 { grid-row-end: span 44; }
.rij-span-45 { grid-row-end: span 45; }
.rij-span-46 { grid-row-end: span 46; }
.rij-span-47 { grid-row-end: span 47; }
.rij-span-48 { grid-row-end: span 48; }
.rij-span-49 { grid-row-end: span 49; }
.rij-span-50 { grid-row-end: span 50; }
.rij-span-51 { grid-row-end: span 51; }
.rij-span-52 { grid-row-end: span 52; }
.rij-span-53 { grid-row-end: span 53; }
.rij-span-54 { grid-row-end: span 54; }
.rij-span-55 { grid-row-end: span 55; }
.rij-span-56 { grid-row-end: span 56; }
.rij-span-57 { grid-row-end: span 57; }
.rij-span-58 { grid-row-end: span 58; }
.rij-span-59 { grid-row-end: span 59; }
.rij-span-60 { grid-row-end: span 60; }
.rij-span-61 { grid-row-end: span 61; }
.rij-span-62 { grid-row-end: span 62; }
.rij-span-63 { grid-row-end: span 63; }
.rij-span-64 { grid-row-end: span 64; }
.rij-span-65 { grid-row-end: span 65; }
.rij-span-66 { grid-row-end: span 66; }
.rij-span-67 { grid-row-end: span 67; }
.rij-span-68 { grid-row-end: span 68; }
.rij-span-69 { grid-row-end: span 69; }
.rij-span-70 { grid-row-end: span 70; }
.rij-span-71 { grid-row-end: span 71; }
.rij-span-72 { grid-row-end: span 72; }
.rij-span-73 { grid-row-end: span 73; }
.rij-span-74 { grid-row-end: span 74; }
.rij-span-75 { grid-row-end: span 75; }
.rij-span-76 { grid-row-end: span 76; }
.rij-span-77 { grid-row-end: span 77; }
.rij-span-78 { grid-row-end: span 78; }
.rij-span-79 { grid-row-end: span 79; }
.rij-span-80 { grid-row-end: span 80; }
.rij-span-81 { grid-row-end: span 81; }
.rij-span-82 { grid-row-end: span 82; }
.rij-span-83 { grid-row-end: span 83; }
.rij-span-84 { grid-row-end: span 84; }
.rij-span-85 { grid-row-end: span 85; }
.rij-span-86 { grid-row-end: span 86; }
.rij-span-87 { grid-row-end: span 87; }
.rij-span-88 { grid-row-end: span 88; }
.rij-span-89 { grid-row-end: span 89; }
.rij-span-90 { grid-row-end: span 90; }
.rij-span-91 { grid-row-end: span 91; }
.rij-span-92 { grid-row-end: span 92; }
.rij-span-93 { grid-row-end: span 93; }
.rij-span-94 { grid-row-end: span 94; }
.rij-span-95 { grid-row-end: span 95; }
.rij-span-96 { grid-row-end: span 96; }

/* Vaste rijenlengte van het hele weekraster (tijdkolom + de 7
   dagkolommen delen dezelfde klasse, zodat hun uren precies gelijk
   lopen) — 9 mogelijke lengtes, altijd een veelvoud van 4 kwartier (een
   heel uur): van de standaard 07:00-23:00 (64 kwartier) tot het
   absolute maximum 00:00-24:00 (96 kwartier). 11px per kwartier = 44px
   per uur (zelfde schaal als de mockup). */
.weekraster-lengte-64 { grid-template-rows: repeat(64, 11px); }
.weekraster-lengte-68 { grid-template-rows: repeat(68, 11px); }
.weekraster-lengte-72 { grid-template-rows: repeat(72, 11px); }
.weekraster-lengte-76 { grid-template-rows: repeat(76, 11px); }
.weekraster-lengte-80 { grid-template-rows: repeat(80, 11px); }
.weekraster-lengte-84 { grid-template-rows: repeat(84, 11px); }
.weekraster-lengte-88 { grid-template-rows: repeat(88, 11px); }
.weekraster-lengte-92 { grid-template-rows: repeat(92, 11px); }
.weekraster-lengte-96 { grid-template-rows: repeat(96, 11px); }

/* Kolomindeling bij overlap (#125, logic.py::bereken_kolomindeling()) —
   kol-I-van-N: dit is kolom I van de N kolommen die het overlap-cluster
   nodig heeft (max. 4, zie MAX_KOLOMMEN_WEEKRASTER). 2px/5px-marges
   tussen kolommen, zelfde schaal als de mockup. Elk blok claimt zelf
   grid-column 1 (.weekraster-item hieronder) — deze klassen zetten geen
   grid-column, alleen breedte/marge BINNEN die ene kolom, zodat
   overlappende blokken in dezelfde grid-cel toch naast elkaar ogen (het
   bekende "overlappende grid-items"-patroon).*/
.kol-1-van-1 { left: calc(0.0000% + 2px); width: calc(100.0000% - 5px); }
.kol-1-van-2 { left: calc(0.0000% + 2px); width: calc(50.0000% - 5px); }
.kol-2-van-2 { left: calc(50.0000% + 2px); width: calc(50.0000% - 5px); }
.kol-1-van-3 { left: calc(0.0000% + 2px); width: calc(33.3333% - 5px); }
.kol-2-van-3 { left: calc(33.3333% + 2px); width: calc(33.3333% - 5px); }
.kol-3-van-3 { left: calc(66.6667% + 2px); width: calc(33.3333% - 5px); }
.kol-1-van-4 { left: calc(0.0000% + 2px); width: calc(25.0000% - 5px); }
.kol-2-van-4 { left: calc(25.0000% + 2px); width: calc(25.0000% - 5px); }
.kol-3-van-4 { left: calc(50.0000% + 2px); width: calc(25.0000% - 5px); }
.kol-4-van-4 { left: calc(75.0000% + 2px); width: calc(25.0000% - 5px); }


/* ══════════════════════════════════════════════════════════════════════
   Proeflessen — opvolgbord (#152, epic #146). Eigen, afgebakende sectie:
   klassen vertalen de mockups (Main/TeammanagerWeergave/BordMobiel.dc.html)
   1-op-1 naar CSS i.p.v. hun inline style="" (CSP style-src 'self' staat
   dat sowieso niet toe, zie portaal/CLAUDE.md). Filterbalk-elementen zijn
   overal precies 38px (desktop) / 44px (mobiel) hoog — dat is een
   acceptatiecriterium van #152, niet toevallig gekozen.

   Bewust GEEN per-team gekleurde stip (de mockups kleuren die per team via
   `team.kleur`, een dynamische DB-waarde): een inline `style=""` daarvoor
   zou de CSP-fout precies herhalen die deze klassen juist vervangen. De
   team-pil (`.proefles-pil-team`) toont daarom alleen de teamnaam, zoals
   de bestaande `.pil`-component elders in het portaal. ══════════════════ */

.proefles {
  display: flex;
  flex-direction: column;
}

.proefles-titel {
  font-size: 2rem;
  line-height: 2.375rem;
  margin: 0 0 0.25rem;
}

.proefles-subkop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.25rem;
  color: #666;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Teammanager-weergave: "wat moet ik nu doen"-tegels i.p.v. snelfilterchips. */
.proefles-tegels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.proefles-tegel {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 4.75rem;
  padding: 0 1rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  text-decoration: none;
  color: var(--kleur-tekst);
  box-sizing: border-box;
  min-width: 0;
}

.proefles-tegel-hot {
  background: #fff7f0;
  border-color: var(--kleur-merk);
}

.proefles-tegel-getal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--kleur-nav-achtergrond);
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
}

.proefles-tegel-hot .proefles-tegel-getal {
  background: var(--kleur-merk);
}

.proefles-tegel-getal-nul {
  background: #eee;
  color: #999;
}

.proefles-tegel-tekst {
  min-width: 0;
}

.proefles-tegel-label {
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.proefles-rij {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.proefles-rij-snel {
  justify-content: space-between;
  height: 38px;
}

/* flex-wrap:nowrap + overflow-x:auto i.p.v. wrap: vier snelfilterchips
   naast een 280px zoekveld passen op 1440px breed (zie Main.dc.html), maar
   een tussenliggende breedte (bv. het zijmenu net open + een smal scherm)
   mag ze nooit naar een tweede regel laten omklappen — dat zou de vaste
   38px-rijhoogte breken. Horizontaal scrollen is de veilige uitwijk. */
.proefles-snelfilters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-width: 0;
}

.proefles-snel-label {
  font-size: 0.9rem;
  color: #666;
  margin-right: 0.25rem;
}

.proefles-snelfilter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
  padding: 0 0.375rem 0 0.875rem;
  border-radius: 999px;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid #ccc;
  color: var(--kleur-tekst);
  text-decoration: none;
  box-sizing: border-box;
}

.proefles-snelfilter-actief {
  background: var(--kleur-merk);
  border-color: var(--kleur-merk);
  color: #fff;
}

.proefles-snelfilter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.4375rem;
  border-radius: 12px;
  background: #eee;
  font-size: 0.75rem;
  font-weight: bold;
  box-sizing: border-box;
}

.proefles-snelfilter-actief .proefles-snelfilter-badge {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Rij B, ledenadministratie (Main.dc.html): 9 gelijke kolommen + een
   losse, niet-uitgerekte Toepassen-knop erachter (de mockup zelf toont
   geen knop — hij gaat uit van submit-on-change-JS — maar "zonder JS werkt
   Toepassen" is een hard vereiste, dus een echte submit-knop moet ergens
   staan). `auto` als laatste kolom: de knop krimpt niet mee met de 9
   filters. */
.proefles-rij-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* "Meer filters": de minder vaak gebruikte selects, standaard ingeklapt. */
.proefles-meer-filters {
  margin-bottom: 0.75rem;
}

.proefles-meer-filters-knop {
  display: inline-block;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--kleur-merk);
  margin-bottom: 0.5rem;
}

.proefles-meer-filters-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

/* Bord op de volle schermbreedte (detailpagina doet hetzelfde): de
   portaalbrede .inhoud-max-width van 960px liet de zes kolommen elk ~150px. */
.inhoud:has(> .proefles-breed) {
  max-width: 1800px;
}

/* Rij, teammanager (TeammanagerWeergave.dc.html): team vast + 6 filters in
   een sub-grid + "Wacht op mij"-toggle + zoekveld + Toepassen, één rij. */
.proefles-rij-filters-tm {
  flex-wrap: nowrap;
}

.proefles-tm-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.proefles-wacht-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
  padding: 0 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--kleur-tekst);
  font-size: 0.875rem;
  text-decoration: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  white-space: nowrap;
}

.proefles-wacht-toggle-actief {
  border-color: var(--kleur-merk);
  background: #fff7f0;
  font-weight: bold;
}

.proefles-select,
.proefles-team-vast,
.proefles-zoekveld {
  height: 38px;
  box-sizing: border-box;
}

.proefles-select {
  min-width: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  padding: 0 0.625rem;
  font-size: 0.875rem;
  color: var(--kleur-tekst);
}

.proefles-team-vast {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #eee;
  color: #666;
  font-size: 0.875rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.proefles-zoekveld {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 0.625rem;
  font-size: 0.875rem;
}

/* Rij A (ledenadmin) wil een vast-breed zoekveld rechts, geen uitgerekt
   flexitem — zelfde 280px als Main.dc.html; bij de teammanager (rij zonder
   .proefles-rij-snel) is 220px de mockupmaat (TeammanagerWeergave.dc.html). */
.proefles-zoekveld-vast {
  flex: 0 0 280px;
}

.proefles-rij-filters-tm .proefles-zoekveld-vast {
  flex-basis: 220px;
}

/* Archief/"Terug naar het bord"-knop in de subkop, en de smalle formulier-
   kaart (Handmatig toevoegen) links uitgelijnd onder de titel. */
.proefles-archieflink {
  text-decoration: none;
}

.proefles .kaart-smal {
  max-width: 480px;
  margin: 0;
}

.proefles .tabel a:not(.proefles-actieknop) {
  color: var(--kleur-merk);
}

.proefles-toepassen {
  height: 38px;
  padding: 0 1rem;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.proefles-rij-chips {
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 30px;
}

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

.proefles-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 30px;
  padding: 0 0.375rem 0 0.75rem;
  border-radius: 999px;
  background: var(--kleur-nav-achtergrond);
  color: #fff;
  font-size: 0.8125rem;
  box-sizing: border-box;
}

.proefles-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  text-decoration: none;
  font-size: 0.75rem;
}

.proefles-wis-alles {
  font-size: 0.8125rem;
  color: var(--kleur-merk);
  margin-left: 0.25rem;
}

.proefles-telling {
  font-size: 0.8125rem;
  color: #666;
}

.proefles-telling strong {
  color: var(--kleur-tekst);
}

.proefles-bord {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  /* Te smal voor vijf kolommen van 230px: het bord scrolt i.p.v. dat de
     kaarten worden afgesneden. */
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.proefles-kolom {
  flex: 1 1 230px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #e9e9e9;
  border-radius: 6px;
  min-width: 0;
}

.proefles-kolom-kop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
  padding: 0 0.25rem;
}

.proefles-kolom-naam {
  font-weight: bold;
  font-size: 0.9rem;
}

.proefles-kolom-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.4375rem;
  border-radius: 12px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: bold;
  box-sizing: border-box;
}

.proefles-kolom-van {
  font-size: 0.75rem;
  color: #666;
}

.proefles-kolom-ingeklapt {
  flex: 0 0 48px;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0;
  background: #e0e0e0;
}

.proefles-kolom-ingeklapt-label {
  writing-mode: vertical-rl;
  font-size: 0.8125rem;
  font-weight: bold;
  color: #444;
  letter-spacing: .02em;
  text-decoration: none;
}

.proefles-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--schaduw-kaart);
  box-sizing: border-box;
  min-width: 0;
}

.proefles-kaart-wacht {
  border-left: 3px solid var(--kleur-merk);
  padding-left: 0.5625rem;
}

.proefles-kaart-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.proefles-kaart-naamblok {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
}

.proefles-wachtstip {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kleur-merk);
}

.proefles-kaart-naam {
  font-weight: bold;
  font-size: 0.9rem;
  /* lange namen mogen wrappen i.p.v. te worden afgekapt */
  overflow-wrap: anywhere;
  color: var(--kleur-tekst);
  text-decoration: none;
}

.proefles-kaart-naam:hover {
  text-decoration: underline;
}

.proefles-kaart-leeftijd {
  font-size: 0.75rem;
  color: #666;
  flex: 0 0 auto;
}

.proefles-kaart-dagen {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #666;
}

.proefles-kaart-dagen-alarm {
  color: var(--kleur-waarschuwing);
  font-weight: bold;
}

/* De pillen (team/soort) mogen hun volledige tekst tonen — het minder
   belangrijke "bron"-label ernaast (website/socials/...) is wat wijkt
   (krimpt/verdwijnt) op een smalle kolom, niet andersom. */
.proefles-kaart-pillen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.proefles-pil-team,
.proefles-pil-soort {
  white-space: nowrap;
  flex: 0 0 auto;
}

.proefles-kaart-bron {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  white-space: nowrap;
  text-align: right;
}

.proefles-kaart-bron {
  font-size: 0.6875rem;
  color: #999;
}

.proefles-kaart-datum {
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proefles-datum-vandaag {
  color: var(--kleur-accent);
  font-weight: bold;
}

.proefles-datum-alarm {
  color: var(--kleur-fout);
  font-weight: bold;
}

.proefles-datum-ok {
  color: var(--kleur-succes);
  font-weight: bold;
}

.proefles-checklist {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.proefles-vinkje {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #ddd;
}

.proefles-vinkje-af {
  background: var(--kleur-succes);
}

.proefles-checklist-telling {
  font-size: 0.75rem;
  color: #666;
  margin-left: 0.25rem;
}

.proefles-kaart-onderrij {
  flex-wrap: wrap;
  row-gap: 0.375rem;
}

.proefles-kaart-acties {
  display: flex;
  gap: 0.25rem;
}

.proefles-actieknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: var(--kleur-tekst);
  text-decoration: none;
  box-sizing: border-box;
}

.proefles-actieknop-whatsapp {
  border-color: var(--kleur-succes);
  background: var(--kleur-succes-achtergrond);
  color: var(--kleur-succes);
}

.proefles-toevoegen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 1px dashed #bbb;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: #666;
  text-decoration: none;
  box-sizing: border-box;
}

/* Mobiele lijst-weergave (≤720px, BordMobiel.dc.html) — hetzelfde bord,
   andere DOM (kanban en lijst staan allebei in de pagina; de media query
   hieronder schakelt welke zichtbaar is, puur CSS, geen JS nodig). */
.proefles-mobiel {
  display: none;
}

@media (max-width: 720px) {
  /* BordMobiel.dc.html gebruikt overal (ledenadmin én teammanager) dezelfde
     snelfilter-chipsrij (`.proefles-mobiel-snel`) — de teammanager-tegels
     zijn een desktop-only ding (TeammanagerWeergave.dc.html). De chips
     blijven wel zichtbaar (de telling ernaast niet): anders filtert een
     onthouden desktopfilter (team, bron, …) op de telefoon onzichtbaar. */
  .proefles-tegels,
  .proefles-rij-snel,
  .proefles-rij-filters,
  .proefles-rij-filters-grid,
  .proefles-meer-filters,
  .proefles-rij-filters-tm,
  .proefles-rij-chips .proefles-telling,
  .proefles-bord {
    display: none;
  }

  /* Een lege chiprij ook verbergen. Eigen regel: `:has()` wordt niet
     vergevingsgezind geparst, dus in de lijst hierboven zou een browser
     zonder `:has()` de hele verbergregel weggooien. Zonder `:has()` blijft
     hier alleen een leeg gat over. */
  .proefles-rij-chips:not(:has(.proefles-chips > *)) {
    display: none;
  }

  .proefles-mobiel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .proefles-mobiel-snel {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem;
  }

  .proefles-mobiel-snel .proefles-snelfilter {
    height: 44px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .proefles-mobiel-snel .proefles-snelfilter-badge {
    min-width: 26px;
    height: 26px;
  }

  .proefles-mobiel-zoekrij {
    display: flex;
    gap: 0.5rem;
  }

  .proefles-zoekveld-mobiel {
    flex: 1 1 auto;
    height: 44px;
  }

  .proefles-mobiel-uitklap {
    flex: 0 0 auto;
  }

  .proefles-mobiel-uitklap-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--kleur-merk);
    background: #fff7f0;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: bold;
    list-style: none;
    cursor: pointer;
    box-sizing: border-box;
  }

  .proefles-mobiel-uitklap-knop::-webkit-details-marker {
    display: none;
  }

  .proefles-mobiel-paneel {
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--schaduw-kaart);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .proefles-mobiel-paneelrij {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    height: 44px;
  }

  .proefles-mobiel-paneel-label {
    font-size: 0.875rem;
    color: #666;
  }

  .proefles-mobiel-paneelrij .proefles-select {
    height: 44px;
  }

  .proefles-mobiel-paneelknoppen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.25rem;
  }

  .proefles-mobiel-wis,
  .proefles-mobiel-paneelknoppen button {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .proefles-mobiel-sectiekop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 0.25rem;
  }

  .proefles-mobiel-sectienaam {
    font-size: 1.0625rem;
    margin: 0;
  }

  .proefles-mobiel-kaart {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--schaduw-kaart);
    box-sizing: border-box;
  }

  .proefles-mobiel-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .proefles-mobiel-checkform {
    margin: 0;
  }

  .proefles-mobiel-checkitem {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 4px;
    font-size: 0.875rem;
    border: 1px solid #ccc;
    background: #fff;
    color: var(--kleur-tekst);
    box-sizing: border-box;
  }

  .proefles-mobiel-checkitem-af {
    background: var(--kleur-succes-achtergrond);
    border-color: var(--kleur-succes);
    color: var(--kleur-succes);
    font-weight: bold;
  }

  .proefles-mobiel-actierij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    gap: 0.5rem;
  }

  .proefles-mobiel-actie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 4px;
    font-size: 0.9375rem;
    font-weight: bold;
    border: 1px solid #ccc;
    background: #fff;
    color: var(--kleur-tekst);
    text-decoration: none;
    box-sizing: border-box;
  }

  .proefles-mobiel-icoonknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    color: var(--kleur-tekst);
    box-sizing: border-box;
  }

  .proefles-mobiel-icoonknop-whatsapp {
    background: var(--kleur-succes);
    border-color: var(--kleur-succes);
    color: #fff;
  }

  .proefles-mobiel-archieflink {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    box-sizing: border-box;
  }
}

/* Codeblok voor het plaatsingsfragment (proefles/plaatsing.py, #146 ticket
   7) — de inhoud is bewust escapete tekst (geen |safe, zie proefles/
   plaatsing.html), dus gewone monospace-opmaak; .tabel-scroll's aanpak
   (opzij scrollen i.p.v. de pagina breder maken) voor een lang fragment
   op mobiel. */
.code-blok {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 1rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre;
}

/* ── Agenda: jaarweergave per seizoen (#127) ──────────────────────────────
   CSP-proof zonder inline style (planning/CLAUDE.md): de 12 maandkaarten
   gebruiken vaste CSS-klassen (.niveau-0..4/.thuis/.event/.uitzondering/
   .vandaag) — een dag heeft er hooguit een handvol combinaties, dus geen
   gegenereerde per-dag-grid-klassen nodig. */

:root {
  --jaar-niveau-0: #eeeeee;
  --jaar-niveau-1: #fdebdc;
  --jaar-niveau-2: #f9cba6;
  --jaar-niveau-3: #f4a066;
  --jaar-niveau-4: var(--kleur-accent);
}

.jaar-strook-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.jaar-strook-titel {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.jaar-strook-periode {
  font-size: 0.8rem;
  color: #666;
}

/* Kleine ronde variant van .schakelaar (portaal.css hierboven) voor de
   Seizoen/Kalenderjaar-knop in de kop van de jaarweergave — .schakelaar
   zelf blijft de vierkante 4px-rand-variant voor de hoofdweergaveschakelaar. */
.schakelaar-klein {
  border-radius: 999px;
  font-size: 0.8rem;
}

.schakelaar-klein .schakelaar-optie {
  padding: 0.25rem 0.75rem;
}

.jaar-maandgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Elke kaart is ÉÉN <a> (zie _agenda_jaar.html voor de afweging tegen
   per-dag-links) — text-decoration/color resetten omdat een link anders
   z'n hele inhoud (dagnummers incluis) onderstreept/blauw zou kleuren. */
.jaar-maandkaart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--kleur-kaart);
  border-radius: 6px;
  box-shadow: var(--schaduw-kaart);
  padding: 0.75rem;
  text-decoration: none;
  color: var(--kleur-tekst);
}

.jaar-maandkaart:hover,
.jaar-maandkaart:focus-visible {
  box-shadow: 0 0 0 2px var(--kleur-merk), var(--schaduw-kaart);
}

.jaar-maandkaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.jaar-maandnaam {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: bold;
  font-size: 1rem;
}

.jaar-maandnaam svg {
  color: var(--kleur-merk);
}

.jaar-maandjaar {
  font-size: 0.7rem;
  color: #666;
}

.jaar-maandtelling {
  font-size: 0.7rem;
  color: #666;
  margin: 0.125rem 0 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jaar-maandtabel {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.jaar-maandtabel th {
  font-size: 0.625rem;
  font-weight: normal;
  color: #999;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 0.125rem;
}

.jaar-dag {
  position: relative;
  height: 1.75rem;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;
  background: var(--jaar-niveau-0);
  font-size: 0.7rem;
}

.jaar-dag.niveau-1 { background: var(--jaar-niveau-1); }
.jaar-dag.niveau-2 { background: var(--jaar-niveau-2); }
.jaar-dag.niveau-3 { background: var(--jaar-niveau-3); color: #fff; }
.jaar-dag.niveau-4 { background: var(--jaar-niveau-4); color: #fff; }

.jaar-dag.thuis {
  box-shadow: inset 0 0 0 2px var(--kleur-nav-achtergrond);
}

.jaar-dag-buiten {
  background: transparent;
}

.jaar-dag-nr {
  position: relative;
  z-index: 1;
}

.jaar-dag.vandaag .jaar-dag-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--kleur-merk);
  color: #fff;
  font-weight: bold;
}

.jaar-dag.event::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.1875rem;
  width: 0.25rem;
  height: 0.25rem;
  margin-left: -0.125rem;
  border-radius: 999px;
  background: #1a1a1a;
}

.jaar-dag.niveau-3.event::after,
.jaar-dag.niveau-4.event::after {
  background: #fff;
}

.jaar-maandevents {
  margin-top: 0.5rem;
  min-height: 2.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.72rem;
}

.jaar-maandevent {
  display: flex;
  gap: 0.375rem;
  min-width: 0;
}

.jaar-maandevent-datum {
  flex: 0 0 2.25rem;
  color: #666;
}

.jaar-maandevent-leeg {
  color: #999;
}

.jaar-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #666;
}

.jaar-legenda-schaal,
.jaar-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.jaar-legenda-stip {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  background: var(--jaar-niveau-0);
}

.jaar-legenda-stip.niveau-1 { background: var(--jaar-niveau-1); }
.jaar-legenda-stip.niveau-2 { background: var(--jaar-niveau-2); }
.jaar-legenda-stip.niveau-3 { background: var(--jaar-niveau-3); }
.jaar-legenda-stip.niveau-4 { background: var(--jaar-niveau-4); }
.jaar-legenda-thuis { background: var(--jaar-niveau-4); box-shadow: inset 0 0 0 2px var(--kleur-nav-achtergrond); }
.jaar-legenda-event { background: var(--jaar-niveau-2); }
.jaar-legenda-vandaag { background: var(--kleur-merk); border-radius: 999px; }

@media (max-width: 720px) {
  .jaar-maandgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* Individuele dagcellen zijn op mobiel véél te klein voor een eigen
     ≥44px-tikvlak (zie de moduledocstring in _agenda_jaar.html) — de HELE
     kaart is daarom de <a>, ruimschoots boven de WCAG-44px-vuistregel. */
  .jaar-maandkaart {
    min-height: 44px;
  }

  .jaar-strook-kop {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Proeflessen — detailscherm (#153, epic #146). Eigen, afgebakende sectie,
   net als #152's bord-sectie hierboven zou moeten staan (die branch bestond
   nog niet op origin toen deze aftakte, zie proefles/detail.py — bij de
   merge komen de twee "Proeflessen"-secties in dit bestand naast elkaar te
   staan, niet door elkaar). Klassen vertalen Detail.dc.html 1-op-1 naar CSS
   i.p.v. de mockup's inline style="" (CSP style-src 'self', zie
   portaal/CLAUDE.md).

   Breedte: de mockup toont dit scherm vrijwel schermvullend (1440 - 230px
   zijmenu), ruim boven de portaalbrede `.inhoud`-max-width van 960px. In
   plaats van die GEDEELDE regel aan te passen (raakt elke andere pagina,
   en #152's bord liet 'm bewust ongemoeid) verruimt onderstaande regel
   ALLEEN de pagina's die de wrapper hieronder gebruiken, via :has() — geen
   wijziging aan base.html/de generieke .inhoud-regel nodig. ══════════════ */

.inhoud:has(> .proefles-detail) {
  max-width: none;
}

.proefles-detail-terug {
  display: inline-block;
  color: var(--kleur-merk);
  font-size: 0.9rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
  text-decoration: none;
}

.proefles-detail-terug:hover {
  color: var(--kleur-accent);
}

.proefles-detail-kop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.proefles-detail-titel {
  font-size: 2rem;
  line-height: 2.375rem;
  margin: 0;
}

.proefles-detail-pil {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.625rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.proefles-detail-pil-grijs {
  background: #eee;
  border-color: #eee;
  color: #666;
}

.proefles-detail-pil-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.proefles-detail-dot-ok {
  background: var(--kleur-succes);
}

.proefles-detail-dot-let-op {
  background: var(--kleur-waarschuwing);
}

.proefles-detail-fase-neutraal {
  background: #eee;
  border-color: #eee;
  color: #666;
}

.proefles-detail-fase-verwacht {
  background: #fff7f0;
  border-color: var(--kleur-merk);
  color: var(--kleur-accent);
  font-weight: bold;
}

.proefles-detail-fase-opvolgen {
  background: #fff3e0;
  border-color: var(--kleur-waarschuwing);
  color: var(--kleur-waarschuwing);
  font-weight: bold;
}

.proefles-detail-fase-ingeschreven {
  background: var(--kleur-succes-achtergrond);
  border-color: var(--kleur-succes);
  color: var(--kleur-succes);
  font-weight: bold;
}

.proefles-detail-fase-afgehaakt {
  background: var(--kleur-fout-achtergrond);
  border-color: var(--kleur-fout);
  color: var(--kleur-fout);
  font-weight: bold;
}

.proefles-detail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.9rem;
  line-height: 1.25rem;
  color: #666;
  margin-bottom: 1rem;
}

.proefles-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  gap: 1.5rem;
  align-items: start;
}

.proefles-detail-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.proefles-detail-col .kaart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.proefles-detail-kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
  flex-wrap: wrap;
}

.proefles-detail-kaart-titel {
  font-size: 1.25rem;
  margin: 0;
}

.proefles-detail-kaart-subtitel {
  font-size: 0.875rem;
  color: #666;
  font-weight: normal;
}

/* Knopmaten: de mockup gebruikt overal precies 38px (normale acties) of
   32px (kleine, inline acties als "Afvinken"/"Verzetten") — .knop's eigen
   padding komt daar niet exact op uit, vandaar deze twee sizing-modifiers
   bovenop de bestaande kleur-/randstijl van .knop/.knop-primair/.knop-gevaar. */
.knop-detail {
  height: 2.375rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: bold;
  box-sizing: border-box;
}

.knop-detail-klein {
  height: 2rem;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: normal;
  box-sizing: border-box;
  white-space: nowrap;
}

.knop-detail-whatsapp {
  background: var(--kleur-succes);
  border-color: var(--kleur-succes);
  color: #fff;
}

.knop-detail .proefles-detail-knop-icoon {
  margin-right: 0.375rem;
  flex: 0 0 auto;
}

.proefles-detail-volle-breedte {
  width: 100%;
}

/* <summary> als knop: verbergt de standaard driehoek, de rest erft van
   .knop/.knop-detail-klein. Het formulier eronder is de <details>-inhoud —
   werkt zonder JS (native browsergedrag), dus geen aparte "toon/verberg"-
   scriptje nodig zoals elders in portaal.js. */
.proefles-detail-summary {
  cursor: pointer;
  list-style: none;
}

.proefles-detail-summary::-webkit-details-marker {
  display: none;
}

.proefles-detail-details {
  flex: 0 0 auto;
}

.proefles-detail-planform {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #f5f5f5;
  border-radius: 4px;
}

.proefles-detail-planform label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: #666;
}

.proefles-detail-vak {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 6px;
  box-sizing: border-box;
  min-height: 4rem;
  flex-wrap: wrap;
}

.proefles-detail-vak-orange {
  border: 1px solid var(--kleur-merk);
  background: #fff7f0;
  color: var(--kleur-accent);
}

.proefles-detail-vak-grijs {
  background: var(--kleur-achtergrond);
}

.proefles-detail-vak-icoon {
  flex: 0 0 1.25rem;
}

.proefles-detail-vak-tekst {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.proefles-detail-vak-titel {
  font-weight: bold;
  font-size: 0.9375rem;
  color: var(--kleur-tekst);
}

.proefles-detail-vak-hint {
  font-size: 0.8125rem;
  color: #666;
}

.proefles-detail-geweest-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Checklistrij: vinkje / label+meta / wie+wanneer / actie — vaste kolommen
   zoals de mockup, met wrap op mobiel (media query onderaan). */
.proefles-detail-check-rij {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 13.75rem 10rem;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  border-top: 1px solid #eee;
  padding: 0.375rem 0;
}

.proefles-detail-check-vinkje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 4px;
  border: 2px solid #bbb;
  box-sizing: border-box;
}

.proefles-detail-check-vinkje-af {
  background: var(--kleur-succes);
  border-color: var(--kleur-succes);
}

.proefles-detail-check-wie {
  font-size: 0.8125rem;
  color: #666;
}

.proefles-detail-check-wie-af {
  color: var(--kleur-succes);
}

.proefles-detail-check-actie {
  justify-self: end;
}

.proefles-detail-notitie-form {
  display: flex;
  gap: 0.5rem;
}

.proefles-detail-notitie-form input {
  flex: 1 1 auto;
}

.proefles-detail-notitie {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: var(--kleur-achtergrond);
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* pre-line, geen zelfgebouwde <br> — meerregelige notities/berichten zijn
   onvertrouwde tekst (widget/kader-invoer); Jinja's autoescape dekt HTML-
   injectie af, dit is puur de opmaak van echte regeleindes. */
.proefles-detail-notitie-tekst {
  white-space: pre-line;
}

.proefles-detail-notitie-meta {
  font-size: 0.75rem;
  color: #666;
}

.proefles-detail-log-rij {
  display: grid;
  grid-template-columns: 9.375rem minmax(0, 1fr) 10rem;
  gap: 0.75rem;
  align-items: center;
  min-height: 2.25rem;
  border-top: 1px solid #eee;
  font-size: 0.875rem;
}

.proefles-detail-log-wie {
  text-align: right;
}

.proefles-detail-select {
  height: 2.375rem;
  padding: 0 0.625rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 0.875rem;
  box-sizing: border-box;
  font: inherit;
  width: 100%;
}

.proefles-detail-select-groot {
  flex: 1 1 auto;
}

.proefles-detail-textarea {
  min-height: 3.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.proefles-detail-fase-rij {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.proefles-detail-afhaken {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

.proefles-detail-afhaken-titel {
  font-size: 0.875rem;
  font-weight: bold;
}

.proefles-detail-afhaken-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.proefles-detail-veldjes {
  display: grid;
  grid-template-columns: 6.875rem minmax(0, 1fr);
  gap: 0.375rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.proefles-detail-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proefles-detail-contactknoppen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.proefles-detail-toewijzen {
  padding-top: 0.5rem;
  border-top: 1px solid #eee;
}

.proefles-detail-label-boven {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.proefles-detail-toestemming-ja {
  color: var(--kleur-succes);
}

.proefles-detail-toestemming-nee {
  color: var(--kleur-fout);
}

.proefles-detail-avg-acties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 900px) {
  .proefles-detail-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .proefles-detail-check-rij,
  .proefles-detail-log-rij {
    grid-template-columns: 1fr;
    row-gap: 0.25rem;
  }

  .proefles-detail-check-actie {
    justify-self: start;
  }

  .proefles-detail-contactknoppen,
  .proefles-detail-avg-acties {
    grid-template-columns: 1fr;
  }

  /* Tikvlakken >= 44px op mobiel (bouwafspraken.md — bekende valkuil). */
  .knop-detail,
  .knop-detail-klein {
    min-height: 2.75rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Repeterende agenda-items — geannuleerd (Alembic 024, planning/CLAUDE.md).
   Een geannuleerd voorkomen blijft zichtbaar in de ingelogde agenda (i.p.v.
   stil te verdwijnen), maar duidelijk gedempt/doorgestreept — dezelfde
   "wél zien, niet verwarren met een actief item"-gedachte als .buiten-maand
   hierboven. ══════════════════════════════════════════════════════════ */

.pil-geannuleerd {
  background: #fbe0e0;
  color: #8a1f1f;
}

.agenda-item-geannuleerd,
.maandraster-item-geannuleerd .maandraster-item-titel {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════
   Startscherm (dashboard.html) — bento-raster. Tegels verschillen in
   grootte naar belang (b2/b3/b4 = 2/3/4 kolommen breed, h2 = twee rijen
   hoog). Het raster reageert op zijn EIGEN breedte (container query) i.p.v.
   de schermbreedte: met het zijmenu erbij is de inhoud op een laptop al
   smaller dan het scherm. 4 kolommen → 2 → 1. ══════════════════════════ */

.startscherm {
  container-type: inline-size;
}

.startscherm-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.startscherm-kop h1 {
  margin: 0;
}

.startscherm-kop .hint {
  margin: 0.2rem 0 0;
}

.seizoen-pil {
  font-size: 0.82rem;
  color: #6b6560;
  background: var(--kleur-kaart);
  border: 1px solid #e3e0dc;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

/* align-items:start: een tegel is zo hoog als zijn inhoud, i.p.v. mee te
   rekken met een lange buurtegel (lege lap). De uitgelichte tegel rekt wel
   op over zijn twee rijen (.tegel-held). */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 0.9rem;
}

.tegel {
  background: var(--kleur-kaart);
  border: 1px solid #e7e4e0;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.tegel.b2 { grid-column: span 2; }
.tegel.b3 { grid-column: span 3; }
.tegel.b4 { grid-column: span 4; }
.tegel.h2 { grid-row: span 2; }

.tegel-kop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tegel-kop h2 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.3;
}

.tegel-icoon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fdeee3;
  color: var(--kleur-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tegel-icoon .icoon {
  width: 17px;
  height: 17px;
}

.tegel-meer {
  margin-left: auto;
  font-size: 0.84rem;
  color: var(--kleur-accent);
  text-decoration: none;
  white-space: nowrap;
}

.tegel-intro {
  margin: -0.2rem 0 0;
}

.tegel p {
  margin: 0;
}

/* Knoppen onderaan de tegel, ook als de tegel hoger is dan zijn inhoud. */
.tegel-voet {
  margin-top: auto;
}

.tegel-rij {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid #eeebe7;
}

.tegel-kop + .tegel-rij,
.tegel-intro + .tegel-rij {
  border-top: 0;
}

.tegel-rij small {
  display: block;
  color: #6b6560;
  font-size: 0.82rem;
}

.tegel-rij .pil {
  margin-left: 0;
  white-space: nowrap;
}

.tegel-getal {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tegel-getal small {
  font-size: 0.85rem;
  font-weight: normal;
  color: #6b6560;
  margin-left: 0.4rem;
}

.pil-ok { background: #e7f3e8; color: var(--kleur-succes); }
.pil-let-op { background: #fdf0e0; color: #b85c00; }
.pil-wedstrijd { background: #fdeee3; color: #c0510f; }
.pil-training { background: #eceff1; color: #455a64; }
.pil-club { background: #e7f3e8; color: var(--kleur-succes); }

.knop-donker {
  background: var(--kleur-nav-achtergrond);
  border-color: var(--kleur-nav-achtergrond);
  color: #fff;
}

/* De uitgelichte tegel ("Volgende …"): zwart, groot, datum voorop. */
.tegel-held {
  align-self: stretch;
  background: var(--kleur-nav-achtergrond);
  border-color: var(--kleur-nav-achtergrond);
  color: #f3efe9;
}

.tegel-held .tegel-icoon {
  background: var(--kleur-merk);
  color: var(--kleur-nav-achtergrond);
}

.tegel-held .tegel-meer {
  color: #f5a364;
}

.held-wanneer {
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.1;
  margin-top: 0.4rem;
}

.held-wanneer span {
  display: block;
  color: var(--kleur-merk);
}

.held-wat {
  font-size: 1.02rem;
  color: #d9d5d0;
}

.held-wat small {
  display: block;
  margin-top: 0.15rem;
  color: #9c958e;
  font-size: 0.88rem;
}

.tegel-held .knop:not(.knop-primair) {
  background: #2d2a27;
  border-color: #3a3632;
  color: #fff;
}

.tegel-held .knop-primair {
  color: var(--kleur-nav-achtergrond);
  font-weight: bold;
}

/* Open punten (beheerder), tot het eigen beheerpaneel er is. */
.kpi-rij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.kpi {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  text-decoration: none;
  font-size: 0.88rem;
}

.kpi b {
  display: block;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.kpi:hover {
  background: #fdeee3;
}

/* Komende activiteiten: alleen datumblokje + titel + soort. */
.activiteiten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.activiteiten li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0;
  border-top: 1px solid #eeebe7;
}

.activiteiten li:first-child {
  border-top: 0;
}

.activiteiten a {
  color: var(--kleur-tekst);
  font-weight: 600;
  text-decoration: none;
}

.activiteiten a:hover {
  text-decoration: underline;
}

.activiteiten .pil {
  margin-left: 0;
  white-space: nowrap;
}

.datumblok {
  text-align: center;
  border-radius: 9px;
  background: var(--kleur-achtergrond);
  padding: 0.25rem 0 0.3rem;
  line-height: 1.1;
}

.datumblok small {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6560;
}

.datumblok b {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

@container (max-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tegel.b3,
  .tegel.b4 {
    grid-column: span 2;
  }
}

@container (max-width: 520px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tegel.b2,
  .tegel.b3,
  .tegel.b4 {
    grid-column: auto;
  }

  .tegel.h2 {
    grid-row: auto;
  }

  .kpi-rij {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Beheerpaneel (_beheerpaneel.html, beheerpaneel.py) — bewust anders dan de
   ledentegels: compacter, lijsten en tabellen i.p.v. grote kaarten, en
   ernst (probleem/aandacht/in orde) als vorm + kleur zodat wat aandacht
   vraagt in één oogopslag opvalt. 12-koloms raster; op smalle inhoud
   (container query op .startscherm) alles onder elkaar. ═══════════════ */

.beheer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 0.9rem;
}

.paneel {
  grid-column: span 12;
  background: var(--kleur-kaart);
  border: 1px solid #e7e4e0;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.paneel-8 { grid-column: span 8; }
.paneel-6 { grid-column: span 6; }
.paneel-4 { grid-column: span 4; }

.paneel-kop {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.paneel-kop h2 {
  margin: 0;
  font-size: 0.98rem;
}

.paneel-kop a {
  font-size: 0.84rem;
  color: var(--kleur-accent);
  text-decoration: none;
}

.paneel-kop .stempel {
  margin-left: auto;
  font-size: 0.78rem;
  color: #6b6560;
  font-variant-numeric: tabular-nums;
}

.paneel p {
  margin: 0;
}

.paneel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paneel small {
  display: block;
  color: #6b6560;
  font-size: 0.8rem;
}

/* Ernst: vierkantje (probleem = rood, aandacht = oranje, in orde = groen). */
.ernst {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.ernst-probleem { background: var(--kleur-fout); }
.ernst-aandacht { background: var(--kleur-waarschuwing); }
.ernst-ok { background: var(--kleur-succes); }

.gezondheid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.gezondheid-teller {
  display: grid;
  gap: 0.35rem;
}

.gezondheid-teller li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.gezondheid-teller b {
  font-size: 1.5rem;
  min-width: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.meldingenlijst li,
.inbox li,
.versheid li,
.acties-log li {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid #eeebe7;
  font-size: 0.9rem;
}

.meldingenlijst li:first-child,
.inbox li:first-child,
.versheid li:first-child,
.acties-log li:first-child {
  border-top: 0;
}

.meldingenlijst li {
  grid-template-columns: 10px minmax(0, 1fr) auto;
}

.meldingenlijst a {
  font-size: 0.84rem;
  font-weight: bold;
  color: var(--kleur-accent);
  text-decoration: none;
  white-space: nowrap;
}

.inbox li {
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
}

.inbox-aantal {
  text-align: center;
  font-size: 1.15rem;
  font-weight: bold;
  background: var(--kleur-achtergrond);
  border-radius: 8px;
  padding: 0.3rem 0;
  font-variant-numeric: tabular-nums;
}

.versheid li {
  grid-template-columns: minmax(0, 1fr) auto;
}

.versheid .pil,
.taken .pil {
  margin-left: 0;
  white-space: nowrap;
}

.pil-fout { background: #fbe9e7; color: var(--kleur-fout); }

.taken {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.taken th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6560;
  padding: 0 0.5rem 0.4rem 0;
}

.taken td {
  padding: 0.45rem 0.5rem 0.45rem 0;
  border-top: 1px solid #eeebe7;
}

.taken th:last-child,
.taken td:last-child {
  text-align: right;
  padding-right: 0;
}

.tijd {
  font-variant-numeric: tabular-nums;
  color: #6b6560;
  white-space: nowrap;
}

.roostergaten {
  display: grid;
  gap: 0.5rem;
}

.roostergaten li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 4rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
}

.roostergaten b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gatenbalk {
  width: 100%;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  display: block;
}

.gat-open { fill: var(--kleur-fout); }
.gat-onbevestigd { fill: #f2b36f; }
.gat-bevestigd { fill: var(--kleur-succes); }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.78rem;
  color: #6b6560;
}

.legenda span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 6px;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.leg-bevestigd::before { background: var(--kleur-succes); }
.leg-onbevestigd::before { background: #f2b36f; }
.leg-open::before { background: var(--kleur-fout); }

.acties-log li {
  grid-template-columns: 7.5rem minmax(0, 1fr);
}

/* Lange e-mailadressen (actor/onderwerp, meldingen) mogen breken i.p.v. de
   pagina op mobiel breder te maken dan het scherm. */
.acties-log li > span:last-child,
.meldingenlijst li > div,
.inbox li > div {
  overflow-wrap: anywhere;
}

.checklist {
  display: grid;
  gap: 0.3rem;
  font-size: 0.88rem;
}

.checklist li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.checklist li > span:first-child {
  width: 1rem;
  font-weight: bold;
}

.checklist .klaar > span:first-child { color: var(--kleur-succes); }
.checklist .open > span:first-child { color: var(--kleur-waarschuwing); }

.checklist small {
  display: inline;
}

.cijferstrook {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  align-items: baseline;
  font-size: 0.88rem;
  color: #6b6560;
}

.cijferstrook b {
  font-size: 1.45rem;
  color: var(--kleur-tekst);
  margin-right: 0.3rem;
  font-variant-numeric: tabular-nums;
}

/* Gegevens van één importregel (snapshots/review.html). */
.gegevens-lijst {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0.75rem;
}

.gegevens-lijst dt {
  color: #6b6560;
}

.gegevens-lijst dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@container (max-width: 760px) {
  .paneel-8,
  .paneel-6,
  .paneel-4 {
    grid-column: span 12;
  }

  .gezondheid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 520px) {
  .acties-log li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .inbox li {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .inbox .knop {
    grid-column: 2;
    justify-self: start;
  }

  .meldingenlijst li {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .meldingenlijst a {
    grid-column: 2;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   "Jouw wedstrijddag" (_wedstrijddag.html, wedstrijddag.py): een brede
   tegel met twee kolommen — wedstrijden | bardiensten + wastas.
   ═════════════════════════════════════════════════════════════════════ */

.wd-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.25rem;
}

.wd-kolommen > div {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.wd-kop {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6560;
}

.wd-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-lijst li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid #eeebe7;
  font-size: 0.9rem;
}

.wd-lijst li:first-child {
  border-top: 0;
}

.wd-lijst li:has(> .tijd) {
  grid-template-columns: 3rem minmax(0, 1fr) auto;
}

.wd-lijst a {
  color: var(--kleur-tekst);
  text-decoration: none;
}

.wd-lijst a:hover {
  text-decoration: underline;
}

.wd-lijst small {
  display: block;
  color: #6b6560;
  font-size: 0.8rem;
}

.wd-lijst .pil {
  margin-left: 0;
  white-space: nowrap;
}

.wd-lijst .tijd {
  font-weight: bold;
  color: var(--kleur-tekst);
}

/* Eigen team: zachte oranje achtergrond over de volle rij. */
.wd-lijst li.wd-eigen {
  background: #fdeee3;
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 8px;
  border-top-color: transparent;
}

/* "Jij (of je kind) bent aan de beurt voor de wastas": bovenaan, opvallend. */
.wastas-beurt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fdeee3;
  border: 1.5px solid var(--kleur-merk);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
}

.wastas-beurt .icoon {
  width: 22px;
  height: 22px;
  color: var(--kleur-accent);
}

.wastas-beurt small {
  display: block;
  color: #6b6560;
  font-size: 0.8rem;
}

@container (max-width: 760px) {
  .wd-kolommen {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Instagram-tegel (dashboard.html, jobs/instagram.py): drie vierkante
   posts naast elkaar, afbeeldingen via /instagram/<id>. */
.insta-icoon {
  background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7);
  color: #fff;
}

.insta-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.insta-posts a {
  display: grid;
  gap: 0.3rem;
  color: #6b6560;
  font-size: 0.78rem;
  line-height: 1.3;
  text-decoration: none;
}

.insta-posts img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--kleur-achtergrond);
}

.insta-posts span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tegel-kop-link {
  color: inherit;
  text-decoration: none;
}

.tegel-kop-link:hover {
  text-decoration: underline;
}


/* Uitzonderingen op vaste slots (vakanties): gestreepte placeholder */
.uitzondering-cel, .agenda-uitzondering {
  border: 1px dashed #999; background: #f0f0f0; color: #555;
  border-radius: 4px; padding: 2px 6px; font-size: 0.85em; display: block; margin: 2px 0;
}
.uitzondering-markering { border-color: #d97706; background: #fef3c7; color: #92400e; }
.jaar-dag.uitzondering { outline: 1px dashed #999; outline-offset: -2px; }
.jaar-legenda-uitzondering { background: var(--kleur-kaart); border: 1px dashed #999; }

/* ══ TV-beheer (#141) — mockup Main/SlideBewerken/Instellingen/BeheerMobiel ══
   Alles scoped met .tv-*; geen inline style="" (CSP). Breakpoint 720px zoals
   de rest van het portaal: tabelrijen worden kaarten met tikvlakken van 44px. */
.tv-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tv-kop-titel {
  flex: 1 1 0;
  min-width: 0;
}

.tv-kop h1 {
  font-size: 32px;
  line-height: 38px;
  margin: 0 0 0.35rem;
}

.tv-linkrij {
  margin: 0;
}

.tv-kop-acties {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.tv-heartbeat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0 0.75rem;
  font-size: 0.9rem;
  color: #666;
}

.tv-stip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
  flex: 0 0 auto;
}

.tv-heartbeat-online .tv-stip,
.tv-stip-online {
  background: var(--kleur-succes);
}

.tv-heartbeat-offline .tv-stip,
.tv-stip-offline {
  background: var(--kleur-fout);
}

.tv-knop-hoog {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

.tv-filterbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 14px;
}

.tv-filterbalk .hint {
  font-size: 14px;
}

.tv-ruimte {
  flex: 1 1 auto;
}

.tv-scheiding {
  width: 1px;
  height: 22px;
  background: #ddd;
  margin: 0 6px;
}

.tv-vink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  color: var(--kleur-tekst);
  text-decoration: none;
}

.tv-vink-vak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  border-radius: 3px;
  background: #fff;
  color: #fff;
}

.tv-vink-vak svg {
  visibility: hidden;
}

.tv-vink-aan .tv-vink-vak {
  border-color: var(--kleur-merk);
  background: var(--kleur-merk);
}

.tv-vink-aan .tv-vink-vak svg {
  visibility: visible;
}

.tv-lijstkaart {
  padding: 0;
  overflow: hidden;
}

.tv-lijstkop,
.tv-rij {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}

.tv-lijstkop {
  height: 36px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  color: #666;
}

.tv-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tv-rij {
  height: 84px;
  border-bottom: 1px solid #eee;
  background: var(--kleur-kaart);
}

.tv-rij:last-child {
  border-bottom: none;
}

.tv-rij-verlopen {
  opacity: 0.55;
}

.tv-rij-sleept {
  opacity: 0.4;
}

.tv-lijst-sleept .tv-rij {
  cursor: grabbing;
}

.tv-lijstkop .tv-kol-thumb { background: none; height: auto; }
.tv-kol-volgorde { flex: 0 0 64px; display: flex; align-items: center; gap: 8px; }
.tv-kol-thumb    { flex: 0 0 112px; height: 63px; background: #1a1a1a; border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tv-kol-titel    { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tv-kol-soort    { flex: 0 0 104px; }
.tv-kol-duur     { flex: 0 0 64px; font-size: 14.4px; }
.tv-kol-plan     { flex: 0 0 236px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.tv-kol-aan      { flex: 0 0 88px; display: flex; align-items: center; }
.tv-kol-acties   { flex: 0 0 160px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tv-kol-acties form,
.tv-kol-aan form { margin: 0; }

.tv-greep {
  color: #bbb;
  cursor: grab;
  flex: 0 0 auto;
}

.tv-nr {
  font-size: 14.4px;
  color: #666;
  width: 20px;
}

.tv-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  background: #2c2c2c;
  color: #f0a830;
}

.tv-thumb-afbeelding { background: #0b2a45; color: #f0a830; }
.tv-thumb-flickr { background: #2e6b3a; color: #fff; }
.tv-thumb-evenementen { background: #3a2a55; color: #f0a830; }

.tv-titel {
  font-size: 15px;
  font-weight: bold;
  color: var(--kleur-tekst);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-titel:hover {
  text-decoration: underline;
}

.tv-sub {
  font-size: 12.8px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-meta {
  display: none;
}

.tv-plan-sub {
  font-size: 12px;
  color: #666;
}

.tv-pil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.tv-pil-groot {
  height: 24px;
  padding: 0 10px;
  font-size: 12.8px;
}

.tv-pil .tv-stip {
  width: 8px;
  height: 8px;
  background: currentColor;
}

.tv-soort-afbeelding { background: #fff3e0; color: var(--kleur-accent); }
.tv-soort-agenda { background: #e3f2fd; color: #1565c0; }
.tv-soort-flickr { background: #e8f5e9; color: var(--kleur-succes); }
.tv-soort-evenementen { background: #f3e5f5; color: #6a1b9a; }
.tv-plan-actief { background: #e8f5e9; color: var(--kleur-succes); }
.tv-plan-gepland { background: #e3f2fd; color: #1565c0; }
.tv-plan-verlopen { background: #eee; color: #666; }
.tv-plan-altijd { background: #eee; color: var(--kleur-tekst); }

/* Aan/uit-schakelaar: <button role="switch"> in het overzicht, of de vorm
   achter een verborgen checkbox in formulieren. */
.tv-schakel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 40px;
  height: 22px;
  padding: 0 2px;
  border: 0;
  border-radius: 999px;
  background: #ccc;
  cursor: pointer;
}

.tv-schakel-aan {
  background: var(--kleur-merk);
  justify-content: flex-end;
}

.tv-schakel-knop {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.tv-schakel::before {
  /* Groter tikvlak dan de zichtbare schakelaar. */
  content: "";
  position: absolute;
  inset: -8px -6px;
}

.tv-schakel-label {
  display: inline-block;
  margin: 0;
  position: relative;
}

.tv-schakel-vink {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.tv-schakel-vink:checked + .tv-schakel-vorm {
  background: var(--kleur-merk);
  justify-content: flex-end;
}

.tv-schakel-vink:focus-visible + .tv-schakel-vorm,
.tv-schakel:focus-visible,
.tv-pijl:focus-visible {
  outline: 2px solid var(--kleur-merk);
  outline-offset: 2px;
}

.tv-pijl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--kleur-tekst);
  cursor: pointer;
}

.tv-pijl:disabled {
  opacity: 0.35;
  cursor: default;
}

.tv-bewerk {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  margin-left: 6px;
  font-size: 14px;
}

.tv-rotatie {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
}

.tv-rotatie-kop {
  font-size: 14.4px;
  font-weight: bold;
}

.tv-rotatie-lijst {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
}

.tv-rotatie-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tv-blok {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #2c2c2c;
}

.tv-blok-afbeelding { background: #0b2a45; }
.tv-blok-flickr { background: #2e6b3a; }
.tv-blok-evenementen { background: #3a2a55; }

.tv-rotatie-totaal {
  font-size: 14.4px;
}

.tv-voet {
  margin-top: 0.75rem;
}

/* — Bewerkpagina's (slide + instellingen) — */
.tv-bewerkpagina {
  max-width: 1100px;
}

.tv-bewerkkop {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 14.4px;
}

.tv-bewerkkop-regel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.tv-bewerkkop h1 {
  font-size: 28px;
  line-height: 34px;
  margin: 0;
}

.tv-bewerkkop-pos {
  color: #666;
  line-height: 34px;
}

.tv-bewerkkop-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tv-bewerkgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.tv-bewerkkolom-hoofd {
  grid-column: span 2;
  min-width: 0;
}

.tv-bewerkkolom-hoofd .tv-formulier,
.tv-bewerkkolom-zij {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tv-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tv-kaart + .tv-kaart {
  margin-top: 0;
}

.tv-kaart h2 {
  font-size: 18px;
  margin: 0;
}

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

.tv-formulier label,
.tv-instellingen label {
  margin-bottom: 0;
}

.tv-velden.tv-velden-weergave {
  grid-template-columns: 2fr 1fr;
}

.tv-velden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.tv-veld-breed {
  grid-column: 1 / -1;
}

.tv-veldrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 30px;
}

.tv-hintblok {
  padding: 0.75rem;
  background: var(--kleur-achtergrond);
  border-radius: 4px;
  font-size: 13px;
  line-height: 19px;
  color: #666;
}

.tv-stepper {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.tv-stepper input[type="number"],
.formulier .tv-stepper input[type="number"] {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin-top: 0;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.tv-stepper input[type="number"]::-webkit-outer-spin-button,
.tv-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tv-stepper-knop {
  width: 38px;
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--kleur-tekst);
}

.tv-radiorij {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.formulier .tv-radio,
.tv-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 30px;
  margin: 0;
  font-size: 14.4px;
}

.tv-radio input,
.tv-vinklabel input {
  accent-color: var(--kleur-merk);
}

.formulier .tv-vinklabel,
.tv-vinklabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 30px;
  font-size: 14.4px;
}

.tv-groep {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tv-groep legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 14.4px;
}

.tv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formulier .tv-chip,
.tv-chip {
  position: relative;
  display: inline-flex;
  margin: 0;
}

.tv-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.tv-chip span,
.tv-chip-uit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: var(--kleur-tekst);
}

.tv-chip-uit {
  color: #888;
  background: #f0f0f0;
}

.tv-chip input:checked + span {
  background: var(--kleur-merk);
  border-color: var(--kleur-merk);
  color: #fff;
}



/* ── Feedbackwidget (#133) ─────────────────────────────────────────────────
   Knop in de topbalk (desktop: pil + "Ingelogd als"; mobiel: icoon van 44x44
   in .mobiel-kop) en het paneel (desktop 420px rechts onder de balk; mobiel
   bottom-sheet). Zonder JavaScript opent het paneel via :target; met
   static/feedback.js via de klasse .open. Mockup: artboards A1-A6. */
.feedback-balk {
  position: absolute;
  top: 0;
  left: var(--zijmenu-breedte);
  right: 0;
  height: 3rem;
  z-index: 10;
  background: var(--kleur-nav-achtergrond);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0 1rem;
  color: #ccc;
  font-size: 0.9rem;
}

/* Ruimte voor de balk bovenin de inhoudskolom (de balk bestaat alleen als de
   widget er is, dus niet tijdens impersonatie; op smalle schermen is hij uit). */
.feedback-balk ~ .inhoud {
  padding-top: calc(1.5rem + 3rem);
}

.feedback-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--kleur-merk);
  text-decoration: none;
  font-weight: 600;
}

.feedback-knop .icoon {
  width: 18px;
  height: 18px;
}

/* De <a> is het tikvlak (44px hoog, zie #129); de zichtbare pil erin is 36px,
   zoals in de mockup. */
.feedback-knop-pil {
  min-height: 44px;
}

.feedback-pil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0 0.875rem;
  border: 1px solid var(--kleur-merk);
  border-radius: 999px;
  font-size: 0.9rem;
}

.feedback-knop-pil:hover .feedback-pil,
.feedback-knop-pil[aria-expanded="true"] .feedback-pil {
  background: var(--kleur-merk);
  color: #1a1a1a;
}

.feedback-knop-icoon {
  display: none;
  width: 44px;
  height: 44px;
  justify-content: center;
}

.feedback-knop-icoon .icoon {
  width: 24px;
  height: 24px;
}

.mobiel-kop-rechts {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.feedback-bedankt a {
  color: inherit;
  font-weight: bold;
}

.feedback-paneel {
  display: none;
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 40;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  flex-direction: column;
  background: #fff;
  color: var(--kleur-tekst);
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12);
}

.feedback-paneel:target,
.feedback-paneel.open {
  display: flex;
}

.feedback-scrim {
  display: none;
}

.feedback-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 14px 16px 0;
}

.feedback-kop h2 {
  margin: 0;
  font-size: 1.125rem;
}

.feedback-kop-rechts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feedback-link {
  color: var(--kleur-accent);
  font-size: 0.875rem;
}

.feedback-sluit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: #666;
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
}

.feedback-sluit:hover {
  background: #f0f0f0;
}

.feedback-formulier {
  display: grid;
  gap: 14px;
  padding: 12px 16px 16px;
}

.feedback-veld {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.feedback-label {
  display: block;
  padding: 0;
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

.feedback-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.feedback-segment label {
  position: relative;
  display: block;
  border-right: 1px solid #ccc;
}

.feedback-segment label:last-child {
  border-right: 0;
}

.feedback-segment input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.feedback-segment span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 0.9375rem;
}

.feedback-segment input:checked + span {
  background: var(--kleur-merk);
  color: #fff;
  font-weight: 700;
}

.feedback-segment input:focus-visible + span {
  outline: 2px solid var(--kleur-nav-achtergrond);
  outline-offset: -4px;
}

.feedback-formulier textarea {
  display: block;
  width: 100%;
  min-height: 112px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
  font-size: 0.9375rem;
  resize: vertical;
}

.feedback-formulier textarea[aria-invalid="true"] {
  border-color: var(--kleur-fout);
}

.feedback-teller {
  margin: 4px 0 0;
  text-align: right;
  font-size: 0.78rem;
  color: #666;
}

.feedback-fout {
  margin: 6px 0 0;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  background: var(--kleur-fout-achtergrond);
  color: var(--kleur-fout);
  font-size: 0.875rem;
}

.feedback-fout-algemeen {
  margin: 0;
}

.feedback-context {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 4px;
  background: var(--kleur-achtergrond);
  color: #666;
  font-size: 0.84rem;
}

.feedback-context b {
  color: var(--kleur-tekst);
}

.feedback-context-kop,
.feedback-context dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.feedback-context dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.feedback-context dt {
  flex: 0 0 auto;
}

.feedback-context dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

/* Screenshot-veld (#135). Mockup: artboards A2 (kiezen) en A5 (gekozen). */
.feedback-optioneel {
  font-weight: 400;
  color: #666;
}

.feedback-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.feedback-upload[hidden],
.feedback-bijlage[hidden] {
  display: none;
}

.feedback-bestand {
  max-width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 0.9375rem;
  color: #666;
}

.feedback-bestand::file-selector-button {
  min-height: 44px;
  margin-right: 10px;
  padding: 0 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--kleur-tekst);
  font: inherit;
  cursor: pointer;
}

.feedback-upload-klein {
  font-size: 0.8125rem;
  color: #666;
}

.feedback-bijlage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 0.84rem;
}

.feedback-bijlage-thumb {
  object-position: top;
  flex: 0 0 auto;
  width: 56px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: var(--kleur-achtergrond);
}

.feedback-bijlage-thumb {
  cursor: zoom-in;
}

.feedback-voorbeeld {
  max-height: 45vh;
  margin-top: 6px;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

.feedback-voorbeeld img {
  display: block;
  max-width: none;
  height: auto;
}

.feedback-bijlage-naam {
  flex: 1 1 8rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.feedback-bijlage-knop {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.feedback-privacy[hidden] {
  display: none;
}

.feedback-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  color: #666;
}

.feedback-privacy i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1.5px solid var(--kleur-waarschuwing);
  border-radius: 50%;
  color: var(--kleur-waarschuwing);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

.feedback-voet {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.feedback-voet-midden {
  justify-content: center;
}

.feedback-knop-tekst,
.feedback-verstuur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--kleur-tekst);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.feedback-verstuur {
  background: var(--kleur-merk);
  border-color: var(--kleur-merk);
  color: #fff;
}


.tv-chip input:checked + span::before {
  content: "✓";
  font-weight: bold;
}

.tv-chip input:focus-visible + span {
  outline: 2px solid var(--kleur-merk);
  outline-offset: 2px;
}

.tv-fout input,
.tv-fout select,
.tv-fout.tv-groep {
  border-color: var(--kleur-fout);
}

.tv-foutmelding {
  display: block;
  margin-top: 0.25rem;
  font-size: 13px;
  color: var(--kleur-fout);
}

.tv-planuitleg {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  font-size: 14px;
  background: #eee;
}

.tv-planuitleg-actief { background: #e8f5e9; color: var(--kleur-succes); }
.tv-planuitleg-gepland { background: #e3f2fd; color: #1565c0; }

.tv-knoppen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tv-knoppen .knop {
  text-align: center;
}

.tv-bevestig {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 14px;
}

.tv-historie {
  display: flex;
  gap: 0.6rem;
  font-size: 14px;
}

.tv-historie-stip {
  flex: 0 0 8px;
  height: 8px;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--kleur-merk);
}

.tv-historie-tijd {
  display: block;
  font-size: 12px;
}

.tv-historie-link {
  font-size: 14px;
  color: var(--kleur-merk);
}

.tv-instellingen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.tv-scherm {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 14.4px;
}

.tv-scherm a {
  margin-left: auto;
  color: var(--kleur-merk);
}

.tv-actiebalk {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (max-width: 720px) {
  .tv-kop h1 { font-size: 22px; line-height: 28px; }
  .tv-kop-acties { width: 100%; }
  .tv-kop-acties .knop { min-height: 44px; }
  .tv-filterbalk .hint,
  .tv-scheiding { display: none; }

  .tv-lijstkop { display: none; }
  .tv-lijstkaart { background: none; box-shadow: none; overflow: visible; }
  .tv-lijst { display: flex; flex-direction: column; gap: 0.5rem; }

  /* Kaart per slide: bovenregel (thumb, titel + meta, schakelaar), onderregel
     (pijlen, bewerken) — tikvlakken van minimaal 44px. */
  .tv-rij {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    grid-template-areas: "thumb titel aan" "acties acties acties";
    height: auto;
    gap: 6px 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    box-shadow: var(--schaduw-kaart);
  }
  .tv-rij:last-child { border: 0; }
  .tv-kol-volgorde,
  .tv-kol-soort,
  .tv-kol-duur,
  .tv-kol-plan { display: none; }
  .tv-kol-thumb { grid-area: thumb; width: 64px; height: 36px; }
  .tv-kol-titel { grid-area: titel; gap: 2px; }
  .tv-sub { display: none; }
  .tv-titel { font-size: 14.4px; }
  .tv-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; }
  .tv-meta .tv-pil { height: 18px; padding: 0 7px; font-size: 11px; }
  .tv-kol-aan { grid-area: aan; flex: none; justify-content: center; }
  .tv-kol-aan .tv-schakel { width: 44px; height: 24px; }
  .tv-kol-aan .tv-schakel-knop { width: 20px; height: 20px; }
  .tv-kol-acties { grid-area: acties; flex: none; justify-content: flex-start; gap: 8px; }
  .tv-pijl { width: 44px; height: 44px; }
  .tv-bewerk { height: 44px; margin-left: auto; border-color: transparent; background: none; color: var(--kleur-merk); }

  .tv-bewerkgrid,
  .tv-instellingen-grid { grid-template-columns: 1fr; }
  .tv-bewerkkolom-hoofd { grid-column: auto; }
  .tv-velden { grid-template-columns: 1fr; }
  .tv-bewerkkop h1 { font-size: 22px; line-height: 28px; }
  .tv-bewerkkop-pos { line-height: 1.4; }
  .tv-stepper-knop { width: 44px; height: 44px; }
  .tv-radio, .tv-vinklabel, .tv-chip span { min-height: 44px; }
  .tv-chip span { padding: 0 14px; }
  .tv-actiebalk .knop,
  .tv-knoppen .knop { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

.knop-gevaar-omlijnd {
  background: #fff;
  color: var(--kleur-fout);
  border-color: var(--kleur-fout);
  width: 100%;
}

@media (max-width: 720px) {
  .tv-velden.tv-velden-weergave { grid-template-columns: 1fr; }
  .tv-thumb { font-size: 7px; letter-spacing: 0; }
  .tv-linkrij a,
  .tv-vink,
  .tv-titel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .tv-titel { display: block; line-height: 24px; padding: 10px 0; min-height: 44px; }
  .tv-kol-aan .tv-schakel { width: 48px; height: 28px; }
  .tv-kol-aan .tv-schakel-knop { width: 24px; height: 24px; }
  .tv-bewerkpagina .agenda-terug,
  .tv-historie-link,
  .tv-scherm a,
  .tv-bevestig,
  .tv-schakel-label,
  .tv-knoppen .knop,
  .knop-gevaar-omlijnd {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .knop-gevaar-omlijnd { justify-content: center; }
  .formulier .tv-radio,
  .formulier .tv-vinklabel {
    min-height: 44px;
  }
  .tv-kop { flex-direction: column; align-items: stretch; }
  .tv-kop-titel { flex: none; }
  .tv-kop-acties { flex-wrap: wrap; }
}

/* ── TV: afbeeldingen uploaden (#142) ─────────────────────────────────────
   Voorbeeld = de 16:9-"TV" met de afbeelding passend erin (contain), zoals het
   scherm hem toont. Zonder JavaScript is de bestandskiezer gewoon zichtbaar;
   tv-upload.js voegt klasse .tv-upload-js toe en toont dan de knop-vormige
   label i.p.v. de kale kiezer. Geen inline style (CSP). */
.tv-thumb-beeld {
  object-fit: contain;
  background: #1a1a1a;
  display: block;
}

.tv-uploadblok {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tv-voorbeeld {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 372px;
  background: #1a1a1a;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tv-voorbeeld-beeld {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tv-voorbeeld-tekst {
  color: #999;
  font-size: 14px;
  padding: 0 1rem;
  text-align: center;
}

.tv-voorbeeld-label {
  display: none;
  position: absolute;
  bottom: 8px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #777;
}
.tv-voorbeeld-links { left: 12px; }
.tv-voorbeeld-rechts { right: 12px; }
.tv-voorbeeld-met-rand .tv-voorbeeld-label { display: block; }

.tv-voorbeeld-kop { display: block; }

.tv-bestandsregel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.tv-bestandskeuze {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tv-bestandskeuze-label { display: inline-flex; align-items: center; cursor: pointer; }
.tv-kies-label { display: none; }

.tv-upload-js .tv-kies-label {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Met JavaScript is de kale kiezer verborgen (de label opent hem) en komt
   "Vervangen" pas na het kiezen van een bestand. Toetsenbordfocus blijft
   zichtbaar via :focus-within op de label. */
.tv-upload-js [data-upload-invoer] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.tv-upload-js .tv-bestandskeuze-label:focus-within .tv-kies-label {
  outline: 2px solid var(--kleur-merk);
  outline-offset: 2px;
}
.tv-upload-js [data-upload-verzenden][hidden] { display: none; }

.tv-hintblok-info {
  display: flex;
  gap: 0.75rem;
}
.tv-hintblok-info svg { flex: 0 0 auto; margin-top: 1px; }

.tv-upload-knop { white-space: nowrap; }

@media (max-width: 720px) {
  .tv-upload-knop { order: -1; flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .tv-bestandskeuze .knop,
  .tv-upload-js .tv-kies-label { min-height: 44px; }
  .tv-voorbeeld { max-height: none; }
}

.feedback-verstuur:hover {
  background: var(--kleur-accent);
}

.feedback-verstuur:disabled {
  opacity: 0.6;
  cursor: progress;
}

.feedback-bevestiging {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 16px 16px;
  text-align: center;
}

.feedback-bevestiging[hidden] {
  display: none;
}

.feedback-vink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kleur-succes-achtergrond);
  color: var(--kleur-succes);
}

.feedback-vink svg {
  width: 30px;
  height: 30px;
}

.feedback-bevestiging h3 {
  margin: 0;
  font-size: 1.19rem;
}

.feedback-bevestiging p {
  margin: 0;
  max-width: 34ch;
  color: #666;
  font-size: 0.9rem;
}

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

  .feedback-knop-icoon {
    display: inline-flex;
  }

  .feedback-balk ~ .inhoud {
    padding-top: 1rem;
  }

  .feedback-paneel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
  }

  .feedback-paneel::before {
    content: "";
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: #ccc;
  }

  .feedback-kop {
    padding-top: 8px;
  }

  .feedback-sluit {
    width: 44px;
    height: 44px;
  }

  .feedback-formulier {
    padding: 8px 16px 20px;
  }

  .feedback-formulier textarea {
    min-height: 96px;
  }

  .feedback-voet {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .feedback-knop-tekst,
  .feedback-verstuur {
    min-height: 48px;
  }

  .feedback-paneel:target ~ .feedback-scrim,
  .feedback-paneel.open ~ .feedback-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.35);
  }

  body.feedback-is-open {
    overflow: hidden;
  }
}

/* ── Agenda: poster bij een evenement (event_form.html, #poster-velden) ── */
.poster-voorbeeld {
  display: block;
  max-width: 160px;
  max-height: 160px;
  background: #1a1a1a;
  border-radius: 4px;
  object-fit: contain;
}

/* ── TV: beheeroverzicht van evenementposters (/admin/tv/posters) ────────── */
.tv-poster-miniatuur {
  display: block;
  width: 80px;
  max-height: 110px;
  background: #1a1a1a;
  border-radius: 4px;
  object-fit: contain;
}

.tabel td.tv-posters-cel-breed {
  white-space: normal;
}

/* ── Teampagina (personen/team_detail.html) ─────────────────────────────
   Samenstelling als enige weergave; bewerken, exporteren, lid toevoegen en
   ouder koppelen zijn vensters (<dialog class="modal">) die zonder JS via
   :target openen, het rijmenu is een <details>. Gedrag: static/personen-team-
   detail.js. */
.titelrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.titelrij h1 {
  margin: 0;
}

.titelrij-actie {
  margin-left: auto;
}

.knop-met-icoon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
}

.kaart-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.5rem;
}

.kaart-kop h2 {
  margin: 0;
}

.kaart-kop-actie {
  align-self: center;
  margin-left: auto;
}

.alleen-mobiel-tekst {
  display: none;
}

/* Prognose-uitklapper onder de samenstelling. */
.prognose {
  margin-top: 1rem;
}

.prognose > summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Vensters. Zonder JS: :target; met JS: showModal() (top layer + ::backdrop). */
.modal {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--kleur-kaart);
  color: var(--kleur-tekst);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal[open],
.modal:target {
  display: flex;
  flex-direction: column;
}

.modal:target:not([open]) {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  z-index: 60;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.3);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.modal-formulier {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modal-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
}

.modal-kop h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-sluit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  color: var(--kleur-tekst);
}

.modal-sluit:hover {
  background: #f0f0f0;
}

.modal-lijf {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.modal-voet {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #eee;
}

.modal-voet .knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-groep {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.modal-groep legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.modal-groep label {
  display: block;
  padding: 0.25rem 0;
}

.modal-onderwerp {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.modal h3 {
  margin: 1rem 0 0.25rem;
  font-size: 1rem;
}

.sectie-rand {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #eee;
}

.gevaar-zone {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--kleur-fout);
  border-radius: 6px;
  background: var(--kleur-fout-achtergrond);
}

.gevaar-zone h3 {
  margin-top: 0;
  color: var(--kleur-fout);
}

/* Bestaand/Nieuw zonder JS: twee radio's vóór de panelen, :checked ~ kiest. */
.segment-keuze {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.segment label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  cursor: pointer;
}

.segment label + label {
  border-left: 1px solid #ccc;
}

#lid-modus-bestaand:checked ~ .segment label[for="lid-modus-bestaand"],
#lid-modus-nieuw:checked ~ .segment label[for="lid-modus-nieuw"] {
  background: var(--kleur-merk);
  color: #fff;
  font-weight: 700;
}

#lid-modus-bestaand:focus-visible ~ .segment label[for="lid-modus-bestaand"],
#lid-modus-nieuw:focus-visible ~ .segment label[for="lid-modus-nieuw"] {
  outline: 2px solid var(--kleur-nav-achtergrond);
  outline-offset: -4px;
}

.segment-paneel {
  display: none;
}

#lid-modus-bestaand:checked ~ .segment-paneel-bestaand,
#lid-modus-nieuw:checked ~ .segment-paneel-nieuw {
  display: block;
}

.suggestielijst {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.suggestielijst li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
}

.suggestielijst small {
  display: block;
}

/* Rijmenu (⋯). Zonder JS staat de lijst in de flow onder de knop. */
.rij-acties {
  text-align: right;
}

.rij-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  list-style: none;
}

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

.rij-menu > summary:hover,
.rij-menu[open] > summary {
  background: #f0f0f0;
}

.rij-menu-kop {
  display: none;
  margin: 0;
  padding: 0.75rem 1rem 0.25rem;
  font-weight: 700;
}

.rij-menu-lijst {
  min-width: 15rem;
  margin-top: 0.25rem;
  padding: 0.25rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.rij-menu-lijst.zwevend {
  position: fixed;
  z-index: 50;
  margin: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.rij-menu-lijst a,
.rij-menu-lijst button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--kleur-tekst);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rij-menu-lijst a:hover,
.rij-menu-lijst button:hover {
  background: #f0f0f0;
}

.rij-menu-gevaar {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #eee;
}

.rij-menu-gevaar button {
  color: var(--kleur-fout);
}

/* "+"-knop: zweeft rechtsonder; .fab-ruimte laat de laatste rij eronderuit scrollen. */
.fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kleur-merk);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fab:hover {
  background: var(--kleur-accent);
}

.fab .icoon {
  width: 26px;
  height: 26px;
}

.fab-ruimte {
  height: 5rem;
}

@media (max-width: 720px) {
  .alleen-mobiel-tekst {
    display: inline;
  }

  .fab {
    right: 1rem;
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px) + 0.5rem);
  }

  .modal {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .modal-voet .knop {
    flex: 1 1 0;
    min-height: 48px;
  }

  /* De ⋯-knop staat rechtsboven in het kaartje van de rij. */
  .tabel-stapel tr:has(.rij-acties) {
    position: relative;
  }

  .tabel-stapel td.rij-acties {
    position: absolute;
    top: 0.25rem;
    right: 0;
    width: auto;
  }

  /* Ruimte voor de ⋯-knop aan de rechterkant van elke regel in het kaartje. */
  .tabel-stapel tr:has(.rij-acties) td:not(.rij-acties) {
    padding-right: 3.5rem;
  }

  /* Lijst als bottom-sheet boven de onderbalk; het scherm erachter is een
     doorzichtige knop: een tik erop sluit de <details> ook zonder JS. */
  .rij-menu-lijst,
  .rij-menu-lijst.zwevend {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: auto;
    z-index: 62;
    margin: 0;
    padding: 0 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.25);
  }

  .rij-menu-kop {
    display: block;
  }

  .rij-menu[open] > summary::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 61;
    background: rgba(0, 0, 0, 0.35);
  }

  .rij-menu-lijst a,
  .rij-menu-lijst button,
  .tabel-stapel td .rij-menu-lijst a {
    display: flex;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
  }
}