/* KTM Voyage CRM — shared component stylesheet [UX2].
   Herbruikbare bouwstenen die op ELKE module passen: command palette, popovers,
   drawers, bulk-bar, segmented control, filterchips, stat-tegels, audit-trail,
   empty states v2, inline edit, meters, toolbar v2, split view, kaartlijsten,
   avatars, skeletons. Module-specifieke styling blijft in css/<module>.css.

   Huisregels voor dit bestand:
   - Consumeert ALLEEN tokens uit tokens.css/base.css. Hier wordt nooit een token
     gedefinieerd of overschreven — anders vecht dit bestand met de theme-switch en
     krijg je licht/donker-lekken die pas bij de klant zichtbaar worden.
   - Kleuren worden met color-mix() uit die tokens afgeleid in plaats van met een
     tweede @media-blok herhaald. Zo volgt elke tint automatisch het thema en kan
     er geen dark-variant vergeten worden.
   - Geen `content:"tekst"`. Elke zichtbare string hoort via t() uit de JS te komen;
     CSS-content is niet vertaalbaar. Pseudo-elementen zijn hier puur decoratief.
   - Geen emoji en geen pijl-glyphs. Chevrons, vinkjes en kruisjes worden met randen
     en transforms getekend; echte iconen komen uit icons.js (icon('name')).
   - Alles moet leesbaar en bedienbaar zijn op 390px breed, met 44px tikdoelen op
     touch. Vasko en Jasminka werken deels op de telefoon. */

