:root {
  --bg: #f5f7f9;
  --vlak: #ffffff;
  --tekst: #1d2733;
  --zacht: #66727f;
  --lijn: #dde3e9;
  --merk: #0b5c8a;
  --merk-licht: #e3f0f8;
  --ok: #1f7a4d;   --ok-bg: #e2f4ea;
  --info: #0b5c8a; --info-bg: #e3f0f8;
  --warn: #8a5a00; --warn-bg: #fdf1d8;
  --fout: #b3261e; --fout-bg: #fbe4e2;
  --grijs-bg: #eceff2;
  --radius: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--tekst);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
/* achtergrond per rol: in één oogopslag zien als wie je werkt */
body.rol-budgethouder { --bg: #e4f0fb; }
body.rol-controller { --bg: #e3f4e6; }
body.rol-directeur { --bg: #fbe6ee; }
body.rol-businesscontroller { --bg: #e6e8eb; }
body.rol-beheerder { --bg: #ffffff; }
.rolchip { display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #1d2733; background: var(--bg); border: 1px solid rgba(255,255,255,.6); }
a { color: var(--merk); }
code { background: var(--grijs-bg); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

header.top {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--merk); color: #fff;
}
header.top a { color: #fff; text-decoration: none; }
.merk { font-weight: 700; font-size: 17px; }
.logo { display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 6px; background: rgba(255,255,255,.18); margin-right: 6px; }
.periode { opacity: .9; font-size: 14px; }
header nav { display: flex; gap: 18px; }
header nav a { opacity: .85; } header nav a:hover { opacity: 1; text-decoration: underline; }
.wie { margin-left: auto; font-size: 14px; opacity: .9; }
.wie a { margin-left: 10px; text-decoration: underline !important; }

main { max-width: 1320px; margin: 0 auto; padding: 20px 24px 60px; }
h1 { font-size: 24px; margin: 4px 0 12px; }
h2 { font-size: 19px; } h3 { font-size: 16px; margin: 0 0 8px; }
.kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.zacht { color: var(--zacht); } .klein { font-size: 13px; }
.leeg { padding: 28px; text-align: center; color: var(--zacht); background: var(--vlak); border: 1px dashed var(--lijn); border-radius: var(--radius); }

.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; }
details.kaart summary { cursor: pointer; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .twee .kaart { margin: 0; }

.tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0 16px; }
/* elke tegel = 3 rijen (label · waarde · toelichting) die via subgrid over de hele rij gelijk lopen */
.tegel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 12px 14px;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 3px; align-content: start; }
.tegel > span { display: block; color: var(--zacht); font-size: 13px; line-height: 1.3; align-self: end; }
.tegel > b { font-size: 21px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tegel > small, .tegel > .sub { align-self: start; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.tegel .sub span { display: block; color: var(--zacht); font-size: 12px; }
@supports not (grid-template-rows: subgrid) { .tegel { display: block; } }
.tegel.fout { border-color: var(--fout); background: var(--fout-bg); }

.melding { padding: 10px 14px; border-radius: var(--radius); margin: 0 0 10px; border: 1px solid transparent; }
.melding.ok { background: var(--ok-bg); color: var(--ok); }
.melding.fout { background: var(--fout-bg); color: var(--fout); border-color: #f1bdb8; }
.melding.info { background: var(--info-bg); color: var(--info); }
.melding.waarschuwing { background: var(--warn-bg); color: var(--warn); }
.ok-tekst { color: var(--ok); font-weight: 600; }

.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--grijs-bg); color: var(--zacht); white-space: nowrap; }
.pill.groot { font-size: 14px; padding: 4px 14px; }
.pill.concept, .pill.grijs { background: var(--grijs-bg); color: #4b5763; }
.pill.ingediend { background: var(--info-bg); color: var(--info); }
.pill.teruggestuurd { background: var(--warn-bg); color: var(--warn); }
.pill.akkoord, .pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.afgekeurd { background: var(--fout-bg); color: var(--fout); }

.soort { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.soort.sA { background: #eee8f7; color: #5b3d8f; }
.soort.sI { background: #e3f0f8; color: #0b5c8a; }
.soort.sS { background: #fdf1d8; color: #8a5a00; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); margin: 18px 0 12px; }
.tabs a { padding: 8px 16px; text-decoration: none; color: var(--zacht); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.actief { color: var(--tekst); border-color: var(--merk); font-weight: 600; }

table.lijst { width: 100%; border-collapse: collapse; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
.lijst th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--zacht); background: #f0f3f6; padding: 8px 10px; position: sticky; top: 0; }
.lijst td { padding: 8px 10px; border-top: 1px solid var(--lijn); vertical-align: top; }
.lijst tfoot td { font-weight: 700; background: #f0f3f6; }
.lijst tr.groep td { background: var(--merk-licht); font-weight: 700; }
.lijst tr:target { outline: 2px solid var(--merk); }
.lijst tr.st-afgekeurd { background: #fff8f7; }
.lijst tr.st-akkoord td { color: #3e4a56; }
.r { text-align: right; } .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.neg { color: var(--fout); }
.nowrap { white-space: nowrap; }
.details { font-family: ui-monospace, monospace; font-size: 11px; color: var(--zacht); word-break: break-all; }
.rapp { margin-top: 4px; font-size: 13px; color: var(--merk); }
.signaal { margin-top: 4px; font-size: 13px; color: var(--warn); }
.bericht { margin-top: 6px; padding: 6px 10px; border-radius: 6px; font-size: 13px; background: var(--grijs-bg); }
.bericht.controller { background: var(--warn-bg); }
.acties { white-space: nowrap; } .acties form { display: inline; }
.beoordeel { min-width: 190px; } .beoordeel input { width: 100%; margin: 6px 0 4px; }
.codes { line-height: 1.9; }

button, .knop {
  font: inherit; font-size: 14px; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--lijn);
  background: var(--vlak); color: var(--tekst); cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .knop:hover { border-color: var(--merk); }
button.primair { background: var(--merk); color: #fff; border-color: var(--merk); }
button.primair:hover { background: #094a70; }
button.klein { padding: 3px 9px; font-size: 13px; }
button.rood { color: var(--fout); }
button.link { border: none; background: none; color: var(--merk); padding: 2px 4px; text-decoration: underline; }
button.link.rood { color: var(--fout); }

input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid #c5cdd5; border-radius: 6px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--merk-licht); border-color: var(--merk); }
label { display: block; font-weight: 600; font-size: 14px; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
label small { font-weight: 400; }

.filters { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.filters input[type=search] { min-width: 340px; }
.filters label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.filters label input, .filters label select { width: auto; margin: 0; display: inline-block; }
.rij { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.rij label { flex: 1; min-width: 180px; }
.opm { display: flex; gap: 8px; margin-top: 12px; } .opm input { flex: 1; }
.beslis textarea { width: 100%; }
.knoppen { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.fouten { color: var(--fout); margin: 6px 0 12px; padding-left: 20px; }
.indienen { border-left: 4px solid var(--merk); }

.voortgang { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin: 0 0 16px; background: var(--grijs-bg); }
.voortgang .akkoord { background: var(--ok); } .voortgang .ingediend { background: var(--info); }
.voortgang .teruggestuurd { background: #d99a1e; } .voortgang .concept { background: #c5cdd5; }

dialog { border: none; border-radius: 12px; padding: 0; width: min(620px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(20,30,40,.45); }
.mutatieform { padding: 20px 24px; display: grid; gap: 14px; }
.mutatieform h2 { margin: 0; }
.regelinfo { background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.regelinfo .mini { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--zacht); }
.regelinfo pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; margin: 6px 0 0; }
fieldset.soorten { border: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
fieldset.soorten legend { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
fieldset.soorten label { border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-weight: 400; }
fieldset.soorten label:has(input:checked) { border-color: var(--merk); background: var(--merk-licht); }
fieldset.soorten input { display: inline; width: auto; margin: 0 4px 0 0; }
fieldset.soorten small { display: block; color: var(--zacht); font-size: 12px; margin-top: 2px; }

.login { max-width: 460px; margin: 40px auto; }
.login form { display: grid; gap: 14px; }
.login ul { padding-left: 18px; margin: 6px 0; }
.tekst h2 { margin: 18px 0 6px; } .tekst h2:first-child { margin-top: 0; }
.tekst h3 { margin: 12px 0 4px; font-size: 15px; }
.tekst li { margin: 3px 0; }

@media (max-width: 800px) {
  .tegels { grid-template-columns: 1fr 1fr; }
  .twee { grid-template-columns: 1fr; }
  .filters input[type=search] { min-width: 0; width: 100%; }
  main { padding: 16px; }
  table.lijst { display: block; overflow-x: auto; }
}

/* verdeelsleutels */
a.tegel.link { text-decoration: none; color: inherit; }
a.tegel.link:hover { border-color: var(--merk); }
.tegel small { display: block; font-size: 12px; }
.lijst.compact td, .lijst.compact th { padding: 5px 8px; }
.balk-cel { width: 24%; vertical-align: middle !important; white-space: nowrap; }
.balk-cel .balk { display: inline-block; width: calc(100% - 40px); vertical-align: middle; }
.balk { height: 8px; background: var(--grijs-bg); border-radius: 99px; overflow: hidden; }
.balk div { height: 100%; background: var(--merk); }
a.geen-link { color: inherit; text-decoration: none; cursor: default; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--merk-licht); color: var(--merk); font-size: 13px; white-space: nowrap; margin: 1px 0; }
.taakcel { min-width: 150px; }
.split { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--grijs-bg); margin: 4px 0 3px; width: 130px; }
.split .was { background: #2a7ab0; } .split .zui { background: #3aa37a; } .split .gat { background: repeating-linear-gradient(45deg, var(--fout) 0 3px, var(--fout-bg) 3px 6px); }
tr.ongebruikt td { color: var(--zacht); }
fieldset.sleutel { border: 1px solid var(--lijn); border-radius: 8px; padding: 10px 12px 12px; margin: 0; }
fieldset.sleutel legend { font-weight: 600; padding: 0 4px; }
.pctgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
fieldset[data-dim="taak"] .pctgrid { grid-template-columns: repeat(2, 1fr); }
.pctveld { display: flex; align-items: center; gap: 4px; font-weight: 400; margin-top: 4px; }
.pctveld input { margin: 0; text-align: right; }
.som { font-size: 13px; font-weight: 600; margin-left: 6px; padding: 1px 8px; border-radius: 99px; }
.som.goed { background: var(--ok-bg); color: var(--ok); } .som.fout { background: var(--fout-bg); color: var(--fout); }
.effect { display: block; min-height: 16px; font-weight: 400; font-size: 12px; color: var(--zacht); }
.effect.anders { color: var(--warn); }
.snel { font-size: 13px; color: var(--zacht); margin-bottom: 6px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.balk-cel .balk { min-width: 60px; }
@media (max-width: 1100px) { .twee { grid-template-columns: 1fr; } }
.tegels.vijf { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .tegels.vijf { grid-template-columns: repeat(3, 1fr); } }
.peilkiezer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 8px 10px; }
.peilkiezer select { padding: 5px 7px; }
fieldset.ingang .rij { align-items: center; }
fieldset.ingang select { width: auto; }
#ingang-uitleg { margin-top: 8px; }
.waarsch { color: var(--warn); font-weight: 600; }
.versies { padding: 0 24px 20px; }
.versies h3 { margin-top: 0; }
.versies tr.geldt td { background: var(--ok-bg); }
.versies .opm { margin: 0; } .versies .opm input { min-width: 120px; }
.afw { color: var(--warn); font-size: 10px; margin-left: 4px; cursor: help; vertical-align: super; }
.effectregel { margin-top: -6px; color: var(--zacht); }
.effectregel.let-op { color: var(--warn); }
.lijst tr.subtotaal td { font-weight: 600; background: #f7f9fb; }
.lijst tr.zonder-mut td { color: var(--zacht); }
td.let-op { color: var(--warn); font-weight: 600; }
.rij label.inline { flex: 0 0 auto; min-width: 0; display: flex; gap: 6px; align-items: center; font-weight: 400; } .rij label.inline input { width: auto; margin: 0; }
.actiebalk { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; flex-wrap: wrap; }
.veldfout { color: var(--fout); font-size: 13px; margin-top: -8px; }
.veldfout:empty { display: none; }
input.ongeldig { border-color: var(--fout); background: #fffafa; }
.bijlagen { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 13px; }
.bijlagen a { text-decoration: none; background: var(--grijs-bg); padding: 1px 8px; border-radius: 4px; color: var(--tekst); }
.bijlagen a:hover { background: var(--merk-licht); color: var(--merk); }
.bijlage-rij { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 4px 0; }
.bijlage-rij form { display: inline; }
input[type=file] { padding: 6px; background: var(--bg); }
#regelkiezer[hidden], #dlg-info[hidden] { display: none; }
.rondelabel { font-weight: 700; }
.rondechip { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 4px; background: var(--grijs-bg); color: #4b5763; white-space: nowrap; vertical-align: middle; }
.rondechip.huidig, h1 .rondechip { background: #e8e3f7; color: #4b3a8a; }
h1 .rondechip { font-size: 14px; padding: 3px 10px; }
.rondefilter { margin-left: auto; }
.rondefilter label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.rondefilter select { width: auto; margin: 0; }
.lijst tr.oude-ronde td { background: #fafbfc; }
.inline-vink label { display: flex; gap: 6px; align-items: center; font-weight: 400; } .inline-vink input { width: auto; margin: 0; }
.tegel small b { font-size: inherit; font-weight: 700; color: var(--tekst); } .tegel small { display: block; }
/* type mutatie */
.bedragrij { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; align-items: end; }
.hulptekst { margin-top: -8px; }
.typeuitleg { background: var(--bg); border-left: 3px solid var(--merk); padding: 8px 10px; font-size: 13px; border-radius: 4px; margin-top: -4px; }
.typeuitleg[hidden] { display: none; }
.typeuitleg .waarsch { margin-top: 4px; }
.typechip { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 4px; margin-bottom: 2px; }
.typechip.t-AUT { background: #e3f0f8; color: #0b5c8a; }
.typechip.t-EXO { background: #fdf1d8; color: #8a5a00; }
.typechip.t-BWB { background: #e2f4ea; color: #1f7a4d; }
.typechip.t-DSM { background: #eee8f7; color: #5b3d8f; }
.typechip.t-AOB { background: var(--grijs-bg); color: #4b5763; }
.typechip.t-leeg { background: var(--fout-bg); color: var(--fout); }
@media (max-width: 600px) { .bedragrij { grid-template-columns: 1fr; } }
.snelltype select { font-size: 13px; padding: 3px 6px; border-color: var(--fout); background: var(--fout-bg); color: var(--fout); font-weight: 600; margin-bottom: 4px; } .lijst tr:target td { background: var(--ok-bg); }
/* budgetregels: afwijking */
.afw-pos { color: #1f7a4d; }
.afw-neg { color: #b3261e; }
td.afwijking { font-weight: 700; }
td.afwijking .klein { font-weight: 400; }
.regeltabel th.c { text-align: center; }
.regeltabel tr.groepkop th { background: #e7ecf1; font-size: 11px; padding: 4px 10px; border-bottom: 0; }
.regeltabel tr.groepkop th + th { border-left: 1px solid var(--lijn); }
.invoerknop { font: inherit; font-variant-numeric: tabular-nums; border: 1px dashed #b9c4ce; background: #fbfcfd; padding: 3px 8px; border-radius: 5px; color: var(--merk); cursor: pointer; white-space: nowrap; }
.invoerknop.gevuld { border-style: solid; border-color: #c9d8e5; color: var(--tekst); background: var(--merk-licht); }
.invoerknop:hover { border-color: var(--merk); background: #fff; }
.aantal { font-size: 11px; color: var(--zacht); }
.legenda .afw-pos, .legenda .afw-neg { font-weight: 600; }
.regeltabel td:first-child { min-width: 220px; }
.opslag td:first-child { width: 190px; font-weight: 600; } .opslag code { word-break: break-all; }
/* mutatieformulier: verplichte velden */
.formfouten { background: var(--fout-bg); border: 1px solid var(--fout); color: var(--fout); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.formfouten ul { margin: 4px 0 0; padding-left: 18px; }
.formfouten[hidden] { display: none; }
.woordteller { margin-top: -8px; text-align: right; }
.woordteller.genoeg { color: var(--ok, #2e7d32); }
fieldset.soorten legend small { display: inline; font-weight: 400; margin: 0; }
/* mutatietabel met BUD/ACT/FC-x/MUT/Totaal/Verschil: compact zodat hij binnen de pagina past */
.mutatielijst th, .mutatielijst td { padding: 7px 6px; }
.mutatielijst th.r, .mutatielijst td.num { white-space: nowrap; }
.mutatielijst td.rondesoort span { display: table; margin-bottom: 3px; }
.mutatielijst .acties { white-space: normal; } .mutatielijst .acties form, .mutatielijst .acties button { display: block; }
.mutatielijst { font-size: 13px; }
.mutatielijst .typechip { white-space: normal; }
.tabelscroll { overflow-x: auto; }
/* logo rechtsboven in de kopbalk */
.huislogo { height: 40px; width: auto; margin-left: auto; background: #fff; border-radius: 50%; padding: 3px 4px; display: block; }
.wie + .huislogo { margin-left: 0; }
@media (max-width: 760px) { .tegels.vijf { grid-template-columns: 1fr 1fr; } }
/* brede pagina's (teamscherm): tabel mag het scherm benutten */
main.breed { max-width: 1880px; }
/* sorteerbare kolommen */
th.sorteer { cursor: pointer; user-select: none; }
th.sorteer:hover { color: var(--tekst); }
th.sorteer::after { content: " ↕"; opacity: .3; font-size: 11px; }
th[aria-sort="ascending"]::after { content: " ▲"; opacity: .8; }
th[aria-sort="descending"]::after { content: " ▼"; opacity: .8; }
.mutatielijst .acties button.primair { margin-bottom: 4px; padding: 3px 10px; }
/* directeur, vragen en nieuwe statussen */
.pill.goedgekeurd { background: #d4efe0; color: #135c38; }
.voortgang .goedgekeurd { background: #135c38; }
.pill.vraag-concept { background: var(--grijs-bg); color: #4b5763; }
.pill.vraag-verstuurd { background: var(--warn-bg); color: var(--warn); }
.pill.vraag-doorgezet { background: var(--info-bg); color: var(--info); }
.pill.vraag-beantwoord { background: #eee8f7; color: #5b3d8f; }
.pill.vraag-afgehandeld { background: var(--ok-bg); color: var(--ok); }
.vraag { border-left: 3px solid var(--warn); background: #fffaf0; border-radius: 4px; padding: 6px 10px; margin: 6px 0; font-size: 13px; }
.vraag.vs-concept { border-left-color: #b9c2cc; background: #f7f8fa; }
.vraag.vs-doorgezet { border-left-color: var(--info); background: #f2f8fc; }
.vraag.vs-beantwoord { border-left-color: #7b5fb0; background: #f8f5fc; }
.vraag.vs-afgehandeld { border-left-color: var(--ok); background: #f4faf6; opacity: .85; }
.vraag-kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vraag-kop .pill { margin-left: auto; }
.vraag-tekst { margin: 3px 0; }
.vraag .antwoord { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--lijn); }
.vraag form.inline { display: inline-block; margin-top: 4px; }
.vraag form.opm { margin-top: 6px; }
.vraaglink { display: block; font-size: 12px; margin-top: 3px; }
.vragenblok { border-left: 4px solid var(--warn); }
details.vraagform summary { cursor: pointer; color: var(--merk); margin-top: 4px; }
.dirrij { display: grid; grid-template-columns: minmax(220px, 2.2fr) 150px repeat(5, minmax(100px, 1fr)) minmax(160px, 1.4fr); gap: 10px; align-items: center; padding: 10px 14px; }
.dirkop { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--zacht); background: #f0f3f6; border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--lijn); }
details.dirteam { background: var(--vlak); border: 1px solid var(--lijn); border-top: none; }
details.dirteam > summary { cursor: pointer; list-style: none; }
details.dirteam > summary::-webkit-details-marker { display: none; }
details.dirteam > summary > span:first-child::before { content: "▸ "; color: var(--zacht); }
details.dirteam[open] > summary > span:first-child::before { content: "▾ "; }
details.dirteam[open] > summary { background: #f7f9fb; border-bottom: 1px solid var(--lijn); }
details.dirteam > summary:hover { background: #f7f9fb; }
.dirinhoud { padding: 12px 14px 16px; }
.dirvragen { margin-top: 12px; }
.dirakties { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.dirakties form.rij input { min-width: 280px; }
@media (max-width: 1000px) { .dirrij { grid-template-columns: 1fr 1fr; } .dirkop { display: none; } }
/* beheer: gebruikers en koppelingen */
.koppeltabel select { min-width: 200px; }
.koppeltabel tr.onvolledig td { background: #fffaf0; }
.gebruikers tr.inactief td { color: var(--zacht); text-decoration: line-through; }
.gebruikers tr.inactief td.acties, .gebruikers tr.inactief td.acties * { text-decoration: none; }
/* routering */
.route { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.route .stap { flex: 1 1 220px; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 10px 12px; background: var(--bg); display: flex; flex-direction: column; gap: 3px; }
.route .stap b { color: var(--merk); }
.route .stap small { color: var(--zacht); }
.route .pijl { align-self: center; font-size: 22px; color: var(--zacht); }
.terugwegen div { margin: 4px 0; font-size: 13px; }
.terugwegen .pijl { display: inline-block; width: 20px; color: var(--warn); }
.terugwegen .pijl.kijk { color: var(--info); }
/* handleiding */
.handleiding { max-width: 980px; }
.handleiding h2 { margin-top: 0; }
.handleiding section.eigen { border-left: 4px solid var(--merk); }
.handleiding nav.inhoud ol { margin: 6px 0 0; }
.handleiding li { margin: 3px 0; }
/* inlog: eigen uitklaplijst met vaste kolommen 'functie | naam' */
.login { max-width: 680px; }
.veld { margin-bottom: 12px; }
.veldlabel { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.acckeuze { position: relative; }
.acc-knop { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  background: #fff; border: 1px solid #c5cdd5; border-radius: 6px; padding: 7px 9px; font: inherit; color: var(--tekst); cursor: pointer; }
.acc-knop:focus { outline: 2px solid var(--merk-licht); border-color: var(--merk); }
.acc-pijl { color: var(--zacht); }
.acc-gekozen { display: flex; min-width: 0; }
.acc-lijst { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #c5cdd5;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 40, 60, .18); max-height: 420px; overflow-y: auto; padding: 6px 0; }
.acc-zoek { margin: 0 8px 6px; width: calc(100% - 16px); display: block; }
.acc-groep { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); padding: 8px 12px 3px; }
.acc-optie, .acc-gekozen { display: grid; grid-template-columns: 17.5em 1.2em minmax(0, auto) 1fr; align-items: baseline; }
.acc-optie { padding: 5px 12px 5px 22px; cursor: pointer; font-size: 14px; }
.acc-optie:hover, .acc-optie:focus { background: var(--merk-licht); outline: none; }
.acc-optie[aria-selected="true"] { font-weight: 600; }
.acc-f { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-s { color: var(--zacht); text-align: center; }
.acc-n { white-space: nowrap; }
.acc-st { color: var(--zacht); font-size: 12px; padding-left: 8px; white-space: nowrap; }
.acc-optie[hidden], .acc-groep[hidden] { display: none; }
@media (max-width: 640px) { .acc-optie, .acc-gekozen { grid-template-columns: minmax(0, 11em) 1.2em minmax(0, 1fr); } .acc-st { grid-column: 3; padding-left: 0; } }
/* tegelrij met zes tegels (teampagina's: eerste tegel = budgethouder, controller, directeur) */
.tegels.zes { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1300px) { .tegels.zes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tegels.zes { grid-template-columns: 1fr 1fr; } }
.tegel.rollen > b { font-size: 17px; white-space: normal; }
.tegel.rollen .sub b { font-weight: 600; color: var(--tekst); }
/* sorteerbare kolomkoppen in het directie-overzicht */
.dirsort { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; }
.dirkop [data-sleutel] { cursor: pointer; user-select: none; }
.dirkop [data-sleutel]:hover { color: var(--tekst); }
.dirkop [data-sleutel]::after { content: " ↕"; opacity: .3; font-size: 11px; }
.dirkop [aria-sort="ascending"]::after { content: " ▲"; opacity: .8; }
.dirkop [aria-sort="descending"]::after { content: " ▼"; opacity: .8; }
/* status 'voorlopig akkoord': zwart met witte tekst (klassen 'voorlopig' + 'akkoord') */
.pill.voorlopig.akkoord { background: #000; color: #fff; }
/* tegenpost bij administratieve overboekingen */
.tegenpost { margin-top: 5px; padding: 4px 8px; border-left: 3px solid #555; background: #f4f5f7; border-radius: 4px; font-size: 12.5px; }
.tegenpost.leeg-tegen { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
fieldset.tegenpostveld { border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 12px 10px; margin: 0; }
fieldset.tegenpostveld legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
fieldset.tegenpostveld[hidden] { display: none; }
.rij3 { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 8px; }
@media (max-width: 700px) { .rij3 { grid-template-columns: 1fr; } }
.tegenform { display: flex; gap: 4px; margin-bottom: 4px; } .tegenform input { min-width: 140px; }
/* tweestapsverificatie */
.codeveld { font-size: 1.4rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; text-align: center; }
.qr { margin: 10px 0; } .qr svg { width: 240px; height: 240px; display: block; border: 1px solid var(--lijn); border-radius: 8px; shape-rendering: crispEdges; }
ol.stappen { padding-left: 20px; } ol.stappen li { margin-bottom: 8px; }
code.sleutel { font-size: 1rem; letter-spacing: .05em; word-break: break-all; }
ul.herstelcodes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; } ul.herstelcodes li { margin: 4px 0; }
a.knop.primair { display: inline-block; padding: 8px 16px; border-radius: 6px; background: var(--merk); color: #fff; text-decoration: none; font-weight: 600; }
.onvolledig { margin-top: 5px; padding: 5px 9px; border-left: 3px solid var(--fout); background: var(--fout-bg); color: var(--fout); border-radius: 4px; font-size: 12.5px; }
.onvolledig ul { margin: 3px 0 0; padding-left: 16px; }
/* e-mail */
.melding.mailklaar { background: #eef4fb; color: var(--tekst); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mailknoppen { margin-left: auto; display: flex; gap: 6px; align-items: center; } .mailknoppen form { margin: 0; }
.emailform { display: flex; gap: 4px; } .emailform input { min-width: 190px; padding: 3px 6px; font-size: 12.5px; }

.rolvoorbeeld { display: inline-block; padding: 0 8px; border-radius: 99px; border: 1px solid var(--lijn); font-size: 13px; }

/* tijdspad per mutatie */
.statuscel { position: relative; min-width: 128px; }
/* kleur van de stap = kleur van de rol die aan zet is: budgethouder blauw, controller groen, directeur roze.
   gedaan = gevuld · nu = open rondje met gloed · teruggestuurd/afgekeurd = rood · nog niet = grijs */
.pijplijn { display: flex; align-items: center; margin-top: 6px; }
.vg-stap { --f: #9aa5b1; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #c3cad2; background: #fff; flex: none; }
.vg-stap.f-budgethouder, .vg-legenda li.f-budgethouder { --f: #2f7fc1; --fl: #d3e6f7; }
.vg-stap.f-controller, .vg-legenda li.f-controller { --f: #2e9a55; --fl: #d2efdb; }
.vg-stap.f-directeur, .vg-legenda li.f-directeur { --f: #d1497f; --fl: #f8dbe7; }
.vg-stap.klaar { background: var(--f); border-color: var(--f); }
.vg-stap.nu { background: #fff; border: 3px solid var(--f); box-shadow: 0 0 0 3px var(--fl); }
.vg-stap.fout { background: var(--fout); border-color: var(--fout); }
.vg-lijn { width: 12px; height: 2px; background: #c9d0d7; flex: none; }
.vg-lijn.klaar { background: #8c98a4; }
details.historie { margin-top: 4px; }
details.historie > summary { cursor: pointer; color: var(--merk); list-style: none; }
details.historie > summary::-webkit-details-marker { display: none; }
details.historie > summary::before { content: "▸ "; }
details.historie[open] > summary::before { content: "▾ "; }
.tijdlijn { position: absolute; right: 0; z-index: 20; width: min(460px, 86vw); margin-top: 4px; padding: 10px 12px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.14);
  font-size: 13px; text-align: left; white-space: normal; font-weight: normal; }
.tijdlijn ol.vg-legenda { list-style: none; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--lijn); }
.tijdlijn ol.vg-legenda li { padding: 2px 0 2px 18px; position: relative; }
.tijdlijn ol.vg-legenda li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #b9c2cc; background: #fff; }
.tijdlijn ol.vg-legenda li.klaar::before { background: var(--f); border-color: var(--f); }
.tijdlijn ol.vg-legenda li.nu::before { background: #fff; border-color: var(--f); box-shadow: 0 0 0 2px var(--fl); }
.tijdlijn ol.vg-legenda li.fout::before { background: var(--fout); border-color: var(--fout); }
.tijdlijn ul { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.tijdlijn ul li { padding: 3px 0 3px 10px; border-left: 3px solid #c9d0d7; margin-bottom: 2px; }
.tijdlijn ul li.ok { border-left-color: var(--ok); }
.tijdlijn ul li.fout { border-left-color: var(--fout); }
.tijdlijn ul li.let { border-left-color: #d9a400; }
.tl-tijd { color: var(--zacht); font-variant-numeric: tabular-nums; margin-right: 4px; }
.al-op-regel { margin-top: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--lijn); border-radius: 6px; font-size: 13px; }
.al-op-regel > div { margin-top: 3px; }

/* toegangspoort (demo) */
.top .poort { font-size: 12px; color: rgba(255,255,255,.85); white-space: nowrap; margin-left: 10px; }
.top .poort a { color: #fff; }
.linkvak { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.linkvak input { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.toegangtabel td { vertical-align: top; }
.toegangtabel form { display: inline; }
.toegangtabel details form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pill.uitgenodigd { background: var(--info-bg); color: var(--info); }
.pill.actief { background: var(--ok-bg); color: var(--ok); }
.pill.geblokkeerd { background: var(--fout-bg); color: var(--fout); }
.tijdlijn .via { font-size: 11px; padding: 0 6px; border-radius: 99px; background: #fff3c4; color: #6b5200; white-space: nowrap; }