/* Herkenningsteken uitrol: versie 1.53, 11-11-2026 website wist oude cache (bij elke push bijwerken, zie CLAUDE.md) */
/* OVLNL Academy, huisstijl, overgenomen uit OVLNL_Academy_Brandingboek_v1.3.
   Kleuren/fonts hier NIET los aanpassen per pagina, dit is de ene bron. */

:root {
  --main: #061BA1;
  --supporting: #003755;
  --cta: #F77916;
  --cta-hover: #DE6C0E;
  --body-text: #4E4E4E;
  --body-text-soft: #7A7A7A;
  --line: #E1E6EC;
  --surface: #FFFFFF;
  --success: #1F9254;
  --success-bg: #E8F5EE;
  --error: #D64550;
  --error-bg: #FBEAEB;
  --warning: #E8A33D;
  --warning-bg: #FCF3E3;
  --info: #4E91ED;
  --info-bg: #E9F1FC;
  --neutral-bg: #EDEFF2;
  --neutral-text: #5B6470;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--body-text);
  font-family: "Open Sans", system-ui, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 { font-family: "Ubuntu", system-ui, sans-serif; margin: 0 0 8px; }
h1 { font-size: 22px; text-transform: uppercase; font-weight: 700; color: var(--main); }
h2 { font-size: 19px; text-transform: uppercase; font-weight: 400; color: var(--supporting); }
h3 { font-size: 16px; font-weight: 400; color: var(--supporting); }

a { color: var(--main); }

.wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px 72px; }
.smal { max-width: 420px; margin: 80px auto; padding: 0 24px; }

/* De voettekst met de link naar de privacyverklaring: rustig, maar op elk
   scherm aanwezig (Nr 31). */
.voettekst { max-width: 960px; margin: 0 auto; padding: 0 24px 34px; font-size: 12.5px; color: var(--body-text-soft); }
.voettekst a { color: var(--body-text-soft); }

/* De ingebedde weergave van de planning (planning.php?embed=1): de pagina
   staat dan in een kadertje op de eigen website. Geen eigen achtergrond en
   geen marge opzij, want de website eromheen zorgt daar al voor; zonder dit
   krijg je een witte bak met een dubbele rand eromheen.
   Let op: deze regels zijn specifieker dan .wrap, dus ze winnen ook van de
   mobiele variant verderop in dit bestand. Dat is hier de bedoeling. */
body.ingebed { background: transparent; }
body.ingebed .wrap { max-width: none; padding: 0 0 2px; }
.voettekst-ingebed { max-width: none; padding: 12px 0 2px; }

/* Een pagina met doorlopende tekst, zoals de privacyverklaring. Smaller dan
   .wrap: een regel van 960px leest niet prettig. De kopjes en opsommingen
   krijgen hier meer lucht dan in een formulier of tabel. */
.leespagina { max-width: 720px; margin: 40px auto; padding: 0 24px; }
.leespagina h2 { margin-top: 30px; }
.leespagina p { margin: 0 0 14px; }
.leespagina ul { margin: 0 0 14px; padding-left: 22px; }
.leespagina li { margin-bottom: 7px; }

/* De attentiebalk bovenaan het dashboard van de deelnemer: alleen als er iets
   nieuw is, met links naar de blokken verderop. */
.attentiebalk { margin: 0 0 22px; font-size: 15px; }
.attentiebalk a { font-weight: 700; }

/* Een voorbeeld van een mail zoals de ontvanger hem krijgt (de startmail,
   Nr 82): platte tekst, dus de regelafbrekingen tellen. */
.mailvoorbeeld { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--neutral-bg);
  border: 1px solid var(--line); border-radius: 5px; padding: 16px 18px; font-size: 14px; line-height: 1.55; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}
.topbar .merk { display: flex; align-items: center; gap: 12px; font-family: "Ubuntu", sans-serif; font-weight: 700; color: var(--supporting); text-transform: uppercase; font-size: 15px; }
.topbar img { height: 30px; }
.merk-label { font-size: 12px; letter-spacing: 0.04em; color: var(--main); border-left: 1.5px solid var(--line); padding-left: 12px; }
.topbar nav a { margin-left: 18px; font-size: 13.5px; color: var(--body-text-soft); text-decoration: none; }
.topbar nav a:hover { color: var(--main); }

.kaart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 30px;
  box-shadow: 0 1px 3px rgba(6,27,161,0.06);
}

label { display: block; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--body-text); margin: 16px 0 6px; }
label:first-of-type { margin-top: 0; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=time], input[type=tel], input[type=url], textarea, select {
  width: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: var(--body-text);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--main); }

/* Wachtwoordveld met een oogje om even mee te kunnen kijken wat je typt.
   Gebruikt op login.php en wachtwoord.php. */
.wachtwoordveld { position: relative; }
.wachtwoordveld input { padding-left: 44px; }
.toon-wachtwoord {
  position: absolute; top: 50%; left: 6px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  padding: 6px 8px; font-size: 16px; line-height: 1; color: var(--body-text-soft);
}

