/* ============================================================
   HUISSTIJL — pas hier de kleuren aan voor een nieuwe merkstijl.
   Alles hieronder in dit bestand verwijst naar deze variabelen.

   LET OP, deze kleuren zitten BUITEN dit blok en moet je apart
   meenemen bij een rebrand:
   1. De pijltjes in de keuzelijsten staan als afbeelding in de CSS
      zelf (zoek op %23 — dat is een # in een webadres). Die kunnen
      technisch geen variabele bevatten.
   2. De Word-export in generators.js heeft een eigen terugvalkleur;
      een Word-document kent deze variabelen niet.
   3. Een handvol losse tinten die maar een of twee keer voorkomen
      is bewust niet tot variabele gemaakt.
   ============================================================ */
:root{
  /* Merk — Colvi: donker bosgroen primair, lila accent */
  --primair:#1F3B34; --primair-donker:#17302A; --primair-hover:#3D6358; --primair-rand:#2A4A40;
  --accent:#9B87C4; --accent-hover:#7C6AA8; --accent-donker:#6F5D96; --accent-tekst:#6F5D96;
  --link:#6F8F7A; --link-licht:#A8C2B0; --link-gedimd:#4F6B5C;

  /* Vlakken */
  --papier:#FAF8F4; --achtergrond:#EFEAE2; --wit:#fff;
  --accent-vlak:#F1EDF8; --accent-rand:#D9CFEA;
  --link-vlak:#EEF3EF; --link-rand:#C9D9CE;

  /* Tekst, van donker naar licht */
  --tekst:#232420; --tekst-zacht:#4A4844; --tekst-midden:#6B6862;
  --tekst-gedimd:#8A867E; --tekst-licht:#A6A29A; --tekst-zeer-licht:#C2BEB6;
  --tekst-uitgegrijsd:#B0ACA4;

  /* Randen */
  --rand:#E4DFD6; --rand-licht:#EAE6DE; --rand-zeer-licht:#F0ECE6; --rand-vlak:#E8E3DB;

  /* Betekeniskleuren — los van het merk-accent, zodat fouten niet toevallig
     dezelfde kleur krijgen als de huisstijl (zoals bij de oude koraal-accent) */
  --fout:#B5504A; --fout-vlak:#FBEEEC; --fout-rand:#E8CAC5;
  --oker:#C7924B; --oker-tekst:#8C6A30; --oker-vlak:#FBF3E8; --oker-rand:#E8D2AC;
  --blauwgrijs:#7C93A0; --blauwgrijs-vlak:#EEF1F2; --blauwgrijs-rand:#C7D3D8;
  --succes:#B7CDB0; --succes-vlak:#EEF3EA; --succes-rand:#C7D9C0; --succes-tekst:#3D6358;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
input,textarea,select{font-family:'Public Sans',sans-serif !important;font-size:13px !important;color:var(--tekst) !important}
textarea::placeholder,input::placeholder{color:var(--tekst-zeer-licht) !important}
body{font-family:'Public Sans',sans-serif;font-size:13px;background:var(--achtergrond);padding:28px;-webkit-font-smoothing:antialiased;min-height:100vh}
.card{max-width:640px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 2px 24px rgba(0,0,0,0.12);background:var(--papier)}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:10px;padding:14px 26px;background:var(--primair)}
.logo-name{font-family:'Quicksand',sans-serif;font-size:17px;font-weight:700;color:var(--papier);letter-spacing:-0.01em;white-space:nowrap}
.logo-sub{font-size:9px;color:var(--link-licht);margin-top:1px;white-space:nowrap}
.btn-nieuw{background:var(--accent);color:var(--wit);border:1.5px solid var(--accent);padding:7px 16px;border-radius:8px;font-size:12px;font-weight:500;font-family:'Public Sans',sans-serif;cursor:pointer}
.btn-nieuw:hover{background:var(--accent-hover)}

/* Fasebalk */
.fasebalk{background:var(--primair-donker);padding:0 20px;display:flex}
.fase{flex:1;display:flex;align-items:center;justify-content:center;padding:9px 2px;font-size:10.5px;color:var(--link-gedimd);position:relative;text-align:center;cursor:default;background:none;border:none;font-family:'Public Sans',sans-serif}
.fase.done{color:var(--link-licht);cursor:pointer}
.fase.done::after{content:'\2713';font-size:9px;margin-left:3px}
.fase.active{color:var(--papier);font-weight:500}
.fase.active::before{content:'';position:absolute;bottom:0;left:10%;right:10%;height:2px;background:var(--accent);border-radius:2px 2px 0 0}
.fase-sep{width:1px;background:var(--primair-rand);flex-shrink:0;margin:8px 0}

/* Content shell */
.content{background:var(--papier);padding:28px 36px 36px}
.back{font-size:12px;color:var(--link);cursor:pointer;margin-bottom:20px;display:inline-block;background:none;border:none;font-family:'Public Sans',sans-serif}
.ctx{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:6px}
.ctx-vak{font-size:13px;font-weight:500;color:var(--tekst-zacht)}
.ctx-meta{font-size:11px;color:var(--tekst-licht)}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:500}
.badge-thema{background:var(--accent-vlak);border:1px solid var(--accent-rand);color:var(--accent-donker)}
.badge-oorzaak{background:var(--link-vlak);border:1px solid var(--link-rand);color:var(--link-gedimd)}
.badge-aanpak{background:var(--blauwgrijs-vlak);border:1px solid var(--blauwgrijs-rand);color:var(--blauwgrijs)}
.badge-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-thema .badge-dot{background:var(--accent)}
.badge-oorzaak .badge-dot{background:var(--link)}
.badge-aanpak .badge-dot{background:var(--blauwgrijs)}

