/* ============================================================
   TOWERLY CONSOLE — dezelfde tokens als de Antwoordservice
   (antwoordservice/src/Antwoordservice.Api/wwwroot/app.css).
   Licht is de bare :root, donker herdefinieert alleen.

   De tokens zijn letterlijk overgenomen en dat is de bedoeling:
   een klant die van de Console naar de Antwoordservice doorklikt,
   hoort niet in een ander product terecht te komen.
   ============================================================ */
:root{
  --ground:#ffffff; --surface:#f5f8fb; --surface-2:#eaf1f7; --surface-sunk:#eef3f8;
  --line:#d8e2ec; --line-soft:#e8eef5;
  --ink:#101f36; --ink-2:#3b4d68; --ink-3:#5c6d86; --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:#5c6d86; --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}
/* Een element met [hidden] moet ook verborgen zijn als een klasse er display
   op zet (.btn is inline-flex, .contextbalk is flex). Zonder deze regel staat
   Afmelden in demomodus gewoon in beeld. */
[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}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   DE SCHIL: zijbalk links, hoofdkolom rechts.
   Eén navigatie in plaats van een werkbalk plus een modulebalk.
   ============================================================ */
.app{--zij:244px;display:grid;grid-template-columns:var(--zij) minmax(0,1fr);min-height:100vh}
.app[data-zij="in"]{--zij:68px}

.zijbalk{position:sticky;top:0;align-self:start;height:100vh;z-index:40;display:flex;flex-direction:column;gap:8px;
  padding:12px 10px;background:var(--surface);border-right:1px solid var(--line);overflow:hidden}
.zkop{display:flex;align-items:center;gap:8px;padding:0 2px 4px}
.zkop .merk{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-decoration:none;color:inherit}
.zkop .merk .mark{width:32px;height:32px;flex:0 0 32px;border-radius:9px;color:#fff;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-a),var(--brand-c));font-family:var(--mono);font-size:11px;font-weight:700}
.zkop .merk .mt{display:flex;flex-direction:column;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.zkop .merk .mt small{font-weight:400;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.zzoek{display:flex;align-items:center;gap:8px;width:100%;padding:0 10px;height:36px;border-radius:8px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink-3);font-size:13px;text-align:left}
.zzoek:hover{border-color:var(--accent);color:var(--ink-2)}
.zzoek .lb{flex:1}
.zzoek kbd{font-size:10px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink-3)}

.znav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;margin:4px -4px;padding:0 4px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.znav::-webkit-scrollbar{width:6px}
.znav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.znav .kop{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:12px 10px 4px}
.znav a{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:8px;text-decoration:none;
  color:var(--ink-2);font-size:13px;font-weight:500;position:relative}
.znav a:hover{background:var(--surface-2);color:var(--ink)}
.znav a .ic{display:grid;place-items:center;flex:0 0 16px;color:var(--ink-3)}
.znav a .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.znav a[aria-current="page"]{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.znav a[aria-current="page"] .ic{color:var(--accent-ink)}
.znav a[aria-current="page"]::before{content:"";position:absolute;left:-4px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.znav a .n{min-width:18px;height:17px;padding:0 5px;border-radius:9px;background:var(--surface-2);color:var(--ink-2);
  font-family:var(--mono);font-size:9.5px;font-weight:700;display:inline-grid;place-items:center}
.znav a .n.aan{background:var(--accent-bg);color:var(--accent-ink)}
.znav a .n.alarm{background:var(--stop-bg);color:var(--stop)}
.znav a .bouw{width:5px;height:5px;border-radius:50%;background:var(--ink-3);opacity:.55;flex:0 0 5px}
.znav .scheid{height:1px;background:var(--line);margin:8px 6px}

.zvoet{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.zstatus{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--ink-3);padding:0 4px;overflow-wrap:anywhere}
.zstatus .stip{width:6px;height:6px;border-radius:50%;background:var(--good);flex:0 0 6px}
.zstatus .stip.weg{background:var(--warn)}
.zwie{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--ink-2);padding:0 2px;min-width:0}
.zwie .av{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink-2)}
.zwie .wt{min-width:0;line-height:1.3}
.zwie .wt b{display:block;font-weight:600;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zwie .wt span{font-family:var(--mono);font-size:10px;color:var(--ink-3)}

/* Ingeklapt: alleen iconen. */
.app[data-zij="in"] .zkop .merk .mt,
.app[data-zij="in"] .zzoek .lb,
.app[data-zij="in"] .zzoek kbd,
.app[data-zij="in"] .znav a .lb,
.app[data-zij="in"] .znav .kop,
.app[data-zij="in"] .zstatus,
.app[data-zij="in"] .zwie .wt,
.app[data-zij="in"] .zvoet .btn{display:none}
.app[data-zij="in"] .znav a{justify-content:center;padding:0 6px}
.app[data-zij="in"] .znav a .n{position:absolute;top:2px;right:2px;min-width:15px;height:14px;font-size:9px;padding:0 3px}
.app[data-zij="in"] .zzoek{justify-content:center;padding:0}
.app[data-zij="in"] .zkop{justify-content:center}
.app[data-zij="in"] .zkop{flex-direction:column;gap:8px;padding-top:10px}
.app[data-zij="in"] .zvouw{display:grid}

.zij-sluier{position:fixed;inset:0;background:rgba(16,31,54,.45);z-index:35}

/* Onder 1080 px is de zijbalk een lade achter de menuknop. */
@media (max-width:1079px){
  .app,.app[data-zij="in"]{grid-template-columns:minmax(0,1fr)}
  .zijbalk{position:fixed;left:0;top:0;width:268px;transform:translateX(-100%);transition:transform .18s ease-out;box-shadow:var(--shadow-float)}
  .app[data-lade="open"] .zijbalk{transform:none}
  .app[data-zij="in"] .zkop .merk .mt,.app[data-zij="in"] .znav a .lb,.app[data-zij="in"] .zzoek .lb,
  .app[data-zij="in"] .znav .kop,.app[data-zij="in"] .zstatus,.app[data-zij="in"] .zwie .wt{display:revert}
  .app[data-zij="in"] .znav a{justify-content:flex-start;padding:0 10px}
  .app[data-zij="in"] .znav a .n{position:static;min-width:18px;height:17px;font-size:9.5px;padding:0 5px}
  .zvouw{display:none}
}
@media (prefers-reduced-motion:reduce){.zijbalk{transition:none}}

/* ---- kopbalk boven de hoofdkolom ---- */
.hoofd{display:flex;flex-direction:column;min-width:0}
.kopbalk{position:sticky;top:0;z-index:30;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:8px 20px;min-height:52px;background:var(--ground);border-bottom:1px solid var(--line)}
.kopbalk .spacer{flex:1}
.kopbalk .kt{min-width:0}
.kopbalk h1{font-size:16px;font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.3}
.kopbalk .kt p{margin:0;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kopbalk select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--ground);color:var(--ink);font-size:12.5px;max-width:200px}
.kopbalk .ctx-mw{display:flex;gap:8px;align-items:center}
.kopbalk .demo{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:var(--warn-bg);color:var(--warn)}
.iconbtn.menuknop{display:none}
@media (max-width:1079px){.iconbtn.menuknop{display:grid}}
@media (max-width:640px){
  /* Op een telefoon telt elke regel boven de lijst. De medewerkerwissel is een
     hulpmiddel voor een demo op een beamer en verdwijnt hier; team, de
     demobadge en het thema blijven, en passen samen op één regel. */
  .kopbalk{padding:6px 12px;gap:8px;min-height:44px}
  .kopbalk select{max-width:124px;font-size:12px}
  .kopbalk .ctx-mw{display:none}
  .kopbalk .kt p{display:none}
  .kopbalk h1{font-size:15px}
}

.page{padding:20px 18px 48px;max-width:1560px;width:100%;margin:0 auto}
@media (max-width:1439px){.page{padding:16px 12px 40px}}
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}
.h3{font-size:13.5px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.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}

/* ---- knoppen ---- */
.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;text-decoration:none}
.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}
.btn[disabled]{opacity:.55;cursor:progress}
.iconbtn{background:none;border:1px solid var(--line);border-radius:7px;width:34px;height:34px;display:grid;place-items:center;color:var(--ink-2)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn-sm{width:28px;height:28px;border-radius:6px}
.iconbtn[aria-pressed="true"]{background:var(--accent-bg);border-color:transparent;color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---- kpi's en panelen ---- */
.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}
/* Een tekstwaarde ("2 uur geleden") in hetzelfde formaat als een getal wordt
   drie regels breed en trekt de hele rij scheef. */
.kpi .v.klein{font-size:18px;letter-spacing:-.015em;line-height:1.3;margin-top:7px}
.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)}

.cols{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;align-items:start}
/* minmax(0,…) en niet 1fr: een tabel in een kolom heeft een min-content breedte
   en duwt de pagina anders op een telefoon breder dan het scherm. */
@media (max-width:1080px){.cols{grid-template-columns:minmax(0,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}
.phead select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--ground);color:var(--ink);font-size:12.5px}
.pbody{padding:16px}
.pbody.tight{padding:0;overflow-x:auto}

/* ---- tegels per dienst (het dashboard van de klant) ---- */
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:14px;margin-bottom:22px}
.tegel{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:12px;background:var(--ground);box-shadow:var(--shadow-rest);padding:16px 17px}
.tegel.uit{opacity:.62}
.tegel .tk{display:flex;gap:11px;align-items:center}
.tegel .tk .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:12px;font-family:var(--mono)}
.tegel .tk .n{font-weight:600;font-size:15px;letter-spacing:-.01em}
.tegel .tk .spacer{flex:1}
.tegel .om{font-size:12.5px;color:var(--ink-3);margin:0;min-height:2.6em}
/* Drie cijfers naast elkaar. De labels verschillen in lengte, dus de rijen
   worden gedeeld (subgrid): het etiket staat altijd in rij 1 en het getal
   altijd in rij 2, ook als één etiket over twee regels loopt. Zonder dat
   zakken de getallen ten opzichte van elkaar weg. */
.tegel .cijfers{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:2px 10px;border-top:1px solid var(--line-soft);padding-top:11px}
.tegel .cijfers div{min-width:0;display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:2px}
@supports not (grid-template-rows:subgrid){
  .tegel .cijfers div{display:block}
  .tegel .cijfers .k{min-height:2.2em}
}
.tegel .cijfers .k{display:block;font-family:var(--mono);font-size:9.5px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);overflow-wrap:anywhere}
.tegel .cijfers .v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;align-self:end;line-height:1.2}
.tegel .cijfers .v.alarm{color:var(--stop)}
.tegel .laatste{font-size:12.5px;color:var(--ink-2);border-left:2px solid var(--line);padding-left:9px;overflow-wrap:anywhere}
.tegel .voet{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:4px}
.tegel .voet .spacer{flex:1}

