/* Portaal — systeemfonts, geen externe bronnen. Donker standaard, licht via voorkeur of schakelaar. */
:root {
  --bg: #141a24; --vlak: #1d2532; --vlak2: #243044; --lijn: #2f3b50; --tekst: #e9eef5; --zacht: #9aa8bc;
  --accent: #0A84FF; --accent-tekst: #ffffff;
  --rood: #CC0605; --oranje: #F44611; --geel: #FFD500; --groen: #2CFF05; --blauw: #0A84FF; --grijs: #6b7686;
  --radius: 10px; --schaduw: none;
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, "Noto Sans", sans-serif;
  font-size: 16px; line-height: 1.5;
}
:root[data-theme="light"] { --bg: #f4f6f9; --vlak: #ffffff; --vlak2: #eef2f7; --lijn: #d6dde8; --tekst: #17202c; --zacht: #566275; color-scheme: light; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tekst); padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.balk { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .75rem 1.25rem; padding-top: max(.75rem, env(safe-area-inset-top));
  background: var(--vlak); border-bottom: 1px solid var(--lijn); }
.balk .merk { font-weight: 700; color: var(--tekst); text-decoration: none; margin-right: auto; }
.balk nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.balk nav a { color: var(--tekst); text-decoration: none; padding: .35rem .6rem; border-radius: 8px; }
.balk nav a[aria-current="page"] { background: var(--vlak2); }
.balk form { margin: 0; }
main { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
p { max-width: 70ch; }
.zacht { color: var(--zacht); }
.blok { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1rem; }
.rij { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.rij > * { flex: 1 1 260px; }
.melding { padding: .75rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; border: 1px solid var(--lijn); background: var(--vlak); }
.melding.fout { border-color: var(--rood); }
.melding.ok { border-color: var(--groen); }
.melding::before { font-weight: 700; margin-right: .4rem; }
.melding.fout::before { content: "Let op:"; }

label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
label.vink { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
label.vink input { width: auto; margin-top: .3rem; }
input, select, textarea { width: 100%; font: inherit; color: var(--tekst); background: var(--vlak2); border: 1px solid var(--lijn); border-radius: 8px; padding: .55rem .7rem; }
textarea { min-height: 6rem; resize: vertical; }
.hint { font-size: .875rem; color: var(--zacht); margin: .25rem 0 0; }
button, .knop { display: inline-block; font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; padding: .55rem 1rem;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-tekst); text-decoration: none; }
button.tweede, .knop.tweede { background: transparent; color: var(--tekst); border-color: var(--lijn); }
button.gevaar { background: transparent; color: var(--tekst); border-color: var(--rood); }
.acties { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; align-items: center; }
.verborgen { position: absolute; left: -9999px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-size: .875rem; color: var(--zacht); font-weight: 600; }
td.bedrag, th.bedrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabel { overflow-x: auto; }

.badge { display: inline-block; font-size: .8125rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap; }
.badge.rood { background: var(--rood); color: #fff; }
.badge.oranje { background: var(--oranje); color: #fff; }
.badge.geel { background: var(--geel); color: #111; }
.badge.groen { background: var(--groen); color: #111; }
.badge.blauw { background: var(--blauw); color: #fff; }
.badge.grijs { background: var(--grijs); color: #fff; }

/* Postraster: één vak per post van de maand, kleur = status, het woord staat ernaast in de legenda */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .4rem; margin: .75rem 0; max-width: 40rem; }
.raster a, .raster span { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-weight: 700; text-decoration: none; font-size: .9rem; }
.raster .rood { background: var(--rood); color: #fff; } .raster .oranje { background: var(--oranje); color: #fff; }
.raster .geel { background: var(--geel); color: #111; } .raster .groen { background: var(--groen); color: #111; }
.raster .blauw { background: var(--blauw); color: #fff; } .raster .grijs { background: var(--grijs); color: #fff; }
.teller { font-size: 2.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem; }

.voortgang { height: .75rem; border-radius: 999px; background: var(--vlak2); overflow: hidden; border: 1px solid var(--lijn); }
.voortgang > span { display: block; height: 100%; background: var(--accent); }
.voortgang.bijna > span { background: var(--oranje); }

.pakketten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.pakket { position: relative; }
.pakket input { position: absolute; opacity: 0; }
.pakket span { display: block; border: 2px solid var(--lijn); border-radius: var(--radius); padding: 1rem; background: var(--vlak); cursor: pointer; height: 100%; }
.pakket input:checked + span { border-color: var(--accent); }
.pakket input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.pakket strong { display: block; font-size: 1.1rem; }
.prijs { font-size: 1.4rem; font-weight: 800; display: block; margin: .25rem 0; }

.ontwerp { max-width: 100%; border-radius: 8px; border: 1px solid var(--lijn); display: block; }
.duimen { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.duimen img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--lijn); }
.document { white-space: pre-wrap; max-width: 75ch; }
.qr { background: #fff; padding: .75rem; border-radius: 8px; width: 220px; }
details > summary { cursor: pointer; font-weight: 600; }
.post-bewerk { border-top: 1px solid var(--lijn); padding-top: 1rem; margin-top: 1rem; }
@media (max-width: 600px) { h1 { font-size: 1.45rem; } main { padding: 1rem .9rem 3rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.melding.meekijk { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; border: 2px solid var(--geel); }
:root { --paars: #A259FF; --cyaan: #00D9F5; }
.badge.paars, .raster .paars { background: var(--paars); color: #fff; }
.badge.cyaan, .raster .cyaan { background: var(--cyaan); color: #111; }
.badge.rand, .raster .rand { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 2px var(--geel); }
.postlijst { list-style: none; margin: 0; padding: 0; }
.postlijst li { border-top: 1px solid var(--lijn); }
.postlijst a { display: grid; grid-template-columns: 2.25rem 4rem 1fr; gap: .75rem; align-items: center; padding: .6rem .25rem; color: var(--tekst); text-decoration: none; }
.postlijst a:hover { background: var(--vlak2); }
.postlijst .nr { font-weight: 800; text-align: center; }
.postlijst .duim { width: 4rem; height: 4rem; border-radius: 8px; object-fit: cover; border: 1px solid var(--lijn); background: var(--vlak2); display: block; }
.postlijst .tekst { min-width: 0; }
.postlijst .tekst span.bijschrift { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maandkeuze { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.maandkeuze select { width: auto; }
.wachtkop { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin: 1rem 0 .25rem; }
.wachtkop:first-child { margin-top: 0; }
.wachtkop form { margin: 0; }
table.compact td { vertical-align: middle; }
button.klein { padding: .3rem .7rem; font-size: .875rem; }
.minis { display: flex; flex-wrap: wrap; gap: .3rem; }
.minis a { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 6px; overflow: hidden; background: var(--vlak2); border: 1px solid var(--lijn); display: block; }
.minis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.minis span { position: absolute; right: 2px; bottom: 2px; background: rgba(0,0,0,.75); color: #fff; font-size: .7rem; font-weight: 700; padding: 0 .25rem; border-radius: 4px; line-height: 1.3; }
/* 0.2 */
:root { --roze: #FF5FB4; }
.badge.roze, .raster .roze { background: var(--roze); color: #111; }
.badge.leeg, .raster .leeg { background: transparent; color: var(--zacht); box-shadow: inset 0 0 0 2px var(--lijn); }
.raster .leeg { border: 2px dashed var(--lijn); box-shadow: none; }
.taken { list-style: none; margin: 0; padding: 0; }
.taken li { display: grid; grid-template-columns: .45rem 1fr auto; gap: .9rem; align-items: center; padding: .7rem .25rem; border-top: 1px solid var(--lijn); }
.taken li:first-child { border-top: 0; }
.taken .streep { align-self: stretch; border-radius: 4px; }
.taken .streep.rood { background: var(--rood); } .taken .streep.oranje { background: var(--oranje); }
.taken .streep.geel { background: var(--geel); } .taken .streep.blauw { background: var(--blauw); } .taken .streep.grijs { background: var(--grijs); }
.taken .wat { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); }
.taken .klant { font-weight: 700; }
.taken .knop { white-space: nowrap; }
.actiebalk { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.actiebalk .knop, .actiebalk button { padding: .45rem .8rem; }
.maandkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.maandkaart h3 { margin: 0 0 .25rem; }
.maandkaart .raster { grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); max-width: none; }
.maandkaart .raster a, .maandkaart .raster span { font-size: .8rem; border-radius: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; }
.chip { display: inline-block; font-size: .8rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--lijn); color: var(--tekst); text-decoration: none; background: var(--vlak2); }
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--lijn); }
.tijdlijn li:first-child { border-top: 0; }
.tijdlijn .wanneer { color: var(--zacht); font-size: .85rem; }
.tijdlijn .soort { font-weight: 700; }
.tijdlijn .tekst { white-space: pre-wrap; margin-top: .15rem; }
@media (max-width: 600px) { .tijdlijn li { grid-template-columns: 1fr; gap: .1rem; } }
.brief { border-left: 4px solid var(--accent); padding-left: 1rem; }
.kiesraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.kiesraster label { margin: 0; font-weight: 400; position: relative; display: block; }
.kiesraster img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 2px solid var(--lijn); display: block; }
.kiesraster input { position: absolute; top: .35rem; left: .35rem; width: 1.1rem; height: 1.1rem; }
.kiesraster input:checked + img { border-color: var(--accent); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: .3rem 0; }
.checklist .v { display: inline-block; width: 1.4rem; font-weight: 800; }
.checklist .klaar .v { color: var(--groen); } .checklist .open .v { color: var(--geel); }
.tabbalk { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.tabbalk a { padding: .4rem .8rem; border-radius: 8px; border: 1px solid var(--lijn); color: var(--tekst); text-decoration: none; }
.tabbalk a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.teller-klein { font-weight: 800; }
.taken .streep.roze { background: var(--roze); }
:root { --donkergroen: #00A651; }
.badge.donkergroen, .raster .donkergroen { background: var(--donkergroen); color: #fff; }
.taken .streep.cyaan { background: var(--cyaan); }
.bestandtegel { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .25rem; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--lijn); background: var(--vlak2); color: var(--tekst); text-decoration: none; padding: .5rem; text-align: center; font-size: .8rem; word-break: break-all; }
.bestandtegel strong { font-size: 1.1rem; }
/* Vandaag: samengevat per soort werk */
.stand { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 1rem; }
.standvak { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: .6rem .9rem; border-left: 6px solid; display: flex; align-items: baseline; gap: .6rem; }
.standvak .teller { font-size: 1.9rem; }
.standvak.rood { border-left-color: var(--rood); } .standvak.oranje { border-left-color: var(--oranje); }
.standvak.geel { border-left-color: var(--geel); } .standvak.blauw { border-left-color: var(--blauw); }
.groepen { list-style: none; margin: 0; padding: 0; }
.groepen li { display: grid; grid-template-columns: .45rem 2.6rem 1fr auto; gap: .8rem; align-items: center; padding: .5rem .1rem; border-top: 1px solid var(--lijn); }
.groepen li:first-child { border-top: 0; }
.groepen .streep { align-self: stretch; border-radius: 4px; }
.groepen .streep.rood { background: var(--rood); } .groepen .streep.oranje { background: var(--oranje); } .groepen .streep.geel { background: var(--geel); }
.groepen .streep.blauw { background: var(--blauw); } .groepen .streep.grijs { background: var(--grijs); }
.taken .streep.rood { background: var(--rood); }
.groepen .aantal { font-size: 1.35rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.groepen .chips { margin: .2rem 0 0; }
.groepen .chip { font-size: .75rem; padding: .05rem .5rem; }
.werkkop { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
/* actieknoppen: overal hetzelfde formaat */
.taken .knop, .groepen .knop, .werkrij .knop, .werkkop .knop { display: inline-flex; align-items: center; justify-content: center; width: 11.5rem; height: 2.6rem; padding: 0 .75rem; white-space: nowrap; box-sizing: border-box; font-size: 1rem; }
.groepen form, .taken form { margin: 0; }
@media (max-width: 700px) { .stand { grid-template-columns: repeat(2, 1fr); } .groepen li { grid-template-columns: .45rem 2rem 1fr; } .groepen .knop, .groepen form { grid-column: 2 / -1; width: 100%; }
  .taken .knop, .groepen .knop, .werkrij .knop { width: 9.5rem; font-size: .9rem; } }