.form-title{font-size:19px;font-weight:500;color:var(--tekst);margin-bottom:16px}
.form-sub{font-size:12.5px;color:var(--tekst-gedimd);line-height:1.6;margin-bottom:20px}
.sec-label{font-size:11px;font-weight:500;color:var(--tekst);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.divider{height:.5px;background:var(--rand);margin:20px 0}
.teller{font-size:12px;color:var(--tekst-licht);margin-bottom:18px;transition:color .2s}
.teller.actief{color:var(--accent)}

.btn-next{width:100%;background:var(--primair);color:var(--papier);border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:500;font-family:'Public Sans',sans-serif;cursor:pointer;opacity:.35;pointer-events:none;transition:opacity .15s;margin-top:8px}
.btn-next.active{opacity:1;pointer-events:auto}
.btn-next.active:hover{background:var(--primair-hover)}

/* Generic select */
.sd-select{border:none;border-bottom:1px solid var(--rand-zeer-licht);outline:none;background:transparent;cursor:pointer;padding:5px 20px 5px 0;font-size:13px;color:var(--tekst);font-family:'Public Sans',sans-serif;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%23a6a29a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1px center;width:100%;margin-bottom:14px}
.sd-select:focus{border-bottom-color:var(--link)}
.opzet-select{flex:1;border:1px solid var(--rand);border-radius:8px;padding:8px 32px 8px 12px;font-size:13px;font-family:'Public Sans',sans-serif;color:var(--tekst);background:var(--wit);outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a6a29a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer;transition:border-color .15s}
.opzet-select:focus{border-color:var(--link)}
.opzet-selects{display:flex;gap:10px;margin-bottom:24px}

/* Collega-tags (leerkracht-koppeling in Beheer) */
.collega-tag{display:flex;align-items:center;gap:5px;background:var(--link-vlak);border:1px solid var(--link-rand);border-radius:20px;padding:2px 10px;font-size:11px;color:var(--primair);font-weight:500;white-space:nowrap}
.collega-tag-x{cursor:pointer;color:var(--link-licht);font-size:13px;line-height:1;margin-left:2px;background:none;border:none;padding:0;font-family:inherit}
.collega-tag-x:hover{color:var(--primair)}

/* Vak strip */
.vak-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.vak-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:7px 14px;border-radius:20px;border:1px solid var(--rand);background:var(--wit);color:var(--tekst-zacht);white-space:nowrap}
.vak-chip-icon{font-size:14px;line-height:1}
.vak-chip.actief{border-color:var(--accent);border-width:1.5px;background:var(--accent-vlak);color:var(--accent-donker)}
.vak-chip.binnenkort{color:var(--tekst-licht);font-weight:400}
.vak-chip-bk{font-size:9px;color:var(--tekst-zeer-licht);margin-left:1px}

/* Periode */
.periode-rij{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px}
.periode-groep{flex:1}
.periode-sub{font-size:10px;color:var(--tekst-gedimd);margin-bottom:5px}
.periode-input{width:100%;border:1px solid var(--rand);border-radius:8px;padding:7px 32px 7px 12px;font-size:12px;color:var(--tekst);background:var(--wit);outline:none;transition:border-color .15s;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a6a29a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.periode-input:focus{border-color:var(--link)}
.periode-input.fout{border-color:var(--fout)}
.periode-dash{font-size:13px;color:var(--tekst-uitgegrijsd);flex-shrink:0;padding-top:24px}
.periode-fout{font-size:11px;color:var(--fout);margin-bottom:20px;min-height:16px}
.periode-ok{font-size:11px;color:var(--link);margin-bottom:20px;min-height:16px}

/* Toets pills / notitie */
.toets-rij{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.toets-pill{padding:5px 14px;border-radius:20px;font-size:11px;border:1px solid var(--rand);color:var(--tekst-midden);background:var(--wit);user-select:none;cursor:pointer}
.toets-pill.active{background:var(--primair);color:var(--papier);border-color:var(--primair);font-weight:500}
.toets-pill.binnenkort{opacity:.5;cursor:default}
.toets-pill .bk{font-size:9px;margin-left:4px}
.notitie{background:var(--rand-zeer-licht);border-radius:9px;padding:9px 13px;margin-bottom:10px;display:flex;gap:9px;align-items:flex-start}
.notitie-tekst{font-size:11.5px;color:var(--tekst-midden);line-height:1.5}
.notitie-tekst strong{color:var(--tekst-zacht);font-weight:500}
.notitie-sluit{background:none;border:none;color:var(--tekst-zeer-licht);font-size:14px;line-height:1;cursor:pointer;padding:0;font-family:inherit;margin-left:auto;flex-shrink:0}
.notitie-sluit:hover{color:var(--tekst-licht)}

/* Score rows */
.sectie{margin-bottom:6px}
.sectie-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.sectie-icon{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sd-rij{background:var(--wit);border-radius:9px;padding:9px 12px;margin-bottom:6px;border:1px solid var(--rand-licht);border-left-width:3px;position:relative}
.sd-rij.type-aandacht{border-left-color:var(--accent)}
.sd-rij.type-sterk{border-left-color:var(--link-licht)}
.rij-hoofd{display:flex;align-items:flex-start;gap:10px;padding-right:22px}
.rij-selects{flex:1;display:flex;flex-direction:column;gap:3px}
.rij-selects .sd-select{margin-bottom:0}
.rij-rechts{display:flex;align-items:flex-start;gap:10px;flex-shrink:0;padding-top:2px}
.score-col,.trend-col{display:flex;flex-direction:column;align-items:center;gap:5px}
.col-lbl{font-size:9px;color:var(--tekst-zeer-licht);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sd-select.domein-sel{font-weight:500;font-size:13px}
.sd-select.sub-sel{font-size:12px;color:var(--tekst-zacht)}
.score-wrap{display:flex;align-items:baseline;gap:0}
.score-field{border:none;border-bottom:1.5px solid var(--rand);outline:none;text-align:right;background:transparent;padding:2px 0;font-size:13px;color:var(--tekst);width:30px}
.score-field:focus{border-color:var(--link)}
.score-pct{font-size:12px;color:var(--tekst-midden)}
.trend-groep{display:flex;gap:3px}
.t-btn{width:28px;height:24px;border-radius:5px;border:1px solid var(--rand);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tekst-gedimd);background:#F8F6F1;transition:all .12s;user-select:none;font-family:inherit;padding:0}
.t-btn:hover{border-color:var(--link-rand);color:var(--link);background:var(--link-vlak)}
.t-btn.sel-laag{background:var(--accent-vlak);border-color:var(--accent);color:var(--accent)}
.t-btn.sel-gelijk{background:var(--papier);border-color:var(--tekst-licht);color:var(--tekst-zacht)}
.t-btn.sel-hoog{background:var(--link-vlak);border-color:var(--link);color:var(--link)}
.rij-del{position:absolute;top:9px;right:10px;width:18px;height:18px;border-radius:50%;border:none;background:transparent;color:var(--tekst-zeer-licht);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;padding:0;line-height:1}
.rij-del:hover{background:var(--fout-vlak);color:var(--fout)}
.btn-add{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--link);cursor:pointer;padding:5px 0;margin-bottom:20px;background:none;border:none;font-family:'Public Sans',sans-serif}
.btn-add:hover{color:var(--primair)}

/* Rekendoel pills + dropdown (shared: scores / thema) */
.rd-sectie{margin-top:6px;padding-top:6px;border-top:1px solid var(--rand-zeer-licht)}
.rd-label{font-size:10.5px;color:var(--tekst-gedimd);margin-bottom:4px;font-weight:500}
.rd-pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.rd-pill{display:flex;align-items:flex-start;gap:4px;background:var(--accent-vlak);border:1px solid var(--accent-rand);border-radius:6px;padding:4px 8px;font-size:11px;color:var(--accent-donker);line-height:1.4;max-width:100%}
.rd-x{cursor:pointer;color:#C4B8DC;font-size:13px;margin-left:2px;line-height:1;flex-shrink:0;background:none;border:none;font-family:inherit;padding:0}
.rd-x:hover{color:var(--accent)}
.rd-add-wrap{position:relative;display:inline-block}
.rd-add-btn{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--accent-donker);cursor:pointer;background:none;border:1px dashed var(--accent-rand);border-radius:6px;padding:3px 9px;font-family:'Public Sans',sans-serif;transition:all .12s}
.rd-add-btn:hover{background:var(--accent-vlak);border-color:var(--accent);color:var(--accent-donker)}
.regenereer-bevestig{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--accent-vlak);border:1px solid var(--accent-rand);border-radius:8px;padding:8px 12px}
.regenereer-tekst{font-size:11.5px;color:var(--accent-donker);line-height:1.5;flex:1;min-width:200px}
.regenereer-annuleer{background:none;border:none;font-size:11px;color:var(--tekst-midden);cursor:pointer;font-family:'Public Sans',sans-serif;text-decoration:underline;padding:0}
.regenereer-annuleer:hover{color:var(--tekst)}
.rd-dropdown{position:absolute;left:0;top:calc(100% + 5px);background:var(--wit);border:1px solid var(--rand);border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);z-index:200;min-width:300px;max-height:240px;overflow-y:auto;display:none}
.rd-dropdown.open{display:block}
.rd-opt{display:flex;align-items:flex-start;gap:8px;padding:7px 14px;cursor:pointer;transition:background .1s;font-size:12px;color:var(--tekst);line-height:1.45;width:100%;text-align:left;background:none;border:none;font-family:'Public Sans',sans-serif}
.rd-opt:hover{background:var(--accent-vlak)}
.rd-opt.gekozen{color:var(--tekst-zeer-licht);cursor:default}
.rd-opt-vinkje{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--rand);flex-shrink:0;margin-top:2px}
.rd-opt.gekozen .rd-opt-vinkje{background:var(--accent);border-color:var(--accent)}

