/* ==========================================================================
   Studiebegeleiding - huisstijl van neledevos.be
   Vier pasteltinten (blush, salie, creme, lucht) op wit, zwarte pilknoppen,
   blauwe lopende tekst, serif voor de koppen. Vlakken hebben rechte hoeken,
   knoppen zijn volledig rond: dat contrast komt van de website zelf.

   De pastels zijn hier niet decoratief maar dragen betekenis:
     lucht  = gepland, neutrale informatie
     salie  = doorgegaan, actief, gelukt
     creme  = vraagt aandacht, nog af te werken
     blush  = niet gekomen, fout, verwijderen

   Systeemletters, dus geen externe fonts en geen verbindingen naar derden.
   ========================================================================== */

:root {
  /* De vier pastels van de website */
  --blush:      #f6e3dd;
  --blush-diep: #e8c7bd;
  --blush-inkt: #8c463a;

  --salie:      #e5efdc;
  --salie-diep: #cbe0ba;
  --salie-inkt: #4a6b3c;

  --creme:      #faf0cd;
  --creme-diep: #eedfa4;
  --creme-inkt: #7a6420;

  --lucht:      #dae7f7;
  --lucht-diep: #c0d5ef;
  --lucht-inkt: #2c4a80;

  /* Tekst */
  --navy:   #16244d;   /* koppen en gegevens */
  --blauw:  #3a56a8;   /* lopende tekst en links, zoals op de site */
  --zwart:  #16181d;   /* knoppen, logo */
  --grijs:  #6b7186;
  --grijs-licht: #9aa0b0;

  /* Vlakken en lijnen */
  --papier:      #ffffff;
  --achtergrond: #ffffff;
  --waas:        #faf9f7;
  --lijn:        #e3e1db;
  --lijn-zacht:  #efede8;
  --rule:        #2b2b2b;   /* de dunne donkere scheidingslijn */

  --straal: 0;          /* vlakken zijn recht */
  --straal-klein: 3px;
  --letter: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
           "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--letter);
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--achtergrond);
}

a { color: var(--blauw); }
a:hover { color: var(--navy); }

p { color: var(--blauw); }

:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 2px;
}

h1, h2, h3 {
  margin: 0 0 .5rem;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.25;
  color: var(--navy);
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h1 strong, h2 strong { font-weight: 700; }

/* ------------------------------------------------------------ Koptekst */

.balk {
  background: #fff;
  border-bottom: 1px solid var(--lijn);
}

.balk-binnen {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-height: 62px;
  flex-wrap: wrap;
}

.merk {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--zwart);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1.15;
  white-space: nowrap;
}
.merk span { font-weight: 400; color: var(--grijs); }

.hoofdnav {
  display: flex;
  gap: .35rem;
  margin-right: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.hoofdnav::-webkit-scrollbar { display: none; }

.hoofdnav a {
  color: var(--blauw);
  text-decoration: none;
  padding: .4rem .85rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .9rem;
}
.hoofdnav a:hover { background: var(--lucht); color: var(--navy); }
.hoofdnav a.actief { background: var(--zwart); color: #fff; font-weight: 500; }

.balk-rechts {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .85rem;
  color: var(--grijs);
}
.balk-rechts a { color: var(--blauw); }

/* ------------------------------------------------------------ Raamwerk */

.blad {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.paginakop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.paginakop p { margin: .2rem 0 0; color: var(--blauw); font-size: .92rem; }

.kruimel {
  font-size: .84rem;
  color: var(--grijs);
  margin-bottom: .5rem;
}
.kruimel a { text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }

.rooster { display: grid; gap: 1.25rem; }
.rooster-2 { grid-template-columns: 1fr 1fr; }
.rooster-fiche { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }

@media (max-width: 860px) {
  .rooster-2, .rooster-fiche { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Kaarten */

.kaart {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--straal);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1.15rem;
  border-bottom: 1px solid var(--lijn);
  background: var(--waas);
}
.kaart-kop h2, .kaart-kop h3 { margin: 0; }
.kaart-kop .telling {
  font-family: var(--letter);
  font-size: .8rem;
  color: var(--grijs);
  font-weight: 400;
}

.kaart-body { padding: 1.15rem; }
.kaart-body > :first-child { margin-top: 0; }
.kaart-body > :last-child { margin-bottom: 0; }

.leeg {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--grijs);
  font-size: .92rem;
}
.leeg strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--navy);
  margin-bottom: .25rem;
  font-weight: 400;
}

/* ------------------------------------------------------------ Knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--zwart);
  background: var(--zwart);
  color: #fff;
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.knop:hover { background: #000; border-color: #000; color: #fff; }

.knop-2 {
  background: #fff;
  color: var(--navy);
  border-color: var(--lijn);
}
.knop-2:hover { background: var(--lucht); color: var(--navy); border-color: var(--lucht-diep); }

.knop-klein { padding: .28rem .8rem; font-size: .81rem; }

.knop-gevaar { background: var(--blush); color: var(--blush-inkt); border-color: var(--blush-diep); }
.knop-gevaar:hover { background: var(--blush-diep); color: var(--blush-inkt); border-color: var(--blush-inkt); }

.knoprij { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ Formulieren */

.veld { margin-bottom: 1.1rem; }
.veld:last-child { margin-bottom: 0; }

label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .35rem;
  color: var(--navy);
}
label .optioneel { font-weight: 400; color: var(--grijs-licht); }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=time], input[type=number], input[type=password], input[type=search],
input[type=month], select, textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--lijn);
  border-radius: var(--straal-klein);
  font: inherit;
  font-size: .95rem;
  color: var(--navy);
  background: #fff;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--zwart);
  outline: 1px solid var(--zwart);
  outline-offset: -2px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
textarea.groot { min-height: 190px; }

.hulp { font-size: .82rem; color: var(--grijs); margin-top: .3rem; }

