:root{
  --bg:#EEF2F8; --surface:#FFFFFF; --ink:#16213A; --muted:#5A6780; --line:#D6DDEA;
  --brand:#204A97; --brand-ink:#FFFFFF; --brand-soft:#E3EAF6; --pink:#E6007E; --pink-soft:#FCE4F1;
  --ok:#2E8B3E; --ok-soft:#E2F2E5; --warn:#B7791F; --warn-soft:#FFF4CC; --bad:#C0392B; --bad-soft:#FBE7E4;
  --shadow:0 1px 2px rgba(22,33,58,.06),0 4px 14px rgba(22,33,58,.07);
  --radius:16px; --tabh:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1522; --surface:#182033; --ink:#E3E8F2; --muted:#97A3BA; --line:#2A3550;
    --brand:#7FA3EA; --brand-ink:#0E1422; --brand-soft:#22304D; --pink:#FF4FA8; --pink-soft:#3A1B2D;
    --ok:#6CC07A; --ok-soft:#1C3324; --warn:#F0D98A; --warn-soft:#3A3113; --bad:#FF8A7A; --bad-soft:#3B1D1A;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1522; --surface:#182033; --ink:#E3E8F2; --muted:#97A3BA; --line:#2A3550;
  --brand:#7FA3EA; --brand-ink:#0E1422; --brand-soft:#22304D; --pink:#FF4FA8; --pink-soft:#3A1B2D;
  --ok:#6CC07A; --ok-soft:#1C3324; --warn:#F0D98A; --warn-soft:#3A3113; --bad:#FF8A7A; --bad-soft:#3B1D1A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.3);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
h1,h2,h3{margin:0;line-height:1.2}
.muted{color:var(--muted)}
.small{font-size:.8125rem}

/* ---------- login ---------- */
#login{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));gap:18px;text-align:center}
#login img{width:min(280px,70vw);height:auto;background:#fff;border-radius:14px;padding:6px 8px;box-shadow:var(--shadow)}
#login h1{font-size:1.35rem;color:var(--brand)}
.dots{display:flex;gap:14px;height:20px;margin:4px 0}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--brand);display:block;transition:background .1s}
.dots i.on{background:var(--brand)}
.dots.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.keys{display:grid;grid-template-columns:repeat(3,72px);gap:14px}
.keys button{width:72px;height:72px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--shadow);font-size:1.6rem;font-weight:500}
.keys button:active{background:var(--brand-soft)}
.keys .ghost{background:transparent;box-shadow:none;font-size:1rem;color:var(--muted)}
.keys .go{background:var(--brand);color:var(--brand-ink);font-size:1rem;font-weight:600}
.keys .go:disabled{opacity:.35}
#loginMsg{min-height:1.4em;color:var(--bad);font-weight:500}