/* Niveau optional toggle */
.niveau-toggle{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--tekst-zeer-licht);cursor:pointer;background:none;border:none;font-family:'Public Sans',sans-serif;padding:0;margin-bottom:8px;transition:color .12s}
.niveau-toggle:hover{color:var(--link)}
.niveau-rij{display:none;align-items:center;gap:8px;margin-bottom:8px}
.niveau-rij.zichtbaar{display:flex}
.niveau-lbl{font-size:11px;color:var(--tekst-gedimd);white-space:nowrap}
.niveau-sel{border:none;border-bottom:1px solid var(--rand-zeer-licht);outline:none;background:transparent;cursor:pointer;padding:2px 20px 2px 0;font-size:12px;color:var(--tekst);font-family:'Public Sans',sans-serif;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%23a6a29a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1px center;width:auto;min-width:48px}
.niveau-x{font-size:14px;color:var(--tekst-zeer-licht);cursor:pointer;line-height:1;background:none;border:none;font-family:inherit;padding:0}
.niveau-x:hover{color:var(--accent)}

/* Vraag / keuze */
.vraag-titel{font-size:15px;font-weight:500;color:var(--tekst);margin-bottom:5px}
.vraag-sub{font-size:12px;color:var(--tekst-gedimd);margin-bottom:14px;line-height:1.55}
.keuze-rij{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.keuze-card{border:1px solid var(--rand);border-radius:10px;padding:11px 16px;cursor:pointer;background:var(--wit);display:flex;align-items:center;gap:12px;transition:all .15s;width:100%;text-align:left;font-family:inherit}
.keuze-card:hover{border-color:var(--link-rand)}
.keuze-card.sel-ja,.keuze-card.sel-deels{border-color:var(--link);border-width:1.5px;background:var(--link-vlak)}
.keuze-card.sel-nee{border-color:var(--accent);border-width:1.5px;background:var(--accent-vlak)}
.keuze-radio{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--rand);flex-shrink:0;transition:all .15s}
.keuze-card.sel-ja .keuze-radio,.keuze-card.sel-deels .keuze-radio{border-color:var(--link);background:var(--link)}
.keuze-card.sel-nee .keuze-radio{border-color:var(--accent);background:var(--accent)}
.keuze-tekst{font-size:13px;color:var(--tekst)}
.keuze-sub{font-size:11px;color:var(--tekst-gedimd);margin-top:1px}
.toelichting{display:none;margin-bottom:16px}
.toelichting.zichtbaar{display:block}
.toel-area{width:100%;border:1px solid var(--rand);border-radius:10px;padding:11px 14px;background:var(--wit);resize:vertical;min-height:70px;outline:none;line-height:1.6;font-size:13px;color:var(--tekst)}
.toel-area:focus{border-color:var(--link)}
.naam-waarschuwing{font-size:11.5px;color:var(--oker-tekst);line-height:1.6;margin-top:8px;padding:8px 12px;background:var(--oker-vlak);border-radius:8px}

