:root{--bg:#f4f5f7;--kaart:#fff;--tekst:#1c2230;--muted:#6b7385;--lijn:#e3e6ec;--accent:#e8590c;--accent2:#fff1e8;--rood:#d6336c;--rood2:#fde8ef;--geel:#f59f00;--geel2:#fff6e0;--groen:#2b8a3e;--groen2:#e6f6ea;--blauw:#1c7ed6;--blauw2:#e7f2fd}
@media (prefers-color-scheme:dark){:root{--bg:#12151c;--kaart:#1b1f29;--tekst:#e6e9ef;--muted:#949cad;--lijn:#2c3240;--accent2:#3a2416;--rood2:#3b1a26;--geel2:#3a2e12;--groen2:#183022;--blauw2:#15283d}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tekst);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blauw)}
button{font:inherit;cursor:pointer;border:1px solid var(--lijn);background:var(--kaart);color:var(--tekst);border-radius:8px;padding:7px 12px}
button:hover{border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
button.hoofd{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.gevaar{color:var(--rood)}
input,select{font:inherit;color:var(--tekst);background:var(--kaart);border:1px solid var(--lijn);border-radius:8px;padding:7px 10px}
input[type=checkbox]{width:auto}
code,pre{font-family:ui-monospace,Consolas,monospace;font-size:13px}
pre{background:var(--bg);border:1px solid var(--lijn);border-radius:8px;padding:8px 10px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.muted{color:var(--muted)}.klein{font-size:12px}
.fout{color:var(--rood)}.ok{color:var(--groen);font-weight:600}
h1{font-size:22px;margin:0 0 8px}h2{font-size:16px;margin:0 0 10px}h3{font-size:15px;margin:18px 0 8px}

.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 20px;background:var(--kaart);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:5}
.top nav{display:flex;gap:4px}
.top nav button{border:0;background:none;padding:8px 12px;border-radius:8px}
.top nav button.actief{background:var(--accent2);color:var(--accent);font-weight:600}
.top .uit{margin-left:auto;font-size:13px}
main{padding:18px 20px;max-width:1400px;margin:0 auto}
.balk{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.knoppen{display:flex;gap:8px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--kaart);border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}
.kpi b{display:block;font-size:26px}.kpi span{color:var(--muted);font-size:13px}
.kpi.rood b{color:var(--rood)}.kpi.geel b{color:var(--geel)}
.raster{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.paneel{background:var(--kaart);border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;min-width:0}
.paneel.breed{grid-column:1/-1}
.paneel.tekst{max-width:860px}.paneel.tekst li{margin-bottom:10px}
@media (max-width:900px){.raster{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--lijn);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600}
.paneel>div{overflow-x:auto}
tr.urgent td{background:var(--rood2)}
td.wat{max-width:280px}
.pil{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600}
.pil.urgent{background:var(--rood2);color:var(--rood)}.pil.gepland{background:var(--blauw2);color:var(--blauw)}
.sms{border-left:3px solid var(--blauw);background:var(--bg);border-radius:6px;padding:8px 10px;margin-bottom:8px;font-size:14px;word-break:break-word}
.sms.technieker{border-color:var(--accent)}
.gsp{border-bottom:1px solid var(--lijn);padding:8px 0}.gsp summary{cursor:pointer}.gsp summary div{font-size:13px;color:var(--muted)}

.sim{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:14px;align-items:start}
@media (max-width:900px){.sim{grid-template-columns:1fr}}
.simopties{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.simopties label{display:flex;align-items:center;gap:8px}
.scenarios{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px}
.scenarios button{font-size:13px;padding:5px 10px}
.gesprek{display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:420px}
#sim-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-bottom:8px}
#sim-live{min-height:20px;font-style:italic}
#sim-form{display:flex;gap:8px;margin-top:6px}#sim-form input{flex:1}
.msg{max-width:80%}.msg span{display:inline-block;padding:8px 12px;border-radius:14px;background:var(--bg)}
.msg.assistent span{background:var(--accent2)}
.msg.klant{align-self:flex-end;text-align:right}.msg.klant span{background:var(--blauw2)}
.msg.systeem{align-self:center;font-size:13px;color:var(--muted)}
.msg.tool{align-self:stretch;max-width:100%;font-size:12px;color:var(--muted)}.msg.tool summary{cursor:pointer}
.gsp .msg{margin:4px 0}

body.klant{background:var(--bg)}
.kies{max-width:520px;margin:0 auto;padding:16px}
.kies header{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.kies .logo{width:44px;height:44px;border-radius:12px;background:var(--accent);display:grid;place-items:center;font-size:22px}
.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:14px;padding:16px;margin-bottom:12px}
.kaart dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0}.kaart dt{color:var(--muted)}.kaart dd{margin:0}
.dag{margin:12px 0}.dagnaam{font-weight:600;margin-bottom:6px}
.uren{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.uren button{padding:10px 0;font-weight:600}
.uren button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.login{display:flex;flex-direction:column;gap:10px;margin-top:12vh}
.login button{background:var(--accent);color:#fff;border-color:var(--accent);padding:10px}
.tip{background:var(--accent2);border-radius:10px;padding:10px 12px}

.velden{display:grid;gap:8px}.velden label{display:grid;gap:3px;font-size:13px;color:var(--muted)}.velden input{color:var(--tekst);font-size:15px}
.velden.twee{grid-template-columns:1fr 1fr}
table.vorm td{border:0;padding:4px 6px 4px 0;vertical-align:middle}table.vorm input{width:100%}table.vorm input[type=checkbox]{width:auto}
textarea{width:100%;font:14px/1.5 ui-monospace,Consolas,monospace;color:var(--tekst);background:var(--bg);border:1px solid var(--lijn);border-radius:8px;padding:10px;resize:vertical}

button.el.bezig{background:var(--rood);border-color:var(--rood)}
hr{border:0;border-top:1px solid var(--lijn);margin:16px 0}

/* agenda */
.agenda{background:var(--kaart);border:1px solid var(--lijn);border-radius:12px;overflow:auto}
.ag-kop,.ag-raster{display:grid;grid-template-columns:52px repeat(7,minmax(120px,1fr));min-width:900px}
.ag-kop{position:sticky;top:0;z-index:3;background:var(--kaart);border-bottom:1px solid var(--lijn)}
.ag-dagkop{padding:8px 6px;font-size:13px;border-left:1px solid var(--lijn)}
.ag-dagkop.vandaag{background:var(--accent2)}
.ag-buiten{font-size:11px;background:var(--rood2);color:var(--rood);border-radius:4px;padding:1px 4px;margin-top:3px;cursor:pointer}
.ag-uren{position:relative}.ag-uren div{position:absolute;right:6px;font-size:11px;color:var(--muted);transform:translateY(-6px)}
.ag-dag{position:relative;border-left:1px solid var(--lijn);cursor:copy}
.ag-dag.dicht{background:repeating-linear-gradient(45deg,transparent 0 6px,var(--bg) 6px 12px)}
.ag-lijn{position:absolute;left:0;right:0;border-top:1px solid var(--lijn)}.ag-lijn.half{border-top-style:dotted;opacity:.6}
.ag-open{position:absolute;left:0;right:0;background:var(--bg);opacity:.35}
.ag-slot{position:absolute;left:2px;right:2px;border-radius:5px;pointer-events:none}
.ag-slot span{position:absolute;right:4px;bottom:2px;font-size:10px;color:var(--groen);font-weight:600}
.ag-slot.vol{background:#2b8a3e33}.ag-slot.deels{background:#2b8a3e18}.ag-slot.geen{background:transparent}.ag-slot.voorbij{background:transparent}
.ag-afspraak,.ag-blok{position:absolute;border-radius:6px;padding:2px 5px;font-size:11px;line-height:1.3;overflow:hidden;cursor:pointer;z-index:2}
.ag-afspraak{border-left:4px solid;color:var(--tekst)}.ag-afspraak span{color:var(--muted)}
.ag-afspraak.urgent{box-shadow:inset 0 0 0 1px var(--rood)}.ag-afspraak.afgerond{opacity:.5}
.ag-blok{background:repeating-linear-gradient(45deg,var(--rood2) 0 6px,transparent 6px 12px);border:1px solid var(--rood);color:var(--rood)}
.ag-nu{position:absolute;left:0;right:0;border-top:2px solid var(--rood);z-index:2;pointer-events:none}
.ag-leg{display:inline-flex;align-items:center;gap:4px;margin-left:10px}.ag-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
#ag-dialoog{border:1px solid var(--lijn);border-radius:14px;background:var(--kaart);color:var(--tekst);width:min(460px,92vw);padding:18px}
#ag-dialoog::backdrop{background:#0006}
.ag-tabs{display:flex;gap:14px;margin-bottom:10px}.ag-acties{margin-top:14px;justify-content:flex-end}

.demo .stap{border:1px solid var(--lijn);border-radius:10px;padding:12px 14px;margin-bottom:10px}.demo .stap p{margin:6px 0}.demo q{font-weight:600}

table.tools td{vertical-align:top}table.tools code{white-space:nowrap}

.gsp.controle{background:var(--rood2);border-radius:8px;padding:8px}

.top .jv-link{font-size:14px;color:var(--accent);text-decoration:none;padding:7px 11px;border-radius:8px;background:var(--accent2);font-weight:600}
.knop-link{display:inline-block;padding:8px 14px;border-radius:8px;border:1px solid var(--lijn);background:var(--kaart);color:var(--tekst);text-decoration:none}