/* ---- pillen ---- */
.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.ok,.pill.actief{color:var(--good);background:var(--good-bg);border-color:transparent}
.pill.proef{color:var(--info);background:var(--info-bg);border-color:transparent}
.pill.opgeschort,.pill.hoog,.pill.waarschuwing{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.pill.uit,.pill.laag,.pill.info{color:var(--urg-laag);background:var(--surface-2);border-color:transparent}
.pill.stop,.pill.spoed,.pill.ernstig,.pill.beeindigd{color:var(--stop);background:var(--stop-bg);border-color:transparent}
.pill.normaal{color:var(--urg-normaal);background:var(--info-bg);border-color:transparent}
.pill.rol{color:var(--accent-ink);background:var(--accent-bg);border-color:transparent}

/* ---- activiteitenstroom ---- */
.stroom{display:flex;flex-direction:column}
.sr{display:grid;grid-template-columns:86px 26px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.sr:last-child{border-bottom:0}
.sr:hover{background:var(--surface)}
.sr .w{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding-top:2px;white-space:nowrap}
.sr .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);flex:0 0 24px}
.sr .ic.alarm{background:var(--stop-bg);color:var(--stop)}
.sr .ic.afgerond{background:var(--good-bg);color:var(--good)}
.sr .b{min-width:0}
.sr .t{font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.sr .m{font-size:11.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:6px 12px;flex-wrap:wrap}
.sr .a{display:flex;gap:6px;align-items:center;white-space:nowrap}
@media (max-width:760px){.sr{grid-template-columns:26px minmax(0,1fr)}.sr .w{grid-column:1 / -1;padding:0}.sr .a{grid-column:1 / -1}}

/* ---- alarmen ---- */
.alarmen{display:flex;flex-direction:column}
.al{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;padding:12px 16px;border-bottom:1px solid var(--line-soft);align-items:start}
.al:last-child{border-bottom:0}
.al .o{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.al .m{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:3px}

/* ---- tabellen ---- */
.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 tbody tr:hover{background:var(--surface)}
.bt th.num,.bt td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bt .leeg{text-align:center;color:var(--ink-3)}
.bt td strong{font-weight:600}
.bt .klik{cursor:pointer}

/* ---- formulieren ---- */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:500;color:var(--ink-2)}
.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}}
.veldrij{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.veldrij select,.veldrij input{padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--ground);color:var(--ink);font-size:12.5px;min-width:0}
.check{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:3px 0;cursor:pointer}
.check input{margin:0;accent-color:var(--accent);flex:0 0 auto;width:15px;height:15px}

/* ---- 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.breed{max-width:900px}
.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}

/* ---- berichten ---- */
.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)}
.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)}
.leeg{padding:26px 16px;color:var(--ink-3);font-size:13px;text-align:center}
.leeg p{margin:0 auto 10px;max-width:48ch}
.leeg p:last-child{margin-bottom:0}
.leeg .btn{margin-top:2px}
.inline-fout{font-size:12px;color:var(--stop)}

.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}}

#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);text-align:center}
#toast[data-show="true"]{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion:reduce){#toast{transition:opacity .01s;transform:translate(-50%,0)}}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:16px}
.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"],.tab[aria-pressed="true"]{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:600}

/* ============================================================
   MODULES (klantdashboard)
   Vanaf hier alles wat de negen moduleschermen nodig hebben.
   Geen nieuwe tokens: enkel de bestaande variabelen hierboven.
   ============================================================ */

.skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--ink-invert);padding:9px 14px;border-radius:0 0 8px 0;font-size:13px;text-decoration:none}
.skiplink:focus{left:0}

/* ---- kop van een module ---- */
.modkop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px;min-height:32px}
.modkop .spacer{flex:1}
.modkop .titels{min-width:0}
/* De acties van een module stonden als losse inline-blokken naast elkaar en
   vielen bij vier knoppen over twee regels, met de iconen onder de tekst. */
.modkop .acties{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.modkop h2.mt,.pagehead h2.mt{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 3px;line-height:1.2}
.lint{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);border:1px dashed var(--line);border-radius:7px;padding:6px 11px;margin:0 0 16px}
.lint .ld{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lint .ld + .ld::before{content:"·";color:var(--line);margin-right:2px}
.lint .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--warn)}
.lint .bouw{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* ---- presentatiemodus (Shift+D): alleen de demomeldingen uit beeld ----
   Geen enkel gegeven verandert; dit is er voor een screenshot of de beamer. */
:root[data-presentatie="aan"] .demo,
:root[data-presentatie="aan"] .lint-demo,
:root[data-presentatie="aan"] .lint[data-alleen-demo],
:root[data-presentatie="aan"] .ctx-demo{display:none !important}

/* ---- generieke lijst met items ---- */
.lijst{display:flex;flex-direction:column}
.li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.li:last-child{border-bottom:0}
.li:hover{background:var(--surface)}
.li.gedaan{opacity:.6}
.li .kop{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.li .kop .t{font-size:13.5px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.li .meta{font-size:11.5px;color:var(--ink-3);margin-top:3px;display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
.li .tekst{font-size:12.5px;color:var(--ink-2);margin:6px 0 0;overflow-wrap:anywhere}
.li .acties{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){.li{grid-template-columns:1fr}.li .acties{justify-content:flex-start}}

/* ---- tweerichtingsblok: wat SOSO noteerde / wat het kantoor deed ---- */
.tweeweg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media (max-width:720px){.tweeweg{grid-template-columns:1fr}}
.tweeweg .zij{border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;background:var(--surface-sunk)}
.tweeweg .zij .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:4px}
.tweeweg .zij p{margin:0;font-size:12.5px;color:var(--ink-2)}
.tweeweg .zij.kantoor{border-left:2px solid var(--accent)}

/* ---- uitklapbaar (transcript, brondetails) ---- */
.uitklap{margin-top:9px;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:var(--surface-sunk)}
.uitklap > summary{cursor:pointer;padding:8px 12px;font-size:12.5px;font-weight:500;color:var(--accent-ink);list-style:none;display:flex;gap:7px;align-items:center}
.uitklap > summary::-webkit-details-marker{display:none}
.uitklap > summary::before{content:"\25B8";font-size:11px}
.uitklap[open] > summary::before{content:"\25BE"}
.uitklap > summary:hover{background:var(--surface-2)}
.uitklap .inhoud{padding:10px 13px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-2)}
.transcript{display:flex;flex-direction:column;gap:7px;margin:0}
.transcript .r{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px}
.transcript .r .w{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;padding-top:1px}
.transcript .r.agent .w{color:var(--accent-ink)}
.transcript .r p{margin:0;overflow-wrap:anywhere}

/* ---- conceptantwoord (MailPilot) ---- */
.concept{margin-top:10px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 9px 9px 0;background:var(--surface-sunk);padding:12px 14px}
.concept .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:6px}
.concept .tekstvak{width:100%;min-height:120px;resize:vertical;border:1px solid var(--line);border-radius:7px;background:var(--ground);color:var(--ink);padding:10px 12px;font-family:var(--sans);font-size:12.5px;line-height:1.6}
.concept p{margin:0;font-size:12.5px;color:var(--ink-2);white-space:pre-wrap}
.concept .knoppen{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.concept .knoppen .spacer{flex:1}

/* ---- assistent: chat ---- */
.assistent{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start}
@media (max-width:980px){.assistent{grid-template-columns:1fr}}
.chat{display:flex;flex-direction:column;gap:14px;padding:16px;max-height:min(62vh,620px);overflow-y:auto}
.bubbel{max-width:min(88%,640px);border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.6}
.bubbel.mens{align-self:flex-end;background:var(--accent-bg);color:var(--ink);border-bottom-right-radius:4px}
.bubbel.ai{align-self:flex-start;background:var(--surface-2);color:var(--ink);border-bottom-left-radius:4px}
.bubbel p{margin:0 0 8px}
.bubbel p:last-child{margin:0}
.bubbel .bronnen{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.bubbel .bronnen .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);width:100%}
.bron{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;border:1px solid var(--line);border-radius:20px;padding:2px 9px;color:var(--ink-2);background:var(--ground);text-decoration:none}
.bron:hover{border-color:var(--accent);color:var(--accent-ink)}
.voorstellen{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:0 16px 2px}
.voorstellen button{cursor:pointer;font-family:inherit}
.bubbel.denkt{display:flex;gap:5px;align-items:center;padding:14px}
.bubbel.denkt .stip{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:denk 1.1s infinite}
.bubbel.denkt .stip:nth-child(2){animation-delay:.18s}
.bubbel.denkt .stip:nth-child(3){animation-delay:.36s}
@keyframes denk{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bubbel.denkt .stip{animation:none;opacity:.6}}
.chatvoet{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line-soft)}
.chatvoet textarea{flex:1;min-height:42px;max-height:130px;resize:vertical;border:1px solid var(--line);border-radius:8px;background:var(--surface-sunk);color:var(--ink);padding:10px 12px;font-family:var(--sans);font-size:13px}
.bronkiezer{display:flex;flex-direction:column}
.bronkiezer .b{display:flex;gap:9px;align-items:flex-start;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px;cursor:pointer}
.bronkiezer .b:last-child{border-bottom:0}
.bronkiezer .b input{margin:2px 0 0;accent-color:var(--accent);width:15px;height:15px;flex:0 0 15px}
.bronkiezer .b .s{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}

