/* DPK dashboard: light theme, brand purple, calm and readable in ten seconds. */
:root{
  --paars:#32183D; --paars-2:#482a54; --lila:#BF9AC3; --lila-licht:#EEE5F0; --achtergrond:#F7F5F9;
  --kaart:#FFFFFF; --tekst:#1F1424; --tekst-2:#6B5F70; --lijn:#E6E0EA;
  --groen:#108474; --groen-licht:#E3F3F0; --oranje:#D98A00; --oranje-licht:#FFF3DC; --rood:#C62828; --rood-licht:#FDE7E7;
  --grijs:#7B7B7B; --grijs-licht:#F0EEF2; --blauw:#2F6DB5;
  --radius:14px; --schaduw:0 1px 2px rgba(50,24,61,.06),0 4px 16px rgba(50,24,61,.06);
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--achtergrond);color:var(--tekst);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--paars)}
h1{font-size:1.35rem;margin:0 0 .25rem;font-weight:650;letter-spacing:-.01em}
h2{font-size:1.02rem;margin:0 0 .75rem;font-weight:650;color:var(--paars)}
h3{font-size:.9rem;margin:0 0 .5rem;font-weight:600;color:var(--tekst-2);text-transform:uppercase;letter-spacing:.04em}
.sub{color:var(--tekst-2);font-size:.9rem;margin:0}
/* top bar */
.top{background:var(--paars);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.top .in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.55rem 1rem}
.merk{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.merk .bol{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--lila),#fff)}
.nav{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;flex:1}
.nav::-webkit-scrollbar{display:none}
.nav a{color:#E9DFEC;text-decoration:none;padding:.4rem .7rem;border-radius:8px;font-size:.92rem;white-space:nowrap}
.nav a.actief{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.top .tijd{font-size:.8rem;color:#D9CCDE;white-space:nowrap}
.top .uit{color:#D9CCDE;font-size:.8rem;text-decoration:none}
/* layout */
.wrap{max-width:1280px;margin:0 auto;padding:1.1rem 1rem 3rem}
.kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.grid{display:grid;gap:.9rem}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g4,.g3,.g2{grid-template-columns:1fr}html{font-size:15px}}
.kaart{background:var(--kaart);border-radius:var(--radius);box-shadow:var(--schaduw);padding:1rem 1.1rem;min-width:0;position:relative}
.kaart.strak{padding:.9rem 1rem}
.kaart .label{font-size:.78rem;color:var(--tekst-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600;display:flex;justify-content:space-between;gap:.5rem}
.kaart .waarde{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin:.2rem 0 .1rem;line-height:1.15;color:var(--paars)}
.kaart .waarde small{font-size:.95rem;font-weight:500;color:var(--tekst-2)}
.kaart .regel{font-size:.84rem;color:var(--tekst-2);margin:.1rem 0}
.kaart .regel b{color:var(--tekst)}
.stip{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}
.stip.groen{background:var(--groen)}.stip.oranje{background:var(--oranje)}.stip.rood{background:var(--rood)}.stip.grijs{background:var(--grijs)}
.delta{font-size:.84rem;font-weight:600;padding:.05rem .45rem;border-radius:999px;white-space:nowrap}
.delta.up{background:var(--groen-licht);color:var(--groen)}
.delta.down{background:var(--rood-licht);color:var(--rood)}
.delta.flat{background:var(--grijs-licht);color:var(--grijs)}
.rand-groen{border-left:4px solid var(--groen)}.rand-oranje{border-left:4px solid var(--oranje)}.rand-rood{border-left:4px solid var(--rood)}.rand-grijs{border-left:4px solid var(--lijn)}
/* progress */
.balk{height:8px;background:var(--grijs-licht);border-radius:999px;overflow:hidden;margin:.45rem 0 .25rem;position:relative}
.balk > span{display:block;height:100%;border-radius:999px;background:var(--paars)}
.balk > i{position:absolute;top:-3px;width:2px;height:14px;background:var(--oranje)}
.balk.groen > span{background:var(--groen)}.balk.oranje > span{background:var(--oranje)}.balk.rood > span{background:var(--rood)}
/* charts */
.chart{width:100%;height:260px}
.chart.klein{height:200px}
.chart.hoog{height:320px}
/* tables */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-weight:600;color:var(--tekst-2);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;padding:.45rem .5rem;border-bottom:1px solid var(--lijn);white-space:nowrap}
td{padding:.45rem .5rem;border-bottom:1px solid var(--lijn);vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.trunc{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabel-scroll{overflow-x:auto}
.tag{display:inline-block;font-size:.72rem;padding:.08rem .45rem;border-radius:6px;background:var(--lila-licht);color:var(--paars);font-weight:600;margin-right:.25rem}
.tag.win{background:var(--groen-licht);color:var(--groen)}.tag.alarm{background:var(--rood-licht);color:var(--rood)}.tag.hoog{background:var(--rood-licht);color:var(--rood)}.tag.laag{background:var(--grijs-licht);color:var(--grijs)}
/* signals */
.signaal{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .2rem;border-bottom:1px solid var(--lijn);font-size:.9rem}
.signaal:last-child{border-bottom:0}
.signaal form{margin-left:auto}
.leeg{color:var(--tekst-2);font-size:.9rem;padding:.4rem 0}
/* forms & buttons */
button,.knop{font:inherit;font-size:.86rem;padding:.42rem .85rem;border-radius:9px;border:1px solid var(--lijn);background:#fff;color:var(--paars);cursor:pointer;text-decoration:none;display:inline-block}
button.primair,.knop.primair{background:var(--paars);color:#fff;border-color:var(--paars)}
button.klein,.knop.klein{padding:.2rem .55rem;font-size:.78rem}
button.gevaar{color:var(--rood)}
input,select,textarea{font:inherit;font-size:.9rem;padding:.42rem .55rem;border:1px solid var(--lijn);border-radius:9px;background:#fff;color:var(--tekst);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lila);border-color:var(--lila)}
label{font-size:.8rem;color:var(--tekst-2);font-weight:600;display:block;margin-bottom:.2rem}
.veld{margin-bottom:.7rem}
.rij{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.rij > *{flex:1;min-width:140px}
.rij > .vast{flex:0 0 auto;min-width:0}
/* period picker */
.periode{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.periode a{font-size:.84rem;padding:.3rem .7rem;border-radius:999px;background:#fff;border:1px solid var(--lijn);color:var(--paars);text-decoration:none}
.periode a.actief{background:var(--paars);color:#fff;border-color:var(--paars)}
.periode form{display:flex;gap:.3rem;align-items:center}
.periode input[type=date]{width:auto;padding:.25rem .4rem;font-size:.82rem}
/* bronnen */
.bronnen{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.8rem;color:var(--tekst-2)}
.bronnen b{color:var(--tekst)}
/* kanban */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
@media(max-width:1000px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.kanban{grid-template-columns:1fr}}
.kolom{background:var(--grijs-licht);border-radius:var(--radius);padding:.7rem;min-height:200px}
.kolom h3{display:flex;justify-content:space-between}
.kolom .lijst{min-height:120px}
.taak{background:#fff;border-radius:10px;padding:.6rem .7rem;margin-bottom:.55rem;box-shadow:var(--schaduw);cursor:grab;font-size:.88rem}
.taak .t{font-weight:600;color:var(--paars)}
.taak .m{font-size:.76rem;color:var(--tekst-2);margin-top:.2rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.taak .acties{display:flex;gap:.3rem;margin-top:.4rem;flex-wrap:wrap}
.taak .acties form{display:inline}
.taak.klaar .t{text-decoration:line-through;color:var(--tekst-2)}
.ster{color:var(--oranje)}
/* misc */
.melding{background:var(--lila-licht);border-radius:10px;padding:.6rem .9rem;margin-bottom:1rem;font-size:.9rem}
.melding.fout{background:var(--rood-licht);color:var(--rood)}
.demo{background:var(--oranje);color:#fff;text-align:center;font-weight:600;padding:.35rem}
.voet{font-size:.78rem;color:var(--tekst-2);margin-top:.6rem}
.sectie{margin-top:1.1rem}
.inline-form{display:inline}
details summary{cursor:pointer;color:var(--paars);font-weight:600;font-size:.9rem}
.login{max-width:380px;margin:12vh auto;padding:0 1rem}
.login .kaart{padding:1.6rem}
.login h1{margin-bottom:1rem}
.nietgekoppeld{text-align:center;padding:3rem 1rem;color:var(--tekst-2)}
.nietgekoppeld .groot{font-size:1.3rem;color:var(--paars);font-weight:650;margin-bottom:.5rem}
.kleur-groen{color:var(--groen)}.kleur-oranje{color:var(--oranje)}.kleur-rood{color:var(--rood)}.kleur-grijs{color:var(--grijs)}
.mini{font-size:.78rem;color:var(--tekst-2)}