/* Sirius Vision Balans — huisstijl: zware system-sans koppen, rood accent, donker/wit */
:root{
  --rood:#e30613; --rood-d:#b8050f; --zwart:#111; --donker:#1a1a1a; --grijs-1:#f4f4f4; --grijs-2:#e6e6e6; --grijs-3:#9a9a9a; --tekst:#161616; --wit:#fff;
  --groen:#1f8a4c; --oranje:#d97706; --blauw:#2563eb;
  --radius:6px; --schaduw:0 10px 30px rgba(0,0,0,.12);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--grijs-1);color:var(--tekst);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.02em;text-transform:uppercase;margin:0;line-height:1.1}
h1{font-size:28px}h2{font-size:20px}h3{font-size:15px}h4{font-size:12px;letter-spacing:.06em;color:var(--grijs-3)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--grijs-3)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pos{color:var(--groen)}.neg{color:var(--rood)}
.hidden{display:none!important}
.loading{padding:40px;text-align:center;color:var(--grijs-3)}

/* ---- login ---- */
body.login{background:var(--zwart);display:flex;min-height:100vh}
.login-wrap{margin:auto;width:100%;max-width:420px;padding:20px}
.login-box{background:var(--wit);padding:36px;border-radius:var(--radius);box-shadow:var(--schaduw)}
.login-box h1{margin:14px 0 4px;font-size:40px}
.login-box label{display:block;margin-top:16px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.login-box input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--grijs-2);border-radius:var(--radius);font-size:15px}
.login-box .err{color:var(--rood);min-height:20px;margin-top:10px;font-weight:600}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.12em;font-size:12px}
.brand-mark{width:14px;height:14px;background:var(--rood);display:inline-block}