.velden { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.velden-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.velden .breed { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .velden, .velden-3 { grid-template-columns: 1fr; }
}

.vinkje {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-weight: 400;
  font-size: .92rem;
  color: var(--navy);
}
.vinkje input { width: auto; margin-top: .25rem; }

fieldset {
  border: 1px solid var(--lijn);
  border-radius: var(--straal);
  padding: 1.15rem;
  margin: 0 0 1.1rem;
  background: var(--waas);
}
legend {
  font-family: var(--serif);
  font-weight: 400;
  font-size: .95rem;
  padding: 0 .4rem;
  color: var(--navy);
}

.balkje-onder {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--rule);
  padding: .85rem 0;
  display: flex;
  gap: .55rem;
  align-items: center;
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------ Tabellen */

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

table.lijst {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
table.lijst th {
  text-align: left;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grijs);
  padding: .6rem 1.15rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  background: #fff;
  font-weight: 600;
}
table.lijst td {
  padding: .7rem 1.15rem;
  border-bottom: 1px solid var(--lijn-zacht);
  vertical-align: top;
  color: var(--navy);
}
table.lijst tbody tr:last-child td { border-bottom: 0; }
table.lijst tbody tr:hover { background: var(--waas); }
table.lijst a.naam { font-weight: 600; text-decoration: none; color: var(--navy); }
table.lijst a.naam:hover { text-decoration: underline; }
.rechts { text-align: right; }
.nummer { font-variant-numeric: tabular-nums; }

dl.gegevens { margin: 0; display: grid; grid-template-columns: 8.5rem 1fr; gap: .4rem .85rem; }
dl.gegevens dt { color: var(--grijs); font-size: .86rem; }
dl.gegevens dd { margin: 0; font-size: .92rem; word-break: break-word; color: var(--navy); }
@media (max-width: 480px) {
  dl.gegevens { grid-template-columns: 1fr; gap: 0 0; }
  dl.gegevens dt { margin-top: .55rem; }
}

/* ------------------------------------------------------------ Labels */

.label {
  display: inline-block;
  padding: .15rem .65rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.label-actief       { background: var(--salie); color: var(--salie-inkt); }
.label-gepauzeerd   { background: var(--creme); color: var(--creme-inkt); }
.label-gestopt      { background: var(--lijn-zacht); color: var(--grijs); }
.label-gepland      { background: var(--lucht); color: var(--lucht-inkt); }
.label-doorgegaan   { background: var(--salie); color: var(--salie-inkt); }
.label-geannuleerd  { background: var(--lijn-zacht); color: var(--grijs); }
.label-niet_gekomen { background: var(--blush); color: var(--blush-inkt); }
.label-laat_geannuleerd { background: var(--creme); color: var(--creme-inkt); }
.label-geboekt      { background: var(--lucht); color: var(--lucht-inkt); }
.label-verplaatst   { background: var(--lucht); color: var(--lucht-inkt); }
.label-kwijtgescholden { background: var(--salie); color: var(--salie-inkt); }
.label-status_gewijzigd,
.label-verwijderd   { background: var(--lijn-zacht); color: var(--grijs); }
.label-info         { background: var(--lucht); color: var(--lucht-inkt); }

/* ------------------------------------------------------------ Meldingen */

.melding {
  padding: .85rem 1.1rem;
  border-radius: var(--straal);
  margin-bottom: 1.1rem;
  font-size: .92rem;
  border: 0;
}
.melding-ok   { background: var(--salie); color: var(--salie-inkt); }
.melding-fout { background: var(--blush); color: var(--blush-inkt); }
.melding-let  { background: var(--creme); color: var(--creme-inkt); }
.melding strong { color: inherit; }

.foutenlijst { margin: 0; padding-left: 1.15rem; }
.foutenlijst li { color: inherit; }

/* ------------------------------------------------------------ Tijdlijn (dossier) */

.tijdlijn { position: relative; margin: 0; padding: 0 0 0 1.85rem; list-style: none; }
.tijdlijn::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .5rem;
  bottom: .5rem;
  width: 1px;
  background: var(--lijn);
}

.tijdlijn > li { position: relative; padding: 0 0 1.4rem; }
.tijdlijn > li::before {
  content: "";
  position: absolute;
  left: -1.85rem;
  top: .4rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--lucht);
  border: 1px solid var(--lucht-diep);
}
.tijdlijn > li.is-doorgegaan::before   { background: var(--salie); border-color: var(--salie-diep); }
.tijdlijn > li.is-notitie::before      { background: #fff; border-color: var(--lijn); }
.tijdlijn > li.is-geannuleerd::before  { background: var(--lijn-zacht); border-color: var(--lijn); }
.tijdlijn > li.is-niet_gekomen::before { background: var(--blush); border-color: var(--blush-diep); }
.tijdlijn > li.is-laat_geannuleerd::before { background: var(--creme); border-color: var(--creme-diep); }
.tijdlijn > li.is-toekomst::before     { background: #fff; border-style: dashed; }

.tijdlijn .wanneer {
  font-size: .82rem;
  color: var(--grijs);
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.tijdlijn .wanneer strong {
  font-family: var(--serif);
  color: var(--navy);
  font-size: .98rem;
  font-weight: 400;
}
.tijdlijn .inhoud { margin-top: .4rem; }
.tijdlijn .inhoud p { margin: 0 0 .45rem; white-space: pre-wrap; color: var(--blauw); }
.tijdlijn .kopje {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grijs);
  margin-top: .55rem;
}
.tijdlijn .geen-verslag { color: var(--creme-inkt); font-size: .88rem; }

/* ------------------------------------------------------------ Agenda */

.dagblok { margin-bottom: 1.25rem; }
.dagkop {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grijs);
  padding: .35rem 0;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: .6rem;
  display: flex;
  justify-content: space-between;
}
.dagkop.vandaag { color: var(--navy); border-color: var(--rule); font-weight: 700; }

.sessie {
  display: flex;
  gap: .9rem;
  align-items: baseline;
  padding: .65rem .9rem;
  border: 0;
  border-left: 4px solid var(--lucht-diep);
  border-radius: 0;
  background: var(--lucht);
  margin-bottom: .45rem;
  text-decoration: none;
  color: var(--navy);
}
.sessie:hover { filter: brightness(.97); color: var(--navy); }
.sessie.st-doorgegaan   { background: var(--salie); border-left-color: var(--salie-diep); }
.sessie.st-geannuleerd  { background: var(--waas); border-left-color: var(--lijn); opacity: .8; }
.sessie.st-niet_gekomen { background: var(--blush); border-left-color: var(--blush-diep); }
.sessie.st-laat_geannuleerd { background: var(--creme); border-left-color: var(--creme-diep); opacity: .9; }
.sessie .uur { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9rem; }
.sessie .wie { font-weight: 600; }
.sessie .extra { color: var(--grijs); font-size: .84rem; margin-left: auto; text-align: right; }

/* ------------------------------------------------------------ Kerncijfers
   Drie vlakken in de pasteltinten van de dienstenblokken op de website. */

.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cijfer {
  border: 0;
  border-radius: 0;
  padding: 1rem 1.1rem;
  background: var(--lucht);
}
.cijfers > .cijfer:nth-child(1) { background: var(--blush); }
.cijfers > .cijfer:nth-child(2) { background: var(--salie); }
.cijfers > .cijfer:nth-child(3) { background: var(--creme); }
.cijfer .getal {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.cijfer .wat {
  font-size: .74rem;
  color: var(--grijs);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .2rem;
}

/* ------------------------------------------------------------ Aanmelden
   Het cremevlak met één grote ronde hoek, zoals het formulier op de site. */

.aanmeldblad {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--creme);
}
.aanmeldkaart {
  width: 100%;
  max-width: 390px;
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 0 0 0 64px;
  padding: 2.25rem 2rem;
}
.aanmeldkaart h1 { font-size: 1.45rem; margin-bottom: .3rem; }
.aanmeldkaart .onder { color: var(--grijs); font-size: .88rem; margin: 0 0 1.5rem; }
.aanmeldkaart .knop { width: 100%; }

/* ------------------------------------------------------------ Zoekbalk */

.zoekrij {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center;
}
.zoekrij input[type=search] { flex: 1 1 220px; min-width: 0; }
.zoekrij select { flex: 0 0 auto; width: auto; }

/* ------------------------------------------------------------ Afdrukken */

@media print {
  .balk, .knoprij, .knop, .balkje-onder, .zoekrij, .niet-afdrukken { display: none !important; }
  body { background: #fff; font-size: 11pt; color: #000; }
  p, .tijdlijn .inhoud p { color: #000; }
  .kaart { border: 1px solid #bbb; break-inside: avoid; }
  .kaart-kop { background: #fff; }
  .blad { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Weekagenda als raster
   Halfuurvakjes van 42px hoog (1,4 beeldpunt per minuut). Vrije vakjes zijn
   aanklikbaar, afspraken liggen er absoluut bovenop zodat overlappende
   sessies naast elkaar kunnen staan.
   ========================================================================== */

.agenda-raster { padding: 0; }
.agenda-lijst { display: none; }

.raster-wikkel { overflow-x: auto; }

.week {
  min-width: calc(56px + var(--dagen) * 116px);
}

.weekkop,
.weekbody {
  display: grid;
  grid-template-columns: 56px repeat(var(--dagen), minmax(0, 1fr));
}

.weekkop {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

.dagkolomkop {
  padding: .6rem .5rem;
  border-left: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  gap: .1rem;
  line-height: 1.3;
}
.dagkolomkop .dagnaam {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grijs);
}
.dagkolomkop .dagnummer {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--navy);
}
.dagkolomkop .dagtelling { font-size: .72rem; color: var(--grijs); }
.dagkolomkop.vandaag { background: var(--creme); }
.dagkolomkop.vandaag .dagnaam,
.dagkolomkop.vandaag .dagtelling { color: var(--creme-inkt); }

.uurkolom { border-right: 1px solid var(--lijn); }

.uurvak {
  height: var(--sloth);
  font-size: .72rem;
  color: var(--grijs);
  text-align: right;
  padding-right: .5rem;
  font-variant-numeric: tabular-nums;
  transform: translateY(-.45em);
}

.dagkolom {
  position: relative;
  border-left: 1px solid var(--lijn);
}
.dagkolom.vandaag { background: rgba(250, 240, 205, .35); }

.slot {
  display: block;
  height: var(--sloth);
  border-bottom: 1px dotted var(--lijn);
}
.slot.heel-uur { border-top: 1px solid var(--lijn); }
.slot:last-child { border-bottom: 0; }

a.slot.vrij {
  text-decoration: none;
  color: var(--grijs-licht);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
a.slot.vrij span { opacity: 0; }
a.slot.vrij:hover { background: var(--salie); }
a.slot.vrij:hover span { opacity: 1; color: var(--salie-inkt); }
a.slot.vrij:focus-visible span { opacity: 1; }

/* Buiten de werkuren: wel nog aanklikbaar voor de begeleider, niet voor het portaal. */
.slot.buiten {
  background: repeating-linear-gradient(135deg, var(--waas) 0 6px, var(--lijn-zacht) 6px 12px);
}
a.slot.vrij.buiten:hover { background: var(--creme); }
a.slot.vrij.buiten:hover span { color: var(--creme-inkt); }

.blok {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  padding: .2rem .4rem;
  border-left: 3px solid var(--lucht-inkt);
  background: var(--lucht);
  color: var(--navy);
  text-decoration: none;
  font-size: .78rem;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.blok:hover { filter: brightness(.96); color: var(--navy); }
.blok .blok-uur { font-weight: 700; font-variant-numeric: tabular-nums; }
.blok .blok-naam { font-weight: 600; }
.blok .blok-extra { color: var(--grijs); }

.blok.st-doorgegaan   { background: var(--salie); border-left-color: var(--salie-inkt); }
.blok.st-niet_gekomen { background: var(--blush); border-left-color: var(--blush-inkt); }
.blok.st-geannuleerd  {
  background: var(--waas);
  border-left-color: var(--lijn);
  color: var(--grijs);
}
.blok.st-geannuleerd .blok-naam { text-decoration: line-through; }
.blok.st-laat_geannuleerd {
  background: var(--creme);
  border-left-color: var(--creme-inkt);
  color: var(--grijs);
}
.blok.st-laat_geannuleerd .blok-naam { text-decoration: line-through; }

/* Bij een halfuurblok past er maar één regel: naam en uur naast elkaar. */
.blok[style*="height:39px"],
.blok[style*="height:38px"] {
  flex-direction: row;
  align-items: baseline;
  gap: .35rem;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  align-items: center;
  font-size: .78rem;
  color: var(--grijs);
  border-top: 1px solid var(--lijn);
}
.legende .hulp { margin: 0; margin-left: auto; }
.legende .stip {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: .35rem;
  vertical-align: -1px;
  border-left: 3px solid var(--lucht-inkt);
  background: var(--lucht);
}
.legende .stip.st-doorgegaan   { background: var(--salie); border-left-color: var(--salie-inkt); }
.legende .stip.st-niet_gekomen { background: var(--blush); border-left-color: var(--blush-inkt); }
.legende .stip.st-geannuleerd  { background: var(--waas); border-left-color: var(--lijn); }
.legende .stip.st-laat_geannuleerd { background: var(--creme); border-left-color: var(--creme-inkt); }
.legende .stip.buiten {
  border-left-color: var(--lijn);
  background: repeating-linear-gradient(135deg, var(--waas) 0 3px, var(--lijn) 3px 5px);
}

/* ------------------------------------------------------------ Beschikbaarheid */
.weekrooster { width: 100%; border-collapse: collapse; }
.weekrooster th, .weekrooster td {
  text-align: left;
  vertical-align: top;
  padding: .55rem .4rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.weekrooster th { width: 7.5rem; font-weight: 600; color: var(--navy); }
.weekrooster tr:last-child th, .weekrooster tr:last-child td { border-bottom: 0; }
.uurblok {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 .4rem .3rem 0;
  padding: .2rem .25rem .2rem .6rem;
  background: var(--salie);
  color: var(--salie-inkt);
  font-variant-numeric: tabular-nums;
  font-size: .88rem;
}
.uurblok form { margin: 0; }
.uurblok button {
  border: 0;
  background: transparent;
  color: var(--salie-inkt);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .3rem;
}
.uurblok button:hover { color: var(--blush-inkt); }
.uurblok .klein { font-size: .75rem; opacity: .8; }

/* Op een smal scherm is een raster van zeven kolommen onbruikbaar:
   dan tonen we dezelfde week als een lijst per dag. */
@media (max-width: 820px) {
  .agenda-raster { display: none; }
  .agenda-lijst { display: block; }
}

@media print {
  .agenda-raster { display: none; }
  .agenda-lijst { display: block; }
}

/* ------------------------------------------------------------ Conceptbalk */

.concept-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
}
.concept-balk .concept-knoppen {
  display: flex;
  gap: .5rem;
  margin-left: auto;
}

/* ------------------------------------------------------------ Planning (fase C)
   Gedeeld door de beheerkant en het portaal. Elke soort blok heeft een eigen
   pasteltint; chill en hobby zijn even zichtbaar als studeren, en dat is bewust. */

.soort-school { --soort: var(--lucht);     --soort-diep: var(--lucht-diep);  --soort-inkt: var(--lucht-inkt); }
.soort-studie { --soort: var(--salie);     --soort-diep: var(--salie-diep);  --soort-inkt: var(--salie-inkt); }
.soort-chill  { --soort: var(--creme);     --soort-diep: var(--creme-diep);  --soort-inkt: var(--creme-inkt); }
.soort-hobby  { --soort: var(--blush);     --soort-diep: var(--blush-diep);  --soort-inkt: var(--blush-inkt); }
.soort-andere { --soort: var(--lijn-zacht); --soort-diep: var(--lijn);       --soort-inkt: var(--grijs); }

.plan-kop .knoprij { gap: .4rem; }
.plan-dag .kaart-kop h3 { margin: 0; }
.plan-dag.vandaag { border-color: var(--rule); }
.plan-dag.vandaag .kaart-kop { background: var(--creme); }

.pblok {
  background: var(--soort, var(--lucht));
  border-left: 4px solid var(--soort-diep, var(--lucht-diep));
  padding: .55rem .75rem;
  margin-bottom: .5rem;
  scroll-margin-top: 1rem;
}
.pblok:last-child { margin-bottom: 0; }
.pblok.gekozen { outline: 2px solid var(--rule); }
.pblok-kop {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .7rem;
  align-items: baseline;
  text-decoration: none;
  color: var(--navy);
}
a.pblok-kop:hover .pblok-naam { text-decoration: underline; }
.pblok-tijd { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .88rem; white-space: nowrap; }
.pblok-naam { font-weight: 600; }
.pblok-soort { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--soort-inkt, var(--grijs)); }
.pblok-acties { margin-left: auto; display: flex; gap: .8rem; align-items: baseline; font-size: .82rem; }
.pblok-acties form { margin: 0; }
.pblok-plus {
  display: inline-block;
  margin-top: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--soort-inkt, var(--navy));
  text-decoration: none;
}
.pblok-plus:hover { text-decoration: underline; }

.linkknop {
  border: 0;
  background: none;
  padding: 0;
  color: var(--blauw);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

ul.taken { list-style: none; margin: .45rem 0 0; padding: 0; }
.taak {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .4rem 0;
  border-top: 1px solid rgba(0, 0, 0, .06);
}
.taak:first-child { border-top: 0; }
.taak .vinkform { margin: 0; }
.vink {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--navy);
  background: #fff;
  color: var(--salie-inkt);
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.vink.vast { cursor: default; border-color: var(--grijs-licht); }
.taak.st-gedaan .vink { background: var(--salie-diep); border-color: var(--salie-inkt); }
.taak.st-niet_gelukt .vink { background: var(--blush); border-color: var(--blush-inkt); color: var(--blush-inkt); }
.taak-tekst { text-decoration: none; color: var(--navy); min-width: 0; }
.taak-titel { display: block; font-weight: 600; }
.taak.st-gedaan .taak-titel { text-decoration: line-through; color: var(--grijs); }
.taak-extra { display: block; font-size: .8rem; color: var(--grijs); }
.taak.laat .taak-extra { color: var(--blush-inkt); }

.label-taak-open        { background: var(--lucht); color: var(--lucht-inkt); }
.label-taak-gedaan      { background: var(--salie); color: var(--salie-inkt); }
.label-taak-niet_gelukt { background: var(--blush); color: var(--blush-inkt); }

.plan-cijfers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.plan-cijfers > div {
  background: var(--soort, var(--waas));
  padding: .6rem .4rem;
  text-align: center;
}
.plan-cijfers .getal { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--navy); }
.plan-cijfers .wat { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); }
.redenen { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.redenen .kopje { width: 100%; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--grijs); }

.redenkeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .3rem 1rem; }

.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.fotos figure { margin: 0; }
.fotos img { display: block; width: 100%; height: 140px; object-fit: cover; border: 1px solid var(--lijn); }
.fotos form { margin-top: .35rem; }

ul.verloop { list-style: none; margin: 0; padding: 0; }
ul.verloop li { padding: .35rem 0; border-top: 1px solid var(--lijn-zacht); display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
ul.verloop li:first-child { border-top: 0; }

@media (max-width: 560px) {
  .plan-cijfers { grid-template-columns: repeat(2, 1fr); }
}
.plan-snel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lijn-zacht); }

/* ------------------------------------------------------------ Planning als weekraster (beheerkant) */
.rooster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1000px) { .rooster-3 { grid-template-columns: 1fr; } }

.blok.pb {
  background: var(--soort);
  border-left-color: var(--soort-inkt);
  padding: 0;
  gap: 0;
}
.blok.pb .pb-kop {
  display: flex;
  flex-direction: column;
  padding: .2rem .4rem .1rem;
  color: var(--navy);
  text-decoration: none;
}
.blok.pb.kort .pb-kop { flex-direction: row; gap: .35rem; align-items: baseline; }
.pb-taken { list-style: none; margin: 0; padding: .05rem .4rem .2rem; }
.pb-taken li {
  display: flex; align-items: center; gap: .3rem;
  height: 16px;
  font-size: .74rem; line-height: 16px; color: var(--navy);
}
.pb-taken li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pb-taken .st-gedaan span { color: var(--grijs); text-decoration: line-through; }
.pb-taken .st-niet_gelukt span { color: var(--blush-inkt); }
.pb-taken .laat span { color: var(--blush-inkt); font-weight: 600; }
.pb-taken li .pb-bol { flex: none; }
/* Statusbolletjes: open = ring, gedaan = vol, niet gelukt = rood */
.pb-bol {
  display: inline-block; flex: none;
  width: 8px; height: 8px;
  border: 1.5px solid var(--soort-inkt, var(--navy)); border-radius: 50%;
  background: #fff;
}
.st-gedaan > .pb-bol, .pb-bol.st-gedaan { background: var(--soort-inkt, var(--navy)); }
.st-niet_gelukt > .pb-bol, .pb-bol.st-niet_gelukt { border-color: var(--blush-inkt); background: var(--blush-inkt); }
.laat > .pb-bol, .pb-bol.laat { border-color: var(--blush-inkt); }
.pb-bollen { display: flex; align-items: center; gap: 3px; padding: .1rem .4rem .2rem; font-size: .7rem; color: var(--soort-inkt); }
.pb-stand { margin-left: .25rem; font-weight: 600; }
.pb-meer { font-weight: 600; }
.blok.pb.kort .pb-bollen { padding-top: 0; }
.legende-bollen { display: inline-flex; align-items: center; gap: .3rem; }
.legende-bollen .pb-bol { --soort-inkt: var(--navy); margin-left: .35rem; }
/* Het hele blok is klikbaar (opent het blokpaneel) */
.blok.pb .pb-kop::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.blok.pb { cursor: pointer; transition: box-shadow .15s; }
.blok.pb:hover { box-shadow: 0 2px 10px rgba(22, 36, 77, .16); }
.blok.pb .pb-kop:focus-visible { outline: none; }
.blok.pb:has(.pb-kop:focus-visible) { outline: 2px solid var(--navy); outline-offset: 1px; }
.pb-plus { display: block; padding: 0 .4rem; font-size: .74rem; font-weight: 600; color: var(--soort-inkt); text-decoration: none; }
.pb-plus:hover { text-decoration: underline; }

.legende .stip[class*="soort-"] { background: var(--soort); border-left-color: var(--soort-inkt); }
.plan-raster a.slot.vrij:hover { background: var(--lucht); }
.plan-raster a.slot.vrij:hover span { color: var(--lucht-inkt); }

/* Uitnodigen met één klik (portaaltoegang) */
.snel-uitnodigen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  border-top: 1px solid var(--lijn-zacht);
}
.snel-uitnodigen:first-of-type { border-top: 0; }

/* ------------------------------------------------------------ Bloktype "les" */
.soort-les { --soort: #ebe6f7; --soort-diep: #cfc6ec; --soort-inkt: #4b3f86; }

/* ------------------------------------------------------------ Vaste week (sj-)
   Breed scherm: een weekraster waarin je sleept. Smal scherm: een lijst per
   dag met een invoerregel op de plek zelf. */

.sj-uitleg {
  background: var(--lucht);
  color: var(--lucht-inkt);
  padding: .55rem .9rem;
  font-size: .88rem;
  margin-bottom: 1rem;
}
.sj-uitleg-lijst { display: none; }

.sj-raster { overflow: visible; }
.sj-kop {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule);
}
.sj-dagkop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .3rem;
  padding: .5rem .5rem;
  border-left: 1px solid var(--lijn);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grijs);
  position: relative;
}

