:root{
  --ink:#20211F; --ink-soft:#33342F;
  --gray-700:#5E5D56; --gray-500:#8B8A81; --gray-300:#CFCCC1; --gray-200:#E7E3D8; --gray-100:#F1EEE5;
  --cream:#FBF8F2; --surface:#FFFFFF;

  --petrol:#1B3A45; --petrol-700:#26505E; --petrol-tint:#E7EDEE;
  --terracotta:#C1652C; --terracotta-tint:#F7E7D9;

  --veerkracht:#3F8F4F; --veerkracht-tint:#E6F1E7;
  --overzicht:#C1652C;  --overzicht-tint:#F7E7D9;
  --stabiliteit:#2E6FA3; --stabiliteit-tint:#E4EDF3;

  --good:#2F8C4A; --good-tint:#E6F3E9;
  --warning:#C98500; --warning-tint:#FBF0DA;
  --serious:#C1652C; --serious-tint:#F7E7D9;
  --critical:#C1392B; --critical-tint:#FAE5E2;

  --r-lg:16px; --r-md:11px; --r-sm:7px; --r-pill:999px;
  --shadow:0 1px 2px rgba(27,58,69,.06), 0 1px 0 rgba(27,58,69,.04);
  --shadow-lift:0 10px 28px rgba(27,58,69,.12), 0 2px 6px rgba(27,58,69,.07);

  --f-head:'Oswald',sans-serif; --f-body:'Jost',sans-serif; --f-serif:'Cormorant Garamond',serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--f-body);color:var(--ink-soft);background:var(--cream);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
svg{display:block;}
.hidden{display:none !important;}
.tabular{font-variant-numeric:tabular-nums;}
.icn{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0;}
.icn.sm{width:13px;height:13px;}
.icn.lg{width:22px;height:22px;}

/* ===== typographic building blocks ===== */
.eyebrow{font-family:var(--f-body);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500);}
.h-page{font-family:var(--f-head);font-weight:300;font-size:25px;letter-spacing:.02em;color:var(--ink);margin:1px 0 0;}
.h-section{font-family:var(--f-head);font-weight:400;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--petrol);margin:0;}
.h-card{font-family:var(--f-body);font-weight:600;font-size:13px;color:var(--ink);margin:0;}
.lede{color:var(--gray-700);font-size:13px;margin:2px 0 0;}
.hr{height:1px;background:var(--gray-200);border:0;margin:14px 0;}

/* ===== layout shell ===== */
#app{min-height:100vh;display:flex;}
.sidebar{width:224px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--gray-200);
  display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 6px 16px;}
.brand-mark{width:52px;height:52px;border:1px solid var(--gray-300);border-radius:999px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;color:var(--petrol);}
.brand-word{font-family:var(--f-serif);font-weight:600;font-size:19px;letter-spacing:.34em;color:var(--petrol);line-height:1;}
.brand-sub{font-family:var(--f-head);font-weight:400;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-500);margin-top:3px;}
.brand-tri{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-300);margin-top:4px;}

.nav{display:flex;flex-direction:column;gap:1px;margin-top:4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);color:var(--gray-700);
  font-size:13px;font-weight:500;border:0;background:transparent;text-align:left;width:100%;}
.nav-item .icn{color:var(--gray-500);}
.nav-item:hover{background:var(--gray-100);color:var(--ink);}
.nav-item.active{background:var(--petrol-tint);color:var(--petrol);font-weight:600;}
.nav-item.active .icn{color:var(--petrol);}
.nav-sep{height:1px;background:var(--gray-200);margin:10px 4px;}
.nav-spacer{flex:1;}
.user-card{display:flex;align-items:center;gap:9px;padding:10px 8px;border-top:1px solid var(--gray-200);margin-top:8px;}
.avatar{width:32px;height:32px;border-radius:999px;background:var(--petrol);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-size:11.5px;font-weight:500;flex-shrink:0;}
.user-meta{flex:1;min-width:0;}
.user-name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-size:11px;color:var(--gray-500);}
.logout-btn{border:0;background:transparent;color:var(--gray-500);padding:4px;border-radius:var(--r-sm);}
.logout-btn:hover{color:var(--critical);background:var(--critical-tint);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:60px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20;}
.topbar-title{flex:1;min-width:0;}
.topbar-title .h-page{font-size:19px;}
.topbar-title .lede{font-size:12px;margin-top:0;}
.datepick{display:flex;align-items:center;gap:7px;border:1px solid var(--gray-200);border-radius:var(--r-pill);padding:7px 13px;font-size:12.5px;color:var(--ink-soft);background:var(--surface);}
.bell{position:relative;color:var(--gray-700);border:0;background:transparent;padding:6px;border-radius:var(--r-sm);}
.bell:hover{background:var(--gray-100);}
.bell .dot{position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:999px;background:var(--terracotta);color:#fff;font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.crumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-500);}
.crumb b{color:var(--ink);font-weight:600;}
.view{padding:22px 26px 60px;max-width:1360px;}

/* ===== cards / grid ===== */
.grid{display:grid;gap:14px;}
.g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:1fr 1fr 1fr;} .g4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow);}
.card-soft{background:var(--gray-100);border-radius:var(--r-md);padding:10px 12px;}
.card-head{display:flex;align-items:center;justify-content:between;gap:8px;margin-bottom:11px;}
.card-head .h-card, .card-head .h-section{flex:1;}
.linklike{font-size:11.5px;font-weight:600;color:var(--petrol);border:0;background:transparent;padding:0;display:flex;align-items:center;gap:4px;}
.linklike:hover{color:var(--terracotta);}

