/* ============================================================
   TOKENS — licht is de bare :root, donker herdefinieert alleen
   ============================================================ */
:root{
  --ground:#ffffff; --surface:#f5f8fb; --surface-2:#eaf1f7; --surface-sunk:#eef3f8;
  --line:#d8e2ec; --line-soft:#e8eef5;
  --ink:#101f36; --ink-2:#3b4d68; --ink-3:#6b7d95; --ink-invert:#ffffff;

  --accent:#0c7f9e; --accent-hover:#096a85; --accent-ink:#075d75; --accent-bg:#e4f2f7;
  --navy:#1b355c;
  --brand-a:#00b1d4; --brand-b:#158cb3; --brand-c:#1b355c;

  --good:#16704a; --good-bg:#e6f4ec;
  --info:#1d5fa8; --info-bg:#e6eff9;
  --warn:#96550c; --warn-bg:#fdf2e0;
  --stop:#a3341f; --stop-bg:#fbeae6;

  --urg-laag:#6b7d95; --urg-normaal:#1d5fa8; --urg-hoog:#96550c; --urg-spoed:#a3341f;

  --shadow-rest:0 1px 2px rgba(16,31,54,.05),0 8px 24px -12px rgba(16,31,54,.14);
  --shadow-float:0 4px 12px rgba(16,31,54,.09),0 16px 40px -16px rgba(16,31,54,.22);

  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0d1724; --surface:#131f30; --surface-2:#1b2a3e; --surface-sunk:#17253a;
    --line:#2a3c53; --line-soft:#213246;
    --ink:#e8eef6; --ink-2:#a9bacf; --ink-3:#7f90a8; --ink-invert:#0d1724;
    --accent:#3fc8e4; --accent-hover:#7bd9ee; --accent-ink:#7bd9ee; --accent-bg:#102c39;
    --navy:#8fb4d8;
    --brand-a:#35BCD8; --brand-b:#398ACA; --brand-c:#5A9BD8;
    --good:#5ec899; --good-bg:#122e26;
    --info:#7fb2ee; --info-bg:#12253c;
    --warn:#e6b168; --warn-bg:#2e2415;
    --stop:#ef8f78; --stop-bg:#331d1a;
    --urg-laag:#7f90a8; --urg-normaal:#7fb2ee; --urg-hoog:#e6b168; --urg-spoed:#ef8f78;
    --shadow-rest:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-float:0 4px 14px rgba(0,0,0,.5),0 18px 44px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --ground:#0d1724; --surface:#131f30; --surface-2:#1b2a3e; --surface-sunk:#17253a;
  --line:#2a3c53; --line-soft:#213246;
  --ink:#e8eef6; --ink-2:#a9bacf; --ink-3:#7f90a8; --ink-invert:#0d1724;
  --accent:#3fc8e4; --accent-hover:#7bd9ee; --accent-ink:#7bd9ee; --accent-bg:#102c39;
  --navy:#8fb4d8;
  --brand-a:#35BCD8; --brand-b:#398ACA; --brand-c:#5A9BD8;
  --good:#5ec899; --good-bg:#122e26;
  --info:#7fb2ee; --info-bg:#12253c;
  --warn:#e6b168; --warn-bg:#2e2415;
  --stop:#ef8f78; --stop-bg:#331d1a;
  --urg-laag:#7f90a8; --urg-normaal:#7fb2ee; --urg-hoog:#e6b168; --urg-spoed:#ef8f78;
  --shadow-rest:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-float:0 4px 14px rgba(0,0,0,.5),0 18px 44px -16px rgba(0,0,0,.75);
}

*{box-sizing:border-box}

/* Het attribuut hidden hoort te winnen van elke display-regel.
   Gebleken bij het formulier (21 september 2026): .field{display:flex} en
   .frow{display:grid} overrulen de browserstandaard voor [hidden], want een
   klasse weegt zwaarder dan een elementregel. Gevolg: "Wie belt" bleef staan
   bij een onbekend nummer, en het keuzeveld "Ander team" stond altijd open
   terwijl de knop ernaast beweerde het te openen. Hier één keer goed, in
   plaats van per klasse een eigen [hidden]-regel. */