.sj-lichaam {
  position: relative;
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(0, 1fr));
}
.sj-uren { font-size: .7rem; color: var(--grijs); text-align: right; }
.sj-uren div { padding-right: .4rem; transform: translateY(-.45em); box-sizing: border-box; }
.sj-dag {
  position: relative;
  border-left: 1px solid var(--lijn);
  background-image: repeating-linear-gradient(to bottom, var(--lijn) 0, var(--lijn) 1px, transparent 1px, transparent var(--uurh));
}
.sj-dag.bewerkbaar { cursor: crosshair; user-select: none; }
.sj-dag.bewerkbaar:hover { background-color: rgba(218, 231, 247, .25); }
.sj-leeg {
  position: absolute;
  top: 40%;
  left: .4rem;
  right: .4rem;
  text-align: center;
  font-size: .75rem;
  color: var(--grijs-licht);
  pointer-events: none;
}

.sj-blok {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  padding: .15rem .4rem;
  background: var(--soort);
  border-left: 3px solid var(--soort-inkt);
  color: var(--navy);
  text-decoration: none;
  font-size: .76rem;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.sj-blok:hover { filter: brightness(.96); color: var(--navy); }
.sj-blok.gekozen { outline: 2px solid var(--navy); z-index: 3; }
.sj-blok-tijd { font-weight: 700; font-variant-numeric: tabular-nums; }
.sj-blok-naam { font-weight: 600; }
.sj-blok-info { color: var(--soort-inkt); }
.sj-greep {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  cursor: ns-resize;
}
.sj-greep::after {
  content: "";
  position: absolute;
  left: 40%;
  right: 40%;
  bottom: 2px;
  height: 2px;
  background: var(--soort-inkt);
  opacity: 0;
}
.sj-blok:hover .sj-greep::after { opacity: .6; }

.sj-spook {
  position: absolute;
  left: 2px;
  right: 2px;
  box-sizing: border-box;
  border: 2px dashed var(--lucht-inkt);
  background: rgba(218, 231, 247, .6);
  color: var(--lucht-inkt);
  font-size: .75rem;
  font-weight: 700;
  padding: .15rem .35rem;
  pointer-events: none;
  z-index: 4;
}

.sj-pop {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 10;
  width: 330px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(22, 36, 77, .18);
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  cursor: default;
}
.sj-pop[hidden] { display: none; }
.sj-pop-kop { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sj-pop-sluit { text-decoration: none; font-size: 1.4rem; line-height: 1; color: var(--grijs); }

.sj-soorten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.sj-soort { position: relative; display: block; cursor: pointer; }
.sj-soort input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sj-soort span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  font-size: .82rem;
  background: var(--soort);
  color: var(--soort-inkt);
  border: 1px solid var(--soort-diep);
}
.sj-soort input:checked + span { border: 2px solid var(--navy); color: var(--navy); font-weight: 700; }
.sj-soort input:focus-visible + span { outline: 2px solid var(--blauw); outline-offset: 2px; }

.sj-tijden { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.sj-tijden label, .sj-veld { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; font-weight: 600; }
.sj-tijden input[type="time"] { width: 7.2rem; }
.sj-veld input { font-weight: 400; }
.alleen-les { display: none; }
form:has(input[name="soort"][value="les"]:checked) .alleen-les { display: flex; }
.sj-label { font-size: .78rem; font-weight: 600; display: block; margin-bottom: .3rem; }

.sj-dagen { display: flex; gap: .25rem; flex-wrap: wrap; }
.sj-dagknop { position: relative; cursor: pointer; }
.sj-dagknop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sj-dagknop span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--lijn);
  background: #fff;
  font-size: .8rem;
}
.sj-dagknop input:checked + span { background: var(--zwart); border-color: var(--zwart); color: #fff; }
.sj-dagknop input:focus-visible + span { outline: 2px solid var(--blauw); outline-offset: 2px; }

.sj-duren { display: flex; gap: .25rem; }
.sj-duur { position: relative; cursor: pointer; }
.sj-duur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sj-duur span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 .65rem;
  border: 1px solid var(--lijn);
  background: #fff;
  font-size: .85rem;
}
.sj-duur input:checked + span { background: var(--zwart); border-color: var(--zwart); color: #fff; }
.sj-duur input:focus-visible + span { outline: 2px solid var(--blauw); outline-offset: 2px; }

.sj-kopie { position: relative; text-transform: none; letter-spacing: 0; }
.sj-kopie summary {
  list-style: none;
  cursor: pointer;
  font-size: .75rem;
  color: var(--blauw);
}
.sj-kopie summary::-webkit-details-marker { display: none; }
.sj-kopie-paneel {
  position: absolute;
  right: 0;
  top: 1.6rem;
  z-index: 12;
  width: 260px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(22, 36, 77, .18);
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: var(--navy);
  font-size: .85rem;
}

/* Lijst per dag */
.sj-lijst { display: none; }
.sj-rij { padding: .75rem .9rem; }
.sj-rij-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; }
.sj-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.sj-chip {
  padding: .35rem .6rem;
  background: var(--soort);
  border-left: 3px solid var(--soort-inkt);
  color: var(--navy);
  text-decoration: none;
  font-size: .85rem;
}
.sj-plus { font-size: .85rem; text-decoration: none; padding: .35rem .3rem; }
.sj-regel {
  width: 100%;
  margin-top: .5rem;
  padding: .75rem;
  border: 1px solid var(--rule);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.sj-regel .sj-soorten { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .sj-raster, .sj-uitleg-raster { display: none; }
  .sj-lijst { display: block; }
  .sj-uitleg-lijst { display: inline; }
  .sj-regel .sj-soorten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.blad.blad-breed { max-width: 1280px; }
.pb-info { display: block; padding: 0 .4rem; font-size: .72rem; color: var(--soort-inkt); }
.pb-teller {
  display: inline-block;
  margin: .1rem .4rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--soort-inkt);
  color: #fff;
  font-size: .7rem;
}
.les-bron { display: inline-block; padding: .1rem .5rem; background: var(--soort); color: var(--soort-inkt); font-size: .85rem; }
.plan-keuze { display: flex; flex-direction: column; gap: .35rem; }
.plan-optie { padding: .5rem .65rem; background: var(--soort, transparent); border: 1px dashed var(--lijn); }
.plan-optie.soort-studie { border-style: solid; border-color: var(--soort-diep); }

/* Een taak op meerdere momenten */
.plan-dagen { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
fieldset:has(.plan-dagen) { margin-top: 1rem; }
.plan-dag { display: flex; align-items: flex-start; gap: .75rem; }
.plan-dag-naam { flex: 0 0 7.5rem; white-space: nowrap; padding-top: .4rem; font-size: .88rem; font-weight: 600; color: var(--navy); }
.plan-dag-blokken { display: flex; flex-wrap: wrap; gap: .35rem; }
.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .35rem .6rem;
  border: 1px solid var(--lijn);
  background: #fff;
  font-size: .88rem;
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
}
.plan-chip input { width: auto; margin: 0; }
.plan-chip:has(input:checked) { background: var(--salie); border-color: var(--salie-diep); font-weight: 600; }
@media (max-width: 560px) {
  .plan-dag { flex-direction: column; gap: .2rem; }
  .plan-dag-naam { flex: none; padding-top: 0; }
}
.reeks-label {
  display: inline-block;
  margin-left: .3rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--lijn);
  color: var(--navy);
  font-size: .72rem;
  font-weight: 600;
  vertical-align: .1em;
}
.taak.huidig .taak-titel { font-weight: 700; }
details.extra-keer > summary { cursor: pointer; list-style: none; }
details.extra-keer > summary::-webkit-details-marker { display: none; }
details.extra-keer > summary h2::before { content: '+ '; }
details.extra-keer[open] > summary h2::before { content: '\2212  '; }
form:has(select[name="soort"] option[value="les"]:checked) .veld.alleen-les,
form:has(input[name="soort"][value="les"]:checked) .veld.alleen-les { display: block; }

