/* ===================== HADIR - GEDEELDE BASISSTIJL =====================
   Gebruikt door alle ingelogde pagina's (index/absentie/lvs/oudergesprekken)
   en (met een lokale override van .app) door het publieke afmeldformulier.
   Wijzig hier de designtokens/basiscomponenten 1x, i.p.v. in 5 losse bestanden.
   Pagina-specifieke stijl (bijv. status-knoppen bij absentie, zoekbalk bij
   lvs) blijft in het <style>-blok van die ene pagina zelf staan. */

:root{
  --ink:#16232B; --paper:#E9ECE7; --paper-raised:#F5F6F3;
  --teal:#1F4B43; --teal-dark:#14332C; --coral:#C4483F; --amber:#C98A2C;
  /* De amber uit het logo (public/brand/*.svg). --amber hierboven is donkerder
     en betekent 'let op' (zie .icon-btn-warn); deze is puur merkkleur. */
  --amber-logo:#F2AE3E;
  --line:#C7CCC3; --ink-soft:#4B5A57;
  --font-display:'Fraunces', serif; --font-body:'IBM Plex Sans', sans-serif;
  --tabh:58px;
}
html{ overflow-y: scroll; }
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font-body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden;}

/* Standaardbreedte voor ingelogde pagina's. Het publieke afmeldformulier
   overschrijft dit lokaal naar iets smallers (past beter bij één formulier). */
/* De tabellen (het absentieoverzicht, de klassenlijst) winnen hier het meest
   bij: daar past een kolom of twee extra in beeld. Veel breder wordt het juist
   slechter - een regel tekst wordt dan te lang om prettig te lezen, en in een
   brede tabel komen de naam links en de totalen rechts zo ver uit elkaar te
   liggen dat je met je ogen moet reizen. 1140 is het midden tussen de oude
   1040 en de 1240 die we even hebben aangehouden.
   .abs-savebar-inner hieronder houdt dezelfde maat aan, anders staat de
   opslagbalk onderin niet meer in lijn met de inhoud erboven. */
.app{max-width:1140px; margin:0 auto; padding:24px 16px 60px;}

header.top{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:22px;}
header.top h1{font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:0.2px; margin:0;}
.header-status{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.status-pill{font-size:12px; color:var(--ink-soft); background:var(--paper); padding:6px 12px; border-radius:999px; white-space:nowrap;}
.logout-combo{background:var(--teal); color:#fff; border:none; border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; font-family:inherit; display:inline-flex; align-items:center; gap:6px;}
.logout-combo:hover{background:var(--teal-dark);}
.logout-combo .rol{opacity:0.85; font-weight:500;}

/* margin-inline-start: extra ruimte t.o.v. de laatste navigatietab - de
   bestaande gap op .header-status (zie de losse HTML-pagina's) hield de tabs
   en dit knopje net te dicht bij elkaar. */
.gebruiker-menu{position:relative; display:inline-block; margin-inline-start:14px;}
/* Zachte grijze pil + avatar-cirkel i.p.v. een volle groene vlakvulling: dat
   liet dit knopje té veel op de actieve-tab-pil lijken. Blijft duidelijk
   klikbaar (aparte vlakkleur + hover), maar concurreert niet meer met de
   navigatie ernaast. */
.gebruiker-menu-knop{background:var(--paper); color:var(--ink); border:none; border-radius:999px; padding:5px 9px 5px 5px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; font-family:inherit; display:inline-flex; align-items:center; gap:7px; line-height:1;}
.gebruiker-menu-knop:hover{background:var(--line);}
/* Amber met donkere letter: de cirkel toont de rol (A/D/L) en moet zich
   onderscheiden van het teal dat in deze balk de navigatie en de knoppen
   draagt. Donker op amber i.p.v. wit erop - wit haalt het contrast niet voor
   een letter van 10,5px. */
.gebruiker-avatar{width:24px; height:24px; border-radius:50%; background:var(--amber-logo); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; flex:0 0 auto;}
/* right:0 (niet left:0): de knop staat sinds de mobiele onderbalk (die de
   bovenste module-navigatie vervangt op smalle schermen) altijd rechts in de
   header, met weinig ruimte ernaast voor het "hadir.nl"-vinkje. Een menu dat
   daar met left:0 zou openen, viel op een telefoon deels buiten het scherm -
   right:0 houdt het menu binnen de linkerrand van de knop, en dus altijd
   volledig in beeld. */
/* z-index:40, niet 20: bij gelijke z-index wint bij twee stacking contexts
   simpelweg wie later in de DOM staat. Pagina-inhoud onder de header (bv.
   .abs-ctx, ook z-index:20 voor zijn eigen sticky klas/lesdag-balk) staat na
   de header in de DOM en zou dit menu dus overlappen zodra ze aan dezelfde
   z-index gelijk staan - dit menu hoort als globale header-UI altijd boven
   pagina-inhoud te blijven. */
.gebruiker-menu-lijst{position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.12); min-width:170px; padding:5px; display:none; z-index:40;}
.gebruiker-menu.open .gebruiker-menu-lijst{display:block;}
.gebruiker-menu-item{display:block; width:100%; text-align:left; background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:500; color:var(--ink); padding:9px 10px; border-radius:6px; cursor:pointer; line-height:1.3; text-decoration:none;}
.gebruiker-menu-item:hover{background:var(--paper);}
.gebruiker-menu-kop{padding:8px 10px 8px; border-bottom:1px solid var(--line); margin-bottom:4px;}
.gebruiker-menu-rol{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft);}
/* Volledige naam onder de rol - de knop zelf toont alleen de voornaam (zie
   shell.js), dus dit is de plek om ondubbelzinnig te maken wie precies
   ingelogd is, vooral bij meerdere accounts met dezelfde voornaam. */
.gebruiker-menu-naam{font-size:13.5px; font-weight:600; color:var(--ink); margin-top:3px;}
/* Onder Uitloggen, met een scheiding erboven: het is geen menukeuze maar
   informatie - onder welk account zit ik? Wordt dynamisch toegevoegd door
   toonGebruikerEmail() in shell.js. */
.gebruiker-menu-email{font-size:11.5px; color:var(--ink-soft); padding:8px 10px 4px; border-top:1px solid var(--line); margin-top:4px; word-break:break-all; line-height:1.35;}
/* Rolwisselaar: staat alleen in het menu bij een account met meer dan één rol
   (zie toonRolWissel in shell.js), dus deze regels raken het gewone menu niet. */
.gebruiker-menu-rolwissel{border-bottom:1px solid var(--line); margin-bottom:4px; padding-bottom:4px;}
.gebruiker-menu-kopje{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); padding:6px 10px 4px;}
.rolwissel-knop{display:flex; align-items:center; justify-content:space-between; gap:8px;}
/* Vinkje erbij: alleen kleur/vetgedrukt is te subtiel om in één oogopslag te
   zien met welke rol je nu naar de app kijkt. */