[hidden]{display:none !important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font-family:inherit;font-size:inherit;cursor:pointer}
select,input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* demobalk */
.demobar{background:var(--navy);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:7px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .demobar{background:#16283f;color:#e8eef6}}
:root[data-theme="dark"] .demobar{background:#16283f;color:#e8eef6}
.demobar b{font-weight:600;color:var(--brand-a)}
.demobar .sp{flex:1}
.demobar button{background:rgba(255,255,255,.14);color:inherit;border:0;border-radius:5px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px}
.demobar button:hover{background:rgba(255,255,255,.24)}

.shell{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 32px)}
@media (max-width:900px){.shell{grid-template-columns:1fr}}

aside{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;gap:2px}
@media (max-width:900px){aside{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);align-items:center}}
.tenant{display:flex;gap:11px;align-items:center;padding:6px 8px 18px}
.tenant .mark{width:34px;height:34px;border-radius:9px;flex:0 0 34px;background:linear-gradient(135deg,var(--brand-a),var(--brand-b) 55%,var(--brand-c));display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;letter-spacing:-.02em;box-shadow:var(--shadow-rest)}
.tenant .n{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.tenant .s{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.05em}
nav{display:flex;flex-direction:column;gap:1px}
@media (max-width:900px){nav{flex-direction:row;flex-wrap:wrap}.tenant{padding-bottom:6px}}
.nav-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;background:none;border:0;color:var(--ink-2);text-align:left;width:100%;font-size:13.5px;transition:background .12s ease-out,color .12s ease-out}
.nav-i:hover{background:var(--surface-2);color:var(--ink)}
.nav-i[aria-current="page"]{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.nav-i .ic{width:16px;flex:0 0 16px;display:grid;place-items:center;opacity:.85}
.nav-i .lbl{flex:1;white-space:nowrap}
.nav-i .cnt{font-family:var(--mono);font-size:11px;font-weight:600;padding:1px 6px;border-radius:20px;background:var(--surface-2);color:var(--ink-2)}
.nav-i[aria-current="page"] .cnt{background:var(--accent);color:var(--ink-invert)}
.nav-sep{height:1px;background:var(--line);margin:12px 10px}
@media (max-width:900px){.nav-sep{display:none}}
.syncfoot{margin-top:auto;padding:10px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center}
@media (max-width:900px){.syncfoot{margin:0;border:0;margin-left:auto}}
.syncfoot .dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:0 0 7px}
.syncfoot .t{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.35}

main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;gap:14px;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:20}
.searchwrap{position:relative;flex:1;max-width:520px}
.searchwrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
#zoek{width:100%;padding:8px 12px 8px 34px;border-radius:7px;border:1px solid var(--line);background:var(--surface-sunk);color:var(--ink);font-size:13.5px}
#zoek::placeholder{color:var(--ink-3)}
#zoek:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent;background:var(--ground)}
.kbd{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;position:absolute;right:9px;top:50%;transform:translateY(-50%);background:var(--ground)}
.topbar .spacer{flex:1}
.iconbtn{background:none;border:1px solid var(--line);border-radius:7px;width:34px;height:34px;display:grid;place-items:center;color:var(--ink-2);position:relative}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn .badge{position:absolute;top:-5px;right:-5px;background:var(--stop);color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:600;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 3px}
:root[data-theme="dark"] .iconbtn .badge{color:#331d1a}
.me{display:flex;gap:9px;align-items:center;padding-left:6px}
.me .av{width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;font-size:11.5px;font-weight:600;border:1px solid var(--line)}
.me .nm{font-size:13px;font-weight:500}
.me .rl{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em}
@media (max-width:700px){.me .who2{display:none}}
.page{padding:24px 22px 60px;max-width:1440px;width:100%}

h1{font-size:23px;font-weight:600;letter-spacing:-.02em;margin:0 0 3px;line-height:1.2}
h2{font-size:16.5px;font-weight:600;letter-spacing:-.012em;margin:0}
.sub{color:var(--ink-3);font-size:13px;margin:0}
.pagehead{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:20px}
.pagehead .spacer{flex:1}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}

