/* ==========================================================================
   KSB Planning — Beheerschermen kleuradvies & beschikbaarheid (sessie 1.3)
   Design-tokens identiek aan intake.css / docs/KSB_STYLEGIDS.html (bevroren).
   Donker industrieel, rechte hoeken, Archivo Black / Archivo / JetBrains Mono.
   ========================================================================== */

:root{
  --bg:#14181c;
  --bg-panel:#1c2127;
  --bg-raised:#232931;
  --bg-deep:#0c0f12;
  --line:#333a42;
  --line-soft:#2a3038;
  --text:#f2f1ea;
  --dim:#8b929b;
  --faint:#5a6168;
  --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;}

/* ---- 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;}
.row2{display:flex;flex-wrap:wrap;gap:16px;}
.row2 .fg{flex:1;min-width:180px;margin-bottom:0;}

.inp,.sel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  color:var(--text);
  padding:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  width:100%;
  min-height:46px;
}
.inp:focus,.sel:focus{outline:none;border-color:var(--oranje);}
.inp::placeholder{color:var(--faint);}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(0.7);cursor:pointer;}
.sel{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 12px) 20px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:36px;}

/* 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-danger{
  background:transparent;border:1px solid var(--line);color:var(--rood-br);
  min-height:38px;padding:0 14px;font-size:13px;
}
.btn-danger:hover{border-color:var(--rood-br);background:rgba(192,57,43,0.12);}

/* ---- 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;}
.note-ok{background:rgba(74,156,109,0.1);border-color:var(--groen);color:#8fd4ac;}
.note b{color:inherit;}
.note .proj{margin-top:10px;}
.note .proj strong{display:block;font-family:'JetBrains Mono',monospace;color:#f0d98a;font-size:14px;margin-bottom:4px;}
.note .proj ul{list-style:none;margin:0 0 0 2px;}
.note .proj li{font-size:12.5px;color:#d8c98f;padding:2px 0;}
.note .proj li .mono{color:#e8c969;}

/* ---- Overzichtslijst ---- */
.list{display:flex;flex-direction:column;gap:10px;}
.list-empty{color:var(--faint);font-size:13px;padding:8px 0;}
.list-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--bg-raised);border:1px solid var(--line);padding:14px 16px;
}
.list-row .info{min-width:0;}
.list-row .d{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:var(--text);}
.list-row .sub{font-size:12.5px;color:var(--dim);margin-top:3px;}
.list-row .sub .badge{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:1px 7px;margin-right:6px;border:1px solid var(--line);color:var(--text);
}
.badge-ziek{border-color:var(--rood);color:var(--rood-br);}
.badge-vakantie{border-color:var(--blauw);color:#6fb0dc;}
.badge-dicht{border-color:var(--geel);color:#e8c969;}
.badge-anders{border-color:var(--paars);color:#c58fd8;}

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