/* ============================================================
   Studiomeen · huisstijl van het kantoor
   Stijl D (11-10-2026) → bento (besluit Enes 17-10-2026): warm verloop over de
   hele pagina, kaarten wit 86% met radius 26 en zonder rand, pil-knoppen en
   -filters, het menu als eigen kaart met alle onderdelen uitgeklapt, dunne
   grote cijfers (Jost 300) en rustige animaties. Licht en donker (maanknop).
   De klant (body.klant) houdt de stijl van 11-10: zelfde tokens, oude waarden.

   Welke klasse waarvoor: zie public/HUISSTIJL.md. Snelgids voor nieuwe pagina's
   (alles hieronder bestaat in dit bestand, blok 13 "bento"):

     Raster      <div class="bento">            12 kolommen, gap 20; kinderen .b3 .b4 .b6 .b8 .b12
                 (of het oude .raster + .k3…k12 — dat krijgt dezelfde look)
     Kaart       <section class="kaart">        wit 86%, radius 26, schaduw, hover iets omhoog
                 .kaart.donker                  zwart accent (#1E1B17, tekst #F5F2EC, accent #F1DFB8)
                 .kaart.pad                     vulling rondom (zonder .kaart-kop/.kaart-body)
                 .kaart.vast                    tilt niet bij hover (grote werkkaarten)
     Kerncijfer  <div class="kpi-groot" data-tel="1234">1.234</div>   Jost 300, 54px, tabelcijfers
                 .kpi-label (klein grijs erboven), .kpi-sub (toelichting eronder)
     Pil         <span class="pil goed|let|fout|neutraal|paars">…</span>   (ook .chip blijft werken)
                 kanalen: .pil.mail .pil.whatsapp .pil.telefoon .pil.instagram .pil.facebook
     Balk        <div class="balk"><i style="--w:64%"></i></div>          10px, loopt vol vanaf links
                 .balk.rood / .balk.groen / .balk.donker voor een andere vulkleur
     Voortgang   <div class="voortgang"><i style="--w:72%"></i><span>72%</span></div>   30px pil
     Meter       <div class="meter" style="--p:64"><b>64%</b></div>   ronde meter, loopt vol
     Lijst       <ul class="lijst"><li>…</li></ul>  regels met zachte lijn; .lijst.anim schuift ze binnen
     Knoppen     .knop (zwart, 44px pil) · .knop.secundair (wit) · .knop.rustig · .knop.klein (38px)
     Filters     .segment (pil met pillen; actief = zwart) · .filterpil (losse pil, aria-pressed)
     Animatie    .anim-in (één kaart), .anim-gespreid (kinderen één voor één);
                 na het tekenen: Huisstijl.animeer(element) — zet --i en telt [data-tel] op.
                 Alles uit bij prefers-reduced-motion.

   Iconen: public/iconen.svg  →  <svg class="ico"><use href="/iconen.svg#i-home"/></svg>
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root{
  /* vlakken (bento, besluit Enes 17-10-2026) */
  --bg:#F5EFE4;            /* terugval onder het verloop */
  --bg-verloop:linear-gradient(135deg, #F7F3EC 0%, #F3EBDD 55%, #F1DFB8 100%);
  --kaart-bg:rgba(255,255,255,.86);   /* kaart op het verloop */
  --zijbalk-bg:rgba(255,255,255,.72); /* het menu als eigen kaart */
  --bovenbalk-bg:rgba(247,243,236,.78);
  --surface:#FFFFFF;       /* dicht vlak: invoer, profielmenu, venster */
  --surface-2:#FAF7F1;     /* verzonken vlak, hover */
  --surface-3:#F3EEE4;     /* balkspoor, neutrale pil, placeholder-foto */
  --line:#F3EEE4;          /* zachte lijn tussen regels */
  --line-2:#DDD3C2;        /* rand van invoervelden en tweede knoppen */
  /* tekst */
  --ink:#1E1B17;
  --ink-2:#4F4A42;
  --muted:#6B645A;         /* 5,6:1 op wit */
  /* merk */
  --brand:#1E1B17;         /* hoofdknop, actief menu-item: zwart */
  --on-brand:#FFFFFF;
  --brand-hover:#3A342C;
  --brass:#8A6531;         /* bronzen tekst/links (AA) */
  --brass-ink:#5C4317;
  --brass-soft:#F1DFB8;    /* accent beige */
  --brass-line:#E6CF9E;
  --goud:#E2B04F;          /* balken, meters */
  --goud-2:#B9873E;
  /* de donkere accentkaart (.kaart.donker) */
  --donker-bg:#1E1B17; --donker-ink:#F5F2EC; --donker-stil:#BDB4A6; --donker-accent:#F1DFB8; --donker-lijn:rgba(245,242,236,.14);
  /* betekenis: kleur voor stippen/balken, -ink voor tekst (AA), -soft voor de pil */
  --ok:#3F8A4E;   --ok-ink:#2F6B3B;   --ok-soft:#E3F0E3;   --ok-line:#CFE3CF;
  --warn:#D07A2C; --warn-ink:#9A4A12; --warn-soft:#FBEADB; --warn-line:#F3D5BB;
  --crit:#C4362B; --crit-ink:#A32015; --crit-soft:#FBE4E1; --crit-line:#F4C8C2;
  --neutraal-soft:#F3EEE4; --neutraal-ink:#4F4A42;
  --paars-soft:#EAE7F2; --paars-ink:#4B3F7A;
  /* kanalen */
  --k-mail-soft:#F3EEE4;  --k-mail-ink:#4F4A42;
  --k-wa-soft:#E3F0E3;    --k-wa-ink:#2F6B3B;
  --k-tel-soft:#F1DFB8;   --k-tel-ink:#5C4317;
  --k-ig-soft:#F4E1EA;    --k-ig-ink:#7A2E52;
  --k-fb-soft:#E2ECF4;    --k-fb-ink:#2F4F6B;
  --focus:#8A6531;
  /* vorm */
  --r:18px; --r-s:12px; --r-l:22px;
  --r-kaart:26px;          /* kaarten en het menu */
  --r-knop:99px;           /* knoppen, filters, pillen */
  --r-veld:14px;           /* invoervelden */
  --kaart-rand:0;          /* kaarten hebben geen rand */
  --knop-h:44px;
  --kaart-til:-3px;        /* hover: iets omhoog */
  --knop-indruk:.97;       /* klik: kleine indruk */
  --shadow:0 10px 30px rgba(84,64,30,.08);
  --shadow-2:0 18px 44px rgba(84,64,30,.15);
  /* letters */
  --f-kop:"Jost","Segoe UI",system-ui,sans-serif;
  --f-tekst:"Poppins","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,Menlo,Consolas,monospace;
  /* maten van de schil */
  --zijbalk-breedte:264px;
  --bovenbalk-hoogte:72px;
  --onderbalk-hoogte:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15130F; --bg-verloop:linear-gradient(135deg, #171410 0%, #1B1712 55%, #2A2216 100%);
    --kaart-bg:rgba(36,32,27,.86); --zijbalk-bg:rgba(36,32,27,.72); --bovenbalk-bg:rgba(23,20,16,.78);
    --surface:#24201B; --surface-2:#2A251F; --surface-3:#353026;
    --line:#332D25; --line-2:#4A4237;
    --ink:#F5F2EC; --ink-2:#D6CFC4; --muted:#A79F93;
    --brand:#F5F2EC; --on-brand:#1E1B17; --brand-hover:#E2DCD2;
    --brass:#E2B04F; --brass-ink:#F1DFB8; --brass-soft:#3A2F1C; --brass-line:#5A4727;
    --goud:#E2B04F; --goud-2:#C9974A;
    --donker-bg:#3A3024; --donker-ink:#F5F2EC; --donker-stil:#CFC4B2; --donker-accent:#F1DFB8; --donker-lijn:rgba(245,242,236,.14);
    --ok:#6FBF7F;   --ok-ink:#A9DDB2;   --ok-soft:#1C2B1F;   --ok-line:#2E4A33;
    --warn:#E39A5B; --warn-ink:#F2C29A; --warn-soft:#33231A; --warn-line:#55392A;
    --crit:#E5675B; --crit-ink:#F5A39A; --crit-soft:#351E1B; --crit-line:#5A2F2A;
    --neutraal-soft:#2F2A23; --neutraal-ink:#D6CFC4;
    --paars-soft:#2A2638; --paars-ink:#C9BEF0;
    --k-mail-soft:#2F2A23; --k-mail-ink:#D6CFC4; --k-wa-soft:#1C2B1F; --k-wa-ink:#A9DDB2;
    --k-tel-soft:#3A2F1C;  --k-tel-ink:#F1DFB8;  --k-ig-soft:#33202A; --k-ig-ink:#EBB2CB;
    --k-fb-soft:#1D2733;   --k-fb-ink:#AFC8E0;
    --focus:#E2B04F;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --shadow-2:0 18px 44px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15130F; --bg-verloop:linear-gradient(135deg, #171410 0%, #1B1712 55%, #2A2216 100%);
  --kaart-bg:rgba(36,32,27,.86); --zijbalk-bg:rgba(36,32,27,.72); --bovenbalk-bg:rgba(23,20,16,.78);
  --surface:#24201B; --surface-2:#2A251F; --surface-3:#353026;
  --line:#332D25; --line-2:#4A4237;
  --ink:#F5F2EC; --ink-2:#D6CFC4; --muted:#A79F93;
  --brand:#F5F2EC; --on-brand:#1E1B17; --brand-hover:#E2DCD2;
  --brass:#E2B04F; --brass-ink:#F1DFB8; --brass-soft:#3A2F1C; --brass-line:#5A4727;
  --goud:#E2B04F; --goud-2:#C9974A;
  --donker-bg:#3A3024; --donker-ink:#F5F2EC; --donker-stil:#CFC4B2; --donker-accent:#F1DFB8; --donker-lijn:rgba(245,242,236,.14);
  --ok:#6FBF7F;   --ok-ink:#A9DDB2;   --ok-soft:#1C2B1F;   --ok-line:#2E4A33;
  --warn:#E39A5B; --warn-ink:#F2C29A; --warn-soft:#33231A; --warn-line:#55392A;
  --crit:#E5675B; --crit-ink:#F5A39A; --crit-soft:#351E1B; --crit-line:#5A2F2A;
  --neutraal-soft:#2F2A23; --neutraal-ink:#D6CFC4;
  --paars-soft:#2A2638; --paars-ink:#C9BEF0;
  --k-mail-soft:#2F2A23; --k-mail-ink:#D6CFC4; --k-wa-soft:#1C2B1F; --k-wa-ink:#A9DDB2;
  --k-tel-soft:#3A2F1C;  --k-tel-ink:#F1DFB8;  --k-ig-soft:#33202A; --k-ig-ink:#EBB2CB;
  --k-fb-soft:#1D2733;   --k-fb-ink:#AFC8E0;
  --focus:#E2B04F;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 18px 44px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* De klant (body.klant: portaal, statuspagina, fotopagina, formulier, handleiding) houdt de
   stijl van 11-10-2026: de bento-stijl is alleen voor het kantoor. Zelfde tokennamen, oude waarden. */
body.klant{
  --bg:#F3F2F0; --bg-verloop:none; --kaart-bg:#FFFFFF; --zijbalk-bg:#FFFFFF; --bovenbalk-bg:#FFFFFF;
  --surface:#FFFFFF; --surface-2:#F8F7F5; --surface-3:#ECEAE6; --line:#E7E5E1; --line-2:#D3CFC8;
  --ink:#1C1C1C; --ink-2:#5C5C5C; --muted:#6E6B66;
  --brand:#1C1C1C; --on-brand:#FFFFFF; --brand-hover:#333333;
  --brass:#8A6531; --brass-ink:#6B4C21; --brass-soft:#F1E7D7; --brass-line:#E3CFAD;
  --ok:#2E8A5C;   --ok-ink:#1F6B45;   --ok-soft:#E4F2EA;   --ok-line:#BFE0CD;
  --warn:#C98A1B; --warn-ink:#8A5A0B; --warn-soft:#FBF0DC; --warn-line:#F0D9A8;
  --crit:#C4362B; --crit-ink:#A52B21; --crit-soft:#FAE7E4; --crit-line:#F2C4BE;
  --focus:#8A6531;
  --r:12px; --r-s:8px; --r-l:14px; --r-kaart:12px; --r-knop:8px; --r-veld:8px;
  --kaart-rand:1px solid var(--line); --knop-h:38px; --kaart-til:0px; --knop-indruk:1;
  --shadow:0 1px 2px rgba(28,28,28,.04), 0 6px 18px -12px rgba(28,28,28,.14);
  --shadow-2:0 1px 2px rgba(28,28,28,.05), 0 12px 32px -16px rgba(28,28,28,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.klant{
    --bg:#141414; --kaart-bg:#1C1C1C; --zijbalk-bg:#1C1C1C; --bovenbalk-bg:#1C1C1C;
    --surface:#1C1C1C; --surface-2:#232323; --surface-3:#2C2C2C;
    --line:#2E2D2B; --line-2:#444240;
    --ink:#F2F0EC; --ink-2:#C9C5BF; --muted:#A09B93;
    --brand:#F2F0EC; --on-brand:#141414; --brand-hover:#DAD6D0;
    --brass:#D2A96B; --brass-ink:#E3C28F; --brass-soft:#2C2418; --brass-line:#4A3B22;
    --ok:#4FB07E;   --ok-ink:#8AD3A8;   --ok-soft:#172A1F;   --ok-line:#2B4A37;
    --warn:#E0AD5C; --warn-ink:#EBC47E; --warn-soft:#2E2414; --warn-line:#51401F;
    --crit:#E2574B; --crit-ink:#F39B92; --crit-soft:#331F1D; --crit-line:#55302D;
    --focus:#D2A96B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -12px rgba(0,0,0,.6);
    --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] body.klant{
  --bg:#141414; --kaart-bg:#1C1C1C; --zijbalk-bg:#1C1C1C; --bovenbalk-bg:#1C1C1C;
  --surface:#1C1C1C; --surface-2:#232323; --surface-3:#2C2C2C;
  --line:#2E2D2B; --line-2:#444240;
  --ink:#F2F0EC; --ink-2:#C9C5BF; --muted:#A09B93;
  --brand:#F2F0EC; --on-brand:#141414; --brand-hover:#DAD6D0;
  --brass:#D2A96B; --brass-ink:#E3C28F; --brass-soft:#2C2418; --brass-line:#4A3B22;
  --ok:#4FB07E;   --ok-ink:#8AD3A8;   --ok-soft:#172A1F;   --ok-line:#2B4A37;
  --warn:#E0AD5C; --warn-ink:#EBC47E; --warn-soft:#2E2414; --warn-line:#51401F;
  --crit:#E2574B; --crit-ink:#F39B92; --crit-soft:#331F1D; --crit-line:#55302D;
  --focus:#D2A96B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -12px rgba(0,0,0,.6);
  --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.9);
}

/* ------------------------------------------------------------
   2. Basis
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; height:100%}
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  background-image:var(--bg-verloop); background-attachment:fixed; background-repeat:no-repeat; background-size:100% 100vh;
  font-family:var(--f-tekst); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-kop); font-weight:500; margin:0; line-height:1.15}
h1{font-size:26px; letter-spacing:-.005em}
h2{font-size:18px}
h3{font-size:16px}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; margin:0}
input,select,textarea{font:inherit; color:inherit}
kbd{font:inherit}
hr{border:0; border-top:1px solid var(--line); margin:0}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono); font-size:.92em}
.stil{color:var(--muted)}
.klein-tekst{font-size:12.5px; color:var(--muted)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* iconen uit public/iconen.svg */
.ico{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}
.ico.klein{width:14px; height:14px}
.ico.groot{width:26px; height:26px; stroke-width:1.4}
.label{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:500}
.laden{display:inline-block; width:14px; height:14px; border:2px solid var(--line-2); border-top-color:var(--brass); border-radius:50%; animation:huisstijl-draai .8s linear infinite; vertical-align:-2px}
@keyframes huisstijl-draai{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------
   3. De schil: zijbalk + bovenbalk + inhoud (+ onderbalk op de telefoon)
   ------------------------------------------------------------ */
.app-shell{display:grid; grid-template-columns:calc(var(--zijbalk-breedte) + 16px) minmax(0,1fr); min-height:100vh; min-height:100dvh}
.app-shell > .hoofd{display:flex; flex-direction:column; min-width:0}

.zijbalk{
  position:sticky; top:16px; height:calc(100vh - 32px); height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
  margin:16px 0 16px 16px; border-radius:var(--r-kaart);
  background:var(--zijbalk-bg); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--shadow);
  display:flex; flex-direction:column; padding:22px 14px 18px; z-index:30; scrollbar-width:thin;
}
.logo{display:flex; align-items:center; gap:11px; padding:2px 10px 0; text-decoration:none; color:inherit}
.logo-merk{width:34px; height:34px; border-radius:9px; background:var(--brand); color:var(--on-brand); display:inline-flex; align-items:center; justify-content:center; flex:none}
.logo-merk .ico{width:18px; height:18px; stroke-width:1.6}
.logo-naam{font-family:var(--f-kop); font-weight:500; font-size:18px; letter-spacing:.03em; line-height:1.1}
.logo-sub{font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:2px}
/* Het echte woordmerk (public/logo.svg, 4,83:1; wens Enes 11-10-2026) in plaats van de tekst
   "Studiomeen": twee <img>, de witte variant (logo-wit.svg) in de donkere stand. In de zijbalk
   en op de inlogkaart 180px breed, in de bovenbalk op een telefoon 140px. */
.logo-beeld{display:block; width:min(180px, 100%); flex:1 1 auto; min-width:0}
.logo-beeld img{display:block; width:100%; height:auto}
.logo-beeld .donker{display:none}
:root[data-theme="dark"] .logo-beeld .licht{display:none}
:root[data-theme="dark"] .logo-beeld .donker{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-beeld .licht{display:none}
  :root:not([data-theme="light"]) .logo-beeld .donker{display:block}
}
.logo-blok{display:flex; flex-direction:column; gap:5px; flex:1 1 auto; min-width:0}
.logo-blok .logo-beeld{flex:none}
.zijbalk .zijbalk-sluit{display:none; margin-left:auto}
.menu-label{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:0 14px; margin:26px 0 8px}
.menu-label.onder{margin-top:auto; padding-top:20px}
.menu{display:flex; flex-direction:column; gap:2px}
.menu a,.menu .menu-item{display:flex; align-items:center; gap:11px; height:40px; padding:0 14px; border-radius:var(--r-knop); color:var(--ink-2); font-weight:500; text-decoration:none; transition:background .15s, color .15s, transform .12s; font-size:14px; min-width:0}
.menu a:active{transform:scale(var(--knop-indruk))}
.menu a > span:first-of-type,.menu .menu-item > span:first-of-type{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu a:hover{background:var(--surface-3); color:var(--ink)}
.menu a.actief{background:var(--brand); color:var(--on-brand)}
.menu a.actief .ico{color:var(--on-brand)}
.menu a.bevat-actief{color:var(--ink); font-weight:600}
.menu a.bevat-actief .ico{color:var(--ink)}
.menu .ico{width:19px; height:19px; color:var(--muted)}
.menu a:hover .ico{color:var(--ink-2)}
.menu .menu-item.uit{color:var(--muted); font-weight:400; cursor:default}
.menu.klein a{height:36px; font-size:13px; font-weight:400}
.menu.klein .ico{width:16px; height:16px}
.badge{margin-left:auto; min-width:22px; height:20px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; background:var(--surface-3); color:var(--ink-2); font-variant-numeric:tabular-nums; flex:none}
.zijbalk .badge{background:var(--surface)}
.badge.rood{background:var(--crit-soft); color:var(--crit-ink)}
.badge.brons{background:var(--brass-soft); color:var(--brass-ink)}
.menu a.actief .badge{background:rgba(255,255,255,.18); color:var(--on-brand)}
.menu a.actief .badge.rood{background:var(--crit-soft); color:var(--crit-ink)}
.menu .badge.tekst{font-size:10px; letter-spacing:.04em; text-transform:uppercase; font-weight:500}
.zijbalk-achtergrond{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:29}
/* De menuknop in de bovenbalk opent de lade; op een laptop staat het menu er altijd (17-10-2026). */
@media (min-width:1024px){ .bovenbalk > [data-huisstijl="menu"]{display:none} }

.bovenbalk{
  position:sticky; top:0; z-index:20; height:var(--bovenbalk-hoogte); flex:none;
  background:var(--bovenbalk-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  display:flex; align-items:center; gap:12px; padding:0 28px;
}
.bovenbalk .logo-naam,.bovenbalk .logo-beeld{display:none}
/* 140px, maar hij krimpt mee als de knoppen anders niet passen (de Inbox heeft er op 390px een extra) */
.bovenbalk .logo-beeld{width:140px; flex:0 1 140px; min-width:72px}
.ruimte{flex:1}
.scheiding{width:1px; height:26px; background:var(--line); margin:0 4px}
.zoek{position:relative; display:flex; align-items:center; width:420px; max-width:100%}
.zoek > .ico{position:absolute; left:16px; color:var(--muted); pointer-events:none}
.zoek input{height:44px; width:100%; padding:0 76px 0 44px; border-radius:var(--r-knop); border:0; background:var(--kaart-bg); box-shadow:var(--shadow); font-size:13.5px; color:var(--ink)}
.zoek input::placeholder{color:var(--muted)}
.zoek input:focus-visible{outline:2px solid var(--focus); outline-offset:0; border-color:var(--focus); background:var(--surface)}
.zoek kbd{position:absolute; right:14px; font-size:11px; color:var(--muted); border:1px solid var(--line-2); background:var(--surface); border-radius:5px; padding:2px 6px; font-family:var(--f-tekst); pointer-events:none}
.zoek.uit input{opacity:.55; cursor:not-allowed}
.zoek.zonder-kbd input{padding-right:16px}
.profiel-houder{position:relative; flex:none}
.profiel{display:inline-flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; border-radius:999px; font-weight:500; font-size:13.5px; color:var(--ink)}
.profiel:hover{background:var(--surface-2)}
.profiel .ico{color:var(--muted)}
.profiel-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:var(--surface); border:0; border-radius:var(--r); box-shadow:var(--shadow-2); padding:8px; display:none; z-index:40}
.profiel-menu.open{display:block}
.profiel-menu a,.profiel-menu button{display:flex; align-items:center; gap:10px; width:100%; height:40px; padding:0 12px; border-radius:var(--r-knop); text-decoration:none; color:var(--ink); font-size:13.5px; text-align:left}
.profiel-menu a:hover,.profiel-menu button:hover{background:var(--surface-2)}
.profiel-menu .ico{color:var(--muted)}
.profiel-menu .kopje{padding:6px 10px 8px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); margin-bottom:4px}

.iknop{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:0; background:var(--kaart-bg); box-shadow:var(--shadow); color:var(--ink-2); position:relative; transition:background .15s, color .15s, transform .12s; flex:none; text-decoration:none}
.iknop:active{transform:scale(var(--knop-indruk))}
.iknop:hover{background:var(--surface-2); color:var(--ink)}
.iknop.vlak{border-color:transparent; background:transparent; box-shadow:none; width:34px; height:34px; border-radius:50%}
.iknop.vlak:hover{background:var(--surface-3)}
.iknop .punt{position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--crit); border:2px solid var(--surface)}
.avatar{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; font-size:12px; font-weight:600; letter-spacing:.03em; background:var(--surface-3); color:var(--ink); flex:none; font-family:var(--f-kop)}
.avatar.b{background:var(--brass-soft); color:var(--brass-ink)}
.avatar.klein{width:28px; height:28px; font-size:11px}

/* De inhoud vult het scherm; pas voorbij 1800px komt er aan beide kanten een
   gelijke marge (Enes 11-10-2026: "de rechterkant is te leeg"). */
.inhoud{padding:10px 28px 36px; display:flex; flex-direction:column; gap:22px; flex:1; width:100%; max-width:1800px; margin:0 auto}
.paginakop{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.paginakop .sub{color:var(--muted); font-size:13px; margin-top:4px}
.paginakop .acties{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.kruimel{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-bottom:8px}
.kruimel a{text-decoration:none; color:var(--muted)}
.kruimel a:hover{color:var(--ink)}
.kruimel .ico{width:14px; height:14px}
.kruimel b{font-weight:500; color:var(--ink-2)}

.onderbalk{
  display:none; position:fixed; z-index:25; left:0; right:0; bottom:0; height:calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom, 0px));
  background:var(--bovenbalk-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  grid-template-columns:repeat(5,1fr); padding:6px 4px env(safe-area-inset-bottom, 0px);
}
.onderbalk a,.onderbalk button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--muted); font-size:10.5px; font-weight:500; padding-top:2px; border-radius:8px; position:relative; min-width:0}
.onderbalk a > span:not(.tel-badge),.onderbalk button > span:not(.tel-badge){max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.onderbalk .ico{width:22px; height:22px; stroke-width:1.6}
.onderbalk .actief{color:var(--ink); font-weight:600}
.onderbalk .actief .ico{color:var(--ink)}
.tel-badge{position:absolute; top:0; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--crit); color:#fff; font-size:10px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--surface)}

/* smaller than a laptop: the sidebar becomes a drawer behind the menu button */
@media (max-width:1023px){
  .app-shell{grid-template-columns:minmax(0,1fr)}
  .zijbalk{position:fixed; top:10px; left:10px; bottom:10px; margin:0; width:min(var(--zijbalk-breedte), 86vw); height:auto; background:var(--surface); transform:translateX(-110%); transition:transform .2s ease; box-shadow:none}
  .app-shell.menu-open .zijbalk{transform:none; box-shadow:var(--shadow-2)}
  .app-shell.menu-open .zijbalk-achtergrond{display:block}
  .zijbalk .zijbalk-sluit{display:inline-flex}
  .bovenbalk{padding:0 16px; height:60px}
  .bovenbalk .logo-naam{display:block; font-size:17px}
  .bovenbalk .logo-beeld{display:block}
  .zoek{width:auto; flex:1}
  .zoek kbd{display:none}
  .zoek input{padding-right:14px}
  .inhoud{padding:18px 16px 32px; gap:16px}
}
@media (max-width:767px){
  .bovenbalk .zoek{display:none}
  .bovenbalk .zoek.altijd{display:flex}
  .bovenbalk .profiel > span:not(.avatar){display:none}
  .bovenbalk .profiel .ico{display:none}
  .bovenbalk .scheiding{display:none}
  .inhoud{padding-bottom:calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom, 0px) + 24px)}
  .onderbalk{display:grid}
  .paginakop h1{font-size:22px}
}