.btn {
  display: inline-block;
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--cta); color: #fff; }
.btn-primary:hover { background: var(--cta-hover); }
.btn-secondary { background: transparent; color: var(--main); border: 1.5px solid var(--main); }
/* Kleine knop in een tabelrij (bewerken, verwijderen, herstellen). Stond op
   41 plekken in 12 schermen als losse stijl-instructies uitgeschreven; hier
   staat hij één keer, zodat elke rijknop er hetzelfde uitziet. */
.btn-klein { padding: 5px 12px; font-size: 10.5px; }

/* Iets dat alleen op een telefoon zichtbaar is, of juist alleen daarbuiten.
   Gebruikt op het openbare planningsoverzicht: in de tabel staat de datum
   alleen bij de eerste regel van een lesdag, maar op mobiel is elke regel
   een los kaartje en hoort de datum er telkens bij. */
.alleen-mobiel { display: none; }

/* Toevoeg-formulieren: standaard ingeklapt, open pas na klikken op de knop. */
details.toevoegen { margin-bottom: 24px; }
details.toevoegen summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 5px;
  background: var(--cta);
  color: #fff;
  user-select: none;
}
details.toevoegen summary::-webkit-details-marker,
details.toevoegen summary::marker { display: none; content: ""; }
details.toevoegen summary:hover { background: var(--cta-hover); }
details.toevoegen summary .plus { font-size: 16px; line-height: 1; display: inline-block; transition: transform 0.15s ease; }
details.toevoegen[open] summary { background: var(--supporting); }
details.toevoegen[open] summary .plus { transform: rotate(45deg); }
details.toevoegen .kaart { margin-top: 14px; }

.melding { border-left: 4px solid var(--error); background: var(--error-bg); padding: 12px 16px; border-radius: 0 6px 6px 0; font-size: 13.5px; margin: 0 0 18px; }
.melding strong { color: var(--error); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--body-text-soft); border-bottom: 1.5px solid var(--line); padding: 8px; }
td { padding: 10px 8px; border-bottom: 1px solid var(--line); }

.badge { display: inline-block; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 11px; padding: 3px 10px; border-radius: 999px; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral-text); }
/* Voor een training die niet doorgaat (Nr 63). Gebruikt de bestaande
   foutkleuren, dus geen nieuwe kleur in de huisstijl. */
.badge-error { background: var(--error-bg); color: var(--error); }

/* Inklapbare blokken in een overzicht (Komend / Lopend / Gegeven op
   mijn-sessies.php). Anders dan details.toevoegen hierboven is dit geen knop
   maar een kop boven een lijst, dus rustiger vormgegeven. */
details.blok { margin-bottom: 16px; }
details.blok > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--supporting);
  user-select: none;
}
details.blok > summary::-webkit-details-marker,
details.blok > summary::marker { display: none; content: ""; }
details.blok > summary:hover { border-color: var(--main); }
details.blok > summary .pijl {
  color: var(--body-text-soft); font-size: 11px; line-height: 1;
  display: inline-block; transition: transform 0.15s ease;
}
details.blok[open] > summary .pijl { transform: rotate(90deg); }
details.blok[open] > summary { border-radius: 10px 10px 0 0; border-bottom: none; }
details.blok > summary .uitleg {
  font-family: "Open Sans", sans-serif; font-size: 12.5px; text-transform: none;
  color: var(--body-text-soft); font-weight: 400;
}
details.blok .kaart { border-radius: 0 0 10px 10px; box-shadow: none; }

/* Filterbalk boven een overzicht: de velden naast elkaar, de knop op dezelfde
   onderlijn. Op een klein scherm vallen ze vanzelf onder elkaar. */