/* ---------- COMMAND PALETTE ---------- */
.cmdk-scrim{position:fixed;inset:0;z-index:calc(var(--z-modal) + 20);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:color-mix(in srgb,var(--side-bg) 55%,transparent);backdrop-filter:blur(2px);overscroll-behavior:contain}
.cmdk{width:100%;max-width:640px;max-height:min(70vh,560px);display:flex;flex-direction:column;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);overflow:hidden;animation:ktmcmdk .16s ease-out}
@keyframes ktmcmdk{from{transform:translateY(-10px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.cmdk-search{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
.cmdk-ic{flex:0 0 auto;display:inline-flex;color:var(--text-faint)}
.cmdk-ic svg{width:18px;height:18px}
/* 16px voorkomt dat iOS bij focus inzoomt op het hele paneel */
.cmdk-input{flex:1;min-width:0;padding:6px 0;border:none;background:none;outline:none;font-family:inherit;font-size:16px;color:var(--text)}
.cmdk-input::placeholder{color:var(--text-faint)}
.cmdk-input::-webkit-search-cancel-button{-webkit-appearance:none}
.cmdk-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-2);scrollbar-width:thin}
.cmdk-group+.cmdk-group{margin-top:var(--sp-2);border-top:1px solid var(--border);padding-top:var(--sp-2)}
.cmdk-gh{padding:6px 10px 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.cmdk-item{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:1px var(--sp-3);width:100%;padding:9px 10px;border:none;background:none;border-radius:var(--radius-sm);text-align:left;color:var(--text);font:inherit;cursor:pointer}
.cmdk-item-ic{grid-column:1;grid-row:1 / -1;display:inline-flex;justify-content:center;color:var(--text-muted)}
.cmdk-item-ic svg{width:16px;height:16px}
.cmdk-t{grid-column:2;grid-row:1;font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-s{grid-column:2;grid-row:2;font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-hint{grid-column:3;grid-row:1 / -1;align-self:center;flex:0 0 auto}
/* .on = toetsenbordcursor, :hover = muis. Beide dezelfde markering, anders raakt
   de gebruiker het spoor bijster zodra hij van pijltjes naar muis wisselt. */
.cmdk-item:hover,.cmdk-item.on{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.cmdk-item.on .cmdk-item-ic,.cmdk-item:hover .cmdk-item-ic{color:var(--accent)}
.cmdk-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cmdk-empty{padding:32px 18px;text-align:center;color:var(--text-muted);font-size:13.5px}
.cmdk-foot{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:9px var(--sp-4);border-top:1px solid var(--border);background:var(--bg-2);font-size:11.5px;color:var(--text-faint)}
.cmdk-foot span{display:inline-flex;align-items:center;gap:5px}
.cmdk-foot .spacer{flex:1}

/* ---------- POPOVER / USER MENU ---------- */
/* De anker-elementen (avatarknop, "meer"-knop) zetten zelf position:relative. */
.pop{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-drop);min-width:216px;max-width:min(320px,calc(100vw - 24px));padding:6px;background:var(--surface-3);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-3);animation:ktmpopin .12s ease-out}
@keyframes ktmpopin{from{transform:translateY(-4px);opacity:0}to{transform:none;opacity:1}}
.pop-right{left:auto;right:0}
.pop-up{top:auto;bottom:calc(100% + 6px)}
.pop-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;padding:9px 10px 11px;margin:-6px -6px 5px;border-bottom:1px solid var(--border);background:var(--surface-accent);border-radius:8px 8px 0 0}
.pop-head .av{grid-row:1 / -1}
.pop-head b{grid-column:2;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-head small{grid-column:2;font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-menu{list-style:none;margin:0;padding:0}
.pop-item{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:9px 11px;border:none;border-radius:var(--radius-sm);background:none;text-align:left;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer}
.pop-item:hover{background:var(--surface-2)}
.pop-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pop-item[disabled]{opacity:.5;cursor:not-allowed}
.pop-item .pi-ic{flex:0 0 auto;display:inline-flex;color:var(--text-muted)}
.pop-item .pi-ic svg{width:16px;height:16px}
.pop-item.danger{color:var(--bad)}
.pop-item.danger .pi-ic{color:var(--bad)}
.pop-item.danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.pop-item .pop-kbd{margin-left:auto;flex:0 0 auto}
/* aanvinkbaar item: vinkje met randen getekend, geen glyph */
.pop-item.on::after{content:"";flex:0 0 auto;width:11px;height:6px;margin-left:auto;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) translate(1px,-2px)}
/* submenu-pijl: idem, een gedraaid hoekje */
.pop-item.has-sub::after{content:"";flex:0 0 auto;width:6px;height:6px;margin-left:auto;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.45}
.pop-sep{height:1px;margin:5px 4px;border:none;background:var(--border)}
.pop-lbl{padding:8px 11px 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}

/* ---------- DRAWER / SIDE PANEL ---------- */
.drawer-scrim{position:fixed;inset:0;z-index:var(--z-modal);background:color-mix(in srgb,var(--side-bg) 48%,transparent);animation:ktmfadein .18s ease}
@keyframes ktmfadein{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-modal) + 1);width:min(var(--drawer-w,480px),100vw);display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-3);animation:ktmdrawer .22s cubic-bezier(.22,.8,.3,1)}
.drawer-wide{--drawer-w:720px}
.drawer-full{--drawer-w:96vw}
@keyframes ktmdrawer{from{transform:translateX(26px);opacity:.35}to{transform:none;opacity:1}}
.drawer-head{position:sticky;top:0;z-index:1;flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);background:var(--surface)}
.drawer-head h3{min-width:0;font-size:19px;overflow-wrap:anywhere}
.drawer-head .spacer{flex:1}
.drawer-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--text-muted)}
.drawer-x{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:6px;border:none;border-radius:var(--radius-sm);background:none;color:var(--text-muted);cursor:pointer}
.drawer-x:hover{background:var(--surface-2);color:var(--text)}
.drawer-x svg{width:16px;height:16px}
.drawer-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--sp-5)}
.drawer-foot{position:sticky;bottom:0;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
.drawer-foot .fnote{margin-right:auto;font-size:12.5px;color:var(--text-muted)}

/* ---------- BULK ACTION BAR ---------- */
/* Zweeft onder in beeld zodra er rijen aangevinkt zijn. Boven de pagina maar
   ONDER modals — anders staat hij over een bevestigingsdialoog heen die juist
   over diezelfde selectie gaat. */
.bulkbar{position:fixed;left:50%;bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));z-index:calc(var(--z-drop) + 10);transform:translateX(-50%);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;max-width:calc(100vw - 24px);margin:0;padding:10px 12px 10px 18px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:999px;background:var(--side-bg);color:#f2f4f8;box-shadow:var(--shadow-3);animation:ktmbulk .2s cubic-bezier(.22,.8,.3,1)}
@keyframes ktmbulk{from{transform:translate(-50%,14px);opacity:0}to{transform:translateX(-50%);opacity:1}}
.bulkbar .bb-count{margin-right:4px;font-weight:700;font-size:13.5px;color:var(--accent);white-space:nowrap}
.bulkbar .btn{min-height:38px;white-space:nowrap}
.bulkbar .btn-ghost{background:transparent;color:#e8e6dc;border-color:rgba(255,255,255,.25)}
.bulkbar .btn-ghost:hover{border-color:var(--accent);color:#fff}
.bulkbar .bb-cancel,.bulkbar .bb-clear{border-color:transparent;color:#c9cedb}
.bulkbar .bb-cancel:hover,.bulkbar .bb-clear:hover{background:rgba(255,255,255,.08);color:#fff}
.bulkbar .bb-sep{width:1px;align-self:stretch;margin:2px 4px;background:rgba(255,255,255,.16)}
/* Ontsnappingsluik voor lijsten die de balk liever in de flow houden. */
.bulkbar-static{position:static;transform:none;max-width:none;margin-top:var(--sp-4);animation:none}

/* ---------- SEGMENTED CONTROL ---------- */
/* JS zet --seg-n (aantal knoppen) en --seg-i (index van de actieve) op .seg.
   Zonder die twee staat de gouden indicator stil op positie 0 — gebruik dan
   .seg.no-slide, die kleurt de actieve knop zelf. */
.seg{position:relative;display:inline-flex;padding:3px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);max-width:100%;overflow:hidden}
.seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--seg-n,2));border-radius:calc(var(--radius) - 4px);background:var(--accent);box-shadow:var(--shadow-1);transform:translateX(calc(var(--seg-i,0) * 100%));transition:transform .22s cubic-bezier(.4,0,.2,1)}
.seg button{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:34px;padding:6px 14px;border:none;background:none;border-radius:calc(var(--radius) - 4px);font:inherit;font-size:13px;font-weight:700;color:var(--text-muted);white-space:nowrap;cursor:pointer;transition:color .18s ease}
.seg button:hover{color:var(--text)}
.seg button.on{color:var(--accent-ink)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg button .sg-ic{display:inline-flex;vertical-align:-3px;margin-right:6px}
.seg button .sg-ic svg{width:15px;height:15px}
.seg.no-slide::before{display:none}
.seg.no-slide button.on{background:var(--accent);color:var(--accent-ink)}
.seg-block{display:flex;width:100%}

/* ---------- FILTER CHIPS ---------- */
.fchips{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-3)}
.fchip{display:inline-flex;align-items:center;gap:7px;max-width:280px;padding:5px 6px 5px 12px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));border-radius:999px;background:var(--surface-accent);font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap}
.fchip .fc-k{color:var(--text-muted);font-weight:600}
.fchip .fc-v{overflow:hidden;text-overflow:ellipsis}
/* Kruisje uit twee gedraaide streepjes; het tikvlak is groter dan het beeldje. */
.fchip-x{position:relative;flex:0 0 auto;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--text) 8%,transparent);cursor:pointer}
.fchip-x::before,.fchip-x::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:1.5px;border-radius:1px;background:var(--text-muted)}
.fchip-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.fchip-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.fchip-x:hover{background:var(--bad)}
/* --bad-ink, niet #fff: in dark mode is --bad een lichte zalmkleur (#e58a70) en
   dan zakt een wit kruisje naar 2,56:1 — onder de 3:1 die een grafisch element
   nodig heeft. --bad-ink is wel themabewust (licht #fff, donker #1a1210 = 7,21:1)
   en is in light mode letterlijk dezelfde kleur, dus dit verandert daar niets. */
