/* Sparki Aankoop — stijlen. Geen externe lettertypes: systeemfonts (Segoe UI op Windows). */

/* Layout: werkbalk (wie ben ik, tijd, bel) + tabs bovenaan; inhoud max 1240px; dossierdetail als lade rechts */
:root{
  --bg:#f1f4f3; --surface:#ffffff; --sunk:#e7ecea; --ink:#15211e; --muted:#566662; --faint:#869490;
  --line:#d7dfdc; --line-strong:#bcc8c4;
  --accent:#0c6b5b; --accent-hover:#095649; --accent-ink:#ffffff; --accent-soft:#dbede8;
  --danger:#b3261e; --danger-soft:#fbe3e0; --warn:#9f5208; --warn-soft:#fdebd2; --ok:#1b7440; --ok-soft:#daf0e1;
  --shadow:0 1px 2px rgb(21 33 30 / .06), 0 10px 30px rgb(21 33 30 / .10);
  --t-bu-bg:#ece8fb; --t-bu-fg:#4a3998;
  --t-beh-bg:#e0ebfb; --t-beh-fg:#1d4d93;
  --t-con-bg:#faefcc; --t-con-fg:#755000;
  --t-dir-bg:#fde2cd; --t-dir-fg:#963f07;
  --t-ok-bg:#d6efdd; --t-ok-fg:#155f35;
  --t-lev-bg:#d4eeee; --t-lev-fg:#0b5a5c;
  --t-done-bg:#e3e8ea; --t-done-fg:#3d4a50;
  --t-vr-bg:#fbe0ed; --t-vr-fg:#912359;
  --t-nok-bg:#fadfdb; --t-nok-fg:#9e2119;
  --t-ann-bg:#ebeae6; --t-ann-fg:#67635b;
  --f-ui:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-head:"Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-mono:"Cascadia Mono", Consolas, ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1413; --surface:#161f1d; --sunk:#1d2826; --ink:#e2eae7; --muted:#a0b2ad; --faint:#728480;
    --line:#2a3633; --line-strong:#3b4a47;
    --accent:#4fc4aa; --accent-hover:#71d4be; --accent-ink:#04201a; --accent-soft:#16392f;
    --danger:#f2887c; --danger-soft:#3d1c19; --warn:#f0b164; --warn-soft:#382a13; --ok:#83d6a0; --ok-soft:#173322;
    --shadow:0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .45);
    --t-bu-bg:#2a2446; --t-bu-fg:#c8bcfa; --t-beh-bg:#1c2b43; --t-beh-fg:#a8c6f5;
    --t-con-bg:#382f14; --t-con-fg:#efd17d; --t-dir-bg:#3d2613; --t-dir-fg:#f5b686;
    --t-ok-bg:#163221; --t-ok-fg:#92d7a8; --t-lev-bg:#123435; --t-lev-fg:#8dd5d5;
    --t-done-bg:#252b2f; --t-done-fg:#b6c0c5; --t-vr-bg:#3c1b2b; --t-vr-fg:#f2a5ca;
    --t-nok-bg:#3e1a17; --t-nok-fg:#f3a49b; --t-ann-bg:#2b2926; --t-ann-fg:#bcb7af;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1413; --surface:#161f1d; --sunk:#1d2826; --ink:#e2eae7; --muted:#a0b2ad; --faint:#728480;
  --line:#2a3633; --line-strong:#3b4a47;
  --accent:#4fc4aa; --accent-hover:#71d4be; --accent-ink:#04201a; --accent-soft:#16392f;
  --danger:#f2887c; --danger-soft:#3d1c19; --warn:#f0b164; --warn-soft:#382a13; --ok:#83d6a0; --ok-soft:#173322;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .45);
  --t-bu-bg:#2a2446; --t-bu-fg:#c8bcfa; --t-beh-bg:#1c2b43; --t-beh-fg:#a8c6f5;
  --t-con-bg:#382f14; --t-con-fg:#efd17d; --t-dir-bg:#3d2613; --t-dir-fg:#f5b686;
  --t-ok-bg:#163221; --t-ok-fg:#92d7a8; --t-lev-bg:#123435; --t-lev-fg:#8dd5d5;
  --t-done-bg:#252b2f; --t-done-fg:#b6c0c5; --t-vr-bg:#3c1b2b; --t-vr-fg:#f2a5ca;
  --t-nok-bg:#3e1a17; --t-nok-fg:#f3a49b; --t-ann-bg:#2b2926; --t-ann-fg:#bcb7af;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--surface)}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--f-head); font-weight:600; margin:0; text-wrap:balance; letter-spacing:.005em}