/* ---- clientkaarten ---- */
.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.kaart{border:1px solid var(--line);border-radius:11px;background:var(--ground);box-shadow:var(--shadow-rest);padding:15px 16px;display:flex;flex-direction:column;gap:10px}
.kaart .kk{display:flex;gap:11px;align-items:center}
.kaart .kk .av{width:36px;height:36px;border-radius:10px;flex:0 0 36px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink-2)}
.kaart .kk .n{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.kaart .kk .d{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.kaart dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:12.5px}
.kaart dt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.kaart dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
/* Contactmomenten: soort en tijd op één regel erboven, de notitie eronder.
   De oude tweekolomsvorm brak "Afspraak · 6 dagen geleden" over drie regels en
   liet de notities ernaast scheef aflopen. */
.kaart .contacten{border-top:1px solid var(--line-soft);padding-top:9px;display:flex;flex-direction:column;gap:7px}
.kaart .contacten .c{display:flex;flex-direction:column;gap:1px;font-size:11.5px;border-left:2px solid var(--line-soft);padding-left:9px}
.kaart .contacten .c .w{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.kaart .contacten .c .t{color:var(--ink-2);overflow-wrap:anywhere}
.kaart .contacten .leeg{padding:8px 0;text-align:left}
.kaart .voet{display:flex;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:wrap}

/* ---- WhatsApp ---- */
.wa{display:grid;grid-template-columns:288px minmax(0,1fr);gap:0;align-items:stretch;min-height:440px;
  border-top:1px solid var(--line)}
@media (max-width:900px){.wa{grid-template-columns:1fr}.wa .wa-lijst{max-height:240px;border-right:0;border-bottom:1px solid var(--line-soft)}}
.wa-lijst{border-right:1px solid var(--line-soft);overflow-y:auto;display:flex;flex-direction:column}
.wa-lijst button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);padding:11px 14px;color:inherit;width:100%}
.wa-lijst button:hover{background:var(--surface)}
.wa-lijst button[aria-current="true"]{background:var(--accent-bg)}
.wa-lijst .n{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-lijst .l{font-size:11.5px;color:var(--ink-3);grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-lijst .w{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.wa-lijst .ongelezen{justify-self:end;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--good);color:var(--ground);font-family:var(--mono);font-size:10px;font-weight:700;display:grid;place-items:center}
.wa-draad{display:flex;flex-direction:column;min-width:0}
.wa-kop{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.wa-kop .spacer{flex:1}
.wa-berichten{display:flex;flex-direction:column;gap:9px;padding:16px;overflow-y:auto;max-height:min(48vh,430px)}
.wa-b{max-width:min(78%,520px);border-radius:11px;padding:9px 12px;font-size:13px;line-height:1.55}
.wa-b .w{display:block;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-top:4px}
.wa-b.in{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:4px}
.wa-b.uit{align-self:flex-end;background:var(--good-bg);border-bottom-right-radius:4px}
.wa-voet{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line-soft)}
.wa-voet select,.wa-voet input{padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface-sunk);color:var(--ink);font-size:12.5px}
.wa-voet input{flex:1;min-width:160px}

/* ---- agenda ---- */
.dagrij{display:grid;grid-template-columns:74px 10px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.dagrij:last-child{border-bottom:0}
.dagrij:hover{background:var(--surface)}
.dagrij .tijd{font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap}
.dagrij .tijd small{display:block;font-weight:400;color:var(--ink-3)}
.dagrij .balk{width:4px;border-radius:3px;align-self:stretch;min-height:34px;background:var(--accent)}
.dagrij .balk.risico{background:var(--warn)}
.dagrij .balk.gedaan{background:var(--good)}
.dagrij .t{font-size:13.5px;font-weight:600}
@media (max-width:700px){.dagrij{grid-template-columns:74px 10px minmax(0,1fr)}.dagrij .acties{grid-column:1 / -1}}

/* ---- HR ---- */
.hrbalk{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.vac{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:12px}
.vac .fase{border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;background:var(--surface-sunk)}
.vac .fase .k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.vac .fase .v{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-top:3px}
.vac .fase .s{font-size:11.5px;color:var(--ink-3)}

/* ---- kleine hulpstukken ---- */
.balkje{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 0 14px}
.zoekveld{display:flex;gap:8px;align-items:center;flex:1;min-width:190px;border:1px solid var(--line);border-radius:8px;background:var(--surface-sunk);padding:0 11px;color:var(--ink-3)}
.zoekveld input{flex:1;border:0;background:none;color:var(--ink);font-size:13px;padding:9px 0;min-width:0}
.zoekveld input:focus{outline:none}
.zoekveld:focus-within{outline:2px solid var(--accent);outline-offset:-1px}
.segm{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.segm button{background:var(--ground);border:0;border-right:1px solid var(--line);padding:6px 11px;font-size:12.5px;color:var(--ink-2)}
.segm button:last-child{border-right:0}
.segm button:hover{background:var(--surface-2)}
.segm button[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.mini{font-size:11.5px;color:var(--ink-3)}
.strook{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.strook .spacer{flex:1}
.tegel .bouwlint{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}

/* ---- Zorgcheck: stoplicht, uitkomst, belinstructie, grafiekjes ---- */
.stoplicht{width:10px;height:10px;border-radius:50%;flex:0 0 10px;align-self:center;background:var(--urg-laag)}
.stoplicht.groen{background:var(--good)}
.stoplicht.oranje{background:var(--warn)}
.stoplicht.rood{background:var(--stop)}
.zc-kop{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;font-size:12.5px}
.zc-kop dt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.zc-kop dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.zc-risico{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.zc-risico .k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.zc-risico .meter{flex:1;min-width:140px;height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.zc-risico .meter .b{display:block;height:100%;border-radius:5px;background:var(--good)}
.zc-risico .meter .b.oranje{background:var(--warn)}
.zc-risico .meter .b.rood{background:var(--stop)}
.zc-risico .v{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.zc-uit{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:8px;margin-top:10px}
.zc-uit .u{border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;background:var(--surface-sunk)}
.zc-uit .u.let{border-color:var(--warn);background:var(--warn-bg)}
.zc-uit .k{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.zc-uit .u.let .k{color:var(--warn)}
.zc-uit .v{font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.zc-gesprekken{display:flex;flex-direction:column;gap:12px}
.zc-g{border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;background:var(--ground)}
.zc-g .kop{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zc-g .kop .spacer{flex:1}
.zc-g .tekst{font-size:12.5px;color:var(--ink-2);margin:9px 0 0;overflow-wrap:anywhere}
.zc-contacten{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:10px}
.zc-contacten .c{display:flex;gap:10px;align-items:center;border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;background:var(--surface-sunk)}
.zc-contacten .c > div{min-width:0;flex:1}
.zc-contacten .r{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.zc-contacten .n{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.zc-contacten .s{display:block;font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}
.zc-script{border-left:3px solid var(--accent);background:var(--surface-sunk);border-radius:0 9px 9px 0;padding:12px 15px}
.zc-script .lb{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}
.zc-script p{margin:0 0 13px;font-size:13px;color:var(--ink);line-height:1.6}
.zc-script p:last-child{margin-bottom:0}
.zc-vragen{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px}
.zc-vragen li{font-size:13px;color:var(--ink)}
.zc-vragen .k{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.zc-woorden{display:flex;gap:6px;flex-wrap:wrap}
.zc-tabel th:first-child,.zc-tabel td:first-child{padding-left:0}
.zc-tabel th:last-child,.zc-tabel td:last-child{padding-right:0}
.grafiek svg{display:block;width:100%;height:auto}
.grafiek .legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--ink-3)}
.grafiek .legenda span{display:inline-flex;gap:6px;align-items:center}
.grafiek .legenda i{width:10px;height:10px;border-radius:3px}

/* ============================================================
   WERKOVERZICHT — één lijst over alle diensten
   Zie docs/30-dashboard-herontwerp.md. Alles op het 4-px raster,
   rijhoogte 44 px (comfortabel) of 36 px (compact).
   ============================================================ */
.werk{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
/* De drie zones staan vanaf 1280 px naast elkaar, zoals de brief vraagt. Het
   paneel krimpt mee: op 1280 is elke pixel die de lijst niet krijgt er een te
   veel, op een breed scherm mag het concept meer ruimte hebben. */
@media (min-width:1280px){.werk{grid-template-columns:minmax(0,1fr) 340px;gap:12px}}
@media (min-width:1440px){.werk{grid-template-columns:minmax(0,1fr) 400px;gap:16px}}
@media (min-width:1600px){.werk{grid-template-columns:minmax(0,1fr) 420px}}

/* ---- cijferstrip: vijf klikbare feiten ---- */
.cijferstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:12px}
.feit{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--ground);color:var(--ink);box-shadow:var(--shadow-rest);min-width:0}
button.feit:hover{border-color:var(--accent);background:var(--surface)}
.feit[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg),var(--shadow-rest)}
.feit .k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);overflow-wrap:anywhere;line-height:1.3}
.feit .vr{display:flex;align-items:flex-end;gap:8px;width:100%}
.feit .v{font-size:23px;font-weight:600;letter-spacing:-.025em;line-height:1.15;font-variant-numeric:tabular-nums}
.feit .v.klein{font-size:16px;letter-spacing:-.01em;line-height:1.5}
.feit.alarm .v{color:var(--stop)}
.feit.warn .v{color:var(--warn)}
.feit .vonk{display:none;margin-left:auto}
.feit .vonk svg{display:block;height:20px;width:66px}
@media (min-width:1440px){.feit .vonk{display:block}}
/* Op een telefoon zou de strip zes rijen hoog worden en de lijst van het
   scherm duwen. Eén schuifbare regel houdt de vijf feiten bij elkaar. */
@media (max-width:640px){
  .cijferstrip{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scroll-snap-type:x proximity;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .feit{flex:0 0 138px;scroll-snap-align:start}
}

/* ---- filterbalk ---- */
.wbalk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.wbalk .spacer{flex:1}
.wbalk label{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.wbalk select{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--ground);color:var(--ink);font-size:12.5px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--line);
  background:var(--ground);color:var(--ink-2);font-size:12.5px;white-space:nowrap}
.chip:hover{background:var(--surface-2);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent-bg);border-color:transparent;color:var(--accent-ink);font-weight:600}
.chip .pt{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.chipgroep{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){
  .chipgroep{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;width:100%;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .chip{flex:0 0 auto}
  .wbalk{gap:6px}
  .wbalk .segm{width:100%}
  .wbalk .segm button{flex:1}
  .wbalk label{display:none}
  .wbalk select{flex:1;min-width:0}
}

/* ---- de lijst ---- */
.werkvlak{background:var(--ground);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-rest);overflow:hidden}
.nieuwbalk{display:flex;justify-content:center;padding:8px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.werklijst{--rij:44px;display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.werklijst[data-dicht="compact"]{--rij:36px}
.groepkop{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--surface);
  border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

.wr{display:grid;grid-template-columns:8px 22px minmax(104px,1.3fr) minmax(0,2.6fr) 46px 72px 96px;gap:0 10px;
  align-items:center;min-height:var(--rij);padding:4px 14px 4px 10px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;position:relative;border-left:3px solid transparent}
.wr:last-child{border-bottom:0}
.wr:hover{background:var(--surface)}
.wr[aria-selected="true"]{background:var(--accent-bg);border-left-color:var(--accent)}
.wr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wr.gedaan{opacity:.5}
.wr .urg{width:8px;height:8px;border-radius:50%;background:var(--urg-normaal)}
.wr .urg[data-u="spoed"]{background:var(--urg-spoed)}
.wr .urg[data-u="hoog"]{background:var(--urg-hoog)}
.wr .urg[data-u="laag"]{background:var(--urg-laag)}
.wr .wic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2)}
.wr .wic.alarm{background:var(--stop-bg);color:var(--stop)}
.wr .wclient{min-width:0;font-size:13px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr .wclient small{display:block;font-family:var(--mono);font-size:10px;font-weight:400;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.werklijst[data-dicht="compact"] .wclient small{display:none}
.wr .wtitel{min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.werklijst[data-dicht="compact"] .wtitel{font-size:13.5px}
.wr .wtitel .soort{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-right:8px}
/* Wachttijd en deadline staan in dezelfde kolom. Het onderscheid zit in het
   gewicht en de kleur, en staat voluit in de tooltip en de aria-label: een
   deadline is donker, een wachttijd grijs, en te laat is rood. */
.wr .wtijd{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wr .wtijd.deadline{color:var(--ink-2);font-weight:600}
.wr .wtijd.te-laat{color:var(--stop);font-weight:700}
.wr .wwie{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;color:var(--ink-3)}
.wr .wwie .av{width:22px;height:22px;flex:0 0 22px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:9.5px;font-weight:600;color:var(--ink-2)}
.wr .wwie span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr .wactie{display:flex;justify-content:flex-end;gap:4px;opacity:0}
.wr:hover .wactie,.wr[aria-selected="true"] .wactie,.wr:focus-within .wactie{opacity:1}
@media (hover:none){.wr .wactie{opacity:1}}
.wr .wactie .btn{padding:4px 9px;font-size:12px;white-space:nowrap}
.wr.weg{animation:wegrij .18s ease-in forwards}
@keyframes wegrij{to{opacity:0;transform:translateX(12px)}}
@media (prefers-reduced-motion:reduce){.wr.weg{animation:none;opacity:0}}

/* Onder 1400 px gaat "wie" eruit: de naam staat in het paneel en de lijst
   heeft de ruimte harder nodig voor wat er moet gebeuren. */
@media (max-width:1399px){
  .wr{grid-template-columns:8px 22px minmax(104px,1.3fr) minmax(0,2.6fr) 46px 96px;gap:0 12px}
  .wr .wwie{display:none}
}
@media (max-width:760px){
  .wr{grid-template-columns:8px 24px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:start;padding:8px 12px 8px 8px;gap:2px 10px}
  .wr .urg{grid-row:1;align-self:center}
  .wr .wic{grid-row:1;align-self:center}
  .wr .wclient{grid-column:3;grid-row:1}
  .wr .wtijd{grid-column:4;grid-row:1}
  .wr .wtitel{grid-column:3 / -1;grid-row:2;white-space:normal;font-size:13.5px;line-height:1.4}
  .wr .wactie{display:none}
}

/* ---- dagbalk: vandaag in de agenda ----
   Eén baan per medewerker, met links een vaste kolom van 120 px die bij
   horizontaal schuiven blijft staan. Een afspraak is een gevuld blok met rand;
   reistijd en pauze zijn achtergrond — gearceerd, zonder rand, zonder klik.
   Twee standen. In "Passend" vult de strook het venster en staat de hele dag
   in beeld; smalle blokken laten dan de dienst en zo nodig de tekst weg, met
   alles in de title. In "Uitvergroot" komt de breedte van een uur uit het
   kortste blok van de dag (werk.js), is de strook breder dan het venster en
   schuift hij; de namenkolom blijft staan en een schaduwrand links of rechts
   zegt aan welke kant er meer dag is.
   ------------------------------------------------------------------------- */
#dagvak{grid-column:1 / -1;min-width:0}

.dagbalk{
  position:relative;margin-top:16px;
  /* Deze drie staan ook in werk.js als DAG_NAAM, DAG_BAAN en DAG_KIER: het
     script rekent er de minimale breedte en de schuifstand mee uit. */
  --dag-naam:120px; --dag-baan:34px; --dag-kier:4px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--ground);box-shadow:var(--shadow-rest);
  /* De vlakken zijn licht genoeg om zwarte tekst te dragen, de inkt is per paar
     op ten minste 4,5:1 met zijn eigen vlak gekozen — in licht én in donker. */
  --dag-a-vlak:#dce9f8; --dag-a-rand:#94bce5; --dag-a-ink:#10426f;
  --dag-b-vlak:#dbefe4; --dag-b-rand:#93ccae; --dag-b-ink:#125337;
  --dag-c-vlak:#eae0f7; --dag-c-rand:#bda9e8; --dag-c-ink:#4b2c88;
  --dag-d-vlak:#d9eef2; --dag-d-rand:#8ec9d4; --dag-d-ink:#0b5262;
  --dag-e-vlak:#e2e8f0; --dag-e-rand:#b4c2d4; --dag-e-ink:#2c3e54;
  --dag-pauze-vlak:#fbf0d5; --dag-pauze-rand:#e7cf95; --dag-pauze-ink:#6b4108;
  --dag-reis:repeating-linear-gradient(135deg,#eaf0f6 0 5px,#f6f9fc 5px 10px);
  --dag-pauze-arcering:repeating-linear-gradient(135deg,#f7eed8 0 5px,#fdf7e8 5px 10px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dagbalk{
    --dag-a-vlak:#16304e; --dag-a-rand:#3a608b; --dag-a-ink:#b7d5f6;
    --dag-b-vlak:#13342a; --dag-b-rand:#2b6049; --dag-b-ink:#9ce0c1;
    --dag-c-vlak:#252145; --dag-c-rand:#473c78; --dag-c-ink:#cdc0f4;
    --dag-d-vlak:#11333c; --dag-d-rand:#2c626e; --dag-d-ink:#8fd9e8;
    --dag-e-vlak:#1e2f45; --dag-e-rand:#3d5169; --dag-e-ink:#c3d2e5;
    --dag-pauze-vlak:#332714; --dag-pauze-rand:#604828; --dag-pauze-ink:#f0d09a;
    --dag-reis:repeating-linear-gradient(135deg,#1a2840 0 5px,#131e2e 5px 10px);
    --dag-pauze-arcering:repeating-linear-gradient(135deg,#2e2211 0 5px,#201709 5px 10px);
  }
}
:root[data-theme="dark"] .dagbalk{
  --dag-a-vlak:#16304e; --dag-a-rand:#3a608b; --dag-a-ink:#b7d5f6;
  --dag-b-vlak:#13342a; --dag-b-rand:#2b6049; --dag-b-ink:#9ce0c1;
  --dag-c-vlak:#252145; --dag-c-rand:#473c78; --dag-c-ink:#cdc0f4;
  --dag-d-vlak:#11333c; --dag-d-rand:#2c626e; --dag-d-ink:#8fd9e8;
  --dag-e-vlak:#1e2f45; --dag-e-rand:#3d5169; --dag-e-ink:#c3d2e5;
  --dag-pauze-vlak:#332714; --dag-pauze-rand:#604828; --dag-pauze-ink:#f0d09a;
  --dag-reis:repeating-linear-gradient(135deg,#1a2840 0 5px,#131e2e 5px 10px);
  --dag-pauze-arcering:repeating-linear-gradient(135deg,#2e2211 0 5px,#201709 5px 10px);
}
.dagbalk .loc-a{--dag-vlak:var(--dag-a-vlak);--dag-rand:var(--dag-a-rand);--dag-tekst:var(--dag-a-ink)}
.dagbalk .loc-b{--dag-vlak:var(--dag-b-vlak);--dag-rand:var(--dag-b-rand);--dag-tekst:var(--dag-b-ink)}
.dagbalk .loc-c{--dag-vlak:var(--dag-c-vlak);--dag-rand:var(--dag-c-rand);--dag-tekst:var(--dag-c-ink)}
.dagbalk .loc-d{--dag-vlak:var(--dag-d-vlak);--dag-rand:var(--dag-d-rand);--dag-tekst:var(--dag-d-ink)}
.dagbalk .loc-e{--dag-vlak:var(--dag-e-vlak);--dag-rand:var(--dag-e-rand);--dag-tekst:var(--dag-e-ink)}

.dagbalk > summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;border-radius:12px}
.dagbalk > summary::-webkit-details-marker{display:none}
.dagbalk > summary::before{content:"\25B8";font-size:11px;color:var(--ink-3)}
.dagbalk[open] > summary::before{content:"\25BE"}
.dagbalk > summary .mini{font-weight:400;color:var(--ink-2)}
.dagbalk > summary .spacer{flex:1}

/* De schakelaar links, de schaalknop ernaast, de legenda rechts. */
.dagkop{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:0 14px 10px}
.dagschakel{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--ground)}
.dagschakel button{border:0;background:none;color:var(--ink-2);font-size:12.5px;font-weight:500;padding:0 12px;min-height:30px}
.dagschakel button + button{border-left:1px solid var(--line)}
.dagschakel button:hover{background:var(--surface-2);color:var(--ink)}
.dagschakel button[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}

/* De legenda is geen plaatje maar een rij knoppen: klikken verbergt of toont.
   Uit is een doorgestreepte, verbleekte chip — niet alleen een lichtere kleur,
   want kleur alleen is geen informatie. */
.daglegenda{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 0 auto;padding:0;list-style:none}
.dagchip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--ground);color:var(--ink-2);
  font-size:12.5px;font-weight:500;white-space:nowrap}
.dagchip .sw{width:12px;height:12px;flex:0 0 12px;border-radius:3px;background:var(--dag-vlak);border:1px solid var(--dag-tekst)}
.dagchip .n{font-size:11px;color:var(--ink-3)}
.dagchip:hover{border-color:var(--accent);color:var(--ink)}
.dagchip[aria-pressed="true"]{background:var(--surface);color:var(--ink);border-color:var(--line)}
.dagchip[aria-pressed="false"]{color:var(--ink-3);text-decoration:line-through;background:var(--ground)}
.dagchip[aria-pressed="false"] .sw{background:transparent}
.dagchip.lg-reis .sw{background:var(--dag-reis);border-color:var(--ink-3)}
.dagchip.lg-pauze .sw{background:var(--dag-pauze-vlak);border-color:var(--dag-pauze-ink)}
.dagchip.dagschaal{text-decoration:none}
/* De schakelaar tussen Passend en Uitvergroot draagt geen aria-pressed: het
   opschrift noemt wat er gebeurt, niet in welke stand u staat. */
.dagchip.dagzoom{text-decoration:none}
.dagchip.dagschaal[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent-ink);border-color:var(--accent);font-weight:600;text-decoration:none}

.dagleeg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:2px 14px 16px;font-size:13px;color:var(--ink-2)}
.dagvoet{padding:0 14px 14px}
.dagalsknop{border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--accent-ink);
  padding:0 11px;min-height:30px;font-size:12.5px;font-weight:600}
.dagalsknop:hover{border-color:var(--accent);background:var(--surface)}

/* ---- de tijdbalk zelf ---- */
/* De rand eromheen draagt de schaduwranden: die moeten blijven staan terwijl
   de strook eronder schuift, en links pas beginnen waar de namenkolom ophoudt. */
.dagrand{position:relative;padding:0 14px 14px}
.dagrand::before,.dagrand::after{content:"";position:absolute;top:0;bottom:14px;width:30px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .15s ease-out}
.dagrand::before{left:calc(14px + var(--dag-naam));background:linear-gradient(to right,var(--ground),transparent)}
.dagrand::after{right:14px;background:linear-gradient(to left,var(--ground),transparent)}
.dagrand.kan-links::before{opacity:1}
.dagrand.kan-rechts::after{opacity:1}
.dagstrook{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.dagstrook::-webkit-scrollbar{height:9px}
.dagstrook::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}

.dagspoor{position:relative;z-index:0}
.dagkoprij{display:flex;align-items:stretch;height:22px}
.daghoek{position:sticky;left:0;z-index:7;flex:0 0 var(--dag-naam);background:var(--ground)}
/* Het laatste uurlabel staat op 100% en wordt met een transform naar binnen
   geschoven. Zonder deze twee regels telt de browser de breedte van "19:00"
   alsnog bij de strook op, en dan schuift de stand "Passend" toch een stukje. */
.daguren{position:relative;flex:1;min-width:0;overflow:hidden}
.daguren .duur{position:absolute;top:0;white-space:nowrap}
.daguren .duur i{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;
  font-style:normal;color:var(--ink-2);transform:translateX(-50%)}
.daguren .duur.eerste i{transform:translateX(0)}
.daguren .duur.laatste i{transform:translateX(-100%)}

.dagraster{position:absolute;left:var(--dag-naam);right:0;top:22px;bottom:0;z-index:1;pointer-events:none}
.dagraster span{position:absolute;top:0;bottom:0;width:1px}
.dagraster .heel{background:var(--line)}
.dagraster .half{background:var(--line-soft)}

.dagnulaag{position:absolute;left:var(--dag-naam);right:0;top:22px;bottom:0;z-index:5;pointer-events:none}
.dagnu{position:absolute;top:-8px;bottom:0;width:2px;background:var(--accent);transition:left .3s linear}
.dagnu i{position:absolute;top:-4px;left:3px;padding:1px 5px;border-radius:5px;background:var(--accent);color:var(--ink-invert);
  font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:700;white-space:nowrap}

/* Twee kolommen: links de namen, rechts de banen. De namenkolom is één
   aaneengesloten, meeschuivend vlak — per baan een eigen naamvakje zou tussen
   de banen een kier laten waar een wegschuivende rasterlijn doorheen piept. */
.dagbanen{display:flex;align-items:flex-start}
.dagnamen{position:sticky;left:0;z-index:6;flex:0 0 var(--dag-naam);min-width:0;background:var(--ground);
  display:flex;flex-direction:column;gap:var(--dag-kier)}
/* Een lichte baan onder elke rij. Op een strook die breder is dan het venster
   is dat het enige wat een blok van 16:15 nog met de naam links verbindt; de
   uurlijnen liggen erboven, want die staan in een eigen laag. */
.dagvelden{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--dag-kier);
  background:repeating-linear-gradient(to bottom,var(--surface) 0 var(--dag-baan),
    transparent var(--dag-baan),transparent calc(var(--dag-baan) + var(--dag-kier)))}
.dagnaam{height:var(--dag-baan);display:flex;align-items:center;gap:6px;
  padding:0 10px 0 0;font-size:12px;color:var(--ink-2);overflow:hidden}
.dagnaam .nn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.dagnaam .na{margin-left:auto;flex:0 0 auto;min-width:18px;text-align:center;font-size:10.5px;font-weight:600;
  color:var(--ink-3);background:var(--surface-2);border-radius:5px;padding:1px 4px}
.dagvakken{position:relative;z-index:2;height:var(--dag-baan);min-width:0}

/* Een afspraak: gevuld, met rand, met volledige tekstkleur. De tijd staat
   links over de volle hoogte, de cliënt erboven de dienst: zo verdwijnt bij
   minder breedte de dienst en niet de naam. */
.dagblok{position:absolute;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"tijd nm" "tijd dn";align-content:center;align-items:center;column-gap:7px;min-width:3px;
  padding:0 7px;border-radius:7px;border:1px solid var(--dag-rand);background:var(--dag-vlak);color:var(--dag-tekst);
  text-align:left;overflow:hidden;z-index:2;transition:box-shadow .12s ease-out}
.dagblok .tijd{grid-area:tijd;font-size:11.5px;font-weight:600}
.dagblok .nm{grid-area:nm;font-size:12.5px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dagblok .dn{grid-area:dn;font-size:11px;font-weight:400;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dagblok .dn:empty{display:none}
.dagblok:hover{box-shadow:0 0 0 2px var(--dag-rand),var(--shadow-rest);z-index:3}
.dagblok:focus-visible{z-index:3}
/* Twee halve banen onder elkaar: dan past alleen de tijd met de naam. */
.dagblok.halfbaan{grid-template-areas:"tijd nm";column-gap:5px;padding:0 5px;border-radius:5px}
.dagblok.halfbaan .tijd{font-size:10.5px}
.dagblok.halfbaan .nm{font-size:11px}
.dagblok.halfbaan .dn{display:none}
/* Smaller dan 72 px: de dienst vervalt. Smaller dan 48 px: een gekleurde
   streep, en alles staat in de title. */
.dagblok.zonder-dienst{grid-template-areas:"tijd nm"}
.dagblok.zonder-dienst .dn{display:none}
/* Smaller dan 104 px: ook de naam gaat eraf. Een naam die afkapt tot "P…" doet
   alsof er iets staat en kost de ruimte die de tijd nodig heeft. */
.dagblok.alleen-tijd{grid-template-areas:"tijd tijd";justify-content:center;column-gap:0;padding:0 4px}
.dagblok.alleen-tijd .nm,.dagblok.alleen-tijd .dn{display:none}
.dagblok.streep{padding:0;column-gap:0;background:var(--dag-rand)}
.dagblok.streep .tijd,.dagblok.streep .nm,.dagblok.streep .dn{display:none}
/* Afgerond zonder de tekst te verzwakken: de kleur gaat eraf, de rand wordt streep. */
.dagblok.af{background:var(--ground);border-style:dashed;color:var(--ink-2)}
/* Maar een afgerond blok dat tot een streep is teruggebracht heeft geen tekst
   meer om de aandacht mee te trekken: met de grondkleur erin is het een leeg
   kadertje dat op een fout lijkt. Dan wint de kleur weer. */
.dagblok.af.streep{background:var(--dag-rand);border-style:solid}
.dagblok.risico{outline:2px solid var(--warn);outline-offset:-2px}
/* Niet doorgegaan blijft staan, met een doorhaling: een gat zegt niets. */
.dagblok.door{background:var(--ground);border-style:dashed;color:var(--ink-2)}
.dagblok.door .nm,.dagblok.door .tijd{text-decoration:line-through}

/* Reistijd en pauze zijn de ruimte die een planner denkt te hebben, geen
   afspraak: achtergrond, geen rand, geen klik. */
.dagachter{position:absolute;top:0;height:100%;display:flex;align-items:center;padding:0 7px;
  border-radius:6px;z-index:1;pointer-events:none;overflow:hidden;color:var(--ink-3)}
.dagachter .at{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dagachter.is-reis{background:var(--dag-reis)}
.dagachter.is-pauze{background:var(--dag-pauze-arcering)}
.dagachter.zonder-dienst .at,.dagachter.streep .at{display:none}

/* ---- onder 720 px: dezelfde dag als lijst ---- */
.daglijst{display:none;margin:0;padding:0 12px 12px;list-style:none;flex-direction:column;gap:4px}
.dagrij{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:5px 10px;text-align:left;
  border:1px solid var(--line);border-left:4px solid var(--dag-tekst,var(--line));border-radius:9px;
  background:var(--ground);color:var(--ink)}
button.dagrij:hover{border-color:var(--accent);background:var(--surface)}
.dagrij .t{flex:0 0 auto;font-size:11.5px;color:var(--ink-2)}
.dagrij .w{display:flex;flex-direction:column;min-width:0}
.dagrij .w b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dagrij .w i{font-style:normal;font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dagrij.is-reis,.dagrij.is-pauze{border-left-color:var(--ink-3);background:var(--surface);color:var(--ink-2)}
.dagrij.af{border-style:dashed}
.dagrij.door .w b{text-decoration:line-through}

@media (max-width:719px){
  .dagstrook,.dagvoet{display:none}
  .daglijst{display:flex}
  .dagbalk > summary{flex-wrap:wrap;gap:4px 10px}
  .dagbalk > summary .spacer{display:none}
  .dagkop{padding:0 12px 10px}
  .daglegenda{margin-left:0}
  .dagchip.dagschaal,.dagchip.dagzoom{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dagblok,.dagrand::before,.dagrand::after{transition:none}
  .dagnu{transition:none}
}

/* ---- detailpaneel ---- */
.detail{background:var(--ground);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-rest);
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
@media (min-width:1280px){.detail{position:sticky;top:68px;max-height:calc(100vh - 88px)}}
.detail .dk{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.detail .dk .spacer{flex:1}
.detail .dk h2{font-size:15px;line-height:1.35}
.detail .dk .kenmerk{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px}
.detail .dacties{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.detail .dinhoud{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;flex:1}
.detail .leeg{padding:48px 20px}
.dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:12.5px}
.dl dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.dl dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.dvak{border:1px solid var(--line-soft);border-radius:9px;background:var(--surface-sunk);padding:11px 13px;font-size:12.5px;color:var(--ink-2)}
.dvak.accent{border-left:3px solid var(--accent)}
.dvak .lb{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.dvak p{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.dvak textarea{width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:7px;background:var(--ground);
  color:var(--ink);padding:10px 12px;font-family:var(--sans);font-size:12.5px;line-height:1.6}
.dkop{font-size:12px;font-weight:600;color:var(--ink-2);margin:0}
.tijdlijn{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.tijdlijn li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding:0 0 12px;position:relative}
.tijdlijn li::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:1px;background:var(--line)}
.tijdlijn li:last-child{padding-bottom:0}
.tijdlijn li:last-child::before{display:none}
.tijdlijn .pt{width:9px;height:9px;border-radius:50%;background:var(--line);margin-top:5px}
.tijdlijn .pt.nu{background:var(--accent)}
.tijdlijn .tt{font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.tijdlijn .tm{font-family:var(--mono);font-size:10px;color:var(--ink-3)}

/* Onder 1280 px schuift het paneel als laag over de lijst. */
@media (max-width:1279px){
  .detail{position:fixed;top:0;right:0;z-index:55;height:100vh;width:min(440px,100vw);border-radius:0;
    border:0;border-left:1px solid var(--line);box-shadow:var(--shadow-float);transform:translateX(100%);transition:transform .18s ease-out}
  .werk[data-detail="open"] .detail{transform:none}
  .werk:not([data-detail="open"]) .detail{visibility:hidden}
  .detail-sluier{position:fixed;inset:0;background:rgba(16,31,54,.4);z-index:54}
}
@media (prefers-reduced-motion:reduce){.detail{transition:none}}

/* ---- zoekvenster (Ctrl+K) ---- */
.overlay.boven{place-items:start center;padding-top:10vh}
.zoekdialoog{width:100%;max-width:620px;background:var(--ground);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--shadow-float);overflow:hidden;display:flex;flex-direction:column;max-height:74vh}
.zoekdialoog .zi{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink-3)}
.zoekdialoog .zi input{flex:1;border:0;background:none;color:var(--ink);font-size:15px;padding:4px 0;min-width:0}
.zoekdialoog .zi input:focus{outline:none}
.zoekdialoog .zu{overflow-y:auto;padding:6px 0}
.zoekdialoog .zg{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:10px 16px 4px}
.zoekdialoog .zr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;
  padding:8px 16px;border:0;background:none;color:inherit;text-align:left;font-size:13px;min-height:40px}
.zoekdialoog .zr:hover,.zoekdialoog .zr[aria-selected="true"]{background:var(--accent-bg)}
.zoekdialoog .zr .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2)}
.zoekdialoog .zr .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoekdialoog .zr .t small{display:block;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.zoekdialoog .zr .m{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}
.zoekdialoog .zv{display:flex;gap:14px;flex-wrap:wrap;padding:9px 16px;border-top:1px solid var(--line);background:var(--surface);
  font-size:11px;color:var(--ink-3)}
kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--ground);color:var(--ink-2)}

/* ---- toetsenhulp ---- */
.toetsen{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:0 24px;margin:0}
.toetsen div{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-2)}
.toetsen div span{flex:1}

/* ---- toast met een knop erin (ongedaan maken) ---- */
#toast[data-actie="true"]{pointer-events:auto;display:inline-flex;gap:16px;align-items:center}
#toast button{background:none;border:0;color:var(--ground);font-weight:700;font-size:13px;text-decoration:underline;padding:0;font-family:inherit}

/* ============================================================
   DE GEDEELDE LAAG — de huisregels van 22 september 2026
   docs/34-huisstijl-schermen.md, §2, uitgevoerd in de volgorde
   van §3.1.

   Danny: "Ik wil ook dat je kijkt naar de rest van de schermen
   zodat deze veel vriendelijker zijn, zoals Outlook of de
   Windows 11 look en feel." Dat is geen ander kleurenschema maar
   rust: minder randen, minder schaduw, zachte hoeken, en één
   manier van doen.

   Deze sectie staat met opzet hier: ná alles wat de modules
   hierboven zelf meebrengen — zodat die er in één keer door
   worden rechtgetrokken — en vóór de e-mailmodule, die op
   22 september al volgens deze regels is herbouwd en zijn eigen
   maatvoering houdt.

   Het gaat om de vorm, nooit om wat een scherm doet. Er wordt
   hieronder niets verborgen wat een muis of een toets nodig
   heeft: een knop die bij zweven verschijnt, komt bij focus even
   goed in beeld.
   ============================================================ */

/* ---- 1. Diepte: drie lagen, niet meer ----
   Grond draagt de pagina en alles wat de pagina vult: geen schaduw, hooguit
   een haarlijn waar twee vlakken elkaar raken. Schaduw is er alleen voor wat
   over iets anders heen ligt. */
.panel,.kaart,.tegel,.kpi,.feit,.zc-g,.werkvlak,.dagbalk,.detail,.iz-kop{box-shadow:none}
.panel{border-color:var(--line-soft);border-radius:8px}
.panel + .panel{margin-top:24px}
/* Een lijst staat rechtstreeks op de grond, met haarlijnen ertussen. Het vlak
   eromheen draagt geen rand, geen ronding en geen schaduw meer — alleen een
   lijn boven de eerste regel. `overflow` mag dan ook weer open: een focusring
   met 2 px afstand werd door de afgeronde hoek afgesneden. */
.werkvlak{border:0;border-top:1px solid var(--line);border-radius:0;overflow:visible}
/* Zwevend: 12 px hoeken en --shadow-float. */
.dialog,.zoekdialoog{border-radius:12px;box-shadow:var(--shadow-float)}
.detail{border-radius:12px}
@media (max-width:1279px){.detail{box-shadow:var(--shadow-float);border-radius:0}}

/* ---- 2. Hoeken, hoogtes, ruimte ----
   8 px voor een knop, een invoerveld en een werkbalk; 12 px voor wat zweeft;
   999 px voor een pil of een chip. Verder niets. Besturingshoogte 32 px,
   28 px compact, 40 px zodra er geen muis is. */
:root{--h-ctl:32px;--h-ctl-sm:28px}
@media (pointer:coarse){:root{--h-ctl:40px;--h-ctl-sm:36px}}
.btn{min-height:var(--h-ctl);padding:0 14px;border-radius:8px}
.btn-sm{min-height:var(--h-ctl-sm);padding:0 10px}
.iconbtn{width:var(--h-ctl);height:var(--h-ctl);border-radius:8px}
.iconbtn-sm{width:var(--h-ctl-sm);height:var(--h-ctl-sm);border-radius:8px}
.segm{border-radius:8px}
.segm button{min-height:var(--h-ctl-sm);padding:0 12px}
.zoekveld,.zzoek{border-radius:8px;min-height:var(--h-ctl)}
.zzoek{height:var(--h-ctl)}
.field input,.field textarea,.field select,.veldrij select,.veldrij input,
.kopbalk select,.phead select,.wbalk select,.wa-voet select,.wa-voet input{border-radius:8px}
.wbalk select,.phead select,.kopbalk select{min-height:var(--h-ctl-sm)}

/* ---- 3. Letters: één schaal ----
   19 paginatitel, 15 sectiekop, 13,5 regeltitel en tekst, 12,5 bijzaak,
   11,5 kleinste. */
h1{font-size:19px}
h2{font-size:15px}
.modkop h2.mt,.pagehead h2.mt{font-size:19px}
.detail .dk h2{font-size:15px}

/* ---- 4. Chips en pillen: één vorm ----
   26 px hoog, 999 px hoeken, rand --line, actief in --accent-bg met
   --accent-ink en een rand in het accent. */
.chip{height:26px;padding:0 11px;border-radius:999px;font-size:12.5px}
.chip[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
/* Een pil draagt een woord en geen nummer: dus geen mono, en geen
   hoofdletters. "Over de datum", niet OVER DE DATUM. */
.pill{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0;
  text-transform:none;padding:2px 9px;border-radius:999px}

/* ---- 5. Etiketten in zinsvorm ----
   Mono is voor een nummer, een tijd, een kenmerk of een bedrag; een woord
   staat in de gewone letter. Dit is de hele lijst met etiketten die tot
   vandaag in hoofdletters en in mono stonden. De strook met cijfers is de
   enige uitzondering: die houdt zijn hoofdletters (§2.3), maar niet de mono. */
.bt th,.dl dt,.kaart dt,.zc-kop dt,.note .lb,.dvak .lb,.tweeweg .zij .lb,.concept .lb,
.groepkop,.wbalk label,.vac .fase .k,.zc-uit .k,.zc-contacten .r,.zc-risico .k,.zc-vragen .k,
.bubbel .bronnen .lb,.kaart .contacten .c .w,.transcript .r .w,.lint .lb,.lint .bouw,
.tegel .bouwlint,.zoekdialoog .zg,.eyebrow,.znav .kop,.wr .wtitel .soort,.detail .dk .kenmerk{
  font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none}
.bt th{font-weight:600}
.transcript .r .w{font-size:11.5px}
.feit .k,.kpi .k,.tegel .cijfers .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.06em}

/* ---- 6. De strook met kleine cijfers ----
   Vier grote cijferkaarten vulden het bovenste derde deel van elk scherm
   voordat iemand zijn werk zag. Wat ervoor in de plaats komt, staat al bij
   het werkoverzicht (`.cijferstrip`); hier wordt hij van iedereen, en krijgt
   de oude `.kpi` dezelfde maat, zodat er nergens twee soorten cijfers naast
   elkaar staan. */
.feit{border-radius:8px}
.feit .v{font-size:22px}
.feit[disabled],.feit.stil{cursor:default}
.kpis{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:12px}
.kpi{border-radius:8px;padding:10px 12px}
.kpi .v{font-size:22px;margin-top:2px}
.kpi .v.klein{font-size:15px}
.kpi .d{font-size:11.5px}

/* ---- 7. De kop van een sectie, zonder kaart eromheen ----
   Een rand om een lijst die toch al het hele scherm vult, voegt niets toe en
   kost ruimte. De kop staat dus op de grond bóven de lijst, met één lijn
   eronder, en de lijst begint daar meteen aan. */
.seckop{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  margin:24px 0 0;padding:0 16px 8px;border-bottom:1px solid var(--line)}
.seckop:first-child{margin-top:0}
.seckop h2{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.seckop .spacer{flex:1}
.seckop .mini{color:var(--ink-3)}
.vlak{display:flex;flex-direction:column;margin-bottom:8px}

/* ---- 8. De regel in een lijst ----
   44 px ruim, 36 px compact. De actieknop staat er niet altijd: hij komt bij
   zweven en bij focus. Hij blijft wél bereikbaar met de toets — `opacity` laat
   een knop staan waar `display:none` hem zou weghalen. */
.li{min-height:44px;align-items:center;padding:9px 16px}
.li .kop .t{font-size:13.5px;font-weight:600}
.li .meta{font-size:12px;color:var(--ink-3)}
.li .acties{opacity:0;transition:opacity .12s ease-out}
.li:hover .acties,.li:focus-within .acties{opacity:1}
@media (hover:none){.li .acties{opacity:1}}
@media (max-width:760px){.li .acties{opacity:1}}
@media (prefers-reduced-motion:reduce){.li .acties{transition:none}}
/* Een urgentie of een afwijking krijgt een streep van 3 px links, en het
   woord staat er ook bij: kleur alleen is geen informatie. */
.li.let{border-left:3px solid var(--warn)}
.li.stop{border-left:3px solid var(--stop)}

/* ---- 9. De lege staat ----
   Een zin die zegt wat hier komt te staan en wanneer, en hooguit één knop.
   Links uitgelijnd, want hij staat op de plek van de eerste regel. */
.leeg{text-align:left;padding:22px 16px}
.leeg p{margin:0 0 10px;max-width:60ch}

/* ---- 10. Focus is overal zichtbaar ----
   Een ring van 2 px in het accent met 2 px afstand, op alles wat je met Tab
   kunt bereiken, ook op een rij in een lijst. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Een rij vult de volle breedte: daar ligt de ring ín de rij, anders valt hij
   half buiten het scherm. */
.lijst .li:focus-visible,.bt tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ============================================================
   E-MAILMODULE — het mailprogramma
   Herzien 22 september 2026, docs/33-mailmodule-outlook.md.

   EÉN VLAK, DRIE KOLOMMEN TEGEN ELKAAR. Wat hier veranderde
   tegenover 009/010/011: de drie zones waren losse kaarten met
   rondingen, randen, schaduw en ruimte ertussen. Een
   mailprogramma is één vlak met scheidingslijnen van één pixel.
   De kolommen hebben daarom geen eigen `border`, `border-radius`
   of `box-shadow` meer; alleen een `border-right` in
   --line-soft.

   Boven de kolommen staan twee balken: de kopregel (56 px) met
   de postbuskiezer en het zoekveld, en de opdrachtbalk (44 px)
   met Nieuw bericht als enige gevulde knop.

   Alles op het 4-px raster, rijhoogte 52 px (comfortabel) of
   38 px (compact).
   ============================================================ */
/* DE MODULE VULT DE RUIMTE, TOT AAN DE RANDEN.
   `#view` is `.page`: 20 px marge rondom en een max-width van 1560 px. Voor een
   scherm met kaarten klopt dat; voor een mailprogramma niet — dan blijft het
   een kaart in een pagina. `mailvol` (gezet door mailmodule.js, en daar ook
   weer weggehaald) haalt de marge en de breedtegrens eraf en maakt van #view
   een flexkolom, zodat de module de rest van de hoofdkolom krijgt.
   `.hoofd` is al een flexkolom onder een `.app` van minstens 100vh, dus er is
   geen enkele hoogte in vh nodig: de module krijgt wat er over is. */
#view.page.mailvol{padding:0;max-width:none;flex:1;min-height:0;display:flex;flex-direction:column}
.mailmod{display:flex;flex-direction:column;min-width:0;background:var(--ground);
  flex:1;min-height:480px;overflow:hidden}

/* ---- de kopregel ----
   Zonder eigen titel: de kopbalk van de schil draagt de h1 ("E-mail
   (MailPilot)") en die staat er op elk scherm. De fase-pil van de schil staat
   wél hier, in de regel, in plaats van op een eigen balk erboven. */
.mailhead{display:flex;gap:10px;align-items:center;min-height:56px;padding:0 16px;
  border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.mailhead .spacer{flex:1}
.mailhead .modkop{display:contents}
.mailhead .modkop .spacer,.mailhead .modkop .acties{display:none}
.mailmapknop{display:none}

/* De postbuskiezer: de naam van de postbus met "+2 postbussen" erachter. */
.postbusknop{display:inline-flex;gap:7px;align-items:center;max-width:min(38ch,40%);min-width:0;
  padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);font-size:12.5px}
.postbusknop:hover{border-color:var(--accent);color:var(--accent-ink)}
.postbusknop:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.postbusknop .nm{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postbusknop .rest{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}
.postbusknop svg{flex:0 0 auto;color:var(--ink-3)}
.mailzoek{flex:1;min-width:0;max-width:540px}
.postbuslijst{display:flex;flex-direction:column;gap:2px}
.postbuslijst .mapknop{min-height:38px}

/* ---- de opdrachtbalk ---- */
.mailcmd{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:44px;padding:5px 16px;
  background:var(--surface);border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.mailcmd .spacer{flex:1}
.mailcmd .streep{width:1px;height:20px;background:var(--line);flex:0 0 1px;margin:0 2px}
.mailkeuze{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--ground);
  color:var(--ink);font-size:12px;max-width:180px;min-width:0}
.mailkeuze:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Een uitgeschakelde knop blijft staan en verandert de balk dus niet van vorm. */
.mailcmd .btn[disabled],.mailcmd .iconbtn[disabled]{opacity:.42;cursor:default}

/* ---- de drie kolommen ---- */
.mailvlak{display:grid;grid-template-columns:200px minmax(320px,380px) minmax(0,1fr);
  flex:1;min-height:0;position:relative}
@media (min-width:1600px){.mailvlak{grid-template-columns:216px minmax(360px,420px) minmax(0,1fr)}}

/* Het leesvenster onder de lijst in plaats van ernaast. */
.mailmod[data-lees="onder"] .mailvlak{grid-template-columns:200px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.mailmod[data-lees="onder"] .mailzij{grid-row:1 / -1}
.mailmod[data-lees="onder"] .maillijst{grid-column:2;grid-row:1;border-right:0;
  border-bottom:1px solid var(--line-soft)}
.mailmod[data-lees="onder"] .mailbericht{grid-column:2;grid-row:2}

/* ---- zone 1: de mappen, en alleen de mappen ---- */
.mailzij{display:flex;flex-direction:column;gap:14px;min-width:0;padding:12px 8px;
  border-right:1px solid var(--line-soft);overflow-y:auto}
.mailzij .kop{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);padding:0 6px 4px}
.mailzij .groep{display:flex;flex-direction:column;gap:1px}
.mailzijvoet{margin-top:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  padding-top:8px;border-top:1px solid var(--line-soft)}
.mailsluier2{display:none}
.mapknop{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:9px;align-items:center;width:100%;
  min-height:32px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--ink-2);
  font-size:13px;text-align:left}
.mapknop:hover{background:var(--surface-2);color:var(--ink)}
.mapknop[aria-current="true"]{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.mapknop .ic{display:grid;place-items:center;color:var(--ink-3);flex:0 0 16px}
.mapknop[aria-current="true"] .ic{color:var(--accent-ink)}
.mapknop .lb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapknop .n{font-family:var(--mono);font-size:10px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mapknop[aria-current="true"] .n{color:var(--accent-ink)}
.mapknop .n.aan{min-width:18px;height:17px;padding:0 5px;border-radius:9px;background:var(--surface-2);
  color:var(--ink-2);display:grid;place-items:center;font-weight:600}
.mapknop .stip{width:8px;height:8px;border-radius:3px;flex:0 0 8px;justify-self:center}
/* Een map van het kantoor krijgt een gekleurd blokje in plaats van een icoon. */
.mapknop .blok{width:10px;height:10px;border-radius:3px;flex:0 0 10px;justify-self:center;
  background:var(--lk)}

/* De zes labelkleuren, met de tokens die in licht en donker al op elkaar zijn
   afgestemd: een label houdt zo in beide thema's dezelfde betekenis. */
.lkl{--lk:var(--urg-laag);--lkb:var(--surface-2)}
.lkl[data-kleur="blauw"]{--lk:var(--info);--lkb:var(--info-bg)}
.lkl[data-kleur="groen"]{--lk:var(--good);--lkb:var(--good-bg)}
.lkl[data-kleur="oranje"]{--lk:var(--warn);--lkb:var(--warn-bg)}
.lkl[data-kleur="rood"]{--lk:var(--stop);--lkb:var(--stop-bg)}
.lkl[data-kleur="paars"]{--lk:var(--accent-ink);--lkb:var(--accent-bg)}
.mapknop .stip.lkl{background:var(--lk)}
.labelpil{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  padding:2px 7px;border-radius:5px;background:var(--lkb);color:var(--lk);white-space:nowrap;border:0}
.labelpil.kies{cursor:pointer;border:1px solid transparent}
.labelpil.kies[aria-pressed="false"]{background:none;border-color:var(--line);color:var(--ink-3)}

/* ---- zone 2: werkweergaven, filters, de lijst ---- */
.maillijst{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border-right:1px solid var(--line-soft)}

/* De werkweergaven boven de lijst, met de regel die zegt wat ze zijn. Die regel
   is het hele punt van de verbouwing: een bericht verhuist niet. */
.mailweergaven{padding:9px 16px 8px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.mailweergaven .rij{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.mailweergaven .rij .spacer{flex:1}
.wknop{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border:1px solid var(--line);
  border-radius:20px;background:var(--ground);color:var(--ink-2);font-size:12.5px;white-space:nowrap}
.wknop:hover{border-color:var(--accent);color:var(--accent-ink)}
.wknop:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wknop[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink-invert);
  font-weight:600}
.wknop .n{font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.wknop[aria-pressed="true"] .n{color:var(--ink-invert)}
.wuitleg{display:flex;gap:10px;align-items:baseline;margin:7px 0 0;font-size:11.5px;color:var(--ink-3)}
.wuitleg > span:first-child{min-width:0;flex:1}
/* Het keuzemenu "Meer…" mag niet zo breed worden dat de knop Filters van de rij
   valt: de werkweergaven en die knop horen bij elkaar. */
.mailweergaven .mailkeuze{max-width:108px}

/* Alles wat geen werkweergave is, staat achter één knop met het aantal actieve
   filters erop. Er stonden hier twee rijen filters in twee vormen; dat is
   precies wat deze verbouwing moest opruimen. */
.filterknop[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg);
  color:var(--accent-ink);font-weight:600}
.filterknop[aria-pressed="true"] .n{color:var(--accent-ink)}
.mailtel{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap}
.mailnieuw{display:flex;justify-content:center;padding:7px 8px;border-bottom:1px solid var(--line-soft);
  background:var(--surface)}
.mailrijen{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;--rij:52px}
.mailrijen[data-dicht="compact"]{--rij:38px}
.mailrijen .groepkop{position:sticky;top:0;z-index:2}

/* ---- een regel ----
   Vier regels met een vaste betekenis, een kleurstreep van 3 px links voor de
   urgentie, en rechts drie icoonknoppen die bij zweven of focus verschijnen.
   Kleur alleen is geen informatie: spoed en hoog zetten het woord er ook bij,
   en de hele regel draagt een aria-label waarin het voluit staat. */
.mr{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:center;
  width:100%;min-height:var(--rij);padding:7px 92px 7px 12px;border:0;
  border-left:3px solid transparent;background:none;color:inherit;text-align:left;cursor:pointer}
.mr[data-u="spoed"]{border-left-color:var(--urg-spoed)}
.mr[data-u="hoog"]{border-left-color:var(--urg-hoog)}
.mr:hover{background:var(--surface)}
.mr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mr.weg{opacity:.55}
.mr .r1{display:flex;gap:8px;align-items:baseline;min-width:0}
.mr .r1 .spacer{flex:1}
.mr .van{min-width:0;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr.onread .van{font-weight:700}
.mr .urgwoord{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.mr .urgwoord[data-u="spoed"]{color:var(--urg-spoed)}
.mr .urgwoord[data-u="hoog"]{color:var(--urg-hoog)}
.mr .draadtel{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--surface-2);
  color:var(--ink-2);display:inline-grid;place-items:center;font-family:var(--mono);font-size:9.5px;
  font-weight:600;align-self:center}
.mr .w{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mr .ond{min-width:0;font-size:13px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mr.onread .ond{font-weight:600}
.mr .voorb{min-width:0;font-size:11.5px;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mr .r4{display:flex;gap:7px;align-items:center;min-width:0;padding-top:2px;overflow:hidden;
  white-space:nowrap}
.mr .r4 .dos{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}
.mr .r4 .cli{font-size:11px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.mr .r4 .toest{font-size:11px;color:var(--ink-3);white-space:nowrap}
.mr .ic{display:inline-grid;place-items:center;color:var(--ink-3);flex:0 0 auto}
.mr .ic.vlag{color:var(--warn)}

/* Compact: de eerste zin en de vierde regel vallen weg, het onderwerp komt
   naast de afzender. Zo past er twee keer zo veel post in beeld. */
.mailrijen[data-dicht="compact"] .mr{padding-top:4px;padding-bottom:4px}
.mailrijen[data-dicht="compact"] .mr .voorb,
.mailrijen[data-dicht="compact"] .mr .r4{display:none}

.mailvoet{padding:10px 12px;border-top:1px solid var(--line-soft);display:flex;gap:8px;align-items:center;
  flex:0 0 auto}

/* ---- zone 3: het bericht ----
   Eén schuifbaar geheel: kop, bericht en antwoordvak onder elkaar, met de
   actiebalk die bovenaan blijft plakken. De eerste opzet gaf het bericht en het
   antwoordvak elk hun eigen hoogte, en dan houdt het bericht op een laptop van
   1280 bij honderd pixels op — met het antwoordvak eronder dat er driehonderd
   inneemt. Nu scrolt de medewerker van de aanmaning naar zijn antwoord, zoals
   in elk mailprogramma. */
.mailbericht{background:var(--ground);display:flex;flex-direction:column;min-width:0;overflow-y:auto}
.mbkop{padding:14px 16px 12px;border-bottom:1px solid var(--line-soft)}
.mbkop .titelrij{align-items:flex-start;gap:10px}
.mbkop .t{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.28;margin:0;
  overflow-wrap:anywhere}
.mbkop .rij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.mbkop .rij:last-child{margin-bottom:0}
.mbkop .av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.mbkop .wie{min-width:0;font-size:13px;line-height:1.35}
.mbkop .wie b{font-weight:600}
.mbkop .wie span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);overflow-wrap:anywhere}
.mbkop .tijd{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.mbkop .adres{font-family:var(--mono);font-size:11px;color:var(--ink-3);overflow-wrap:anywhere}

/* De strook kenmerken: urgentie met termijn, cliënt, dossier, team, postbus. */
.mbkop .kenmerken{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line-soft)}
.mbkop .km{display:inline-flex;gap:6px;align-items:baseline;min-width:0}
.mbkop .km .k{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.mbkop .km .v{font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.mbkop .km .v.mono{font-family:var(--mono);font-size:11px}
.mbacties{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 16px;
  border-bottom:1px solid var(--line-soft);background:var(--surface);
  position:sticky;top:0;z-index:3}
.mbacties .spacer{flex:1}
.mbinhoud{padding:16px;display:flex;flex-direction:column;gap:14px;flex:1 0 auto}
.mbinhoud .body{font-size:13.5px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere}
.mbinhoud .body p{margin:0 0 11px}
.mbinhoud .body p:last-child{margin:0}

/* ---- het voorstel van MailPilot, onderaan het leesvenster ----
   Eén blok met een rand erboven en de achtergrond van --surface, met het
   antwoordvak erin. Hiervoor stond het voorstel bovenaan het bericht en het
   antwoordvak helemaal onderaan; wie een concept wilde nakijken, scrolde dus
   twee keer langs het bericht heen. */
.mvoorstel{margin-top:auto;border-top:1px solid var(--line);background:var(--surface)}
.voorstel{padding:13px 16px 0}
.voorstel .vkop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.voorstel .vkop .spacer{flex:1}
.voorstel .vkop .ic{display:grid;place-items:center;color:var(--accent-ink)}
.voorstel .vkop .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-ink)}
.voorstel .vkop .nb{font-size:11.5px;color:var(--ink-3)}
.voorstel .mis{margin:0 0 6px;font-size:12.5px;color:var(--stop)}
.voorstel dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:12.5px}
.voorstel dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px}
.voorstel dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.voorstel .conceptvak{margin-top:10px;border:1px solid var(--line);border-radius:9px;
  background:var(--ground);padding:11px 13px;max-height:180px;overflow-y:auto}
.voorstel .conceptvak p{white-space:pre-wrap;font-size:12.5px;color:var(--ink-2);margin:0}
.voorstel .knoppen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}

/* Bijlagen */
.bijlagen{display:flex;gap:7px;flex-wrap:wrap}
.bijl{display:inline-flex;gap:7px;align-items:center;border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;background:var(--surface-sunk);color:var(--ink-2);font-size:12px;text-decoration:none;max-width:100%}
.bijl:hover{border-color:var(--accent);color:var(--accent-ink)}
.bijl .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bijl .gr{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}
.bijl .weg{border:0;background:none;color:var(--ink-3);padding:0;display:grid;place-items:center}
.bijl .weg:hover{color:var(--stop)}
.bijlvoorbeeld{border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;background:var(--surface-sunk)}
.bijlvoorbeeld img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain}
.bijlvoorbeeld .kop{display:flex;gap:8px;align-items:center;padding:8px 11px;border-bottom:1px solid var(--line-soft);
  font-size:12px;color:var(--ink-2)}
.bijlvoorbeeld .kop .spacer{flex:1}
.bijlvoorbeeld .pdf{padding:22px 14px;text-align:center;color:var(--ink-3);font-size:12.5px}

/* Het antwoordvak. Het zit sinds 22 september 2026 ín het voorstelblok, dus
   geen eigen rand en geen eigen achtergrond meer. */
.antwoord{background:none}
.antwoord .voet .naregel{color:var(--ink-3)}
.antwoord .balk{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 16px 0}
.antwoord .balk .spacer{flex:1}
.antwoord .velden{display:flex;flex-direction:column;gap:6px;padding:10px 16px 0}
.antwoord .veld{display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;align-items:center}
.antwoord .veld label{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.antwoord .veld input{border:1px solid var(--line);border-radius:7px;background:var(--ground);color:var(--ink);
  font-size:12.5px;padding:7px 9px;min-width:0;width:100%}
.antwoord .veld input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.antwoord textarea{width:100%;min-height:140px;max-height:44vh;resize:vertical;border:1px solid var(--line);
  border-radius:8px;background:var(--ground);color:var(--ink);padding:11px 13px;font-family:var(--sans);
  font-size:13px;line-height:1.6;margin:10px 0 0}
.antwoord .vak{padding:0 16px}
.antwoord .voet{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px}
.antwoord .voet .spacer{flex:1}
.antwoord .hulp{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:0 16px 2px}
.antwoord .hulp .mini{width:100%}
.hulpvoorstel{margin:10px 16px 0;border:1px solid var(--line);border-left:3px solid var(--good);
  border-radius:0 9px 9px 0;background:var(--good-bg);padding:11px 13px}
.hulpvoorstel .lb{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--good);margin-bottom:6px}
.hulpvoorstel p{margin:0;white-space:pre-wrap;font-size:12.5px;color:var(--ink);max-height:180px;overflow-y:auto}
.hulpvoorstel .knoppen{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}

/* De draad */
.draad{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:9px;overflow:hidden}
.draad button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--line-soft);background:none;color:inherit;padding:9px 12px;font-size:12.5px}
.draad button:last-child{border-bottom:0}
.draad button:hover{background:var(--surface)}
.draad button[aria-current="true"]{background:var(--accent-bg)}
.draad .vn{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draad .vb{grid-column:1;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draad .w{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}

/* ---- smal scherm ----
   Onder 1100 px vervalt de mappenkolom en komt hij achter de menuknop in de
   kopregel. Onder 900 px vervalt het leesvenster: een bericht opent dan over de
   volle breedte met een terugknop. De werkweergaven blijven altijd staan — dat
   is wat iemand op een telefoon het hardst nodig heeft. */
@media (min-width:900px){.mailmod .terugknop{display:none}}

@media (max-width:1099px){
  .mailmapknop{display:grid}
  .mailvlak,.mailmod[data-lees="onder"] .mailvlak{grid-template-columns:minmax(320px,380px) minmax(0,1fr)}
  .mailmod[data-lees="onder"] .mailvlak{grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .mailmod[data-lees="onder"] .maillijst{grid-column:1;grid-row:1}
  .mailmod[data-lees="onder"] .mailbericht{grid-column:1;grid-row:2}
  .mailzij{position:absolute;top:0;bottom:0;left:0;z-index:12;width:236px;background:var(--ground);
    box-shadow:var(--shadow-float);transform:translateX(-100%);transition:transform .18s ease-out}
  .mailmod[data-mappen="open"] .mailzij{transform:none}
  .mailmod:not([data-mappen="open"]) .mailzij{visibility:hidden}
  .mailmod[data-mappen="open"] .mailsluier2{display:block;position:absolute;inset:0;z-index:11;
    border:0;padding:0;background:rgba(16,31,54,.36)}
}

@media (max-width:899px){
  .mailvlak,.mailmod[data-lees="onder"] .mailvlak{grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr)}
  .mailmod .mailbericht,.mailmod[data-lees="onder"] .mailbericht{position:absolute;inset:0;z-index:20;
    grid-column:1;grid-row:1;background:var(--ground);border-left:0;
    transform:translateX(100%);transition:transform .18s ease-out}
  .mailmod[data-open="ja"] .mailbericht{transform:none}
  .mailmod:not([data-open="ja"]) .mailbericht{visibility:hidden}
  .mailmod .maillijst{border-right:0}
}
@media (prefers-reduced-motion:reduce){
  .mailmod .mailbericht,.mailmod .mailzij{transition:none}
}

@media (max-width:640px){
  /* Op 380 px past de kopregel niet op één rij. Twee rijen: de fase-pil met de
     postbuskiezer en de drie icoonknoppen, en daaronder het zoekveld over de
     volle breedte. De rekruimte gaat eruit, anders duwt hij elke knop naar een
     eigen regel. */
  .mailhead{flex-wrap:wrap;gap:6px;padding:6px 10px;min-height:0}
  .mailhead .spacer{display:none}
  .postbusknop{flex:1;max-width:none;min-width:0}
  .mailzoek{order:9;flex:1 0 100%;max-width:none}
  .mailcmd{padding:5px 10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  .mailcmd .btn,.mailcmd .mailkeuze{white-space:nowrap;flex:0 0 auto}
  .mailweergaven{padding:8px 10px 6px}
  .mbkop,.mbacties,.mbinhoud{padding-left:12px;padding-right:12px}
  .mbkop .t{font-size:17px}
  .voorstel{padding-left:12px;padding-right:12px}
  .antwoord .balk,.antwoord .velden,.antwoord .vak,.antwoord .voet,.antwoord .hulp{
    padding-left:12px;padding-right:12px}
  .hulpvoorstel{margin-left:12px;margin-right:12px}
  .antwoord .veld{grid-template-columns:minmax(0,1fr)}
  .antwoord .veld label{margin-bottom:-4px}
  .mbacties{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .mbacties .btn{white-space:nowrap}
}

/* ============================================================
   MIGRATIE 010 — het bericht met opmaak, de handtekening,
   de postvaksamenvatting en de mappen van de postbus.

   Twee dingen die hier bij elkaar horen: een bericht van een
   afzender staat in een AFGESCHERMD VENSTER (een iframe met
   sandbox naar een eigen adres met een eigen strakke policy),
   en dat venster heeft dus een eigen kader nodig — het kan
   zijn eigen hoogte niet doorgeven, en de stijl van de Console
   komt er niet in. Vandaar de kaders hieronder in plaats van
   een klasse op de inhoud.
   ============================================================ */

/* De balk boven het bericht: "Afbeeldingen laden", "Platte tekst". */
.inhoudbalk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.inhoudbalk .spacer{flex:1}

/* Het venster met het bericht van de afzender. Wit in beide thema's, net als
   elk mailprogramma: een handtekening met color:#1a1a1a op een donkere
   achtergrond is onleesbaar, en de kleuren van de afzender overschrijven is
   oneerlijker dan een witte kaart. */
.berichtvenster{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#ffffff}
.berichtvenster iframe{display:block;width:100%;height:420px;border:0;background:#ffffff}

/* De handtekening onder het antwoordvak, als gescheiden blok. */
.handtekening{margin:10px 16px 0;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;background:var(--surface-sunk);padding:10px 12px}
.handtekening[data-aan="nee"]{border-left-color:var(--line);opacity:.85}
.handtekening .kop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.handtekening .kop .spacer{flex:1}
.handtekening .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-ink)}
.hsvenster{border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:#ffffff}
.hsvenster iframe{display:block;width:100%;height:148px;border:0;background:#ffffff}
.hsvenster.groot iframe{height:260px}

/* De postvaksamenvatting: de kaart boven de lijst. */
.mailsamenvatting{border-bottom:1px solid var(--line-soft);background:var(--surface)}
.samenvatting{padding:11px 12px}
.samenvatting.mis{background:var(--stop-bg)}
.samenvatting .kop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.samenvatting .kop .spacer{flex:1}
.samenvatting .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-ink)}
.samenvatting .punten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.samenvatting .punten li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:8px;align-items:start}
.samenvatting .punten .urg{width:7px;height:7px;border-radius:50%;margin-top:6px;background:var(--urg-normaal)}
.samenvatting .punten .urg[data-u="spoed"]{background:var(--urg-spoed)}
.samenvatting .punten .urg[data-u="hoog"]{background:var(--urg-hoog)}
.samenvatting .punten .urg[data-u="laag"]{background:var(--urg-laag)}
.samenvatting .punten button{border:0;background:none;padding:0;text-align:left;font-size:12.5px;
  line-height:1.45;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:2px}
.samenvatting .punten button:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}
.samenvatting .punten span:not(.urg){font-size:12.5px;line-height:1.45;color:var(--ink-2)}

/* Het rooster van de openingstijden in het auto-respondervenster. */
.rooster{display:flex;flex-direction:column;gap:6px}
.rooster .dag{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.rooster .dag input[type="time"]{border:1px solid var(--line);border-radius:7px;background:var(--ground);
  color:var(--ink);font-size:12.5px;padding:5px 7px;font-family:var(--mono)}
.rooster .dag .keuze{margin:0}

/* Een keuzevakje met een label ernaast, voor de schakelaars in de vensters. */
.keuze{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin:6px 0}
.keuze input{margin:2px 0 0;flex:0 0 auto}

@media (max-width:640px){
  .handtekening{margin-left:12px;margin-right:12px}
  .berichtvenster iframe{height:340px}
  /* Drie kolommen met twee tijdvelden erin passen niet op 375 px; dan de dag
     op een eigen regel en de twee tijden eronder. */
  .rooster .dag{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rooster .dag .keuze{grid-column:1 / -1}
  .samenvatting .kop .mini{width:100%}
}

/* ============================================================
   INGESLOTEN DIENST (ingesloten.js)

   De Antwoordservice, AgendaPilot en straks WhatsApp zijn eigen
   apps; de Console sluit hun scherm in plaats van het na te
   bouwen. Drie dingen die dat van de opmaak vraagt:

   - het kader bepaalt de hoogte, niet de inhoud: de Console kan
     een andere origin niet meten en het frame heeft zelf geen
     schuifbalk. `.dfvak` krijgt zijn hoogte uit javascript;
   - de ondergrond is die van de Console (--ground), want de
     ingesloten pagina laat zijn eigen achtergrond doorzichtig;
   - op een telefoon gaat het kader over de volle breedte: de
     lijst van de CRM heeft elke pixel nodig.
   ============================================================ */

.dienstframe{background:var(--ground);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-rest);overflow:hidden;margin-bottom:16px}

/* De dunne balk erboven: de naam van het scherm zoals het frame hem meldt, de
   tellers, de tabbladen en de twee knoppen. */
.dfbalk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:8px 12px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.dfbalk .spacer{flex:1}
.dfnaam{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(46ch,100%)}
.dftellers{display:flex;gap:6px;align-items:center}
.dftellers .n{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 7px;border-radius:5px;background:var(--surface-2);color:var(--ink-2)}
.dftellers .n.alarm{background:var(--stop-bg);color:var(--stop)}
.dftabs{background:var(--ground)}
.dfbalk .btn{white-space:nowrap}

/* Het vak om het frame. De hoogte staat in de stijl van het element zelf
   (ingesloten.js); hier alleen de ondergrens, zodat er ook zonder javascript
   geen kader van nul pixels staat. */
.dfvak{position:relative;min-height:640px}
.dfvak iframe{display:block;width:100%;height:100%;border:0;background:var(--ground)}

/* Laden: het skelet ligt over het frame tot het `load`-signaal komt. Het frame
   blijft staan en wordt alleen doorzichtig; weghalen zou de laadslag opnieuw
   beginnen. */
.dfskelet{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
  padding:22px 20px;background:var(--ground);z-index:1}
.dienstframe[data-staat="laden"] iframe{opacity:0}
.dienstframe[data-staat="gereed"] .dfskelet,
.dienstframe[data-staat="fout"] .dfskelet{display:none}

/* Foutstaat: gecentreerd over het kader, met de uitweg naar een eigen venster.
   Het blok staat hier uit en gaat aan bij `data-staat="fout"`: één schakelaar
   in plaats van een `hidden`-attribuut dat javascript ook nog moet bijhouden.
   En het moet ook zo: Chrome zet `[hidden]` met !important in zijn eigen
   stijlsheet, dus een `hidden` in de html zou nooit meer opengaan. */
.dffout{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;gap:10px;
  align-items:flex-start;justify-content:center;padding:26px 24px;background:var(--ground)}
.dffout .t{font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:var(--stop)}
.dffout p{margin:0;font-size:13px;color:var(--ink-2);max-width:56ch}
.dienstframe[data-staat="fout"] .dffout{display:flex}
.dienstframe[data-staat="fout"] iframe{opacity:0}

.dfvoet{margin:0 0 18px}

@media (max-width:640px){
  /* Volle breedte: `.page` heeft hier 12 px zijmarge. */
  .dienstframe{margin-left:-12px;margin-right:-12px;border-radius:0;border-left:0;border-right:0}
  .dfbalk{padding:7px 12px;gap:8px}
  .dfnaam{width:100%}
  .dftabs{width:100%;overflow-x:auto}
  .dfbalk .spacer{display:none}
  .dfvak{min-height:520px}
  .dfvoet{padding:0 12px}
}