.fchip-x:hover::before,.fchip-x:hover::after{background:var(--bad-ink)}
.fchip-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fchip-add{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 13px;border:1px dashed var(--border-strong);border-radius:999px;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--text-muted);cursor:pointer}
.fchip-add:hover{border-color:var(--accent);border-style:solid;background:var(--surface-accent);color:var(--text-head)}
.fchip-add svg{width:14px;height:14px}
.fchips-clear{margin-left:auto;background:none;border:none;padding:4px 6px;font:inherit;font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer}
.fchips-clear:hover{color:var(--bad)}

/* ---------- STAT TILES ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-4)}
.stat{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:2px var(--sp-4);padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);transition:box-shadow .15s ease,border-color .15s ease}
a.stat:hover,.stat[data-action]:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:var(--shadow-2)}
/* data-tone kleurt ALLEEN de icoonbadge. Een volledig gekleurde tegel maakt een
   dashboard met vier tegels meteen onrustig en schreeuwerig. */
.stat-ic{grid-column:1;grid-row:1 / span 3;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.stat-ic svg{width:20px;height:20px}
.stat[data-tone=ok] .stat-ic{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.stat[data-tone=warn] .stat-ic{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--opt)}
.stat[data-tone=bad] .stat-ic{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.stat[data-tone=info] .stat-ic{background:color-mix(in srgb,var(--info) 15%,transparent);color:var(--info)}
.stat-val{grid-column:2;grid-row:1;font-family:"Playfair Display",Georgia,serif;font-size:30px;line-height:1.05;color:var(--text-head);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat-lbl{grid-column:2;grid-row:2;margin-top:5px;font-size:12.5px;color:var(--text-muted)}
.stat-delta{grid-column:2;grid-row:3;display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:12px;font-weight:700;color:var(--text-faint)}
/* Driehoekjes met randen getekend: geen pijl-glyph, geen emoji, schaalt mee. */
.stat-delta.up,.stat-delta.down{color:var(--ok)}
.stat-delta.down{color:var(--bad)}
.stat-delta.up::before,.stat-delta.down::before{content:"";width:0;height:0;border:4px solid transparent}
.stat-delta.up::before{border-bottom-color:currentColor;margin-bottom:3px}
.stat-delta.down::before{border-top-color:currentColor;margin-top:3px}
.stat-delta.flat{color:var(--text-faint)}
.stat-delta small{font-weight:600;color:var(--text-faint)}
.stat-spark{grid-column:1 / -1;grid-row:4;margin-top:var(--sp-4);height:38px;min-width:0}
.stat-spark svg{display:block;width:100%;height:100%;overflow:visible}

/* ---------- TIMELINE / AUDIT TRAIL ---------- */
.trail{list-style:none;margin:0;padding:0}
.trail-item{position:relative;padding:0 0 var(--sp-5) 38px}
.trail-item:last-child{padding-bottom:0}
/* De verbindingslijn tekent zichzelf, zodat de JS alleen inhoud hoeft te leveren.
   Wie de lijn expliciet in de markup zet (.trail-line) krijgt geen dubbele. */
.trail-item:not(:last-child)::before{content:"";position:absolute;left:12px;top:26px;bottom:2px;width:2px;border-radius:1px;background:var(--border)}
.trail-item:has(>.trail-line)::before{content:none}
.trail-line{position:absolute;left:12px;top:26px;bottom:2px;width:2px;border-radius:1px;background:var(--border)}
.trail-dot{position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-muted);box-shadow:0 0 0 3px var(--bg)}
.trail-dot svg{width:13px;height:13px}
.trail-item[data-tone=ok] .trail-dot{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}
.trail-item[data-tone=warn] .trail-dot{border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--opt)}
.trail-item[data-tone=bad] .trail-dot{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--bad)}
.trail-item[data-tone=accent] .trail-dot{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--accent-soft);color:var(--accent)}
.trail-t{font-size:13.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.trail-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px;font-size:12px;color:var(--text-muted)}
.trail-meta .tm-sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint)}
.trail-body{margin-top:6px;font-size:13px;color:var(--text-muted);overflow-wrap:anywhere}
.trail-diff{display:grid;grid-template-columns:auto 1fr;gap:4px var(--sp-3);margin-top:8px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);font-size:12.5px}
.trail-diff dt{color:var(--text-faint);font-weight:700}
.trail-diff dd{margin:0;min-width:0;overflow-wrap:anywhere}
.trail-diff .was{color:var(--text-faint);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 70%,transparent)}
.trail-diff .now{color:var(--ok);font-weight:700}