a{color:var(--accent)}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:500}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

/* top */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--surface); border-bottom:1px solid var(--line)}
.top-in{max-width:1240px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:10px; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}
.brand{display:flex; align-items:baseline; gap:8px; margin-right:auto}
.brand b{font-family:var(--f-head); font-size:19px; letter-spacing:.01em}
.brand span{color:var(--muted); font-size:13px}
.spark{display:inline-block; width:10px; height:16px; background:var(--accent); clip-path:polygon(55% 0,0 58%,45% 58%,35% 100%,100% 40%,55% 40%); transform:translateY(2px)}
.who{display:flex; align-items:center; gap:8px}
.who label{font-size:12.5px; color:var(--muted)}
.who select{min-width:0; max-width:240px}
.clock{display:flex; align-items:center; gap:8px; font-size:13px}
.clock .sim{color:var(--warn); font-weight:500}
.tabs{max-width:1240px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.tabs button{border:0; background:none; padding:9px 12px 10px; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; white-space:nowrap; font-weight:500}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.tabs .cnt{display:inline-block; margin-left:6px; min-width:18px; padding:0 5px; border-radius:9px; background:var(--accent-soft); color:var(--accent); font-size:11.5px; text-align:center}

/* controls */
select,input[type=text],input[type=date],input[type=email],input[type=url],textarea{background:var(--surface); border:1px solid var(--line-strong); border-radius:6px; padding:7px 9px; width:100%}
textarea{min-height:80px; resize:vertical}
input:disabled,select:disabled{opacity:.6}
.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--surface); border-radius:6px; padding:7px 12px; cursor:pointer; font-weight:500; white-space:nowrap}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn.ghost-danger{color:var(--danger); border-color:transparent; background:transparent}
.btn.ghost-danger:hover{border-color:var(--danger)}
.btn.quiet{border-color:transparent; background:transparent; color:var(--muted)}
.btn.quiet:hover{color:var(--ink); border-color:var(--line-strong)}
.btn.sm{padding:4px 9px; font-size:12.5px}
.bell{position:relative; width:38px; height:36px; justify-content:center; padding:0}
.bell svg{width:18px; height:18px}
.bell .badge{position:absolute; top:-5px; right:-6px; background:var(--danger); color:#fff; font-size:11px; font-weight:600; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 4px; font-variant-numeric:tabular-nums}

/* layout */
.wrap{max-width:1240px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:20px 60px}
.pagehead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px}
.pagehead h1{font-size:24px}
.pagehead p{margin:4px 0 0; color:var(--muted); max-width:70ch}
.stack{display:grid; gap:18px}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:18px}
.block{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); min-width:0}
.block > header{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line)}
.block > header h2{font-size:16px}
.block > header .count{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.block > header .right{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.block .body{padding:14px}
.empty{padding:22px 14px; color:var(--muted); text-align:center}
.banner{border-radius:var(--r); padding:10px 14px; display:flex; gap:10px; align-items:flex-start; margin-bottom:14px}
.banner.warn{background:var(--warn-soft); color:var(--warn)}
.banner.bad{background:var(--danger-soft); color:var(--danger)}
.banner.info{background:var(--accent-soft); color:var(--accent)}
.banner b{font-weight:600}

/* tables */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.tbl th{font-size:11.5px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.row{cursor:pointer}
.tbl tr.row:hover td{background:var(--sunk)}
.tbl tr.urgent td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.tbl .t-desc{min-width:220px}
.tbl .t-desc b{font-weight:500}
.tbl .sub{color:var(--muted); font-size:12.5px}
.nr{font-family:var(--f-mono); font-size:12.5px; white-space:nowrap}

/* pills & chips */
.pill{display:inline-flex; align-items:center; gap:6px; padding:2px 9px 2px 8px; border-radius:20px; font-size:12px; font-weight:500; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.s-bu{background:var(--t-bu-bg); color:var(--t-bu-fg)}
.s-behandeling{background:var(--t-beh-bg); color:var(--t-beh-fg)}
.s-controle{background:var(--t-con-bg); color:var(--t-con-fg)}
.s-directie{background:var(--t-dir-bg); color:var(--t-dir-fg)}
.s-goedgekeurd{background:var(--t-ok-bg); color:var(--t-ok-fg)}
.s-levering{background:var(--t-lev-bg); color:var(--t-lev-fg)}
.s-afgerond{background:var(--t-done-bg); color:var(--t-done-fg)}
.s-vraag{background:var(--t-vr-bg); color:var(--t-vr-fg)}
.s-afgekeurd{background:var(--t-nok-bg); color:var(--t-nok-fg)}
.s-geannuleerd{background:var(--t-ann-bg); color:var(--t-ann-fg)}
.flags{display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:3px}
.flag{font-size:11px; font-weight:600; letter-spacing:.03em; padding:1px 6px; border-radius:4px; white-space:nowrap}
.flag.red{background:var(--danger-soft); color:var(--danger)}
.flag.orange{background:var(--warn-soft); color:var(--warn)}
.flag.grey{background:var(--sunk); color:var(--muted)}
.sigs{display:flex; flex-wrap:wrap; gap:5px}
.sig{font-size:12px; padding:2px 8px; border-radius:4px; border:1px solid var(--line-strong); white-space:nowrap}
.sig.ok{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.sig.nok{background:var(--danger-soft); color:var(--danger); border-color:transparent}
.sig.off{color:var(--faint); border-style:dashed}
.dual{font-size:11px; font-weight:600; padding:1px 6px; border-radius:4px; background:var(--t-dir-bg); color:var(--t-dir-fg); white-space:nowrap}

/* forms */
.form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px}
.form .full{grid-column:1/-1}
.field{display:grid; gap:5px; min-width:0}
.field > span{font-weight:500; font-size:13px}
.field .req{color:var(--danger)}
.field .help{font-size:12px; color:var(--muted)}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; width:max-content; max-width:100%}
.seg label{position:relative; padding:6px 12px; cursor:pointer; border-right:1px solid var(--line-strong); display:flex; gap:6px; align-items:center}
.seg label:last-child{border-right:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label:has(input:checked){background:var(--accent-soft); color:var(--accent); font-weight:500}
.seg label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:-2px}
.check{display:flex; gap:8px; align-items:center; cursor:pointer}
.note{border-left:3px solid var(--warn); background:var(--warn-soft); color:var(--warn); padding:8px 10px; border-radius:0 6px 6px 0; font-size:13px}
.note.bad{border-color:var(--danger); background:var(--danger-soft); color:var(--danger)}
.note.info{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.formfoot{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; padding-top:6px}
@media (max-width:640px){ .form{grid-template-columns:1fr} }

/* drawer */
.scrim{position:fixed; inset:0; background:rgb(10 18 16 / .35); z-index:40}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(800px,100%); background:var(--bg); z-index:41; overflow-y:auto; box-shadow:var(--shadow); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); padding-right:env(safe-area-inset-right,0px)}
.d-head{position:sticky; top:0; z-index:2; background:var(--surface); border-bottom:1px solid var(--line); padding:12px 18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.d-body{padding:18px; display:grid; gap:16px}
.d-title h2{font-size:21px; line-height:1.25}
.d-meta{display:flex; flex-wrap:wrap; gap:4px 14px; color:var(--muted); font-size:13px; margin-top:6px}
.refbox{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; background:var(--surface); border:1px solid var(--accent); border-radius:var(--r); padding:12px 14px}
.refbox .val{font-family:var(--f-mono); font-size:20px; font-weight:500; letter-spacing:.02em}
.refbox p{margin:0; font-size:12.5px; color:var(--muted); flex-basis:100%}
.steps{display:flex; overflow-x:auto; gap:0; padding-bottom:2px}
.step{flex:1 0 92px; display:grid; gap:5px; font-size:11.5px; color:var(--muted); padding-right:6px}
.step i{display:block; height:4px; border-radius:2px; background:var(--line)}
.step.done i{background:var(--accent)}
.step.cur i{background:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.step.cur{color:var(--ink); font-weight:600}
.step.skip{text-decoration:line-through; color:var(--faint)}
.step.skip i{background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 7px)}
.step.stop i{background:var(--danger)}
.actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.panel{background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:14px; display:grid; gap:10px}
.kv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px}
.kv div{min-width:0}
.kv dt{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 2px}
.kv dd{margin:0; overflow-wrap:anywhere}
.kv .full{grid-column:1/-1}
@media (max-width:560px){ .kv{grid-template-columns:1fr} }
.comments{display:grid; gap:10px}
.cmt{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px}
.cmt.vraag{border-left:3px solid var(--t-vr-fg)}
.cmt.antwoord{border-left:3px solid var(--accent)}
.cmt.afkeur{border-left:3px solid var(--danger)}
.cmt header{display:flex; gap:8px; align-items:baseline; font-size:12.5px; color:var(--muted); margin-bottom:3px}
.cmt header b{color:var(--ink); font-weight:600}
.cmt p{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.timeline{list-style:none; margin:0; padding:0 0 0 16px; border-left:2px solid var(--line); display:grid; gap:10px}
.timeline li{position:relative}
.timeline li::before{content:""; position:absolute; left:-22px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong)}
.timeline li.st::before{background:var(--accent); border-color:var(--accent)}
.timeline .when{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.timeline .what{font-weight:500}
.timeline .trans{font-size:12.5px; color:var(--muted)}
details.mails summary{cursor:pointer; font-weight:500}
.mail{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:10px 12px; display:grid; gap:4px}
.mail .hd{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--muted)}
.mail .subj{font-weight:600}
.mail pre{margin:0; white-space:pre-wrap; font-family:var(--f-ui); font-size:13px; color:var(--ink); overflow-wrap:anywhere}

/* notifications */
.pop{position:fixed; z-index:45; top:calc(env(safe-area-inset-top,0px) + 58px); right:max(12px, env(safe-area-inset-right,0px)); width:min(420px, calc(100% - 24px)); max-height:70vh; overflow:auto; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow)}
.pop header{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface)}
.nt{display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:none; padding:10px 12px; cursor:pointer}
.nt:hover{background:var(--sunk)}
.nt.unread{background:var(--accent-soft)}
.nt .s{font-weight:600; font-size:13px}
.nt .t{font-size:12.5px; color:var(--muted)}

