:root{--o:#e8751a;--o2:#c95f0c;--o-bg:#fff3e8;--ink:#1d2330;--mut:#667085;--line:#e6e8ec;--bg:#f8f8f7;--card:#fff;
  --blue:#dbe8fb;--green:#d8f5dd;--red:#c0392b;--hour:52px;--side:228px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--o2)}
.layout{display:flex;height:100vh;height:100dvh;overflow:hidden}
.layout>div{min-height:0}
nav.side{width:var(--side);background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overscroll-behavior:contain}
@media (max-height:860px){nav.side .logo{padding:14px 18px 14px}nav.side a{padding:8px 18px}nav.side .navh{padding:8px 18px 2px}}
.logo{padding:22px 18px 26px;font-weight:800;font-size:23px;line-height:1.05}
.logo b{display:block;color:var(--o)}.logo .fl{color:var(--o)}
nav.side a{display:flex;align-items:center;gap:12px;padding:11px 18px;color:#344054;text-decoration:none;font-weight:500;border-left:3px solid transparent}
nav.side a:hover{background:#faf8f6}
nav.side a.on{background:var(--o-bg);border-left-color:var(--o);color:var(--o2)}
nav.side a .bdg{margin-left:auto;background:var(--o);color:#fff;font-size:11px;border-radius:99px;padding:1px 7px}
nav.side .ico{width:18px;text-align:center;opacity:.8}
nav.side .foot{margin-top:auto;padding:14px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.page{flex:1;overflow:auto;padding:22px 26px}
.page.flush{padding:0;display:flex;flex-direction:column}
h1{font-size:22px;margin:0 0 16px}
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bar .grow{flex:1}
.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;cursor:pointer;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:#c9ced6}
.btn.pri{background:var(--o);border-color:var(--o);color:#fff}.btn.pri:hover{background:var(--o2)}
.btn.sm{padding:5px 9px;font-size:13px}
.btn.danger{color:var(--red)}
.btn:disabled{opacity:.55;cursor:default}
input.in,select.in,textarea.in{border:1px solid #d0d5dd;border-radius:9px;padding:8px 11px;background:#fff;width:100%}
input.in:focus,select.in:focus,textarea.in:focus{outline:2px solid #fbd3ae;border-color:var(--o)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.full{grid-column:1/-1}
label.l{display:block;font-size:12px;font-weight:600;color:#475467;margin-bottom:4px}
table.t{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.t th{font-size:12px;text-align:left;color:var(--mut);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:#fcfcfb;position:sticky;top:0}
.t td{padding:9px 12px;border-bottom:1px solid #f0f1f3;vertical-align:middle}
.t tr:hover td{background:#fcfaf8}
.t tr.click{cursor:pointer}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#eef0f3;color:#475467}
.pill.o{background:var(--o-bg);color:var(--o2)}.pill.r{background:#fdecea;color:var(--red)}.pill.g{background:#e3f6e8;color:#1f7a45}.pill.b{background:#e5eefc;color:#2456a6}.pill.y{background:#fff6d6;color:#8a6200}
.mut{color:var(--mut)}.small{font-size:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat .v{font-size:26px;font-weight:700}.stat .k{color:var(--mut);font-size:13px}
.empty{padding:40px;text-align:center;color:var(--mut)}

/* ---------- Agenda ---------- */
.cal-top{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap}
.cal-top .title{font-size:18px;font-weight:700;min-width:210px;text-align:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:#fff;padding:7px 12px;cursor:pointer}.seg button.on{background:var(--o-bg);color:var(--o2);font-weight:600}
.techs{display:flex;gap:6px;flex-wrap:wrap}
.tchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:4px 10px 4px 6px;cursor:pointer;background:#fff;font-size:13px;user-select:none}
.tchip i{width:12px;height:12px;border-radius:50%}
.tchip.off{opacity:.4}
.tchip.on{border-color:var(--o);background:var(--o-bg);color:var(--o2);font-weight:600}
.ai-in{flex:1;min-width:240px;max-width:460px;position:relative}
.ai-in input{padding-left:32px}
.ai-in span{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
.cal-body{flex:1;display:flex;min-height:0}
.cal-scroll{flex:1;overflow:auto;position:relative;background:#fff}
.cal-grid{display:grid;min-width:100%;position:relative}
.cal-head{position:sticky;top:0;z-index:5;display:grid;background:#fff;border-bottom:1px solid var(--line)}
.cal-head div{padding:8px 6px;font-weight:600;font-size:13px;text-align:center;border-left:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.cal-head div.today{color:var(--o2)}
.cal-head .hbtn{font-size:11px;padding:2px 6px}
.times{position:relative;border-right:1px solid var(--line)}
.times div:first-child{transform:none}
.times div{height:var(--hour);font-size:11px;color:var(--mut);text-align:right;padding-right:6px;transform:translateY(-7px)}
.col{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(#eef0f2 1px,transparent 1px),linear-gradient(#f7f8f9 1px,transparent 1px);
  background-size:100% var(--hour),100% calc(var(--hour)/2)}
.col.today{background-color:#fffbf7}
.col.drop{background-color:#fff3e8}
.now{position:absolute;left:0;right:0;border-top:2px solid var(--o);z-index:3;pointer-events:none}
.ev{position:absolute;left:2px;right:2px;border-radius:7px;padding:3px 6px 3px 8px;font-size:12px;line-height:1.3;overflow:hidden;cursor:grab;
  background:var(--c-bg,#dbe8fb);border-left:4px solid var(--c,#3b82f6);color:#1a2a44;box-shadow:0 1px 0 rgba(0,0,0,.04);touch-action:none;user-select:none;z-index:2}
.ev:hover{box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:4}
.ev b{font-weight:600}
.ev .meta{color:#4a5a73;font-size:11px}
.ev.afgerond{opacity:.55}.ev.geannuleerd{opacity:.4;text-decoration:line-through}
.ev .rs{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.ev.dragging{opacity:.35}
.ghost{position:fixed;z-index:999;pointer-events:none;opacity:.9;box-shadow:0 8px 24px rgba(0,0,0,.2);border-radius:7px}
.ghost-time{position:fixed;z-index:1000;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:2px 7px;border-radius:6px}
.tray{width:290px;border-left:1px solid var(--line);background:#fbfbfa;overflow:auto;padding:12px;flex-shrink:0}
.tray h3{font-size:13px;margin:6px 0 8px;color:#475467;text-transform:uppercase;letter-spacing:.03em}
.titem{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:8px;cursor:grab;touch-action:none;user-select:none;font-size:13px}
.titem:hover{border-color:var(--o)}
.titem .row{display:flex;gap:6px;align-items:center;justify-content:space-between}
.week-cell-lbl{font-size:11px}
#map{height:100%;min-height:360px}
.mapwrap{width:44%;border-left:1px solid var(--line);flex-shrink:0}

/* Maandweergave */
.month{display:grid;grid-template-columns:repeat(7,1fr);background:#fff}
.month .d{min-height:128px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px;overflow:hidden}
.month .d.other{background:#fafafa;color:#aaa}
.month .d .n{font-size:13px;font-weight:600;margin-bottom:4px}
.month .d.today .n{color:var(--o2)}
.month .m-ev{font-size:11px;padding:2px 5px;border-radius:4px;margin-bottom:2px;background:var(--c-bg);border-left:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.month .more{font-size:11px;color:var(--mut)}

/* ---------- Modaal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(20,24,33,.45);display:flex;align-items:flex-start;justify-content:center;z-index:100;padding:5vh 12px;overflow:auto}
.modal{background:#fff;border-radius:14px;width:min(640px,100%);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal.wide{width:min(920px,100%)}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal header h2{font-size:17px;margin:0}
.modal .body{padding:18px 20px}
.modal footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.modal footer .left{margin-right:auto;display:flex;gap:8px}
.x{border:0;background:none;font-size:22px;cursor:pointer;color:var(--mut);line-height:1}
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 20px rgba(0,0,0,.1);z-index:10;max-height:240px;overflow:auto}
.ac-list div{padding:8px 11px;cursor:pointer}.ac-list div:hover,.ac-list div.sel{background:var(--o-bg)}
.sugg{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.sugg:hover{border-color:var(--o);background:#fffaf5}
.sugg .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.sugg .when{font-weight:600;min-width:170px}
.sugg .why{flex:1;color:var(--mut);font-size:13px}
.sugg .km{font-weight:600;white-space:nowrap}
.sugg.best{border-color:var(--o);background:#fffaf5}
.req{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:10px}
.req.spoed{border-left:4px solid var(--red)}.req.hoog{border-left:4px solid #f59e0b}
.req h3{margin:0 0 4px;font-size:15px}
.req .ai{background:#f6f3ff;color:#4b3aa8;border-radius:8px;padding:6px 10px;font-size:13px;margin:6px 0}
.req .acts{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.req .photos img{width:64px;height:64px;object-fit:cover;border-radius:8px;margin-right:6px;border:1px solid var(--line)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs button{border:0;background:none;padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;color:var(--mut);font-weight:500}
.tabs button.on{color:var(--o2);border-bottom-color:var(--o)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:200;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.toast.err{background:var(--red)}
.stockbar{height:6px;background:#eef0f3;border-radius:9px;overflow:hidden;width:90px;display:inline-block;vertical-align:middle;margin-left:8px}
.stockbar i{display:block;height:100%}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
pre{background:#1d2330;color:#e7eaf0;padding:12px;border-radius:9px;overflow:auto}
.menu-btn{display:none}
@media(max-width:900px){
  nav.side{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:.2s}
  nav.side{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;height:100%;height:100dvh;width:min(280px,82vw)}
  nav.side .logo{padding:14px 18px 12px;font-size:20px}
  nav.side a{padding:9px 18px}
  nav.side .navh{padding:10px 18px 2px}
  nav.side .foot{margin-top:8px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  nav.side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .menu-btn{display:inline-flex}
  .tray,.mapwrap{display:none}
  .page{padding:14px}
  .grid2,.grid3{grid-template-columns:1fr}
  .cal-top .title{min-width:0;font-size:16px}
}
.cal-head div.sub{font-size:11px;font-weight:500;color:var(--mut);padding:4px 4px;overflow:hidden}
.cal-head div.sub .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-head div.first,.col.first{border-left:2px solid #d5d9df}
.ev.compact{font-size:11px;padding:2px 4px 2px 5px;border-left-width:3px}

/* Planbord */
.board{display:grid;min-width:100%;background:#fff}
.board .bh{position:sticky;top:0;z-index:3;background:#fff;border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding:8px;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
.board .bh.today{color:var(--o2)}
.board .bh.corner{left:0;z-index:4}
.board .bname{position:sticky;left:0;z-index:2;background:#fff;border-bottom:1px solid var(--line);padding:10px;font-weight:600;display:flex;align-items:flex-start;gap:8px;font-size:13px}
.board .bname i{width:12px;height:12px;border-radius:50%;margin-top:3px;flex-shrink:0}
.bcell{border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px;min-height:84px;display:flex;flex-direction:column;gap:4px}
.bcell.today{background:#fffbf7}.bcell.drop{background:var(--o-bg)}
.bcell .load{height:4px;background:#eef0f3;border-radius:9px;overflow:hidden;margin-bottom:2px}.bcell .load i{display:block;height:100%}
.bev{background:var(--c-bg);border-left:3px solid var(--c);border-radius:6px;padding:3px 6px;font-size:12px;line-height:1.3;cursor:grab;user-select:none;touch-action:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bev span{display:block;color:#4a5a73;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.bev.afgerond{opacity:.55}.bev.dragging{opacity:.35}
.bev.ghost{position:fixed;z-index:999;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* Voorraadcategorieën */
.catbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cat{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;cursor:pointer;font-size:13px;display:inline-flex;gap:6px;align-items:center}
.cat span{color:var(--mut);font-size:12px}
.cat em{font-style:normal;background:#fdecea;color:var(--red);border-radius:99px;padding:0 6px;font-size:11px;font-weight:700}
.cat.on{background:var(--o-bg);border-color:var(--o);color:var(--o2);font-weight:600}
.t tr.grp td{background:#faf8f6;font-weight:700;font-size:13px;color:#475467;padding-top:12px}

/* AI-voorstellen */
.ev.voorstel,.bev.voorstel{background:repeating-linear-gradient(135deg,var(--c-bg),var(--c-bg) 6px,#fff 6px,#fff 10px);outline:2px dashed var(--c);outline-offset:-2px}
.ev.voorstel::after,.bev.voorstel::after{content:"AI";position:absolute;top:2px;right:4px;font-size:9px;font-weight:800;color:var(--o2);background:#fff;border-radius:4px;padding:0 3px}
.bev{position:relative}
.titem.prop{border-color:#f5c38b;background:#fffaf5;cursor:default}

/* Systeemstand-balk */
#modeBar{padding:8px 18px;font-size:13px;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#modeBar.test{background:#fff6d6;color:#7a5600;border-bottom:1px solid #f3dd8f}
#modeBar.akkoord{background:#e5eefc;color:#2456a6;border-bottom:1px solid #c7d8f6}
#modeBar a{color:inherit}
.outmsg{white-space:pre-wrap;background:#e7f7ea;border:1px solid #c9ebd0;border-radius:10px;padding:10px 12px;font-size:13px;margin-top:8px;max-height:260px;overflow:auto}

[hidden]{display:none!important}

/* Klantreis */
.trip{border-left:2px solid var(--line);margin-left:14px;padding-left:0}
.trip-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px 8px 0;margin-left:-15px;border-radius:8px}
.trip-row.click{cursor:pointer}.trip-row.click:hover{background:#faf7f3}
.trip-ic{width:28px;height:28px;flex:none;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:14px}
.trip-txt{white-space:pre-wrap;background:#f6f7f9;border-radius:8px;padding:8px 10px;margin-top:6px;font-size:13px}

/* Hulpknop */
.help-fab{position:fixed;right:18px;bottom:18px;z-index:50;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 14px;font:inherit;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer}
.help-fab:hover{border-color:var(--o);color:var(--o2)}
@media print{.help-fab{display:none}}
.page{padding-bottom:70px}

.palb{display:inline-block;background:#1d2330;color:#fff;border-radius:4px;padding:0 4px;font-size:10px;font-weight:800;line-height:15px;vertical-align:1px}
nav.side .navh{padding:14px 18px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#98a2b3}
nav.side .navh:empty{padding:6px 0 0;border-top:1px solid var(--line);margin-top:8px}
.embed{flex:1;width:100%;border:0;background:#f5f4f2;min-height:0}
@media (max-width:700px){
  .modal-bg{padding:2vh 6px}
  .modal{max-width:100%;overflow:hidden}
  .modal .grid2{grid-template-columns:1fr!important}
  .modal .grid2>*{min-width:0}
  .modal table.t{display:block;overflow-x:auto;max-width:100%}
  .modal input.in,.modal select.in{min-width:0}
}

/* agenda past zich aan het scherm aan */
.tray.closed{display:none}
#trayBtn.on{background:var(--o-bg);border-color:var(--o);color:var(--o2)}
.ev{min-width:0}
.cal-head div.sub{padding:4px 2px}

/* monteur(s) kiezen in het afspraakvenster */
.techpick{display:flex;flex-wrap:wrap;gap:6px}
.techpick .tp{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;cursor:pointer;font-weight:600;font-size:13px;border-left:6px solid var(--c)}
.techpick .tp.on{background:var(--c);border-color:var(--c);color:#fff}
.techpick .tp .mk{margin-left:4px;opacity:.75;font-size:12px;padding:0 3px;border-radius:6px;background:rgba(255,255,255,.25)}
.techpick .tp .mk:hover{opacity:1}

/* ---- Menu inklapbaar (alleen iconen) ---- */
.navtog{float:right;border:1px solid var(--line);background:#fff;border-radius:8px;width:28px;height:28px;cursor:pointer;color:var(--mut);font-size:14px;line-height:1;margin-top:-2px}
.navtog:hover{color:var(--o2);border-color:var(--o)}
@media (min-width:901px){
  body.navmini{--side:60px}
  body.navmini nav.side .logo{padding:14px 8px;text-align:center}
  body.navmini nav.side .logo .lt{display:none}
  body.navmini nav.side .navtog{float:none;display:block;margin:8px auto 0}
  body.navmini nav.side a{padding:10px 0;justify-content:center;gap:0;font-size:0;position:relative}
  body.navmini nav.side a .ico{font-size:17px;width:auto;opacity:1}
  body.navmini nav.side a .bdg{position:absolute;top:3px;right:5px;font-size:10px;padding:0 5px}
  body.navmini nav.side .navh{font-size:0;padding:4px 0;border-top:1px solid var(--line);margin:4px 10px}
  body.navmini nav.side .foot{font-size:0;padding:8px}
  body.navmini nav.side .foot a{font-size:11px}
}
/* ---- Planbord-venster: alleen de agenda, schermvullend ---- */
body.planner nav.side{display:none}
body.planner .menu-btn{display:none}
body.planner .tray{width:340px}
@media (min-width:2200px){ body.planner .tray{width:400px} }
/* tabbladen in het zijpaneel */
.ttabs{display:flex;gap:4px;margin:-4px 0 10px;position:sticky;top:-12px;background:#fbfbfa;padding:6px 0;z-index:2}
.ttabs button{flex:1;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 4px;font-size:12px;font-weight:600;cursor:pointer;color:#475467}
.ttabs button.on{background:var(--o);border-color:var(--o);color:#fff}
.titem.maint{border-left:4px solid #1f7a45}

/* vrije dag / verlof in de agenda */
.col .absent{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(152,162,179,.10) 0 10px,rgba(152,162,179,.20) 10px 20px);pointer-events:none;z-index:0}
.col .absent span{position:sticky;top:0;display:block;font-size:11px;font-weight:600;color:#475467;padding:4px 6px;background:rgba(255,255,255,.85);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bcell.off{background:repeating-linear-gradient(135deg,#f6f7f9 0 10px,#eef0f3 10px 20px)}
.bcell .offlbl{font-size:11px;font-weight:600;color:#475467;margin-bottom:4px}
/* jaarplanning */
.jpbar{position:relative;height:100%;cursor:pointer;border-radius:6px 6px 0 0;display:flex;flex-direction:column-reverse}
.jpbar:hover,.jpbar.on{background:#faf5ef}
.jpbar .pl{background:var(--o);border-radius:4px 4px 0 0;width:70%;margin:0 auto}
.jpbar .due{background:#f5c38b;width:70%;margin:0 auto}
.jpbar .pl{order:-1}
.jpbar .cap{position:absolute;left:4%;right:4%;border-top:2px solid #1d2330}
.jpbar.on{outline:2px solid var(--o)}
i.lg{display:inline-block;width:12px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.col .absent.pend{background:none;border:2px dashed #98a2b3;border-radius:6px}

/* kachel / schoorsteen */
.tkc{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:10px;padding:7px 12px;font-weight:600;cursor:pointer;background:#fff}
.tkc:has(input:checked){border-color:var(--o);background:var(--o-bg)}
.ev .tki,.bev .tki{margin-right:2px}
.ev .cutoff{position:absolute;left:4px;right:4px;bottom:2px;font-size:10px;font-weight:700;color:var(--c);background:rgba(255,255,255,.85);border-radius:4px;padding:0 3px;white-space:nowrap;overflow:hidden}
.col .blokday{position:absolute;top:0;left:0;right:0;font-size:10px;font-weight:600;color:#475467;background:#f2f4f7;border-bottom:1px dashed #98a2b3;padding:1px 4px;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Optie (klant moet nog bevestigen) = licht; bevestigd = donker */
.ev.optie,.bev.optie{color:#5b6475;border-left-style:dashed}
.ev.optie b,.bev.optie b{font-weight:500}
.ev.optie::after{content:"optie";position:absolute;top:2px;right:4px;font-size:9px;font-weight:700;color:#8a93a3;background:#fff;border-radius:4px;padding:0 3px;letter-spacing:.02em}
.ev.compact.optie::after{content:"?"}
.ev.vast,.bev.vast{color:#0f1b30;border-left-width:5px}
.ev.vast b,.bev.vast b{font-weight:700}
.legend{display:inline-flex;align-items:center;gap:4px;color:var(--mut);white-space:nowrap}
.legend .lg{display:inline-block;width:14px;height:12px;border-radius:3px;border-left:3px solid #e8751a;margin-left:6px}
.legend .lg.optie{background:#fdf1e7;border-left-style:dashed}.legend .lg.vast{background:#f3c49c}

/* Klaarzetten / intern en afhalen in de showroom: grijs gestreept, staat naast andere afspraken */
.ev.t-intern{background:repeating-linear-gradient(135deg,#f2f4f7,#f2f4f7 6px,#fff 6px,#fff 10px)!important;border-left-style:dotted;color:#475467}