/* stat tiles */
.stat{display:flex;flex-direction:column;gap:2px;}
.stat-icn{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--petrol-tint);color:var(--petrol);margin-bottom:6px;}
.stat-num{font-family:var(--f-serif);font-weight:700;font-size:26px;color:var(--ink);line-height:1;}
.stat-lbl{font-size:11.5px;color:var(--gray-500);margin-top:2px;}

.kpi-row{display:flex;align-items:baseline;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--gray-100);}
.kpi-row:last-child{border-bottom:0;}
.kpi-name{font-size:12.5px;color:var(--gray-700);}
.kpi-val{font-family:var(--f-serif);font-weight:700;font-size:16px;color:var(--ink);}
.kpi-val.good{color:var(--good);}

/* list rows */
.rowline{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--gray-100);}
.rowline:last-child{border-bottom:0;}
.rowline .icn{margin-top:2px;}
.rowtime{font-size:11px;color:var(--gray-500);width:40px;flex-shrink:0;font-weight:600;}
.rowmain{flex:1;min-width:0;}
.rowtitle{font-size:12.5px;font-weight:600;color:var(--ink);}
.rowsub{font-size:11.5px;color:var(--gray-500);margin-top:1px;}
.chk{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--gray-300);flex-shrink:0;margin-top:2px;}
.chk.done{background:var(--good);border-color:var(--good);position:relative;}

/* badges / pills */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:var(--r-pill);}
.badge.good{background:var(--good-tint);color:var(--good);}
.badge.warning{background:var(--warning-tint);color:var(--warning);}
.badge.serious{background:var(--serious-tint);color:var(--serious);}
.badge.critical{background:var(--critical-tint);color:var(--critical);}
.badge.petrol{background:var(--petrol-tint);color:var(--petrol);}
.klasse{width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:var(--f-serif);font-weight:700;font-size:17px;color:#fff;flex-shrink:0;}
.klasse.A{background:var(--good);} .klasse.B{background:var(--petrol);} .klasse.C{background:var(--warning);} .klasse.D{background:var(--critical);}

/* buttons */
.btn{appearance:none;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:9px 17px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.btn:hover{background:var(--petrol-700);border-color:var(--petrol-700);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--gray-300);}
.btn.ghost:hover{background:var(--gray-100);}
.btn.petrol{background:var(--petrol);border-color:var(--petrol);}
.btn.terracotta{background:var(--terracotta);border-color:var(--terracotta);}
.btn.sm{padding:6px 13px;font-size:11.5px;}
.btn.danger{background:transparent;border-color:var(--critical);color:var(--critical);}
.btn.danger:hover{background:var(--critical-tint);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* table */
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
table.tbl th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);
  font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--gray-200);}
table.tbl td{padding:11px 10px;border-bottom:1px solid var(--gray-100);vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:0;}
table.tbl tr.clickable{cursor:pointer;}
table.tbl tr.clickable:hover{background:var(--gray-100);}
.cellname{font-weight:600;color:var(--ink);}
.cellsub{font-size:11px;color:var(--gray-500);}

/* pillar dot */
.pdot{width:8px;height:8px;border-radius:999px;display:inline-block;flex-shrink:0;}
.pdot.v{background:var(--veerkracht);} .pdot.o{background:var(--overzicht);} .pdot.s{background:var(--stabiliteit);}