/* ---------- shell ---------- */
#main{min-height:100%;padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 16px)}
header.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);padding:calc(8px + env(safe-area-inset-top)) 16px 8px;display:flex;align-items:center;gap:12px}
header.top img{height:34px;width:auto;display:block;background:#fff;border-radius:6px}
header.top .sp{flex:1}
.iconbtn{width:44px;height:44px;border-radius:12px;border:0;background:transparent;display:grid;place-items:center;color:var(--brand)}
.iconbtn:active,.iconbtn.actief{background:var(--brand-soft)}
.iconbtn svg{width:24px;height:24px}
.wrap{padding:16px;max-width:720px;margin:0 auto}
.banner{margin:12px 16px 0;padding:10px 14px;border-radius:12px;font-size:.9rem;max-width:688px}
@media (min-width:720px){.banner{margin-left:auto;margin-right:auto}}
.banner.warn{background:var(--warn-soft);color:var(--ink);border:1px solid var(--warn)}
.banner.info{background:var(--brand-soft);color:var(--ink)}
.banner.bad{background:var(--bad-soft);border:1px solid var(--bad)}
.banner button{margin-left:8px}

nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
nav.tabs button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:12px;color:var(--muted);font-size:.72rem;font-weight:600;position:relative}
nav.tabs button svg{width:24px;height:24px}
nav.tabs button[aria-current="page"]{color:var(--brand)}
nav.tabs .n{position:absolute;top:0;left:calc(50% + 6px);min-width:20px;height:20px;border-radius:10px;background:var(--pink);color:#fff;font-size:.7rem;display:grid;place-items:center;padding:0 5px}

/* ---------- inhoud ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.tile{background:var(--surface);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:var(--shadow)}
.tile b{display:block;font-size:1.5rem;line-height:1.1;color:var(--brand)}
.tile span{font-size:.72rem;color:var(--muted);font-weight:600}
.tile.pink b{color:var(--pink)}
.grp{margin:20px 0 8px;display:flex;align-items:baseline;gap:8px}
.grp h2{font-size:1.05rem;color:var(--brand)}
.grp .c{color:var(--muted);font-size:.85rem}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.card .head{display:flex;gap:10px;align-items:flex-start}
.card .adres{font-weight:700;font-size:1.05rem}
.card .plaats{color:var(--muted);font-size:.85rem}
.card .what{margin:10px 0 2px;font-weight:600}
.card .why{color:var(--muted);font-size:.85rem;margin-bottom:10px}
.card.nieuw{border-left:4px solid var(--pink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.chip.verkocht{background:var(--pink-soft);color:var(--pink)}
.chip.grijs{background:var(--line);color:var(--muted)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.ico{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.ico svg{width:24px;height:24px}
.ico.verkocht{background:var(--pink-soft);color:var(--pink)}
.ico.leeg{background:var(--line);color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btn{min-height:48px;padding:10px 16px;border-radius:12px;border:1.5px solid var(--brand);background:transparent;color:var(--brand);font-weight:700;flex:1 1 150px}
.btn.primary{background:var(--brand);color:var(--brand-ink)}
.btn.pink{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.soft{border-color:transparent;background:var(--brand-soft)}
.btn.link{border:0;background:transparent;min-height:40px;flex:0 0 auto;padding:6px 8px;font-weight:600;color:var(--muted)}
.btn:disabled{opacity:.5}
.btn:active{filter:brightness(.92)}
.empty{text-align:center;color:var(--muted);padding:36px 12px}
.empty b{display:block;color:var(--ink);font-size:1.1rem;margin-bottom:4px}
input[type=search],input[type=text],textarea,input[type=date]{width:100%;font:inherit;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--brand);border-color:transparent}
.filters{display:flex;gap:8px;overflow-x:auto;margin:12px -16px;padding:0 16px;scrollbar-width:none}
.filters button{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:600;font-size:.85rem;white-space:nowrap}
.filters button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600}
.cb{width:26px;height:26px;accent-color:var(--brand);flex:none}
h3.sec{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:22px 0 6px}

/* route */
.stop{display:flex;gap:12px;position:relative;padding-bottom:14px}
.stop .nr{width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:700;flex:none}
.stop .nr.depot{background:var(--pink)}
.stop:not(:last-child)::before{content:"";position:absolute;left:16px;top:36px;bottom:0;width:2px;background:var(--line)}
.stop .body{flex:1;min-width:0}
.stop .leg{font-size:.8rem;color:var(--muted)}
.stop .btns .btn{min-height:42px;flex:1 1 100px;padding:6px 10px}
.tiles.two{grid-template-columns:1fr 1fr}
.tiles.two .tile b{font-size:1.25rem}

/* sheet */
#sheetBg{position:fixed;inset:0;background:rgba(10,16,30,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center}
#sheet{background:var(--surface);width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto;animation:up .2s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}}
#sheet .grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px}
#sheet h2{font-size:1.2rem;margin-bottom:2px}
.sluit{float:right;position:sticky;top:6px;z-index:3;width:44px;height:44px;margin:-4px -6px 4px 10px;border-radius:50%;border:0;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.sluit svg{width:22px;height:22px}
.sheetvoet{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));margin:14px -16px calc(-20px - env(safe-area-inset-bottom));padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);z-index:3}
.sheetvoet .btn{width:100%;flex:1 1 100%}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.seg button{min-height:56px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;display:flex;gap:8px;align-items:center;justify-content:center}
.seg button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.seg svg{width:22px;height:22px}
.log{font-size:.85rem;color:var(--muted);padding:4px 0}
.switch{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}

/* toast */
#toast{position:fixed;left:12px;right:12px;bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 14px);z-index:80;display:flex;justify-content:center;pointer-events:none}
#toast div{background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:14px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;pointer-events:auto;max-width:560px}
#toast.fout div{background:var(--bad);color:#fff}
#toast button{border:0;background:transparent;color:inherit;font-weight:800;text-decoration:underline;padding:4px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---- vervanging van inline stijlen (nodig voor een strikte CSP zonder unsafe-inline) ---- */
[data-u="1"]{margin:0 0 14px!important}
[data-u="2"]{margin-top:28px!important}
[data-u="3"]{margin-bottom:10px!important}
[data-u="4"]{flex:1!important;min-width:0!important}
[data-u="5"]{margin:-6px -6px 0 0!important}
[data-u="6"]{margin-bottom:8px!important}
[data-u="7"]{padding:4px 14px!important}
[data-u="8"]{font-size:1.1rem!important;margin-bottom:4px!important}
[data-u="9"]{margin:12px 0!important}
[data-u="10"]{margin:0!important}
[data-u="11"]{margin:12px 0 0!important}
[data-u="12"]{font-size:1.05rem!important;margin-bottom:8px!important}
[data-u="13"]{font-weight:600!important}
[data-u="14"]{margin-top:2px!important}
[data-u="15"]{margin-top:14px!important}
[data-u="16"]{margin:14px 0 0!important}
[data-u="17"]{margin-top:6px!important}
[data-u="18"]{margin-top:8px!important}
[data-u="19"]{text-decoration:none!important;display:grid!important;place-items:center!important}
[data-u="20"]{text-decoration:none!important;display:grid!important;place-items:center!important;text-align:center!important}
[data-u="21"]{margin-top:12px!important}
[data-u="22"]{text-align:center!important;margin-top:12px!important}
[data-u="23"]{margin-top:26px!important}
[data-u="24"]{margin:8px 0 4px!important}
[data-u="25"]{grid-template-columns:repeat(3,1fr)!important}
[data-u="26"]{margin-top:4px!important}
[data-u="27"]{margin:10px 0 0!important}
[data-u="28"]{margin-top:18px!important}