/* ---------- EMPTY STATES v2 ---------- */
.es2{max-width:560px;margin:var(--sp-7) auto;padding:var(--sp-8) var(--sp-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);text-align:center}
.es2-ic{display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;margin-bottom:var(--sp-5);border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.es2-ic svg{width:44px;height:44px}
.es2-title{font-family:"Playfair Display",Georgia,serif;font-size:21px;line-height:1.25;color:var(--text-head);margin-bottom:7px}
.es2-hint{max-width:44ch;margin:0 auto;font-size:14px;color:var(--text-muted);line-height:1.55}
.es2-acts{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
/* "Wat kun je hier doen" — drie regels, links uitgelijnd zodat ze te scannen zijn. */
.es2-list{list-style:none;max-width:38ch;margin:var(--sp-6) auto 0;padding:var(--sp-4) 0 0;border-top:1px solid var(--border);text-align:left}
.es2-list li{position:relative;padding:5px 0 5px 26px;font-size:13px;color:var(--text-muted)}
.es2-list li::before{content:"";position:absolute;left:4px;top:11px;width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* ---------- INLINE EDIT ---------- */
.iedit{position:relative;display:inline-flex;align-items:center;gap:6px;max-width:100%}
.iedit-val{display:inline-flex;align-items:center;gap:7px;min-height:26px;max-width:100%;padding:2px 7px;margin:-2px -7px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;font:inherit;color:inherit;text-align:left;cursor:text}
.iedit-val:hover{border-color:var(--border-strong);background:var(--surface-2)}
.iedit-val:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.iedit-val .ie-pen{flex:0 0 auto;display:inline-flex;color:var(--text-faint);opacity:0;transition:opacity .15s ease}
.iedit-val .ie-pen svg{width:13px;height:13px}
.iedit-val:hover .ie-pen,.iedit-val:focus-visible .ie-pen{opacity:1}
.iedit-val.empty{color:var(--text-faint);font-style:italic}
.iedit-input{min-width:0;width:100%;max-width:100%;min-height:32px;padding:5px 9px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--surface);font:inherit;font-size:13px;color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}
.iedit-input:focus{outline:none}
.iedit-input[type=number],.iedit-input.num{text-align:right;font-variant-numeric:tabular-nums}
.iedit-save,.iedit-cancel{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.iedit-save{border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
.iedit-save:hover{background:color-mix(in srgb,var(--ok) 14%,transparent)}
.iedit-cancel{color:var(--text-muted)}
.iedit-cancel:hover{background:var(--surface-2);color:var(--bad)}
.iedit-save svg,.iedit-cancel svg{width:14px;height:14px}
.iedit.is-busy{opacity:.6;pointer-events:none}
/* Zelfde reden als bij .fchip-x hierboven: op een --bad-vlak hoort --bad-ink.
   Wit op de donkere-modus-zalm haalt 2,56:1 en dit is 11,5px vette tekst, die
   4,5:1 nodig heeft; met --bad-ink wordt het 7,21:1. In light mode identiek. */
.iedit-err{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-drop);padding:4px 9px;border-radius:var(--radius-sm);background:var(--bad);color:var(--bad-ink);font-size:11.5px;font-weight:700;white-space:nowrap}

/* ---------- PROGRESS + METERS ---------- */
.meter-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:5px;font-size:12px;color:var(--text-muted)}
.meter-lbl b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.meter{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.meter-lg{height:12px}
/* De breedte komt als inline style uit de JS (percentage), niet uit CSS. */
.meter-bar{height:100%;border-radius:999px;background:var(--accent);transition:width .3s cubic-bezier(.4,0,.2,1)}
.meter[data-tone=ok] .meter-bar{background:var(--ok)}
.meter[data-tone=warn] .meter-bar{background:var(--warn)}
.meter[data-tone=bad] .meter-bar{background:var(--bad)}
.meter[data-tone=info] .meter-bar{background:var(--info)}
.meter-bar.over{background:repeating-linear-gradient(45deg,var(--bad),var(--bad) 6px,color-mix(in srgb,var(--bad) 62%,transparent) 6px,color-mix(in srgb,var(--bad) 62%,transparent) 12px)}
.prog-steps{display:flex;align-items:flex-start;gap:0;margin:var(--sp-4) 0}
.prog-step{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:11.5px;font-weight:700;color:var(--text-faint)}
/* De streep loopt van bol naar bol; hij begint pas bij de tweede stap. */
.prog-step:not(:first-child)::before{content:"";position:absolute;top:13px;right:50%;left:-50%;height:2px;background:var(--border)}
.prog-step.done::before,.prog-step.now::before{background:var(--accent)}
.prog-step .ps-dot{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:2px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-faint);font-size:12px;font-variant-numeric:tabular-nums}
.prog-step .ps-lbl{max-width:14ch;overflow-wrap:anywhere;line-height:1.3}
.prog-step.done{color:var(--text-muted)}
.prog-step.done .ps-dot{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-size:0}
.prog-step.done .ps-dot::after{content:"";width:10px;height:5px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg) translate(1px,-2px)}
.prog-step.now{color:var(--text-head)}
.prog-step.now .ps-dot{border-color:var(--accent);color:var(--text-head);box-shadow:0 0 0 4px var(--accent-soft)}

/* ---------- TOOLBAR v2 ---------- */
.tbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.tbar-group{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0}
.tbar-sep{width:1px;align-self:stretch;min-height:26px;margin:0 var(--sp-2);background:var(--border)}
.tbar-spacer{flex:1 1 auto;min-width:0}
.tbar-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
/* De "meer"-knop bestaat alleen op smalle schermen; de JS verhuist daar de
   .tbar-opt-acties naar een .pop. Boven 768px staat alles gewoon in de balk. */
.tbar-more{display:none}
.tbar-more-wrap{position:relative;display:none}

/* ---------- SPLIT VIEW ---------- */
.split{display:grid;grid-template-columns:minmax(260px,var(--split-w,340px)) 1fr;gap:var(--sp-5);align-items:start;min-width:0}
.split-list{min-width:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
.split-list-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);background:var(--bg-2)}
.split-list-body{max-height:min(72vh,720px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.split-detail{min-width:0}
.split-back{display:none}
.split-empty{display:grid;place-items:center;min-height:280px;padding:var(--sp-6);border:1px dashed var(--border);border-radius:var(--radius-lg);color:var(--text-muted);text-align:center}

/* ---------- CARD LIST (mobiele tabelvervanger) ---------- */
.clist{display:flex;flex-direction:column;gap:var(--sp-3)}
.citem{display:grid;grid-template-columns:1fr auto;gap:4px var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1);text-align:left;font:inherit;color:var(--text);width:100%}
a.citem,button.citem,.citem[data-action]{cursor:pointer}
a.citem:hover,button.citem:hover,.citem[data-action]:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:var(--shadow-2)}
.citem:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.citem-main{grid-column:1;min-width:0}
.citem-main b{display:block;font-size:14px;color:var(--text);overflow-wrap:anywhere}
.citem-side{grid-column:2;grid-row:1 / -1;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;text-align:right;white-space:nowrap}
.citem-side .amount{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-head)}
.citem-meta{grid-column:1;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:3px;font-size:12px;color:var(--text-muted)}
.citem-meta .cm-sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);flex:0 0 auto}
.citem-meta .cm-k{font-weight:700;color:var(--text-faint)}
/* Zichtbaarheidscontract: een tabel met data-cards="1" en een lijst met
   data-auto="1" wisselen elkaar af op 768px. Zonder die attributen blijft
   alles staan waar het staat — geen verrassingen voor bestaande pagina's. */