/* progress bar */
.pbar-track{height:6px;border-radius:999px;background:var(--gray-200);overflow:hidden;}
.pbar-fill{height:100%;border-radius:999px;}

/* score mini row */
.scoremini{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:4px 0;}
.scoremini .lbl{display:flex;align-items:center;gap:6px;color:var(--gray-700);}
.scoremini .val{font-weight:700;color:var(--ink);}

/* traject stepper */
.stepper{display:flex;align-items:center;gap:0;margin:12px 0;}
.step-c{width:26px;height:26px;border-radius:999px;background:var(--gray-200);color:var(--gray-500);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0;}
.step-c.done{background:var(--petrol);color:#fff;}
.step-c.now{background:var(--terracotta);color:#fff;}
.step-line{flex:1;height:2px;background:var(--gray-200);}
.step-line.done{background:var(--petrol);}

/* signalering row */
.sig{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--gray-100);}
.sig:last-child{border-bottom:0;}
.sig-ic{width:24px;height:24px;border-radius:999px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sig-ic.critical{background:var(--critical-tint);color:var(--critical);}
.sig-ic.warning{background:var(--warning-tint);color:var(--warning);}
.sig-ic.good{background:var(--good-tint);color:var(--good);}
.sig-title{font-size:12px;font-weight:600;color:var(--ink);}
.sig-sub{font-size:11.5px;color:var(--gray-500);margin-top:1px;}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--petrol);
  background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.05), transparent 45%);padding:20px;}
.login-card{width:100%;max-width:400px;background:var(--surface);border-radius:var(--r-lg);padding:34px 32px;box-shadow:var(--shadow-lift);}
.login-tabs{display:flex;border:1px solid var(--gray-200);border-radius:var(--r-pill);padding:3px;margin-bottom:20px;}
.login-tab{flex:1;text-align:center;padding:8px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--gray-500);border:0;background:transparent;}
.login-tab.active{background:var(--petrol);color:#fff;}
.field{margin-bottom:13px;}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500);margin-bottom:5px;}
.field input{width:100%;border:1px solid var(--gray-300);border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--surface);}
.field input:focus{outline:2px solid var(--petrol-tint);border-color:var(--petrol);}
.hint{font-size:11px;color:var(--gray-500);margin-top:8px;line-height:1.5;}
.demo-btn{width:100%;text-align:left;border:1px dashed var(--gray-300);background:var(--gray-100);border-radius:var(--r-sm);
  padding:9px 11px;font-size:12px;color:var(--gray-700);margin-top:6px;}
.demo-btn b{color:var(--ink);}
.demo-btn:hover{border-color:var(--petrol);}

/* modal */
.modal-veil{position:fixed;inset:0;background:rgba(27,29,26,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal{width:100%;max-width:440px;background:var(--surface);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--shadow-lift);}
.modal-close{position:absolute;}

/* scan */
.pillar-block{border:1px solid var(--gray-200);border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px;}
.pillar-block-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.pillar-name{font-family:var(--f-head);font-weight:500;font-size:13.5px;letter-spacing:.03em;text-transform:uppercase;}
.stelling-row{display:grid;grid-template-columns:1fr 200px 34px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--gray-100);}
.stelling-row:last-child{border-bottom:0;}
.stelling-txt{font-size:13px;color:var(--ink-soft);}
.stelling-txt small{display:block;color:var(--gray-500);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;font-weight:600;}
input[type=range]{width:100%;accent-color:var(--petrol);}
.stelling-val{font-family:var(--f-serif);font-weight:700;font-size:16px;color:var(--ink);text-align:right;}

/* misc */
.divider-v{width:1px;background:var(--gray-200);align-self:stretch;}
.flex{display:flex;} .items-center{align-items:center;} .gap-8{gap:8px;} .gap-12{gap:12px;} .justify-between{justify-content:space-between;}
.mt-0{margin-top:0;} .muted{color:var(--gray-500);}
.footer-note{font-size:11px;color:var(--gray-500);text-align:center;padding:24px 0 8px;}
@media (max-width: 980px){ .g4{grid-template-columns:1fr 1fr;} .g3,.g2{grid-template-columns:1fr;} .sidebar{display:none;} }

/* ===== aanvullingen voor de werkende applicatie ===== */
.toast{position:fixed;right:18px;bottom:18px;background:var(--ink);color:#fff;padding:11px 16px;border-radius:var(--r-md);
  font-size:12.5px;box-shadow:var(--shadow-lift);z-index:200;opacity:0;transform:translateY(8px);transition:.18s;}