/* Systeemcontrole */
.controle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-weight: 700;
}
.controle-ok   { background: var(--salie); color: var(--salie-inkt); }
.controle-let  { background: var(--creme); color: var(--creme-inkt); }
.controle-fout { background: var(--blush); color: var(--blush-inkt); }
.codeblok {
  background: var(--waas);
  border: 1px solid var(--lijn);
  padding: .6rem .8rem;
  font-size: .85rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Meldingen per persoon (Portaaltoegang) */
table.lijst tr.meld-rij td { padding-top: 0; border-bottom: 1px solid var(--lijn); }
table.lijst tr.meld-rij:hover { background: transparent; }
.meld-details summary { cursor: pointer; font-size: .85rem; color: var(--blauw); padding: .2rem 0 .5rem; }
.meld-tabel { border-collapse: collapse; margin: .25rem 0 .5rem; }
.meld-tabel th, .meld-tabel td { padding: .3rem .8rem .3rem 0; text-align: left; font-size: .88rem; border: 0; }
.meld-tabel th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); font-weight: 600; }
.meld-tabel input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }

/* Het hidden-attribuut wint altijd, ook van .knop of .p-breed. */
[hidden] { display: none !important; }

/* Knoppenbalk van een klant, op elk scherm over die klant */
.klantbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin: -.25rem 0 1.25rem;
  padding: .6rem .75rem;
  background: var(--waas);
  border: 1px solid var(--lijn);
}
.klantbalk-naam { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); text-decoration: none; }
.klantbalk-naam:hover { text-decoration: underline; }
.klantbalk .knoprij { margin-left: auto; gap: .35rem; }
.klantbalk .knop-2.actief { border: 2px solid var(--navy); font-weight: 600; background: #fff; }
.blok.pb .pb-kop { padding-right: 1.9rem; }
.pb-snelplus {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--soort-inkt);
  color: #fff;
  opacity: .78;
  box-shadow: 0 1px 2px rgba(22, 36, 77, .18);
  transition: opacity .15s, transform .15s, box-shadow .15s;
}
.pb-snelplus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.pb-snelplus:hover, .pb-snelplus:focus-visible { opacity: 1; transform: scale(1.12); box-shadow: 0 2px 6px rgba(22, 36, 77, .28); }
.pb-snelplus:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.blok.pb.kort .pb-snelplus { top: 2px; right: 3px; width: 18px; height: 18px; }
.blok.pb.kort .pb-snelplus svg { width: 12px; height: 12px; }