.clist[data-auto]{display:none}

/* ---------- KEYBOARD HINT ---------- */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;background:var(--surface);font-family:inherit;font-size:11px;font-weight:700;line-height:1;color:var(--text-muted);white-space:nowrap;vertical-align:middle}
.kbd-lg{min-width:24px;height:24px;font-size:12px}

/* ---------- SKELETON v2 ---------- */
.skel-circle{border-radius:50%}
.skel-av{width:32px;height:32px;border-radius:50%}
.skel-chip{height:26px;width:96px;border-radius:999px}
.skel-stat{display:grid;grid-template-columns:auto 1fr;gap:8px var(--sp-4);padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.skel-stat .sk-ic{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px}
.skel-stat .sk-val{height:26px;width:62%}
.skel-stat .sk-lbl{height:11px;width:82%}
.skel-citem{display:grid;grid-template-columns:1fr 84px;gap:8px var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.skel-citem .sk-t{height:14px;width:66%}
.skel-citem .sk-m{height:11px;width:44%}
.skel-citem .sk-s{grid-column:2;grid-row:1 / span 2;height:20px;align-self:center}
.skel-split{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:var(--sp-5);align-items:start}
.skel-split .sk-pane{height:320px;border:1px solid var(--border);border-radius:var(--radius-lg)}
@media(max-width:1024px){.skel-split{grid-template-columns:1fr}.skel-split .sk-pane:last-child{display:none}}

/* ---------- TOAST v2 ---------- */
/* Actieknop in een toast — bedoeld voor "ongedaan maken" direct na een actie. */
.toast-act{flex:0 0 auto;min-height:30px;padding:5px 11px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-sm);background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap;cursor:pointer}
.toast-act:hover{border-color:var(--accent);background:rgba(255,255,255,.08);color:#fff}
.toast-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Haarlijn die leegloopt: de JS zet --toast-ms gelijk aan de levensduur, zodat de
   gebruiker ziet hoeveel tijd hij nog heeft om op "ongedaan maken" te drukken. */
.toast{position:relative}
.toast-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left center;border-radius:0 0 12px 12px;background:color-mix(in srgb,var(--accent) 80%,transparent);animation:ktmdrain var(--toast-ms,4200ms) linear forwards}
@keyframes ktmdrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast:hover .toast-prog{animation-play-state:paused}

/* ---------- SCROLL AFFORDANCE ---------- */
/* Vervagende randen die zichzelf aan- en uitzetten: de `local` lagen schuiven mee
   met de inhoud, de `scroll` lagen blijven staan. Zo ziet de gebruiker zonder JS
   dat er nog een stuk tabel rechts staat. --sx-bg moet de achtergrond eronder zijn. */
.scroll-x{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;background:
  linear-gradient(90deg,var(--sx-bg,var(--surface)) 32%,transparent) 0 0 / 36px 100% no-repeat local,
  linear-gradient(-90deg,var(--sx-bg,var(--surface)) 32%,transparent) 100% 0 / 36px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--text) 22%,transparent),transparent) 0 0 / 18px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--text) 22%,transparent),transparent) 100% 0 / 18px 100% no-repeat scroll;
  background-color:var(--sx-bg,var(--surface))}
