/* ============================================================
Studiomeen · huisstijl van het kantoor (stijl D, besluit Enes 11-10-2026)
Beheerdersdashboard: zijbalk links met logo en menu, bovenbalk met
zoekveld, KPI-tegels, witte kaarten op een licht warm grijs vlak.
Letters van de webshop: Jost (koppen) en Poppins (tekst). Zwart, warm
grijs, één accent in brons/messing. Licht en donker.
Welke klasse waarvoor: zie public/HUISSTIJL.md.
Iconen: public/iconen.svg →
============================================================ */
/* ------------------------------------------------------------
1. Tokens
------------------------------------------------------------ */
:root{
/* vlakken */
--bg:#F3F2F0; /* pagina, licht warm grijs */
--surface:#FFFFFF; /* kaart, zijbalk, bovenbalk */
--surface-2:#F8F7F5; /* verzonken vlak, tabelkop, hover */
--surface-3:#ECEAE6; /* balkspoor, placeholder-foto */
--line:#E7E5E1; /* zachte rand */
--line-2:#D3CFC8; /* sterkere rand (invoervelden) */
/* tekst */
--ink:#1C1C1C;
--ink-2:#5C5C5C; /* 6,7:1 op wit */
--muted:#6E6B66; /* 5,1:1 op wit */
/* merk */
--brand:#1C1C1C; /* primaire knop = zwart, zoals de webshop */
--on-brand:#FFFFFF;
--brand-hover:#333333;
--brass:#8A6531; /* accent brons/messing, 5,2:1 op wit */
--brass-ink:#6B4C21; /* bronzen tekst op beige, 6,3:1 */
--brass-soft:#F1E7D7; /* actieve menuregel */
--brass-line:#E3CFAD;
/* betekenis: kleur voor stippen/balken, -ink voor tekst (AA) */
--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;
/* vorm */
--r:12px; --r-s:8px; --r-l:14px;
--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);
/* 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:250px;
--bovenbalk-hoogte:70px;
--onderbalk-hoogte:64px;
color-scheme:light;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#141414; --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);
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#141414; --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);
color-scheme:dark;
}
/* ------------------------------------------------------------
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);
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:var(--zijbalk-breedte) minmax(0,1fr); min-height:100vh; min-height:100dvh}
.app-shell > .hoofd{display:flex; flex-direction:column; min-width:0}
.zijbalk{
position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto;
background:var(--surface); border-right:1px solid var(--line);
display:flex; flex-direction:column; padding:22px 16px 20px; z-index:30;
}
.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 ![]()
, 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 12px; margin:30px 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:42px; padding:0 12px; border-radius:var(--r-s); color:var(--ink-2); font-weight:500; text-decoration:none; transition:background .12s, color .12s; font-size:14px; min-width:0}
.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-2); color:var(--ink)}
.menu a.actief{background:var(--brass-soft); color:var(--brass-ink)}
.menu a.actief .ico{color:var(--brass)}
.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}
.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:var(--brass-line); color:var(--brass-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}
.bovenbalk{
position:sticky; top:0; z-index:20; height:var(--bovenbalk-hoogte); flex:none;
background:var(--surface); border-bottom:1px solid var(--line);
display:flex; align-items:center; gap:12px; padding:0 24px;
}
.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:14px; color:var(--muted); pointer-events:none}
.zoek input{height:42px; width:100%; padding:0 76px 0 42px; border-radius:var(--r-s); border:1px solid var(--line-2); background:var(--surface-2); 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:10px; 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% + 6px); min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-2); padding:6px; 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:38px; padding:0 10px; border-radius:var(--r-s); 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:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); position:relative; transition:background .12s, color .12s; flex:none; text-decoration:none}
.iknop:hover{background:var(--surface-2); color:var(--ink)}
.iknop.vlak{border-color:transparent; background:transparent; width:32px; height:32px; border-radius:var(--r-s)}
.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:24px 28px 32px; 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(--surface); 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(--brass-ink)}
.onderbalk .actief .ico{color:var(--brass)}
.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:0; left:0; bottom:0; width:min(var(--zijbalk-breedte), 86vw); height:auto; transform:translateX(-105%); transition:transform .18s 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(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); min-width:0}
.kaart-kop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 0}
.kaart-kop h2{font-size:16px; color:var(--ink)}
.kaart-kop .sub{font-size:12.5px; color:var(--muted); margin-top:2px}
.kaart-body{padding:14px 20px 20px}
.kaart-body.strak{padding:0}
.kaart-voet{padding:12px 20px 16px; 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-style:dashed}
.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:14px 16px 0}
.kaart-body{padding:10px 16px 14px}
.kaart-voet{padding:10px 16px 14px}
}
/* 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:18px 20px 16px; display:flex; flex-direction:column; gap:10px; position:relative; color:inherit; text-decoration:none}
a.kpi-tegel:hover{border-color:var(--line-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:38px; height:38px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; flex:none}
.kpi-tegel .ikoon.brons{background:var(--brass-soft); border-color:var(--brass-line); color:var(--brass-ink)}
.kpi-tegel .ikoon.rood{background:var(--crit-soft); border-color:var(--crit-line); color:var(--crit-ink)}
.kpi-tegel .cijfer{font-family:var(--f-kop); font-weight:500; font-size:32px; line-height:1; letter-spacing:-.01em; 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:26px}
.kpi-tegel .naam{font-size:12px}
.kpi-tegel .ikoon{width:30px; height:30px; border-radius:8px}
.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:112px; padding:16px 18px; color:inherit; text-decoration:none; transition:border-color .12s}
a.tegel:hover{border-color:var(--brass-line)}
.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:34px; height:34px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; flex:none}
.tegel .cijfer{font-family:var(--f-kop); font-size:26px; font-weight:500; 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 9px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); vertical-align:middle}
.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:var(--ok-line)}
.chip.af::before,.chip.goed::before{background:var(--ok)}
.chip.bezig{background:var(--warn-soft); color:var(--warn-ink); border-color:var(--warn-line)}
.chip.bezig::before{background:var(--warn)}
.chip.tedoen{background:var(--surface-2); color:var(--ink-2); border-color:var(--line)}
.chip.open{background:var(--brass-soft); color:var(--brass-ink); 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: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 20px; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); white-space:nowrap}
.tabel td{padding:12px 20px; border-bottom:1px solid var(--line); vertical-align:middle}
.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:38px; padding:0 16px; border-radius:var(--r-s); 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 .12s, border-color .12s, color .12s;
}
.knop:hover{background:var(--brand-hover)}
.knop.secundair{background:var(--surface); 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:32px; padding:0 12px; font-size:12.5px}
.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(--surface-2); border:1px solid var(--line); border-radius:var(--r-s); padding:3px; 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:28px; padding:0 12px; border-radius:6px; font-size:12.5px; font-weight:500; color:var(--ink-2); transition:background .12s, color .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 .actief{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(28,28,28,.08); 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:40px; width:100%; padding:0 12px; border-radius:var(--r-s); 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:10px 12px; resize:vertical; line-height:1.45}
select.invoer{padding-right:32px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); 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:12px 14px; border-radius:var(--r-s); border:1px solid var(--line); background:var(--surface-2); font-size:13.5px; color:var(--ink-2)}
.mededeling.let-op{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn-ink)}
.mededeling.fout{background:var(--crit-soft); border-color:var(--crit-line); color:var(--crit-ink)}
.mededeling.goed{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok-ink)}
.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:400px; padding:28px 24px}
.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 (tablet, telefoon, of een ander scherm) scrolt de pagina als geheel;
het gesprek heeft dan geen eigen scrollvak. */
.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)}
.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}
.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}
.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}
.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}
.tov-tabs{align-self:flex-start}
.tov-tijdlijn{list-style:none; padding:0; margin:8px 0; display:grid; gap:10px}
.tov-tijdlijn li{border-left:3px solid var(--line-2); padding-left:10px; font-size:13px}
.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}
.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}
.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))}
}
/* --- 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}
/* tabs Gesprek · Voorstel · Order boven het gesprek; de terugknop staat in die rij */
.inbox-raster[data-pane="ticket"] .tel-tabs{display:flex; align-items:center; gap:8px}
.tel-tabs .segment{flex:1}
.tel-tabs .segment button{flex:1}
.gesprek-kop .terugknop{display:none}
.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}
.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)}
.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{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 1px var(--brass) 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:20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-2)}
.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)}
.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 22px; border-radius:var(--r)}
.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}
}