:root{
  --navy:#3f6b2c;
  --navy-dark:#2f5021;
  --gold:#7ba653;
  --gold-light:#eef5e7;
  --bg:#f4f5f7;
  --card:#ffffff;
  --border:#e1e4ea;
  --text:#1c2431;
  --text-muted:#6b7280;
  --green:#1a7f4e;
  --amber:#b7791f;
  --red:#b3261e;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif; margin:0 0 4px 0; color:var(--navy);}
header.topbar{
  background:#fff;
  color:var(--navy);
  padding:12px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:20;
  border-bottom:3px solid var(--gold);
  box-shadow:0 2px 8px rgba(18,38,69,.06);
}
header.topbar .brand{display:flex; align-items:center; gap:12px;}
header.topbar .brand .mark-logo{
  height:40px; width:auto; display:block;
}
header.topbar .brand h1{color:var(--navy); font-size:18px;}
header.topbar .brand .sub{color:var(--text-muted); font-size:11px; letter-spacing:.05em; text-transform:uppercase;}
nav.tabs{display:flex; gap:4px;}
nav.tabs button{
  background:transparent; border:none; color:var(--text-muted); padding:8px 14px;
  border-radius:6px; cursor:pointer; font-size:14px;
}
nav.tabs button.active{background:var(--gold-light); color:var(--navy); font-weight:600;}
nav.tabs button:hover{background:#f4f5f7;}
main{max-width:1080px; margin:0 auto; padding:24px 20px 80px;}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.btn{
  background:var(--navy); color:#fff; border:none; padding:9px 16px;
  border-radius:7px; cursor:pointer; font-size:13.5px; font-weight:600;
}
.btn:hover{background:var(--navy-dark);}
.btn.secondary{background:#fff; color:var(--navy); border:1px solid var(--border);}
.btn.secondary:hover{background:#f0f2f6;}
.btn.gold{background:var(--gold); color:var(--navy-dark);}
.btn.gold:hover{background:#a5813d;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn.sm{padding:6px 11px; font-size:12.5px; border-radius:6px;}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:14px;
}
.dossier-list{display:flex; flex-direction:column; gap:12px;}
.dossier-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; cursor:pointer; transition:.15s;
}
.dossier-row:hover{border-color:var(--gold); box-shadow:0 2px 10px rgba(18,38,69,.08);}
.dossier-row .meta{display:flex; flex-direction:column; gap:3px;}
.dossier-row .meta .adres{font-weight:700; font-size:15.5px; color:var(--navy);}
.dossier-row .meta .partijen{font-size:12.5px; color:var(--text-muted);}
.dossier-row .progress-wrap{display:flex; align-items:center; gap:10px; min-width:220px;}
.progress-bar{flex:1; height:8px; background:#e9ecf1; border-radius:5px; overflow:hidden;}
.progress-bar > div{height:100%; background:linear-gradient(90deg,var(--gold),var(--navy));}
.badge{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 9px; border-radius:20px; white-space:nowrap;
}
.badge.status-bezig{background:#fdf0d5; color:var(--amber);}
.badge.status-afgerond{background:#e2f4ea; color:var(--green);}
.badge.status-nieuw{background:#e8edf5; color:var(--navy);}
.badge.mock{background:#f1e9d8; color:var(--gold); border:1px solid var(--gold-light);}
.badge.offline{background:#fbe2e1; color:var(--red);}
.stepper{display:flex; overflow-x:auto; gap:2px; padding:4px 0 14px; margin-bottom:10px; border-bottom:1px solid var(--border);}
.step{
  flex:1; min-width:96px; text-align:center; cursor:pointer; padding:8px 4px; border-radius:8px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.step:hover{background:#f0f2f6;}
.step .circle{
  width:26px;height:26px;border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; background:#e5e8ee; color:var(--text-muted); border:2px solid #e5e8ee;
}
.step.done .circle{background:var(--green); color:#fff; border-color:var(--green);}
.step.active .circle{background:var(--navy); color:#fff; border-color:var(--gold);}
.step .label{font-size:10.5px; color:var(--text-muted); line-height:1.2;}
.step.active .label{color:var(--navy); font-weight:700;}
.stage-panel h2{font-size:19px;}
.stage-panel .desc{color:var(--text-muted); font-size:13px; margin-bottom:16px;}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:4px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.02em;}
.field input, .field select, .field textarea{
  padding:8px 10px; border:1px solid var(--border); border-radius:7px; font-size:14px; background:#fff; color:var(--text);
  font-family:inherit;
}
.field textarea{resize:vertical; min-height:60px;}
.checklist{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.check-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border:1px solid var(--border); border-radius:8px; background:#fbfbfc;
}
.check-row .item-name{font-size:13.5px; font-weight:600;}
.check-row .item-sub{font-size:11.5px; color:var(--text-muted);}
.status-pill{font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;}
.status-pill.open{background:#f1f2f5; color:var(--text-muted);}
.status-pill.requested{background:#fdf0d5; color:var(--amber);}
.status-pill.received{background:#e2f4ea; color:var(--green);}
.doc-lijst{display:flex; flex-direction:column; gap:6px;}
.doc-lijst-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:#fff; font-size:12.5px;
}
.actions-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.log-box{background:#f8f9fb; border:1px solid var(--border); border-radius:8px; padding:10px 14px; max-height:220px; overflow-y:auto;}
.log-box .entry{font-size:12px; padding:5px 0; border-bottom:1px dashed var(--border); color:var(--text);}
.log-box .entry:last-child{border-bottom:none;}
.log-box .entry .t{color:var(--text-muted); margin-right:6px;}
.log-box .entry .by{color:var(--gold); font-style:italic;}
table.pay-table{width:100%; border-collapse:collapse; margin-bottom:16px;}
table.pay-table th, table.pay-table td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); font-size:13.5px;}
table.pay-table th{color:var(--text-muted); font-size:11.5px; text-transform:uppercase;}
.integr-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.integr-card{border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:#fff;}
.integr-card h4{margin-bottom:6px;}
.integr-card p{font-size:12.5px; color:var(--text-muted); margin:0 0 10px;}
.note{
  background:var(--gold-light); border:1px solid var(--gold); border-radius:8px; padding:10px 14px;
  font-size:12.5px; color:var(--navy); margin-bottom:18px;
}
.empty{color:var(--text-muted); font-size:13.5px; padding:20px 0; text-align:center;}
.modal-backdrop{
  position:fixed; inset:0; background:rgba(47,80,33,.5); display:flex; align-items:center; justify-content:center; z-index:50;
}
.modal{background:#fff; border-radius:12px; padding:24px; width:420px; max-width:90vw;}
.modal h3{margin-bottom:14px;}
.modal .field{margin-bottom:12px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
.toast{
  position:fixed; bottom:20px; right:20px; background:var(--navy); color:#fff; padding:12px 18px;
  border-radius:8px; font-size:13.5px; box-shadow:0 4px 16px rgba(0,0,0,.2); z-index:60; max-width:340px;
}
.feedback-fab{
  position:fixed; left:20px; bottom:20px; z-index:40;
  background:var(--navy); color:#fff; border:none; padding:11px 18px;
  border-radius:24px; cursor:pointer; font-size:13px; font-weight:600;
  box-shadow:0 4px 14px rgba(18,38,69,.25);
}
.feedback-fab:hover{background:var(--navy-dark);}

/* ---------- contextgevoelige help ---------- */
.help-fab{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--navy); color:#fff; font-size:20px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 14px rgba(18,38,69,.25);
}
.help-fab:hover{background:var(--navy-dark);}
.help-i{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:18px; height:18px; border-radius:50%; border:1px solid var(--border);
  background:#fff; color:var(--navy); font-size:11px; font-weight:700; cursor:pointer; padding:0; margin-left:4px;
}
.help-i:hover{background:var(--gold-light);}
.help-paneel{
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:100vw; z-index:70;
  background:#fff; border-left:1px solid var(--border); box-shadow:-8px 0 24px rgba(18,38,69,.10);
  padding:20px 22px 90px; overflow-y:auto; font-size:13.5px; line-height:1.55;
}
.help-kop{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.help-kop h3{margin:2px 0 6px; color:var(--navy);}
.help-sluit{background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:var(--text-muted);}
.help-kort{font-weight:600; margin:0 0 8px;}
.help-paneel h5{margin:14px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);}
.help-paneel ul{margin:0; padding-left:18px;}
.help-paneel li{margin:2px 0;}
.help-links{display:flex; flex-wrap:wrap; gap:6px 12px;}
.help-zoek{width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font:inherit;}
.help-vraag{margin-top:8px;}
.help-antwoord{background:var(--gold-light); border-radius:8px; padding:8px 10px; margin:4px 0 6px;}
@media (max-width:600px){ .help-paneel{width:100vw;} }