.scroll-x::-webkit-scrollbar{height:9px}
.scroll-x::-webkit-scrollbar-thumb{border-radius:999px;background:var(--border-strong)}
.scroll-x::-webkit-scrollbar-track{background:transparent}

/* ---------- AVATAR ---------- */
/* De JS kiest data-tint deterministisch (hash van de naam), zodat dezelfde
   gebruiker altijd dezelfde kleur houdt en je hem op kleur herkent. */
.av{--av-c:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border:1px solid color-mix(in srgb,var(--av-c) 32%,transparent);border-radius:50%;background:color-mix(in srgb,var(--av-c) 18%,var(--surface));color:color-mix(in srgb,var(--av-c) 76%,var(--text));font-size:12px;font-weight:700;line-height:1;letter-spacing:.02em;text-transform:uppercase;overflow:hidden;user-select:none}
.av-sm{width:24px;height:24px;font-size:10px}
.av-lg{width:44px;height:44px;font-size:16px}
.av img{width:100%;height:100%;object-fit:cover}
.av[data-tint="0"]{--av-c:var(--accent)}
.av[data-tint="1"]{--av-c:var(--info)}
.av[data-tint="2"]{--av-c:var(--teal)}
.av[data-tint="3"]{--av-c:var(--purple)}
.av[data-tint="4"]{--av-c:var(--ok)}
.av[data-tint="5"]{--av-c:var(--opt)}
.av[data-tint="6"]{--av-c:var(--bad)}
.av[data-tint="7"]{--av-c:var(--warn)}
.av-grp{display:inline-flex;align-items:center}
.av-grp .av{margin-left:-9px;border:2px solid var(--surface)}
.av-grp .av:first-child{margin-left:0}
.av-grp .av-more{background:var(--surface-2);color:var(--text-muted);border-color:var(--surface);font-size:10.5px}