/* ------------------------------------------------------------
   4. Kaarten
   ------------------------------------------------------------ */
.kaart{background:var(--kaart-bg); border:var(--kaart-rand); border-radius:var(--r-kaart); box-shadow:var(--shadow); min-width:0; transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
.kaart-kop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:22px 24px 0}
.kaart-kop h2{font-size:17px; color:var(--ink)}
.kaart-kop .sub{font-size:12.5px; color:var(--muted); margin-top:3px}
.kaart-body{padding:16px 24px 22px}
.kaart-body.strak{padding:0}
.kaart-voet{padding:14px 24px 18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.kaart.hoog{display:flex; flex-direction:column}
.kaart.hoog .kaart-voet{margin-top:auto}
.kaart.gedempt{background:var(--surface-2); box-shadow:none; border:1.5px dashed var(--line-2)}
.schakel{font-size:12.5px; color:var(--brass); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:4px; background:none; border:0; padding:0; cursor:pointer}
.schakel:hover{text-decoration:underline; text-underline-offset:3px}
@media (max-width:767px){
  .kaart-kop{padding:16px 18px 0}
  .kaart-body{padding:12px 18px 16px}
  .kaart-voet{padding:12px 18px 16px}
}

/* raster van 12 kolommen voor kaarten naast elkaar */
.raster{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px}
.k3{grid-column:span 3} .k4{grid-column:span 4} .k5{grid-column:span 5} .k6{grid-column:span 6}
.k7{grid-column:span 7} .k8{grid-column:span 8} .k9{grid-column:span 9} .k12{grid-column:span 12}
@media (max-width:1023px){ .k3,.k4,.k5,.k7,.k8,.k9{grid-column:span 6} }
@media (max-width:767px){ .raster{gap:14px} .k3,.k4,.k5,.k6,.k7,.k8,.k9{grid-column:span 12} }

/* KPI-tegels */
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.kpi-tegel{padding:20px 22px 18px; display:flex; flex-direction:column; gap:10px; position:relative; color:inherit; text-decoration:none}
a.kpi-tegel:hover{box-shadow:var(--shadow-2)}
.kpi-tegel .bovenrij{display:flex; align-items:center; justify-content:space-between; gap:10px}
.kpi-tegel .naam{font-size:13px; color:var(--ink-2); font-weight:500}
.kpi-tegel .ikoon{width:40px; height:40px; border-radius:50%; background:var(--surface-3); border:0; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; flex:none}
.kpi-tegel .ikoon.brons{background:var(--brass-soft); color:var(--brass-ink)}
.kpi-tegel .ikoon.rood{background:var(--crit-soft); color:var(--crit-ink)}
.kpi-tegel .cijfer{font-family:var(--f-kop); font-weight:300; font-size:46px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.kpi-tegel .cijfer.leeg{color:var(--muted); font-size:22px}
.kpi-tegel .midden{display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
.kpi-tegel .toelichting{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; min-width:0; margin-top:2px; flex-wrap:wrap}
@media (max-width:1023px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} }
@media (max-width:767px){
  .kpi-tegel{padding:14px 14px 12px; gap:6px}
  .kpi-tegel .cijfer{font-size:34px}
  .kpi-tegel .naam{font-size:12px}
  .kpi-tegel .ikoon{width:32px; height:32px}
  .kpi-tegel .ikoon .ico{width:15px; height:15px}
  .kpi-tegel .toelichting{font-size:11px}
}
@media (max-width:359px){ .kpis{grid-template-columns:minmax(0,1fr)} }

.delta{display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap}
.delta .ico{width:12px; height:12px; stroke-width:2.2}
.delta.goed{background:var(--ok-soft); color:var(--ok-ink)}
.delta.slecht{background:var(--crit-soft); color:var(--crit-ink)}
.delta.neutraal{background:var(--surface-2); color:var(--ink-2)}

/* afdelingstegels (startpagina) */
.tegels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.tegel{display:flex; flex-direction:column; gap:6px; min-height:120px; padding:18px 20px; color:inherit; text-decoration:none}
a.tegel:hover{box-shadow:var(--shadow-2)}
.tegel .bovenrij{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tegel .naam{font-size:14px; font-weight:500; color:var(--ink)}
.tegel .ikoon{width:36px; height:36px; border-radius:50%; background:var(--surface-3); border:0; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; flex:none}
.tegel .cijfer{font-family:var(--f-kop); font-size:34px; font-weight:300; line-height:1; margin-top:auto; font-variant-numeric:tabular-nums}
.tegel .uitleg{font-size:12.5px; color:var(--muted)}
.tegel.uit .naam{color:var(--muted)}
.tegel.uit .cijfer{display:none}
@media (max-width:1023px){ .tegels{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:479px){ .tegels{grid-template-columns:minmax(0,1fr)} .tegel{min-height:0} }

/* breed scherm (≥ 1600px, de monitor van Enes): de KPI-rij en de tegels
   vullen de volle breedte, en twee kolommen van 7/5 worden 2:1 (8/4) zodat
   de kaarten meegroeien in plaats van rechts een leeg vlak te laten. */
@media (min-width:1600px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .tegels{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .k7{grid-column:span 8} .k5{grid-column:span 4}
}

/* ------------------------------------------------------------
   5. Chips (statussen, landen, bakken)
   ------------------------------------------------------------ */
.chip{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; background:var(--neutraal-soft, var(--surface-2)); color:var(--ink-2); border:1px solid transparent; vertical-align:middle}
body.klant .chip{border-color:var(--line); background:var(--surface-2)}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.chip.af,.chip.goed{background:var(--ok-soft); color:var(--ok-ink); border-color:transparent}
body.klant .chip.af,body.klant .chip.goed{border-color:var(--ok-line)}
.chip.af::before,.chip.goed::before{background:var(--ok)}
.chip.bezig{background:var(--warn-soft); color:var(--warn-ink); border-color:transparent}
body.klant .chip.bezig{border-color:var(--warn-line)}
.chip.bezig::before{background:var(--warn)}
.chip.tedoen{background:var(--neutraal-soft, var(--surface-2)); color:var(--ink-2); border-color:transparent}
.chip.open{background:var(--brass-soft); color:var(--brass-ink); border-color:transparent}
body.klant .chip.tedoen{background:var(--surface-2); border-color:var(--line)}
body.klant .chip.open{border-color:var(--brass-line)}
.chip.open::before{background:var(--brass)}
.chip.spoed,.chip.fout{background:var(--crit-soft); color:var(--crit-ink); border-color:transparent}
body.klant .chip.spoed,body.klant .chip.fout{border-color:var(--crit-line)}
.chip.spoed::before,.chip.fout::before{background:var(--crit)}
.chip.zonder-punt::before{display:none}
/* land: NL / DE / DK / BE als kort blokje */
.chip.land{min-width:28px; height:20px; padding:0 6px; border-radius:5px; font-size:10.5px; font-weight:600; letter-spacing:.07em; justify-content:center; border-color:var(--line-2)}
.chip.land::before{display:none}
/* bak van de Inbox */
.chip.bak{height:22px; padding:0 8px; border-radius:6px; font-size:11.5px}
.chip.bak::before{display:none}
.chip.bak.beslissen{background:var(--brass-soft); color:var(--brass-ink); border-color:var(--brass-line)}
.chip.bak.wacht{background:var(--surface); color:var(--muted); border-style:dashed}
.chip.bak.spoed{background:var(--crit-soft); color:var(--crit-ink); border-color:var(--crit-line)}

/* ------------------------------------------------------------
   6. Tabellen
   ------------------------------------------------------------ */
.tabel-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.tabel{width:100%; border-collapse:collapse; font-size:13px}
.tabel th{text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--muted); padding:10px 24px; background:transparent; border-top:1px solid var(--line); border-bottom:1px solid var(--line); white-space:nowrap}
.tabel td{padding:13px 24px; border-bottom:1px solid var(--line); vertical-align:middle}
body.klant .tabel th{background:var(--surface-2); padding:10px 20px}
body.klant .tabel td{padding:12px 20px}
.tabel tr:last-child td{border-bottom:0}
.tabel tbody tr:hover td{background:var(--surface-2)}
.tabel tr.uit td{color:var(--muted)}
.tabel .num{text-align:right; font-variant-numeric:tabular-nums}
.tabel .klant{display:flex; align-items:center; gap:10px; white-space:nowrap}
.tabel .klant b{font-weight:500; color:var(--ink); display:block; line-height:1.3}
.tabel .stil{color:var(--muted); font-size:12px; display:block; line-height:1.3; font-variant-numeric:tabular-nums}
.tabel.dicht th,.tabel.dicht td{padding-left:16px; padding-right:16px}
.tabel.dicht td{padding-top:10px; padding-bottom:10px}
.kaart > .tabel-wrap > .tabel thead th:first-child,.kaart > .tabel thead th:first-child{border-top-left-radius:0}
.kaart .tabel th{border-top:0}
.kaart-body.strak .tabel th{border-top:1px solid var(--line)}

/* ------------------------------------------------------------
   7. Knoppen en segmenten
   ------------------------------------------------------------ */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--knop-h); padding:0 20px; border-radius:var(--r-knop); border:1px solid transparent;
  font-weight:500; font-size:13.5px; line-height:1; white-space:nowrap;
  background:var(--brand); color:var(--on-brand); text-decoration:none;
  transition:background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}
.knop:active{transform:scale(var(--knop-indruk))}
.knop:hover{background:var(--brand-hover)}
.knop.secundair{background:var(--kaart-bg); color:var(--ink); border-color:var(--line-2)}
.knop.secundair:hover{background:var(--surface-2); border-color:var(--ink-2)}
.knop.rustig{background:transparent; color:var(--ink-2); border-color:transparent}
.knop.rustig:hover{background:var(--surface-3); color:var(--ink)}
.knop.gevaar{background:var(--crit-soft); color:var(--crit-ink); border-color:var(--crit-line)}
.knop.gevaar:hover{background:var(--crit); color:#fff; border-color:var(--crit)}
.knop.klein{height:38px; padding:0 15px; font-size:12.5px}
body.klant .knop.klein{height:32px; padding:0 12px}
.knop.breed{width:100%}
.knop:disabled,.knop[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
.knop .ico{width:16px; height:16px}
.knoppen{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Een knop in een segment breekt nooit over twee regels ("Deze week",
   "Vorige maand"); past de rij niet op een telefoon, dan schuift het segment
   binnen zijn eigen vak. */
.segment{display:inline-flex; background:var(--kaart-bg); border:0; box-shadow:var(--shadow); border-radius:var(--r-knop); padding:4px; gap:2px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.segment::-webkit-scrollbar{display:none}
.segment button,.segment a{height:34px; padding:0 15px; border-radius:var(--r-knop); font-size:12.5px; font-weight:500; color:var(--ink-2); transition:background .15s, color .15s, transform .12s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; white-space:nowrap; flex:none}
.segment button:hover,.segment a:hover{color:var(--ink)}
.segment button:active,.segment a:active{transform:scale(var(--knop-indruk))}
.segment .actief{background:var(--brand); color:var(--on-brand); box-shadow:none; border-color:transparent}
.segment .actief .badge{background:rgba(255,255,255,.18); color:var(--on-brand)}
.segment .actief .badge.rood{background:var(--crit-soft); color:var(--crit-ink)}
body.klant .segment{background:var(--surface-2); border:1px solid var(--line); box-shadow:none; padding:3px}
body.klant .segment button,body.klant .segment a{height:28px; padding:0 12px}
body.klant .segment .actief{background:var(--surface); color:var(--ink); border-color:var(--line)}
.segment.breed{display:flex; width:100%}
.segment.breed button,.segment.breed a{flex:1}

/* ------------------------------------------------------------
   8. Formulieren
   ------------------------------------------------------------ */
.veld{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--ink-2); min-width:0}
.veld .hulp{font-size:12px; color:var(--muted); font-weight:400}
.invoer{height:44px; width:100%; padding:0 14px; border-radius:var(--r-veld); border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font-weight:400; font-size:14px}
textarea.invoer{height:auto; min-height:96px; padding:11px 14px; resize:vertical; line-height:1.45}
select.invoer{padding-right:34px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 10px center}
.invoer::placeholder{color:var(--muted)}
.invoer:focus-visible{outline:2px solid var(--focus); outline-offset:0; border-color:var(--focus)}
.invoer:disabled{opacity:.55; cursor:not-allowed; background:var(--surface-2)}
.invoer.fout{border-color:var(--crit)}
.keuze{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:400; color:var(--ink); cursor:pointer}
.keuze input{width:18px; height:18px; margin:0; accent-color:var(--brass)}
.velden{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px 14px}
.formulier{display:flex; flex-direction:column; gap:14px}

/* ------------------------------------------------------------
   9. Lijstjes: taken en meldingen, lege staat, mededeling
   ------------------------------------------------------------ */
.taak{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none}
.taak:last-child{border-bottom:0; padding-bottom:4px}
.taak .vink{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center; flex:none; color:#fff}
.taak .vink .ico{width:13px; height:13px; stroke-width:2.4}
.taak.af .vink{background:var(--ok); border-color:var(--ok)}
.taak.bezig .vink{border-color:var(--warn); background:var(--warn-soft)}
.taak.fout .vink{border-color:var(--crit); background:var(--crit-soft)}
.taak .tijd{font-variant-numeric:tabular-nums; color:var(--muted); font-size:12.5px; width:44px; flex:none}
.taak .tekst{flex:1; min-width:0}
.taak .tekst b{display:block; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.taak .tekst span{font-size:12px; color:var(--muted)}
.taak.af .tekst b{color:var(--ink-2); text-decoration:line-through; text-decoration-color:var(--line-2)}
.taak .chip{flex:none}

.melding{display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none}
.melding:last-child{border-bottom:0; padding-bottom:4px}
.melding .ikoon{width:36px; height:36px; border-radius:10px; background:var(--brass-soft); color:var(--brass-ink); border:1px solid var(--brass-line); display:inline-flex; align-items:center; justify-content:center; flex:none}
.melding.spoed .ikoon{background:var(--crit-soft); color:var(--crit-ink); border-color:var(--crit-line)}
.melding .tekst{flex:1; min-width:0}
.melding .tekst b{display:block; font-weight:500; color:var(--ink); line-height:1.35}
.melding .tekst span{font-size:12px; color:var(--muted)}
.melding .chip{flex:none; margin-top:2px}
@media (max-width:767px){
  .taak{padding:11px 0; gap:10px}
  .taak .tijd{width:40px; font-size:12px}
  .taak .tekst b{font-size:13px; white-space:normal}
  .melding{padding:11px 0}
  .melding .tekst b{font-size:13px}
}

.leeg{padding:14px 0 4px; color:var(--muted); font-size:13.5px}
.leeg a{color:var(--brass)}
.mededeling{padding:13px 16px; border-radius:var(--r); border:1px solid transparent; background:var(--kaart-bg); font-size:13.5px; color:var(--ink-2)}
.mededeling.let-op{background:var(--warn-soft); color:var(--warn-ink)}
.mededeling.fout{background:var(--crit-soft); color:var(--crit-ink)}
.mededeling.goed{background:var(--ok-soft); color:var(--ok-ink)}
body.klant .mededeling{border-color:var(--line); background:var(--surface-2)}
body.klant .mededeling.let-op{background:var(--warn-soft); border-color:var(--warn-line)}
body.klant .mededeling.fout{background:var(--crit-soft); border-color:var(--crit-line)}
body.klant .mededeling.goed{background:var(--ok-soft); border-color:var(--ok-line)}
.mededeling b{font-weight:500}

/* inlogkaart (zonder schil) */
.inlog{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px 16px}
.inlog .kaart{width:100%; max-width:420px; padding:32px 28px}
.inlog .logo{padding:0; margin-bottom:22px}
.inlog h1{font-size:22px; margin-bottom:4px}
.inlog .sub{color:var(--muted); font-size:13px; margin-bottom:18px}

/* inbox */
/* ============================================================
   Alleen NIEUWE klassen voor public/inbox.html + inbox.js
   (stap 2b van de ombouw, besluit Enes 11-10-2026). Drie kolommen op een
   laptop: bakken · lijst · gesprek met het voorstel van Claude; op een
   telefoon één kolom met een terugknop. Bestaande klassen hierboven blijven
   zoals ze zijn; wat hier staat bouwt erop voort.
   ============================================================ */

/* --- kleine hulpjes --- */
.toets{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:5px; border:1px solid var(--line-2); background:var(--surface); font-size:11px; color:var(--muted); font-family:var(--f-tekst)}
.stip{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none; vertical-align:middle}
.stip.goed,.stip.ok{background:var(--ok)} .stip.warn{background:var(--warn)} .stip.crit{background:var(--crit)} .stip.brons{background:var(--brass)}
.stip.klein{width:4px; height:4px; margin:0 6px}
.stip.pols{animation:inbox-pols 1.2s ease-in-out infinite}
@keyframes inbox-pols{0%,100%{opacity:.35}50%{opacity:1}}
.fout-tekst{color:var(--crit-ink)}
.leestekst{font-size:14px; line-height:1.6}
.tussenkop{font-size:14px; margin:12px 0 4px}
.sectiekop{font-size:17px; margin:22px 0 10px; display:flex; align-items:center; gap:8px}
.sectiekop:first-child{margin-top:0}
.ruimte-onder{margin-bottom:12px} .ruimte-boven{margin-top:10px}
.lijstje{margin:8px 0 8px 18px; padding:0}
.voorgeopmaakt{white-space:pre-wrap}
.blok{display:block}
.knoppen.eind{justify-content:flex-end} .knoppen.midden{justify-content:center}
.knop.actief{background:var(--brand); color:var(--on-brand); border-color:transparent}
.knop.voorzichtig{background:var(--warn-soft); color:var(--warn-ink); border-color:var(--warn-line)}
.knop.voorzichtig:hover{background:var(--warn); color:#fff; border-color:var(--warn)}
.knop .toets{margin-left:2px; opacity:.8}
.knop.secundair .toets,.knop.rustig .toets{background:var(--surface-2)}
.invoer.klein{height:32px; font-size:13px; width:auto; max-width:100%; padding:0 28px 0 10px}
input.invoer.klein{padding-right:10px}
.invoer.getal{width:90px; display:inline-block}
.invoer.zoekveld{max-width:420px}
.segment button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(28,28,28,.08); border-color:var(--line)}
.iknop.actief{border-color:var(--brass-line); background:var(--brass-soft); color:var(--brass-ink)}
.iknop .ib-filterteller{position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--brass); color:#fff; font-size:10px; display:inline-flex; align-items:center; justify-content:center}
.statuschips{display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center}
.chip.statusknop{cursor:pointer} .chip.statusknop:hover{filter:brightness(.97)}
.chip.bak .ico{width:12px; height:12px}
.ib-presence{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
.ib-nieuwe-versie{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9999; background:var(--brand); color:var(--on-brand); padding:10px 14px; border-radius:10px; box-shadow:var(--shadow-2); display:flex; gap:12px; align-items:center; font-size:14px}
.ib-nieuwe-versie .knop{background:var(--on-brand); color:var(--brand)}

/* --- bovenbalk: zoekknop op een telefoon --- */
.zoekknop{display:none}
@media (max-width:767px){
  .zoekknop{display:inline-flex}
  .app-shell.zoek-open .bovenbalk .zoek{display:flex}
  .app-shell.zoek-open .bovenbalk .logo-naam,.app-shell.zoek-open .bovenbalk .logo-beeld,.app-shell.zoek-open .zoekknop,.app-shell.zoek-open .bovenbalk .profiel-houder,.app-shell.zoek-open #belknop,.app-shell.zoek-open [data-huisstijl="thema"]{display:none}
}

/* --- het Inbox-scherm --- */
.inbox-scherm{display:flex; flex-direction:column; gap:22px}
.inbox-scherm .paginakop .acties{align-items:center}
.inbox-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); position:relative}
.alleen-tel{display:none}
.inbox-kpis .kpi-tegel{padding:14px 16px 12px; gap:6px}
.inbox-kpis .cijfer{font-size:26px}
.inbox-kpis .ikoon{width:30px; height:30px; border-radius:8px} .inbox-kpis .ikoon .ico{width:15px; height:15px}
.kpis-voet{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; margin-top:-8px}
.ib-meter{position:relative; display:block; width:100%; height:5px; border-radius:999px; background:var(--surface-3); overflow:visible; margin:2px 0}
.ib-meter__fill{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--ok)}
.ib-meter__target{position:absolute; top:-3px; width:2px; height:11px; background:var(--ink-2); border-radius:1px}
@media (max-width:1279px){ .inbox-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} }
@media (max-width:767px){ .inbox-kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} .inbox-kpis:not(.tel-open){display:none} .alleen-tel{display:inline-flex} }

.inbox-raster{display:grid; grid-template-columns:200px minmax(0,1fr) 360px; gap:20px; align-items:start}
.inbox-raster[data-pane="ticket"]{grid-template-columns:200px minmax(260px,5fr) minmax(0,7fr)}
/* breed scherm: vaste bakken, ruime lijst, het gesprek het breedst en rechts het vaste
   paneel (voorstel, order, retouren, vraag) zodra er een gesprek open is */
@media (min-width:1600px){ .inbox-raster{grid-template-columns:260px minmax(420px,1fr) minmax(0,1.6fr)} }
/* Met een gesprek open staat het paneel (voorstel · order · retouren · vraag) altijd NAAST
   het gesprek (wens Enes 12-10-2026), nooit eronder. Vanaf 1600px vier kolommen; tussen
   1280 en 1600 is daar geen plek voor en verdwijnen de bakken zolang het gesprek open is
   (terug via de terugknop in de kop van het gesprek, of via de lijst). */
@media (min-width:1600px){
  .inbox-raster[data-pane="ticket"]{grid-template-columns:184px minmax(250px,3fr) minmax(0,7fr) minmax(340px,5fr)}
  .inbox-raster[data-pane="ticket"] .paneel{grid-column:4; grid-row:1}
}
/* Het gesprek en het paneel (voorstel van Claude, eigen antwoord) zijn het werk; de bakken en de
   lijst zijn smal (wens Enes 12-10-2026: "alles naar links, die twee blokken groter"). */
@media (min-width:1800px){ .inbox-raster[data-pane="ticket"]{grid-template-columns:200px minmax(320px,.8fr) minmax(0,1.7fr) minmax(440px,1.2fr)} }
@media (min-width:1280px) and (max-width:1599px){
  .inbox-raster[data-pane="ticket"]{grid-template-columns:minmax(240px,3fr) minmax(0,7fr) minmax(320px,5.5fr)}
  .inbox-raster[data-pane="ticket"] .bakken{display:none}
  .inbox-raster[data-pane="ticket"] .paneel{grid-column:3; grid-row:1}
  .inbox-raster[data-pane="ticket"] .terugknop{display:inline-flex}
}
/* Vast raster op een laptop of groter (wens Enes 12-10-2026, zoals de oude Inbox): de
   pagina zelf scrolt NIET. Het scherm is één raster onder de bovenbalk, zo hoog als het
   scherm; de bakken, de maillijst, het gesprek (de mailwisseling) en het rechterpaneel
   scrollen elk in hun eigen vak. Zo blijven de lijst en het voorstel altijd in beeld,
   ook bij een lang gesprek. body.inbox-vast zet inbox.js alleen op het Inbox-scherm;
   de andere schermen (Te doen, TOV, …) scrollen gewoon als pagina. */
@media (min-width:1280px){
  body.inbox-vast{height:100dvh; overflow:hidden}
  /* De Inbox gebruikt de hele breedte: geen marge van max-width:1800px links en rechts. */
  body.inbox-vast .inhoud{max-width:none; padding-left:20px; padding-right:20px}
  body.inbox-vast .app-shell{height:100dvh; min-height:0}
  body.inbox-vast .app-shell > .hoofd{height:100dvh; min-height:0; overflow:hidden}
  body.inbox-vast .inhoud{min-height:0; overflow:hidden; padding-bottom:20px}
  body.inbox-vast .inbox-scherm{flex:1 1 auto; min-height:0; gap:14px}
  body.inbox-vast .inbox-raster{flex:1 1 auto; min-height:0; grid-template-rows:minmax(0,1fr); align-items:stretch}
  /* Elk scrollvak is position:relative: anders ontsnapt een absoluut geplaatst label (.vh, voor
     schermlezers) aan het vak en maakt het de hele pagina alsnog scrollbaar. */
  body.inbox-vast .bakken,body.inbox-vast .maillijst,body.inbox-vast .gesprek-kolom,body.inbox-vast .paneel{min-height:0; max-height:none; position:relative; top:auto}
  body.inbox-vast .bakken{overflow-y:auto; overscroll-behavior:contain}
  body.inbox-vast .maillijst{display:flex; flex-direction:column}
  body.inbox-vast .maillijst > *{flex:none}
  body.inbox-vast .maillijst > .maillijst-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; position:relative}
  body.inbox-vast .gesprek-kolom{display:flex; flex-direction:column}
  body.inbox-vast .gesprek{flex:1 1 auto; min-height:0; overflow:hidden; position:relative}
  body.inbox-vast .gesprek > *{flex:none}
  body.inbox-vast .gesprek > .gesprek-vak,body.inbox-vast .gesprek > .gesprek-body{flex:1 1 auto; min-height:0}
  body.inbox-vast .gesprek-body{overflow-y:auto; overscroll-behavior:contain; position:relative}
  body.inbox-vast .paneel{overflow-y:auto; overscroll-behavior:contain}
  /* de kop en de cijfers compact, zodat het raster de hoogte krijgt */
  body.inbox-vast .inbox-scherm .paginakop h1{font-size:22px}
  body.inbox-vast .inbox-kpis{gap:10px}
  body.inbox-vast .inbox-kpis .kpi-tegel{padding:8px 14px 8px; gap:2px}
  body.inbox-vast .inbox-kpis .naam{font-size:12px}
  body.inbox-vast .inbox-kpis .cijfer{font-size:20px}
  body.inbox-vast .inbox-kpis .ikoon{width:24px; height:24px; border-radius:7px} body.inbox-vast .inbox-kpis .ikoon .ico{width:13px; height:13px}
  body.inbox-vast .inbox-kpis .toelichting{flex-wrap:nowrap; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:0}
  body.inbox-vast .inbox-kpis .toelichting > span:not(.ib-meter){overflow:hidden; text-overflow:ellipsis}
  body.inbox-vast .inbox-kpis .ib-meter{flex:1 1 60px; min-width:40px}
  body.inbox-vast .kpis-voet{margin-top:-4px}
  /* het knopje "Naar het eerste bericht" bovenin het gesprekvak */
  body.inbox-vast .gesprek-spring:not([hidden]){display:inline-flex}
}
/* Zonder vast raster (een ander scherm dan de Inbox) scrolt de pagina als geheel; het gesprek
   heeft dan geen eigen scrollvak. Tablet en telefoon: zie verderop bij "telefoon en tablet: een
   vast scherm" (body.inbox-vast, en body.gesprek-open met een gesprek open). */
.gesprek-vak{position:relative; display:flex; flex-direction:column; min-width:0; min-height:0}
.gesprek-vak > .gesprek-body{flex:1 1 auto; min-height:0}
.gesprek-spring{display:none; position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; box-shadow:var(--shadow-2); white-space:nowrap}
.gesprek-spring .ico{transform:rotate(90deg)} .gesprek-spring.omlaag .ico{transform:rotate(-90deg)}

/* bakken (links) */
.bakken{padding:8px; position:sticky; top:calc(var(--bovenbalk-hoogte) + 16px)}
.bakkenlijst{display:flex; flex-direction:column; gap:2px}
.bak-rij{display:flex; align-items:center; gap:9px; height:40px; padding:0 10px; border-radius:var(--r-s); color:var(--ink-2); font-weight:500; text-decoration:none; font-size:13px; white-space:nowrap; min-width:0; cursor:pointer}
.bak-rij > span:not(.badge){overflow:hidden; text-overflow:ellipsis; flex:1}
.bak-rij:hover{background:var(--surface-2); color:var(--ink)}
.bak-rij.actief{background:var(--brass-soft); color:var(--brass-ink)}
.bak-rij .ico{width:17px; height:17px; color:var(--muted)}
.bak-rij.actief .ico{color:var(--brass)}
.bak-rij .badge{font-weight:600}
.bak-rij.stil{font-weight:400; height:36px}
.filters{margin-top:8px; border-top:1px solid var(--line); padding-top:8px}
.filters > summary{list-style:none} .filters > summary::-webkit-details-marker{display:none}
.filterblok{padding:10px 10px 4px; display:flex; flex-direction:column; gap:8px}
.filterkop{display:flex; justify-content:space-between; align-items:center; gap:8px}
.filterchips{display:flex; flex-wrap:wrap; gap:6px}
.filterchip{height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); font-size:12px; font-weight:500; color:var(--ink-2); display:inline-flex; align-items:center; gap:4px}
.filterchip:hover{background:var(--surface-2)}
.filterchip[aria-pressed="true"]{background:var(--brass-soft); color:var(--brass-ink); border-color:var(--brass-line)}
.keuzelijst{display:flex; flex-direction:column; gap:6px; font-size:13px}
.keuzelijst .keuze{font-size:13px}
.ib-checkrows{display:flex; flex-direction:column; gap:6px}
.filters .segment button{flex:1; padding:0 6px; font-size:12px}

/* de maillijst (midden) */
.maillijst{min-width:0}
.maillijst .kaart-kop{padding-bottom:12px; border-bottom:1px solid var(--line)}
.actievefilters{display:flex; flex-wrap:wrap; gap:6px; padding:10px 20px 0}
.actievefilters .chip{cursor:pointer}
.lijst-meldingen{display:flex; flex-direction:column; gap:10px; padding-bottom:0}
.mailtabel{table-layout:fixed}
.mailtabel th{padding:9px 12px; border-top:0; white-space:normal; font-size:10.5px}
.mailtabel td{padding:11px 10px; vertical-align:top}
.mailtabel td:first-child,.mailtabel th:first-child{width:50px; padding-left:16px}
.mailtabel td:last-child,.mailtabel th:last-child{width:118px; padding-right:16px; text-align:right}
.mailtabel tr.mailrij{cursor:pointer}
.mailtabel tr.gekozen td{background:var(--brass-soft)}
.mailtabel tr.gekozen td:first-child{box-shadow:inset 3px 0 0 var(--brass)}
.mailtabel tr.uit td{color:var(--muted)}
.mailtabel .wie{display:flex; align-items:center; gap:8px; min-width:0}
.mailtabel .mail-link{font-weight:500; color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.mailtabel tr.ongelezen .mail-link{font-weight:600}
.mailtabel .ond{font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.mailtabel tr.gekozen .ond,.mailtabel tr.ongelezen .ond{color:var(--ink)}
.mailtabel .voorbeeld{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.mailtabel .meta{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; align-items:center}
.mailtabel .meta:empty{display:none}
.mailtabel .meta .chip{height:20px; font-size:11px; padding:0 7px}
.mailtabel .tijd{color:var(--muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; display:block; margin-bottom:5px}
.mailtabel .tijd.laat{color:var(--warn-ink); font-weight:500}
.mailtabel .tijd.te-laat{color:var(--crit-ink); font-weight:500}
.avatar.ongelezen-punt{position:relative}
.avatar.ongelezen-punt::after{content:""; position:absolute; top:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:var(--brass); border:2px solid var(--surface)}
.leeg-staat{padding:36px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px}
.leeg-staat .leeg-ikoon{width:52px; height:52px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; margin-bottom:4px}
.leeg-staat h2{font-size:16px}
.leeg-staat .leeg{padding:0; max-width:360px}
.toetsen-hulp{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-top:8px; font-size:12px; color:var(--muted)}
.toetsen-hulp span > .toets{margin-right:3px}
.ib-skel-row{display:flex; flex-direction:column; gap:7px; padding:12px 0; border-bottom:1px solid var(--line)}
.ib-skel-row:last-child{border-bottom:0}
.ib-skel{display:inline-block; height:10px; border-radius:5px; background:var(--surface-3); width:60%; animation:inbox-pols 1.4s ease-in-out infinite}
.ib-skel--h14{height:13px} .ib-skel--w30{width:30%} .ib-skel--w45{width:45%} .ib-skel--w60{width:60%} .ib-skel--w80{width:80%} .ib-skel--w90{width:90%} .ib-skel--chip{width:52px; height:18px; border-radius:999px}
.ib-ctx-skel{display:flex; flex-direction:column; gap:6px}

/* mededelingen met een kop, tekst en knop (storingen, koppelingen) */
.ib-banner{display:flex; align-items:flex-start; gap:10px}
.ib-banner > .ico{flex:none; margin-top:1px}
.ib-banner__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ib-banner__title{font-weight:500; color:inherit}
.ib-banner__text{font-size:12.5px}
.ib-banner .knop{flex:none}
.ib-alert{display:flex; gap:8px; align-items:flex-start}
.ib-alert > .ico{flex:none; margin-top:2px}
.ib-alert b{display:block}

/* het gesprek (rechts) */
.gesprek-kolom{display:flex; flex-direction:column; gap:16px; min-width:0}
.gesprek{display:flex; flex-direction:column; min-width:0}
.gesprek-kop{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.gesprek-kop .wie-blok{flex:1; min-width:0}
.gesprek-kop .wie-blok b{display:flex; align-items:center; gap:6px; font-weight:500; font-size:14px; min-width:0}
.gesprek-kop .wie-blok span{display:block; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.terugknop{display:none}
.gesprek-onderwerp{padding:12px 16px 0; display:flex; flex-direction:column; gap:8px}
.gesprek-onderwerp h2{font-size:15px; line-height:1.3}
.gesprek-onderwerp .chips{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.gesprek-onderwerp .chips .chip{height:22px; font-size:11.5px; padding:0 8px}
.gesprek-onderwerp .chips a.chip{text-decoration:none}
.gesprek-body{padding:16px 16px 4px; display:flex; flex-direction:column; gap:14px; min-width:0}
.bericht{display:flex; flex-direction:column; gap:6px; min-width:0}
.bericht .wie{font-size:12px; color:var(--muted); display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.bericht .wie b{font-weight:500; color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis}
.bericht .wie time{flex:none; font-variant-numeric:tabular-nums}
.bericht .tekstvlak{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px; font-size:13px; line-height:1.55; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.bericht .tekstvlak > p{margin:0}
.bericht .tekstvlak > .chip{margin-bottom:8px}
.bericht.uit .tekstvlak{background:var(--brass-soft); border-color:var(--brass-line)}
.bericht .via{margin-top:8px}
.bericht a{color:var(--brass)}
.ib-translate,.ib-quote{margin-top:8px; font-size:12.5px}
.ib-translate summary,.ib-quote summary{cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; gap:4px; list-style:none}
.ib-translate summary::-webkit-details-marker,.ib-quote summary::-webkit-details-marker{display:none}
.ib-translate[open] .ib-chev,.ib-quote[open] .ib-chev{transform:rotate(90deg)}
.ib-translate__text,.ib-quote__text{margin:8px 0 0; padding:10px 12px; border-left:2px solid var(--line-2); color:var(--ink-2)}
/* Eerdere gesprekken van deze klant, bovenaan het gesprek (feedback Daniël #66, 16-10-2026) */
.ib-eerder-draad{border:1px dashed var(--line-2); border-radius:var(--r-s); background:var(--surface); font-size:13px}
.ib-eerder-draad summary,.ib-eerder-gesprek summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0}
.ib-eerder-draad summary::-webkit-details-marker,.ib-eerder-gesprek summary::-webkit-details-marker{display:none}
.ib-eerder-draad__kop{padding:10px 12px; color:var(--ink-2)}
.ib-eerder-draad__kop .stil{font-size:12px}
.ib-eerder-draad[open] > summary .ib-chev,.ib-eerder-gesprek[open] > summary .ib-chev{transform:rotate(90deg)}
.ib-eerder-draad__body{padding:0 12px 12px; display:flex; flex-direction:column; gap:8px}
.ib-eerder-gesprek{border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface-2)}
.ib-eerder-gesprek__kop{padding:8px 10px}
.ib-eerder-gesprek__kop b{font-weight:500; min-width:0; overflow-wrap:anywhere}
.ib-eerder-gesprek__datum{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.ib-eerder-gesprek__body{padding:0 10px 10px; display:flex; flex-direction:column; gap:8px}
.ib-eerder-bericht{padding:8px 10px; border-radius:var(--r-s); border:1px solid var(--line); background:var(--surface); min-width:0; overflow-wrap:anywhere}
.ib-eerder-bericht--studiomeen{background:var(--brass-soft); border-color:var(--brass-line)}
.ib-eerder-bericht--notitie{background:var(--warn-soft); border-color:var(--warn-line)}
.ib-eerder-bericht__wie{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); flex-wrap:wrap}
.ib-eerder-bericht__wie b{font-weight:500; color:var(--ink-2)}
.ib-eerder-bericht p{margin:4px 0 0; line-height:1.5}
.ib-attach{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.ib-attach:empty{display:none}
.ib-attach__chip{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px 0 6px; border-radius:var(--r-s); border:1px solid var(--line-2); background:var(--surface); font-size:12px; color:var(--ink); text-decoration:none; max-width:100%}
.ib-attach__chip > span:not(.ib-attach__thumb):not(.ib-attach__size){overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ib-attach__thumb{width:18px; height:18px; border-radius:4px; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; color:var(--muted); flex:none}
.ib-attach__size{color:var(--muted); font-size:11px}
.ib-attach__chip .schakel{margin-left:2px}
/* Geplakte of gekozen afbeelding (feedback #19, 12-10-2026): miniatuur, naam, grootte en een kruisje;
   tijdens het uploaden half doorzichtig met "toevoegen…". Het kruisje is op de telefoon een vingerdoel. */
.ib-attach__chip--beeld{height:48px; padding:4px 4px 4px 4px; gap:8px; max-width:min(100%, 260px)}
.ib-attach__chip--beeld .ib-attach__beeld{width:40px; height:40px; border-radius:6px; object-fit:cover; flex:none; background:var(--surface-3); border:1px solid var(--line)}
.ib-attach__chip--beeld .ib-attach__thumb.ib-attach__beeld .ico{width:18px; height:18px}
.ib-attach__chip--beeld .ib-attach__naam{min-width:0; flex:1 1 auto}
.ib-attach__chip--beeld .ib-attach__size{flex:none}
.ib-attach__chip--beeld .schakel{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin:0; border-radius:var(--r-s); color:var(--muted)}
.ib-attach__chip--beeld .schakel:hover{background:var(--surface-3); color:var(--ink)}
.ib-attach__chip--beeld.bezig .ib-attach__beeld{opacity:.55}
.ib-attach__chip--beeld.bezig .ib-attach__size{color:var(--brass-ink)}
/* De knop Afbeelding boven het antwoord: op een laptop is het paneel smal, daar alleen het icoon
   (plakken met Ctrl+V is daar de gewone weg); op tablet en telefoon met het woord erbij. */
@media (min-width:1280px){ .ib-afbeelding-knop .knop-tekst{display:none} .ib-afbeelding-knop{padding:0 8px} }
.ib-note{display:flex; gap:10px; padding:10px 12px; border-radius:var(--r-s); background:var(--warn-soft); border:1px solid var(--warn-line); font-size:13px; color:var(--ink)}
.ib-note > div{min-width:0; flex:1}
.ib-note__head{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--warn-ink); font-weight:500; flex-wrap:wrap}
.ib-note__head time{margin-left:auto; font-weight:400; color:var(--muted)}
.ib-note__body{margin:4px 0 0; line-height:1.5; overflow-wrap:anywhere}
.ib-note__inhoud{flex:1 1 auto; min-width:0}
/* vraagbaak op de startpagina */
.vb-gesprek{display:flex; flex-direction:column; gap:14px; margin-bottom:12px}
.vb-gesprek:empty{display:none}
.vb-beurt{border-left:2px solid var(--line); padding-left:12px; border-radius:0}
.vb-q{margin:0; font-weight:500; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.vb-a{margin:6px 0 0; line-height:1.6; white-space:normal}
.vb-bron{margin:6px 0 0; font-size:12px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.vb-vraag{display:flex; gap:10px; align-items:center}
.vb-vraag .invoer{flex:1}
.vb-kop{font-size:15px; margin:18px 0 8px}
.vb-onbekend{padding:10px 0; border-top:1px solid var(--line)}
.vb-onbekend .vb-vraag{margin-top:8px}
.vb-beurt .mededeling{margin-top:8px}
@media (max-width:767px){ .vb-vraag{flex-direction:column; align-items:stretch} }
.ib-note__head .iknop{width:24px; height:24px; margin:-4px -6px -4px 2px; color:var(--warn-ink)}
.ib-note__bewerk{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.ib-note__bewerk textarea{min-height:84px; resize:vertical; background:var(--surface)}
.ib-note--claudia{display:block}
.ib-note--claudia summary{cursor:pointer; list-style:none}
.ib-note--claudia summary::-webkit-details-marker{display:none}
.ib-note__hint{font-weight:400; color:var(--muted)}
.ib-mention{color:var(--brass-ink); font-weight:500}
.ib-event{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); padding:2px 4px; flex-wrap:wrap}
.ib-event b{color:var(--ink-2); font-weight:500}
.ib-daydivider{display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:4px 0 -4px}
.ib-daydivider::before,.ib-daydivider::after{content:""; flex:1; height:1px; background:var(--line)}
.notitie-vak{display:flex; gap:8px; align-items:center; padding:12px 16px 16px; border-bottom:1px solid var(--line)}
.notitie-vak .zoek{flex:1; width:auto}
.notitie-vak .zoek input{height:36px; font-size:13px}
.ib-writing{padding:28px 16px; text-align:center; color:var(--muted); font-size:13px}
.ib-writing h3{font-size:14px; color:var(--ink); margin:8px 0 4px}
.ib-writing__dots{display:inline-flex; gap:5px}
.ib-writing__dots i{width:7px; height:7px; border-radius:50%; background:var(--brass); animation:inbox-pols 1.2s ease-in-out infinite}
.ib-writing__dots i:nth-child(2){animation-delay:.2s} .ib-writing__dots i:nth-child(3){animation-delay:.4s}

/* het meer-menu (⋮ in de kop, en "Beslissen" bij de knoppen) */
.meer-menu{position:relative; flex:none}
.meer-menu > summary{list-style:none; cursor:pointer}
.meer-menu > summary::-webkit-details-marker{display:none}
.meer-menu > summary.iknop{display:inline-flex}
.meer-lijst{position:absolute; right:0; top:calc(100% + 6px); min-width:230px; max-width:min(320px, 90vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-2); padding:6px; z-index:40; display:flex; flex-direction:column}
.meer-menu.omhoog .meer-lijst{top:auto; bottom:calc(100% + 6px); right:auto; left:0}
.meer-lijst [role="menuitem"]{display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:6px 10px; border-radius:var(--r-s); text-decoration:none; color:var(--ink); font-size:13.5px; text-align:left; line-height:1.3}
.meer-lijst [role="menuitem"]:hover{background:var(--surface-2)}
.meer-lijst [role="menuitem"]:disabled{opacity:.45; cursor:not-allowed}
.meer-lijst .ico{color:var(--muted); flex:none}
.meer-lijst .toets{margin-left:auto}
.meer-kopje{padding:8px 10px 4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line); margin-top:4px}
.meer-hint{padding:4px 10px 6px; font-size:12px; color:var(--muted)}

/* het voorstel van Claude */
/* Het voorstel staat bovenaan het rechterpaneel (sinds 11-10-2026), als kaart met een bronzen rand links. */
.voorstel-blok{border:1px solid var(--brass-line); border-left:3px solid var(--brass); background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0}
.voorstel-blok:empty{display:none}
.voorstel-kop{padding:14px 16px 0; display:flex; flex-direction:column; gap:8px}
.voorstel-kop .kopje{display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-ink); font-weight:500}
.voorstel-kop .kopje .ico{width:15px; height:15px; color:var(--brass)}
.voorstel-kop .chips{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.voorstel-blok .mededeling{margin:12px 16px 0}
.ib-trialnote{display:flex; gap:8px; align-items:center}
.ib-decided{display:flex; gap:10px; align-items:flex-start}
.ib-decided > .ico{flex:none; margin-top:1px}
.ib-decided b{display:block} .ib-decided span{font-size:12px; color:var(--muted)}
.ib-newver{display:flex; align-items:center; gap:8px; margin:12px 16px 0; padding:8px 12px; border-radius:var(--r-s); background:var(--brass-soft); border:1px solid var(--brass-line); color:var(--brass-ink); font-size:12.5px}
.ib-newver .schakel{margin-left:auto}
.ib-prop__scroll{display:flex; flex-direction:column; gap:16px; padding:14px 16px}
.ib-prop__section{display:flex; flex-direction:column; gap:8px; min-width:0}
.ib-prop__sectionhead{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ib-prop__sectionhead-end{margin-left:auto; display:flex; gap:10px; align-items:center}
.ib-prop__section .mededeling{margin:0}
.ib-advice{display:flex; flex-direction:column; gap:6px}
.ib-advice__head{display:flex; align-items:center; gap:8px; font-weight:500}
.ib-advice__body{font-size:13px; line-height:1.55; color:var(--ink)}
.ib-risk{display:flex; gap:6px; align-items:center; font-size:12px; margin-top:4px}
/* keuzes van de agent boven het concept: één knop per keuze, de aangeraden keuze gemarkeerd */
.beslissingen{display:flex; flex-direction:column; gap:6px}
.beslissingen-knoppen{gap:6px}
.beslissingen-knoppen .knop{height:auto; min-height:32px; padding:5px 12px; white-space:normal; text-align:left; line-height:1.3}
.beslissingen-knoppen .knop[aria-pressed="true"]{box-shadow:0 0 0 2px var(--brass-line)}
.optie-tip{display:inline-flex; align-items:center; height:18px; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--brass-soft); color:var(--brass-ink); font-size:10.5px; font-weight:500; letter-spacing:.02em}
.knop.actief .optie-tip{background:rgba(255,255,255,.18); color:inherit}
.ib-editor{border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--surface); display:flex; flex-direction:column; min-width:0}
.ib-editor--edited{border-color:var(--brass)}
.ib-editor__bar{display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--muted); flex-wrap:wrap}
.ib-editor__to b{color:var(--ink); font-weight:500}
.ib-editor__field{display:block; width:100%; min-height:180px; padding:12px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:14px; line-height:1.55; resize:vertical; overflow-wrap:anywhere}
.ib-editor__field:focus-visible{outline:2px solid var(--focus); outline-offset:-2px; border-radius:6px}
.ib-editor__field--read{min-height:0; white-space:normal}
.ib-attach.in-editor{padding:6px 12px 0; margin:0}
.ib-editor__foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted)}
.ib-edited-tag{display:inline-flex; align-items:center; gap:4px; color:var(--brass-ink); font-weight:500}
.ib-vertaling{margin-top:8px; padding:10px 12px; border-radius:var(--r-s); background:var(--surface-2); border:1px solid var(--line); font-size:13px; line-height:1.55}
.ib-vertaling__kop{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-bottom:6px}
.ib-vertaling__kop .schakel{margin-left:auto}
.ib-actions{display:flex; flex-direction:column; gap:8px}
.ib-action{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface-2); font-size:13px; cursor:pointer}
.ib-action input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--brass); flex:none}
.ib-action--disabled{opacity:.6; cursor:default}
.ib-action--readonly{cursor:default}
.ib-action__mark{width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:none; margin-top:2px; background:var(--surface-3); color:var(--muted)}
.ib-action--done .ib-action__mark{background:var(--ok); color:#fff}
.ib-action__icon{width:30px; height:30px; border-radius:8px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; flex:none}
.ib-action__body{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.ib-action__title{font-weight:500; color:var(--ink); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.ib-action__desc{color:var(--ink-2); line-height:1.45; overflow-wrap:anywhere}
.ib-action__why{font-size:12px; color:var(--muted); line-height:1.4}
.ib-change{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; margin-top:2px}
.ib-change__key{color:var(--muted)}
.ib-change__new{font-weight:500; color:var(--ink); overflow-wrap:anywhere}
.invoer.bedragveld{width:110px; height:30px}
.ib-facts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.ib-fact{display:grid; grid-template-columns:8px auto minmax(0,1fr); gap:8px; align-items:start; font-size:12.5px; line-height:1.45}
.ib-fact .stip{margin-top:6px}
.ib-fact__src{display:inline-flex; align-items:center; gap:4px; color:var(--muted); white-space:nowrap}
.ib-fact__text{color:var(--ink-2); overflow-wrap:anywhere}
.ib-fact--crit .ib-fact__text{color:var(--crit-ink)}
.ib-fact a{color:var(--brass)}
.ib-stappen > summary{cursor:pointer; list-style:none}
.ib-stappen > summary::-webkit-details-marker{display:none}
.ib-stappen__lijst{margin:8px 0 0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:10px; font-size:12.5px}
.ib-stap__kop{display:flex; flex-wrap:wrap; gap:6px; align-items:baseline}
.ib-stap__uit{color:var(--ink-2); margin-top:2px; overflow-wrap:anywhere}
.ib-stap__ruw summary{cursor:pointer; color:var(--muted); font-size:12px}
.ib-stap__ruw pre{font-family:var(--f-mono); font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:8px; margin:6px 0 0; max-height:260px; overflow:auto}
.ib-compare{border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface-2); font-size:13px}
.ib-compare__head,.ib-compare__verdict{display:flex; align-items:center; gap:8px; padding:8px 12px; color:var(--muted); font-size:12.5px}
.ib-compare__body{padding:10px 12px; border-top:1px solid var(--line); white-space:pre-wrap; line-height:1.55; overflow-wrap:anywhere}
.ib-prop__foot{padding:14px 16px 16px; border-top:1px solid var(--brass-line); display:flex; flex-direction:column; gap:10px; background:var(--surface-2); border-radius:0 0 var(--r) 0}
.ib-prop__foot .mededeling{margin:0}
.ib-prop__summary{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted)}
.voorstel-knoppen{gap:8px}
.voorstel-knoppen .knop{height:40px}
.ib-reason{display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--surface)}
.ib-reason__title{font-weight:500}
.ib-reason__veld{border:0; margin:0; padding:0}
.ib-reason__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px}
.ib-reasonopt{justify-content:flex-start}
.ib-reasonopt .toets{margin-left:auto}
/* Redenknoppen (15-10-2026): bij aanpassen, niet versturen, opnieuw schrijven en op de Leerlijst. Eén tik, meerdere mag. */
.ib-redenen{display:flex; flex-direction:column; gap:8px; padding:10px 12px; border:1px solid var(--brass-line); border-radius:var(--r-s); background:var(--surface)}
/* Reden verplicht (besluit Enes 27-10-2026): na een poging tot versturen zonder reden valt het blok op. */
.ib-redenen--verplicht{border-color:var(--crit-line); background:var(--crit-soft)}
.ib-redenen[hidden]{display:none}
.ib-redenen__kop{display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; font-size:13px}
.ib-redenen__kop .stil{font-size:12px}
.ib-redenknop{height:30px; cursor:pointer}
.ib-redenknop .toets{height:16px; min-width:16px; font-size:10px; margin-left:2px}
.ib-redenen--wacht{max-width:560px; margin:0 auto 16px}
.ib-learn__reden > summary{cursor:pointer; color:var(--brass-ink); font-weight:500; font-size:12.5px}
.ib-learn__reden .ib-redenen{margin-top:8px}
.ib-redenoverzicht{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:16px}
@media (min-width:1600px){.ib-redenoverzicht{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}
.ib-redenoverzicht td:first-child{min-width:150px}
/* Goede voorbeelden voor de AI op de Leerlijst (15-10-2026). */
.ib-voorbeelden{margin-bottom:16px}
.ib-voorbeelden > details > summary,.ib-vb > summary{cursor:pointer; font-weight:500}
.ib-vb{margin-top:10px}
.ib-vb > summary{font-size:13px; padding:4px 0}
.ib-vb .ib-learn{margin-top:8px}
.ib-vb__tekst{font:inherit; font-size:12.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:6px 0 0}
.ib-cost{display:flex; align-items:center; gap:0; flex-wrap:wrap; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.ib-cost__end{margin-left:auto}
.ib-conf__bars{display:inline-flex; gap:2px; align-items:flex-end; height:10px}
.ib-conf__bars i{width:3px; height:100%; background:var(--line-2); border-radius:1px}
.ib-conf__bars i.on{background:var(--ok)}
.ib-conf--mid .ib-conf__bars i.on{background:var(--warn)}
.ib-conf--low .ib-conf__bars i.on{background:var(--crit)}

/* het rechterpaneel (wens Enes 11-10-2026): 1 voorstel van Claude, 2 order, 3 retouren, 4 vraag Claude */
.paneel{display:flex; flex-direction:column; gap:16px; min-width:0}
.paneel-order{display:flex; flex-direction:column; gap:16px; min-width:0}
.paneel .kaart-kop h2{display:flex; align-items:center; gap:8px}
.paneel .kaart-kop h2 .ico{color:var(--brass); width:16px; height:16px}
.paneel-order__body{display:flex; flex-direction:column; gap:12px}
.paneel-order__blok{display:flex; flex-direction:column; gap:10px; min-width:0}
.paneel-order__blok--extra{border-top:1px solid var(--line); padding-top:12px}
.paneel-order__blok .ib-kv dd{display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center}
.paneel-order__blok .ib-kv dd .chip{height:20px; font-size:11px; padding:0 7px}
.paneel-artikelen,.paneel-regels{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12.5px}
.paneel-artikelen li,.paneel-regels li{display:flex; gap:6px; align-items:flex-start; color:var(--ink-2); min-width:0}
.paneel-artikelen .ico,.paneel-regels .ico{color:var(--muted); margin-top:2px; flex:none}
.paneel-artikelen li > span,.paneel-regels li > span{min-width:0; overflow-wrap:anywhere}
.paneel-regels a{color:var(--brass)}
.paneel .kaart-voet .schakel{display:inline-flex; gap:6px}
.ib-card--af{opacity:.72}
.ib-card__line b{font-weight:500; color:var(--ink)}
/* de tabs op een telefoon (Gesprek · Voorstel · Order); op een groter scherm verborgen */
.tel-tabs{display:none}
/* vraag Claude over deze order */
.vraag-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.vraag-chat{display:flex; flex-direction:column; gap:12px; margin-bottom:12px}
.vraag-beurt{display:flex; flex-direction:column; gap:6px; min-width:0}
.vraag-q{align-self:flex-end; max-width:92%; background:var(--brass-soft); border:1px solid var(--brass-line); color:var(--brass-ink); border-radius:var(--r-s); padding:8px 12px; font-size:13px; overflow-wrap:anywhere}
.vraag-a{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-s); padding:10px 12px; font-size:13px; line-height:1.55; overflow-wrap:anywhere}
.vraag-a .laden{margin-right:4px}
.vraag-vorm{display:flex; gap:8px}
.vraag-vorm .invoer{flex:1; min-width:0}
.vraag-vorm .knop{flex:none}
.ib-ctx__body{display:flex; flex-direction:column; gap:16px}
.ib-ctx__section{display:flex; flex-direction:column; gap:8px; min-width:0}
.ib-ctx__title{display:flex; align-items:center; gap:6px}
.ib-ctx__title .ico{color:var(--muted)}
.ib-kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; margin:0; font-size:12.5px}
.ib-kv dt{color:var(--muted)} .ib-kv dd{margin:0; overflow-wrap:anywhere}
.ib-card{border:1px solid var(--line); border-radius:var(--r-s); padding:10px 12px; display:flex; flex-direction:column; gap:5px; font-size:12.5px; background:var(--surface)}
.ib-card--current{border-color:var(--brass-line); background:var(--surface-2)}
.ib-card__head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ib-card__id{font-weight:500; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:4px}
.ib-card__amount{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:500}
.ib-card__product{color:var(--ink-2)}
.ib-card__line{display:flex; align-items:center; gap:6px; color:var(--ink-2); flex-wrap:wrap}
.ib-card__line .ico{color:var(--muted)}
.ib-card__line a{color:var(--brass)}
/* De knop "Open in Routigo" onder een retourdossier in de kaart Retouren (wens Enes 12-10-2026). */
.ib-card__knoppen{margin-top:3px}
.ib-history{display:flex; flex-direction:column; gap:6px}
.ib-history__item{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-s); text-decoration:none; color:inherit; font-size:12.5px}
.ib-history__item b{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ib-history__item time{color:var(--muted); font-variant-numeric:tabular-nums}
.ib-history__item small{grid-column:1 / -1; color:var(--muted)}
a.ib-history__item:hover{border-color:var(--brass-line)}

/* de andere schermen (Te doen, TOV, Feedback, Leerlijst, Soorten, Cijfers) */
.pagina{display:flex; flex-direction:column; gap:14px; max-width:1100px}
@media (min-width:1600px){ .pagina{max-width:1500px} }
.pagina .paginakop{margin-bottom:6px}
.pagina .tov-tabs + .paginakop{margin-top:4px}
.pagina .paginakop .sub{max-width:760px; margin-top:6px}
.pagina > .kaart > .kaart-body:first-child{padding-top:16px}
.pagina > details.kaart{padding:14px 20px}
.pagina > details.kaart > summary{cursor:pointer}
.pagina .kpis{grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.pagina .kpis.mini{grid-template-columns:repeat(6,minmax(0,1fr))}
.pagina .kpi-tegel{padding:14px 16px 12px; gap:6px}
.pagina .kpi-tegel .cijfer{font-size:24px}
.kpi-tegel.goed{border-color:var(--ok-line)} .kpi-tegel.goed .cijfer{color:var(--ok-ink)}
.kpi-tegel.let-op{border-color:var(--warn-line)} .kpi-tegel.let-op .cijfer{color:var(--warn-ink)}
.kpi-tegel.slecht{border-color:var(--crit-line)} .kpi-tegel.slecht .cijfer{color:var(--crit-ink)}
.paneelkop{display:flex; align-items:center; gap:8px; padding:16px 20px 0; font-family:var(--f-kop); font-weight:500; font-size:16px}
.paneelkop .ico{color:var(--muted)}
.raster.twee{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
/* Kaart die je open- en dichtklapt (details), met de kaart-kop als summary (TOV: schadelijsten). */
.pagina > details.uitklapkaart{padding:0}
.uitklapkaart > summary{list-style:none; cursor:pointer; padding-bottom:18px; align-items:center}
.uitklapkaart > summary::-webkit-details-marker{display:none}
.uitklapkaart[open] > summary{padding-bottom:0}
.uitklapkaart[open] > summary .iknop .ico{transform:rotate(180deg)}
.ib-learn{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; display:flex; flex-direction:column; gap:8px; font-size:13px; min-width:0}
.ib-learn--done{background:var(--surface-2); box-shadow:none}
.ib-learn__head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ib-learn__head .invoer{flex:1 1 200px; min-width:0}
.ib-learn__head a{color:var(--brass); text-decoration:none; display:inline-flex; align-items:center; gap:2px; font-weight:500}
.ib-learn__who{margin-left:auto; font-size:12px; color:var(--muted)}
.ib-learn__text{color:var(--ink); line-height:1.5; overflow-wrap:anywhere}
.ib-learn__done{display:flex; align-items:center; gap:6px; color:var(--ok-ink); font-size:12.5px}
.ib-learn__actions{display:flex; gap:6px; flex-wrap:wrap}
.ib-learn__act{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ib-learn__act .invoer{flex:1; min-width:200px}
.ib-learn__diff summary{cursor:pointer; color:var(--muted); font-size:12.5px}
.ib-learn__cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px}
.ib-learn__cols > div{white-space:pre-wrap; font-size:12.5px; line-height:1.5; padding:10px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface-2)}
.ib-learn__cols b{display:block; margin-bottom:6px; color:var(--muted); font-weight:500}
/* Testset (15-10-2026): verstuurd · vorige run · deze run naast elkaar */
.ib-learn__cols.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.ib-learn details > summary{cursor:pointer; font-size:12.5px; color:var(--muted)}
.ib-leren{display:flex; flex-direction:column; gap:12px}
.ib-regel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; display:flex; flex-direction:column; gap:8px; font-size:13px}
.ib-regel--voorstel{border-left:3px solid var(--brass)}
.ib-regel--actief{border-left:3px solid var(--ok)}
.ib-regel__kop{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ib-regel__kop > .stil{margin-left:auto; font-size:12px}
.ib-regel__tekst{line-height:1.55; white-space:pre-wrap}
.ib-regel__waarom,.ib-regel__vb{font-size:12.5px; color:var(--ink-2)}
.ib-regel__vb a{color:var(--brass)}
.ib-regel__act{display:flex; gap:8px; flex-wrap:wrap}
.ib-regel__eigen{display:flex; flex-direction:column; gap:10px}
.ib-regel__eigen > summary{cursor:pointer; display:flex; align-items:center; gap:6px; font-weight:500; list-style:none}
.ib-regel__eigen > summary::-webkit-details-marker{display:none}
.ib-regel__eigen .knop{align-self:flex-start}
.ib-regel__oud > summary{cursor:pointer; color:var(--muted); font-size:13px; margin-bottom:10px}
.schakelrij{display:flex; align-items:flex-start; gap:12px; margin:12px 0}
.schakelrij .segment{flex:none}
.voor-wie{display:inline-flex; gap:8px; align-items:center}
.ib-opruim{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.ib-opruim .knop{align-self:flex-start}
.ib-opruim__soorten{display:flex; flex-wrap:wrap; gap:8px 16px}
.ib-opruim__uitkomst{display:flex; flex-direction:column; gap:10px; font-size:13px}
.ib-opruim__uitkomst details > summary{cursor:pointer; font-weight:500}
.ib-opruim__item{padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px}
.ib-opruim__item a{color:var(--brass)}
.ib-opruim__item pre{font:inherit; white-space:pre-wrap; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:6px 0 0}
.ib-quality{display:inline-flex; width:120px; height:8px; border-radius:999px; overflow:hidden; background:var(--surface-3); vertical-align:middle}
.ib-quality i{display:block; height:100%}
.ib-quality .q-ok{background:var(--ok)} .ib-quality .q-warn{background:var(--warn)} .ib-quality .q-crit{background:var(--crit)}
.ib-pct--ok{color:var(--ok-ink); font-weight:500} .ib-pct--warn{color:var(--warn-ink); font-weight:500} .ib-pct--crit{color:var(--crit-ink); font-weight:500}
/* Situaties onder een soort (15-10-2026): ingesprongen, lichtere achtergrond */
.ib-soorten td:first-child small{display:block; color:var(--muted); font-size:11.5px; margin-top:2px}
.ib-sit-knop{margin:4px 0 0 -10px}
.tabel tr.ib-sit td{background:var(--surface-2); padding-top:9px; padding-bottom:9px}
.tabel tr.ib-sit td:first-child{padding-left:36px}
.ib-sit__naam{font-weight:500; color:var(--ink)}
.ib-noodrem{margin:4px 0 6px 18px; padding:0}
.ib-noodrem li{margin:2px 0}
/* Steekproef: de verstuurde tekst leesbaar, het "niet goed"-formulier eronder */
.ib-steek__tekst{margin-top:10px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-s); font-size:13.5px; line-height:1.55; overflow-wrap:anywhere; max-height:360px; overflow:auto}
.ib-steek__niet{margin-top:10px}
.ib-steek__niet .segment{flex-wrap:wrap}
.ib-hbars{display:flex; flex-direction:column; gap:6px; font-size:12.5px}
.ib-hbar{display:grid; grid-template-columns:minmax(80px,160px) minmax(0,1fr) auto; gap:10px; align-items:center}
.ib-hbar > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.ib-hbar__track{display:block; height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden}
.ib-hbar__fill{height:100%; background:var(--brass); border-radius:999px}
.ib-hbar b{font-variant-numeric:tabular-nums; font-weight:500}
.ib-chart{width:100%; height:auto; display:block}
.ib-chart .c-grid{stroke:var(--line); stroke-width:1}
.ib-chart .c-axis{fill:var(--muted); font-size:11px; font-family:var(--f-tekst)}
.ib-chart .c-base{stroke:var(--line-2); stroke-width:1}
.ib-chart .c-in{fill:var(--line-2)} .ib-chart .c-prop{fill:var(--brass)}
.ib-chart .c-area{fill:var(--brass-soft)} .ib-chart .c-line{fill:none; stroke:var(--brass); stroke-width:2} .ib-chart .c-dot{fill:var(--brass)}
.ib-legend{margin-left:auto; display:inline-flex; gap:12px; font-size:12px; color:var(--muted); font-family:var(--f-tekst); font-weight:400}
.ib-legend span{display:inline-flex; align-items:center; gap:5px}
.ib-legend i{width:10px; height:10px; border-radius:3px; display:inline-block}
.ib-legend .l-in{background:var(--line-2)} .ib-legend .l-prop{background:var(--brass)}

/* meldingen (toasts) en dialogen */
.ib-toasts{position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; gap:8px; max-width:min(420px, calc(100vw - 32px))}
.ib-toast{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r); background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-2); font-size:13.5px}
.ib-toast > .ico{flex:none; color:var(--ok)}
.ib-toast--warn > .ico{color:var(--warn)} .ib-toast--error > .ico{color:var(--crit)}
.ib-toast__text{flex:1; min-width:0}
.ib-toast__meta{font-size:12px; opacity:.7}
.ib-toast__undo{display:inline-flex; align-items:center; gap:6px; font-weight:500; padding:4px 8px; border-radius:6px; background:rgba(255,255,255,.12); color:inherit; white-space:nowrap}
.ib-toast__undo .toets{background:transparent; color:inherit; border-color:rgba(255,255,255,.3)}
.ib-toast__close{color:inherit; opacity:.7; padding:4px; display:inline-flex}
.ib-toast a{color:inherit}
.ib-dialog{width:min(640px, 94vw); max-width:94vw; padding:0; border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-2); max-height:92vh; overflow:auto}
.ib-dialog.klein{width:min(480px, 94vw)}
.ib-dialog::backdrop{background:rgba(0,0,0,.45)}
.ib-dialog .kaart-kop{padding-bottom:12px; border-bottom:1px solid var(--line); align-items:center}
.ib-dialog .kaart-body{padding-top:16px}
.ib-dialog-tekst{font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.ib-dialog-tekst b{color:var(--ink); font-weight:500}
.ib-dialog-tekst .invoer{margin-top:4px}
.ib-dialog .knoppen.eind{margin-top:4px}
.ib-shortcuts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.ib-shortcuts dl{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; margin:10px 0 0; font-size:13px}
.ib-shortcuts dt{color:var(--ink-2)} .ib-shortcuts dd{margin:0; display:inline-flex; gap:3px; align-items:center}

/* --- tablet: bakken + lijst, of het gesprek over de volle breedte --- */
@media (max-width:1279px){
  .inbox-raster,.inbox-raster[data-pane="ticket"]{grid-template-columns:184px minmax(0,1fr)}
  .inbox-raster[data-pane="list"] .gesprek-kolom,.inbox-raster[data-pane="list"] .paneel{display:none}
  .inbox-raster[data-pane="ticket"] .bakken,.inbox-raster[data-pane="ticket"] .maillijst{display:none}
  .inbox-raster[data-pane="ticket"] .gesprek-kolom,.inbox-raster[data-pane="ticket"] .paneel{grid-column:1 / -1}
  .terugknop{display:inline-flex}
  .pagina .kpis.mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Tabs Gesprek · Voorstel · Order boven het gesprek, met daarboven de compacte kop
     (terug, afzender, onderwerp, meer-menu; inbox.js vult #ib-telkop). */
  .inbox-raster[data-pane="ticket"] .tel-tabs{display:flex; flex-direction:column; gap:8px}
  .tel-kop{display:flex; align-items:center; gap:8px; min-width:0}
  .tel-kop .wie-blok{flex:1; min-width:0}
  .tel-kop .wie-blok b{display:block; font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tel-kop .wie-blok span{display:block; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tel-tabs .segment{flex:1}
  .tel-tabs .segment button{flex:1}
  .inbox-raster[data-tab="voorstel"] .gesprek-kolom,.inbox-raster[data-tab="order"] .gesprek-kolom{display:none}
  .inbox-raster[data-tab="gesprek"] .paneel{display:none}
  .inbox-raster[data-tab="voorstel"] .paneel-order{display:none}
  .inbox-raster[data-tab="order"] .paneel .voorstel-blok{display:none}
}
/* --- telefoon en tablet: een vast scherm, elk vak scrolt zelf (wens Enes 12-10-2026: "op mobiel
   moet je nog wel scrollen in de mails"). Net als op een laptop (body.inbox-vast) scrolt de
   pagina zelf niet: de bovenbalk en de onderbalk staan vast, het scherm is 100dvh hoog (100vh als
   terugval; --kijkhoogte volgt op een iPhone het toetsenbord, zie volgToetsenbord in inbox.js).
   Geen position:fixed voor de inhoud: alleen een vaste hoogte en overflow, dat breekt niet met
   het toetsenbord.
   - De lijst: de kop en de bakken staan vast (op de telefoon de bakken als één rij die zijwaarts
     schuift), de mails scrollen in #ib-list-body.
   - Een gesprek (body.gesprek-open): de compacte kop en de tabs Gesprek · Voorstel · Order staan
     vast, daaronder scrolt de actieve tab in haar eigen vak (de mailwisseling in #ib-thread, het
     voorstel en de order in .paneel); het notitieveld staat onder het gesprek en de knoppen van
     het voorstel (Versturen, Aanpassen) plakken onderaan het paneel. --- */
@media (max-width:1279px){
  body.inbox-vast{height:100vh; height:100dvh; height:var(--kijkhoogte, 100dvh); overflow:hidden}
  body.inbox-vast .app-shell{height:100vh; height:100dvh; height:var(--kijkhoogte, 100dvh); min-height:0}
  body.inbox-vast .app-shell > .hoofd{height:100vh; height:100dvh; height:var(--kijkhoogte, 100dvh); min-height:0; overflow:hidden}
  body.inbox-vast .inhoud{min-height:0; overflow:hidden; padding-bottom:16px}
  body.inbox-vast .inbox-scherm{flex:1 1 auto; min-height:0}
  /* de lijst: tablet twee kolommen (bakken · mails), elk met een eigen scrollvak */
  body.inbox-vast .inbox-raster[data-pane="list"]{flex:1 1 auto; min-height:0; grid-template-rows:minmax(0,1fr); align-items:stretch}
  body.inbox-vast .inbox-raster[data-pane="list"] .bakken,body.inbox-vast .inbox-raster[data-pane="list"] .maillijst{min-height:0; max-height:none; position:relative; top:auto}
  body.inbox-vast .inbox-raster[data-pane="list"] .bakken{overflow-y:auto; overscroll-behavior:contain}
  body.inbox-vast .inbox-raster[data-pane="list"] .maillijst{display:flex; flex-direction:column}
  body.inbox-vast .inbox-raster[data-pane="list"] .maillijst > *{flex:none}
  body.inbox-vast .inbox-raster[data-pane="list"] .maillijst > .maillijst-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; position:relative; -webkit-overflow-scrolling:touch}
  body.inbox-vast.gesprek-open .inhoud{padding-top:12px; gap:0}
  /* de paginakop en de cijfers verdwijnen: de kop van het gesprek is dan de kop van het scherm */
  body.inbox-vast.gesprek-open .inbox-scherm > .paginakop,body.inbox-vast.gesprek-open .inbox-kpis{display:none}
  body.inbox-vast.gesprek-open .inbox-scherm{flex:1 1 auto; min-height:0; gap:0}
  body.inbox-vast.gesprek-open .inbox-raster[data-pane="ticket"]{display:flex; flex-direction:column; align-items:stretch; gap:10px; flex:1 1 auto; min-height:0}
  body.inbox-vast.gesprek-open .tel-tabs{flex:none}
  body.inbox-vast.gesprek-open .gesprek-kolom,body.inbox-vast.gesprek-open .paneel{flex:1 1 auto; min-height:0; max-height:none; position:relative; top:auto}
  body.inbox-vast.gesprek-open .gesprek-kolom{display:flex; flex-direction:column}
  body.inbox-vast.gesprek-open .inbox-raster[data-tab="voorstel"] .gesprek-kolom,body.inbox-vast.gesprek-open .inbox-raster[data-tab="order"] .gesprek-kolom{display:none}
  body.inbox-vast.gesprek-open .gesprek{flex:1 1 auto; min-height:0; overflow:hidden; position:relative}
  body.inbox-vast.gesprek-open .gesprek > *{flex:none}
  body.inbox-vast.gesprek-open .gesprek > .gesprek-vak{flex:1 1 auto; min-height:0}
  body.inbox-vast.gesprek-open .gesprek-body{overflow-y:auto; overscroll-behavior:contain; position:relative; -webkit-overflow-scrolling:touch}
  body.inbox-vast.gesprek-open .gesprek-spring:not([hidden]){display:inline-flex}
  /* de kop in de kaart dubbelt met de compacte kop en gaat weg; de chips blijven, op één rij die zijwaarts schuift */
  body.inbox-vast.gesprek-open .gesprek > .gesprek-kop{display:none}
  body.inbox-vast.gesprek-open .gesprek-onderwerp{padding-top:8px}
  body.inbox-vast.gesprek-open .gesprek-onderwerp h2{display:none}
  body.inbox-vast.gesprek-open .gesprek-onderwerp .chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  body.inbox-vast.gesprek-open .gesprek-onderwerp .chips::-webkit-scrollbar{display:none}
  body.inbox-vast.gesprek-open .gesprek-onderwerp .chips > *{flex:none}
  body.inbox-vast.gesprek-open .notitie-vak{border-bottom:0; border-top:1px solid var(--line)}
  body.inbox-vast.gesprek-open .paneel{overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  /* Versturen / Aanpassen / Niet goed blijven onderaan in beeld, ook bij een lang voorstel. */
  body.inbox-vast.gesprek-open .ib-prop__foot{position:sticky; bottom:0; z-index:2; box-shadow:0 -6px 12px -10px rgba(0,0,0,.35)}
  /* de tab die open staat is te zien (de tabs zetten aria-selected) */
  .tel-tabs .segment button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(28,28,28,.08); border-color:var(--line)}
}
/* telefoon: ruimte voor de vaste onderbalk, en de lijst compact: kop op één regel, de bakken als
   één rij die zijwaarts schuift (de filters klappen eronder open, dan scrolt dat deel zelf) */
@media (max-width:767px){
  body.inbox-vast .inhoud{padding-top:12px; padding-bottom:calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom, 0px) + 10px); gap:10px}
  body.inbox-vast .inbox-scherm{gap:10px}
  body.inbox-vast .inbox-scherm > .paginakop{flex-wrap:nowrap; align-items:center; gap:10px}
  body.inbox-vast .inbox-scherm > .paginakop > div:first-child{flex:none}
  body.inbox-vast .inbox-scherm > .paginakop .sub{display:none}
  body.inbox-vast .inbox-scherm > .paginakop .acties{flex:1 1 auto; min-width:0; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding:2px 0}
  body.inbox-vast .inbox-scherm > .paginakop .acties::-webkit-scrollbar{display:none}
  body.inbox-vast .inbox-scherm > .paginakop .acties > *,body.inbox-vast .inbox-scherm > .paginakop .statuschips{flex:none; flex-wrap:nowrap}
  body.inbox-vast .inbox-raster[data-pane="list"]{display:flex; flex-direction:column; align-items:stretch; gap:10px}
  body.inbox-vast .inbox-raster[data-pane="list"] .bakken{flex:none; display:flex; align-items:flex-start; gap:8px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding-bottom:2px}
  body.inbox-vast .inbox-raster[data-pane="list"] .bakken::-webkit-scrollbar{display:none}
  body.inbox-vast .inbox-raster[data-pane="list"] .bakkenlijst{flex:none; flex-wrap:nowrap}
  body.inbox-vast .inbox-raster[data-pane="list"] .bak-rij{flex:none}
  body.inbox-vast .inbox-raster[data-pane="list"] .filters{flex:none; margin-top:0}
  body.inbox-vast .inbox-raster[data-pane="list"] .bakken:has(.filters[open]){flex-wrap:wrap; overflow-x:hidden; overflow-y:auto; max-height:55%; overscroll-behavior:contain}
  body.inbox-vast .inbox-raster[data-pane="list"] .bakken:has(.filters[open]) .bakkenlijst{flex-wrap:wrap}
  body.inbox-vast .inbox-raster[data-pane="list"] .bakken:has(.filters[open]) .filters{flex:1 1 100%}
  body.inbox-vast .inbox-raster[data-pane="list"] .maillijst{flex:1 1 auto}
  /* de plakkende voet van het voorstel compact: de knoppen en wat er gebeurt; de kostenregel en
     de uitleg onder de knoppen vallen weg (te hoog op een telefoon). Een open redenformulier scrolt zelf. */
  body.inbox-vast.gesprek-open .ib-prop__foot{max-height:60dvh; overflow-y:auto; gap:8px}
  body.inbox-vast.gesprek-open .ib-prop__foot > .klein-tekst,body.inbox-vast.gesprek-open .ib-prop__foot > .ib-cost{display:none}
  /* de balk boven het antwoord: "Aan …" op een eigen regel, de knoppen (handleiding, afbeelding, paperclip) eronder */
  .ib-editor__bar .ib-editor__to{flex:1 1 100%; min-width:0}
  .ib-editor__bar > .ruimte{display:none}
}
/* --- telefoon: één kolom, bakken als chips, mails als kaartjes --- */
@media (max-width:767px){
  .inbox-scherm{gap:14px}
  .inbox-raster,.inbox-raster[data-pane="ticket"]{grid-template-columns:minmax(0,1fr); gap:12px}
  .bakken{position:static; padding:0; background:transparent; border:0; box-shadow:none}
  .bakkenlijst{flex-direction:row; flex-wrap:wrap; gap:8px}
  .bak-rij{height:36px; padding:0 12px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); font-size:12.5px}
  .bak-rij.stil{height:36px}
  .bak-rij .ico{display:none}
  .bak-rij > span:not(.badge){flex:none}
  .bak-rij .badge{margin-left:2px}
  .bak-rij.actief{border-color:var(--brass-line)}
  .filters{border-top:0; padding-top:0; margin-top:8px}
  .filters > summary.bak-rij{display:inline-flex}
  .filters > summary .ico{display:inline-block}
  .filters[open]{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:8px}
  .maillijst .kaart-kop{padding:14px 16px 10px}
  .actievefilters{padding:8px 16px 0}
  .mailtabel thead{display:none}
  .mailtabel,.mailtabel tbody{display:block}
  .mailtabel tr.mailrij{display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px 10px; padding:12px 16px; border-bottom:1px solid var(--line); align-items:start}
  .mailtabel tr:last-child{border-bottom:0}
  .mailtabel td{display:block; padding:0; border:0; width:auto !important}
  .mailtabel td:first-child{grid-row:1 / span 2; padding:0}
  .mailtabel td.mail-cel{grid-column:2}
  .mailtabel td.tijd-cel{grid-column:2; text-align:left; display:flex; gap:8px; align-items:center; padding:0}
  .mailtabel .tijd{margin:0; order:2}
  .mailtabel tr.gekozen td{background:transparent}
  .mailtabel tr.gekozen{background:var(--brass-soft)}
  .mailtabel tr.gekozen td:first-child{box-shadow:none}
  .mailtabel .mail-link{white-space:normal}
  .mailtabel .ond{white-space:normal}
  .mailtabel tbody tr:hover td{background:transparent}
  .gesprek-kop{padding:12px 14px}
  .gesprek-onderwerp{padding:10px 14px 0}
  .gesprek-body{padding:14px 14px 4px}
  .notitie-vak{padding:10px 14px 14px}
  /* de tabs en de compacte kop staan in het tabletblok hierboven; de terugknop zit in die kop */
  .gesprek-kop .terugknop{display:none}
  .ib-prop__scroll{padding:12px 14px}
  .ib-prop__foot{padding:12px 14px 14px}
  .voorstel-knoppen .knop{flex:1; min-width:0; padding:0 10px}
  .voorstel-knoppen > .knop[data-actie="goed"]{flex-basis:100%}
  .voorstel-knoppen .meer-menu{flex:1}
  .voorstel-knoppen .meer-menu > summary{width:100%}
  .voorstel-knoppen .knop .toets{display:none}
  .ib-reason__grid{grid-template-columns:minmax(0,1fr)}
  .ib-redenknop{height:34px; padding:0 11px}
  .ib-redenknop .toets{display:none}
  .pagina .kpis,.pagina .kpis.mini{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .raster.twee{grid-template-columns:minmax(0,1fr)}
  .ib-learn{padding:12px 14px}
  .ib-learn__cols,.ib-learn__cols.drie{grid-template-columns:minmax(0,1fr)}
  .ib-shortcuts{grid-template-columns:minmax(0,1fr)}
  .ib-toasts{left:16px; right:16px; bottom:calc(var(--onderbalk-hoogte) + 12px); max-width:none}
  .ib-hbar{grid-template-columns:minmax(60px,100px) minmax(0,1fr) auto}
}
/* ------------------------------------------------------------
   kantoor
   Klassen die alleen het kantoor (kantoor.html, kantoor.js, geld.js)
   gebruikt: tabbladen, de retourenlijst als kaartjes op een telefoon, het
   dossier (artikel, kosten, foto's, tijdlijn), opties, vensters, het
   tabblad Geld. Niets hierboven wordt hier gewijzigd.
   ------------------------------------------------------------ */
.subnav{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; padding:2px; scrollbar-width:thin}
.subnav .segment{min-width:max-content}
.subnav .segment button{height:32px; gap:7px}
.subnav .segment button .badge{margin-left:0; min-width:20px; height:18px; font-size:10.5px}
.kpis.vijf{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (min-width:1600px){ .kpis.vijf{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} }
@media (max-width:1279px){ .kpis.vijf{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:767px){ .kpis.vijf{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tegel-keuze{cursor:pointer; text-align:left; font:inherit; color:inherit}
.tegel-keuze.actief{border-color:var(--brass); box-shadow:0 0 0 2px var(--ink) inset, var(--shadow)}
.tabel tr.klikbaar{cursor:pointer}
.tabel tr.klikbaar[aria-selected="true"] td{background:var(--brass-soft)}
.tabel td .chip + .chip{margin-left:4px}
.tabel .artikel-cel{min-width:140px}
.tabel .stil.mono{font-family:var(--f-mono); font-size:11.5px}
.zoek-telefoon{display:none}
.kaartjes{display:none; flex-direction:column; gap:10px}
.kaartje{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; text-decoration:none; color:inherit; cursor:pointer; text-align:left; font:inherit; width:100%}
.kaartje.gekozen{border-color:var(--brass-line); box-shadow:inset 3px 0 0 var(--brass), var(--shadow)}
.kaartje .tekst{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.kaartje .rij1{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.kaartje .rij1 b{font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kaartje .rij1 span{font-size:11.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.kaartje .ond{font-size:13px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kaartje .rij3{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:4px}
@media (max-width:767px){
  .tabel-wrap.met-kaartjes{display:none}
  .kaartjes{display:flex}
  .zoek-telefoon{display:flex; width:100%}
  .zoek-telefoon input{padding-right:14px}
}

/* het dossier */
.titel-rij{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.titel-rij h1{font-variant-numeric:tabular-nums}
.paginakop .acties .profiel-houder{position:relative}
.artikel{display:flex; gap:16px; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:14px}
.thumb{width:84px; height:84px; border-radius:10px; background:var(--surface-3); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--muted); flex:none; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover}
.artikel .naam{font-weight:500; font-size:15px; font-family:var(--f-kop)}
.artikel .meta{font-size:12.5px; color:var(--muted); margin-top:3px}
.artikel .reden{margin-top:10px; font-size:13px; color:var(--ink-2)}
.artikel .reden b{font-weight:500; color:var(--ink)}
.kosten{width:100%; border-collapse:collapse; font-size:13px}
.kosten td{padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top}
.kosten td.num{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; padding-left:12px}
.kosten tr.totaal td{border-bottom:0; padding-top:12px; font-weight:500; color:var(--ink); font-size:14px}
.kosten tr.totaal td.num{font-family:var(--f-kop); font-size:18px}
.kosten tr.min td.num{color:var(--muted)}
.kv{display:grid; grid-template-columns:120px minmax(0,1fr); gap:8px 12px; font-size:13px; margin:0}
.kv dt{color:var(--muted); margin:0}
.kv dd{margin:0; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.kv dd .invoer{height:34px; font-size:13px; max-width:280px}
@media (max-width:479px){ .kv{grid-template-columns:minmax(0,1fr)} .kv dt{margin-top:4px} .kv dt:first-child{margin-top:0} }
.fotos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.foto{aspect-ratio:4/3; border-radius:10px; background:var(--surface-3); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); position:relative; overflow:hidden; padding:0; cursor:pointer}
.foto img{width:100%; height:100%; object-fit:cover; display:block}
.foto span{position:absolute; left:8px; bottom:8px; font-size:11px; background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--ink-2); max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fotos video{grid-column:1 / -1; width:100%; max-height:340px; border-radius:10px; border:1px solid var(--line); background:#000}
@media (max-width:479px){ .fotos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px} }
.tijdlijn{display:flex; flex-direction:column; padding-top:4px}
.stap{display:grid; grid-template-columns:18px minmax(0,1fr); gap:12px; position:relative; padding-bottom:18px}
.stap::before{content:""; position:absolute; left:8px; top:16px; bottom:-2px; width:2px; background:var(--line)}
.stap:last-child::before{display:none}
.stap:last-child{padding-bottom:4px}
.stap .punt{width:18px; height:18px; border-radius:50%; background:var(--surface); border:2px solid var(--line-2); margin-top:1px; position:relative; z-index:1}
.stap.klaar .punt{background:var(--ok); border-color:var(--ok)}
.stap.claude .punt{background:var(--brass); border-color:var(--brass)}
.stap.nu .punt{background:var(--warn-soft); border-color:var(--warn); box-shadow:0 0 0 4px var(--warn-soft)}
.stap .wanneer{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.stap b{display:block; font-weight:500; color:var(--ink); font-size:13px}
.stap span{font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere}
.blok{padding:16px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.blok:first-child{border-top:0; padding-top:0}
.blok:last-child{padding-bottom:0}
.blok .label{display:block}
.blok p{font-size:13px; color:var(--ink-2)}
.blok .kop-rij{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.optie{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-s); cursor:pointer; background:var(--surface)}
.optie input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--brass); flex:none}
.optie > span{display:flex; flex-direction:column; gap:2px; min-width:0}
.optie b{font-weight:500; font-size:13.5px; color:var(--ink)}
.optie span span{font-size:12.5px; color:var(--muted)}
.optie.aan{border-color:var(--brass-line); background:var(--brass-soft)}
.formulier-rij{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.formulier-rij > .veld{flex:1 1 150px}
.formulier-rij > .knop{flex:none}
.vergoeding-advies{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; padding:12px 14px; border-radius:var(--r-s); background:var(--surface-2); border:1px solid var(--line)}
.vergoeding-advies .label{display:block; margin-bottom:2px}
.vergoeding-advies b{font-family:var(--f-kop); font-size:18px; font-weight:500; font-variant-numeric:tabular-nums}
.vergoeding-advies .stil{font-size:12px}
.mailregel{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:13.5px}
.mailregel:last-of-type{border-bottom:0}
.mailtekst{white-space:pre-wrap; font:inherit; font-size:13px; margin:0; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-s)}
.bedrag-groot{font-family:var(--f-kop); font-size:22px; font-weight:500; font-variant-numeric:tabular-nums}
.k-verloop .kaart-voet{color:var(--ink)}
@media (max-width:767px){ .k-verloop{order:9} .k-status{order:10} .k-mails{order:11} }

/* venster over de pagina (bevestigen met reden, fotokijker) */
.venster{position:fixed; inset:0; z-index:60; background:rgba(20,17,13,.5); display:flex; align-items:center; justify-content:center; padding:16px}
.venster .kaart{width:100%; max-width:460px; padding:24px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-2); background:var(--surface)}
.venster h2{font-size:18px}
.venster .knoppen{justify-content:flex-end}
.kijker{position:fixed; inset:0; z-index:60; background:rgba(20,17,13,.92); display:flex; align-items:center; justify-content:center; padding:24px}
.kijker img{max-width:92vw; max-height:84vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.kijker .boven{position:absolute; top:16px; right:20px; display:flex; gap:8px}
.kijker .vorige{position:absolute; left:16px}
.kijker .volgende{position:absolute; right:16px}
.kijker .teller{position:absolute; bottom:18px; color:#fff; font-size:12.5px}
.kijker .knop.secundair{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3)}

/* claims, geschillen, cijfers, geld */
.lijstregel{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.lijstregel:last-child{border-bottom:0}
.lijstregel .num{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink-2); flex:none}
.lijstregel.totaal{font-weight:500; border-top:1px solid var(--line-2); border-bottom:0; padding-top:10px}
.lijstregel.totaal .num{font-family:var(--f-kop); font-size:17px; color:var(--ink)}
.bericht-klant{border-left:3px solid var(--line-2); padding:2px 0 2px 12px; margin-bottom:10px}
.bericht-klant p{font-size:14.5px; margin-top:4px; color:var(--ink)}
.geld-week{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.geld-week b{font-size:14.5px; font-weight:500}
.geld-tekst{font-size:14px; color:var(--ink)}
.rood-rand{border-color:var(--crit)}
.kaart.rood-rand{box-shadow:inset 0 0 0 2px var(--crit), var(--shadow)} /* kaarten hebben geen rand meer */
.herstelcodes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; font-size:16px; font-family:var(--f-mono)}
.qr{max-width:240px; margin:0 auto; background:#fff; padding:6px; border-radius:8px}
.qr svg{width:100%; height:auto; display:block}
.smal{max-width:560px; width:100%}
.tabel td.acties-cel{text-align:right; white-space:nowrap}
.knoppen.dicht{gap:6px}
.kaart-body.strak.boven{padding-top:12px}

/* ------------------------------------------------------------
   depot
   Het magazijnscherm (depot.html + depot.js): wordt met een doos in de
   andere hand bediend, op een tablet of telefoon. Groot scanveld, grote
   knoppen, één kaart per gevonden dossier. Dezelfde schil als de rest.
   ------------------------------------------------------------ */
.scanveld{display:flex; flex-direction:column; gap:8px}
.scanveld .invoer{height:60px; font-size:22px; font-family:var(--f-mono); letter-spacing:.02em; padding:0 16px; text-transform:uppercase}
.scanveld .invoer::placeholder{text-transform:none; font-family:var(--f-tekst); font-size:16px; letter-spacing:0}
.knop.groot{height:52px; font-size:16px; padding:0 24px; border-radius:var(--r-knop)}
.knop.groot .ico{width:20px; height:20px}
.depot-kolom{display:flex; flex-direction:column; gap:20px; min-width:0}
.depot-knoppen{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.depot-uitkomst .meldingen{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.camvak video{width:100%; border-radius:var(--r); background:#000; aspect-ratio:4/3; object-fit:cover; display:block}
.camvak p{margin:6px 0 10px; font-size:13px; color:var(--muted)}
.depot-uitkomst .titel-rij h2{font-size:20px; font-family:var(--f-mono); font-weight:500; letter-spacing:.02em}
.depot-uitkomst .artikel{align-items:center}
.depot-uitkomst .artikel .naam{font-size:17px}
.depot-uitkomst .kaart-voet{padding-top:14px; gap:10px}
.depot-uitkomst .kaart-voet .knop{flex:1; min-width:200px}
.depot-uitkomst .kaart-voet .invoer{flex:2; min-width:200px}
.depot-lijst{display:flex; flex-direction:column}
.scanregel{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); min-width:0}
.scanregel:last-child{border-bottom:0; padding-bottom:4px}
.scanregel .tekst{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.scanregel .tekst b{font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.02em; color:var(--ink)}
.scanregel .tekst span{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.scanregel .chip,.scanregel .wanneer{flex:none}
.scanregel .wanneer{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
@media (max-width:1023px){ .depot-raster .k7,.depot-raster .k5{grid-column:span 12} .depot-kolom{gap:16px} }
@media (max-width:767px){
  .scanveld .invoer{height:56px; font-size:20px}
  .depot-uitkomst .kaart-voet .knop,.depot-uitkomst .kaart-voet .invoer{flex-basis:100%; min-width:0}
}

/* foutpagina (src/foutpagina.js): 401/403/404 als kaart in het midden */
.foutpagina .kaart{max-width:460px}
.foutpagina .code{font-family:var(--f-kop); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.foutpagina .knoppen{margin-top:18px}

/* ------------------------------------------------------------
   klant
   De pagina's die de klant ziet (besluit Enes 11-10-2026: alles in dezelfde
   stijl): het portaal (index.html + app.js), de statuspagina (status.html +
   status.js), de fotopagina (src/fotopagina.js), het retourformulier
   (src/formulier.js), geinstalleerd.html en de handleiding. Geen zijbalk:
   een kop met het woordmerk en een label, daaronder één smalle kolom
   kaarten. Mobiel eerst; body.klant houdt de afwijkingen bij deze pagina's.
   Niets hierboven wordt hier gewijzigd.
   ------------------------------------------------------------ */
body.klant{font-size:15px}
.klant-kop{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line)}
/* Het woordmerk als tekst (Jost): het logo zelf is alleen voor intern (correctie Enes 11-10-2026). */
.klant-kop .logo{max-width:640px; margin:0 auto; padding:12px 16px; gap:11px}
.klant-kop .logo-sub{letter-spacing:.08em}
.klant-kop .acties{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.klant-kop.breed .logo{max-width:1040px}
.klant-inhoud{max-width:640px; margin:0 auto; padding:20px 16px 56px; display:flex; flex-direction:column; gap:16px}
.klant-inhoud.breed{max-width:1040px}
.klant h1{font-size:24px; line-height:1.2}
.stapel{display:flex; flex-direction:column; gap:16px}
.stapel-s{display:flex; flex-direction:column; gap:10px}
.klant .kaart.pad{padding:18px 20px}
.klant .kaart > .kaart-body:first-child{padding-top:18px}
.klant .kaart > hr{margin:0}
.klant .kaart.rand-goed{border-color:var(--ok)}
.klant .kaart.rand-brons{border-color:var(--brass)}
.intro{color:var(--ink-2); font-size:15px; line-height:1.55}
.intro b{color:var(--ink); font-weight:500}
.uitleg{font-size:13px; color:var(--muted); line-height:1.5}
.uitleg b{color:var(--ink-2); font-weight:500}
.spreid{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.spreid.boven{align-items:flex-start}
.spreid > *{min-width:0}
/* de balk met vijf stappen boven het portaal */
.stappenbalk{display:flex; gap:6px}
.stappenbalk i{flex:1; height:4px; border-radius:2px; background:var(--line-2); display:block}
.stappenbalk i.on{background:var(--brass)}
/* chips mogen bij de klant over twee regels: een lange status op een smal scherm */
.klant .chip{height:auto; min-height:24px; padding:3px 9px; white-space:normal; line-height:1.3}
.klant .titel-rij{gap:10px}
/* knoppen: groot genoeg voor een duim */
.klant .knop{height:44px; font-size:14.5px; padding:0 18px}
.klant .knop.klein{height:34px; font-size:13px; padding:0 12px}
.knoppen.onder{justify-content:space-between; margin-top:4px}
.knoppen.onder .knop:last-child{margin-left:auto}
/* formulieren: 16px in een veld, anders zoomt een iPhone in */
.klant .veld{font-size:13.5px}
.klant .invoer{height:46px; font-size:16px}
.klant textarea.invoer{height:auto; min-height:100px}
.klant select.invoer{font-size:16px}
/* de artikelen van de bestelling (stap 2) */
.artikelrij{display:flex; gap:14px; padding:14px 20px; align-items:flex-start; cursor:pointer; min-width:0}
.artikelrij + .artikelrij{border-top:1px solid var(--line)}
.artikelrij .box{width:22px; height:22px; margin:2px 0 0; accent-color:var(--brass); flex:none}
.artikelrij .thumb{width:56px; height:56px; border-radius:var(--r-s); font-family:var(--f-mono); font-size:10.5px; text-align:center; line-height:1.15; padding:4px; background:var(--brass-soft); border-color:var(--brass-line); color:var(--brass-ink)}
.artikelrij .tekst{flex:1; min-width:0; overflow-wrap:anywhere}
.artikelrij h4{font-size:15px; line-height:1.3; font-weight:500}
.artikelrij .meta{font-size:12.5px; color:var(--muted); margin-top:3px; display:block}
.artikelrij .meta .schakel{font-size:13.5px}
.artikelrij.uit,.artikelrij .uit{color:var(--muted)}
.artikelrij .thumb.uit{background:var(--surface-3); border-color:var(--line); color:var(--muted)}
.artikelrij.los{padding:0; cursor:default}
/* keuzekaarten: een radio als grote kaart */
.klant .optie{padding:14px 16px; border-color:var(--line-2); gap:12px}
.klant .optie input{width:20px; height:20px; margin-top:1px}
.klant .optie b{font-size:14.5px}
.klant .optie span span{font-size:13px; line-height:1.45}
.klant .optie:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}
.inspring{padding-left:14px; display:flex; flex-direction:column; gap:8px}
/* wat het portaal zelf besloot (stap 4) */
.besluit{border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2); padding:14px 16px}
.besluit .regel{display:flex; gap:9px; align-items:baseline; font-size:13px; color:var(--ink-2); padding:3px 0}
.besluit .regel > span{min-width:0; overflow-wrap:anywhere}
.besluit .regel b{color:var(--ink); font-weight:500}
/* foto's kiezen: vakken die op een telefoon met een duim te raken zijn */
.uploads{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px}
.upvak{aspect-ratio:1; min-height:96px; border-radius:var(--r-s); border:1px solid var(--line); background:var(--surface-2); display:grid; place-items:center; overflow:hidden; position:relative}
.upvak img,.upvak video{width:100%; height:100%; object-fit:cover; display:block}
.upvak.toevoegen{cursor:pointer; border:1px dashed var(--line-2); color:var(--muted); font-size:32px; font-family:var(--f-kop); line-height:1}
.upvak.toevoegen:hover{border-color:var(--brass); color:var(--brass)}
.upvak .weg{position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:50%; background:var(--surface); border:1px solid var(--line-2); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; box-shadow:var(--shadow)}
.fototitel{font-size:14.5px; font-weight:500; color:var(--ink); display:block}
/* het kostenoverzicht */
.bedragrij{display:flex; justify-content:space-between; gap:12px; font-size:14.5px; padding:7px 0; border-bottom:1px solid var(--line)}
.bedragrij > span:first-child{min-width:0}
.bedragrij .tnum{white-space:nowrap}
.bedragrij:last-child{border-bottom:0}
.bedragrij.totaal{border-bottom:0; border-top:1px solid var(--line-2); margin-top:4px; padding-top:12px; font-weight:500; color:var(--ink)}
.bedragrij.totaal .tnum{font-family:var(--f-kop); font-size:19px}
/* de feitenlijst en het verloop op de statuspagina */
.klant .kv{grid-template-columns:120px minmax(0,1fr); font-size:14px; gap:10px 12px}
.klant .kv dt{margin:0}
.klant .tijdlijn .stap b{font-size:14px}
.klant .tijdlijn .stap span{font-size:13px}
.klant .mededeling{font-size:14px}
.klant .laden{width:16px; height:16px}
/* kiezen van een ander artikel bij het omruilen */
.ruillijst{display:flex; flex-direction:column; gap:8px; max-height:460px; overflow-y:auto; padding:2px; border-radius:var(--r)}
.ruilkaart{display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-s); transition:border-color .12s, background .12s}
.ruilkaart:hover{border-color:var(--ink-2)}
.ruilkaart.aan{border-color:var(--brass-line); background:var(--brass-soft)}
.ruilkaart img{width:54px; height:54px; flex:none; object-fit:cover; border-radius:var(--r-s); border:1px solid var(--line); background:var(--surface-2)}
.ruilkaart .thumb{width:54px; height:54px; flex:none; border-radius:var(--r-s); font-family:var(--f-mono); font-size:10.5px; text-align:center; line-height:1.15; padding:4px; background:var(--brass-soft); border-color:var(--brass-line); color:var(--brass-ink)}
.ruilinfo{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.ruilinfo b{font-size:14px; line-height:1.3; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ruilsaldo{flex:none; font-size:14.5px; font-weight:500; font-family:var(--f-kop)}
/* het retourformulier (src/formulier.js): één A4, ook op een telefoon te lezen */
.vel{max-width:190mm; margin:0 auto; padding:22px 26px}
.vel .kop{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:18px}
.vel .kop .datum{font-size:12px; color:var(--muted); text-align:right}
.vel .nummer{font-size:40px; font-weight:500; font-family:var(--f-kop); letter-spacing:-.01em; line-height:1; overflow-wrap:anywhere}
.vel .barcode{display:flex; align-items:stretch; height:56px; margin:14px 0 4px; overflow:hidden}
/* Niet laten krimpen: een flexregel mag de balken smaller maken en dan leest geen scanner hem meer. */
.vel .barcode i{display:block; height:100%; flex:0 0 auto}
.vel .code{font-family:var(--f-mono); font-size:12px; letter-spacing:.24em; color:var(--muted)}
.vel table{width:100%; border-collapse:collapse; margin-top:18px}
.vel th{width:150px; text-align:left; font-weight:400; color:var(--muted); font-size:13px; padding:6px 12px 6px 0; vertical-align:top}
.vel td{padding:6px 0; vertical-align:top; font-size:15px; overflow-wrap:anywhere}
.vel .doen{margin-top:18px; border:2px solid var(--ink); border-radius:var(--r-s); padding:14px 16px}
.vel .doen h2{margin:0 0 6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-family:var(--f-tekst); font-weight:500}
.vel .doen p{margin:0 0 4px; font-size:15px}
/* Alleen het blok onderaan het vel krijgt een lijn erboven, niet het woord Retourformulier in de kop. */
.vel > .uitleg{margin-top:16px; padding-top:12px; border-top:1px solid var(--line)}
.printbalk{display:flex; justify-content:center}
@media (max-width:767px){
  .klant-inhoud{padding:16px 16px 48px; gap:14px}
  .klant .kaart.pad{padding:16px}
  .klant .kaart > .kaart-body:first-child{padding-top:16px}
  .artikelrij{padding:14px 16px; gap:12px}
  .klant .optie{padding:12px 14px}
  .uploads{grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px}
  .vel{padding:16px}
  .vel th{width:110px}
  .vel .nummer{font-size:30px}
}
@media (max-width:479px){
  .knoppen.onder .knop:not(.rustig){flex:1 1 auto}
}
@media print{
  .klant-kop,.printbalk{display:none}
  body.klant{background:#fff}
  .klant-inhoud{padding:0; max-width:none}
  .vel{border:0; box-shadow:none; margin:0; padding:0; max-width:none; border-radius:0}
}

/* Orderhistorie (Inbox > TOV > Per order, 13-10-2026): de tijdlijn per order. */
.tl-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tl-regel{display:grid;grid-template-columns:70px max-content 1fr;gap:4px 10px;align-items:start;font-size:14px;line-height:1.45}
.tl-regel>span:last-child{min-width:0;overflow-wrap:anywhere}
.tov-order-kop h2{font-size:18px;margin:0 0 6px}
@media (max-width:640px){.tl-regel{grid-template-columns:auto 1fr}.tl-regel>span:last-child{grid-column:1/-1}}

/* ------------------------------------------------------------
   13. Bento (besluit Enes 17-10-2026)
   Herbruikbare bouwstenen voor de nieuwe kantoorpagina's; de snelgids staat
   bovenaan dit bestand. Alleen het kantoor: de klant (body.klant) gebruikt
   deze klassen niet, en de tokens van de klant zetten de animaties en het
   optillen uit (--kaart-til 0, --knop-indruk 1).
   ------------------------------------------------------------ */

/* het menu: onderdelen uitgeklapt en ingesprongen onder hun hoofditem (public/menu.js) */
.menu-sub{display:flex; flex-direction:column; gap:1px; margin:2px 0 8px 23px; padding-left:8px; border-left:1px solid var(--line-2)}
.menu-sub[hidden]{display:none}
/* Inklappen per hoofditem (17-10-2026) */
.menu .menu-kop{display:flex; align-items:center; gap:2px; min-width:0}
.menu .menu-kop > a,.menu .menu-kop > .menu-item{flex:1; min-width:0}
.menu-klap{flex:none; width:30px; height:30px; display:grid; place-items:center; border:0; background:transparent; border-radius:10px; color:var(--muted); cursor:pointer; padding:0}
.menu-klap:hover{background:var(--surface-3); color:var(--ink)}
.menu-klap:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.menu .menu-klap .ico{width:16px; height:16px; color:currentColor; transition:transform .2s}
.menu-klap[aria-expanded="false"] .ico{transform:rotate(-90deg)}
.menu .menu-sub a{height:32px; padding:0 12px; font-size:13px; font-weight:400; color:var(--muted)}
.menu .menu-sub a:hover{color:var(--ink)}
.menu .menu-sub a.actief{color:var(--on-brand); font-weight:500}
.menu .menu-sub .badge{height:18px; min-width:20px; font-size:10.5px; padding:0 6px}

/* kaarten tillen bij hover (niet in vensters, niet tijdens typen, niet .vast) */
a.kaart:hover,button.kaart:hover,.kaart.kpi-tegel:hover,.kaart.tegel:hover,.kaart.til:hover,
.bento > .kaart:not(.vast):not(:focus-within):hover,.raster > .kaart:not(.vast):not(:focus-within):hover,
.kpis > .kaart:hover,.tegels > .kaart:hover{transform:translateY(var(--kaart-til)); box-shadow:var(--shadow-2)}
.venster .kaart:hover,.inlog .kaart:hover{transform:none}
.kaart.pad{padding:22px 24px}
@media (max-width:767px){ .kaart.pad{padding:16px 18px} }

/* de donkere accentkaart */
.kaart.donker{background:var(--donker-bg); color:var(--donker-ink); box-shadow:0 14px 34px rgba(30,27,23,.22)}
.kaart.donker h1,.kaart.donker h2,.kaart.donker h3,.kaart.donker b{color:var(--donker-ink)}
.kaart.donker .sub,.kaart.donker .stil,.kaart.donker .kpi-label,.kaart.donker .kpi-sub,.kaart.donker .klein-tekst{color:var(--donker-stil)}
.kaart.donker .kaart-voet{border-top-color:var(--donker-lijn); color:var(--donker-stil)}
.kaart.donker .schakel,.kaart.donker .accent{color:var(--donker-accent)}
.kaart.donker .kpi-groot,.kaart.donker .meter > *{color:var(--donker-ink)}
.kaart.donker .voortgang{background:var(--donker-lijn)}
.kaart.donker .voortgang > i{background:var(--donker-accent)}
.kaart.donker .voortgang > span{color:#1E1B17}
.kaart.donker .balk{background:var(--donker-lijn)}
.kaart.donker .balk > i{background:var(--donker-accent)}
.kaart.donker .knop{background:var(--donker-accent); color:#1E1B17}
.kaart.donker .knop.secundair{background:transparent; color:var(--donker-ink); border-color:var(--donker-lijn)}
.kaart.donker .lijst > li{border-bottom-color:var(--donker-lijn)}

/* raster: 12 kolommen (zelfde gedrag als .raster) */
.bento{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; align-items:start}
.bento.rekken{align-items:stretch}
.b2{grid-column:span 2} .b3{grid-column:span 3} .b4{grid-column:span 4} .b5{grid-column:span 5} .b6{grid-column:span 6}
.b7{grid-column:span 7} .b8{grid-column:span 8} .b9{grid-column:span 9} .b12{grid-column:span 12}
.rij2{grid-row:span 2}
@media (max-width:1023px){ .b2,.b3{grid-column:span 4} .b4,.b5,.b7,.b8,.b9{grid-column:span 6} .rij2{grid-row:auto} }
@media (max-width:767px){ .bento{gap:14px} .b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9{grid-column:span 12} }
.stapel-r{display:flex; flex-direction:column; gap:20px; min-width:0}
.spreid-r{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* grote kerncijfers: dun en groot */
.kpi-label{font-size:12.5px; color:var(--muted); font-weight:500}
.kpi-groot{font-family:var(--f-kop); font-weight:300; font-size:54px; line-height:1; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.kpi-groot.m{font-size:44px}
.kpi-groot small{font-size:.42em; font-weight:400; color:var(--muted); letter-spacing:0; margin-left:4px}
.kpi-sub{font-size:12.5px; color:var(--muted); margin-top:6px}
@media (max-width:767px){ .kpi-groot{font-size:40px} .kpi-groot.m{font-size:34px} }

/* pillen: status en kanaal (naast de bestaande .chip) */
.pil{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; background:var(--neutraal-soft); color:var(--neutraal-ink); vertical-align:middle; line-height:1}
.pil .ico{width:13px; height:13px}
.pil.goed{background:var(--ok-soft); color:var(--ok-ink)}
.pil.let{background:var(--warn-soft); color:var(--warn-ink)}
.pil.fout{background:var(--crit-soft); color:var(--crit-ink)}
.pil.neutraal{background:var(--neutraal-soft); color:var(--neutraal-ink)}
.pil.paars{background:var(--paars-soft); color:var(--paars-ink)}
.pil.accent{background:var(--brass-soft); color:var(--brass-ink)}
.pil.mail{background:var(--k-mail-soft); color:var(--k-mail-ink)}
.pil.whatsapp{background:var(--k-wa-soft); color:var(--k-wa-ink)}
.pil.telefoon{background:var(--k-tel-soft); color:var(--k-tel-ink)}
.pil.instagram{background:var(--k-ig-soft); color:var(--k-ig-ink)}
.pil.facebook{background:var(--k-fb-soft); color:var(--k-fb-ink)}
.pil.punt::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.pil.klein{height:22px; padding:0 9px; font-size:11.5px}

/* losse filterpil (bijv. een rij filters zonder segment) */
.filterpil{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:var(--r-knop); background:var(--kaart-bg); color:var(--ink-2); font-size:13px; font-weight:500; box-shadow:var(--shadow); transition:background .15s, color .15s, transform .12s; white-space:nowrap}
.filterpil:hover{color:var(--ink)}
.filterpil:active{transform:scale(var(--knop-indruk))}
.filterpil[aria-pressed="true"],.filterpil.actief{background:var(--brand); color:var(--on-brand)}
.filterpillen{display:flex; gap:8px; flex-wrap:wrap}

/* schakelaar: een checkbox als aan/uit-pil (input type=checkbox role=switch class=schakelaar) */
.schakelaar{appearance:none; -webkit-appearance:none; position:relative; width:42px; height:24px; margin:0; border-radius:99px; background:var(--line-2); cursor:pointer; flex:none; transition:background .2s}
.schakelaar::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(30,27,23,.25); transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.schakelaar:checked{background:var(--brand)}
.schakelaar:checked::after{transform:translateX(18px); background:var(--on-brand)}
.schakelaar:disabled{opacity:.45; cursor:not-allowed}
.schakelaar:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* Rechten: wat staat er in het menu, per medewerker (public/start.js menuKaart) */
.menu-personen{display:flex; flex-direction:column; gap:10px}
.menu-persoon{border-radius:var(--r); background:var(--surface-2)}
.menu-persoon > summary{display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 16px; cursor:pointer; list-style:none; border-radius:var(--r)}
.menu-persoon > summary::-webkit-details-marker{display:none}
.menu-persoon > summary .ruimte{flex:1}
.menu-persoon > summary > .ico{color:var(--muted); transition:transform .2s}
.menu-persoon[open] > summary > .ico{transform:rotate(180deg)}
.menu-persoon[data-uit] > summary b{color:var(--muted)}
.menu-groepen{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px 22px; padding:6px 16px 18px}
.menu-groep{display:flex; flex-direction:column; gap:2px}
.menu-schakel{display:flex; align-items:center; gap:10px; min-height:36px; font-size:13px; color:var(--ink-2); padding-left:18px; cursor:pointer}
.menu-schakel.hoofd{padding-left:0; font-weight:600; color:var(--ink); font-size:13.5px}
.menu-schakel.uit{cursor:default}
.menu-schakel .stil{font-size:11.5px; margin-left:auto}
.menu-schakel .schakelaar{transform:scale(.86); transform-origin:left center; margin-right:-4px}
@media (prefers-reduced-motion: reduce){ .schakelaar,.schakelaar::after,.menu-persoon > summary > .ico{transition:none} }

/* balken: pil van 10px die vanaf links volloopt */
.balk{position:relative; height:10px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.balk > i{position:absolute; inset:0 auto 0 0; width:var(--w, 0%); max-width:100%; border-radius:inherit; background:var(--goud); transform-origin:left center; animation:hs-vol .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 70ms + 120ms)}
.balk.groen > i{background:var(--ok)} .balk.rood > i{background:var(--crit)} .balk.donker > i{background:var(--ink)} .balk.paars > i{background:var(--paars-ink)}
.balk.dik{height:14px}
.balkregel{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:center; font-size:13px}
.balkregel .balk{grid-column:1 / -1}
.balkregel .num{font-variant-numeric:tabular-nums; color:var(--ink-2)}
/* voortgang: pil van 30px met het percentage erin */
.voortgang{position:relative; height:30px; border-radius:99px; background:var(--surface-3); overflow:hidden; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums}
.voortgang > i{position:absolute; inset:0 auto 0 0; width:var(--w, 0%); max-width:100%; border-radius:inherit; background:var(--goud); transform-origin:left center; animation:hs-vol 1s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 70ms + 120ms)}
.voortgang > span{position:relative; z-index:1; display:flex; align-items:center; height:100%; padding:0 12px; color:var(--ink)}
.voortgang.donker > i{background:var(--ink)} .voortgang.donker > span{color:var(--on-brand); mix-blend-mode:normal}
@keyframes hs-vol{from{transform:scaleX(0)}}

/* ronde meter: --p van 0 tot 100, loopt vol */
@property --p{syntax:"<number>"; inherits:true; initial-value:0}
.meter{--p:0; --dik:12px; --maat:132px; position:relative; width:var(--maat); aspect-ratio:1; border-radius:50%; display:inline-grid; place-items:center;
  background:conic-gradient(var(--meter-kleur, var(--goud)) calc(var(--p) * 1%), var(--surface-3) 0);
  animation:hs-meter 1.2s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 70ms + 150ms)}
.meter::before{content:""; position:absolute; inset:var(--dik); border-radius:50%; background:var(--surface)}
.kaart.donker .meter::before{background:var(--donker-bg)}
.meter > *{position:relative; z-index:1; font-family:var(--f-kop); font-weight:300; font-size:30px; font-variant-numeric:tabular-nums; line-height:1; text-align:center}
.meter.klein{--maat:84px; --dik:9px} .meter.klein > *{font-size:20px}
@keyframes hs-meter{from{--p:0}}

/* lijsten met zachte lijnen */
.lijst{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.lijst > li{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); min-width:0}
.lijst > li:last-child{border-bottom:0}
.lijst .groei{flex:1; min-width:0}
.lijst .groei b{display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lijst .groei span{font-size:12px; color:var(--muted)}
.lijst.anim > li{animation:hs-rij .45s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 45ms + 100ms)}
@keyframes hs-rij{from{opacity:0; transform:translateX(-12px)}}

/* binnenkomen: één voor één (fade + 18px omhoog); --i zet Huisstijl.animeer() */
.anim-in,.anim-gespreid > *{animation:hs-in .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 70ms)}
@keyframes hs-in{from{opacity:0; transform:translateY(18px)}}
body.klant .anim-in,body.klant .anim-gespreid > *{animation:none}

@media (prefers-reduced-motion: reduce){
  .kaart,.knop,.menu a,.iknop,.filterpil,.segment button,.segment a{transition:none !important}
  .kaart:hover,a.kaart:hover,.kaart.til:hover,.bento > .kaart:hover,.raster > .kaart:hover,.kpis > .kaart:hover,.tegels > .kaart:hover{transform:none !important}
  .knop:active,.menu a:active,.iknop:active,.filterpil:active{transform:none !important}
  .anim-in,.anim-gespreid > *,.lijst.anim > li,.balk > i,.voortgang > i,.meter{animation:none !important}
}

/* ---------- Team per dag (inbox.js tekenTeamPerDag) ---------- */
.tpd-knoppen{display:flex; gap:8px; flex-wrap:wrap}
.tpd-tabel{font-variant-numeric:tabular-nums}
.tpd-tabel th,.tpd-tabel td{padding:8px 10px; text-align:center; white-space:nowrap}
.tpd-tabel .tpd-wie{text-align:left; position:sticky; left:0; z-index:2; background:var(--surface); font-weight:500; color:var(--ink); text-transform:none; letter-spacing:normal; font-size:13px}
.tpd-tabel thead .tpd-wie{background:var(--surface-2); z-index:3}
.tpd-dag span{display:block; font-size:12px; font-weight:600; color:var(--ink)}
.tpd-dag small{display:block; font-size:9.5px; color:var(--muted); text-transform:lowercase; letter-spacing:0}
.tpd-cel{color:var(--ink); font-size:13px; min-width:30px}
.tpd-cel.tpd-vol{font-weight:600}
.tpd-nul{color:var(--muted); opacity:.5}
.tpd-weekend{background:var(--surface-2)}
.tpd-tot{font-weight:700; border-left:1px solid var(--line)}
.tpd-voet{border-top:2px solid var(--line); font-weight:700}
.tpd-tabel tfoot .tpd-wie{border-top:2px solid var(--line)}
.tpd-leeg,.tpd-legenda{color:var(--muted)}
.tpd-legenda{margin-top:12px; font-size:12px}
.tabel-schuif{overflow-x:auto}
.alle-orders td{vertical-align:top}
.alle-orders tr[data-tov]{cursor:pointer}
.alle-orders tr[data-tov]:hover td{background:var(--surface-2)}
.alle-actie{margin:0 0 4px}
.alle-actie .chip{margin-right:4px}
@media (max-width:760px){.alle-orders th:nth-child(4),.alle-orders td:nth-child(4),.alle-orders th:nth-child(6),.alle-orders td:nth-child(6){display:none}.alle-orders td,.alle-orders th{padding:10px 12px}}
.tov-ai{font-size:14px;line-height:1.55}
.tov-ai b{display:inline-block;margin-top:6px}
.tpd-vandaag{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.tpd-vrij{display:grid; grid-template-columns:150px auto 1fr; align-items:baseline; gap:4px 16px; padding:11px 0; border-bottom:1px solid var(--line)}
.tpd-vrij:last-child{border-bottom:0}
.tpd-vnaam{font-weight:600; color:var(--ink)}
.tpd-vgetal{font-size:20px; font-weight:700; color:var(--ink); white-space:nowrap}
.tpd-vgetal small{font-size:11px; font-weight:500; color:var(--muted); margin-left:5px}
.tpd-vmeta{color:var(--muted); font-size:12.5px}
.tpd-tabel .tpd-gem{border-left:0; color:var(--ink-2)}
@media (max-width:640px){.tpd-vrij{grid-template-columns:1fr auto; row-gap:3px} .tpd-vmeta{grid-column:1 / -1}}
/* Team per dag: per medewerker (13-10-2026) */
.tpd-mensen{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.tpd-mens{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.tpd-mens h3{margin:0;font-size:16px}
.tpd-mens-cijfers{display:flex;flex-direction:column;gap:4px}
.tpd-mens-cijfers b{font-size:20px}
.tpd-mens-cijfers .label{display:inline-block;min-width:110px}
.tpd-lijst{margin:6px 0 0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:3px}
#tpd-dagkeuze{margin-left:8px;height:30px}
td[data-team-dag]{cursor:pointer}
.tpd-doelen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:12px}
.tpd-doel{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.tpd-doel.gehaald{border-color:var(--ok-line);background:var(--ok-soft)}
.tpd-doel.niet{border-color:var(--crit-line);background:var(--crit-soft)}
.tpd-doel-kop{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.tpd-doelform{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.tpd-doelform .invoer{width:130px}
.tpd-balk{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:6px}
.tpd-balk i{display:block;height:100%;background:var(--warn)}
.tpd-balk i.gehaald{background:var(--ok)}
.tpd-doelstand{display:flex;flex-direction:column;gap:2px}
/* Instagram/Facebook in de Inbox (14-10-2026): profielfoto en het gesprek als chat, zoals in de app. */
.avatar.met-foto{position:relative; overflow:hidden}
.avatar.met-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%}
.ib-chat{display:flex; gap:8px; align-items:flex-end; margin:4px 0; max-width:100%}
.ib-chat.uit{justify-content:flex-end}
.ib-chat__kolom{display:flex; flex-direction:column; gap:3px; max-width:min(75%, 520px); min-width:0}
.ib-chat.uit .ib-chat__kolom{align-items:flex-end}
.ib-chat__bel{background:var(--surface-2); border:1px solid var(--line); border-radius:18px 18px 18px 4px; padding:9px 13px; font-size:13px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; display:flex; flex-direction:column; gap:6px}
.ib-chat.uit .ib-chat__bel{background:var(--brass-soft); border-color:var(--brass-line, var(--line)); border-radius:18px 18px 4px 18px}
.ib-chat__bel p{margin:0}
.ib-chat__beeld{display:block; max-width:240px; max-height:320px; width:auto; border-radius:12px; object-fit:cover; background:var(--surface-3)}
.ib-chat__kaart{display:inline-flex; align-items:center; gap:6px; font-size:12px; text-decoration:none; color:var(--ink-2)}
.ib-chat__onder{font-size:11px; color:var(--muted); padding:0 4px}
.ib-chat .ib-translate{max-width:100%}

/* Inbox · kopje Reviews (Trustpilot en Google, 15-10-2026) */
.rv-sterren{letter-spacing:1px; margin-right:6px; font-size:12px}
.rv-lijst{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13.5px}
.rv-notities{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:13.5px}
.rv-notities li{padding:8px 10px; border-left:3px solid var(--brass-line); background:var(--bg); border-radius:0 6px 6px 0; white-space:pre-wrap}
.rv-kandidaat{border-top:1px solid var(--line); padding:12px 0 4px; display:flex; flex-direction:column; gap:6px; font-size:13px; min-width:0; overflow-wrap:anywhere}
.rv-kandidaat:first-of-type{border-top:0}
.rv-kandidaat .label{display:block; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}

/* Geschillen (16-10-2026): zinnen uit een klantmail die als bewijs bruikbaar zijn, en de zaak waar je vanuit de Inbox heen sprong. */
.bewijs-zin{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:6px 0; padding:8px 10px; border:1px solid var(--ok-line); background:var(--ok-soft); border-radius:var(--r-s); font-size:13px; min-width:0; overflow-wrap:anywhere}
.bewijs-zin > span{min-width:0; flex:1 1 200px}
.geschil-focus{outline:2px solid var(--focus); outline-offset:3px}
.ib-geschil{border-color:var(--crit-line); background:var(--crit-soft)}