.rolwissel-knop.actief{font-weight:700; color:var(--teal);}
.rolwissel-knop.actief::after{content:"\2713";}

.card{background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:16px;}
.row{display:flex; gap:12px; flex-wrap:wrap;}
.field{flex:1; min-width:150px;}

/* Een werkbalk boven een lijst: zoekveld, filter en knoppen. Op een breed
   scherm staan die netjes naast elkaar, maar zodra de rij afbreekt krijg je
   een zoekveld over de volle breedte met daaronder een filter van 180px en
   twee knoppen van elk hun eigen tekstbreedte - drie verschillende randen
   onder elkaar. Onder de 620px daarom alles even breed. */
.row.werkbalk > button{width:auto; flex:0 0 auto;}
.row.werkbalk > .field.smal{flex:0 0 180px;}
@media (max-width: 620px){
  .row.werkbalk > .field, .row.werkbalk > .field.smal, .row.werkbalk > button{flex:1 1 100%; width:100%; min-width:0;}
}

/* Namen die over twee regels breken: de rest van de rij hoort dan op één lijn
   met de eerste regel te staan, niet halverwege ertussen. */
.leerlingen-tabel th, .leerlingen-tabel td{vertical-align:top;}
label{font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); display:block; margin-bottom:4px;}
/* type=search hoort er expliciet bij: die viel hier buiten en kreeg daardoor
   de standaardopmaak van de browser (lager, kleiner lettertype, niet
   volledige breedte), wat naast een select meteen scheef staat. */
/* line-height 1.375: een select heeft een iets hogere interne regelhoogte dan
   een invoerveld (22px vs 20px bij 16px tekst) en negeert line-height zelf.
   Zonder deze regel staat een invoerveld naast een select dus altijd 2px
   lager - overal in de app waar die twee naast elkaar staan. */
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=email], input[type=tel], input[type=search], select, textarea{
  font-family:var(--font-body); font-size:16px; line-height:1.375; padding:10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); width:100%;
}
/* Safari geeft een search-veld anders zijn eigen afgeronde vorm en negeert de
   padding hierboven. */
input[type=search]{ -webkit-appearance:none; appearance:none; }
textarea{min-height:70px; resize:vertical; font-size:14.5px;}