/* ---------- DENSITY ---------- */
/* Voor wie de hele dag in dezelfde lijst zit: meer rijen in beeld, zelfde leesbaarheid. */
.tablewrap.dense table.data th{padding:7px 10px}
.tablewrap.dense table.data td{padding:6px 10px;font-size:12.5px}
.tablewrap.dense table.data .pill,.tablewrap.dense table.data .tag{font-size:10.5px;padding:2px 7px}
.tablewrap.dense .btn-sm{min-height:28px;padding:4px 9px}

/* ---------- RESPONSIVE: <=1024px ---------- */
/* Split view wordt één paneel. data-pane zegt welk paneel je ziet; de terugknop
   verschijnt alleen hier, want op desktop staan beide panelen naast elkaar. */
@media(max-width:1024px){
  .split{grid-template-columns:1fr;gap:var(--sp-4)}
  .split-list-body{max-height:none}
  .split[data-pane=detail] .split-list{display:none}
  .split[data-pane=list] .split-detail{display:none}
  .split[data-pane=detail] .split-back{display:inline-flex;align-items:center;gap:7px;min-height:40px;margin-bottom:var(--sp-3);padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font:inherit;font-size:13px;font-weight:700;color:var(--text-muted);cursor:pointer}
  .split[data-pane=detail] .split-back:hover{border-color:var(--accent);color:var(--text-head)}
  .split-back svg{width:14px;height:14px}
}

