:root {
  --navy: #2E2F6B;
  --navy-licht: #4A4C8F;
  --oranje: #F39C00;
  --oranje-donker: #C97F00;
  --oranje-zacht: #FFF3DC;
  --blauw: #0080C9;
  --blauw-zacht: #E3F1FA;
  --lime: #B8CF46;
  --lime-donker: #5E6B12;
  --lime-zacht: #F2F7DC;
  --ok: #2E7D32;
  --ok-zacht: #DDF0DF;
  --nee: #C62828;
  --nee-zacht: #F9DADA;
  --nee-donker: #8E1B1B;
  --let-op: #B26A00;
  --tekst: #1F2133;
  --tekst-zacht: #5D6075;
  --lijn: #DADCE6;
  --vlak: #F5F6FA;
  --wit: #FFFFFF;
  --radius: 8px;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--tekst);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--wit); min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--navy); margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: .3rem 0 .7rem; }
.klein { font-size: .85rem; color: var(--tekst-zacht); }
.laden { padding: 2rem; color: var(--tekst-zacht); }

/* Kopbalk */
.kop {
  background: var(--navy); color: var(--wit);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top));
  flex-wrap: wrap;
}
.kop-links { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.logo-vak { background: var(--wit); border-radius: 8px; padding: 6px 10px; display: inline-flex; }
.logo { height: 34px; width: auto; display: block; }
.kop-titel { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kop-titel strong { font-size: 1.05rem; }
.kop-titel span { font-size: .85rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop-rechts { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kop-rechts select { background: var(--navy-licht); color: var(--wit); border: 1px solid #6E70A8; border-radius: 6px; padding: .35rem .5rem; max-width: 16rem; }
.opslaan-status { font-size: .8rem; opacity: .85; min-width: 6rem; text-align: right; }

/* Knoppen */
.knop {
  border: 1px solid var(--lijn); background: var(--wit); color: var(--navy);
  border-radius: 6px; padding: .45rem .8rem; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
.knop:hover { border-color: var(--navy); }
.knop.hoofd { background: var(--oranje); border-color: var(--oranje); color: #1E1400; }
.knop.hoofd:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); color: var(--wit); }
.knop.groot { font-size: 1.1rem; padding: .75rem 1.5rem; }
.knop.licht { background: transparent; color: var(--wit); border-color: #6E70A8; }
.knop.licht:hover { border-color: var(--wit); }
.knop.gevaar { color: var(--nee); }
.knop.gevaar:hover { border-color: var(--nee); }
.knop.klein-knop { padding: .2rem .5rem; font-size: .85rem; }
.knop[disabled] { opacity: .5; cursor: default; }
.knoppen { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 1rem; }
.icoon-knop { border: none; background: none; cursor: pointer; padding: .2rem .35rem; border-radius: 4px; color: var(--tekst-zacht); font-size: 1rem; }
.icoon-knop:hover { background: var(--vlak); color: var(--navy); }

/* Controlebalk */
.controle { display: flex; gap: .5rem; padding: .5rem 1rem; background: var(--vlak); border-bottom: 1px solid var(--lijn); flex-wrap: wrap; }
.lampje { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--lijn); background: var(--wit); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; font-size: .9rem; }
.lampje:hover { border-color: var(--navy); }
.lamp { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lamp.groen { background: var(--ok); }
.lamp.oranje { background: var(--oranje); }
.lamp.rood { background: var(--nee); }
.lamp.grijs { background: #B5B8C6; }

/* Tabs */
.tabs { display: flex; gap: .25rem; padding: 0 1rem; border-bottom: 2px solid var(--lijn); overflow-x: auto; }
.tab { border: none; background: none; padding: .75rem 1rem; cursor: pointer; font-weight: 600; color: var(--tekst-zacht); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tab:hover { color: var(--navy); }
.tab.actief { color: var(--navy); border-bottom-color: var(--oranje); }

main { padding: 1rem; max-width: 1500px; margin: 0 auto; }

.melding { margin: .75rem 1rem 0; padding: .7rem 1rem; border-radius: var(--radius); background: var(--oranje-zacht); border: 1px solid var(--oranje); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.melding.fout { background: var(--nee-zacht); border-color: var(--nee); }
.melding.goed { background: var(--ok-zacht); border-color: var(--ok); }

.kaart { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; background: var(--wit); }
.balk { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.balk .rechts { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.keuze { display: inline-flex; border: 1px solid var(--lijn); border-radius: 6px; overflow: hidden; }
.keuze button { border: none; background: var(--wit); padding: .45rem .8rem; cursor: pointer; font-weight: 600; color: var(--tekst-zacht); border-right: 1px solid var(--lijn); }
.keuze button:last-child { border-right: none; }
.keuze button.actief { background: var(--navy); color: var(--wit); }
.keuze button.lj1.actief { background: var(--blauw); }
.keuze button.lj2.actief { background: var(--lime); color: #1F2410; }

input[type=text], input[type=number], input[type=password], select, textarea {
  border: 1px solid var(--lijn); border-radius: 6px; padding: .4rem .55rem; background: var(--wit);
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--oranje); outline-offset: 1px; }
textarea { width: 100%; min-height: 9rem; font-family: Consolas, monospace; font-size: .85rem; }
label.veld { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--tekst-zacht); font-weight: 600; }
label.veld input, label.veld select { color: var(--tekst); font-weight: 400; }
label.vinkje { display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; }
.velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }

/* Tabellen */
.tabel-vak { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--lijn); padding: .4rem .5rem; text-align: left; vertical-align: middle; }
th { background: var(--vlak); color: var(--navy); font-size: .85rem; position: sticky; top: 0; z-index: 1; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; }

/* Docenten */
.doc-tabel td { padding: .25rem .35rem; }
.doc-tabel th.dag { text-align: center; border-left: 2px solid var(--lijn); }
.doc-tabel input[type=number] { width: 4.2rem; }
.afk-knop { border: none; background: none; font-weight: 700; color: var(--navy); cursor: pointer; padding: .2rem .3rem; border-radius: 4px; text-decoration: underline dotted; }
.rol { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; margin-right: .2rem; border: 1px solid; cursor: pointer; background: var(--wit); color: var(--tekst-zacht); border-color: var(--lijn); }
.rol.aan.org { background: var(--navy); color: var(--wit); border-color: var(--navy); }
.rol.aan.c1 { background: var(--blauw); color: var(--wit); border-color: var(--blauw); }
.rol.aan.c2 { background: var(--lime); color: #1F2410; border-color: var(--lime); }
.rol.aan.ovl { background: var(--oranje); color: #1E1400; border-color: var(--oranje); }
.dd { width: 3.2rem; height: 2rem; border-radius: 5px; border: 1px solid; cursor: pointer; font-size: .75rem; font-weight: 700; position: relative; }
.dd.ja { background: var(--ok-zacht); border-color: #9CCB9F; color: var(--ok); }
.dd.nee { background: var(--nee-zacht); border-color: #E6A5A5; color: var(--nee); }
.dd.deels { background: linear-gradient(135deg, var(--ok-zacht) 55%, var(--nee-donker) 55%); border-color: var(--nee-donker); color: var(--ok); }
td.ddcel { text-align: center; }
td.ddcel.dagstart { border-left: 2px solid var(--lijn); }
.pct { font-weight: 700; }

/* Uurraster in docentvenster */
.uurraster { border-collapse: separate; border-spacing: 3px; width: auto; }
.uurraster td, .uurraster th { border: none; padding: 0; text-align: center; }
.uurraster th { background: none; font-size: .8rem; padding: 0 .3rem; }
.uur-knop { width: 2.4rem; height: 2rem; border-radius: 5px; border: 1px solid; cursor: pointer; font-weight: 700; font-size: .8rem; }
.uur-knop.ja { background: var(--ok-zacht); border-color: #9CCB9F; color: var(--ok); }
.uur-knop.nee { background: var(--nee-zacht); border-color: #E6A5A5; color: var(--nee); }
.uur-knop.uitz { background: var(--nee-donker); border-color: var(--nee-donker); color: var(--wit); }

/* Themaweek-raster */
.thema-indeling { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.paneel { position: sticky; top: .5rem; }
.raster { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; user-select: none; -webkit-user-select: none; touch-action: none; }
.raster th, .raster td { border: 1px solid var(--lijn); border-width: 0 1px 1px 0; padding: .25rem; font-size: .82rem; }
.raster tr > :first-child { border-left-width: 1px; }
.raster thead th { border-top-width: 1px; text-align: center; }
.raster th.uurkop { width: 5.2rem; text-align: left; background: var(--vlak); }
.raster th.uurkop small { display: block; font-weight: 400; color: var(--tekst-zacht); }
.raster tr.pauze td, .raster tr.pauze th { height: 10px; padding: 0; background: repeating-linear-gradient(45deg, #F0F1F5, #F0F1F5 4px, #E5E7EE 4px, #E5E7EE 8px); font-size: 0; }
.raster td.leeg { height: 2.6rem; cursor: cell; }
.raster td.leeg:hover { background: var(--oranje-zacht); }
.raster td.gekozen { background: #FFE3AE !important; }
.raster.lj1 thead th { background: var(--blauw); color: var(--wit); }
.raster.lj2 thead th { background: var(--lime); color: #1F2410; }
.blok { border-radius: 6px; padding: .3rem .4rem; height: 100%; cursor: pointer; display: flex; flex-direction: column; gap: .2rem; }
.lj1 .blok { background: var(--blauw-zacht); border-left: 4px solid var(--blauw); }
.lj2 .blok { background: var(--lime-zacht); border-left: 4px solid var(--lime); }
.blok:hover { outline: 2px solid var(--navy); }
.blok.geselecteerd { outline: 3px solid var(--oranje); }
.blok.conflict { outline: 2px solid var(--nee); }
.blok .naam { font-weight: 700; color: var(--navy); line-height: 1.2; }
.blok .lok { font-size: .75rem; color: var(--tekst-zacht); }
.raster td.blokcel { vertical-align: top; padding: 3px; }
.raster.lj1 td.blokcel { background: var(--blauw-zacht); }
.raster.lj2 td.blokcel { background: var(--lime-zacht); }
.docs { display: flex; flex-wrap: wrap; gap: .2rem; }
.chip { display: inline-flex; align-items: center; gap: .15rem; font-size: .75rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; background: var(--wit); border: 1px solid var(--lijn); color: var(--navy); }
.chip.open { border-style: dashed; border-color: var(--oranje); color: var(--oranje-donker); background: var(--oranje-zacht); }
.chip.fout { border-color: var(--nee); color: var(--nee); background: var(--nee-zacht); }
.chip.vast::after { content: "\1F512"; font-size: .65rem; }

/* Plekken in paneel */
.plek-rij { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--lijn); }
.plek-rij:last-child { border-bottom: none; }
.plek-rij .wat { flex: 1; font-size: .85rem; }
.plek-knop { min-width: 5rem; justify-content: center; }
.plek-knop.open { border-style: dashed; border-color: var(--oranje); color: var(--oranje-donker); }
.plek-knop.fout { border-color: var(--nee); color: var(--nee); background: var(--nee-zacht); }
.slot { border: 1px solid var(--lijn); background: var(--wit); border-radius: 6px; cursor: pointer; padding: .3rem .45rem; font-size: .9rem; opacity: .45; }
.slot.aan { opacity: 1; border-color: var(--navy); background: var(--vlak); }

/* Kandidatenlijst */
.kandidaten { max-height: 55vh; overflow-y: auto; border: 1px solid var(--lijn); border-radius: var(--radius); }
.kandidaat { display: flex; width: 100%; text-align: left; gap: .75rem; align-items: center; border: none; border-bottom: 1px solid var(--lijn); background: var(--wit); padding: .5rem .7rem; cursor: pointer; }
.kandidaat:hover { background: var(--oranje-zacht); }
.kandidaat .afk { font-weight: 700; width: 3.5rem; color: var(--navy); }
.kandidaat .pctbalk { width: 70px; height: 8px; border-radius: 4px; background: var(--vlak); overflow: hidden; flex: none; }
.kandidaat .pctbalk span { display: block; height: 100%; background: var(--oranje); }
.kandidaat .info { flex: 1; font-size: .85rem; color: var(--tekst-zacht); }
.kandidaat.grijs { background: var(--vlak); color: #9A9DAE; }
.kandidaat.grijs .afk { color: #9A9DAE; }
.kandidaat.huidig { background: var(--ok-zacht); }

/* Toetsweek */
.toets-tabel input[type=text] { width: 100%; min-width: 5rem; }
.toets-tabel select { min-width: 4rem; }
.toets-tabel td { padding: .25rem .35rem; }

/* Plannen */
.groot-vlak { text-align: center; padding: 2rem 1rem; }
.lijst { list-style: none; padding: 0; margin: 0; }
.lijst li { padding: .5rem .25rem; border-bottom: 1px solid var(--lijn); display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lijst li:last-child { border-bottom: none; }
.balkje { height: 10px; background: var(--vlak); border-radius: 5px; overflow: hidden; width: 100%; max-width: 260px; }
.balkje span { display: block; height: 100%; background: var(--oranje); }
.eerlijk-rij { display: grid; grid-template-columns: 4rem 1fr 7rem; gap: .75rem; align-items: center; padding: .25rem 0; }

/* Roosters */
.rooster-blad { margin-bottom: 2rem; }
.rooster-blad h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rooster { border-collapse: collapse; width: 100%; table-layout: fixed; }
.rooster th, .rooster td { border: 1px solid var(--lijn); padding: .3rem .35rem; font-size: .82rem; vertical-align: top; }
.rooster th { background: var(--vlak); text-align: center; }
.rooster th.uurkop { width: 5.2rem; text-align: left; }
.rooster th.uurkop small { display: block; font-weight: 400; color: var(--tekst-zacht); }
.rooster.lj1 thead th { background: var(--blauw); color: var(--wit); }
.rooster.lj2 thead th { background: var(--lime); color: #1F2410; }
.rooster tr.pauze td, .rooster tr.pauze th { height: 6px; padding: 0; background: #EEF0F4; font-size: 0; }
.rooster td.cel-lj1 { background: var(--blauw-zacht); }
.rooster td.cel-lj2 { background: var(--lime-zacht); }
.rooster td.cel-toets { background: var(--oranje-zacht); }
.rooster .naam { font-weight: 700; color: var(--navy); }
.rooster .sub { color: var(--tekst-zacht); font-size: .75rem; }
.printkop { display: none; }

/* Dialoog */
dialog { border: none; border-radius: 12px; padding: 0; width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-shadow: 0 20px 60px rgba(20, 22, 60, .35); }
dialog::backdrop { background: rgba(30, 32, 70, .45); }
.dlg-kop { background: var(--navy); color: var(--wit); padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dlg-kop h3 { color: var(--wit); margin: 0; }
.dlg-kop .icoon-knop { color: var(--wit); }
.dlg-kop .icoon-knop:hover { background: var(--navy-licht); color: var(--wit); }
.dlg-inhoud { padding: 1rem; overflow-y: auto; max-height: calc(100vh - 9rem); }
.dlg-voet { padding: .75rem 1rem; border-top: 1px solid var(--lijn); display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }

.leeg-tekst { color: var(--tekst-zacht); padding: 1rem; text-align: center; }
.kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }

@media (max-width: 1000px) {
  .thema-indeling { grid-template-columns: 1fr; }
  .paneel { position: static; }
}
@media (max-width: 600px) {
  main { padding: .75rem 16px; }
  .logo { height: 26px; }
  .kop-titel strong { font-size: .95rem; }
}

/* Printen */
@page { size: A4 portrait; margin: 10mm; }
@page liggend { size: A4 landscape; margin: 8mm; }
@media print {
  :root { font-size: 10px; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kop, .controle, .tabs, .melding, .balk, .niet-printen, dialog { display: none !important; }
  main { padding: 0; max-width: none; }
  .printkop { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--navy); margin-bottom: 4mm; padding-bottom: 2mm; }
  .printkop img { height: 9mm; }
  .rooster-blad { page-break-after: always; break-after: page; margin: 0; }
  .rooster-blad:last-child { page-break-after: auto; break-after: auto; }
  .rooster-blad.liggend { page: liggend; }
  .rooster th, .rooster td { font-size: 8.5pt; padding: 1.2mm; }
  .rooster tr { break-inside: avoid; }
  .tabel-vak { border: none; overflow: visible; }
}