/* Richting cards (aanpak) */
.richting{background:var(--wit);border:1.5px solid var(--rand-licht);border-radius:10px;padding:14px 16px;margin-bottom:8px;transition:all .15s}
.richting:hover{border-color:var(--accent-rand)}
.richting.selected{border-color:var(--accent);background:var(--accent-vlak)}
.richting.hint{border-left:3px solid var(--link-licht)}
.richting.hint.selected{border-left:3px solid var(--accent)}
.richting.uitgeschakeld{opacity:.4}
.richting.uitgeschakeld:hover{border-color:var(--rand-licht)}
.richting-select{display:block;width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;text-align:left;font-family:inherit}
.richting-select:disabled{cursor:default}
.sec-hint{font-weight:400;color:var(--tekst-gedimd);text-transform:none;letter-spacing:0}
.richting-top{display:flex;align-items:flex-start;gap:12px}
.richting-icon{width:36px;height:36px;border-radius:8px;background:var(--papier);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.richting.selected .richting-icon{background:var(--accent-vlak)}
.richting-icon svg{opacity:.55;transition:opacity .15s}
.richting.selected .richting-icon svg{opacity:.85}
.richting-body{flex:1;min-width:0}
.richting-naamrij{display:flex;align-items:center;gap:7px;margin-bottom:3px;flex-wrap:wrap}
.richting-naam{font-size:13px;font-weight:500;color:var(--tekst)}
.richting.selected .richting-naam{color:var(--accent-donker)}
.richting-hint-tag{font-size:10px;color:var(--link);background:var(--link-vlak);border-radius:4px;padding:1px 6px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.richting-kern{font-size:12px;color:var(--tekst-midden);line-height:1.5;margin-bottom:2px}
.richting-voorbeeld{font-size:11.5px;color:var(--tekst-licht);line-height:1.5}
.richting-reden{font-size:11.5px;color:var(--link-gedimd);line-height:1.5;margin-top:6px;padding-top:6px;border-top:1px solid var(--rand-zeer-licht)}
.scenario-picker{margin-top:12px;padding-top:12px;border-top:1px solid var(--rand-licht)}
.sc-label{font-size:11px;color:var(--tekst-midden);margin-bottom:8px}
.sc-rij{display:flex;flex-wrap:wrap;gap:6px}
.sc{padding:6px 12px;border-radius:20px;font-size:12px;border:1px solid var(--rand);background:var(--papier);color:var(--tekst);cursor:pointer;transition:all .15s}
.sc:hover{border-color:var(--link-rand);background:var(--link-vlak)}
.sc.selected{border-color:var(--accent);border-width:1.5px;background:var(--accent-vlak);color:var(--accent-donker)}
.eigen-input{width:100%;border:none;border-top:1px solid var(--rand-licht);margin-top:10px;padding-top:9px;outline:none;background:transparent;font-size:12px;display:none}
.eigen-input.open{display:block}

/* Aard tiles (diagnose) */
.rd-blok{margin-bottom:20px}
.rd-blok-naam{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--tekst-gedimd);margin-bottom:10px}
.aard-rij{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.aard-tile{padding:9px 12px;border-radius:8px;border:1.5px solid var(--rand);background:#F8F6F1;cursor:pointer;transition:all .15s;user-select:none;text-align:left;display:block;width:100%;font-family:inherit}
.aard-tile-naam{font-size:12px;font-weight:500;color:var(--tekst-zacht);transition:color .15s}
.aard-tile-sub{font-size:10.5px;color:var(--tekst-uitgegrijsd);margin-top:2px;line-height:1.35;transition:color .15s}
.aard-tile:hover{border-color:var(--link-rand);background:var(--link-vlak)}
.aard-tile:hover .aard-tile-naam{color:var(--link)}
.aard-tile.sel{background:var(--accent-vlak);border-color:var(--accent)}
.aard-tile.sel .aard-tile-naam{color:var(--accent-donker)}
.aard-tile.sel .aard-tile-sub{color:#A99BC2}
.aard-tile.uitgeschakeld{opacity:.4;cursor:default}
.aard-tile.uitgeschakeld:hover{border-color:var(--rand);background:#F8F6F1}
.aard-tile.uitgeschakeld:hover .aard-tile-naam{color:var(--tekst-zacht)}

/* Thema kaarten */
.thema-kaart{background:var(--wit);border:1.5px solid var(--rand);border-radius:12px;padding:16px 18px;margin-bottom:10px;transition:all .15s}
.thema-kaart:hover{border-color:var(--link-rand)}
.thema-kaart.geselecteerd{border-color:var(--primair);border-width:2px;background:var(--link-vlak)}
.tk-select{display:block;width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;text-align:left;font-family:inherit}
.tk-top{display:flex;align-items:flex-start;gap:12px}
.tk-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--rand);flex-shrink:0;margin-top:2px;transition:all .15s}
.thema-kaart.geselecteerd .tk-radio{border-color:var(--primair);background:var(--primair)}
.tk-body{flex:1;min-width:0}
.tk-badge{display:inline-block;font-size:10px;background:var(--link-vlak);color:var(--link);border-radius:20px;padding:2px 8px;margin-bottom:6px;font-weight:500}
.tk-naam{font-size:15px;font-weight:500;color:var(--tekst);margin-bottom:4px}
.tk-reden{font-size:12px;color:var(--tekst-midden);line-height:1.5}
.tk-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--rand-zeer-licht)}
.tk-detail-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--tekst-zeer-licht);margin-bottom:6px}
.thema-kaart.geselecteerd .tk-detail-label{color:var(--tekst-gedimd)}
.rd-pill.tk-pill{background:var(--rand-zeer-licht);border-color:var(--rand-licht);color:var(--tekst-licht)}
.thema-kaart.geselecteerd .rd-pill.tk-pill{background:var(--link-vlak);border-color:var(--link-rand);color:var(--link)}
.eigen-label{font-size:13px;font-weight:500;color:var(--tekst)}
.eigen-sub-label{font-size:12px;color:var(--tekst-midden);margin-top:2px}
.eigen-body{margin-top:14px;display:none}
.thema-kaart.geselecteerd .eigen-body{display:block}
.form-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--tekst-gedimd);margin-bottom:6px;display:block}