/* Nieuwe taak: formulier (paneel en pagina) */
.tf-kop { margin-bottom: 1rem; }
.tf-titel { margin: 0 0 .25rem; font-size: 1.35rem; }
.tf-sub { margin: 0; color: var(--grijs); font-size: .9rem; }
.tf-form .veld { margin-bottom: 1rem; }
.tf-form #tf-titel { font-size: 1.05rem; }
.tf-vakken { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.tf-vak {
  padding: .2rem .65rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.tf-vak:hover { border-color: var(--navy); }
.tf-vak.aan { background: var(--navy); border-color: var(--navy); color: #fff; }
.tf-wanneer { margin: 0 0 1rem; }
.tf-teller { margin: .6rem 0 .2rem; font-size: .9rem; font-weight: 600; color: var(--navy); }
.tf-meer { margin-bottom: 1.1rem; }
.tf-meer > summary { cursor: pointer; color: var(--blauw); font-size: .9rem; margin-bottom: .6rem; }
.tf-knoppen { margin-top: .5rem; }
.tf-pagina { max-width: 560px; }

/* Mini-week om momenten te kiezen */
.mw-week + .mw-week { margin-top: 1rem; }
.mw.js .mw-week { display: none; margin-top: 0; }
.mw.js .mw-week.toon { display: block; }
.mw-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.mw-naam { font-size: .85rem; font-weight: 600; color: var(--navy); }
.mw-pijl {
  width: 28px; height: 28px;
  border: 1px solid var(--lijn); border-radius: 50%;
  background: #fff; color: var(--navy);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  visibility: hidden;
}
.mw.js .mw-pijl { visibility: visible; }
.mw-pijl:disabled { opacity: .3; cursor: default; }
.mw-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mw-dag {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  min-height: 84px; padding: 4px;
  background: var(--lijn-zacht, #f4f4f2);
  border-radius: 6px;
}
.mw-dag.voorbij { opacity: .55; }
.mw-dag.vandaag .mw-dagnaam b { background: var(--navy); color: #fff; }
.mw-dagnaam { display: flex; flex-direction: column; align-items: center; font-size: .7rem; color: var(--grijs); text-transform: uppercase; }
.mw-dagnaam b {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: .85rem; color: var(--navy); text-transform: none;
}
.mw-les { align-self: center; padding: 0 .35rem; border-radius: 999px; background: #ebe6f7; color: #4b3f86; font-size: .66rem; font-weight: 600; }
.mw-blok { position: relative; display: block; margin: 0; cursor: pointer; }
.mw-blok input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mw-blok span {
  display: block; padding: .35rem 0; text-align: center;
  border: 1.5px dashed var(--salie-inkt); border-radius: 5px;
  background: #fff; color: var(--salie-inkt);
  font-size: .78rem; font-weight: 600;
  transition: background .12s, color .12s;
}
.mw-blok:hover span { background: var(--salie); }
.mw-blok input:checked + span { border-style: solid; background: var(--salie-inkt); color: #fff; }
.mw-blok input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Het paneel over het rooster */
.tp-achter {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(22, 36, 77, .18);
  opacity: 0; transition: opacity .2s, visibility 0s .2s;
  /* Dicht = onzichtbaar én niet klikbaar; anders blokkeert dit doorzichtige
     vlak na het sluiten van het paneel elke klik op de pagina. */
  visibility: hidden; pointer-events: none;
}
.tp-open .tp-achter { visibility: visible; pointer-events: auto; transition: opacity .2s; }
.tp-paneel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 901;
  width: min(440px, 100vw);
  overflow-y: auto;
  padding: 1.4rem 1.4rem 2rem;
  background: #fff;
  box-shadow: -8px 0 30px rgba(22, 36, 77, .16);
  transform: translateX(100%); transition: transform .22s ease-out, visibility 0s .22s;
  visibility: hidden;
}
.tp-open .tp-achter { opacity: 1; }
.tp-open .tp-paneel { transform: none; visibility: visible; transition: transform .22s ease-out; }
.tp-sluit {
  position: absolute; top: .8rem; right: .8rem;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--grijs); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.tp-sluit:hover { background: var(--lijn-zacht, #f4f4f2); color: var(--navy); }
.tp-laden { color: var(--grijs); padding-top: 2rem; }
.tp-paneel .tf-kop { padding-right: 2rem; }
body.tp-vast { overflow: hidden; }
@media (max-width: 700px) {
  .tp-paneel {
    top: auto; left: 0; width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 1.1rem 1rem 1.5rem;
    transform: translateY(100%);
    box-shadow: 0 -8px 30px rgba(22, 36, 77, .18);
  }
  .tp-paneel::before {
    content: ''; display: block; width: 40px; height: 4px; margin: 0 auto .8rem;
    border-radius: 2px; background: var(--lijn);
  }
  .mw-dag { min-height: 72px; padding: 3px 2px; }
  .mw-blok span { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-paneel, .tp-achter, .pb-snelplus { transition: none; }
}


/* ------------------------------------------------------------ Blokpaneel */
.bp-kop .bp-soort {
  display: inline-block; margin-bottom: .35rem; padding: .05rem .5rem;
  border-radius: 999px; background: var(--soort); color: var(--soort-inkt);
  font-size: .75rem; font-weight: 600;
}
.bp-h { margin: 1.1rem 0 .4rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--grijs); font-family: inherit; }
.bp-leeg { margin: .3rem 0 1rem; }
.bp-taken { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--lijn-zacht); }
.bp-taak { border-bottom: 1px solid var(--lijn-zacht); }
.bp-rijwikkel { display: flex; align-items: center; gap: .55rem; }
.bp-vinkform { margin: 0; }
.bp-vink {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; padding: 0;
  border: 2px solid var(--salie-inkt); border-radius: 50%;
  background: #fff; color: transparent; cursor: pointer;
  transition: background .12s, color .12s;
}
.bp-vink svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bp-vink:hover { color: var(--salie-inkt); background: var(--salie); }
.st-gedaan .bp-vink { background: var(--salie-inkt); color: #fff; }
.st-niet_gelukt .bp-vink { border-color: var(--blush-inkt); }
.laat .bp-vink { border-color: var(--blush-inkt); }
.bp-vink.bezig { opacity: .5; }
.bp-vink.vast { cursor: default; }
.bp-rij {
  display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0;
  padding: .65rem 0; border: 0; background: none; text-align: left;
  font: inherit; color: var(--navy); cursor: pointer;
}
.bp-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bp-titel { font-weight: 600; font-size: .95rem; }
.st-gedaan .bp-titel { color: var(--grijs); text-decoration: line-through; font-weight: 400; }
.bp-extra { font-size: .8rem; color: var(--grijs); }
.st-niet_gelukt .bp-extra, .laat .bp-extra { color: var(--blush-inkt); }
.bp-pijl { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--grijs-licht); border-bottom: 2px solid var(--grijs-licht); transform: rotate(-45deg); transition: transform .15s; margin-right: .3rem; }
.bp-rij[aria-expanded="true"] .bp-pijl { transform: rotate(45deg); }
.bp-rij:hover .bp-titel { text-decoration: underline; }
.bp-taak.open { background: var(--lijn-zacht); margin: 0 -.6rem; padding: 0 .6rem; border-radius: 6px; }
.bp-editor { padding: .2rem 0 1rem 2.1rem; }
.bp-editor .veld { margin-bottom: .7rem; }
.bp-editor .velden { gap: .2rem .75rem; }
.bp-editor input, .bp-editor select { background: #fff; }
.bp-reeks { margin: .1rem 0 .7rem; font-size: .85rem; }
.bp-acties { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--lijn); }
.bp-niet > summary { cursor: pointer; color: var(--blauw); font-size: .88rem; }
.bp-niet[open] { flex-basis: 100%; }
.bp-niet form { margin-top: .6rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.bp-redenen { display: flex; flex-wrap: wrap; gap: .3rem; }
.bp-reden { margin: 0; cursor: pointer; }
.bp-reden input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bp-reden span { display: inline-block; padding: .2rem .6rem; border: 1px solid var(--lijn); border-radius: 999px; background: #fff; font-size: .82rem; font-weight: 400; color: var(--navy); }
.bp-reden input:checked + span { background: var(--blush-inkt); border-color: var(--blush-inkt); color: #fff; }
.bp-reden input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 1px; }
.bp-niet input[type="text"] { width: 100%; }
.bp-inline { margin: 0; }
.bp-wis { display: flex; gap: .4rem; margin: 0 0 0 auto; }
.bp-wisknop {
  padding: .25rem .65rem; border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--blush-inkt); font: inherit; font-size: .84rem; cursor: pointer;
}
.bp-wisknop:hover { border-color: var(--blush-diep); background: var(--blush); }
.bp-wisknop.zeker { background: var(--blush-inkt); border-color: var(--blush-inkt); color: #fff; }
.bp-meer { display: inline-block; margin-top: .8rem; font-size: .84rem; }
.bp-fout { margin: 0 0 .7rem; }
.bp-voet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.bp-link { font-size: .88rem; }
@media (max-width: 700px) {
  .bp-editor { padding-left: 0; }
}

/* ------------------------------------------------------------ Vaklabels (elk vak een vaste kleur) */
.vak-label {
  display: inline-block; flex: none;
  max-width: 100%;
  padding: 0 .4rem;
  border-radius: 4px;
  background: var(--vk-bg); color: var(--vk-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vk-ink) 22%, transparent);
  font-size: .78em; font-weight: 700; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: .08em;
  text-decoration: none;
}
.vk-0 { --vk-bg: #dce8fa; --vk-ink: #2c4a80; }
.vk-1 { --vk-bg: #f8ddd5; --vk-ink: #8c3a2c; }
.vk-2 { --vk-bg: #d9ecd0; --vk-ink: #3e6330; }
.vk-3 { --vk-bg: #f7eabb; --vk-ink: #6f5a12; }
.vk-4 { --vk-bg: #e6e0f7; --vk-ink: #4b3f86; }
.vk-5 { --vk-bg: #d3eeee; --vk-ink: #1d5e64; }
.vk-6 { --vk-bg: #fde0c8; --vk-ink: #8a4813; }
.vk-7 { --vk-bg: #f5dbec; --vk-ink: #7d3567; }
.pb-taken .vak-label { font-size: .64rem; line-height: 13px; padding: 0 .25rem; max-width: 45%; }
.st-gedaan .vak-label { opacity: .55; }
.bp-titel .vak-label, .taak-titel .vak-label { margin-right: .15rem; }

/* Taak uit een les: opdracht of toets */
.tf-modus { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.tf-modusknop { margin: 0; cursor: pointer; }
.tf-modusknop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tf-modusknop span {
  display: inline-block; padding: .4rem .85rem;
  border: 1.5px solid var(--lijn); border-radius: 999px; background: #fff;
  font-size: .88rem; font-weight: 600; color: var(--navy);
}
.tf-modusknop input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.tf-modusknop input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.mw-dagnaam { order: 0; }
.mw-les, .mw-deadline { order: 1; }
.mw-blok { order: 2; }
.mw-deadline { display: none; align-self: center; padding: 0 .35rem; border-radius: 999px; background: var(--blush-inkt); color: #fff; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mw-dag.is-deadline { box-shadow: inset 0 0 0 2px var(--blush-inkt); }
.mw-dag.is-deadline .mw-deadline { display: block; }
.mw-dag.is-deadline .mw-les { display: none; }
.mw-dag.na-deadline { opacity: .4; }
/* In een smal (gedeeld) blok: het vak enkel als gekleurd streepje */
.blok.pb.smal .pb-taken .vak-label { width: 5px; min-width: 5px; height: 11px; padding: 0; font-size: 0; border-radius: 2px; background: var(--vk-ink); box-shadow: none; }

/* Te laat: na de toets of deadline */
.mw-blok.te-laat { cursor: not-allowed; }
.mw-blok.te-laat span { border-style: dotted; border-color: var(--grijs-licht); color: var(--grijs-licht); background: transparent; text-decoration: line-through; }
.mw-blok.te-laat:hover span { background: transparent; }

/* Wat je op elk gekozen moment doet */
.tf-keren { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--lijn); }
.tf-keren-kop { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--navy); }
.tf-keer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; }
.tf-keer[hidden] { display: none; }
.tf-keer-wanneer { font-size: .85rem; color: var(--navy); white-space: nowrap; }
.tf-keer-soorten { display: inline-flex; border: 1px solid var(--lijn); border-radius: 999px; overflow: hidden; background: #fff; }
.tf-keer-soort { margin: 0; cursor: pointer; }
.tf-keer-soort input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tf-keer-soort span { display: block; padding: .2rem .6rem; font-size: .78rem; font-weight: 600; color: var(--grijs); }
.tf-keer-soort + .tf-keer-soort span { border-left: 1px solid var(--lijn); }
.tf-keer-soort input:checked + span { background: var(--salie-inkt); color: #fff; }
.tf-keer-soort input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: -2px; }
@media (max-width: 420px) {
  .tf-keer { flex-wrap: wrap; }
}
.pb-herhaal { font-weight: 700; color: var(--soort-inkt); }

/* ------------------------------------------------------------ Slepen in het rooster */
.sleep-spook {
  position: absolute; left: 2px; right: 2px; z-index: 6;
  display: flex; align-items: flex-start;
  padding: .2rem .4rem;
  border: 2px dashed var(--soort-inkt, var(--navy)); border-radius: 4px;
  background: color-mix(in srgb, var(--soort, #fff) 85%, transparent);
  color: var(--navy); font-size: .78rem; font-weight: 700;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(22, 36, 77, .22);
}
[data-sleep-blok].sleept { opacity: .35; }
body.sleep-bezig, body.sleep-bezig * { cursor: grabbing !important; user-select: none; }
.pb-greep {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 7px; cursor: ns-resize;
}
.blok.pb:hover .pb-greep { background: linear-gradient(transparent 2px, color-mix(in srgb, var(--soort-inkt) 35%, transparent) 2px 4px, transparent 4px); }
.sleep-toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 950;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1rem .7rem 1.2rem;
  border-radius: 999px; background: var(--navy); color: #fff;
  font-size: .9rem; box-shadow: 0 8px 24px rgba(22, 36, 77, .3);
  transform: translate(-50%, 150%); opacity: 0; visibility: hidden;
  transition: transform .2s, opacity .2s, visibility 0s .2s;
}
.sleep-toast.zichtbaar { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .2s, opacity .2s; }
.sleep-toast button {
  padding: .3rem .8rem; border: 0; border-radius: 999px;
  background: #fff; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
}

/* Kalender of lijst (portaal, op een pc) */
.weergave-keuze { display: inline-flex; border: 1px solid var(--lijn); border-radius: 999px; overflow: hidden; background: #fff; }
.weergave-keuze a { padding: .3rem .8rem; font-size: .82rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.weergave-keuze a + a { border-left: 1px solid var(--lijn); }
.weergave-keuze a.aan { background: var(--navy); color: #fff; }
@media (max-width: 820px) { .alleen-breed { display: none !important; } }

/* Vaste week: wanneer de dag begint en eindigt */
.sj-dagvorm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: .9rem; color: var(--navy); }
.sj-dagvorm input[type="time"] { width: auto; padding: .3rem .5rem; }
.sj-dagvorm .hulp { margin: 0; }

/* ------------------------------------------------------------ Website (beheer) */
.knop-link { padding: 0 .3rem; border: 0; background: none; color: var(--blauw); font: inherit; cursor: pointer; text-decoration: underline; }
.aanvraag { padding: 1rem 0; border-bottom: 1px solid var(--lijn-zacht); }
.aanvraag:first-child { padding-top: 0; }
.aanvraag-hoofd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.aanvraag-hoofd form { margin: 0; }
.aanvraag-gegevens { display: grid; grid-template-columns: 8rem 1fr; gap: .25rem 1rem; margin: .75rem 0 0; font-size: .92rem; }
.aanvraag-gegevens dt { color: var(--grijs); }
.aanvraag-gegevens dd { margin: 0; }
.aanvraag-oud { margin-top: 1rem; font-size: .92rem; }
.aanvraag-oud summary { cursor: pointer; color: var(--blauw); }
.aanvraag-oud ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.aanvraag-oud li { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--lijn-zacht); }
.aanvraag-oud form { margin: 0; }
.aanvraag-melding { border-color: var(--salie-diep); }
.aanvraag-kort { list-style: none; margin: 0 0 .75rem; padding: 0; }
.aanvraag-kort li { padding: .3rem 0; }
.prijsrij { border: 1px solid var(--lijn); border-radius: 8px; margin-bottom: .5rem; background: #fff; }
.prijsrij > summary { display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.prijsrij > summary::-webkit-details-marker { display: none; }
.prijsrij-naam { flex: 1; font-weight: 600; }
.prijsrij-prijs { white-space: nowrap; }
.prijsrij.verborgen > summary { opacity: .6; }
.prijsrij[open] > summary { border-bottom: 1px dashed var(--lijn); }
.prijsvorm, .prijswis { padding: .9rem; margin: 0; }
.prijswis { padding-top: 0; }
.prijsrij-nieuw > summary .prijsrij-naam { color: var(--blauw); }
.prijsrij .vinkje { margin-bottom: .3rem; }

/* ------------------------------------------------------------ Abonnementen */
.abo-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem;
  padding: .75rem 1rem; border-radius: 10px; background: var(--creme); color: var(--creme-inkt); font-size: .92rem; }
.abo-balk.abo-achterstal, .abo-balk.abo-verlopen { background: var(--blush); color: var(--blush-inkt); }
.abo-status { margin: 0 0 .4rem; }
.abo-keuze { margin-bottom: .75rem; }
.abo-betalingen { list-style: none; margin: 0; padding: 0; }
.abo-betalingen li { display: grid; grid-template-columns: 1fr auto 6rem; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--lijn-zacht); font-size: .92rem; }
.abo-bst { text-align: right; color: var(--grijs); }
.abo-bst-paid { color: var(--salie-inkt); font-weight: 600; }
.abo-bst-failed { color: var(--blush-inkt); }
.abo-cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.abo-cijfers div { display: flex; flex-direction: column; padding: 1rem 1.1rem; border: 1px solid var(--lijn); border-radius: 10px; background: #fff; }
.abo-cijfers strong { font-family: var(--serif); font-size: 1.7rem; color: var(--navy); }
.abo-cijfers span { font-size: .85rem; color: var(--grijs); }
@media (max-width: 760px) { .abo-cijfers { grid-template-columns: repeat(2, 1fr); } }
.abo-leerlingen { list-style: none; margin: 0; padding: 0; }
.abo-leerlingen li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--lijn-zacht); }
.abo-leerlingen form { margin: 0; }
.abo-label-proef { background: var(--lucht); color: var(--lucht-inkt); }
.abo-label-actief { background: var(--salie); color: var(--salie-inkt); }
.abo-label-achterstal, .abo-label-verlopen { background: var(--blush); color: var(--blush-inkt); }
.abo-label-opgezegd, .abo-label-gestopt { background: var(--lijn-zacht); color: var(--grijs); }
.label-let { background: var(--creme); color: var(--creme-inkt); }

/* ------------------------------------------------------------ Blokken in het rooster (6 okt 2026) */
.blok.pb .pb-rij1 { display: flex; align-items: baseline; gap: .3rem; min-width: 0; white-space: nowrap; overflow: hidden; }
.blok.pb .pb-lok { font-size: .66rem; font-weight: 600; letter-spacing: .02em; color: var(--soort-inkt); opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.blok.pb.soort-les .pb-kop { flex-direction: column; gap: 0; }
.blok.pb .pb-eerste { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.blok.pb .pb-eerste.st-gedaan { color: var(--grijs); text-decoration: line-through; font-weight: 400; }
.blok.pb .pb-rij1 .vak-label { font-size: .62rem; line-height: 13px; padding: 0 .25rem; align-self: center; }
.pb-to {
  display: inline-block; flex: none; align-self: center;
  padding: 0 .3rem; border-radius: 999px;
  background: var(--blush-inkt); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 13px; letter-spacing: .02em;
}
.pb-tellers { display: flex; padding: .1rem .45rem .2rem; }
.pb-tel {
  display: inline-block; padding: 0 .4rem; border-radius: 999px;
  background: #fff; color: var(--soort-inkt, var(--navy));
  box-shadow: inset 0 0 0 1px var(--soort-inkt, var(--navy));
  font-size: .68rem; font-weight: 700; line-height: 16px; white-space: nowrap;
}
.pb-tel b { color: var(--blush-inkt); }
.pb-tel.toets { background: var(--blush-inkt); color: #fff; box-shadow: none; }
.pb-tel.klaar { color: var(--salie-inkt); box-shadow: inset 0 0 0 1px var(--salie-inkt); }
.legende-bollen .pb-tel { --soort-inkt: var(--navy); }
.pb-regel { display: flex; align-items: center; gap: .3rem; padding: 0 .45rem; padding-right: 1.6rem; font-size: .7rem; color: var(--soort-inkt); white-space: nowrap; overflow: hidden; }
.pb-plus-n { flex: none; padding: 0 .3rem; border-radius: 999px; background: #fff; font-weight: 700; line-height: 14px; }
.pb-toetsdatum { color: var(--blush-inkt); font-weight: 600; }
.blok.pb.kort .pb-kop { padding-bottom: 0; }
.blok.pb.kort .pb-tweede { margin-top: -1px; }
/* Een leeg studeerblok valt op */
.blok.pb.pb-leeg { background: color-mix(in srgb, var(--soort) 55%, #fff); }
.blok.pb.pb-leeg::before { content: ''; position: absolute; inset: 0; border: 1.5px dashed var(--soort-inkt); opacity: .5; pointer-events: none; }
.pb-leeg-tekst { color: var(--soort-inkt); font-weight: 400; font-style: italic; }
/* Het kaartje bij aanwijzen (computer) */
.pb-pop {
  position: absolute; z-index: 800; width: 260px; max-width: calc(100vw - 20px);
  padding: .65rem .75rem; border-radius: 10px;
  background: #fff; border: 1px solid var(--lijn);
  box-shadow: 0 14px 32px rgba(22, 36, 77, .2);
  font-size: .82rem; color: var(--navy); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.pb-pop.zichtbaar { opacity: 1; transform: none; }
.pb-pop-kop { display: block; margin-bottom: .3rem; font-size: .84rem; }
.pb-pop-sub { display: block; margin-bottom: .2rem; font-size: .74rem; color: var(--grijs); }
.pb-pop ul { list-style: none; margin: 0; padding: 0; }
.pb-pop li { display: flex; align-items: flex-start; gap: .4rem; padding: .22rem 0; }
.pb-pop li .pb-bol { margin-top: .3rem; --soort-inkt: var(--salie-inkt); }
.pb-pop-tekst { display: flex; flex-direction: column; min-width: 0; }
.pb-pop-tekst small { color: var(--grijs); font-size: .74rem; }
.pb-pop li.st-gedaan .pb-pop-tekst > span { color: var(--grijs); text-decoration: line-through; }
.pb-pop-leeg { margin: 0; color: var(--grijs); }
.pb-pop-voet { display: block; margin-top: .45rem; font-size: .74rem; color: var(--blauw); }
.blok.pb .pb-kop { min-width: 0; }
.blok.pb .pb-rij1 { flex: 1 1 auto; }
.blok.pb .pb-rij1 .blok-uur { flex: none; }
.blok.pb.kort .blok-naam { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* De agenda zet halfuurblokken naast elkaar; in de planning blijft het twee regels
   (dit was ook de oorzaak van het rondje achter het plusje). */
.blok.pb[style*="height:39px"],
.blok.pb[style*="height:38px"] { flex-direction: column; align-items: stretch; gap: 0; }
.blok.pb .pb-rij1 .vak-label { flex: 0 1 auto; min-width: 1.4em; max-width: 40%; }
.blok.pb .pb-rij1 .pb-eerste { flex: 1 1 auto; min-width: 3em; }
.blok.pb .pb-rij1 .vak-label { flex: none; max-width: none; min-width: 0; }
.blok.pb .pb-rij1 .pb-eerste { min-width: 0; }

/* Kort studeerblok: uur en vak bovenaan, de taak op een eigen regel eronder. */
.blok.pb .pb-kop.pb-twee { flex-direction: column; align-items: stretch; gap: 0; }
.blok.pb .pb-twee .pb-rij1 { flex: none; }
.blok.pb .pb-twee .pb-plus-n { font-size: .62rem; line-height: 13px; align-self: center; color: var(--soort-inkt); }
.pb-taakregel { display: flex; align-items: center; gap: .3rem; min-width: 0; white-space: nowrap; font-size: .74rem; line-height: 1.25; }
.pb-taakregel .pb-bol { flex: none; }
.pb-taakregel .pb-eerste { flex: 1 1 auto; min-width: 0; }
.blok.pb .pb-derde { margin-top: 0; }
.blok.pb .pb-twee .pb-rij1 .vak-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.blok.pb .pb-twee .pb-rij1 .pb-plus-n { flex: none; }
.blok.pb.smal .pb-twee .pb-rij1 .vak-label { display: none; }
.pb-taakregel .pb-plus-n { flex: none; font-size: .62rem; line-height: 13px; color: var(--soort-inkt); }
.blok.pb .pb-taakregel { padding-right: .1rem; }
.pb-taakregel .pb-eerste { flex: 0 1 auto; }
/* De taakregel ligt onder de plusknop en mag de volle breedte gebruiken. */
.blok.pb .pb-kop.pb-twee { padding-right: .35rem; }
.blok.pb .pb-twee .pb-rij1 { padding-right: 1.55rem; }
.blok.pb.kort .pb-twee .pb-rij1 { padding-right: 1.2rem; }

/* Blok weghalen: prullenbakje bij aanwijzen (rooster) en in het blokpaneel. */
.pb-weg, .bp-weg { display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; font: inherit; }
.pb-weg svg, .bp-weg svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pb-weg {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: var(--soort-inkt);
  box-shadow: 0 1px 2px rgba(22, 36, 77, .18);
  opacity: 0; transform: scale(.85);
  transition: opacity .15s, transform .15s, background .15s, color .15s;
}
.pb-weg.naast-plus { right: 30px; }
.pb-weg svg { width: 13px; height: 13px; }
.blok.pb:hover .pb-weg, .pb-weg:focus-visible { opacity: 1; transform: none; }
.pb-weg:hover, .pb-weg:focus-visible { background: var(--blush-inkt); color: #fff; }
.pb-weg:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.blok.pb.kort .pb-weg { top: 2px; right: 3px; width: 18px; height: 18px; }
.blok.pb.kort .pb-weg.naast-plus { right: 24px; }
.blok.pb.kort .pb-weg svg { width: 11px; height: 11px; }
/* In een smalle kolom is er geen plaats voor twee knopjes: dan het prullenbakje op de plaats van de plus. */
.blok.pb.smal:hover .pb-snelplus { opacity: 0; pointer-events: none; }
.blok.pb.smal .pb-weg.naast-plus { right: 4px; }
.blok.pb.smal.kort .pb-weg.naast-plus { right: 3px; }
@media (hover: none) { .pb-weg { display: none; } }
.blok.pb.weg-bezig { opacity: .45; pointer-events: none; }
.blok.pb.weg { transition: opacity .15s, transform .15s; opacity: 0; transform: scale(.96); }

.bp-weg {
  position: absolute; top: .8rem; right: 3.1rem; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; color: var(--grijs);
}
.bp-weg svg { width: 17px; height: 17px; }
.bp-weg:hover, .bp-weg:focus-visible { background: color-mix(in srgb, var(--blush-inkt) 12%, #fff); color: var(--blush-inkt); }
.tp-paneel .bp-kop { padding-right: 4.6rem; }
@media (prefers-reduced-motion: reduce) { .pb-weg, .blok.pb.weg { transition: none; } }