/* ---------- RESPONSIVE: <=768px ---------- */
@media(max-width:768px){
  /* Drawer wordt een bottom sheet met greep — dat is het gebaar dat mensen van
     hun telefoon kennen; een paneel dat van rechts komt voelt daar verkeerd. */
  .drawer,.drawer-wide,.drawer-full{top:auto;left:0;right:0;width:auto;max-height:92dvh;border-left:none;border-top:1px solid var(--border);border-radius:var(--radius-xl) var(--radius-xl) 0 0;animation-name:ktmsheetup}
  .drawer-head{position:relative;padding-top:calc(var(--sp-4) + 10px)}
  .drawer-head::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:2px;background:var(--border-strong)}
  .drawer-body{padding:var(--sp-4)}
  .drawer-foot{padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom))}
  .drawer-foot .btn{flex:1 1 auto;min-height:46px}
  .drawer-foot .fnote{flex:1 0 100%;margin:0 0 4px}
  /* Bulkbar over de volle breedte: op 390px past een pil met vier knoppen niet. */
  .bulkbar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));transform:none;max-width:none;align-items:stretch;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--radius-lg);animation-name:ktmbulksm}
  .bulkbar .bb-count{margin:0 0 2px;text-align:center}
  .bulkbar .btn{width:100%;min-height:44px}
  .bulkbar .bb-sep{display:none}
  .bulkbar-static{position:static;left:auto;right:auto}
  /* Toolbar: alles wat optioneel is verhuist naar de "meer"-popover. */
  .tbar{gap:var(--sp-2)}
  .tbar-opt{display:none}
  .tbar-more,.tbar-more-wrap{display:inline-flex}
  .tbar-sep{display:none}
  .tbar-group{flex:1 1 auto}
  /* Brede tabellen worden kaarten. Beide kanten zijn opt-in via data-attributen. */
  .tablewrap[data-cards]{display:none}
  .clist[data-auto]{display:flex}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
  .stat{padding:var(--sp-4);gap:2px var(--sp-3)}
  .stat-ic{width:36px;height:36px;border-radius:10px}
  .stat-ic svg{width:18px;height:18px}
  .stat-val{font-size:24px}
  .es2{margin:var(--sp-5) auto;padding:var(--sp-6) var(--sp-4)}
  .es2-ic{width:72px;height:72px;margin-bottom:var(--sp-4)}
  .es2-ic svg{width:36px;height:36px}
  .es2-acts .btn{flex:1 1 auto;min-width:140px}
  .prog-steps{gap:0}
  .prog-step{font-size:10.5px}
  .prog-step .ps-lbl{max-width:9ch}
  .seg{width:100%}
  .seg button{padding:6px 8px;font-size:12.5px}
  .fchip{max-width:calc(100vw - 60px)}
}

@keyframes ktmsheetup{from{transform:translateY(28px);opacity:.45}to{transform:none;opacity:1}}
@keyframes ktmbulksm{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* ---------- RESPONSIVE: <=560px ---------- */
@media(max-width:560px){
  /* Command palette wordt een volledig scherm — zoeken op een telefoon is een
     eigen taak, niet een vensterje boven de pagina. */
  .cmdk-scrim{padding:0;align-items:stretch}
  .cmdk{max-width:none;max-height:none;height:100dvh;border:none;border-radius:0;animation-name:ktmsheetup}
  .cmdk-search{padding:calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) var(--sp-3)}
  .cmdk-foot{padding-bottom:calc(9px + env(safe-area-inset-bottom))}
  .cmdk-foot span:nth-child(n+3){display:none}
  /* Popovers ankeren niet meer aan de knop maar aan de schermrand, anders vallen
     ze half buiten beeld op 390px. */
  .pop,.pop-right{position:fixed;left:10px;right:10px;top:auto;min-width:0;max-width:none}
  .pop-up{bottom:auto}
  .stat-grid{grid-template-columns:1fr}
  .citem{grid-template-columns:1fr}
  .citem-side{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;text-align:left;margin-top:4px}
  .trail-item{padding-left:32px}
  .trail-diff{grid-template-columns:1fr}
  .trail-diff dt{margin-top:4px}
  .kbd{display:none}
  .cmdk-hint{display:none}
}

/* ---------- TOUCH ---------- */
/* Op vingerbediening wint bereikbaarheid van compactheid: 44px overal. */
@media(pointer:coarse){
  .cmdk-item{min-height:48px;padding:11px 10px}
  .pop-item{min-height:46px}
  .seg button{min-height:44px}
  .fchip{min-height:38px}
  .fchip-x{width:32px;height:32px}
  .fchip-add{min-height:38px}
  .drawer-x{min-width:44px;min-height:44px}
  .iedit-val{min-height:40px}
  .iedit-save,.iedit-cancel{width:40px;height:40px}
  .citem{padding:var(--sp-4) var(--sp-4)}
  .toast-act{min-height:38px}
  .split-back{min-height:44px}
  /* Dense is een desktopluxe; met een vinger is het onbruikbaar. */
  .tablewrap.dense table.data th{padding:10px 12px}
  .tablewrap.dense table.data td{padding:10px 12px;font-size:13px}
  .tablewrap.dense .btn-sm{min-height:40px;padding:7px 12px}
}

/* ---------- REDUCED MOTION ---------- */
/* base.css zet al alles op nul; dit blok herhaalt het voor de bewegingen die
   hier ontstaan, zodat dit bestand ook los van base.css correct blijft. */
@media(prefers-reduced-motion:reduce){
  .cmdk,.pop,.drawer,.drawer-scrim,.bulkbar{animation:none!important}
  .seg::before,.meter-bar{transition:none!important}
  .toast-prog{animation:none!important;transform:scaleX(0)}
}