/* Instellingen: stepper + chips */
.instelling{margin-bottom:24px}
.inst-label{font-size:13px;font-weight:500;color:var(--tekst);margin-bottom:4px}
.inst-hint{font-size:12px;color:var(--tekst-licht);margin-bottom:12px;line-height:1.5}
.stepper{display:flex;align-items:center;gap:0}
.step-btn{width:40px;height:40px;border-radius:8px;border:1.5px solid var(--rand);background:var(--wit);font-size:18px;color:var(--tekst-zacht);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;flex-shrink:0}
.step-btn:hover{border-color:var(--link);color:var(--link)}
.step-val{font-size:13px;font-weight:700;color:var(--tekst);min-width:56px;text-align:center}
.step-unit{font-size:13px;color:var(--tekst-gedimd);margin-left:4px;align-self:flex-end;padding-bottom:2px}
.chip-rij{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 16px;border-radius:8px;border:1.5px solid var(--rand);background:var(--wit);font-size:13px;color:var(--tekst-zacht);cursor:pointer;transition:all .15s;font-family:inherit}
.chip:hover{border-color:var(--link-rand)}
.chip.selected{border-color:var(--link);background:var(--link-vlak);color:var(--link);font-weight:500}
.preview{background:var(--wit);border:1px solid var(--rand-licht);border-radius:10px;padding:14px 16px;margin-top:28px}
.preview-label{font-size:10.5px;font-weight:500;color:var(--tekst-licht);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.preview-rij{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.preview-rij:last-child{margin-bottom:0}
.preview-k{font-size:12px;color:var(--tekst-midden)}
.preview-v{font-size:12px;font-weight:500;color:var(--tekst)}
.instelling-genereer-tekst{font-size:12px;color:var(--tekst-midden);line-height:1.5;margin-top:20px;margin-bottom:8px}

/* Planning weeks */
.plan-titel{font-size:19px;font-weight:500;color:var(--tekst);margin-bottom:4px}
.plan-sub{font-size:13px;color:var(--tekst-gedimd);line-height:1.6;margin-bottom:6px}
.methode-note{font-size:11.5px;color:var(--tekst-licht);line-height:1.6;margin-bottom:18px;display:flex;align-items:baseline;gap:6px}
.methode-note-sluit{background:none;border:none;color:var(--tekst-zeer-licht);font-size:13px;line-height:1;cursor:pointer;padding:0;font-family:inherit}
.methode-note-sluit:hover{color:var(--tekst-licht)}
.instellingen-samenvatting{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--wit);border:1px solid var(--rand-licht);border-radius:10px;padding:12px 16px;margin-bottom:20px}
.instellingen-samenvatting-tekst{font-size:12.5px;color:var(--tekst-zacht)}
.instellingen-wijzig{background:none;border:none;font-size:11px;color:var(--link);cursor:pointer;font-family:'Public Sans',sans-serif;padding:0;text-decoration:underline}
.instellingen-wijzig:hover{color:var(--primair)}
.beta-notice{border-left:2px solid var(--rand);padding:2px 0 2px 12px;margin-bottom:20px;display:flex;align-items:flex-start;gap:7px}
.beta-notice-icon{font-size:12px;color:var(--link-licht);flex-shrink:0;margin-top:1px}
.beta-notice-tekst{font-size:11.5px;color:var(--tekst-licht);line-height:1.65}
.kwaliteitskaart-check{border-left:2px solid var(--oker);padding:2px 0 2px 12px;margin-bottom:20px;display:flex;align-items:flex-start;gap:7px}
.kwaliteitskaart-check .beta-notice-icon{color:var(--oker)}
.week{background:var(--wit);border:1px solid var(--rand-licht);border-radius:10px;margin-bottom:10px;overflow:hidden}
.week-top{display:flex;align-items:stretch;cursor:pointer;user-select:none;width:100%;background:none;border:none;text-align:left;font-family:inherit;padding:0}
.week-strip{width:3px;flex-shrink:0;background:var(--link-licht);transition:background .15s}
.week.laatste .week-strip{background:var(--accent)}
.week.open .week-strip{background:var(--link)}
.week.laatste.open .week-strip{background:var(--accent)}
.week-top-inner{flex:1;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;gap:12px}
.week-nr{font-size:13px;font-weight:500;color:var(--tekst)}
.week-doel{font-size:11.5px;color:var(--tekst-gedimd);margin-top:2px}
.week-stap{font-size:11px;color:var(--tekst-gedimd);font-style:italic;margin-top:1px}
.week-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.week-tag{font-size:11px;color:var(--tekst-gedimd)}
.chev{font-size:10px;color:var(--tekst-zeer-licht);transition:transform .2s;display:inline-block}
.week.open .chev{transform:rotate(90deg)}
.week-body{display:none;border-top:1px solid var(--rand-zeer-licht)}
.week.open .week-body{display:block}
.kern-sectie{padding:16px 16px 14px}
.kern-label{font-size:10.5px;font-weight:500;color:var(--tekst-licht);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.kern-veld{margin-bottom:10px}
.kern-veld:last-child{margin-bottom:0}
.kern-veld-label{font-size:11px;color:var(--tekst-gedimd);margin-bottom:3px}
.kern-tekst{width:100%;border:1px solid var(--rand-vlak);border-radius:7px;padding:8px 10px;background:#F7F4EE;resize:none;outline:none;line-height:1.65;overflow:hidden;font-size:13px;color:var(--tekst)}
.kern-tekst:focus{border-color:var(--link);background:var(--wit)}
.week-ai-toggle{width:100%;text-align:left;font-size:11.5px;color:var(--accent-donker);cursor:pointer;display:flex;align-items:center;gap:5px;background:var(--accent-vlak);border:none;border-top:1px solid var(--rand-zeer-licht);padding:8px 16px;font-family:inherit}
.week-ai-toggle .obs-chev{color:var(--accent-donker)}
.groepen-sectie{border-top:1px solid var(--rand-zeer-licht);padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px}
.groep-rij{display:grid;grid-template-columns:8px 88px 1fr;align-items:flex-start;column-gap:10px}
.groep-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.groep-dot.intensief{background:var(--accent)}
.groep-dot.verdiept{background:var(--oker)}
.groep-naam{font-size:11.5px;font-weight:500;padding-top:1px}
.groep-naam.intensief{color:var(--accent-donker)}
.groep-naam.verdiept{color:var(--oker-tekst)}
.groep-tekst{width:100%;border:1px solid var(--rand-vlak);border-radius:6px;padding:7px 10px;background:#F7F4EE;resize:none;outline:none;line-height:1.55;overflow:hidden;font-size:13px;color:var(--tekst)}
.groep-tekst:focus{border-color:var(--link);background:var(--wit)}
.week-footer{border-top:1px solid var(--rand-zeer-licht);padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.obs-toggle{font-size:11.5px;color:var(--tekst-midden);cursor:pointer;display:flex;align-items:center;gap:5px;background:none;border:none;padding:0}
.obs-chev{font-size:9px;color:var(--tekst-zeer-licht);transition:transform .2s;display:inline-block}
.beta-rij{display:flex;align-items:center;gap:8px}
.beta-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:500;color:var(--oker-tekst);background:var(--oker-vlak);border:1px solid var(--oker-rand);border-radius:10px;padding:2px 8px}
.fb-btn{background:none;border:none;font-size:13px;cursor:pointer;padding:2px 4px;border-radius:4px;opacity:.6;transition:opacity .15s}
.fb-btn:hover{opacity:1}
.fb-btn.selected{opacity:1}
.fb-area-wrap{display:none;padding:8px 16px 10px;border-top:1px solid var(--rand-zeer-licht)}
.fb-area-wrap.open{display:block}
.fb-area{width:100%;border:1px solid var(--rand-licht);border-radius:7px;padding:7px 10px;background:#F7F4EE;resize:none;min-height:44px;outline:none;line-height:1.5;overflow:hidden;font-size:13px;color:var(--tekst)}
.fb-area:focus{border-color:var(--link);background:var(--wit)}
.fb-send{margin-top:7px;padding:7px 16px;background:var(--primair);color:var(--papier);border:none;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer}
.obs-body{display:none;padding:8px 16px 14px;border-top:1px solid var(--rand-zeer-licht)}
.obs-body.open{display:block}
.obs-items{margin-bottom:8px}
.obs-item{font-size:12px;color:var(--tekst-zacht);line-height:1.5;padding:3px 0;display:flex;gap:8px}
.obs-item::before{content:'\00b7';color:var(--tekst-zeer-licht);flex-shrink:0}
.obs-area{width:100%;border:1px solid var(--rand-licht);border-radius:7px;padding:7px 10px;background:#F7F4EE;resize:none;min-height:44px;outline:none;line-height:1.5;overflow:hidden;font-size:13px;color:var(--tekst)}
.obs-area:focus{border-color:var(--link);background:var(--wit)}

/* ---------- Planning aanpassen: 2 gelijkwaardige opties ---------- */
.aanpassen-kop{font-size:12.5px;font-weight:500;color:var(--tekst-zacht);margin-bottom:8px}
.aanpassen-opties{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aanpassen-optie{text-align:left;background:var(--wit);border:1.5px solid var(--rand-licht);border-radius:9px;padding:10px 12px;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.aanpassen-optie:hover{border-color:var(--link-rand);background:var(--link-vlak)}
.aanpassen-optie-titel{font-size:12.5px;font-weight:500;color:var(--tekst)}
.aanpassen-optie-sub{font-size:11px;color:var(--tekst-gedimd);margin-top:2px;line-height:1.4}
.aanpassen-optie.primair{border-color:var(--link);background:var(--link-vlak)}
.aanpassen-optie.primair .aanpassen-optie-titel{color:var(--link-gedimd)}
@media (max-width:480px){.aanpassen-opties{grid-template-columns:1fr}}

/* ---------- Bijstellen (week en hele planning) ---------- */
.bijstel-wrap{display:none;padding:12px 16px 14px;border-top:1px solid var(--rand-zeer-licht)}
.bijstel-wrap.open{display:block}
.bijstel-uitleg{font-size:11.5px;color:var(--tekst-gedimd);line-height:1.5;margin-bottom:8px}
.bijstel-area{width:100%;border:1px solid var(--rand-licht);border-radius:7px;padding:8px 10px;background:#F7F4EE;resize:none;min-height:44px;outline:none;line-height:1.5;overflow:hidden;font-size:13px;color:var(--tekst)}
.bijstel-area:focus{border-color:var(--link);background:var(--wit)}
.bijstel-area:disabled{opacity:.6}
.bijstel-verstuur{margin-top:8px;padding:8px 16px;background:var(--accent);color:var(--wit);border:none;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer}
.bijstel-verstuur:disabled{opacity:.4;cursor:default}
.bijstel-fout{font-size:11.5px;color:var(--fout);background:var(--fout-vlak);border:1px solid var(--fout-rand);border-radius:7px;padding:8px 10px;margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bijstel-fout button{background:var(--primair);color:var(--papier);border:none;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:inherit}
.planning-acties{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.pa-btn{flex:1;min-width:140px;padding:10px 12px;border-radius:9px;font-size:12.5px;font-weight:500;cursor:pointer;background:var(--wit);border:1.5px solid var(--link);color:var(--link);transition:background .15s}
.pa-btn:hover{background:var(--link-vlak)}
.pa-btn-primair{background:var(--accent);color:var(--wit);border-color:var(--accent)}
.pa-btn-primair:hover{background:var(--accent-hover)}
@media (max-width:480px){.planning-acties{flex-direction:column}.pa-btn{width:100%}}
.archief-heropen{background:none;border:none;font-size:11px;color:var(--link);cursor:pointer;font-family:'Public Sans',sans-serif;padding:0;text-decoration:underline}
.archief-heropen:hover{color:var(--primair)}
.archief-bekijken{font-size:11px;color:var(--link-licht)}

/* Hub */
.filter-band{background:var(--primair-donker);padding:10px 26px;display:flex;align-items:center;gap:10px}
.filter-label{font-size:11px;color:var(--link-licht);white-space:nowrap}
.filter-select{background:var(--primair);color:var(--papier) !important;border:1px solid var(--link);border-radius:20px;padding:5px 28px 5px 14px;font-size:12px;font-weight:500;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8c2b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .15s}
.filter-select:hover{border-color:var(--link-licht)}
.filter-huidig{font-size:12px;color:var(--papier);font-weight:500}
.filter-wijzig{background:none;border:none;color:var(--link-licht);font-size:11px;cursor:pointer;font-family:'Public Sans',sans-serif;text-decoration:underline;padding:0}
.filter-wijzig:hover{color:var(--papier)}
.filter-done{background:none;border:1px solid var(--link);color:var(--papier) !important;font-size:11px;cursor:pointer;font-family:'Public Sans',sans-serif;padding:4px 12px;border-radius:14px;margin-left:2px}
.filter-done:hover{border-color:var(--link-licht)}
.jaar-titel{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:500;color:var(--tekst);margin-bottom:14px}
.jaar-aantal{font-size:12px;font-weight:400;color:var(--tekst-gedimd)}
.lj-sectie{margin-bottom:4px}
.lj-sectie-kop{font-size:10px;font-weight:600;color:var(--tekst-uitgegrijsd);text-transform:uppercase;letter-spacing:.04em;padding:0 2px;margin:14px 0 5px}
.lj-sectie:first-child .lj-sectie-kop{margin-top:0}
.lj-sectie-aantal{font-weight:400;color:var(--tekst-gedimd);text-transform:none;letter-spacing:normal}
.col-headers{display:grid;grid-template-columns:2fr 1fr 1.1fr 1fr;padding:0 12px;margin-bottom:6px}
.col-headers span{font-size:10px;color:var(--tekst-uitgegrijsd);text-transform:uppercase;letter-spacing:.04em}
.plan-row{display:grid;grid-template-columns:2fr 1fr 1.1fr 1fr;align-items:center;padding:7px 12px;border-radius:8px;border:0.5px solid var(--rand);background:var(--wit);margin-bottom:3px;cursor:pointer;transition:border-color .15s}
.plan-row:hover{border-color:var(--link-rand)}
.plan-vak{font-size:13px;font-weight:500;color:var(--tekst)}
.plan-thema{font-size:11px;color:var(--tekst-midden);margin-top:2px}
.periode-cel{font-size:11px;color:var(--tekst-midden)}
.fase-cel{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:12px;color:var(--tekst)}
.fase-status-rij{display:flex;align-items:center;gap:6px}
.review-badge{font-size:10px;font-weight:500;color:var(--blauwgrijs);background:var(--blauwgrijs-vlak);border:1px solid var(--blauwgrijs-rand);border-radius:10px;padding:1px 7px}
.fase-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.col-date{font-size:11px;color:var(--tekst-gedimd)}
.empty-state{text-align:center;padding:44px 32px 40px;background:var(--wit);border-radius:10px;border:0.5px solid var(--rand-licht)}
.empty-icon{font-size:32px;margin-bottom:16px;opacity:.4}
.empty-title{font-size:15px;font-weight:500;color:var(--tekst-zacht);margin-bottom:6px}
.empty-sub{font-size:13px;color:var(--tekst-licht);margin-bottom:24px;line-height:1.6}
.btn-nieuw-empty{background:var(--primair);color:var(--papier);border:none;padding:10px 22px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer}
.btn-nieuw-empty:hover{background:var(--primair-hover)}
.demo-toggle{text-align:center;margin-top:12px}
.demo-toggle a{font-size:11px;color:var(--tekst-gedimd);cursor:pointer;text-decoration:underline}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--primair);color:var(--papier);padding:10px 20px;border-radius:8px;font-size:12.5px;box-shadow:0 4px 20px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .25s, transform .25s}
.toast.zichtbaar{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ---------- Word-export voorbeeld ---------- */
.woord-voorbeeld-overlay{position:fixed;inset:0;background:rgba(35,36,32,0.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.woord-voorbeeld-kader{background:var(--wit);border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,0.25);width:min(760px,100%);height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden}
.woord-voorbeeld-balk{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--primair);color:var(--papier);font-size:13px;font-weight:500;flex-shrink:0}
.woord-voorbeeld-knoppen{display:flex;gap:8px}
.woord-voorbeeld-frame{flex:1;border:none;width:100%;background:var(--wit)}

/* ---------- Bijstellen: bekijk-wijzigingen-vergelijking ---------- */
.bijstel-vgl-inhoud{flex:1;overflow-y:auto;padding:20px}
.bijstel-vgl-week{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--rand-licht)}
.bijstel-vgl-kop{font-size:13px;font-weight:500;color:var(--tekst);margin-bottom:10px}
.bijstel-vgl-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bijstel-vgl-oud,.bijstel-vgl-nieuw{font-size:12.5px;line-height:1.55;padding:10px 12px;border-radius:8px}
.bijstel-vgl-oud{background:var(--fout-vlak);color:var(--tekst-zacht)}
.bijstel-vgl-nieuw{background:var(--link-vlak);color:var(--tekst)}
.bijstel-vgl-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tekst-gedimd);margin-bottom:4px}

@media print{
  body{background:var(--wit);padding:0}
  .card{box-shadow:none;max-width:none}
  .topbar,.fasebalk,.back,.planning-acties,.fb-btn,.beta-rij{display:none !important}
}

/* IB/KC-overzicht */
.ib-header{margin-bottom:20px}
.ib-sub{font-size:12.5px;color:var(--tekst-gedimd);line-height:1.6;margin-top:4px}
.ib-col-headers{display:grid;grid-template-columns:1.3fr 1.6fr 1.6fr 1fr;padding:0 12px;margin-bottom:6px;gap:8px}
.ib-col-headers span{font-size:10px;color:var(--tekst-uitgegrijsd);text-transform:uppercase;letter-spacing:.04em}
.ib-rij{display:grid;grid-template-columns:1.3fr 1.6fr 1.6fr 1fr;align-items:center;padding:12px;border-radius:8px;border:0.5px solid var(--rand);background:var(--wit);margin-bottom:6px;gap:8px}
.ib-naam{font-size:13px;font-weight:500;color:var(--tekst)}
.ib-vak{font-size:12px;color:var(--tekst-midden)}
.ib-voortgang{display:flex;flex-direction:column;gap:4px}
.ib-dots{display:flex;gap:3px}
.ib-dot{width:7px;height:7px;border-radius:50%;background:var(--rand-vlak)}
.ib-dot.gevuld{background:var(--link)}
.ib-status{font-size:11px}
.ib-bijgewerkt{font-size:12px;color:var(--tekst-gedimd)}

.plan-del{background:none;border:none;color:var(--tekst-zeer-licht);font-size:16px;line-height:1;cursor:pointer;padding:0 0 0 10px;font-family:inherit;opacity:0;transition:opacity .15s,color .15s}
.plan-row:hover .plan-del,.plan-row:focus-within .plan-del{opacity:1}
.plan-del:hover{color:var(--accent-tekst)}

/* ---------- Beheer ---------- */
.beheer-jaar-select{max-width:200px;margin-bottom:14px}
.beheer-lijst{border:1px solid var(--rand);border-radius:10px;overflow:hidden;margin-bottom:14px;background:var(--wit)}
.beheer-rij{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 16px;border-bottom:1px solid var(--rand-licht)}
.beheer-rij:last-child{border-bottom:none}
.beheer-rij-klas{font-size:14px;font-weight:500;color:var(--tekst);white-space:nowrap}
.beheer-rij-lj{font-size:11px;color:var(--tekst-gedimd);font-weight:400;margin-left:8px}
.beheer-rij-leerkrachten{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.beheer-leeg{font-size:12px;color:var(--tekst-gedimd);font-style:italic;margin-bottom:12px}
.beheer-select{max-width:170px;margin-bottom:0;padding:4px 24px 4px 10px;font-size:11px;border-radius:20px;background-position:right 10px center}
.beheer-leerjaren-label{font-size:11px;color:var(--tekst-gedimd);margin-bottom:8px}

/* ---------- Opslagstatus ---------- */
.opslag-status{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;align-items:center;gap:10px;font-size:12px;font-family:'Public Sans',sans-serif;padding:9px 14px;border-radius:10px;box-shadow:0 2px 14px rgba(0,0,0,0.13);transition:opacity .3s;max-width:340px;line-height:1.45}
.opslag-status.bezig{background:var(--link-vlak);border:1px solid var(--link-rand);color:var(--link)}
.opslag-status.ok{background:var(--succes-vlak);border:1px solid var(--succes-rand);color:var(--succes-tekst)}
.opslag-status.fout,.opslag-status.conflict{background:var(--fout-vlak);border:1px solid var(--fout-rand);color:var(--fout)}
.opslag-status.verborgen{opacity:0;pointer-events:none}
.opslag-status .opslag-detail{color:var(--tekst-midden);font-style:italic}
.opslag-status button{background:var(--primair);color:var(--papier);border:none;padding:5px 10px;border-radius:7px;font-size:11px;font-family:'Public Sans',sans-serif;cursor:pointer;white-space:nowrap;flex-shrink:0}

/* ---------- Inloggen ---------- */
.auth-input{width:100%;border:1px solid var(--rand);border-radius:8px;padding:10px 12px;font-size:13px;font-family:'Public Sans',sans-serif;color:var(--tekst);background:var(--wit);outline:none;margin-bottom:12px;transition:border-color .15s;box-sizing:border-box}
.auth-input:focus{border-color:var(--link)}
.auth-melding{font-size:12px;border-radius:8px;padding:9px 12px;margin-bottom:12px;line-height:1.55}
.auth-melding.fout{background:var(--fout-vlak);border:1px solid var(--fout-rand);color:var(--fout)}
.auth-melding.ok{background:var(--succes-vlak);border:1px solid var(--succes-rand);color:var(--succes-tekst)}
.auth-switch{font-size:12px;color:var(--tekst-gedimd);margin-top:16px;text-align:center}
.auth-switch button{background:none;border:none;color:var(--link);font-size:12px;font-family:'Public Sans',sans-serif;cursor:pointer;text-decoration:underline;padding:0}
.topbar-rechts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.auth-naam{font-size:11px;color:var(--accent);white-space:nowrap}
.btn-uitloggen{background:none;color:var(--papier);border:1px solid var(--link-gedimd);padding:6px 12px;border-radius:8px;font-size:11px;font-family:'Public Sans',sans-serif;cursor:pointer}
.btn-uitloggen:hover{background:var(--primair-hover)}

/* ---------- Niet-opgeslagen werk terugvinden ---------- */
.vangnet-melding{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:210;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;background:var(--oker-vlak);border:1px solid var(--oker-rand);color:var(--oker-tekst);font-size:12px;font-family:'Public Sans',sans-serif;padding:11px 16px;border-radius:10px;box-shadow:0 2px 16px rgba(0,0,0,0.15);max-width:min(560px,92vw);line-height:1.45}
.vangnet-melding button{background:var(--primair);color:var(--papier);border:none;padding:6px 12px;border-radius:7px;font-size:11px;font-family:'Public Sans',sans-serif;cursor:pointer;white-space:nowrap}
.vangnet-melding button.secundair{background:none;color:var(--oker-tekst);border:1px solid var(--oker-rand)}

/* ---------- Akkoord bij registratie ---------- */
.akkoord{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--tekst-zacht);line-height:1.5;margin:2px 0 14px;cursor:pointer}
.akkoord input{margin-top:2px;flex-shrink:0;width:15px;height:15px;accent-color:var(--primair);cursor:pointer}
.akkoord a{color:var(--link)}

/* ---------- Documentpagina's (voorwaarden, privacyverklaring) ---------- */
.doc p{font-size:13px;color:var(--tekst-zacht);line-height:1.65;margin-bottom:14px}
.doc ul{margin:0 0 14px 18px}
.doc li{font-size:13px;color:var(--tekst-zacht);line-height:1.65;margin-bottom:7px}
.doc .sec-label{margin-top:22px}
.doc a{color:var(--link)}
.doc-concept{background:var(--oker-vlak);border:1px solid var(--oker-rand);color:var(--oker-tekst);border-radius:10px;padding:13px 16px;font-size:12.5px;line-height:1.6;margin-bottom:24px}
.doc-versie{display:block;margin-top:7px;font-size:11px;color:var(--tekst-licht)}
.doc-terug{margin-top:28px;padding-top:18px;border-top:.5px solid var(--rand)}