/* ---- shell ---- */
body.app{display:block}
#app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:var(--zwart);color:var(--wit);padding:22px 0;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
.sidebar .brand{padding:0 22px 22px;color:var(--wit)}
.sidebar .brand b{font-size:18px;letter-spacing:-.02em}
.nav a{display:flex;align-items:center;justify-content:space-between;padding:10px 22px;color:#cfcfcf;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;border-left:3px solid transparent}
.nav a:hover{color:var(--wit);background:#222}
.nav a.active{color:var(--wit);border-left-color:var(--rood);background:#1f1f1f}
.nav .sec{padding:16px 22px 6px;font-size:10px;letter-spacing:.14em;color:#6f6f6f;font-weight:800}
.nav .cnt{background:#333;border-radius:10px;padding:1px 7px;font-size:11px}
.sidebar .foot{margin-top:auto;padding:18px 22px;font-size:12px;color:#8a8a8a;border-top:1px solid #2a2a2a}
.sidebar .foot b{color:var(--wit);display:block}
.sidebar .foot a{color:#cfcfcf}
.main{min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 28px;background:var(--wit);border-bottom:1px solid var(--grijs-2);position:sticky;top:0;z-index:5}
.topbar h1{font-size:20px;flex:1}
.topbar .burger{display:none}
.content{padding:24px 28px 60px}
.jaar-select{font-weight:800;border:2px solid var(--zwart);border-radius:var(--radius);padding:6px 10px;background:var(--wit)}

/* ---- componenten ---- */
.btn{border:0;border-radius:var(--radius);padding:9px 14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:12px;cursor:pointer;background:var(--grijs-2);color:var(--tekst);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{filter:brightness(.95)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--rood);color:var(--wit)}.btn-primary:hover{background:var(--rood-d);filter:none}
.btn-dark{background:var(--zwart);color:var(--wit)}
.btn-ghost{background:transparent;border:1px solid var(--grijs-2)}
.btn-sm{padding:5px 9px;font-size:11px}
.btn-block{width:100%;justify-content:center;padding:12px}
.btn-danger{background:transparent;color:var(--rood);border:1px solid var(--rood)}
.card{background:var(--wit);border-radius:var(--radius);padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.card.dark{background:var(--zwart);color:var(--wit)}
.card.dark h4{color:#9a9a9a}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{background:var(--wit);border-radius:var(--radius);padding:16px 18px;border-top:4px solid var(--zwart)}
.kpi.rood{border-top-color:var(--rood)}.kpi.groen{border-top-color:var(--groen)}.kpi.grijs{border-top-color:var(--grijs-3)}
.kpi .lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs-3)}
.kpi .val{font-size:26px;font-weight:900;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px;color:var(--grijs-3);margin-top:2px}
.sectie{margin-top:28px}
.sectie-kop{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.sectie-kop .nr{color:var(--rood);font-weight:900;font-size:13px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.toolbar input[type=search]{padding:8px 12px;border:1px solid var(--grijs-2);border-radius:var(--radius);min-width:220px;background:var(--wit)}
.toolbar .spacer{flex:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--grijs-2);background:var(--wit);border-radius:20px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer}
.chip.active{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.seg{display:inline-flex;border:1px solid var(--grijs-2);border-radius:var(--radius);overflow:hidden;background:var(--wit)}
.seg button{border:0;background:transparent;padding:7px 12px;font-weight:800;font-size:12px;text-transform:uppercase;cursor:pointer}
.seg button.active{background:var(--zwart);color:var(--wit)}
table.tbl{width:100%;border-collapse:collapse;background:var(--wit);border-radius:var(--radius);overflow:hidden}
.tbl th.sortable{cursor:pointer;user-select:none}.tbl th.sortable:hover{color:var(--zwart)}.tbl th.sorted{color:var(--zwart)}.tbl th .arrow{font-size:9px;opacity:.6}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs-3);text-align:left;padding:10px 12px;border-bottom:2px solid var(--grijs-2);background:var(--wit);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--grijs-1);vertical-align:middle}
.tbl tr.row:hover td{background:#fafafa;cursor:pointer}
.tbl tfoot td{font-weight:900;border-top:2px solid var(--zwart);background:var(--grijs-1)}
.tbl .sm{font-size:12px;color:var(--grijs-3)}
.tbl-wrap{overflow:auto;background:var(--wit);border-radius:var(--radius)}
.badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--grijs-2);white-space:nowrap}
.badge.offerte{background:#ececec;color:#555}.badge.akkoord{background:#dbeafe;color:#1e3a8a}.badge.gestart{background:#fef3c7;color:#92400e}.badge.opgeleverd{background:#ede9fe;color:#5b21b6}.badge.afgerond{background:#dcfce7;color:#166534}.badge.verloren{background:#fee2e2;color:#991b1b}
.badge.open{background:#ececec;color:#555}.badge.deels{background:#fef3c7;color:#92400e}.badge.gefactureerd{background:#dbeafe;color:#1e3a8a}.badge.betaald{background:#dcfce7;color:#166534}.badge.geen{background:#fff;color:#999;border:1px dashed #ccc}
.badge.ontvangen{background:#ececec;color:#555}.badge.goedgekeurd{background:#dbeafe;color:#1e3a8a}
.status-sel{appearance:none;-webkit-appearance:none;border:0;border-radius:4px;padding:4px 22px 4px 8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;background:var(--grijs-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 6px center}
.status-sel.offerte{background-color:#ececec;color:#555}.status-sel.akkoord{background-color:#dbeafe;color:#1e3a8a}.status-sel.gestart{background-color:#fef3c7;color:#92400e}.status-sel.opgeleverd{background-color:#ede9fe;color:#5b21b6}.status-sel.afgerond{background-color:#dcfce7;color:#166534}.status-sel.verloren{background-color:#fee2e2;color:#991b1b}
.eig{display:inline-block;width:22px;height:22px;border-radius:50%;font-size:10px;font-weight:900;text-align:center;line-height:22px;color:var(--wit);background:var(--zwart)}
.eig.danny{background:var(--blauw)}.eig.gedeeld{background:var(--rood)}
.empty{padding:30px;text-align:center;color:var(--grijs-3);background:var(--wit);border-radius:var(--radius)}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(230px,1fr));gap:12px;overflow:auto;padding-bottom:10px}
.kol{background:var(--grijs-2);border-radius:var(--radius);padding:10px;min-height:300px}
.kol.over{outline:2px dashed var(--rood)}
.kol h4{display:flex;justify-content:space-between;color:var(--zwart);margin-bottom:10px;padding:0 4px}
.kol h4 span{color:var(--grijs-3)}
.kaart{background:var(--wit);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;cursor:grab;border-left:3px solid var(--zwart);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.kaart.danny{border-left-color:var(--blauw)}.kaart.gedeeld{border-left-color:var(--rood)}
.kaart.dragging{opacity:.4}
.kaart .k-klant{font-weight:900;font-size:13px}
.kaart .k-opd{font-size:12px;color:#555;margin:2px 0 6px}
.kaart .k-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.kaart .k-nr{color:var(--grijs-3);font-size:11px}

/* drawer / modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;justify-content:flex-end}
.drawer{background:var(--wit);width:min(860px,100%);height:100%;overflow:auto;box-shadow:var(--schaduw);display:flex;flex-direction:column}
.drawer-head{padding:18px 24px;border-bottom:1px solid var(--grijs-2);display:flex;gap:14px;align-items:flex-start;position:sticky;top:0;background:var(--wit);z-index:2}
.drawer-head h2{font-size:18px}
.drawer-head .sub{color:var(--grijs-3);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.drawer-body{padding:20px 24px;flex:1}
.drawer .close{margin-left:auto;background:transparent;border:0;font-size:22px;cursor:pointer;line-height:1}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--grijs-2);margin-bottom:18px;overflow:auto}
.tabs button{border:0;background:transparent;padding:10px 14px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.04em;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;color:#666}
.tabs button.active{color:var(--zwart);border-bottom-color:var(--rood)}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--wit);border-radius:var(--radius);width:min(560px,100%);max-height:92vh;overflow:auto;padding:24px;box-shadow:var(--schaduw)}
.modal h2{margin-bottom:14px}

/* formulieren */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#555}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:5px;padding:9px 10px;border:1px solid var(--grijs-2);border-radius:var(--radius);background:var(--wit)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--zwart);border-color:var(--zwart)}
.form textarea{min-height:80px;resize:vertical}
.form .check{display:flex;align-items:center;gap:8px;margin-top:22px;text-transform:none;font-size:13px;font-weight:600}
.form .check input{width:auto;margin:0}
.form-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end;margin-top:8px;align-items:center}
.form-actions .err{color:var(--rood);font-weight:700;margin-right:auto}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;background:var(--grijs-1);padding:12px;border-radius:var(--radius);margin-top:10px}
.inline-form label{font-size:10px;font-weight:800;text-transform:uppercase;color:#666;display:block}
.inline-form input,.inline-form select{display:block;padding:7px 8px;border:1px solid var(--grijs-2);border-radius:var(--radius);background:var(--wit);margin-top:3px;min-width:100px}
.inline-form .grow{flex:1;min-width:160px}

/* verdeling */
.verd{background:var(--wit);border-radius:var(--radius);overflow:hidden}
.verd .vh{background:var(--zwart);color:var(--wit);padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.verd .vh h3{font-size:18px}
.verd table{width:100%;border-collapse:collapse}
.verd td{padding:9px 20px;border-bottom:1px solid var(--grijs-1)}
.verd td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.verd tr.tot td{background:var(--grijs-1);font-weight:900;border-top:2px solid var(--zwart)}
.verd tr.rest td{font-size:18px;font-weight:900}
.verd tr.rest td:last-child{color:var(--rood)}
.verd tr.sub td{color:#666;font-weight:400}
.verd tr.sub td:last-child{font-weight:600}

.verd-blok{background:var(--grijs-1);border-left:3px solid var(--rood);padding:12px 14px;border-radius:4px}
.verd-blok .form{grid-template-columns:repeat(3,minmax(0,1fr))}
.verd-rij{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0;align-items:baseline}.verd-rij span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#666;font-weight:800}.verd-rij b{font-size:16px;margin-right:8px}
.chart{width:100%}.chart svg{display:block}.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:11px;font-weight:700;color:#555}.legend .lg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--zwart);color:var(--wit);padding:12px 18px;border-radius:var(--radius);z-index:100;font-weight:700;box-shadow:var(--schaduw);max-width:90vw}
.toast.err{background:var(--rood)}
.diff-ok{color:var(--groen);font-weight:900}.diff-fail{color:var(--rood);font-weight:900}
.help{font-size:12px;color:#666;background:var(--grijs-1);padding:10px 12px;border-left:3px solid var(--rood);border-radius:4px;margin:10px 0}

@media (max-width:980px){
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-260px;width:250px;z-index:40;transition:left .2s}
  .sidebar.open{left:0}
  .topbar .burger{display:inline-flex}
  .content{padding:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .drawer{width:100%}
}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.topbar{padding:10px 14px}.topbar h1{font-size:15px}.kanban{grid-template-columns:repeat(5,80vw)}}
@media print{.sidebar,.topbar,.toolbar,.btn{display:none!important}#app{display:block}.content{padding:0}}