.toast.zien{opacity:1;transform:none;}
.toast.fout{background:var(--critical);}
.laden{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--gray-500);font-size:13px;}
.spin{width:18px;height:18px;border:2px solid var(--gray-200);border-top-color:var(--petrol);border-radius:999px;
  animation:draai .7s linear infinite;margin-right:10px;}
@keyframes draai{to{transform:rotate(360deg)}}
.veld-inline{display:flex;gap:8px;align-items:center;}
select,textarea,input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],input[type=tel]{
  font-family:inherit;font-size:13px;color:var(--ink);border:1px solid var(--gray-300);border-radius:var(--r-sm);
  padding:8px 10px;background:var(--surface);width:100%;}
textarea{resize:vertical;min-height:70px;line-height:1.5;}
select:focus,textarea:focus,input:focus{outline:2px solid var(--petrol-tint);border-color:var(--petrol);}
label.klein{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gray-500);margin-bottom:5px;}
.vraag{padding:12px 0;border-bottom:1px solid var(--gray-100);}
.vraag:last-child{border-bottom:0;}
.vraag-kop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:7px;}
.vraag-tekst{font-size:13.5px;color:var(--ink);font-weight:500;}
.vraag-hint{font-size:11.5px;color:var(--gray-500);margin-top:2px;}
.letterbal{width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-serif);font-weight:700;font-size:13px;color:#fff;flex-shrink:0;}
.letterbal.A{background:var(--good);} .letterbal.B{background:var(--petrol);}
.letterbal.C{background:var(--warning);} .letterbal.D{background:var(--critical);}
.letterbal.leeg{background:var(--gray-200);color:var(--gray-500);}
.keuzerij{display:flex;flex-wrap:wrap;gap:6px;}
.keuze{border:1px solid var(--gray-300);background:var(--surface);border-radius:var(--r-pill);padding:6px 12px;
  font-size:12px;color:var(--gray-700);}
.keuze:hover{border-color:var(--petrol);}
.keuze.aan{background:var(--petrol);border-color:var(--petrol);color:#fff;font-weight:600;}
.keuze.aan.A{background:var(--good);border-color:var(--good);}
.keuze.aan.B{background:var(--petrol);border-color:var(--petrol);}
.keuze.aan.C{background:var(--warning);border-color:var(--warning);}
.keuze.aan.D{background:var(--critical);border-color:var(--critical);}
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--gray-200);margin-bottom:16px;flex-wrap:wrap;}
.tabknop{border:0;background:transparent;padding:9px 13px;font-size:12.5px;font-weight:600;color:var(--gray-500);
  border-bottom:2px solid transparent;margin-bottom:-1px;}
.tabknop.actief{color:var(--petrol);border-bottom-color:var(--petrol);}
.tabknop:hover{color:var(--ink);}
.bedrag{text-align:right;font-variant-numeric:tabular-nums;}
table.tbl td.bedrag input{text-align:right;}
.neg{color:var(--critical);} .pos{color:var(--good);}
.zoek{display:flex;align-items:center;gap:8px;border:1px solid var(--gray-200);border-radius:var(--r-pill);
  padding:6px 13px;background:var(--surface);min-width:220px;}
.zoek input{border:0;padding:0;font-size:12.5px;background:transparent;}
.zoek input:focus{outline:0;}
.leeg{padding:26px;text-align:center;color:var(--gray-500);font-size:12.5px;}
.klik{cursor:pointer;}
.rij-actie{display:flex;gap:6px;align-items:center;}
.modal{max-height:88vh;overflow:auto;}
.modal.breed{max-width:720px;}
.print-only{display:none;}
@media print{
  .sidebar,.topbar,.btn,.linklike,.tabbar{display:none !important;}
  .view{padding:0;max-width:none;}
  .card{break-inside:avoid;box-shadow:none;}
  .print-only{display:block;}
}

/* ===== auteursrecht en versievermelding ===== */
.app-voet{padding:16px 26px 26px;font-size:11px;color:var(--gray-500);border-top:1px solid var(--gray-200);
  margin-top:8px;}
.print-voet{display:none;}
@media print{
  .app-voet{display:none;}
  .print-voet{display:block;position:fixed;bottom:0;left:0;right:0;
    font-size:9pt;color:#333;border-top:1px solid #bbb;padding:6px 10px;background:#fff;}
  .print-voet div{line-height:1.4;}
  @page{margin:14mm 12mm 22mm;}
  body{background:#fff;}
}