/* dashboard */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px}
.kpi .v{font-family:var(--f-head); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px}
.kpi .h{font-size:12px; color:var(--muted)}
.bars{display:grid; gap:7px}
.bar{display:grid; grid-template-columns:minmax(90px,170px) 1fr auto; gap:10px; align-items:center; font-size:13px}
.bar .lab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar .track{height:12px; background:var(--sunk); border-radius:3px; overflow:hidden}
.bar .fill{height:100%; background:var(--accent); border-radius:3px}
.bar .val{font-variant-numeric:tabular-nums; min-width:48px; text-align:right}

/* admin */
.adm-row{display:grid; grid-template-columns:minmax(120px,1fr) minmax(140px,1.4fr) minmax(140px,1.2fr) auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.adm-head{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:1px solid var(--line-strong)}
@media (max-width:700px){ .adm-row{grid-template-columns:1fr} .adm-head{display:none} }
.cat{display:grid; gap:6px; padding:10px 0; border-bottom:1px solid var(--line)}
.cat-top{display:flex; gap:8px; align-items:center}
.togs{display:flex; flex-wrap:wrap; gap:5px}
.tog{font-size:12px; padding:3px 8px; border-radius:14px; border:1px solid var(--line-strong); background:var(--surface); cursor:pointer}
.tog[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

/* scenarios */
.scn{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:14px; border-bottom:1px solid var(--line)}
.scn:last-child{border-bottom:0}
.scn .n{font-family:var(--f-mono); font-size:13px; color:var(--accent); font-weight:500; padding-top:2px}
.scn h3{font-size:15.5px}
.scn p{margin:2px 0 6px; color:var(--muted)}
.scn ol{margin:0 0 8px; padding-left:18px}
.scn .row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}

/* toast & modal */
.toast{position:fixed; z-index:60; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; box-shadow:var(--shadow); max-width:min(560px, calc(100% - 32px)); font-size:13.5px}
.toast.bad{background:var(--danger); color:#fff}
.toast.warn{background:var(--warn); color:#fff}
.modal-bg{position:fixed; inset:0; z-index:55; background:rgb(10 18 16 / .4); display:grid; place-items:center; padding:16px}
.modal{background:var(--surface); border-radius:10px; padding:18px; width:min(520px,100%); display:grid; gap:12px; box-shadow:var(--shadow); max-height:90vh; overflow:auto}
.modal h3{font-size:18px}
.loading{padding:60px 16px; text-align:center; color:var(--muted)}

/* rechtenmodule */
.rt td{vertical-align:middle; padding:6px 8px}
.rt th{padding:8px}
.rt input[type=text],.rt input[type=email],.rt input[type=date],.rt select{padding:5px 7px; font-size:13px}
.rt .w-name{min-width:130px}
.rt .w-mail{min-width:190px}
.rt .w-title{min-width:120px}
.rt .w-dep{min-width:150px}
.rt .togs{flex-wrap:nowrap}
.rt td:has(> .togs){min-width:300px}
.rt select{min-width:150px}
.rt tr.inactive td > *{opacity:.55}
.rt tr.inactive td:last-child > *{opacity:1}
.rt .dates{display:flex; gap:4px; margin-top:4px}
.rt .dates input{width:132px}
.chips{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.chip{display:inline-flex; gap:2px; align-items:center; padding:2px 2px 2px 9px; border-radius:14px; background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:500}
.chip button{border:0; background:none; color:inherit; cursor:pointer; padding:0 6px; font-size:15px; line-height:1; border-radius:10px}
.chip button:hover{background:var(--surface)}
.chip.off{background:var(--sunk); color:var(--muted)}
.chips select{width:auto; max-width:180px; padding:3px 6px; font-size:12.5px}
.matrix th,.matrix td{text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:left}
.yes{color:var(--ok); font-weight:600}
.no{color:var(--faint)}
.attn{margin:0; padding-left:18px; display:grid; gap:4px}
.attn li.bad{color:var(--danger)}
.attn li.warn{color:var(--warn)}
.rlog{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.rlog li{border-left:2px solid var(--line-strong); padding-left:10px}
.rlog .when{font-size:12px; color:var(--muted)}
.mine{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.mine .chip{padding-right:9px}

/* serverversie */
html{-webkit-text-size-adjust:100%}
body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
.usermenu{display:flex; align-items:center; gap:8px; font-size:13px}
.usermenu b{font-weight:600}
.att{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.att:last-child{border-bottom:0}
.att .meta{font-size:12px; color:var(--muted)}
.upl{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.keybox{font-family:var(--f-mono); font-size:13px; background:var(--sunk); border:1px dashed var(--line-strong); padding:10px; border-radius:6px; overflow-wrap:anywhere; user-select:all}
.st-ok{color:var(--ok)} .st-bad{color:var(--danger)} .st-warn{color:var(--warn)}

/* aanmelden als */
.impbar{background:var(--warn-soft); color:var(--warn); border-top:1px solid var(--line)}
.impbar-in{max-width:1240px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:8px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px}
.impbar-in span{flex:1 1 300px}
/* handleiding */
.helpwrap{display:grid; grid-template-columns:minmax(180px,240px) 1fr}
.helpnav{display:flex; flex-direction:column; gap:2px; padding:12px; border-right:1px solid var(--line)}
.helpnav button{text-align:left; border:0; background:none; padding:7px 10px; border-radius:6px; cursor:pointer; color:var(--muted); font-weight:500}
.helpnav button:hover{background:var(--sunk); color:var(--ink)}
.helpnav button[aria-current="page"]{background:var(--accent-soft); color:var(--accent)}
.helpdoc{max-width:72ch; line-height:1.6}
.helpdoc h2{font-size:22px; margin:0 0 10px}
.helpdoc h3{font-size:17px; margin:18px 0 6px}
.helpdoc h4{font-size:15px; margin:14px 0 4px}
.helpdoc p{margin:0 0 10px}
.helpdoc ul,.helpdoc ol{margin:0 0 10px; padding-left:22px; display:grid; gap:4px}
.helpdoc code{font-family:var(--f-mono); font-size:.92em; background:var(--sunk); padding:1px 5px; border-radius:4px}
@media (max-width:720px){ .helpwrap{grid-template-columns:1fr} .helpnav{border-right:0; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap} }