:root{
  --dark:#1d1d1b; --blue:#009ee3; --blue-d:#0080b8; --bg:#f4f4f6; --card:#fff; --ink:#1d1d1b; --mute:#6b7280;
  --line:#e2e4e8; --ok:#15803d; --okbg:#dcfce7; --warn:#b45309; --warnbg:#fff4e0; --bad:#b91c1c; --badbg:#fde2e2;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.5 Roboto,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--blue-d)}
.top{background:var(--dark);color:#fff;display:flex;align-items:center;gap:14px;padding:0 20px;min-height:60px;flex-wrap:wrap;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:500;letter-spacing:.5px}
.brand img{height:30px}
.brand span{border-left:1px solid #555;padding-left:10px;font-size:14px;text-transform:uppercase}
#nav{display:flex;gap:2px;flex:1;flex-wrap:nowrap;overflow-x:auto;min-width:0}
#nav a{color:#ccc;text-decoration:none;padding:18px 9px;font-size:14px;border-bottom:3px solid transparent;white-space:nowrap}
#nav a:hover{color:#fff}
#nav a.act{color:#fff;border-bottom-color:var(--blue)}
#who{font-size:13px;color:#aaa;display:flex;gap:10px;align-items:center}
#who button{background:none;border:1px solid #555;color:#ddd;padding:4px 10px;border-radius:3px;cursor:pointer}
main{max-width:1280px;margin:0 auto;padding:22px 20px 60px}
.pad{padding:20px}
h1{font-size:24px;margin:0 0 14px;font-weight:500}
h2{font-size:18px;margin:26px 0 10px;font-weight:500}
h3{font-size:15px;margin:14px 0 6px;font-weight:500}
.muted{color:var(--mute)}
.small{font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px;margin:0 0 14px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;border-top:3px solid var(--blue)}
.kpi b{display:block;font-size:26px;font-weight:500}
.kpi span{font-size:13px;color:var(--mute)}
button,.btn{font:inherit;font-size:14px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;border-radius:4px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover{border-color:#bbb}
.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.primary:hover{background:var(--blue-d)}
.danger{color:var(--bad);border-color:#f3b4b4}
button:disabled{opacity:.5;cursor:not-allowed}
.tbl-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
td.wrap{white-space:normal}
th{background:#fafafa;font-weight:500;color:#444;font-size:13px;position:sticky;top:0}
tr.click{cursor:pointer}
tr.click:hover td{background:#f6fbfe}
tr.best td{background:#effaf3}
.num{text-align:right}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:#eef0f3;color:#444}
.s-concept{background:#eef0f3}.s-klaar{background:#e0f7fe;color:#0369a1}.s-open{background:#e0f2fb;color:#035f89}.s-toegewezen{background:#ede9fe;color:#5b21b6}
.s-opgehaald{background:#fff4e0;color:#92400e}.s-afgeleverd{background:var(--okbg);color:var(--ok)}.s-afgerond{background:#d1d5db;color:#111}
.s-geannuleerd,.s-verloren,.s-ingetrokken{background:var(--badbg);color:var(--bad)}.s-gegund,.s-gewonnen{background:var(--okbg);color:var(--ok)}.s-actief{background:#e0f2fb;color:#035f89}
.warn{color:var(--warn)}.bad{color:var(--bad)}.ok{color:var(--ok)}
.note{background:var(--warnbg);border:1px solid #f5d29b;border-radius:6px;padding:10px 14px;margin:10px 0}
.info{background:#e8f6fd;border:1px solid #b6e1f5;border-radius:6px;padding:10px 14px;margin:10px 0}
form .f{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
label{font-size:13px;color:#444}
input,select,textarea{font:inherit;font-size:14px;padding:8px 10px;border:1px solid #cfd3d9;border-radius:4px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #bfe6f8;border-color:var(--blue)}
input[type=checkbox]{width:auto}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 12px}
fieldset{border:1px solid var(--line);border-radius:6px;padding:10px 14px 4px;margin:0 0 12px}
legend{font-weight:500;font-size:14px;padding:0 6px}
.login{max-width:380px;margin:60px auto}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 12px;overflow:auto;z-index:50}
.modal-card{background:#fff;border-radius:8px;max-width:860px;width:100%;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.hidden{display:none!important}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:10px 18px;border-radius:6px;z-index:60;max-width:90vw}
.toast.err{background:var(--bad)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filters button.act{background:var(--dark);color:#fff;border-color:var(--dark)}
.route{font-weight:500}
.route small{font-weight:400;color:var(--mute)}
.mcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:6px;padding:14px;margin-bottom:12px}
.mcard.hasbid{border-left-color:var(--ok)}
.vlist{margin:6px 0 0;padding:0;list-style:none;font-size:14px}
.vlist li{padding:3px 0;border-top:1px dashed var(--line)}
.bidform{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px;align-items:end}
.log{font-size:13px;border-left:2px solid var(--line);padding-left:12px}
.log div{margin-bottom:6px}
@media (max-width:700px){
  .top{display:grid;grid-template-columns:1fr auto;padding:8px 12px 0;gap:4px 8px}
  #who{justify-self:end}
  #nav{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;gap:0}
  #nav a{padding:10px 10px;white-space:nowrap}
  .brand img{height:24px}
  main{padding:14px 12px 50px}
  h1{font-size:20px}
  .hide-m{display:none}
}
/* kleuren onderweg */
.pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:12px;font-weight:500;white-space:nowrap}
.k-groen{background:var(--okbg);color:var(--ok)}
.k-oranje{background:var(--warnbg);color:var(--warn)}
.k-rood{background:var(--badbg);color:var(--bad)}
.k-grijs{background:#eef0f3;color:#555}
tr.k-row-rood td:first-child{box-shadow:inset 4px 0 0 var(--bad)}
tr.k-row-oranje td:first-child{box-shadow:inset 4px 0 0 #f59e0b}
tr.k-row-groen td:first-child{box-shadow:inset 4px 0 0 var(--ok)}
tr.k-row-grijs td:first-child{box-shadow:inset 4px 0 0 #9ca3af}
.kpi.click{cursor:pointer}
.kpi.sel{outline:2px solid var(--dark)}
.k-kpi-rood{border-top-color:var(--bad)}.k-kpi-rood b{color:var(--bad)}
.k-kpi-oranje{border-top-color:#f59e0b}.k-kpi-oranje b{color:var(--warn)}
.k-kpi-groen{border-top-color:var(--ok)}.k-kpi-groen b{color:var(--ok)}
.k-kpi-grijs{border-top-color:#9ca3af}
.check{display:flex;align-items:flex-start;gap:8px;padding:6px 0;line-height:1.35}
.check input{width:18px;height:18px;flex:none;margin-top:1px}
.check .small{display:block}

@media (max-width:1380px){#who span.hide-m{display:none}}
.landen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 10px;margin-top:4px}
.landen-grid .check{padding:3px 0;font-size:14px}
.biedlink{max-width:720px;margin:0 auto}
.biedlink .mcard{border-left-width:4px}
.bevestigd{background:var(--okbg);border:1px solid #9be3b3;border-radius:6px;padding:14px;margin:10px 0}
/* ERP-koppeling: labels, depotkiezer, sorteren */
.lbl-release{background:#dcfce7;color:#166534}
.lbl-dap{background:#fef3c7;color:#92400e}
.lbl-depot{background:#e0e7ff;color:#3730a3}
.depot-kiezer{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#444;white-space:nowrap}
.depot-kiezer select{width:auto;padding:5px 8px}
th.sorteerbaar{cursor:pointer;user-select:none}
th.sorteerbaar:hover{background:#eef6fb}
th.sorteerbaar::after{content:' ↕';color:#bbb;font-size:11px}
th.sorteerbaar[data-dir="desc"]::after{content:' ↓';color:#035f89}
th.sorteerbaar[data-dir="asc"]::after{content:' ↑';color:#035f89}
.sync-lijst{margin:4px 0 10px;padding-left:18px;max-height:220px;overflow:auto}

/* cockpit */
.alarm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:4px 0 14px}
.alarm .ok{font-weight:500}
.chip{border-radius:16px;padding:5px 12px;font-size:13px;font-weight:500;border:1px solid transparent}
.chip.k-rood{background:var(--badbg);color:var(--bad);border-color:#f3b4b4}
.chip.k-oranje{background:var(--warnbg);color:var(--warn);border-color:#f5d29b}
.chip:hover{filter:brightness(.97)}
.pijp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.fase{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 14px;cursor:pointer;border-top:4px solid var(--c);position:relative}
.fase:hover{background:#fafcfe}
.fase.sel{outline:2px solid var(--dark)}
.fase b{display:block;font-size:30px;font-weight:500;line-height:1.1}
.fase>span{display:block;font-size:14px;font-weight:500}
.fase>small{display:block;font-size:12px;color:var(--mute)}
.fase:not(:last-child)::after{content:'›';position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:#bbb;font-size:20px;z-index:1}
.pijp-balk{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:10px;background:#eef0f3}
.pijp-balk i{display:block}
.fase-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
.delta{display:block;font-size:12px;margin-top:2px}
.delta.goed{color:var(--ok)}.delta.slecht{color:var(--bad)}.delta.neutraal{color:var(--mute)}
.cp-onder{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.cp-chart{width:100%;height:auto;display:block}
.cp-chart .v{font-size:11px;fill:#444}
.cp-chart .l{font-size:11px;fill:var(--mute)}
.cp-tbl{max-height:560px;overflow:auto}
@media (max-width:900px){.pijp{grid-template-columns:repeat(2,1fr)}.fase::after{display:none}.cp-onder{grid-template-columns:1fr}}
.cp-onder th:last-child,.cp-onder td:last-child{padding-right:16px}

.voorwaarde{background:#fffbe6;border:1px solid #f5d29b;border-left:4px solid #f59e0b;border-radius:6px;padding:10px 14px;margin:10px 0;font-size:14px}

/* ---------- zoekbalk ---------- */
#zoek{position:relative;width:300px;max-width:40vw}
#zoek-in{width:100%;background:#2b2b29;border:1px solid #444;color:#fff;padding:7px 10px;border-radius:4px;font-size:14px}
#zoek-in::placeholder{color:#999}
#zoek-in:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.zoek-uit{position:absolute;right:0;top:calc(100% + 4px);width:min(560px,92vw);max-height:70vh;overflow:auto;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:50}
.zr{display:block;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:14px}
a.zr:hover,.zr.sel{background:#eef8fd}
.zr-sub{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.zr-kop{padding:6px 12px;font-size:12px;font-weight:700;color:var(--mute);background:var(--bg);text-transform:uppercase;letter-spacing:.03em}
@media (max-width:760px){#zoek{order:3;width:100%;max-width:none;padding-bottom:8px}}

/* ---------- releases ---------- */
.dropzone{border:2px dashed #b9c3cc;border-radius:8px;padding:22px;text-align:center;background:#fafbfc;transition:background .15s,border-color .15s}
.dropzone.over{border-color:var(--blue);background:#eef8fd}
.rel-item{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:6px;padding:10px 12px;margin-top:10px;background:#fff}
.rel-item.lezen{border-left-color:#9ca3af;opacity:.85}
.rel-item.fout{border-left-color:var(--bad)}
.rel-item .check span{white-space:normal}

/* ---------- zelfsturend: bel, Jouw actie, KPI's, metingen ---------- */
.bel{position:relative;background:none!important;border:1px solid #555!important;color:#ddd!important;padding:4px 9px!important;font-size:15px!important}
.bel b{position:absolute;top:-7px;right:-8px;background:var(--bad);color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;font-weight:700}
.bel.heeft{border-color:var(--bad)!important}
.jouw-actie{background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:8px;padding:14px 16px;margin:6px 0 14px}
.jouw-actie h2{margin:0 0 10px;font-size:20px}
.teller{display:inline-block;background:var(--bad);color:#fff;border-radius:12px;font-size:13px;padding:1px 9px;vertical-align:middle}
.niets{font-size:16px;color:var(--ok);font-weight:500;padding:6px 0}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.mk{background:#fff;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:6px;padding:10px 12px;margin:0 0 8px;color:var(--ink)}
.mk-grid .mk{margin:0}
.mk.k-rood{background:#fff;color:var(--ink);border-left-color:var(--bad)}
.mk.k-oranje{background:#fff;color:var(--ink);border-left-color:var(--warn)}
.mk.k-groen{background:#fff;color:var(--ink);border-left-color:var(--ok)}
.mk-kop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.mk-kop a{color:var(--ink);text-decoration:none}
.mk-tekst{margin:4px 0 2px;color:var(--mute)}
.mk-acties{margin-top:8px;gap:6px}
.mk-acties button{padding:6px 12px}
.kpi4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}
.kt{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.kt b{display:block;font-size:26px;line-height:1.1}
.kt span{display:block;font-weight:500;margin-top:2px}
.kt small{display:block;color:var(--mute);font-size:12px;margin-top:3px}
.kt.goed b{color:var(--ok)} .kt.slecht b{color:var(--bad)}
.cp-kop{margin:18px 0 8px;font-size:16px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.fase-balk{display:flex;gap:3px;margin:8px 0}
.fase-balk div{background:var(--c);color:#fff;border-radius:4px;padding:8px 10px;min-width:90px;overflow:hidden}
.fase-balk b{display:block;font-size:18px}
.fase-balk span{font-size:12px;opacity:.9;white-space:nowrap}
.inbox-rij{padding:8px 0;border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap}
.alleen-m{display:none}
@media (max-width:760px){
  .kpi4{grid-template-columns:1fr 1fr}
  .kt b{font-size:22px}
  .mk-grid{grid-template-columns:1fr}
  .alleen-m{display:block;width:100%;margin:4px 0 12px}
  .cp-vol{display:none}
  .cp-vol.toon{display:block}
  .fase-balk{flex-direction:column}
  .fase-balk div{flex:none!important}
}
@media (max-width:1500px){#zoek{width:220px}}
.klein{padding:2px 8px;font-size:12px;margin-left:6px}

/* ---------- Documentenmodule ---------- */
.modsw{display:inline-flex;align-self:center;border:1px solid #555;border-radius:4px;overflow:hidden;margin-right:10px;flex:none}
.modsw a{padding:6px 12px!important;border:0!important;font-size:13px;color:#ccc;cursor:pointer}
.modsw a.on{background:var(--blue);color:#fff}
.doc-camera{font-size:16px;padding:12px 20px}
.doc-preview{max-width:260px;max-height:180px;border-radius:6px;margin-top:10px;display:block}
.doc-kand{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:6px;padding:10px 12px;margin-bottom:8px;background:#fff}
.doc-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.doc-foto{display:flex;flex-direction:column;gap:2px;border:2px dashed #b9c3cc;border-radius:8px;padding:8px;cursor:pointer;background:#fafbfc;min-height:150px}
.doc-foto.klaar{border:2px solid var(--ok);background:#fff}
.doc-foto img{width:100%;height:100px;object-fit:cover;border-radius:4px}
.doc-cam{font-size:34px;text-align:center;padding:14px 0}
.doc-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.doc-route{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer}
.doc-route.on{border:2px solid var(--blue);background:#eef8fd}
.doc-docrij{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-top:1px solid var(--line);padding:10px 0}
.doc-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.doc-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.doc-pdf{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;font-weight:700;text-decoration:none}
.doc-mail{margin-top:12px}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
input.leeg{border-color:#f5b971;background:var(--warnbg)}
@media (max-width:700px){.doc-kand{flex-direction:column;align-items:stretch}.doc-fotos{grid-template-columns:repeat(2,1fr)}.doc-docrij{flex-direction:column}}
.doc-route input[type=radio]{width:auto;align-self:flex-start;margin:0 0 2px}