/* ==========================================================================
   KSB Planning — Intake-formulier (sessie 1.2)
   Design-tokens exact overgenomen uit docs/KSB_STYLEGIDS.html.
   Donker industrieel, rechte hoeken, Archivo Black / Archivo / JetBrains Mono.
   ========================================================================== */

:root{
  /* ACHTERGRONDEN */
  --bg:#14181c;
  --bg-panel:#1c2127;
  --bg-raised:#232931;
  --bg-deep:#0c0f12;
  /* LIJNEN */
  --line:#333a42;
  --line-soft:#2a3038;
  /* TEKST */
  --text:#f2f1ea;
  --dim:#8b929b;
  --faint:#5a6168;
  /* SEMANTISCHE KLEUREN */
  --rood:#c0392b;
  --rood-br:#e74c3c;
  --oranje:#e07b1f;
  --blauw:#2e6f9e;
  --groen:#4a9c6d;
  --geel:#d4a72c;
  --paars:#9b59b6;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Archivo',sans-serif;
  line-height:1.5;
  padding:0 0 60px;
}
.mono{font-family:'JetBrains Mono',monospace;}
.hidden{display:none !important;}

/* ---- Header ---- */
.head{background:var(--bg-deep);border-bottom:3px solid var(--rood);padding:28px 40px;}
.head h1{font-family:'Archivo Black',sans-serif;font-size:26px;letter-spacing:0.5px;}
.head h1 span{color:var(--oranje);}
.head p{color:var(--dim);font-size:14px;margin-top:8px;max-width:640px;}

/* ---- Navigatie ---- */
.nav{display:flex;flex-wrap:wrap;gap:2px;background:var(--bg-deep);padding:0 40px;border-bottom:1px solid var(--line);}
.nav a{
  display:inline-block;padding:12px 18px;color:var(--dim);text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:0.3px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--text);}
.nav a.actief{color:var(--oranje);border-bottom-color:var(--oranje);}

/* ---- Layout ---- */
.wrap{max-width:620px;margin:0 auto;padding:32px 20px 0;}

/* ---- Panelen ---- */
.panel{background:var(--bg-panel);border:1px solid var(--line);padding:24px;margin-bottom:20px;}
.panel-num{font-family:'JetBrains Mono',monospace;color:var(--oranje);font-size:12px;font-weight:700;letter-spacing:2px;}
.panel h2{font-family:'Archivo Black',sans-serif;font-size:20px;margin:6px 0 20px;}
.panel-success{border:2px solid var(--groen);}
.panel-num-success{color:var(--groen);}

/* ---- Formulier ---- */
.fg{margin-bottom:20px;}
.fl{display:block;font-size:12px;color:var(--dim);font-weight:600;margin-bottom:8px;letter-spacing:0.3px;}
.fl .hint{color:var(--faint);font-weight:400;}

.inp{
  background:var(--bg-panel);
  border:1px solid var(--line);
  color:var(--text);
  padding:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  width:200px;
  min-height:46px;
}
.inp-wide{width:100%;}
.inp:focus{outline:none;border-color:var(--oranje);}
.inp::placeholder{color:var(--faint);}
/* datumkiezer-icoon leesbaar op donkere achtergrond */
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(0.7);cursor:pointer;}

/* segmented keuzeknoppen */
.opt-row{display:flex;flex-wrap:wrap;gap:10px;}
.opt{
  background:var(--bg-panel);
  border:2px solid var(--line);
  color:var(--text);
  padding:12px 22px;
  font-family:'Archivo',sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  min-height:46px;
}
.opt:hover{border-color:var(--dim);}
.opt.sel{border-color:var(--oranje);background:rgba(224,123,31,0.1);color:var(--text);}

/* ---- Knoppen ---- */
.btn{
  border:none;
  padding:0 22px;
  min-height:52px;
  font-family:'Archivo',sans-serif;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}
.btn-primary{background:var(--oranje);color:#1a1a1a;width:100%;}
.btn-primary:hover{background:#f08a2c;}
.btn-primary:disabled{background:var(--faint);color:var(--bg);cursor:wait;}
.btn-success{background:var(--groen);color:#fff;width:100%;min-height:48px;}
.btn-success:hover{background:#57ad7c;}
.btn-neutral{background:var(--bg-raised);color:var(--text);border:1px solid var(--line);}
.btn-neutral:hover{border-color:var(--dim);}

/* ---- Samenvatting (loodstotalen) ---- */
.calc{background:var(--bg-deep);border:1px solid var(--line-soft);padding:14px 16px;margin-bottom:20px;}
.crow{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:13px;color:var(--dim);}
.crow .v{font-family:'JetBrains Mono',monospace;color:var(--text);font-weight:500;}

/* ---- Datum-opties ---- */
.dateopts{display:flex;flex-direction:column;gap:12px;}
.dateopt{
  background:var(--bg-raised);
  border:2px solid var(--line);
  padding:16px;
}
.dateopt.sel{border-color:var(--groen);}
.dateopt-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.dateopt .d{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--text);}
.dateopt .l{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;}
.dateopt-meta{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 14px;}
.metaitem{font-size:12px;color:var(--dim);}
.metaitem b{display:block;font-family:'JetBrains Mono',monospace;color:var(--text);font-size:15px;font-weight:500;margin-top:2px;}

/* ---- Bevestiging ---- */
.confirm-grid{display:flex;flex-direction:column;gap:14px;margin-bottom:22px;}
.confirm-row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-soft);padding-bottom:12px;gap:12px;}
.confirm-row .k{font-size:13px;color:var(--dim);}
.confirm-row .v{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:500;color:var(--text);text-align:right;}
.confirm-row .v.groot{font-size:22px;font-weight:700;color:var(--groen);}

/* ---- Notitie-blokken ---- */
.note{padding:14px 18px;font-size:13px;border-left:3px solid;margin-bottom:20px;}
.note-warn{background:rgba(212,167,44,0.1);border-color:var(--geel);color:#e8c969;}
.note-crit{background:rgba(192,57,43,0.12);border-color:var(--rood);color:#ffb3a8;}

@media (max-width:640px){
  .head{padding:22px 20px;}
  .nav{padding:0 14px;}
  .wrap{padding:24px 14px 0;}
  .panel{padding:18px;}
  .inp{width:100%;}
}