button.primary, a.primary{font-family:var(--font-body); background:var(--teal); color:#fff; border:none; padding:13px 22px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; width:100%;}
button.primary:hover, a.primary:hover{background:var(--teal-dark);}
button.primary:disabled{background:#A9B3AE; cursor:not-allowed;}
button.secondary, a.secondary{font-family:var(--font-body); background:transparent; border:1px solid var(--ink); color:var(--ink); padding:10px 14px; border-radius:6px; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;}
button.secondary:hover, a.secondary:hover{background:var(--ink); color:#fff;}
button.danger{background:#F6E4E1; color:var(--coral); border:none; border-radius:7px; font-family:var(--font-body); font-weight:600; cursor:pointer;}
button.danger:hover{background:#f0d0cb;}
button.small{padding:5px 11px; font-size:12px;}
/* Knoppen in een tabelcel (het inline bewerken van een lokaal) mogen nooit de
   volle breedte pakken. button.primary staat hierboven op width:100% - dat is
   bedoeld voor een formulier - en in een cel duwde dat de hele tabel over de
   rand, met een horizontale schuifbalk en een half zichtbare Opslaan-knop. */
td button.primary, td button.secondary, td button.danger{width:auto;}

/* De iconen zijn inline SVG met stroke:currentColor (zie icoon() in shared.js),
   dus de kleur hieronder draagt de betekenis: teal = neutraal, amber =
   omkeerbaar (archiveren), coral = definitief (verwijderen). Met emoji werkte
   dat niet - die tekent de browser in een eigen kleur. */
.icon-btn{background:transparent; border:1px solid var(--line); color:var(--teal); border-radius:6px; width:30px; height:30px; padding:0; font-size:14px; cursor:pointer; margin-inline-start:4px;
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;}
.icon-btn:hover{background:var(--paper); border-color:var(--teal);}
.icon-btn-warn{color:var(--amber);}
.icon-btn-warn:hover{border-color:var(--amber);}
.icon-btn-danger{color:var(--coral);}
.icon-btn-danger:hover{border-color:var(--coral);}
.icon-btn[disabled]{opacity:0.35; cursor:not-allowed;}
.icon-btn[disabled]:hover{background:transparent; border-color:var(--line);}

table{width:100%; border-collapse:collapse; font-size:14px;}
th, td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
th{font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em;}
td:last-child, th:last-child{text-align:right;}

.empty-note{color:var(--ink-soft); font-size:14px; padding:8px 2px;}
.hint{font-size:13px; color:var(--ink-soft); margin:-4px 0 14px;}
.tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.02em; padding:2px 9px; border-radius:20px; background:#FBEEDC; color:var(--amber);}
.pill{font-size:11px; padding:3px 8px; border-radius:999px; background:var(--paper); color:var(--ink-soft); font-weight:600; white-space:nowrap;}

/* z-index 80, boven de vaste tabbalk onderin (.tabs-mobile, 70) en de
   opslagbalk van Absentie (50). Op 60 lag de popup eronder: de knoppen
   Annuleren en Opslaan verdwenen achter de tabbalk. Een popup vraagt om een
   antwoord voordat je verder kunt, dus die hoort boven alles te liggen - de
   donkere laag dekt de balken dan ook netjes af.

   De laag zelf scrollt, en het venster erin wordt met margin:auto gecentreerd
   in plaats van met align-items:center. Dat laatste lijkt hetzelfde, maar zodra
   de inhoud hoger is dan het scherm - een formulier met veel velden op een
   telefoon - duwt centreren de bovenkant buiten de laag, en dáár kun je niet
   meer naartoe scrollen. Met flex-start plus margin:auto staat het venster
   gecentreerd als het past, en begint het bovenaan zodra het niet past.
   overscroll-behavior houdt de pagina eronder stil tijdens het scrollen. */
.modal-overlay{position:fixed; inset:0; background:rgba(22,35,43,0.45); display:flex; align-items:flex-start; justify-content:center; z-index:80; padding:20px; overflow-y:auto; overscroll-behavior:contain;}
.modal-box{background:var(--paper-raised); border-radius:10px; padding:22px; max-width:420px; width:100%; margin:auto; box-shadow:0 10px 30px rgba(0,0,0,0.2);}
.modal-box p{font-size:15px; line-height:1.5; white-space:pre-line; margin:0 0 18px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;}
.modal-actions button{font-family:var(--font-body); font-size:14px; font-weight:600; padding:10px 16px; border-radius:6px; cursor:pointer;}
.modal-actions .btn-cancel{background:transparent; border:1px solid var(--line); color:var(--ink-soft);}
.modal-actions .btn-ok{background:var(--teal); border:none; color:#fff;}

/* Knoppenrij onderin een bewerkvenster (klas- en moduleformulier). Zonder
   deze regel valt button.primary terug op de globale width:100% en staat
   "Opslaan" als volle balk onder een klein "Annuleren". De twee scoped
   varianten verderop (.lvs-scope, .oudergesprekken-scope) staan later in dit
   bestand en blijven dus doen wat ze deden. */
.actions{display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap;}
.actions button{width:auto; flex:0 0 auto; padding:10px 18px; font-size:14px;}

.module-nav{display:flex; gap:4px; margin:-4px 0 22px; border-bottom:2px solid var(--line); flex-wrap:wrap;}
.module-nav a{font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:10px 14px; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s;}
.module-nav a:hover{color:var(--ink);}
.module-nav a.active{color:var(--teal); border-bottom-color:var(--teal);}

.module-nav-inline{display:flex; gap:3px; flex-wrap:wrap;}
.module-nav-inline a{font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:7px 12px; border-radius:6px; transition:background .15s, color .15s;}
.module-nav-inline a:hover{background:var(--paper); color:var(--ink);}
/* Zachte tint i.p.v. een volle vlak: naast het account-knopje (ook teal,
   ook een pil) gaf een even zware vulling hier twee identieke groene
   "knoppen" naast elkaar - onduidelijk wat een navigatiestatus is en wat een
   actie. Nu blijft de volle, witte-tekst pil voorbehouden aan het
   account-menu; een actieve tab wordt alleen lichter getint. */
.module-nav-inline a.active{background:rgba(31,75,67,0.12); color:var(--teal);}

/* Onder 720px vervangt een vaste onderbalk (duimbereik op een telefoon) de
   bovenste module-navigatie, zoals uitgeprobeerd in het mobiele mockup.
   Verborgen op desktopbreedte; .tabs-mobile bestaat dan simpelweg niet
   visueel (geen ruimte gereserveerd), dus daar hoeft niets voor te wijken. */
.tabs-mobile{display:none;}
@media (max-width:720px){
  .module-nav-inline{display:none;}
  /* Het schoollogo (#logoDash) staat vast op height:40px; width:auto - prima
     voor een vierkant beeldmerk, maar sommige scholen (bv. ICCLR) hebben een
     brede liggende beeldmerk-plus-naam-lockup, die bij 40px hoogte al gauw
     130px breed wordt. Op een telefoon, waar de header al smal is, duwt dat
     de gebruikersknop rechts naast het logo naar een tweede regel zodra de
     naam van de ingelogde gebruiker iets langer is - een zichtbare sprong in
     de kop zodra het logo klaar is met laden. height:auto !important is
     nodig om de vaste inline height:40px (zie elke pagina-HTML) te breken;
     zonder dat blijft de hoogte 40 staan en wordt het logo bij een
     max-width alleen plat gedrukt in plaats van proportioneel verkleind.
     max-width blijft als vangnet staan voor een toekomstig logo dat nóg
     breder is dan ICCLR's verhouding. */
  header.top img#logoDash{ height:auto !important; max-height:32px; max-width:110px; }
  /* De "hadir.nl"-link rechtsboven ziet er op mobiel hetzelfde uit als op
     desktop - vinkje plus tekst - en werkt ook: hij gaat naar de publieke
     landingspagina. Hij is hier eerder verborgen en niet-klikbaar geweest,
     omdat een verdwaalde tik tijdens het invullen van absentie de docent zijn
     plek in de app kost. Dat is bewust teruggedraaid; herkenbaarheid en één
     weg terug naar hadir.nl wegen zwaarder. */
  .tabs-mobile{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:rgba(245,246,243,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    /* Alleen zijwaarts ruimte: de hoogte van deze balk blijft --tabh plus de
       veilige zone, want .app, .abs-savebar en .feedback-knop rekenen daarmee.
       De pil van de actieve tab wordt binnen die hoogte kleiner gemaakt. */
    padding-inline:6px;
    padding-bottom:env(safe-area-inset-bottom);
    gap:4px;
  }
  .tabs-mobile a{
    flex:1; min-width:0; text-decoration:none; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    height:calc(var(--tabh) - 8px); margin-block:4px; border-radius:10px;
    color:var(--ink-soft); font-family:var(--font-body); font-size:10.5px; font-weight:600; line-height:1;
  }
  .tabs-mobile svg{color:#98A09A;}
  /* Waar je bent kreeg hier alleen een andere tekstkleur, terwijl de balk op
     desktop (.module-nav-inline a.active) een vlak achter de actieve tab zet.
     Op een klein scherm is dat kleurverschil in een grijze rij te weinig -
     dezelfde tint als daar maakt het in één oogopslag duidelijk. */
  .tabs-mobile a.active, .tabs-mobile a.active svg{color:var(--teal);}
  .tabs-mobile a.active{background:rgba(31,75,67,0.12);}

  /* Ruimte voor de vaste onderbalk zelf; welke andere fixed-bottom UI daar
     nog bovenuit moet steken (opslagbalk, feedbackknop) staat helemaal
     onderaan dit bestand, ná de regels die hun eigen bottom:0 zetten - anders
     wint bij gelijke specificiteit gewoon wie later in het bestand staat. */
  .app{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 16px);}
}

.subtab-nav{display:flex; gap:4px; margin-bottom:0; border-bottom:2px solid var(--line); flex-wrap:wrap;}
.subtab-btn{font-family:var(--font-body); font-size:14px; font-weight:600; background:transparent; border:none; color:var(--ink-soft); cursor:pointer; padding:10px 14px; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s;}
.subtab-btn:hover{color:var(--ink);}
.subtab-btn.active{color:var(--teal); border-bottom-color:var(--teal);}
/* De subtabs van Beheer. Op een breed scherm gewoon een rij tabs, zoals altijd:
   de <details> eromheen staat dan open en de menuknop is verborgen. Pas op een
   telefoon wordt het een uitklapmenu - daar vielen zes tabs over drie regels.
   De icoonknoppen voor het logboek en "wat is er nieuw" staan buiten het menu,
   want dat zijn geen tabs van dezelfde soort.

   Waarom het blok op desktop openstaat en we de dichte staat niet zelf
   overschrijven: een gesloten <details> verbergt zijn inhoud met
   content-visibility, en daar komt een display-regel op het kind niet
   doorheen. De rij is dan onzichtbaar terwijl getComputedStyle zegt van niet.
   dashboard.js sluit hem dus alleen op een telefoon. */
.subtab-balk{display:flex; align-items:center; gap:6px; border-bottom:2px solid var(--line);}
.subtab-inklap{flex:1 1 auto; min-width:0;}
/* De onderlijn zit op de balk, zodat hij onder de icoonknoppen doorloopt. */
.subtab-inklap > .subtab-nav{border-bottom:none;}
.subtab-samenvatting{display:none;}

/* 900px en niet 720: de zes tabs plus de twee icoonknoppen hebben samen 764px
   nodig, en met de padding van de kaart en de app erbij past de rij pas vanaf
   een venster van ~832px. Daaronder brak hij af over twee regels - precies
   wat het menu moet voorkomen. De marge vangt een grotere letter of een
   ingezoomde browser op. LET OP: dezelfde grens staat in
   public/js/modules/dashboard.js (SMAL_BEHEER); die twee horen gelijk. */
@media (max-width:900px){
  /* Menuknop in plaats van een tabrij. Zelfde icoonknop als in de publieke
     topbalk (.lp-menuknop in landing.css), zodat het hetzelfde aanvoelt. */
  .subtab-balk{border-bottom:none; padding-bottom:8px; align-items:flex-start;}
  .subtab-inklap{flex:0 0 auto;}
  .subtab-samenvatting{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:40px; height:38px; padding:0 9px; box-sizing:border-box;
    border:1px solid var(--line); border-radius:10px; background:#fff;
    cursor:pointer; list-style:none;
  }
  .subtab-samenvatting:hover{border-color:var(--teal);}
  .subtab-samenvatting::-webkit-details-marker{display:none;}
  /* De streepjes staan vóór het verborgen label in de markup, want
     :nth-of-type telt alle spans mee - stond het label vooraan, dan verschoof
     de nummering en werd de hamburger geen kruisje. */
  .subtab-streep{display:block; height:2px; border-radius:2px; background:var(--teal); transition:transform .15s, opacity .15s;}
  .subtab-inklap[open] .subtab-streep:nth-of-type(1){transform:translateY(6px) rotate(45deg);}
  .subtab-inklap[open] .subtab-streep:nth-of-type(2){opacity:0;}
  .subtab-inklap[open] .subtab-streep:nth-of-type(3){transform:translateY(-6px) rotate(-45deg);}

  /* De lijst staat in de gewone flow en duwt de inhoud omlaag, net als het
     uitklapmenu van de publieke topbalk. Zwevend (position:absolute) werkte
     niet: body heeft "overflow:hidden auto" en kapt zo'n paneel af zodra het
     onder de body-box uitkomt - het onderste item was dan niet aanklikbaar. */
  .subtab-inklap[open] > .subtab-nav{
    margin-top:6px; min-width:230px; flex-direction:column; gap:2px; padding:5px;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    box-shadow:0 6px 18px rgba(22,35,43,0.10);
  }
  /* Zelfde vorm en kleuren als de links in de publieke topbalk
     (.lp-mobielmenu in landing.css). */
  .subtab-inklap > .subtab-nav .subtab-btn{
    text-align:start; padding:12px 14px; border-radius:10px;
    font-size:15.5px; font-weight:500; color:var(--ink-soft);
    border-bottom:none; margin-bottom:0; margin-inline-start:0 !important;
  }
  .subtab-inklap > .subtab-nav .subtab-btn:hover{background:rgba(31,75,67,0.06); color:var(--teal);}
  .subtab-inklap > .subtab-nav .subtab-btn.active{background:rgba(31,75,67,0.10); color:var(--teal);}
}

/* De naam van de huidige tab staat in de menuknop, maar alleen voor
   schermlezers: het icoon zegt "menu", de tekst zegt waar je bent. */
.subtab-huidig{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ===== Module: dashboard ===== */
.roster-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap; gap:6px;}
.roster-header h2{font-family:var(--font-display); font-size:18px; margin:0; font-weight:600;}
.klas-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); gap:10px; flex-wrap:wrap;}
.klas-row:last-child{border-bottom:none;}

/* ===== Module: absentie =====
   Compacte opzet: één regel per leerling (~52px) i.p.v. een 2x2 knoppenraster
   (~200px), zodat een klas van 17 in ongeveer twee schermen past in plaats van
   zes. Iedereen staat standaard op aanwezig, dus de docent markeert alleen de
   uitzonderingen - die springen eruit door hun kleur.
   De statuskleuren zijn dezelfde als in de rapportage-matrix (zie
   STATUS_KLEUR in rapportage.js), zodat A/OA/GA/TL er door de hele app
   hetzelfde uitzien. */

/* De opslagbalk staat vast onderaan; deze ruimte voorkomt dat hij de laatste
   leerling of de geschiedenis afdekt. */
.absentie-scope{ padding-bottom:74px; }

/* Klas/datum + kop blijven in beeld tijdens het scrollen door de lijst: bij
   een lange klas is anders niet meer te zien welke klas/dag je invult. */
.abs-ctx{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); padding:10px 0 12px; margin-bottom:2px;}
/* flex-wrap: module + klas + datum zijn met z'n drieën te breed voor één rij
   op een telefoon; ze zakken dan naar een tweede rij i.p.v. onleesbaar smal
   te worden. */
.abs-pickers{ display:flex; gap:8px; flex-wrap:wrap; }
/* Label ín het veld i.p.v. erboven: scheelt een regel hoogte per veld. */
.abs-pick{ position:relative; flex:1 1 130px; }
.abs-pick label{position:absolute; top:6px; left:11px; font-size:9.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft); pointer-events:none;}
.abs-pick select, .abs-pick input{width:100%; appearance:none; -webkit-appearance:none; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-family:var(--font-body); font-size:14.5px; font-weight:600; padding:19px 12px 7px 11px; margin:0;}
.abs-pick select{ padding-right:26px; }
.abs-pick::after{content:""; position:absolute; right:12px; bottom:15px; width:7px; height:7px; border-right:1.8px solid var(--ink-soft); border-bottom:1.8px solid var(--ink-soft); transform:rotate(45deg); pointer-events:none;}
/* #datumVeld tekent zijn eigen kalender-UI (weekstrip of maandpanel), niet
   het generieke select-pijltje hierboven. */
#datumVeld::after{ display:none; }

/* Weekstrip (docent) en maandkalender (beheerder/loket) voor de datumkeuze:
   beide laten in één oogopslag zien welke dagen wél lesdagen zijn - daar
   buiten om invullen levert een registratie op die nergens bij hoort. */
.abs-cal-week{ display:flex; gap:4px; min-width:220px; }
.abs-cal-dag{border:1px solid var(--line); border-radius:7px; background:#fff; cursor:pointer; font-family:var(--font-body); color:var(--ink); -webkit-tap-highlight-color:transparent;}
.abs-cal-week .abs-cal-dag{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 1px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--ink-soft);}
.abs-cal-week .abs-cal-dag b{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:0; }
.abs-cal-dag.is-vandaag{ border-color:var(--teal); }
.abs-cal-dag.is-actief{ background:var(--teal); border-color:var(--teal); color:#fff; }
.abs-cal-week .abs-cal-dag.is-actief b{ color:#fff; }
.abs-cal-dag.is-disabled{ opacity:0.35; cursor:default; }
.abs-cal-dag:disabled{ pointer-events:none; }

.abs-cal-trigger{width:100%; text-align:left; appearance:none; -webkit-appearance:none; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-family:var(--font-body); font-size:14.5px; font-weight:600; padding:19px 12px 7px 11px; margin:0; cursor:pointer;}
.abs-cal-panel{position:absolute; top:calc(100% + 6px); right:0; z-index:5; min-width:250px; background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.16); padding:10px;}
.abs-cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.abs-cal-maand{font-size:13.5px; font-weight:600; text-transform:capitalize;}
.abs-cal-stap{border:0; background:none; cursor:pointer; font-size:16px; color:var(--ink-soft); padding:2px 8px; border-radius:6px;}
.abs-cal-stap:hover:not(:disabled){ background:var(--paper); color:var(--ink); }
.abs-cal-stap:disabled{ opacity:0.3; cursor:default; }
.abs-cal-weekdagen{display:grid; grid-template-columns:repeat(7,1fr); font-size:10px; font-weight:700; color:var(--ink-soft); text-align:center; margin-bottom:2px;}
.abs-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.abs-cal-grid .abs-cal-dag{height:32px; font-size:12.5px;}
.abs-cal-grid .abs-cal-dag.is-leeg{ border:none; background:none; cursor:default; }

.abs-head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-top:10px; }
.abs-head h2{font-family:var(--font-display); font-size:17px; font-weight:600; margin:0; letter-spacing:-0.005em;}
.abs-head .abs-dag{ font-size:12.5px; color:var(--ink-soft); }
.abs-head .abs-sp{ flex:1; }
.abs-allepresent{border:1px solid var(--teal); background:none; color:var(--teal); border-radius:999px; padding:6px 12px; font-family:var(--font-body); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;}
.abs-allepresent:hover{ background:var(--teal); color:#fff; }

.abs-legend{ display:flex; gap:13px; flex-wrap:wrap; padding:10px 2px 2px; font-size:11px; color:var(--ink-soft); }
.abs-legend i{ font-style:normal; font-weight:700; color:var(--ink); }

.abs-list{ margin:0; padding:0; list-style:none; }
.abs-pupil{display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid var(--line);}
.abs-pupil:last-child{ border-bottom:none; }
.abs-who{ flex:1; min-width:0; }
.abs-naam{ font-size:15px; }
/* Alleen zichtbaar zodra iemand níét op aanwezig staat, of als de ouder heeft
   afgemeld - anders zou elke regel een tweede regel tekst krijgen en is de
   winst in hoogte meteen weg. */
.abs-sub{ font-size:11px; color:var(--ink-soft); margin-top:1px; }

.abs-seg{ display:flex; flex:none; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.abs-seg button{border:0; background:none; cursor:pointer; font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--ink-soft); padding:0; width:44px; height:38px; -webkit-tap-highlight-color:transparent;}
.abs-seg button + button{ border-left:1px solid var(--line); }
.abs-seg button[aria-pressed="true"][data-status="aanwezig"]{ background:#9FE1CB; color:#04342C; }
.abs-seg button[aria-pressed="true"][data-status="afwezig"]{ background:#F5A9A0; color:#5C0F0A; }
.abs-seg button[aria-pressed="true"][data-status="ga"]{ background:#AEDFF7; color:#08344A; }
.abs-seg button[aria-pressed="true"][data-status="laat"]{ background:#FAC775; color:#412402; }

/* Telling + opslagstatus blijven in beeld, zodat je na het markeren van de
   laatste leerling niet terug hoeft te scrollen. */
.abs-savebar{position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(233,236,231,0.94); backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:9px 16px calc(9px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px;}
.abs-savebar-inner{ max-width:1140px; margin:0 auto; width:100%; display:flex; align-items:center; gap:12px; }
.abs-tally{ flex:1; min-width:0; font-size:12.5px; line-height:1.35; color:var(--ink-soft); }
.abs-tally b{ color:var(--ink); font-weight:700; }
.abs-opslagstatus{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.abs-opslagstatus.fout{ color:var(--coral); font-weight:600; }
.abs-opnieuw{border:1px solid var(--coral); background:none; color:var(--coral); border-radius:999px; padding:7px 14px; font-family:var(--font-body); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;}

.history{ margin-top:22px; }
.history h2{font-family:var(--font-display); font-size:18px; font-weight:600; margin-bottom:10px;}
.history-item{display:flex; justify-content:space-between; align-items:center; padding:10px 4px; border-bottom:1px solid var(--line); font-size:14px; gap:8px;}
.history-item:last-child{ border-bottom:none; }
.history-meta{ color:var(--ink-soft); font-size:12.5px; }

/* Vanaf tabletbreedte hetzelfde ontwerp, alleen ruimer: de afkortingen en de
   legenda blijven, maar knoppen, namen en regelhoogte schalen mee met het
   scherm. Zonder dit hield een breed scherm knoppen van telefoonformaat,
   terwijl klas- en datumveld (flex:1) juist doorrekten tot halve
   schermbreedte - een hele brede kop boven een rij kleine knopjes. */
@media (min-width:720px){
  /* Niet verder uitrekken dan nodig; wat overblijft is witruimte rechts. */
  .abs-pick{ max-width:260px; }
  .abs-head h2{ font-size:19px; }
  .abs-head .abs-dag{ font-size:13.5px; }
  .abs-legend{ font-size:12px; gap:16px; }
  .abs-pupil{ padding:9px 2px; }
  .abs-naam{ font-size:16px; }
  .abs-sub{ font-size:12px; }
  .abs-seg button{ width:111px; height:44px; font-size:14px; }
  .abs-tally{ font-size:13.5px; }
  .abs-opslagstatus{ font-size:13.5px; }
}

@media (max-width:359px){
  .abs-seg button{ width:38px; font-size:11.5px; }
  .abs-naam{ font-size:14px; }
}

/* ===== Module: lvs (leerlingvolgsysteem) ===== */
.lvs-scope .card{padding:18px 20px;}
.lvs-scope input, .lvs-scope select, .lvs-scope textarea{padding:9px 11px;}
.lvs-scope .row > div{flex:1; min-width:140px;}
.lvs-scope .field{margin-bottom:12px;}
.lvs-scope h2{font-family:var(--font-display); font-weight:600; font-size:18px; margin:0 0 12px;}
.lvs-scope h3{font-family:var(--font-display); font-weight:600; font-size:15px; margin:18px 0 8px;}
/* :not(.icon-btn) is nodig: deze scope-regel is specifieker dan .icon-btn, dus
   zonder uitzondering krijgt een icoonknop hier 10px/18px padding. In een
   30x30-knop met box-sizing:border-box blijft er dan geen ruimte over en klapt
   het SVG naar breedte 0 - de knop is er dan wel, maar je ziet niets. */
.lvs-scope button:not(.icon-btn){font-family:var(--font-body); font-weight:600; font-size:14px; padding:10px 18px; border-radius:7px; border:none; cursor:pointer;}
.lvs-scope button.primary{background:var(--teal); color:#fff; width:auto;} .lvs-scope button.primary:hover{background:var(--teal-dark);}
.lvs-scope button.secondary{background:transparent; border:1px solid var(--ink); color:var(--ink);} .lvs-scope button.secondary:hover{background:var(--ink); color:#fff;}
.lvs-scope button.danger{background:#F6E4E1; color:var(--coral);} .lvs-scope button.danger:hover{background:#f0d0cb;}
.lvs-scope button.small{padding:5px 11px; font-size:12px;}
.lvs-scope .actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.lvs-scope th, .lvs-scope td{padding:8px 8px; vertical-align:top;}
.lvs-scope .leerling-kop{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:6px;}
.lvs-scope .leerling-kop h2{margin:0;}
.lvs-scope .klas-overzicht-rij:hover{background:var(--paper);}
/* De rij opent het dossier, maar de laatste kolommen hebben hun eigen knop.
   Staat de muis boven zo'n knop, dan licht alleen dat veld op en niet de hele
   rij - anders lijkt het alsof je met die klik de leerling kiest. */
.lvs-scope .klas-overzicht-rij:has(.klas-actie:hover){background:transparent;}
.lvs-scope .klas-actie:hover{background:var(--paper);}
.lvs-scope button.klas-telknop{width:auto; background:none; border:1px solid var(--line);
  border-radius:999px; padding:2px 12px; font-family:inherit; font-size:13px;
  color:var(--ink-soft); cursor:pointer;}
.lvs-scope .klas-actie:hover button.klas-telknop{border-color:var(--teal); color:var(--teal);}
/* Terug uit een leerlingdossier naar de klas. Geen knop met een rand: dit is
   navigatie en geen handeling, en een volle knop zou zwaarder wegen dan het
   opslaan van een beoordeling verderop op dezelfde pagina. */
.lvs-scope .lvs-terug{background:none; border:none; padding:0; margin:0 0 10px;
  font-family:var(--font-body); font-size:13px; color:var(--ink-soft); cursor:pointer;}
.lvs-scope .lvs-terug:hover{color:var(--ink); text-decoration:underline;}

/* ===== Module: oudergesprekken ===== */
.oudergesprekken-scope textarea.mono{font-family:ui-monospace,SFMono-Regular,monospace; font-size:0.78rem;}
.oudergesprekken-scope .row > div{flex:1; min-width:140px;}
.oudergesprekken-scope .field{flex:1; min-width:140px; margin-bottom:12px;}
.oudergesprekken-scope h2{font-family:var(--font-display); font-weight:600; font-size:18px; margin:0 0 12px;}
.oudergesprekken-scope h3{font-family:var(--font-display); font-weight:600; font-size:15px; margin:18px 0 8px;}
/* Zie de toelichting bij .lvs-scope button hierboven. */
.oudergesprekken-scope button:not(.icon-btn){font-family:var(--font-body); font-weight:600; font-size:14px; padding:10px 18px; border-radius:7px; border:none; cursor:pointer;}
.oudergesprekken-scope button.primary{background:var(--teal); color:#fff; width:auto;} .oudergesprekken-scope button.primary:hover{background:var(--teal-dark);}
.oudergesprekken-scope button.secondary{background:transparent; border:1px solid var(--ink); color:var(--ink);} .oudergesprekken-scope button.secondary:hover{background:var(--ink); color:#fff;}
.oudergesprekken-scope button.danger{background:#F6E4E1; color:var(--coral);} .oudergesprekken-scope button.danger:hover{background:#f0d0cb;}
.oudergesprekken-scope button.amber{background:var(--amber); color:#fff;} .oudergesprekken-scope button.amber:hover{background:#a8721f;}
.oudergesprekken-scope button.small{padding:6px 12px; font-size:12.5px;}
.oudergesprekken-scope .actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.oudergesprekken-scope th, .oudergesprekken-scope td{padding:7px 8px;}
.klas-block{border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:12px;}
.klas-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.link-row{display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.link-row code{background:var(--paper); padding:4px 7px; border-radius:5px; font-size:12px; word-break:break-all; flex:1; min-width:160px;}
.banner{padding:11px 15px; border-radius:7px; font-size:14px; margin-bottom:14px;}
.banner.ok{background:#E4EFE9; color:var(--teal-dark);}
.banner.err{background:#F6E4E1; color:var(--coral);}
.banner.info{background:#FBEEDC; color:#7A5417;}
.slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px;}
.ticket{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff;}
.ticket .stub{width:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; border-right:1px solid var(--line);}
.ticket .body{flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:8px; justify-content:center;}
.ticket .status{font-size:11.5px; font-weight:700;}
.ticket.free .stub{background:#E4EFE9; color:var(--teal);} .ticket.free .status{color:var(--teal);}
.ticket.mine{border-color:var(--amber);} .ticket.mine .stub{background:#FBEEDC; color:#8a5410;} .ticket.mine .status{color:#8a5410;}
.ticket.taken{opacity:0.7;} .ticket.taken .stub{background:#eee; color:#9AA0A8;} .ticket.taken .status{color:#9AA0A8;}

/* ===== Module: overzicht (weekrooster) =====
   Twee weergaven op dezelfde gegevens: "Dag" (standaard, opent op de huidige
   dag) en "Hele week". Binnen een dag staan de lessen gegroepeerd per lestijd
   met de tijd als kopje erboven; kleur = module, toegekend in overzicht.js op
   volgorde uit een vast palet, zodat elke school zijn eigen modulenamen kan
   hebben zonder dat hier iets hoeft te wijzigen. */

.wk-schakelaar{display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:2px;}
.wk-schakel{font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--ink-soft); background:transparent; border:none; border-radius:999px; padding:6px 14px; cursor:pointer; line-height:1;}
.wk-schakel:hover{color:var(--ink);}
.wk-schakel.actief{background:var(--teal); color:#fff;}

.wk-legenda{display:flex; flex-wrap:wrap; gap:7px; margin:6px 0 12px;}
.wk-chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; line-height:1;}
.wk-chip:hover{border-color:var(--ink-soft);}
.wk-chip .wk-stip{width:10px; height:10px; border-radius:50%; flex:0 0 auto;}
.wk-chip .wk-aantal{color:var(--ink-soft); font-weight:600;}
.wk-chip.uit{opacity:0.5; background:var(--paper);}
.wk-chip.uit .wk-stip{background:var(--line) !important;}

/* Dagkiezer: zeven knopjes met het aantal lessen erin, zodat je ook zonder
   te klikken ziet welke dag druk is. De huidige dag houdt een accentrand,
   ook als je een andere dag bekijkt. */
.wk-dagkeuze{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 14px;}
.wk-dagknop{font-family:var(--font-body); font-size:12.5px; font-weight:700; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 11px; cursor:pointer; display:inline-flex; align-items:baseline; gap:6px; line-height:1;}
.wk-dagknop span{font-weight:600; font-size:10.5px; opacity:0.7;}
.wk-dagknop:hover{border-color:var(--ink-soft); color:var(--ink);}
.wk-dagknop.vandaag{border-color:var(--amber);}
.wk-dagknop.actief{background:var(--teal); border-color:var(--teal); color:#fff;}
.wk-dagknop.actief span{opacity:0.85;}

/* Per module: een kaartje per module, met vooraan een kaartje voor de hele
   school in hetzelfde formaat. De balk loopt tot de grootste module, niet
   tot het totaal - je vergelijkt modules met elkaar. Het schoolkaartje heeft
   bewust geen balk: een volle balk zou gelezen worden als "de grootste
   module". Alleen het stipje en de balk dragen de modulekleur, gelijk aan
   het rooster eronder; namen en getallen houden de tekstkleur. */
.wk-verdeling{margin-top:14px;}
.wk-modulekaarten{display:grid; grid-template-columns:repeat(auto-fill, minmax(176px,1fr)); gap:10px; margin-top:6px;}
.wk-modulekaart{background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column;}
.wk-modulekaart-totaal{background:var(--paper); border-color:#B9C0B6;}
.wk-modulekaart-kop{display:flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--ink); min-height:16px;}
.wk-modulekaart-totaal .wk-modulekaart-kop{color:var(--teal); text-transform:uppercase; letter-spacing:0.05em; font-size:11px;}
.wk-modulekaart-getal{font-family:var(--font-display); font-size:26px; font-weight:700; line-height:1.1; margin-top:6px;}
.wk-modulekaart-getal small{font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-inline-start:6px;}
.wk-botsing{display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-inline-start:5px; border-radius:50%; background:#F6E4E1; color:var(--coral); font-size:10px; font-weight:800; line-height:1; vertical-align:text-top;}
.wk-pil .wk-botsing{background:rgba(255,255,255,.9); color:var(--coral);}
.wk-vol{margin-inline-start:auto; font-size:10px; font-weight:700; color:var(--coral); background:#F6E4E1; border-radius:20px; padding:2px 7px; white-space:nowrap;}
.wk-modulekaart-voet{font-size:11.5px; color:var(--ink-soft); margin-top:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wk-stip{width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; margin-inline-end:7px;}
/* De balk is een bezettingsgraad: leerlingen gedeeld door de capaciteit
   (aantal klassen x maximum per klas). De breedte stopt bij 100%, het
   percentage ernaast toont het echte getal - ook als dat eroverheen gaat. */
.wk-vulling{display:flex; align-items:center; gap:8px; margin:9px 0 8px;}
.wk-spoor{background:var(--paper); border-radius:5px; height:10px; overflow:hidden; display:block; flex:1; min-width:20px;}
.wk-balk{display:block; height:100%; border-radius:0 4px 4px 0;}
.wk-pct{font-size:11px; font-weight:700; color:var(--ink-soft); flex:0 0 auto; min-width:30px; text-align:right; font-variant-numeric:tabular-nums;}
.wk-pct-vol{color:var(--coral);}
.wk-pct-leeg{font-weight:600; opacity:0.6;}

/* --- weergave: hele week --- */
.wk-scroll{overflow-x:auto; max-width:100%; padding-bottom:4px;}
/* Zeven vaste kolommen die de breedte precies vullen. Let op de twee
   details: zonder width:100% zit dit grid in een overflow-container en
   sizet de browser het op max-content - dan blijven de kolommen op hun
   minimum staan en ontstaat er een scrollbalk van een paar pixels terwijl
   alles bijna past. En minmax(0,1fr) i.p.v. een minimum per kolom, zodat
   de kolommen echt meekrimpen; het schuiven regelt min-width op het grid,
   die pas onder ~860px schermbreedte in werking treedt. */
.wk-board{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px; align-items:start; width:100%; min-width:760px;}
.wk-dag{background:#fff; border:1px solid var(--line); border-radius:9px; padding:8px 7px 10px; min-width:0;}
/* Zaterdag en zondag zijn bij de meeste scholen juist de drukste dagen; de
   afwijkende achtergrond markeert ze zonder ze naar achteren te duwen. */
.wk-dag.weekend{background:var(--paper);}
.wk-dag-kop{display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding-bottom:6px; border-bottom:1px solid var(--line); margin-bottom:8px;}
.wk-dag-naam{font-family:var(--font-display); font-weight:600; font-size:13.5px;}
.wk-dag-aantal{font-size:11px; color:var(--ink-soft); font-weight:600;}
.wk-groep{margin-bottom:10px;}
.wk-groep:last-child{margin-bottom:0;}
.wk-tijd{display:flex; justify-content:space-between; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:0.03em; color:var(--ink-soft); margin-bottom:4px;}
.wk-tijd span{opacity:0.7;}
.wk-pil{border-radius:6px; padding:5px 8px; color:#fff; line-height:1.25; margin-bottom:3px;}
.wk-pil-klas{font-size:12.5px; font-weight:700;}
.wk-pil-lokaal{font-size:10px; opacity:0.82; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* --- weergave: één dag --- */
.wk-slot{margin-bottom:16px;}
.wk-slot:last-child{margin-bottom:0;}
.wk-slot-kop{display:flex; align-items:baseline; gap:10px; padding-bottom:5px; margin-bottom:8px; border-bottom:1px solid var(--line);}
.wk-slot-kop b{font-family:var(--font-display); font-size:14.5px; font-weight:600;}
.wk-slot-kop span{font-size:11.5px; color:var(--ink-soft);}
.wk-slot-lijst{display:grid; grid-template-columns:repeat(auto-fill, minmax(212px,1fr)); gap:8px;}
.wk-kaartje{background:#fff; border:1px solid var(--line); border-inline-start:5px solid var(--teal); border-radius:8px; padding:9px 11px;}
.wk-kaartje-kop{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:3px;}
.wk-kaartje-klas{font-family:var(--font-display); font-size:15px; font-weight:700;}
.wk-kaartje-module{font-size:10.5px; font-weight:700; text-align:right;}
.wk-kaartje-regel{font-size:12px; color:var(--ink-soft); line-height:1.45;}
.wk-mist{color:var(--coral);}

/* Absentie- en afmeldstatus per klas (alleen in de dagweergave). Zelfde
   groen/amber als elders: groen = klaar, amber = vraagt nog om actie. */
.wk-kaartje-status{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px;}
.wk-absentie, .wk-afmeld{font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap;}
.wk-absentie.ja{ background:#D7E5DD; color:var(--teal-dark); }
.wk-absentie.nee{ background:#FBEEDC; color:#8a5410; }
.wk-afmeld{ background:#E4ECF2; color:#3C5666; }
/* In de tijdvak-kop: samenvatting van de klassen die eronder staan. */
.wk-slot-kop .wk-slot-afmeld{ color:#3C5666; font-weight:600; }
.wk-slot-kop .wk-slot-open{ color:#8a5410; font-weight:600; }

.wk-leeg{font-size:12px; color:var(--ink-soft); text-align:center; padding:10px 2px; margin:0;}
.wk-rest{font-size:13px; color:var(--ink-soft); margin:14px 0 0;}
.wk-rest b{color:var(--ink);}

/* ===== Module: feedbackknop =====
   Stond eerst als <style> in index.html en zat daardoor alleen op het
   dashboard. De widget (public/js/modules/feedback.js) bouwt zichzelf op elke
   pagina van de schil, dus de stijl hoort hier - in het bestand dat al door
   alle pagina's geladen wordt. */
.feedback-knop{
  position:fixed; bottom:20px; right:20px;
  width:48px; height:48px; border-radius:50%;
  background:var(--teal); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.18); z-index:40;
}
.feedback-knop:hover{background:var(--teal-dark);}
.feedback-paneel{
  display:none; position:fixed; bottom:78px; right:20px;
  width:280px; max-width:calc(100vw - 40px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:16px; box-shadow:0 6px 20px rgba(0,0,0,0.15); z-index:40;
}
.feedback-paneel.open{display:block;}
.feedback-paneel-header{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600; margin-bottom:12px;
}
.feedback-paneel label{
  display:block; font-size:12px; color:var(--ink-soft); margin-bottom:4px;
}
.feedback-paneel select,
.feedback-paneel textarea{width:100%; font-size:13px; font-family:inherit;}
/* button.primary staat globaal op width:100% - in dit smalle paneel is dat
   precies goed, alleen de padding niet: die maakt het paneel onnodig hoog. */
.feedback-paneel button.primary{padding:9px 14px; font-size:13.5px;}

/* ===== Mobiele onderbalk: ruimte voor andere fixed-bottom UI =====
   Moet na de regels staan die .feedback-knop/.abs-savebar hun eigen
   bottom:0 geven (verderop in dit bestand qua module, eerder qua regelnummer
   dan hier) - bij gelijke specificiteit wint anders alsnog die eerdere regel
   omdat de browser hem laatst tegenkomt zodra beide op mobiel gelden. */
@media (max-width:720px){
  .feedback-knop{bottom:calc(20px + var(--tabh) + env(safe-area-inset-bottom));}
  .abs-savebar{bottom:calc(var(--tabh) + env(safe-area-inset-bottom));}
}

/* ===== Print-only lijsten (bv. klassenlijst-PDF export) =====
   Een module vult #printKlassenlijst met alleen een kop + tabel en roept
   window.print() aan. Op het scherm blijft dat blok onzichtbaar; bij het
   afdrukken verdwijnt juist al het andere (header, knoppen, kaarten) zodat
   de browser's eigen "Opslaan als PDF" alleen de lijst zelf produceert. */
#printKlassenlijst{ display:none; }
@media print{
  body > *:not(#printKlassenlijst){ display:none !important; }
  #printKlassenlijst{
    display:block !important; padding:20px; font-family:var(--font-body); color:#000;
  }
  #printKlassenlijst h1{ font-family:var(--font-display); font-size:18px; margin:0 0 4px; }
  #printKlassenlijst p{ font-size:12px; color:#444; margin:0 0 14px; }
  #printKlassenlijst table{ width:100%; border-collapse:collapse; font-size:12px; }
  #printKlassenlijst th, #printKlassenlijst td{ border:1px solid #999; padding:4px 6px; text-align:left; }
  #printKlassenlijst th{ background:#eee; }
  /* Nummer smal, naam wat breder, de rest van de breedte is voor
     handgeschreven aantekeningen - vandaar ook de hogere rijen. */
  #printKlassenlijst th:first-child, #printKlassenlijst td:first-child{ width:28px; text-align:center; }
  #printKlassenlijst th:nth-child(2), #printKlassenlijst td:nth-child(2){ width:35%; }
  #printKlassenlijst td{ height:26px; }
}

/* Medische bijzonderheid op de presentielijst: een klein teken achter de naam.
   De inhoud staat er niet - je moet erop klikken. */
.abs-medisch {
  margin-inline-start: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--coral, #c0503f);
  border-radius: 9px;
  background: transparent;
  color: var(--coral, #c0503f);
  font: 700 11px/1 inherit;
  cursor: pointer;
  vertical-align: middle;
}
.abs-medisch:hover,
.abs-medisch:focus-visible {
  background: var(--coral, #c0503f);
  color: #fff;
}

/* ---------- Absentieoverzicht: de matrix op een klein scherm ----------
   De tabel heeft één regel per leerling en één kolom per lesdag, met de naam
   links vastgeplakt en Lessen/GA/OA rechts. Op een telefoon van 390 punten
   bleef daar niets van over: de naamkolom nam er 277 en de drie totalen 139,
   samen 88 meer dan er zichtbaar is. De datumkolommen lagen dus volledig
   onder de vastgeplakte kolommen - je zag alleen namen en drie getallen.

   Vandaar hieronder smallere totalen en een naam die mag afbreken. De
   datum achter "uitgeschreven" verdwijnt op een klein scherm; die staat nog
   in de tooltip, en hij kostte in zijn eentje bijna honderd pixels. */
.rap-naam{padding:6px 10px 6px 0; position:sticky; left:0; background:var(--paper); white-space:nowrap;}
.rap-naam-kop{text-align:left; font-weight:600;}

.rap-tot{padding:6px 8px; text-align:center; font-weight:600; position:sticky; background:var(--paper); border-left:2px solid var(--line);}
.rap-tot-kop{font-size:12px; font-weight:600; color:var(--ink-soft); white-space:nowrap; border-left:2px solid var(--ink);}
.rap-tot-1{right:0;}
.rap-tot-2{right:38px;}

.rap-uitgeschreven{margin-left:6px; font-size:10.5px; font-weight:700; color:var(--ink-soft); background:var(--paper-raised); padding:2px 7px; border-radius:20px; white-space:nowrap;}

@media (max-width:600px){
  /* De naam mag over twee regels; afkappen zou de naam onherkenbaar maken en
     dat is nu juist waar je op zoekt. */
  .rap-naam{min-width:110px; max-width:42vw; white-space:normal; overflow-wrap:anywhere; padding-right:6px;}
  .rap-uitgeschreven-datum{display:none;}
  .rap-tot{padding:6px 3px; font-size:13px; width:32px; min-width:32px;}
  .rap-tot-kop{font-size:11px;}
  .rap-tot-2{right:32px;}
}

/* ---------- Rij met knoppen die je met een lijst uitvoert ----------
   Op een groot scherm houden ze hun eigen maat: een knop die meegroeit met de
   ruimte wordt een balk van een halve meter, en dat leest als iets veel
   belangrijkers dan het is. Op een telefoon juist wél de volle breedte, want
   twee halve knopjes naast elkaar zijn daar te smal om te raken. */
.knop-rij{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
/* Een vaste basis en niet meegroeien: zo zijn ze even breed - twee knoppen
   naast elkaar met een verschil van tien pixels leest als slordig - en worden
   ze geen balk van een halve meter op een breed scherm. */
.knop-rij > button{flex:0 1 220px; width:auto; min-width:0;}
@media (max-width:600px){
  .knop-rij > button{flex:1 1 100%;}
}