.filterbalk { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filterbalk > div { flex: 1 1 170px; min-width: 0; max-width: 280px; }
.filterbalk label { margin: 0 0 6px; font-size: 12px; }
.filterbalk .knoppen { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.filterbalk .btn { margin: 0; padding: 10px 20px; }
.filterbalk a { font-size: 13px; color: var(--body-text-soft); }
/* ============================================================
   Mobiel-proof: deelnemers en docenten gebruiken hun schermen vaak
   op de telefoon (bv. tijdens de les). Vanaf hier: aanpassingen voor
   kleine schermen. De <meta name="viewport"> in elke paginakop hoort
   hierbij (staat in de PHP-bestanden, niet hier).
   ============================================================ */
@media (max-width: 680px) {
  .wrap { padding: 20px 16px 56px; }
  .smal { margin: 40px auto; padding: 0 16px; }
  .kaart { padding: 18px 16px; }

  h1 { font-size: 19px; }
  h2 { font-size: 16px; }

  .topbar { flex-wrap: wrap; gap: 10px 0; padding: 12px 16px; }
  .topbar nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .topbar nav a { margin-left: 0; }
  .merk-label { display: none; } /* i.p.v. afknippen: de titel in de browsertab + logo zijn genoeg op een klein scherm */

  /* Rijen met meerdere knoppen naast elkaar: op een telefoon liever
     onder elkaar en volledige breedte (grotere, makkelijker te raken). */
  .btn-row { flex-direction: column; }
  .btn-row .btn, .btn-row a.btn, .btn-row button.btn { width: 100%; text-align: center; }

  /* Elke gewone knop iets hoger op een telefoon (prettiger aanraakbaar). */
  .btn { padding: 14px 22px; }

  /* Filterbalk: op een telefoon elk veld op een eigen regel, en de knop
     over de volle breedte (net als de andere knoppenrijen hierboven). */
  .filterbalk > div { flex-basis: 100%; max-width: none; }
  .filterbalk .knoppen { width: 100%; justify-content: space-between; }
  /* De padding hier herhalen: .filterbalk .btn hierboven is specifieker dan
     de algemene .btn-regel en zou anders winnen, dezelfde valkuil als bij
     de knoppenrijen. Zonder dit blijft de knop ~36px en dus te klein om
     prettig aan te tikken. */
  .filterbalk .knoppen .btn { flex: 1; text-align: center; padding: 14px 20px; }

  /* Tabellen die te breed zijn voor een telefoon (rij 43-45): geen
     kolommen naast elkaar, maar per rij een kaartje met per veld een
     klein label erboven. Alleen van toepassing op tabellen met de
     klasse "tabel-mobiel", zie mijn-trainingen.php, mijn-training.php,
     mijn-sessies.php, sessie.php. */
  .alleen-mobiel { display: inline; }
  .niet-mobiel { display: none; }
  table.tabel-mobiel thead { display: none; }
  table.tabel-mobiel, table.tabel-mobiel tbody, table.tabel-mobiel tr, table.tabel-mobiel td { display: block; width: 100%; }
  table.tabel-mobiel tr { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
  table.tabel-mobiel td { border-bottom: none; padding: 5px 0; }
  table.tabel-mobiel td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--body-text-soft);
    margin-bottom: 2px;
  }
  table.tabel-mobiel td:last-child:not([data-label]) { padding-top: 10px; }

  /* De actieknoppen in deze tabellen zijn ontworpen als compacte
     desktop-rij-knopjes (klein lettertype, weinig padding), op een
     telefoon moeten ze een prettig aanraakbaar formaat hebben
     (richtlijn: minstens ~44px hoog). */
  /* !important nodig: deze knoppen hebben een inline style (padding/
     font-size) voor hun compacte desktop-formaat, en inline styles
     winnen anders altijd van deze media query. */
  table.tabel-mobiel .btn {
    padding: 14px 16px !important;
    font-size: 12px !important;
    margin: 3px 4px 3px 0;
    display: inline-block;
  }
}

/* Optionele hulptekst onder een evaluatievraag (vragensets, 07-09-2026).
   Staat tussen het label en het invoerveld, dus de marges sluiten daarop aan. */
.vraag-toelichting { font-size: 12.5px; color: var(--body-text-soft); margin: -2px 0 6px; }

/* Een klein grijs regeltje ónder de hoofdtekst van een tabelcel, zoals het
   e-mailadres onder een naam. Zonder het blok-gedrag komt het achter de naam
   te staan zolang de regel nog ruimte heeft, en pas eronder als hij vol is:
   dan staat het per rij ergens anders en leest de kolom onrustig. */
.onder-naam { display: block; font-size: 12.5px; color: var(--body-text-soft); }

/* Informatieve melding (blauw). Zonder de tweede regel blijft de vetgedrukte
   aanhef rood, dat is de kleur voor foutmeldingen en leest hier als alarm. */
.melding-info { border-left-color: var(--info); background: var(--info-bg); }
.melding-info strong { color: var(--supporting); }

/* Alarm: een blok dat je niet over het hoofd kunt zien. Bewust anders dan de
   gewone meldingen, die staan tússen de inhoud, dit staat erboven en heeft
   een eigen rand en achtergrond. Gebruikt voor iets waarvan het gevolg is dat
   er níets gebeurt (een training die niet op definitief staat, Nr 63); dat
   valt uit zichzelf niet op, dus moet het scherm het overnemen. */
.alarm {
  border: 2px solid var(--error);
  border-left-width: 8px;
  background: var(--error-bg);
  border-radius: 5px;
  padding: 18px 22px;
  margin: 0 0 22px;
}
.alarm-kop {
  font-family: "Ubuntu", system-ui, sans-serif;
  font-weight: 700;
  color: var(--error);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}
.alarm p { margin: 0 0 10px; font-size: 14px; }
.alarm-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Waarschuwing (geel): "let op", geen fout. Stond als losse stijl-instructies
   in inlogscherm.php; hier staat hij één keer, zodat elke waarschuwing er
   hetzelfde uitziet. */
.melding-let-op { border-left-color: var(--warning); background: var(--warning-bg); }
.melding-let-op strong { color: var(--supporting); }

/* Een geslaagde handeling. De huisstijl heeft hier een eigen kleur voor;
   daarvoor stond "Gelukt" in het blauw van een informatiemelding. */
.melding-gelukt { border-left-color: var(--success); background: var(--success-bg); }
.melding-gelukt strong { color: var(--success); }

/* Meekijkbalk: de beheerder bekijkt de schermen van een deelnemer
   (includes/header_deelnemer.php). Moet onmiskenbaar zijn, anders denk je
   dat je als jezelf bent ingelogd. Waarschuwingskleur, geen nieuwe kleur. */
.meekijkbalk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--warning-bg, #FDF3E1);
  border-bottom: 3px solid var(--warning, #E8A33D);
  padding: 12px 28px;
  font-size: 14px;
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Een knop die er wel staat maar nu niet kan (Nr 100): grijs, en een klik
   brengt je bij de uitleg waarom niet en hoe wel. */
.btn-grijs, .btn-grijs:hover { background: #E4E6EA; color: #8A8F98; border-color: #C9CDD3; cursor: not-allowed; }
.toevoegen-grijs { display: inline-flex; align-items: center; gap: 8px; font-family: "Ubuntu", sans-serif; font-weight: 500;
  font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; padding: 12px 22px; border-radius: 5px;
  background: #E4E6EA; color: #8A8F98; text-decoration: none; cursor: not-allowed; margin-bottom: 24px; }
.toevoegen-grijs:hover { color: #8A8F98; text-decoration: none; }
input:disabled, select:disabled { background: #F0F1F3; color: #8A8F98; cursor: not-allowed; }

/* Documenten bij een module-sessie (includes/documentenblok.php). */
.hint { font-size: 12.5px; color: var(--body-text-soft); font-weight: normal; }
details.inline-details { display: inline-block; vertical-align: top; }
details.inline-details summary { list-style: none; }
details.inline-details summary::-webkit-details-marker,
details.inline-details summary::marker { display: none; content: ""; }
details.inline-details[open] { display: block; margin-top: 8px; }

/* Vaste en losse berichten (release 1.24): elk bericht in een eigen kader, de tekst en
   de documenten ingeklapt achter een knop met het aantal (verzoek gebruiker 02-11-2026). */
.plan-item { border: 1px solid var(--line); border-left: 4px solid var(--main); border-radius: 8px; padding: 12px 14px; margin: 12px 0; background: var(--surface); }
.plan-item-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.plan-item-kop strong { color: var(--supporting); font-size: 15px; }
.plan-item-kop .hint { flex-basis: 100%; margin: 0; }
details.plan-inhoud { margin-top: 8px; }
details.plan-inhoud > summary { display: inline-block; cursor: pointer; list-style: none; font-family: "Ubuntu", sans-serif; font-weight: 500; font-size: 12.5px; text-transform: uppercase; color: var(--main); border: 1px solid var(--main); border-radius: 5px; padding: 4px 12px; }
details.plan-inhoud > summary::-webkit-details-marker,
details.plan-inhoud > summary::marker { display: none; content: ""; }
details.plan-inhoud > summary::before { content: "\25B8  "; }
details.plan-inhoud[open] > summary::before { content: "\25BE  "; }
.plan-inhoud-binnen { margin-top: 10px; padding: 10px 12px; background: var(--neutral-bg); border-radius: 6px; }
.plan-inhoud-kop { margin: 8px 0 2px; font-weight: 700; font-size: 13px; }
.plan-docs-ul { margin: 0; padding-left: 18px; }
.vervangformulier { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vervangformulier .hint { flex-basis: 100%; margin: 0; }
.documentenlijst { list-style: none; margin: 6px 0 0; padding: 0; }
.documentenlijst li { margin: 4px 0; }

/* Beheermenu met uitklapgroepen (includes/header_beheerder.php, Nr 78).
   Klikken om open te klappen en niet bij aanwijzen met de muis: dat werkt ook
   op een tablet of telefoon. Na de algemene .topbar nav a-regel, zodat deze
   specifiekere regels winnen. */
.hoofdmenu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.topbar .hoofdmenu a { margin-left: 0; }
.hoofdmenu .menu-los,
.menu-groep > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 5px;
  font-size: 13.5px; color: var(--body-text-soft); cursor: pointer; text-decoration: none;
  list-style: none; user-select: none;
}
.menu-groep > summary::-webkit-details-marker,
.menu-groep > summary::marker { display: none; content: ""; }
.menu-groep > summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.menu-groep[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.hoofdmenu .menu-los:hover,
.menu-groep > summary:hover,
.menu-groep[open] > summary { color: var(--main); background: var(--info-bg); }
.hoofdmenu .menu-los.actief,
.menu-groep.actief > summary { color: var(--main); font-weight: 700; }
.menu-groep { position: relative; }
.menu-lijst {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column;
}
.menu-account .menu-lijst { left: auto; right: 0; }
.topbar .hoofdmenu .menu-lijst a {
  padding: 8px 12px; border-radius: 4px; font-size: 13.5px; color: var(--body-text); white-space: nowrap;
}
.topbar .hoofdmenu .menu-lijst a:hover { background: var(--info-bg); color: var(--main); }
.topbar .hoofdmenu .menu-lijst a.actief { color: var(--main); font-weight: 700; }

@media (max-width: 680px) {
  .hoofdmenu { justify-content: flex-start; width: 100%; }
  /* Op een telefoon klapt de lijst onder de balk uit over de volle breedte,
     in plaats van als zwevend blokje dat buiten het scherm kan vallen. */
  .menu-groep { position: static; }
  .menu-lijst { left: 16px; right: 16px; top: auto; margin-top: 4px; }
  .menu-account .menu-lijst { left: 16px; right: 16px; }
  .topbar { position: relative; }
  .topbar .hoofdmenu .menu-lijst a { padding: 12px; }
}

/* Rechten kiezen op het scherm Beheerders (Nr 77). */
fieldset.rechten { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px 6px; margin: 6px 0 16px; }
fieldset.rechten legend { font-weight: 700; padding: 0 6px; }
label.vinkje { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; margin: 8px 0; }
label.vinkje input { margin-top: 3px; width: auto; }
/* Een hoofdbeheerder mag alles: dan zeggen de losse vinkjes niets. */
fieldset.rechten.is-hoofd label.vinkje + p.hint ~ label.vinkje { opacity: 0.45; }

/* "beheer" naast de naam van het portaal in de bovenbalk (Nr 80). */
.merk-sub { font-weight: 400; color: var(--body-text-soft); margin-left: 4px; }

/* Berichten en gesprekken (Nr 81). */
.berichttekst { white-space: normal; line-height: 1.55; }
.berichtenlijst { list-style: none; margin: 0; padding: 0; }
.berichtenlijst li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.berichtenlijst li:last-child { border-bottom: 0; }
ul.gesprek { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.gesprek li { max-width: 85%; padding: 10px 14px; border-radius: 8px; line-height: 1.5; }
ul.gesprek li.van-deelnemer { align-self: flex-start; background: var(--neutral-bg, #F1F2F4); }
ul.gesprek li.van-afzender { align-self: flex-end; background: var(--info-bg); }
.gesprek-kop { display: block; font-size: 12px; color: var(--body-text-soft); margin-bottom: 4px; }

/* Bolletje met het aantal nieuwe reacties in het menu (Nr 81). */
.menu-teller {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: var(--cta); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* Openbare planning (Nr 85): een module met een beschrijving is aan te klikken,
   en dan klapt er een regel onder open over de kolommen Tijd t/m Plaats. */
.module-knop {
  display: block; margin-top: 6px;
  background: none; border: 1px solid var(--main); border-radius: 5px;
  padding: 3px 10px; color: var(--main); cursor: pointer;
  font-family: "Ubuntu", sans-serif; font-weight: 500; font-size: 12px; line-height: 1.5;
}
.module-knop:hover { background: var(--info-bg); }
.module-knop .open { display: none; }
.module-knop[aria-expanded="true"] .open { display: inline; }
.module-knop[aria-expanded="true"] .dicht { display: none; }
.module-knop:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
tr.module-inhoud[hidden] { display: none !important; }
tr.module-inhoud td { background: var(--neutral-bg); color: var(--body-text); font-size: 14px; line-height: 1.6; }
@media (max-width: 680px) {
  /* Op een telefoon is elke regel een kaartje: de beschrijving plakt onder het
     kaartje van de module. */
  table.tabel-mobiel tr.module-inhoud { margin-top: -10px; border-top: 0; border-radius: 0 0 8px 8px; background: var(--neutral-bg); }
  table.tabel-mobiel tr.module-inhoud td { padding: 0; }
  /* Prettig aan te tikken tijdens het scrollen op een telefoon. */
  .module-knop { padding: 8px 14px; font-size: 13px; }
}

/* Openbare planning: alle kaarten dezelfde kolombreedtes, zodat de kolommen
   van kaart tot kaart onder elkaar staan, en alles bovenaan in de regel (anders
   zakken de andere cellen naar het midden zodra er een knopje Lees meer staat). */
table.planning-tabel { table-layout: fixed; width: 100%; }
table.planning-tabel th:nth-child(1) { width: 19%; }
table.planning-tabel th:nth-child(2) { width: 14%; }
table.planning-tabel th:nth-child(3) { width: 33%; }
table.planning-tabel th:nth-child(4) { width: 20%; }
table.planning-tabel th:nth-child(5) { width: 14%; }
table.planning-tabel td { vertical-align: top; overflow-wrap: anywhere; }
@media (max-width: 680px) {
  table.planning-tabel { table-layout: auto; }
}

/* Importscherm: de wijzigingen bij een regel die al bestaat, en het vinkje om
   alle afwijkende regels van een tabblad in een keer aan te zetten. */
table.wijzigingen { margin-top: 8px; font-size: 13px; background: var(--neutral-bg); }
table.wijzigingen th, table.wijzigingen td { padding: 4px 8px; vertical-align: top; }
table.wijzigingen th { font-size: 11px; }
label.overschrijf-alles { display: flex; gap: 8px; align-items: center; font-weight: 700; cursor: pointer; }

/* Inloggen met wachtwoord en app-code (Nr 92): de QR-code om de app te
   koppelen, het veld voor de code en de lijst met reservecodes. */
ol.stappen { font-size: 13.5px; padding-left: 20px; margin: 0 0 14px; }
ol.stappen li { margin-bottom: 6px; }
.qr-vak { text-align: center; margin: 10px 0 14px; }
.qr-vak svg { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 5px; }
details.handmatig { font-size: 13.5px; margin-bottom: 14px; }
details.handmatig summary { cursor: pointer; color: var(--main); }
.sleutel { font-family: Consolas, "Courier New", monospace; font-size: 15px; letter-spacing: 0.05em; background: var(--neutral-bg);
  padding: 8px 10px; border-radius: 5px; word-break: break-all; }
input.code-veld { font-family: Consolas, "Courier New", monospace; font-size: 20px; letter-spacing: 0.2em; text-align: center; }
ul.reservecodes { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px;
  font-family: Consolas, "Courier New", monospace; font-size: 15px; }
ul.reservecodes li { background: var(--neutral-bg); padding: 6px 10px; border-radius: 5px; text-align: center; }
@media print {
  .topbar, nav, .voettekst, .btn, form, .meekijkbalk { display: none !important; }
}

/* Tekstvak met opmaak (Nr 83): knoppen Vet en Link, en een voorbeeld eronder. */
.opmaakveld-knoppen { display: flex; gap: 6px; margin-bottom: 6px; }
.mailvoorbeeld-opmaak { white-space: normal; }
.mailvoorbeeld-opmaak a { color: var(--main); }

/* De actielijst op het dashboard (Nr 95): een actie die te laat is valt op. */
.actielijst tr.actie-dringend td { background: var(--error-bg); }

/* Tabbladen op een detailscherm (keuze gebruiker 17-10-2026). Zie includes/tabbladen.php.
   De kop van het scherm staat erboven en blijft op elk tabblad gelijk. */
.schermkop { margin-bottom: 4px; }
.schermkop-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--body-text-soft); margin-top: -4px; }
.schermkop form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.schermkop select { width: auto; margin: 0; }
.tabbladen {
  display: flex; flex-wrap: wrap; gap: 2px; margin: 18px 0 22px;
  border-bottom: 1px solid var(--line);
}
.tabblad {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; margin-bottom: -1px;
  font-family: "Ubuntu", system-ui, sans-serif; font-size: 14px; color: var(--body-text);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.tabblad:hover { color: var(--main); border-bottom-color: var(--line); }
.tabblad.actief { color: var(--main); font-weight: 500; border-bottom-color: var(--main); }
.tab-teller {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--neutral-bg); color: var(--neutral-text);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.tab-teller-let-op { background: var(--warning-bg); color: #8A5A10; }
.tab-alarm { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--error); }
.kerngetallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 22px; }
.kerngetal { background: var(--neutral-bg); border-radius: 6px; padding: 10px 14px; }
.kerngetal span { display: block; font-size: 12.5px; color: var(--body-text-soft); }
.kerngetal strong { font-size: 16px; color: var(--supporting); font-weight: 600; }
@media (max-width: 680px) {
  .tabblad { padding: 9px 10px; font-size: 13.5px; }
}

/* Een bewerkformulier dat je via BEWERKEN opent (bv. de gegevens van een
   training): een blauwe kopbalk en een blauwe rand, zodat je oog er meteen
   op valt (verzoek gebruiker 19-10-2026). */
.kaart.bewerkkaart { border: 2px solid var(--main); padding-top: 0; overflow: hidden; scroll-margin-top: 16px; }
.bewerkkaart-kop { background: var(--main); color: #fff; font-family: "Ubuntu", sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.03em; font-size: 15px; padding: 12px 30px; margin: 0 -30px 18px; }
@media (max-width: 680px) { .bewerkkaart-kop { margin: 0 -16px 16px; padding: 12px 16px; } }

/* Een lange tekst op één regel, met "lees meer" om de rest te tonen
   (bv. de omschrijving op het scherm Soorten, verzoek gebruiker 19-10-2026).
   Het script in includes/footer_beheerder.php toont de knop alleen als de
   tekst echt niet op één regel past. */
.inkorten { display: flex; align-items: baseline; gap: 6px; max-width: 60ch; }
/* contain: inline-size: de tekst telt niet mee voor de breedte van de tabel, anders
   rekt een lange omschrijving op één regel de hele tabel op (gemeld 19-10-2026). */
.inkorten-tekst { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; contain: inline-size; }
.inkorten.open { display: block; }
.inkorten.open .inkorten-tekst { white-space: normal; overflow: visible; }
.inkorten-knop { background: none; border: 0; padding: 0; color: var(--main); font-size: inherit; cursor: pointer;
  text-decoration: underline; white-space: nowrap; flex-shrink: 0; }
.inkorten.open .inkorten-knop { margin-left: 4px; }

/* Beheerschermen gebruiken de breedte van het scherm, tot 1400px (keuze
   gebruiker 22-10-2026): tabellen met veel kolommen lopen dan niet meer in
   elkaar over. Invulvelden blijven op een leesbare breedte; schermen voor
   deelnemers en docenten en leespagina's blijven smal. */
body.beheer .wrap, body.beheer .voettekst { max-width: 1400px; }
body.beheer form input[type=text], body.beheer form input[type=email], body.beheer form input[type=password],
body.beheer form input[type=date], body.beheer form select { max-width: 720px; }
body.beheer form textarea { max-width: 960px; }

/* De docentschermen gebruiken ook de breedte van het scherm, en de blokken
   hebben een oranje accent zodat ze beter van elkaar te onderscheiden zijn
   (verzoek gebruiker 30-10-2026). body.docent zet header_deelnemer.php als er
   een docent is ingelogd; de schermen van de deelnemer blijven ongemoeid. */
body.docent .wrap, body.docent .voettekst { max-width: 1400px; }
body.docent form input[type=text], body.docent form input[type=email], body.docent form input[type=password],
body.docent form input[type=date], body.docent form select { max-width: 720px; }
body.docent form textarea { max-width: 960px; }
body.docent .kaart { border-top: 3px solid var(--cta); margin-bottom: 18px; }
body.docent details.blok .kaart { border-top: 1px solid var(--line); margin-bottom: 0; }
body.docent details.blok > summary { border-left: 4px solid var(--cta); }
body.docent details.blok > summary:hover { border-color: var(--cta); }
body.docent details.blok[open] > summary { background: #FEF1E7; }
body.docent .tabblad:hover { color: var(--supporting); border-bottom-color: #FBC9A2; }
body.docent .tabblad.actief { color: var(--supporting); border-bottom-color: var(--cta); }

.badge-info { background: var(--info-bg); color: #2B6CC4; }

/* Facturatie in stappen (Nr 132). */
.uitleg-stap { border-left: 3px solid var(--cta); padding: 2px 0 2px 12px; margin: 4px 0 18px; font-size: 13.5px; max-width: 110ch; }
.tellers .kerngetal { text-decoration: none; color: inherit; border: 1.5px solid transparent; }
.tellers .kerngetal:hover { border-color: var(--line); }
.tellers .kerngetal.actief { border-color: var(--main); background: #fff; }
.tellers .kerngetal.teller-let-op strong { color: var(--warning); }
.tellers .kerngetal strong { font-size: 22px; font-family: "Ubuntu", sans-serif; }
th.getal, td.getal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.rij-verschil > td { background: #FFFBF2; }
tr.rij-open > td { background: var(--info-bg); }
tr.rij-aanpassen > td { background: #F7F9FC; padding: 14px 12px; }
tr.regelmelding > td { padding: 8px 0 4px; border-bottom: 0; }
tr[id^="rij-"] { scroll-margin-top: 80px; }
.aanpas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; align-items: end; }
.aanpas-grid label { margin-top: 0; }
.aanpas-grid .aanpas-breed { grid-column: 1 / -1; }
td.knoppen-cel { white-space: nowrap; text-align: right; }
td.knoppen-cel form { display: inline; margin: 0; }
td.knoppen-cel .btn { margin: 2px 0 2px 4px; }
.opdracht-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
.stapkaart { margin-bottom: 18px; }
.stapkaart h3 { margin: 0 0 10px; }
.stapnr { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--main); color: #fff; font-size: 12px; text-align: center; line-height: 22px; margin-right: 8px; font-weight: 700; }
.setkeuze label.vinkje { margin: 6px 0; }
.vak { background: var(--neutral-bg); border-radius: 6px; padding: 12px 14px; margin: 8px 0 4px; }
.velden-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
#opdracht, #melding { scroll-margin-top: 16px; }
@media (max-width: 900px) {
  .opdracht-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  td.knoppen-cel { text-align: left; white-space: normal; }
}

/* Een formulier in onderdelen (verzoek gebruiker 23-10-2026): elk onderdeel
   in een eigen kader met een kopje, zodat te zien is welke velden bij elkaar
   horen. Maak ze met formdeel_begin() en formdeel_eind() uit
   includes/tabbladen.php. */
fieldset.formdeel { border: 1px solid var(--line); border-left: 4px solid var(--main); border-radius: 6px;
  padding: 4px 20px 18px; margin: 0 0 20px; min-width: 0; background: #FAFBFD; }
fieldset.formdeel > legend { font-family: "Ubuntu", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 12.5px; color: var(--supporting); padding: 0 8px; margin-left: -8px; }
fieldset.formdeel > .formdeel-uitleg { margin: 2px 0 12px; font-size: 13px; color: var(--body-text-soft); }
fieldset.formdeel > label:first-of-type { margin-top: 6px; }
@media (max-width: 680px) { fieldset.formdeel { padding: 4px 12px 14px; } }
/* Losse instellingen onder elkaar (bv. Beheer, Instellingen): een lijn ertussen. */
.formregel + .formregel { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
.formregel > label:first-child { margin-top: 0; }
.formregel:last-of-type { margin-bottom: 18px; }
/* Een label dat alleen voor schermlezers is (het kopje van het kader zegt het al). */
.alleen-voorlezen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
fieldset.formdeel > legend .badge { margin-left: 6px; text-transform: none; letter-spacing: 0; }

/* Het aanmeldformulier (31-10-2026): oranje accent bij de blokken, zoals bij
   de docentschermen, de prijs onder de organisatie, en de factuurgegevens die
   pas verschijnen bij Ik geef direct opdracht. */
body.aanmelden .kaart { border-top: 3px solid var(--cta); }
body.aanmelden .melding-info { border-left: 4px solid var(--cta); }
.prijsinfo { margin: 10px 0 0; padding: 10px 12px; border-radius: 5px; background: #FEF1E7; border-left: 4px solid var(--cta); font-size: 13.5px; }
.prijsinfo-lid { background: var(--success-bg, #E8F5EE); border-left-color: var(--success, #1F9254); }
.factuurblok { margin: 12px 0 0 24px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 5px; }
.factuurblok[hidden] { display: none; }
@media (max-width: 680px) { .factuurblok { margin-left: 0; } }

/* Per ontvanger de volledige mail op het keuzescherm bij Definitief (31-10-2026). */
details.ontvanger-mail { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; }
details.ontvanger-mail > summary { cursor: pointer; font-size: 14px; }
details.ontvanger-mail[open] > summary { margin-bottom: 4px; }

/* Agenda als maandkalender (kern/agenda.php, release 1.36). Op een telefoon
   worden het losse dagen onder elkaar, en verdwijnen de lege dagen. */
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kalender-kop { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--body-text-soft); padding: 4px 6px; }
.kalender-dag { background: #fff; border: 1px solid var(--line); border-radius: 6px; min-height: 96px; padding: 6px; font-size: 12.5px; min-width: 0; }
.kalender-leeg { background: transparent; border-color: transparent; }
.kalender-vandaag { border-color: var(--main); box-shadow: inset 0 0 0 1px var(--main); }
.kalender-nummer { font-weight: 600; margin-bottom: 4px; color: var(--body-text-soft); }
.kalender-item { border-left: 3px solid var(--line); background: var(--neutral-bg); border-radius: 4px; padding: 4px 6px; margin-bottom: 4px; overflow-wrap: anywhere; line-height: 1.35; }
.kalender-item a { font-weight: 600; }
.kalender-tijd { font-weight: 600; margin-right: 4px; }
.kalender-module { display: block; color: var(--body-text-soft); }
.kalender-item .badge { margin-top: 3px; }
.kalender-definitief, .kalender-lopend { border-left-color: var(--success); }
.kalender-gepland, .kalender-concept { border-left-color: var(--warning); }
.kalender-gaat_niet_door { border-left-color: var(--error); opacity: .7; }
@media (max-width: 680px) {
  .kalender { display: block; }
  .kalender-kop, .kalender-dag:not(.kalender-vol) { display: none; }
  .kalender-dag { min-height: 0; margin-bottom: 8px; font-size: 14px; }
}

/* Programma van een training op de openbare planning, standaard dicht (05-11-2026). */
details.planning-programma { margin-top: 14px; }
details.planning-programma > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 14px; border: 1px solid var(--main); border-radius: 5px; color: var(--main);
  font-family: 'Ubuntu', sans-serif; font-weight: 500; font-size: 14px; background: #fff;
}
details.planning-programma > summary::-webkit-details-marker,
details.planning-programma > summary::marker { display: none; content: ""; }
details.planning-programma > summary:hover { background: var(--info-bg); }
details.planning-programma > summary:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
details.planning-programma > summary .pijl { display: inline-block; transition: transform .15s; }
details.planning-programma[open] > summary .pijl { transform: rotate(90deg); }
details.planning-programma > summary .uitleg { font-family: 'Open Sans', sans-serif; font-weight: 400; color: var(--body-text-soft); font-size: 13px; }
@media (max-width: 680px) { details.planning-programma > summary { min-height: 44px; } }
details.planning-programma > summary .open { display: none; }
details.planning-programma[open] > summary .open { display: inline; }
details.planning-programma[open] > summary .dicht { display: none; }

/* Te doen bovenaan Mijn lessen van de docent (Nr 161). */
.te-doen-lijst { list-style: none; padding: 0; margin: 0; }
.te-doen-lijst li { padding: 9px 0; border-top: 1px solid var(--line); line-height: 1.5; }
.te-doen-lijst li:first-child { border-top: 0; padding-top: 2px; }
.te-doen-lijst .badge { margin-right: 6px; min-width: 84px; text-align: center; display: inline-block; }
/* Het menu van de docent staat in een gewone nav: de vaste ingangen niet laten
   inspringen zoals de losse links van de deelnemer. */
.topbar nav .hoofdmenu a.menu-los { margin-left: 0; }

/* Deelnemerslijst van een training: wijzigen via een formulier onder de regel (08-11-2026). */
tr.wijzigrij > td { background: var(--neutral-bg, #F3F4F8); padding: 12px; }
tr.wijzigrij .bewerkkaart { margin: 0; }
.wijzig-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.wijzig-keuzes label.keuze { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 6px 18px 0 0; }
.wijzig-keuzes label.keuze input { width: auto; margin: 0; }
.wijzig-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.wijzig-acties details.afmelden { margin: 0; }

/* Foto's van de homepagina van de website (Verkoop, Website, 10-11-2026): voorbeeld met
   dezelfde blauwe laag als op de site, en een foto die uit staat lichter. */
.fotovoorbeeld { display: block; position: relative; width: 300px; max-width: 100%; aspect-ratio: 3 / 1; border-radius: 6px; overflow: hidden;
  background-size: cover; background-position: center 30%; background-color: #061BA1; }
.fotovoorbeeld span { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,27,161,.97) 0%, rgba(6,27,161,.88) 42%, rgba(14,85,237,.35) 100%); }
.fototabel tr.foto-uit .fotovoorbeeld { opacity: .4; }

/* Volgordelijst met slepen (Verkoop, Website, 11-11-2026). */
table.sleeplijst tr[draggable] { cursor: grab; }
table.sleeplijst .sleepgreep { color: var(--body-text-soft, #888); letter-spacing: -3px; user-select: none; font-size: 15px; }
table.sleeplijst tr.sleept { opacity: .45; background: #eef3fd; }