.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:6px;border:1px solid var(--line);background:var(--ground);color:var(--ink);font-size:13.5px;font-weight:500;transition:background .12s ease-out}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent);border-color:transparent;color:var(--ink-invert);font-weight:600}
.btn-primary:hover{background:var(--accent-hover)}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-ghost{border-color:transparent;background:none;color:var(--accent-ink)}
.btn-ghost:hover{background:var(--accent-bg)}
.btn-stop{background:var(--stop);border-color:transparent;color:#fff;font-weight:600}
:root[data-theme="dark"] .btn-stop{color:#331d1a}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow-rest)}
.kpi .k{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-size:31px;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-top:5px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.kpi.alarm .v{color:var(--stop)}
.kpi.warn .v{color:var(--warn)}
.kpi.leeg .v{color:var(--ink-3);font-size:26px}
.kpi .trend{font-family:var(--mono);font-size:11px;color:var(--good);font-weight:600}

.cols{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1080px){.cols{grid-template-columns:1fr}}
.panel{background:var(--ground);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-rest);overflow:hidden}
.panel + .panel{margin-top:16px}
.phead{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.phead .spacer{flex:1}
.pbody{padding:16px}
.pbody.tight{padding:0}

/* werklijst */
.wl{display:flex;flex-direction:column}
.wl-row{display:grid;grid-template-columns:3px 74px 40px 92px minmax(0,1fr) 96px 84px;gap:11px;align-items:center;padding:0 16px 0 0;min-height:44px;border-bottom:1px solid var(--line-soft);background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%;color:inherit;transition:background .1s ease-out}
.wl-row:hover{background:var(--surface)}
.wl-row:last-child{border-bottom:0}
.wl-row .stripe{align-self:stretch;background:transparent}
.wl-row.u-spoed .stripe{background:var(--urg-spoed)}
.wl-row.u-hoog .stripe{background:var(--urg-hoog)}
.wl-row .cl{min-width:0;overflow:hidden}
.wl-row .cl .n{display:block;font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-row .cl .o{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-row .num{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.wl-row .team{font-size:12px;color:var(--ink-3);white-space:nowrap}
@media (max-width:900px){.wl-row{grid-template-columns:3px 74px 40px minmax(0,1fr) 78px;gap:10px}.wl-row .num,.wl-row .team{display:none}}

.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px;border:1px solid currentColor;white-space:nowrap}
.pill.spoed{background:var(--urg-spoed);border-color:transparent;color:#fff}
:root[data-theme="dark"] .pill.spoed{color:#331d1a}
.pill.hoog{color:var(--urg-hoog);background:var(--warn-bg);border-color:transparent}
.pill.normaal{color:var(--urg-normaal);background:var(--info-bg);border-color:transparent}
.pill.laag{color:var(--urg-laag);background:var(--surface-2);border-color:transparent}
.pill.ok{color:var(--good);background:var(--good-bg);border-color:transparent}
.pill.info{color:var(--info);background:var(--info-bg);border-color:transparent}
.pill.rol{color:var(--accent-ink);background:var(--accent-bg);border-color:transparent}

/* herhaalteller */
.herh{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:5px;background:var(--surface-2);color:var(--ink-3);white-space:nowrap;border:1px solid transparent}
.herh.let-op{background:var(--warn-bg);color:var(--warn)}
.herh.ernstig{background:var(--stop-bg);color:var(--stop)}

.klok{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;text-align:right}
.klok.telaat{color:var(--stop);font-weight:600}

.tv{display:flex;flex-direction:column;gap:1px}
.tv-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.tv-row:last-child{border-bottom:0}
.tv-row .nm{font-size:13px}
.tv-row .ct{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.bar{height:4px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:5px}
.bar span{display:block;height:100%;background:var(--accent);border-radius:3px}

.note{border-left:3px solid var(--accent);background:var(--accent-bg);padding:12px 15px;border-radius:0 8px 8px 0}
.note.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note .lb{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:4px}
.note.warn .lb{color:var(--warn)}
.note p{margin:0;font-size:12.5px;color:var(--ink-2)}

/* gespreksbanner */
.callbanner{display:flex;gap:12px;align-items:center;padding:11px 16px;border-radius:9px;background:var(--accent-bg);border:1px solid var(--accent);margin-bottom:14px;flex-wrap:wrap}
.callbanner .ring{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:puls 1.8s infinite;flex:0 0 9px}
@keyframes puls{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.callbanner .ring{animation:none}}
.callbanner .lb{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.callbanner .nr{font-family:var(--mono);font-size:14px;font-weight:600}
.callbanner .spacer{flex:1}

/* memo's */
.memoblok{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.memo{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface)}
.memo .mi{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:0 0 24px}
.memo .mt{font-weight:600;font-size:13.5px;margin-bottom:2px}
.memo .mx{font-size:13px;color:var(--ink-2);max-width:74ch}
.memo .mm{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:4px}
.memo.veiligheid{border-color:var(--stop);background:var(--stop-bg)}
.memo.veiligheid .mi{background:var(--stop);color:#fff}
:root[data-theme="dark"] .memo.veiligheid .mi{color:#331d1a}
.memo.veiligheid .mt{color:var(--stop)}
.memo.communicatie{border-color:var(--info);background:var(--info-bg)}
.memo.communicatie .mi{background:var(--info);color:#fff}
:root[data-theme="dark"] .memo.communicatie .mi{color:#12253c}
.memo.afspraak .mi{background:var(--surface-2);color:var(--ink-2)}
.memo.waarschuwing{border-color:var(--warn);background:var(--warn-bg)}
.memo.waarschuwing .mi{background:var(--warn);color:#fff}
:root[data-theme="dark"] .memo.waarschuwing .mi{color:#2e2415}

/* contactkaart */
.ckhead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.ckhead .av{width:56px;height:56px;border-radius:12px;flex:0 0 56px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);font-size:19px;font-weight:600;color:var(--ink-2)}
.ckhead .idn{min-width:230px;flex:1}
.ckhead h1{margin-bottom:4px}
.ckhead .meta{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin-top:7px}
.ckhead .rechts{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:210px}
.ckhead .rechts .r{display:flex;gap:10px;justify-content:space-between;align-items:center}
.ckhead .rechts .r .k{color:var(--ink-3);font-size:12.5px}
.vers{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:3px 7px;margin-top:8px}

/* personen rond het dossier */
.personen{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px}
.persoon{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.persoon .av{width:32px;height:32px;border-radius:9px;flex:0 0 32px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.persoon .n{font-weight:600;font-size:13px}
.persoon .o{font-size:12px;color:var(--ink-3)}
.persoon .tel{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:3px}
.persoon .mach{margin-top:5px}
.mach-ja{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--good);background:var(--good-bg);padding:2px 6px;border-radius:4px}
.mach-nee{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);padding:2px 6px;border-radius:4px}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;color:var(--ink-3);font-size:13.5px;font-weight:500;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:600}
.tab .cnt{font-family:var(--mono);font-size:10.5px;background:var(--surface-2);border-radius:20px;padding:1px 6px;margin-left:5px;color:var(--ink-2)}

/* tijdlijn */
.tl{display:flex;flex-direction:column}
.tl-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:13px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.tl-item:last-child{border-bottom:0}
.tl-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);margin-top:1px}
.tl-ic.mail{background:var(--info-bg);border-color:transparent;color:var(--info)}
.tl-ic.tel{background:var(--accent-bg);border-color:transparent;color:var(--accent-ink)}
.tl-ic.notitie{background:var(--surface-2);color:var(--ink-3)}
.tl-ic.agent{background:var(--good-bg);border-color:transparent;color:var(--good)}
.tl-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:3px}
.tl-h .w{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em}
.tl-h .t{font-weight:600;font-size:13.5px}
.tl-b{font-size:13.5px;color:var(--ink-2);max-width:68ch}
.aibox{margin-top:11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:12px 14px;max-width:68ch}
.aibox .ah{display:flex;gap:8px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.aibox .ah .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
.aibox p{margin:0 0 9px;font-size:13px;color:var(--ink-2)}
.aibox .adv{font-size:13px;color:var(--ink);border-top:1px solid var(--line-soft);padding-top:9px;margin:0}
.tl-link{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:11px;font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px 11px;color:var(--ink-2)}
.tl-link:hover{background:var(--surface-2)}
.tl-link .mono{font-weight:600;color:var(--accent-ink)}

/* schermpop */
.popgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px}
.popcard{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--ground);box-shadow:var(--shadow-rest);display:flex;flex-direction:column}
.popcard .ph{padding:11px 15px;background:var(--surface);border-bottom:1px solid var(--line-soft);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.popcard .ph .nr{font-family:var(--mono);font-size:13px;font-weight:600}
.popcard .pb{padding:15px;flex:1;display:flex;flex-direction:column;gap:11px}
.popcard .cap{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hit{display:flex;gap:11px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%;text-align:left;color:inherit}
.hit:hover{background:var(--surface-2)}
.hit .av{width:32px;height:32px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink-2);flex:0 0 32px;border:1px solid var(--line)}
.hit .n{font-weight:600;font-size:13px}
.hit .s{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.minifield{display:flex;flex-direction:column;gap:4px}
.minifield label{font-size:11.5px;font-weight:500;color:var(--ink-2)}
.minifield input{padding:7px 10px;border-radius:6px;border:1px solid var(--line);background:var(--surface-sunk);color:var(--ink);font-size:13px}

/* dialoog */
.overlay{position:fixed;inset:0;background:rgba(16,31,54,.5);display:none;place-items:center;z-index:60;padding:20px;overflow:auto}
.overlay[data-open="true"]{display:grid}
:root[data-theme="dark"] .overlay{background:rgba(0,0,0,.66)}
.dialog{background:var(--ground);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-float);width:100%;max-width:620px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:pop .2s cubic-bezier(.2,.8,.2,1)}
.dialog.smal{max-width:470px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dialog{animation:none}}
.dhead{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.dhead .spacer{flex:1}
.dbody{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.dfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:500;color:var(--ink-2)}
.field label .req{color:var(--stop)}
.field .hint{font-size:11.5px;color:var(--ink-3)}
.field input,.field textarea,.field select{padding:9px 11px;border-radius:6px;border:1px solid var(--line);background:var(--surface-sunk);color:var(--ink);font-size:13.5px;width:100%}
.field textarea{min-height:74px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent;background:var(--ground)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.frow{grid-template-columns:1fr}}

.chosen{display:flex;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--accent);background:var(--accent-bg);border-radius:7px;flex-wrap:wrap}
.chosen .n{font-weight:600;font-size:13px}
.chosen .s{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.chosen .spacer{flex:1}

.radios{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
@media (max-width:560px){.radios{grid-template-columns:repeat(2,1fr)}}
.radios label{position:relative;display:flex;align-items:center;justify-content:center;padding:9px 4px;border:1px solid var(--line);border-radius:7px;background:var(--surface-sunk);cursor:pointer;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);transition:border-color .12s,color .12s,background .12s}
.radios input{position:absolute;opacity:0;width:1px;height:1px}
.radios label.aan{border-color:currentColor}
.radios label.aan.r-laag{color:var(--urg-laag);background:var(--surface-2)}
.radios label.aan.r-normaal{color:var(--urg-normaal);background:var(--info-bg)}
.radios label.aan.r-hoog{color:var(--urg-hoog);background:var(--warn-bg)}
.radios label.aan.r-spoed{color:var(--urg-spoed);background:var(--stop-bg)}
.radios label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

.routebox{border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden}
.routebox .rh{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:9px 14px;border-bottom:1px solid var(--line-soft)}
.routebox .rb{padding:13px 14px;display:flex;flex-direction:column;gap:7px}
.routebox .team{display:flex;gap:9px;align-items:center;font-weight:600;font-size:14px}
.routebox .team .arrow{color:var(--accent)}
.routebox .adr{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}
.routebox .why{font-size:12.5px;color:var(--ink-2);border-left:2px solid var(--accent);padding-left:9px}
.routebox .dl{font-size:12.5px;color:var(--ink-2);display:flex;gap:7px;align-items:center}

.herhwaarschuwing{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:8px;background:var(--stop-bg);border:1px solid var(--stop)}
.herhwaarschuwing .t{font-weight:600;font-size:13px;color:var(--stop);margin-bottom:2px}
.herhwaarschuwing .x{font-size:12.5px;color:var(--ink-2)}

.succes{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding:8px 0}
.succes .ic{width:46px;height:46px;border-radius:50%;background:var(--good-bg);color:var(--good);display:grid;place-items:center}
.succes .cap{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.succes .nr{font-family:var(--mono);font-size:27px;font-weight:600}
.succes .lees{font-size:13px;color:var(--ink-2);max-width:44ch;margin:0}
.succes .mail{font-family:var(--mono);font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:6px 10px}

/* snelle antwoorden */
.qlist{display:flex;flex-direction:column;gap:7px}
.qbtn{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:inherit}
.qbtn:hover{background:var(--surface-2);border-color:var(--accent)}
.qbtn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg)}
.qbtn .qt{font-weight:600;font-size:13px}
.qbtn .qs{font-size:12px;color:var(--ink-3);margin-top:1px}
.qbtn .qm{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.qprev{border:1px solid var(--line);border-radius:8px;background:var(--surface-sunk);padding:12px 14px;font-size:13px;color:var(--ink);line-height:1.6}
.qprev .gat{background:var(--warn-bg);color:var(--warn);font-weight:600;padding:0 4px;border-radius:3px}
.qprev .vul{background:var(--good-bg);color:var(--good);font-weight:600;padding:0 4px;border-radius:3px}

/* onderwerpen beheer */
.subjlist{display:flex;flex-direction:column}
.subj{display:grid;grid-template-columns:minmax(0,1fr) 82px 96px 40px;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.subj:last-child{border-bottom:0}
.subj .nm{font-weight:500;font-size:13.5px}
.subj .sl{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:1px}
.subj .cnt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:right}
.subj[data-uit]{opacity:.5}
@media (max-width:760px){.subj{grid-template-columns:minmax(0,1fr) 82px 40px}.subj .cnt{display:none}}

.toggle{width:34px;height:19px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);position:relative;padding:0;flex:0 0 34px}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--ink-3);transition:transform .14s ease-out,background .14s}
.toggle[aria-pressed="true"]{background:var(--accent);border-color:transparent}
.toggle[aria-pressed="true"]::after{transform:translateX(15px);background:#fff}

#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,80px);z-index:90;background:var(--ink);color:var(--ground);padding:11px 18px;border-radius:9px;box-shadow:var(--shadow-float);font-size:13.5px;font-weight:500;opacity:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s;pointer-events:none;max-width:calc(100vw - 40px)}
#toast[data-show="true"]{transform:translate(-50%,0);opacity:1}

@keyframes flash{from{background:var(--accent-bg)}to{background:transparent}}
.wl-row.nieuw{animation:flash 1.6s ease-out}
@media (prefers-reduced-motion:reduce){.wl-row.nieuw{animation:none}}

.view{display:none}
.view[data-active="true"]{display:block}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.legend .l{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:3px 8px}

/* ============================================================
   WERKVLOER — toevoegingen bovenop het designsysteem uit fase 2
   (design/prototype.html). Alles hieronder is nieuw voor /pop.
   ============================================================ */
.werkbalk{display:flex;gap:14px;align-items:center;padding:8px 18px;border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:20;min-height:46px}
.werkbalk .merk{display:flex;gap:9px;align-items:center;font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.werkbalk .merk .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--brand-a),var(--brand-c));color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;font-family:var(--mono)}
.werkbalk .kantoor{font-size:12.5px;color:var(--ink-3);border-left:1px solid var(--line);padding-left:12px}
.werkbalk .spacer{flex:1}
.werkbalk .wie{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.werkbalk .wie .av{width:28px;height:28px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-size:10.5px;font-weight:600;color:var(--ink-2)}
.werkbalk a{color:var(--accent-ink);text-decoration:none;font-size:12.5px}
.werkbalk a:hover{text-decoration:underline}
.werkbalk .demo{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:var(--warn-bg);color:var(--warn)}

.page.smal{max-width:960px;margin:0 auto}
.zoekkaart{max-width:520px;margin:9vh auto 0;padding:26px 26px 22px;border:1px solid var(--line);border-radius:14px;background:var(--ground);box-shadow:var(--shadow-rest)}
.zoekkaart h1{font-size:20px}
.zoekkaart form{display:flex;gap:8px;margin-top:16px}
.zoekkaart input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink);font-size:15px}
.zoekkaart input:focus,.field input:focus,.field select:focus,.field textarea:focus,.minifield input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

.laden{display:flex;flex-direction:column;gap:12px;padding:40px 0;align-items:center;color:var(--ink-3);font-size:13px}
.skelet{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));background-size:200% 100%;animation:skelet 1.4s infinite}
@keyframes skelet{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skelet{animation:none}}

.foutblok{border:1px solid var(--stop);background:var(--stop-bg);border-radius:10px;padding:14px 16px;color:var(--ink)}
.foutblok .t{font-weight:600;color:var(--stop);margin-bottom:3px}
.foutblok p{margin:0;font-size:13px;color:var(--ink-2)}

.tabpanel[hidden]{display:none}
.leeg{padding:22px 0;color:var(--ink-3);font-size:13px;text-align:center}
.mach-ja{font-family:var(--mono);font-size:10.5px;color:var(--good);background:var(--good-bg);padding:2px 7px;border-radius:5px}
.mach-nee{font-family:var(--mono);font-size:10.5px;color:var(--stop);background:var(--stop-bg);padding:2px 7px;border-radius:5px}
.field input,.field select,.field textarea{padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--ground);color:var(--ink);font-size:13.5px}
.field textarea{min-height:76px;resize:vertical}
.inline-fout{font-size:12px;color:var(--stop)}
.btn[disabled]{opacity:.55;cursor:progress}
.bezig{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:draai .8s linear infinite;vertical-align:-2px}
@keyframes draai{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.verif{font-size:12.5px;color:var(--ink-3)}
.afsluit{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* ---- werkvloer (/werk) ---- */
.nav-i{text-decoration:none;color:var(--ink-2)}
.nav-i .cnt[hidden]{display:none}
.tenant .mark{background:linear-gradient(135deg,var(--brand-a),var(--brand-c));color:#fff}
.topbar .demo{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:var(--warn-bg);color:var(--warn)}
.topbar .me .who2 .nm{white-space:nowrap}
.phead.filters{gap:8px;flex-wrap:wrap}
.phead.filters select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--ground);color:var(--ink);font-size:12.5px}
.btn.aan,.btn[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-ink)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin-top:14px;font-size:13.5px}
.dgrid .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.hit{text-decoration:none;color:inherit}
.wl .laden{padding:18px 16px;align-items:stretch}
.pagehead .kbd{margin-left:4px}
@media (max-width:900px){.shell{grid-template-columns:1fr}aside{display:none}.cols{grid-template-columns:1fr}}
.qbtn .qt,.qbtn .qs{display:block}
.qbtn>span:first-child{flex:1;min-width:0}

/* ---- beheer ---- */
.dialog.breed{max-width:820px}
.tabs a.tab{text-decoration:none;color:inherit}
.bt{width:100%;border-collapse:collapse;font-size:13px}
.bt th{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap}
.bt td{padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.bt tr:last-child td{border-bottom:0}
.bt tr.uit td{opacity:.55}
.bt td.tekst{max-width:34ch;color:var(--ink-2)}
.bt th.num,.bt td.num{text-align:right}
.bt .leeg{text-align:center}
.veldrij{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.veldrij input,.veldrij select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--ground);color:var(--ink);font-size:12.5px;min-width:0}
.veldrij select[multiple]{min-height:70px}
.veldrij .iconbtn{width:28px;height:28px;flex:0 0 28px}
.check{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:3px 0;cursor:pointer}
.check input{margin:0;accent-color:var(--accent)}
.check .sub{display:inline}
.field label.check{font-size:13px;color:var(--ink)}
.memoknop{margin-bottom:12px}
.pbody.tight{overflow-x:auto}
.bt td strong{white-space:nowrap}
label.check,.field label.check{display:flex;justify-content:flex-start;align-items:flex-start;gap:8px;text-align:left;font-size:13px;color:var(--ink);font-weight:400;cursor:pointer}
.check input{flex:0 0 auto;margin:3px 0 0;width:15px;height:15px}
.check>span{flex:0 1 auto}
.check .sub{display:inline;margin-left:4px}


/* ============================================================
   EIGEN SCHERMPOP — de oproepbanner (oproepen.js)
   ============================================================ */
.oproep-banner{position:sticky;top:0;z-index:30;display:flex;flex-direction:column;gap:6px;padding:8px 22px 0}
.werkbalk+.oproep-banner{top:46px;padding:8px 18px 0}
.ob{display:flex;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;background:var(--ground);box-shadow:var(--shadow-float)}
.ob.rinkelt{border-left-color:var(--good);background:var(--good-bg)}
.ob.verbonden{border-left-color:var(--info)}
.ob.gemist{border-left-color:var(--warn);background:var(--warn-bg)}
.ob-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:var(--ground);color:var(--good);border:1px solid var(--line)}
.ob.rinkelt .ob-ic{animation:ob-puls 1.1s ease-in-out infinite}
.ob.verbonden .ob-ic{color:var(--info)}
.ob.gemist .ob-ic{color:var(--warn)}
@keyframes ob-puls{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(22,112,74,.35)}50%{transform:scale(1.06);box-shadow:0 0 0 8px rgba(22,112,74,0)}}
@media (prefers-reduced-motion:reduce){.ob.rinkelt .ob-ic{animation:none}}
.ob-body{flex:1;min-width:0}
.ob-kop{font-weight:600;font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ob-kop .mono{font-family:var(--mono);font-weight:500}
.ob-sub{font-size:12.5px;color:var(--ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-acties{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.ob-acties .check.klein{font-size:11.5px;color:var(--ink-3);margin:0;align-items:center}
.ob-acties .check.klein input{margin:0;width:13px;height:13px}
@media (max-width:760px){.ob{flex-wrap:wrap}.ob-acties{width:100%;justify-content:flex-end}.ob-sub{white-space:normal}}

/* Rapportage: staafjes per dag, koppen en getalkolommen */
.h3{font-size:13.5px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.staaf{display:flex;align-items:flex-end;gap:3px;height:120px;padding:6px 0;border-bottom:1px solid var(--line)}
.staaf .s{flex:1;min-width:4px;background:var(--accent-bg);border-radius:3px 3px 0 0;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.staaf .s i{display:block;width:100%;background:var(--accent)}
.bt th.num,.bt td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Click-to-dial */
.belknop{background:none;border:0;padding:0 2px;color:var(--accent-ink);cursor:pointer;font:inherit;text-decoration:underline dotted;text-underline-offset:3px;border-radius:4px}
.belknop:hover{background:var(--accent-bg)}
.belknop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tel .belknop+.belknop::before{content:" · ";color:var(--ink-3);text-decoration:none}

/* Gemiste oproepen op het dashboard */
.gm{display:flex;flex-direction:column}
.gm-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:9px 16px;border-top:1px solid var(--line-soft);font-size:13px}
.gm-row:first-child{border-top:0}
.gm-row.klaar{opacity:.6}
.gm-t{color:var(--ink-3);font-size:12px}
.gm-w a{color:var(--ink);text-decoration:none;font-weight:600}
.gm-w a:hover{text-decoration:underline}
.gm-w .sub{font-size:11.5px}

/* ============================================================
   INGESLOTEN MODUS — de schermen in het kader van de Console
   ============================================================
   ?ingesloten=1 zet data-ingesloten op <body> (ingesloten.js). Het dashboard
   levert dan de kopbalk, het menu en het afmelden; wij leveren alleen het
   scherm. De ondergrond blijft doorzichtig, zodat de Console zijn eigen
   achtergrond houdt en wij niet twee keer dezelfde kleur tekenen. */
body[data-ingesloten]{background:transparent}
body[data-ingesloten] aside,
body[data-ingesloten] .topbar,
body[data-ingesloten] .werkbalk{display:none}
body[data-ingesloten] .shell{grid-template-columns:minmax(0,1fr);min-height:0}
body[data-ingesloten] main{background:transparent}
body[data-ingesloten] .page{padding:14px 16px 20px;max-width:none}
body[data-ingesloten] .page.smal{margin:0}
body[data-ingesloten] .zoekkaart{margin-top:0}
body[data-ingesloten] .oproep-banner{padding:8px 16px 0}

/* Het eigen zoekveld van het cliëntenscherm; de kopbalk met het gewone veld
   staat ingesloten niet in beeld. */
.ing-zoek{max-width:520px;margin:0 0 18px}

/* "Meld u eerst aan in het dashboard". Microsoft weigert zijn aanmeldpagina in
   een frame, dus is dit het enige scherm dat het frame dan kan tonen. */
.ing-aanmeld{position:fixed;inset:0;z-index:80;display:grid;place-items:start center;padding:18px 16px;background:var(--ground);overflow:auto}
.ing-kaart{max-width:460px;border:1px solid var(--line);border-radius:14px;background:var(--ground);box-shadow:var(--shadow-rest);padding:22px 22px 18px}
.ing-kaart h1{font-size:19px;margin-bottom:8px}
.ing-kaart p{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.ing-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ing-hulp{font-size:12.5px;color:var(--ink-3);margin-top:12px}
.ing-hulp a{color:var(--accent-ink)}

/* ============================================================
   NIEUW TERUGBELVERZOEK — brede dialoog, twee kolommen
   ============================================================
   Danny, 21 september 2026: "dit venster mag best breder en functioneler zijn
   om sneller te kunnen handelen als antwoordservicemedewerker."

   Waarom 1100 px en niet meer: breder dan dit gaat de regellengte van de
   toelichting over de 90 tekens en moet het oog terugzoeken waar de volgende
   regel begint. De grens ligt op de dialoog en niet op de kolommen, zodat op
   een klein laptopscherm hetzelfde raster meeschaalt. */
.dialog.zeerbreed{max-width:1100px}

.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 22px;align-items:start}
.fgrid .fspan{grid-column:1/-1}
.fcol{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Onder 900 px één kolom: op 1280 px staan de twee kolommen ruim, daaronder
   wordt de rechterkolom smaller dan de urgentieknoppen aankunnen. */
@media (max-width:900px){.fgrid{grid-template-columns:minmax(0,1fr)}}

/* Het kantoorveld: keuzelijst plus zoekveld, met het soort kantoor ernaast. */
.kantoorrij{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kantoorrij select{flex:1 1 220px;min-width:0}
.kantoorrij input[type="search"]{flex:1 1 170px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--ground);color:var(--ink);font-size:13.5px}
.kantoorvast{display:flex;gap:9px;align-items:center;padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:13.5px;flex-wrap:wrap}
.kantoorvast .n{font-weight:600}
.kantoorvast .spacer{flex:1}

/* Kiezer met zoeken: onderwerpen en cliënten. Geen <datalist>: die is in elke
   browser anders, niet te stylen, en toont bij een lange lijst geen toelichting
   naast de naam. */
.kiezer{position:relative}
.kieslijst{border:1px solid var(--line);border-radius:7px;background:var(--ground);box-shadow:var(--shadow-float);max-height:232px;overflow-y:auto;margin-top:4px;display:flex;flex-direction:column}
.kiezer .kieslijst{position:absolute;left:0;right:0;top:100%;z-index:5}
.kieslijst button{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;padding:8px 11px;border:0;border-bottom:1px solid var(--line-soft);background:none;color:inherit;font-size:13.5px}
.kieslijst button:last-child{border-bottom:0}
.kieslijst button:hover,.kieslijst button[aria-selected="true"]{background:var(--accent-bg)}
.kieslijst .n{font-weight:500}
.kieslijst .s{font-size:11.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap;font-family:var(--mono)}
.kieslijst .leegregel{padding:10px 11px;font-size:12.5px;color:var(--ink-3)}
.kieslijst .kop{padding:6px 11px 3px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* Het gekozen onderwerp als regel onder het zoekveld. */
.gekozenregel{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.gekozenregel .w{font-weight:600;color:var(--ink)}
.gekozenregel button{border:0;background:none;color:var(--accent-ink);font-size:12.5px;padding:0}
.gekozenregel button:hover{text-decoration:underline}

/* Sneltekst-knoppen boven de toelichting: het kantoor beheert ze zelf in
   Beheer (quick_replies met doel gespreksnotitie). */
.sneltekst{display:flex;gap:6px;flex-wrap:wrap}
.sneltekst button{padding:4px 9px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink-2);font-size:11.5px}
.sneltekst button:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-ink)}

/* Waar de mail heen gaat, onder het teamveld. */
.mailhint{display:flex;gap:7px;align-items:baseline;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
.mailhint .adr{font-family:var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.mailhint.geen{color:var(--warn)}

.dfoot .spacer{flex:1}
.dfoot-hint{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
@media (max-width:560px){.dfoot-hint{display:none}}

.field .lbl{font-size:12px;font-weight:500;color:var(--ink-2)}
.field .lbl .req{color:var(--stop)}