/* ==========================================================================
   Boekhouding dashboard v3 — tokens, componenten en schermen
   Bron: design/dashboard-mockup.html (v3). Geen inline style-attributen (CSP style-src 'self').
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f6f5f1; --card: #ffffff; --card-2: #f3f2ee;
  --ink: #14161a; --ink-2: #4b4f57; --muted: #656a73; --line: #e6e5e0; --line-strong: #cfcec8;
  --accent: #0f766e; --accent-ink: #ffffff; --accent-soft: #e4f3f0;
  --s-omzet: #2a78d6; --s-kosten: #d9561f; --s-winst: #6b5bd2; --s-prev: #86857f;
  --otools: #6d28d9; --otools-soft: #f1eafe; --otools-line: #c4b5fd;
  --ch-bol: #0f766e; --ch-shopify: #1f7d72; --ch-paypal: #5fbfb2; --stack-ink: #ffffff;
  --good: #15803d; --good-text: #15803d; --warn: #f59e0b; --warn-text: #92400e; --critical: #dc2626; --critical-text: #b91c1c;
  --info: #2563eb; --info-text: #1d4ed8;
  --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-lg: 1rem; --fs-xl: 1.125rem; --fs-kpi: 1.5rem; --fs-hero: clamp(2rem, 2.6vw, 2.6rem);
  --r-card: 16px; --r-inner: 10px; --r-ctl: 8px;
  --shadow: 0 1px 2px rgba(20,22,26,.04), 0 8px 24px -12px rgba(20,22,26,.10);
  --bar-alpha: .8; --area-alpha: .10;
  --tap: 44px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1114; --card: #1a1d22; --card-2: #20242a;
    --ink: #f3f4f6; --ink-2: #c3c5cb; --muted: #9aa0aa; --line: #2a2e35; --line-strong: #3a3f47;
    --accent: #2dd4bf; --accent-ink: #062b27; --accent-soft: #14302d;
    --s-omzet: #3987e5; --s-kosten: #d95926; --s-winst: #9085e9; --s-prev: #7c838d;
    --otools: #a78bfa; --otools-soft: #2a2140; --otools-line: #5b4783;
    --ch-bol: #2dd4bf; --ch-shopify: #1f9a8c; --ch-paypal: #145c54; --stack-ink: #0f1114;
    --good: #22c55e; --good-text: #4ade80; --warn: #f59e0b; --warn-text: #fbbf24; --critical: #ef4444; --critical-text: #f87171;
    --info: #60a5fa; --info-text: #93c5fd;
    --shadow: none; --bar-alpha: .75; --area-alpha: .16;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1114; --card: #1a1d22; --card-2: #20242a;
  --ink: #f3f4f6; --ink-2: #c3c5cb; --muted: #9aa0aa; --line: #2a2e35; --line-strong: #3a3f47;
  --accent: #2dd4bf; --accent-ink: #062b27; --accent-soft: #14302d;
  --s-omzet: #3987e5; --s-kosten: #d95926; --s-winst: #9085e9; --s-prev: #7c838d;
  --otools: #a78bfa; --otools-soft: #2a2140; --otools-line: #5b4783;
  --ch-bol: #2dd4bf; --ch-shopify: #1f9a8c; --ch-paypal: #145c54; --stack-ink: #0f1114;
  --good: #22c55e; --good-text: #4ade80; --warn: #f59e0b; --warn-text: #fbbf24; --critical: #ef4444; --critical-text: #f87171;
  --info: #60a5fa; --info-text: #93c5fd;
  --shadow: none; --bar-alpha: .75; --area-alpha: .16;
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-size: var(--fs-md); line-height: 1.45; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary, label { touch-action: manipulation; }
button { color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
h1, h2, h3, h4, p, dl, dd, dt, fieldset, figure { margin: 0; padding: 0; border: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--card); border-radius: var(--r-ctl); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.neg { color: var(--critical-text); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.icon.icon-sm { width: 16px; height: 16px; }
.hatch-line { stroke-width: 1.2; }

/* reekskleuren als klassen (themawissel vraagt geen re-render) */
.s-omzet { stroke: var(--s-omzet); } .s-kosten { stroke: var(--s-kosten); } .s-winst { stroke: var(--s-winst); } .s-prev { stroke: var(--s-prev); } .s-muted { stroke: var(--muted); } .s-ink { stroke: var(--ink-2); } .s-line { stroke: var(--line-strong); }
.f-omzet { fill: var(--s-omzet); } .f-kosten { fill: var(--s-kosten); } .f-winst { fill: var(--s-winst); } .f-prev { fill: var(--s-prev); } .f-muted { fill: var(--muted); } .f-ink { fill: var(--ink-2); } .f-warn { fill: var(--warn-text); } .f-good { fill: var(--good); } .f-crit { fill: var(--critical); }
.f-bol { fill: var(--ch-bol); } .f-shopify { fill: var(--ch-shopify); } .f-paypal { fill: var(--ch-paypal); } .f-stack-ink { fill: var(--stack-ink); }
.sw-omzet { background: var(--s-omzet); } .sw-kosten { background: var(--s-kosten); } .sw-winst { background: var(--s-winst); } .sw-muted { background: var(--muted); } .sw-ink { background: var(--ink-2); }
/* Aantallen (updater, documenten) in de accentkleur: geen geldreeks, dus geen omzet/kosten/winst-kleur. */
.s-count { stroke: var(--accent); } .f-count { fill: var(--accent); } .sw-count { background: var(--accent); }
.sw-bol { background: var(--ch-bol); } .sw-shopify { background: var(--ch-shopify); } .sw-paypal { background: var(--ch-paypal); }
.sw-prev { background: repeating-linear-gradient(90deg, var(--s-prev) 0 2px, transparent 2px 5px); }
.sw-prev-solid { background: var(--s-prev); }

/* ---------- Knoppen en velden ---------- */
.btn-primary, .primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 18px; border-radius: var(--r-inner); background: var(--ink); color: var(--bg); font-weight: 600; }
.btn-primary:hover, .primary:hover { opacity: .92; }
.btn-secondary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-inner); background: var(--card); color: var(--ink); font-weight: 600; }
.btn-secondary:hover, .secondary:hover { background: var(--card-2); }
.btn-text, .text-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 8px 10px; border-radius: var(--r-ctl); color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }
.btn-text:hover, .text-button:hover { background: var(--card-2); }
.btn-small { min-height: 36px; padding: 6px 12px; border-radius: var(--r-ctl); background: var(--ink); color: var(--bg); font-weight: 600; font-size: var(--fs-sm); }
.btn-small.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line-strong); }
.retry-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-inner); background: var(--card); color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.icon-btn, .icon-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--card); color: var(--ink-2); position: relative; flex: 0 0 auto; }
.icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.icon-btn[aria-busy="true"] svg { animation: spin .9s linear infinite; }
.icon-btn .busy-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.field { display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.field > span { display: block; }
.field.compact { min-width: 140px; }
label { font-weight: 600; }
input, textarea, select { width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-inner); padding: 12px 14px; background: var(--card); color: var(--ink); outline: none; font-size: 16px; font-weight: 500; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; padding: 0; margin: 0; accent-color: var(--accent); }
.error { min-height: 1.2em; color: var(--critical-text); font-weight: 600; font-size: var(--fs-sm); }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.switch input { flex: 0 0 auto; }

/* ---------- Login ---------- */
.login { display: grid; place-items: start center; min-height: 100vh; padding: max(24px, 8vh) 16px 40px; }
.login-card { width: min(100%, 440px); padding: 28px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.login-card h1 { font-size: 1.5rem; letter-spacing: -.02em; margin-top: 4px; }
.login-card .muted { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.5; }
.login-card form { display: grid; gap: 14px; margin-top: 22px; }
.login-card .brand-mark { margin-bottom: 16px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-2xs); font-weight: 700; }
.brand-mark { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--r-inner); background: var(--ink); color: var(--bg); font-weight: 700; font-size: .95rem; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.rail { display: none; }
.main { min-width: 0; width: 100%; padding: 8px 16px calc(88px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  .shell { grid-template-columns: 232px minmax(0, 1fr); }
  .rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; padding: 20px 14px; border-right: 1px solid var(--line); background: var(--card); }
  .main { padding: 20px 32px 48px; max-width: 1360px; margin-inline: auto; }
}
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px; min-width: 0; }
.rail-brand-text { min-width: 0; }
.rail-brand strong { display: block; font-size: var(--fs-md); }
.rail-brand small { display: block; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.rail a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-inner); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--fs-md); }
.rail a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.rail-status { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); display: grid; gap: 6px; }
.rail-status .h { font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-2xs); }
.rail-status div { display: flex; align-items: center; gap: 6px; }
.rail-foot { padding: 12px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: 0 0 8px; }
.dot[data-tone="warn"] { background: var(--warn); }
.dot[data-tone="crit"] { background: var(--critical); }
.dot[data-tone="info"] { background: var(--info); }
.dot[data-tone="none"], .dot[data-tone="neutral"] { background: var(--line-strong); }
.dot.pulse { animation: pulse .9s ease-out 1; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.update-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--accent-soft); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.update-actions { display: inline-flex; gap: 8px; }

/* ---------- Topbar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.entity-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); height: 40px; }
.entity-switch button { padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); }
.entity-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--fs-sm); }
.avatar:empty { display: none; }
.page-title { margin: 0 0 16px; }
.page-title h1 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -.02em; font-weight: 700; line-height: 1.1; }
.page-title h1:focus { outline: none; }
.stand { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.stand .dot { vertical-align: middle; margin-right: 6px; margin-top: -2px; }
.stand .flash { color: var(--ink-2); font-weight: 600; }
.stand[data-tone="warn"] { color: var(--warn-text); }
.stand[data-tone="crit"] { color: var(--critical-text); }

/* ---------- Filterregel ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
body[data-view="receipts"] .filters, body[data-view="ai"] .filters { display: none; }
body:not([data-view="overview"]) .compare { display: none; }
.period-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--card); font-weight: 600; font-size: var(--fs-md); }
.period-btn-text { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.period-btn small { color: var(--muted); font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; }
.period-btn svg { color: var(--muted); }
.compare { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); }
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-ctl); background: var(--card-2); border: 1px solid var(--line); }
.seg button { padding: 6px 10px; min-height: 28px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.seg button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* ---------- Grid en kaarten ---------- */
.screen { min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1100px) { .grid { gap: 16px; } }
.group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 12px 0 -4px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.group:first-child { margin-top: 0; }
.group small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.card { grid-column: span 12; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); min-width: 0; position: relative; }
@media (min-width: 1100px) { .card { padding: 20px 22px; } }
@media (min-width: 720px) { .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; } .span-8 { grid-column: span 8; } .span-3 { grid-column: span 3; } .span-12 { grid-column: span 12; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } }
.grow { flex: 1; }
.kpis { grid-column: span 12; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
@media (min-width: 720px) { .kpis.span-6 { grid-column: span 6; } }
@media (min-width: 1100px) { .kpis { gap: 16px; } }
.kpis .card { grid-column: auto; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-bottom: 16px; }
/* Vandaag: één compacte regel met de lopende dag per bron, naast (nooit in) de totalen van het tijdvak. */
.provisional-card { margin-bottom: 12px; padding: 12px 16px; border: 1px dashed var(--line-strong); box-shadow: none; }
.provisional-card .card-head { min-height: 0; margin-bottom: 8px; }
.provisional-card h2 { font-size: var(--fs-md); font-weight: 700; }
.today-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
.today-row::-webkit-scrollbar { display: none; }
.today-cell { flex: 0 0 auto; min-width: 108px; display: grid; gap: 1px; align-content: start; padding: 8px 10px; border-radius: var(--r-inner); background: var(--card-2); scroll-snap-align: start; }
.today-label { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
.today-value { font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.today-detail { color: var(--muted); font-size: var(--fs-2xs); white-space: nowrap; }
@media (min-width: 720px) { .today-row { flex-wrap: wrap; overflow: visible; } .today-cell { flex: 1 1 120px; } }
@media (min-width: 1100px) { .provisional-card { padding: 14px 22px; } }
.card-head > div:first-child { min-width: 0; }
.card-head h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.card-head p { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; margin-top: 2px; }
.link { display: inline-flex; align-items: center; min-height: 24px; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; text-decoration: none; border-radius: var(--r-ctl); }
.link:hover { text-decoration: underline; }
.link::after { content: " ›"; white-space: pre; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; margin-top: 12px; color: var(--muted); font-size: var(--fs-xs); }
.foot:empty { display: none; }
.note { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-inner); background: var(--card-2); color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.45; }
.note:empty { display: none; }
.note b { color: var(--ink); }
.tag { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--card-2); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 600; }
.tag.warn { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 20%, transparent); }
.tag.crit { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 16%, transparent); }
.hint { color: var(--muted); font-size: var(--fs-2xs); }
.card-head .note[data-notice], .card-head .band[data-notice] { flex: 1 1 100%; width: 100%; margin-top: 8px; }
.collapse-btn { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; color: var(--muted); border: 1px solid transparent; }
.collapse-btn:hover { background: var(--card-2); color: var(--ink); }
.collapse-btn svg { width: 16px; height: 16px; transition: transform .15s ease; }
.card.is-collapsed > :not(.card-head) { display: none; }
.card.is-collapsed { align-self: start; }
.card.is-collapsed .card-head { margin-bottom: 0; }
.card.is-collapsed .collapse-btn svg { transform: rotate(-90deg); }
/* Herlaad: vorige render blijft zichtbaar op 60 % opacity (contract 2.3), data-refetch door overview.js. */
.card[data-refetch] > :not(.card-head), .kpis[data-refetch] > .card { opacity: .6; transition: opacity .15s ease; }

/* ---------- Bloktoestanden (contract 2.3) ---------- */
.card[data-state="loading"]:not(.has-render), .kpis[data-state="loading"]:not(.has-render) .card { min-height: 180px; }
.card[data-state="loading"]:not(.has-render)::after { content: ""; position: absolute; inset: auto 16px 16px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--card-2), var(--line), var(--card-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.card[data-state="loading"].has-render > :not(.card-head), .kpis[data-state="loading"].has-render .card > * { opacity: .6; transition: opacity .2s; }
@keyframes shimmer { to { background-position: -200% 0; } }
.block-status { display: grid; gap: 8px; }
.block-status:empty { display: none; }
.badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; background: var(--card-2); color: var(--ink-2); }
.badge[data-tone="warn"], .badge.stale { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 20%, transparent); }
.badge[data-tone="crit"] { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 16%, transparent); }
.badge[data-tone="ok"] { color: var(--good-text); background: color-mix(in srgb, var(--good) 16%, transparent); }
.band { padding: 10px 12px; border-radius: var(--r-inner); font-size: var(--fs-xs); line-height: 1.45; border: 1px solid transparent; }
.band[data-tone="warn"], .band.warn { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.band[data-tone="crit"], .band.crit { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 12%, transparent); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.band[data-tone="info"], .band.info { color: var(--ink-2); background: var(--card-2); border-color: var(--line); }
.band code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-2xs); }
.error-block { display: grid; gap: 8px; justify-items: start; padding: 12px 0; color: var(--ink-2); font-size: var(--fs-sm); }
.error-block b { color: var(--critical-text); }
.error-block code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-xs); color: var(--muted); }
.card[data-state="error"] { border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }
.card[data-state="stale"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.card[data-state="incomplete"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
/* Tegelraster: geen los meldingselement (zou een lege gridcel worden), wel de amberen rand. */
.kpis[data-state="incomplete"] .card, .kpis[data-state="stale"] .card { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
/* Meldingen bovenaan een kaart zonder kaartkop (hero): tag als pil, band als blok. */
.card > .tag[data-notice] { align-self: flex-start; margin-bottom: 8px; }
.card > .band[data-notice] { margin-bottom: 12px; }
.fin-incomplete b { display: inline; }
.fin-incomplete .codes code { font-weight: 700; }
.fin-incomplete small { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--fs-2xs); line-height: 1.4; }
.card[data-state="not-in-snapshot"] .unavailable, .card[data-state="unavailable"] .unavailable { display: grid; }
.unavailable { display: grid; gap: 8px; align-content: center; flex: 1; padding: 8px 0; }
.unavailable .label { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.unavailable h3 { font-size: var(--fs-xl); }
.unavailable p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.empty { display: grid; place-items: center; text-align: center; color: var(--muted); font-size: var(--fs-sm); padding: 24px 12px; flex: 1; }
.empty b { color: var(--ink); display: block; margin-bottom: 4px; }
.empty:empty { display: none; }

/* ---------- Hero en tegels ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "value stats" "delta stats" "spark spark"; column-gap: 24px; row-gap: 4px; flex: 1; }
.hero .label { grid-area: label; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; }
.hero .value { grid-area: value; align-self: end; font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero .value.negative { color: var(--critical-text); }
.value .cents { font-size: .5em; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.tile .value .cents { font-size: .7em; color: var(--muted); }
.hero .delta-wrap { grid-area: delta; display: grid; gap: 1px; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.delta[data-tone="good"] { color: var(--good-text); }
.delta[data-tone="bad"] { color: var(--critical-text); }
.delta[data-tone="neutral"] { color: var(--muted); }
.delta::before { font-size: 11px; }
.delta[data-dir="up"]::before { content: "↑"; }
.delta[data-dir="down"]::before { content: "↓"; }
.delta[data-dir="flat"]::before { content: "→"; }
.delta[data-dir="none"]::before { content: ""; }
.delta small { font-weight: 500; color: var(--muted); }
.delta-basis { font-size: var(--fs-xs); color: var(--muted); }
.hero-stats { grid-area: stats; display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-self: end; max-width: 56%; }
.hero-stats .stat { display: contents; }
.hero-stats dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; white-space: nowrap; }
.hero-stats dd { text-align: right; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-stats dd .delta { font-size: var(--fs-xs); margin-left: 4px; }
.hero-stats .jump { font: inherit; font-weight: 600; color: var(--accent); min-height: 24px; }
.hero-stats .jump::after { content: " ›"; white-space: pre; }
.stats3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
.stats3 .stat { display: grid; gap: 2px; }
.stats3 dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.stats3 dd { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-spark { grid-area: spark; height: 48px; width: 100%; margin-top: 12px; display: block; }
.tile .label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; }
.tile .key { width: 10px; height: 3px; border-radius: 2px; flex: 0 0 10px; }
.tile .value { display: block; margin-top: 8px; font-size: var(--fs-kpi); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .delta { margin-top: 6px; display: flex; flex-wrap: wrap; column-gap: 4px; }
.tile .delta small, .tile .sub-line { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.tile .delta small { flex-basis: 100%; }
.tile .sub-line { display: block; margin-top: 4px; line-height: 1.4; }
.tile svg.spark { display: block; width: 100%; flex: 1; min-height: 40px; max-height: 72px; margin-top: auto; padding-top: 10px; }

/* ---------- Grafieken ---------- */
.readout { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 4px 14px; align-items: baseline; min-height: 40px; margin: 0 0 12px; font-size: var(--fs-xs); }
.readout.legend { grid-template-columns: repeat(3, auto); justify-content: start; min-height: 0; }
.readout .total-btn { display: inline; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; text-align: left; }
.readout .total-btn[aria-pressed="false"] { color: var(--muted); font-weight: 600; }
.readout .total-btn small { display: block; color: var(--muted); font-weight: 500; font-size: var(--fs-2xs); }
.readout span { display: grid; gap: 1px; color: var(--muted); }
.readout.legend span { display: inline-flex; align-items: center; gap: 4px; }
.readout b { color: var(--ink); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; font-weight: 600; }
.readout button.series { display: grid; gap: 1px; text-align: left; color: var(--muted); font-size: var(--fs-xs); }
.readout button.series[aria-pressed="false"] .name { text-decoration: line-through; }
.readout button.series[aria-pressed="false"] i { background: none; border: 1px solid var(--muted); }
.readout .name { display: inline; }
.readout i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.readout i.rect { width: 10px; height: 10px; border-radius: 3px; }
.readout i.sw-prev { height: 2px; }
.chart-wrap { display: grid; grid-template-columns: 52px minmax(0, 1fr); flex: 1; position: relative; }
.plot-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
.plot-scroll::-webkit-scrollbar { display: none; }
.plot-scroll[data-scroll="middle"] { mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.plot-scroll[data-scroll="start"] { mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.plot-scroll[data-scroll="end"] { mask-image: linear-gradient(90deg, transparent, #000 24px); }
.plot-scroll:focus-visible { outline-offset: -2px; }
.plot-scroll[data-scrub] { touch-action: none; }
.x-ends { display: flex; justify-content: space-between; grid-column: 2; color: var(--muted); font-size: var(--fs-2xs); margin-top: 2px; }
svg.chart { display: block; overflow: visible; }
.chart text { font-family: inherit; font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart text.strong { fill: var(--ink-2); font-weight: 600; }
.chart text.stack-label { fill: var(--stack-ink); font-size: 10px; font-weight: 600; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .grid-line.strong { stroke: var(--line-strong); }
.chart .zero { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .divider { stroke: var(--line-strong); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .15s; }
.line.prev { stroke-width: 1.25; stroke-dasharray: 2 3; stroke-linecap: butt; stroke-opacity: .85; }
.line.partial { stroke-dasharray: 2 3; }
.area { opacity: var(--area-alpha); }
.bar { fill-opacity: var(--bar-alpha); }
.bar.active { fill-opacity: 1; }
.bar.partial { fill: url(#hatch-winst); stroke: var(--s-winst); stroke-width: 1; }
.bar.dim { fill-opacity: .45; }
.marker { stroke: var(--card); stroke-width: 1.5; }
.marker.hollow { fill: var(--card); stroke-width: 1.5; }
.crosshair { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
[data-scrub] .crosshair { stroke-width: 2; }
/* ---------- Mobiele cijferstrook (grafiekkaart onder 720 px) ---------- */
.mstrip-wrap { display: none; }
@media (max-width: 719px) {
  #chart-card .readout, #chart-card .chart-wrap { display: none; }
  .mstrip-wrap:not([hidden]) { display: block; margin-bottom: 4px; }
}
.mstrip-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; padding-bottom: 2px; }
.mstrip-tabs::-webkit-scrollbar { display: none; }
.mstrip-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.mstrip-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mstrip-tabs .key, .mpane-label .key { display: inline-block; width: 10px; height: 3px; border-radius: 2px; flex: 0 0 10px; }
.mstrip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.mstrip::-webkit-scrollbar { display: none; }
.mpane { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; display: grid; gap: 6px; align-content: start; }
.mpane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.mpane-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.mpane-meaning { font-weight: 500; text-align: right; min-width: 0; }
.mpane-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mpane-value > strong { font-size: var(--fs-kpi); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mpane-value .delta { flex-wrap: wrap; column-gap: 4px; }
.mpane-value .delta small { flex-basis: 100%; font-size: var(--fs-2xs); color: var(--muted); font-weight: 500; }
.mpane-sub { flex-basis: 100%; color: var(--muted); font-size: var(--fs-xs); }
.mpane-readout { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; min-height: 30px; padding: 4px 0; text-align: left; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0; }
.mpane-readout[aria-pressed="true"] { color: var(--ink); }
.mpane-readout b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mpane-readout b small { color: var(--muted); font-weight: 500; }
.mpane-readout:focus-visible { outline-offset: 2px; }
.mpane-svg { display: block; width: 100%; height: 176px; }
.mpane .hint { text-align: center; padding: 4px 0; }
.mstrip-hint { margin-top: 8px; color: var(--muted); font-size: var(--fs-2xs); text-align: center; }
.mstrip-hint:empty { display: none; }
.bar.partial.f-count { fill: url(#hatch-count); stroke: var(--accent); stroke-width: 1; }

.chart-table { margin-top: 8px; }
.chart-table summary { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; min-height: 32px; display: flex; align-items: center; width: fit-content; border-radius: var(--r-ctl); }
.chart-table summary::after { content: " ›"; white-space: pre; }
.chart-table[open] summary::after { content: " ˅"; }
.chart-table table { margin-top: 8px; }
.hatch-legend { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 5px; background: repeating-linear-gradient(135deg, var(--s-winst) 0 1px, transparent 1px 3px); outline: 1px solid var(--s-winst); outline-offset: -1px; }

/* ---------- Aandacht ---------- */
.attn { display: grid; align-content: start; gap: 2px; flex: 1; }
.attn-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 6px; align-items: center; padding: 12px 4px 12px 0; min-height: 56px; border-radius: var(--r-inner); text-decoration: none; text-align: left; width: 100%; color: inherit; }
.attn-row .chev { width: 16px; height: 16px; color: var(--muted); }
.attn-row:hover, .attn-row:active { background: var(--card-2); }
.attn-row .st { display: grid; place-items: center; justify-self: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-2xs); font-weight: 700; color: #fff; }
.st.count { width: auto; min-width: 22px; max-width: 44px; padding: 0 6px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.st[data-tone="good"], .st[data-tone="ok"] { background: var(--good); } .st[data-tone="warn"] { background: var(--warn); color: #3b2500; } .st[data-tone="crit"] { background: var(--critical); } .st[data-tone="info"] { background: var(--muted); }
:root[data-theme="dark"] .st, :root:not([data-theme="light"]) .st { color: #0f1114; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .st { color: #fff; } :root:not([data-theme="dark"]) .st[data-tone="warn"] { color: #3b2500; } }
:root[data-theme="light"] .st { color: #fff; } :root[data-theme="light"] .st[data-tone="warn"] { color: #3b2500; }
.attn-row .t { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.attn-row strong { font-size: var(--fs-sm); font-weight: 600; }
.attn-row .when { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.attn-row small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; margin-top: 2px; }
.attn-ok { margin-top: 8px; padding: 10px 8px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.attn-ok:empty { display: none; }
.alerts { display: grid; gap: 8px; margin-bottom: 16px; }
.alerts:empty { display: none; }
.alert { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--r-inner); border: 1px solid var(--line); background: var(--card); font-size: var(--fs-sm); }
.alert[data-tone="crit"] { border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }
.alert[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.alert strong { display: block; }
.alert small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; line-height: 1.4; }

/* ---------- Kanaalmix ---------- */
.stack { display: flex; height: 22px; border-radius: 4px; overflow: hidden; gap: 2px; }
.stack:empty { display: none; }
.stack span { display: block; height: 100%; flex: 0 0 auto; min-width: 3px; color: var(--stack-ink); font-size: 11px; font-weight: 600; line-height: 22px; padding-left: 6px; white-space: nowrap; overflow: hidden; }
.stack.prev { height: 6px; opacity: .55; margin-top: 4px; }
.stack.prev span { font-size: 0; }
.mix { width: 100%; margin-top: 12px; }
.mix th, .mix td { padding: 6px 8px; }
.mix th { font-weight: 600; }
.mix tbody th { color: var(--ink); text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.mix i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.mix .muted { color: var(--muted); }
.mix-share { margin-top: 14px; }
.mix-share .h { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.share-chart { display: block; width: 100%; height: 72px; }

/* ---------- Providers ---------- */
.prov { display: grid; flex: 1; align-content: start; }
.prov-head, .prov-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: start; }
.prov-head { padding: 0 8px 8px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.prov-head .r, .prov-row .num { text-align: right; }
.prov-row { padding: 12px 8px; border-top: 1px solid var(--line); }
.prov-row:first-of-type { border-top: 0; }
.prov-row .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prov-row strong { font-size: var(--fs-sm); font-weight: 600; }
.prov-row small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; margin-top: 2px; }
.prov-row small.runs-line { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.prov-row .num { display: grid; justify-items: end; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.prov-row .num.muted-amount { color: var(--muted); font-weight: 600; }
.prov-row .num small { font-weight: 500; font-size: var(--fs-2xs); }
.runs { display: inline-flex; gap: 4px; align-items: center; }
.runs i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.runs i[data-tone="warn"] { background: var(--warn); } .runs i[data-tone="crit"] { background: var(--critical); } .runs i[data-tone="none"] { background: var(--line-strong); } .runs i[data-tone="info"] { background: var(--info); }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; background: var(--card-2); color: var(--ink-2); white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status[data-tone="ok"], .status.ok, .status.unlinked, .status.linked, .status.gmail-business { color: var(--good-text); background: color-mix(in srgb, var(--good) 16%, transparent); }
.status[data-tone="warn"], .status.warning, .status.review, .status.needs_retake, .status.processing_failed, .status.gmail-review, .status.gmail-failed { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 20%, transparent); }
.status[data-tone="crit"], .status.error, .status.failed, .status.duplicate, .status.rejected { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 16%, transparent); }
.status[data-tone="info"], .status.running, .status.gmail-decision_pending { color: var(--info-text); background: color-mix(in srgb, var(--info) 16%, transparent); }
.status[data-tone="neutral"], .status.neutral, .status.gmail-private, .status.gmail-duplicate { color: var(--ink-2); background: var(--card-2); }

/* ---------- Documenten / controles ---------- */
.doc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 12px; }
.doc-stats:empty { display: none; }
.doc-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-content: start; }
.doc-group + .doc-group { border-left: 1px solid var(--line); padding-left: 20px; margin-left: -8px; }
.doc-group .eyebrow { grid-column: 1 / -1; color: var(--muted); }
.doc-group .cell { padding: 10px 12px; border-radius: var(--r-inner); background: var(--card-2); }
.doc-group b { display: block; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.doc-group small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; line-height: 1.3; }
.bars { display: grid; gap: 8px; margin-top: 8px; font-size: var(--fs-sm); }
.bars div { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
.bars i { display: block; height: 8px; border-radius: 2px; background: var(--ink-2); opacity: .6; }
.bars i.crit { background: var(--critical); opacity: .8; }
.bars i.warn { background: var(--warn); opacity: .9; }
.bars .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bars .sub { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-2xs); margin-top: -4px; }
.big { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.big small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; letter-spacing: 0; margin-top: 2px; }
.divider-line { height: 1px; background: var(--line); margin: 10px 0 6px; }

/* ---------- Kostenopbouw ---------- */
/* Groepskleur: 7000-reeks = kostenkleur, 4000-reeks = omzetblauw (contrasterend), overig = grijs. */
.key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 8px; margin-right: 6px; vertical-align: 1px; }
.key[data-group="cogs"] { background: var(--s-kosten); }
.key[data-group="operating"] { background: var(--s-omzet); }
.costs-chips { margin-bottom: 12px; }
.costs-chips[hidden] { display: none; }
.costs-chips button { display: inline-flex; align-items: center; }
.costs-groups:empty { display: none; }
.comp { display: grid; gap: 3px; margin-bottom: 14px; }
.comp-bar { display: flex; gap: 2px; height: 20px; }
.comp-bar i { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 2px; border-radius: 4px; background: var(--muted); flex: 0 1 auto; overflow: hidden; }
.comp-bar i[data-group="cogs"] { background: var(--s-kosten); }
.comp-bar i[data-group="operating"] { background: var(--s-omzet); }
.comp-bar i b { font-size: var(--fs-2xs); font-weight: 700; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.comp-bar.is-comparison { height: 6px; }
.comp-bar.is-comparison i { opacity: .45; border-radius: 3px; }
.comp-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 5px; font-size: var(--fs-xs); color: var(--muted); }
.comp-sum strong { color: var(--ink); font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.comp-sum .delta { font-size: var(--fs-xs); }
.costs-listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; font-size: var(--fs-xs); color: var(--muted); }
.costs-listhead[hidden] { display: none; }
.costs-listhead select { max-width: 62%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card-2); color: var(--ink); font: inherit; font-size: var(--fs-xs); font-weight: 600; }
.costs-list { list-style: none; margin: 0; padding: 0; }
.cost-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "meta delta" "bar bar"; gap: 1px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.costs-list > .cost-row:first-child { border-top: 0; padding-top: 6px; }
.cost-row .name { grid-area: name; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.cost-row .amt { grid-area: amt; align-self: start; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cost-row .meta { grid-area: meta; font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-row .meta span + span::before { content: "·"; margin: 0 5px; }
.cost-row .delta { grid-area: delta; justify-self: end; align-self: start; font-size: var(--fs-xs); white-space: nowrap; }
.cost-row .d-money { display: none; }
.cost-row .bar-track { grid-area: bar; position: relative; height: 5px; margin-top: 5px; border-radius: 3px; background: var(--card-2); }
.cost-row .bar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--muted); opacity: .85; }
.cost-row[data-group="cogs"] .bar-fill { background: var(--s-kosten); }
.cost-row[data-group="operating"] .bar-fill { background: var(--s-omzet); }
.cost-row .bar-prev { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }
.cost-row.is-absent .name, .cost-row.is-absent .amt { color: var(--muted); }
.costs-more { width: 100%; margin-top: 2px; }
.costs-more[hidden] { display: none; }
.costs-totals { margin-top: 10px; padding-top: 4px; border-top: 2px solid var(--line-strong); }
.costs-totals[hidden] { display: none; }
.costs-totals .h { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 2px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.costs-totals .h .cmp { text-transform: none; letter-spacing: 0; font-weight: 500; text-align: right; }
.tot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.costs-totals.has-cmp .tot-row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.tot-row .name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.tot-row .amt { font-weight: 700; white-space: nowrap; text-align: right; }
.tot-row .share { min-width: 2.6em; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; text-align: right; }
.tot-row .delta { min-width: 4.2em; justify-content: flex-end; font-size: var(--fs-xs); white-space: nowrap; }
.tot-row.is-grand { border-top: 1px solid var(--line-strong); }
.tot-row.is-grand .name, .tot-row.is-grand .amt { font-size: var(--fs-md); }
@media (min-width: 720px) {
  .cost-row .d-money { display: inline; }
  .cost-row .d-money::after { content: " · "; }
}

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); table-layout: fixed; }
caption { text-align: left; }
th { text-align: left; padding: 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; border-bottom: 1px solid var(--line); }
td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .sub { display: block; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
td .desc { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tfoot td { color: var(--muted); font-size: var(--fs-xs); border-top: 1px solid var(--line); border-bottom: 0; padding-top: 10px; }
.table-wrap { margin: 0 -6px; flex: 1; overflow-x: auto; }
.col-date { width: 76px; }
.col-amount { width: 124px; }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chips button { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-2); min-height: 28px; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips-row { margin-bottom: 8px; }
.recon th, .recon td { white-space: nowrap; }
.recon { min-width: 620px; }

/* ---------- Sheets (periode, instellingen) ---------- */
dialog.sheet { width: min(560px, calc(100vw - 24px)); max-height: min(88vh, 720px); border: 0; border-radius: 20px; padding: 0; background: var(--card); color: var(--ink); box-shadow: 0 16px 48px rgba(15,23,42,.18); overflow-x: hidden; }
dialog.settings-sheet { width: min(640px, calc(100vw - 24px)); max-height: min(92vh, 860px); }
dialog::backdrop { background: rgba(15,23,42,.5); }
.sheet-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 12px; background: var(--card); border-bottom: 1px solid var(--line); z-index: 1; }
.sheet-head h2 { font-size: var(--fs-lg); }
.sheet-head p { color: var(--muted); font-size: var(--fs-xs); }
.sheet-head .icon-btn { border-radius: 50%; flex: 0 0 40px; }
.grabber { display: none; width: 36px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 8px auto 0; }
.sheet form { margin: 0; padding: 8px 12px 0; }
.opt-group { margin: 8px 0; }
.opt-group legend { display: block; width: 100%; padding: 8px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); position: sticky; top: 64px; background: var(--card); }
.opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px; border-radius: var(--r-inner); cursor: pointer; }
.opt:hover { background: var(--card-2); }
.opt strong { font-size: var(--fs-sm); font-weight: 600; display: block; }
.opt small { color: var(--muted); font-size: var(--fs-xs); display: block; font-weight: 500; }
.opt small:empty { display: none; }
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.opt:has(input:checked) { background: var(--accent-soft); }
.sheet-note { padding: 8px 8px 16px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.sheet-foot { position: sticky; bottom: 0; padding: 12px; background: var(--card); border-top: 1px solid var(--line); }
.sheet-foot button { width: 100%; min-height: 48px; border-radius: var(--r-inner); background: var(--ink); color: var(--bg); font-weight: 600; }
.settings-form { display: grid; gap: 18px; padding: 16px 20px 20px !important; }
.block-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
.block-options legend, .notification-options legend { grid-column: 1 / -1; margin-bottom: 4px; color: var(--muted); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.block-options label { display: flex; min-width: 0; align-items: center; gap: 10px; min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--r-inner); padding: 8px 12px; background: var(--card-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.block-options label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.compact-primary { width: auto; min-width: 112px; min-height: var(--tap); padding: 10px 16px; }
.notification-settings { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.notification-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notification-settings-head h3 { font-size: var(--fs-lg); }
.notification-settings-head .muted { max-width: 440px; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.45; }
.notification-device-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-inner); padding: 12px 14px; background: var(--card-2); }
.notification-device-card strong, .notification-device-card small { display: block; }
.notification-device-card strong { font-size: var(--fs-sm); }
.notification-device-card small { margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.notification-action { width: auto; min-width: 116px; min-height: var(--tap); padding: 8px 13px; font-size: var(--fs-sm); }
.notification-action.danger-action { color: var(--critical-text); border-color: color-mix(in srgb, var(--critical) 40%, transparent); background: color-mix(in srgb, var(--critical) 10%, transparent); }
.notification-feedback { min-height: 1.2em; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; }
.notification-feedback.success, .notification-feedback[data-tone="ok"] { color: var(--good-text); }
.notification-feedback.error, .notification-feedback[data-tone="crit"] { color: var(--critical-text); }
.notification-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.notification-options label { display: flex; min-width: 0; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-inner); padding: 10px 12px; background: var(--card); font-size: var(--fs-sm); cursor: pointer; }
.notification-options label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.notification-options input { flex: 0 0 20px; margin-top: 1px; }
.notification-options span { min-width: 0; }
.notification-options strong, .notification-options small { display: block; }
.notification-recent { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.notification-recent-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.notification-recent h4 { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.notification-recent-head small { font-size: var(--fs-2xs); line-height: 1.4; }
.notification-recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.notification-recent li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.notification-recent li:first-child { border-top: 0; padding-top: 0; }
.notification-recent li strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.notification-recent li small { display: block; color: var(--muted); line-height: 1.4; }
.notification-recent li .badge { justify-self: end; }
.notification-recent li:empty { display: none; }
.notification-options strong { font-size: var(--fs-sm); }
.notification-options small { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; line-height: 1.35; }
.notification-options:disabled { opacity: .6; }
.notification-test-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notification-test-row small { color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Onderste navigatie ---------- */
.bottom-nav { position: fixed; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px max(8px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); z-index: 20; }
.bottom-nav a { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 48px; padding: 6px 4px; color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; text-decoration: none; border-radius: var(--r-inner); }
.bottom-nav a[aria-current] { color: var(--accent); }
.bottom-nav a[aria-current]::before { content: ""; position: absolute; top: 0; left: 50%; width: 20px; height: 3px; transform: translateX(-50%); border-radius: 0 0 3px 3px; background: var(--accent); }
.bottom-nav svg { width: 20px; height: 20px; }
@media (min-width: 1100px) { .bottom-nav { display: none; } }

/* ---------- Administratievarianten ---------- */
[data-entity="garage"] .tjb-only { display: none !important; }
[data-entity="tjb"] .garage-only { display: none !important; }
@media (min-width: 720px) {
  [data-entity="garage"] #fin-unavailable { grid-column: span 4; }
  [data-entity="garage"] #attn-card { grid-column: span 8; }
  [data-entity="garage"] #doc-card { grid-column: span 7; }
  [data-entity="garage"] #rev-card { grid-column: span 5; }
}

/* ---------- Schermkoppen (Controleren, Systemen) ---------- */
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 16px; }
.screen-head .stand { margin-top: 0; flex: 1; min-width: 0; }
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tiles4:empty { display: none; }
.tiles4 .card { grid-column: auto; padding: 14px 16px; }
.tiles4 .label { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.tiles4 .value { display: block; margin-top: 6px; font-size: var(--fs-kpi); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tiles4 .sub-line { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.tiles4 .card[data-tone="warn"] .value { color: var(--warn-text); }
.tiles4 .card[data-tone="crit"] .value { color: var(--critical-text); }
.review-filters { display: grid; gap: 8px; margin-bottom: 12px; }
.review-list { display: grid; }
.review-group { margin-top: 8px; }
.review-group-title { display: flex; align-items: baseline; gap: 8px; padding: 10px 0 6px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); }
.review-group-title small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.review-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; padding: 12px 4px; min-height: 56px; border-bottom: 1px solid var(--line); text-align: left; color: inherit; border-radius: var(--r-ctl); }
.review-row:last-child { border-bottom: 0; }
button.review-row:hover { background: var(--card-2); }
.review-row .st { margin-top: 2px; }
.review-row strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.review-row small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; margin-top: 2px; }
.review-row .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-sm); }
.review-row .num small { color: var(--muted); font-weight: 500; }
.review-items { display: grid; }
.review-main { min-width: 0; }
.review-main .review-summary { color: var(--ink-2); overflow-wrap: anywhere; }
.review-main .review-meta { color: var(--muted); }
.rev-tile { min-height: 0; }
.recon th:first-child, .recon td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
.review-card { padding: 14px 2px; border-bottom: 1px solid var(--line); }
.review-card:last-child { border-bottom: 0; }
.review-card p { margin: 8px 0 6px; line-height: 1.45; font-size: var(--fs-sm); }
.review-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-limit-note { padding: 12px 2px; color: var(--muted); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }

/* ---------- Systemen ---------- */
.systems-scope-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--card-2); }
.systems-scope-switch button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 12px; border-radius: calc(var(--r-inner) - 3px); color: var(--muted); font-size: var(--fs-sm); font-weight: 650; }
.systems-scope-switch button[aria-selected="true"] { color: var(--ink); background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.scope-badge { min-width: 28px; padding: 2px 7px; border-radius: 999px; color: var(--ink-2); background: var(--line); font-size: var(--fs-2xs); font-weight: 750; text-align: center; }
.scope-badge[data-tone="ok"] { color: var(--good-text); background: color-mix(in srgb, var(--good) 17%, transparent); }
.scope-badge[data-tone="warn"] { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 20%, transparent); }
.scope-badge[data-tone="crit"] { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 16%, transparent); }
.systems-scope-panel { min-width: 0; }
.platform-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 2px 0 12px; }
.platform-intro .stand { margin-top: 3px; }
.platform-health-card .platform-response { font-size: var(--fs-2xs); }
@media (max-width: 520px) {
  .systems-scope-switch button { padding-inline: 8px; font-size: var(--fs-xs); }
  .platform-intro { align-items: flex-start; flex-direction: column; }
}
.health-groups { display: grid; gap: 14px; margin-bottom: 0; }
.health-group { display: grid; gap: 10px; }
.health-group > h3, .health-group-title { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.health-group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.health-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 719px) { .health-cards { grid-template-columns: 1fr; } }
.health-card, .health-component-card { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--card); }
.health-card[data-tone="crit"], .health-component-card[data-tone="crit"] { border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }
.health-card[data-tone="warn"], .health-component-card[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.health-card-head, .health-component-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.health-card-head strong, .health-component-heading strong { font-size: var(--fs-sm); font-weight: 600; }
.health-card small, .health-component-note { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.health-issue { color: var(--warn-text); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; }
.health-issue code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-2xs); }
.fresh-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; font-size: var(--fs-2xs); color: var(--muted); }
.fresh-bar .track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.fresh-bar .fill { display: block; height: 100%; border-radius: 3px; background: var(--good); }
.fresh-bar .fill[data-tone="warn"] { background: var(--warn); }
.fresh-bar .fill[data-tone="crit"] { background: var(--critical); }
.health-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.health-metrics span { padding: 3px 8px; border-radius: 6px; background: var(--card-2); color: var(--ink-2); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.health-metrics span.health-gap { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 18%, transparent); }
.health-financial { grid-column: 1 / -1; }
.health-financial[data-tone="info"] { border-color: color-mix(in srgb, var(--info) 35%, var(--line)); }
.health-financial > strong { font-size: var(--fs-md); }
.health-stage-list { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.health-stage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-xs); }
.log-head { margin-bottom: 8px; }
.log-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 8px; }
.log-filters .field { flex: 1 1 140px; }
.log-filters select { padding: 9px 11px; }
.log-list { display: grid; }
.log-row { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.log-row:last-child { border-bottom: 0; }
.log-marker { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--line-strong); }
.log-marker[data-tone="ok"], .log-marker.ok, .log-marker.success { background: var(--good); }
.log-marker[data-tone="warn"], .log-marker.warning, .log-marker.partial { background: var(--warn); }
.log-marker[data-tone="crit"], .log-marker.error, .log-marker.failed { background: var(--critical); }
.log-marker[data-tone="info"], .log-marker.running { background: var(--info); }
.log-main { min-width: 0; }
.log-main strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.log-main small, .log-main > small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.log-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.log-side { display: grid; justify-items: end; align-content: start; gap: 4px; }
.log-duration { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-error { margin-top: 6px; color: var(--critical-text); font-size: var(--fs-xs); font-weight: 600; }
.log-error code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#updater-log-foot, #reviews-coverage-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- Bonnen (functioneel ongewijzigd) ---------- */
.receipts { width: min(100%, 760px); margin: 0 auto; display: grid; gap: 12px; }
.garage-tabs { display: grid; grid-template-columns: repeat(3, 1fr); position: sticky; top: 8px; z-index: 5; }
.garage-tabs button { min-height: 40px; text-align: center; }
.capture-intro { display: flex; align-items: flex-start; gap: 14px; }
.capture-intro h3 { font-size: var(--fs-lg); font-weight: 700; }
.capture-intro .muted { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.45; }
.step-number { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: var(--r-inner); color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.document-kind-field { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.capture-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.camera-button, .album-button { min-height: 60px; }
.camera-button { background: var(--accent); color: var(--accent-ink); }
.photo-review { margin-top: 16px; display: grid; gap: 12px; }
.preview-wrap { position: relative; overflow: hidden; border-radius: var(--r-inner); background: var(--card-2); max-height: 440px; }
#photo-preview { width: 100%; max-height: 440px; object-fit: contain; display: block; }
.quality-badge { position: absolute; left: 12px; bottom: 12px; border-radius: 999px; padding: 6px 10px; color: var(--accent-ink); background: var(--accent); font-size: var(--fs-xs); font-weight: 700; }
.quality-badge:empty { display: none; }
.quality-badge.bad { background: var(--critical); color: #fff; }
.quality-message { font-weight: 600; font-size: var(--fs-sm); }
.quality-message:empty { display: none; }
.receipt-context { display: grid; gap: 14px; }
.purpose-suggestion-status { display: block; border-radius: var(--r-ctl); padding: 8px 10px; color: var(--muted); background: var(--card-2); font-size: var(--fs-xs); font-weight: 600; }
.purpose-suggestion-status.working { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.purpose-suggestion-status.success { color: var(--good-text); background: color-mix(in srgb, var(--good) 14%, transparent); }
.progress { display: flex; align-items: center; gap: 14px; margin-top: 16px; border-radius: var(--r-inner); padding: 14px; background: var(--card-2); font-size: var(--fs-sm); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex: 0 0 auto; }
.error-panel, .warning-panel, .inline-status { margin-top: 14px; border-radius: var(--r-inner); padding: 12px 14px; font-size: var(--fs-sm); line-height: 1.45; }
.error-panel { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 10%, transparent); border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent); }
.warning-panel { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.inline-status { margin: 0 0 12px; color: var(--ink-2); background: var(--card-2); }
.inline-status.error-panel { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 10%, transparent); }
.button-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.button-row .btn-secondary, .button-row .secondary { width: auto; }
.bulk-review { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.bulk-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bulk-heading h3 { font-size: var(--fs-lg); }
.bulk-review > .muted { margin-top: 6px; font-size: var(--fs-sm); }
.compact-button { width: auto; min-height: var(--tap); padding: 8px 12px; white-space: nowrap; }
.bulk-defaults { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--card-2); }
.bulk-status { min-height: 1.4em; margin: 12px 2px 8px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.bulk-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bulk-item { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--card); }
.bulk-item.bulk-invalid, .bulk-item.bulk-failed { border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }
.bulk-item.bulk-duplicate { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.bulk-item.bulk-stored { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.bulk-thumb { width: 74px; height: 88px; border-radius: var(--r-ctl); object-fit: cover; background: var(--card-2); }
.bulk-item-main { min-width: 0; }
.bulk-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bulk-item-heading > div { display: grid; min-width: 0; gap: 3px; }
.bulk-file-name { overflow: hidden; color: var(--muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.bulk-remove { min-width: var(--tap); min-height: var(--tap); margin: -8px -8px 0 0; color: var(--critical-text); font-size: var(--fs-xs); font-weight: 700; }
.bulk-item-status { display: inline-flex; width: fit-content; margin-top: 6px; border-radius: 999px; padding: 3px 8px; color: var(--ink-2); background: var(--card-2); font-size: var(--fs-2xs); font-weight: 700; }
.bulk-item-status[data-status="ready"], .bulk-item-status[data-status="stored"] { color: var(--good-text); background: color-mix(in srgb, var(--good) 16%, transparent); }
.bulk-item-status[data-status="uploading"], .bulk-item-status[data-status="inspecting"] { color: var(--info-text); background: color-mix(in srgb, var(--info) 16%, transparent); }
.bulk-item-status[data-status="duplicate"] { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 20%, transparent); }
.bulk-item-status[data-status="invalid"], .bulk-item-status[data-status="failed"] { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 16%, transparent); }
.bulk-item-main > p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.bulk-item-details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.bulk-item-details summary { min-height: var(--tap); display: flex; align-items: center; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.bulk-item-fields { display: grid; gap: 10px; padding-top: 8px; }
.bulk-item-fields input, .bulk-item-fields select { padding: 10px 11px; }
.bulk-item-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bulk-item-actions .btn-text, .bulk-item-actions .text-button { grid-column: 1 / -1; }
.bulk-item-actions .btn-secondary, .bulk-item-actions .secondary { min-height: var(--tap); padding: 8px; font-size: var(--fs-sm); }
.bulk-retry { min-height: var(--tap); margin-top: 10px; padding: 8px; font-size: var(--fs-sm); }
.bulk-actions { display: grid; gap: 8px; margin-top: 14px; }
.bulk-summary { margin-top: 12px; border-radius: var(--r-inner); padding: 12px; color: var(--good-text); background: color-mix(in srgb, var(--good) 14%, transparent); font-weight: 600; text-align: center; font-size: var(--fs-sm); }
.archive-group-title { margin: 4px 0 10px; font-size: var(--fs-md); font-weight: 700; }
.camera-archive-title { margin-top: 24px; }
.archive-note { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-sm); }
.receipt-list { display: grid; gap: 10px; }
.receipt-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-width: 0; overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--card); text-align: left; color: inherit; }
.receipt-card:hover { background: var(--card-2); }
.receipt-thumb { width: 76px; height: 88px; border-radius: var(--r-ctl); object-fit: cover; background: var(--card-2); }
.receipt-main { min-width: 0; }
.receipt-main h3 { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-meta { color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; }
.receipt-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt-card .status { margin-top: 6px; }
.duplicate-dot { color: var(--warn-text); font-weight: 700; margin-left: 5px; }
.gmail-list { display: grid; gap: 10px; }
.gmail-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-inner); color: inherit; background: var(--card); text-align: left; }
.gmail-card:hover { background: var(--card-2); }
.gmail-file-icon { display: grid; place-items: center; width: 52px; height: 56px; border-radius: var(--r-ctl); color: var(--critical-text); background: color-mix(in srgb, var(--critical) 12%, transparent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; }
.gmail-file-icon.large { width: 62px; height: 68px; flex: 0 0 62px; }
.gmail-card-main { min-width: 0; }
.gmail-card-main > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.gmail-card-main > small { display: block; overflow-wrap: anywhere; margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); }
.gmail-chevron { color: var(--muted); font-size: 1.6rem; }
.gmail-detail-head { display: flex; gap: 14px; align-items: center; padding: 24px 64px 16px 20px; border-bottom: 1px solid var(--line); }
.gmail-detail-head > div { min-width: 0; }
.gmail-detail-head h2 { overflow-wrap: anywhere; font-size: var(--fs-xl); }
.gmail-detail-body { padding-top: 16px; }
.gmail-pdf-link { display: inline-flex; margin: 0 0 16px; }
.gmail-review-fields { display: grid; gap: 12px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.gmail-decision-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.gmail-decision-actions .btn-primary, .gmail-decision-actions .primary { grid-column: 1 / -1; }
.processing-note { color: var(--info-text); background: color-mix(in srgb, var(--info) 12%, transparent); border-radius: var(--r-inner); padding: 12px; font-weight: 600; font-size: var(--fs-sm); }

/* ---------- Detaildialogs (bon, Gmail) ---------- */
dialog.detail-dialog { width: min(680px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: 92vh; max-height: 92dvh; overflow-x: hidden; border: 0; border-radius: 20px; padding: 0; color: var(--ink); background: var(--card); box-shadow: 0 28px 100px rgba(15,23,42,.28); }
.dialog-close { position: sticky; float: right; z-index: 2; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--bg); border: 0; }
#receipt-detail, #gmail-detail { min-width: 0; padding-bottom: 20px; }
.detail-image { width: 100%; max-width: 100%; max-height: 52vh; object-fit: contain; background: var(--card-2); display: block; }
.detail-body { min-width: 0; padding: 20px; }
.detail-body h2 { font-size: var(--fs-xl); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.detail-field { min-width: 0; background: var(--card-2); border-radius: var(--r-inner); padding: 10px 12px; font-size: var(--fs-sm); }
.detail-field.full { grid-column: 1 / -1; }
.detail-field small { display: block; color: var(--muted); margin-bottom: 3px; font-size: var(--fs-xs); }
.detail-field strong, .line-item strong, .line-item small { overflow-wrap: anywhere; }
.line-items { display: grid; gap: 8px; margin: 14px 0; }
.line-review-intro { color: var(--ink); background: var(--card-2); border-radius: var(--r-inner); padding: 12px; margin-bottom: 4px; font-size: var(--fs-sm); }
.line-review-intro small { color: var(--muted); }
.receipt-review-summary { display: grid; gap: 3px; margin: 14px 0 6px; padding: 12px; border-radius: var(--r-inner); background: var(--accent-soft); color: var(--ink); }
.receipt-review-summary span { color: var(--muted); font-size: var(--fs-sm); }
.line-item { display: grid; min-width: 0; gap: 6px; border-bottom: 1px solid var(--line); padding: 10px 0; font-size: var(--fs-sm); }
.line-item-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.line-item-heading > * { min-width: 0; }
.line-item-heading > div { display: grid; gap: 4px; }
.line-item small { color: var(--muted); font-size: var(--fs-xs); }
.line-type { justify-self: start; display: inline-flex; width: fit-content; padding: 2px 7px; border-radius: 999px; color: var(--ink-2); background: var(--card-2); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.line-type.discount { color: var(--good-text); background: color-mix(in srgb, var(--good) 14%, transparent); }
.discount-line { border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); border-radius: var(--r-inner); padding: 10px 12px; }
.confirmation { color: var(--warn-text) !important; }
.item-review { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr) minmax(0, .75fr); gap: 8px; margin-top: 4px; }
.item-review label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: var(--fs-xs); }
.item-review input, .item-review select { min-width: 0; padding: 9px 10px; font-size: 16px; }
.item-review.is-private label:not(:first-child) { opacity: .65; }
.artifact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.artifact-link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); background: var(--accent-soft); border-radius: var(--r-inner); padding: 8px 12px; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.artifact-pending { color: var(--muted); padding: 8px 0; font-size: var(--fs-sm); }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.detail-actions .btn-primary, .detail-actions .primary { grid-column: 1 / -1; }
.duplicate-warning { color: var(--warn-text); background: color-mix(in srgb, var(--warn) 14%, transparent); border-radius: var(--r-inner); padding: 12px; margin: 12px 0; font-size: var(--fs-sm); }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobiel ---------- */
@media (max-width: 719px) {
  .group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .entity-switch { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
  .entity-switch[hidden] { display: none; }
  .entity-switch button { min-height: 32px; text-align: center; padding: 0 6px; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .avatar { display: none; }
  .page-title { margin: 4px 0 8px; }
  .page-title h1 { font-size: 1.375rem; }
  .filters { position: sticky; top: 0; z-index: 15; margin: 0 -16px 12px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .period-btn { min-height: 48px; flex: 1; justify-content: space-between; }
  .period-btn-text { flex: 1; flex-wrap: wrap; gap: 2px 8px; }
  .filters.is-stuck .period-btn { min-height: 40px; font-size: var(--fs-sm); }
  .compare { width: 100%; justify-content: space-between; }
  .compare .seg { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .filters.is-stuck .compare { display: none; }
  .card { scroll-margin-top: 64px; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "label" "value" "delta" "stats" "spark"; }
  .hero .value { font-size: 2.25rem; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); align-self: start; max-width: none; }
  .hero-stats .stat { display: grid; gap: 2px; }
  .hero-stats .stat:nth-child(n+4) { display: none; }
  .hero-stats dd, .hero-stats dt { text-align: left; white-space: normal; }
  .hero-spark { height: 40px; margin-top: 6px; }
  .kpis { gap: 10px; }
  .tile .value { font-size: 1.25rem; }
  .tile .delta { white-space: normal; flex-wrap: wrap; }
  .tile .delta small { flex-basis: 100%; }
  .tile svg.spark { min-height: 30px; max-height: 40px; }
  .card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-flow: dense; align-items: start; margin-bottom: 12px; }
  .card-head .collapse-btn { margin-left: 0; }
  .card-head .note[data-notice], .card-head .band[data-notice], .card-head .tag[data-notice] { grid-column: 1 / -1; }
  .card-head .tag[data-notice] { width: fit-content; }
  .card-head .link { min-height: var(--tap); margin-top: -6px; }
  .card-head .seg { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 4px; }
  .card-head .chips { grid-column: 1 / -1; }
  .seg button { min-height: 40px; padding: 8px 0; text-align: center; font-size: var(--fs-sm); }
  .chips button { min-height: 36px; }
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout.legend { grid-template-columns: 1fr; }
  .readout .total-btn { grid-column: 1 / -1; }
  .stats3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prov-head { display: none; }
  .prov-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; }
  .doc-stats { grid-template-columns: 1fr; }
  .doc-group + .doc-group { border-left: 0; padding-left: 0; margin-left: 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .mix th.c5, .mix td.c5 { display: none; }
  .mut thead { position: absolute; clip-path: inset(50%); }
  .mut, .mut tbody, .mut tfoot { display: block; }
  .mut colgroup { display: none; }
  .mut tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc num" "meta meta"; column-gap: 12px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mut td { display: block; padding: 0; border: 0; }
  .mut td[data-col="omschrijving"] { grid-area: desc; }
  .mut td[data-col="omschrijving"] .desc, .mut td[data-col="omschrijving"] .sub { white-space: normal; }
  .mut td.num { grid-area: num; align-self: start; font-weight: 700; }
  .mut td[data-col="datum"] { grid-area: meta; font-size: var(--fs-xs); color: var(--muted); }
  .mut tfoot tr { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
  .table-wrap { margin: 0; }
  /* Aansluitingstabel (8 kolommen) blijft horizontaal scrollbaar binnen de kaart. */
  #reconciliation-card .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
  .recon { min-width: 620px; }
  .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .health-cards { grid-template-columns: 1fr; }
  .capture-actions { gap: 8px; }
  .block-options, .notification-options { grid-template-columns: 1fr; }
  .notification-device-card { grid-template-columns: 1fr; }
  .notification-action { width: 100%; }
  .receipt-card { grid-template-columns: 64px minmax(0, 1fr); }
  .receipt-thumb { width: 64px; height: 76px; }
  .receipt-amount { grid-column: 2; justify-self: start; }
  .detail-grid { grid-template-columns: 1fr; }
  dialog.detail-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); border-radius: 16px; }
  .detail-body { padding: 18px 14px; }
  .item-review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-review label:first-child { grid-column: 1 / -1; }
  .gmail-card { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 10px; }
  .gmail-file-icon { width: 48px; height: 52px; }
  .gmail-detail-head { padding-left: 14px; }
  .bulk-item { grid-template-columns: 62px minmax(0, 1fr); padding: 10px; }
  .bulk-thumb { width: 62px; height: 76px; }
  dialog.sheet { width: 100vw; max-width: none; margin: auto 0 0; max-height: 85dvh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.settings-sheet { max-height: 92dvh; }
  .grabber { display: block; }
  .sheet-head { top: 0; }
  .o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o5 { order: 5; } .o6 { order: 6; } .o7 { order: 7; } .o8 { order: 8; } .o9 { order: 9; } .o10 { order: 10; } .o11 { order: 11; } .o12 { order: 12; }
  /* O-Tools-laag op mobiel direct na de hoofdgrafiek (zonder eigen order sprongen de kaarten vóór de kerncijfers). */
  .otools-overview-card, .otools-card, .price-strategy-card, .workforce-card, .employees-card, #orders-card { order: 5; }
}
@media (max-width: 380px) {
  .capture-actions { grid-template-columns: 1fr; }
  .tiles4 { grid-template-columns: 1fr; }
}

/* ---------- Beweging en contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .icon-btn[aria-busy="true"] .busy-text { display: inline; position: absolute; left: 100%; margin-left: 6px; font-size: var(--fs-2xs); white-space: nowrap; }
  .card[data-state="loading"]:not(.has-render)::after { animation: none; background: var(--line); }
}
@media (forced-colors: active) {
  .seg button[aria-pressed="true"], .entity-switch button[aria-pressed="true"], .icon-btn[aria-pressed="true"], .chips button[aria-pressed="true"], .rail a[aria-current], .bottom-nav a[aria-current] { outline: 2px solid CanvasText; }
  .dot, .st, .runs i, .stack span, .bars i, .mix i, .readout i, .tile .key, .hatch-legend, .key, .comp-bar i, .cost-row .bar-fill, .cost-row .bar-prev, .fresh-bar .fill, .log-marker, .st-chip i { forced-color-adjust: none; }
  .card, .login-card, dialog { border: 1px solid CanvasText; }
}

/* ---------- v4: navigatie-badge en melding onderaan (AI) ---------- */
.rail a { position: relative; }
.nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.nav-badge[hidden] { display: none; }
.rail .nav-badge { margin-left: auto; }
.bottom-nav .nav-badge { position: absolute; top: 3px; left: calc(50% + 6px); }
.toast { position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 30; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; max-width: 360px; margin-inline: auto; padding: 5px 6px 5px 10px; border-radius: var(--r-inner); background: var(--ink); color: var(--bg); box-shadow: 0 8px 20px rgba(15,23,42,.22); font-size: 12px; font-weight: 600; }
.toast[hidden] { display: none; }
.toast > .icon { width: 16px; height: 16px; color: var(--accent); }
.toast[data-tone="crit"] > .icon { color: var(--critical); }
.toast-text { min-width: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-action { color: var(--accent); font-weight: 700; text-decoration: none; padding: 6px 4px; white-space: nowrap; border-radius: var(--r-ctl); }
.toast-close { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--bg); opacity: .8; }
.toast-close .icon { width: 16px; height: 16px; }
@media (min-width: 1100px) { .toast { left: auto; right: 24px; bottom: 20px; width: min(320px, calc(100vw - 48px)); } }

/* ---------- v4: inklapbare schermsecties (Systemen, AI) ---------- */
.sec { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.sec > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; cursor: pointer; list-style: none; border-radius: var(--r-card); }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary:hover { background: var(--card-2); }
.sec[open] > summary { border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 1px solid var(--line); }
.sec-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.sec-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: 0 0 8px; }
.sec[data-tone="ok"] .sec-title::before { background: var(--good); }
.sec[data-tone="warn"] .sec-title::before { background: var(--warn); }
.sec[data-tone="crit"] .sec-title::before { background: var(--critical); }
.sec[data-tone="info"] .sec-title::before { background: var(--info); }
.sec-sum { color: var(--muted); font-size: var(--fs-xs); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-sum:empty { display: none; }
.sec-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; }
.sec[open] > summary .sec-chev { transform: rotate(180deg); }
.sec-body { padding: 12px 16px 16px; }
.sec-body > .grid { gap: 12px; }
.sec .card { box-shadow: none; }
.sec-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sec-toolbar .stand { margin: 0; flex: 1; min-width: 0; }
.log-hint { margin-bottom: 8px; }
@media (min-width: 1100px) { .sec > summary { padding: 12px 22px; } .sec-body { padding: 16px 22px 20px; } }
@media (max-width: 719px) {
  .sec > summary { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 2px; }
  .sec-sum { grid-column: 1; text-align: left; white-space: normal; }
  .sec-chev { grid-column: 2; grid-row: 1 / span 2; }
  .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
.health-line { color: var(--muted); }
.health-more > summary { display: flex; align-items: center; width: fit-content; min-height: 32px; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; list-style: none; }
.health-more > summary::-webkit-details-marker { display: none; }
.health-more > summary::after { content: " ›"; white-space: pre; }
.health-more[open] > summary::after { content: " ˅"; }
.health-more-body { display: grid; gap: 8px; padding-top: 4px; }

/* ---------- v4: AI-voorstellen ---------- */
.ai-filters { display: grid; gap: 8px; margin-bottom: 12px; }
.ai-filters .chips[hidden] { display: none; }
.ai-sort { width: fit-content; }
.ai-list { display: grid; gap: 10px; }
.ai-card { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); cursor: pointer; }
.ai-card:hover { background: var(--card-2); }
.ai-card[data-tone="crit"] { border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }
.ai-card[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.ai-card:not([data-state="open"]) { opacity: .88; }
.ai-card-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.ai-card-title { display: grid; gap: 3px; min-width: 0; }
.ai-card-title strong { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.ai-card-title .tag { width: fit-content; }
.ai-impact { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-sm); }
.ai-impact.neg { color: var(--critical-text); }
.ai-summary { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ai-meta { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.ai-actions .btn-small { min-height: 36px; padding: 6px 12px; }
.ai-accept { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ai-details { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; }
.ai-details .chev { width: 14px; height: 14px; }
.ai-decision { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.ai-tile[data-tone="warn"] .value { color: var(--warn-text); }
.ai-tile[data-tone="ok"] .value { color: var(--good-text); }
.ai-runs { display: grid; }
.ai-run { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ai-run:last-child { border-bottom: 0; }
.ai-run-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ai-run-head strong { font-size: var(--fs-sm); }
.ai-run small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.ai-detail-body h2 { margin-top: 8px; font-size: var(--fs-xl); line-height: 1.3; }
.ai-detail-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ai-detail-summary { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.ai-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.ai-fact { padding: 8px 10px; border-radius: var(--r-inner); background: var(--card-2); min-width: 0; }
.ai-fact dt { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; }
.ai-fact dd { font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 719px) { .ai-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ai-action { margin: 0 0 12px; }
.ai-action[data-tone="neutral"] { color: var(--ink-2); background: var(--card-2); border-color: var(--line); }
.ai-why { margin-bottom: 14px; }
.ai-why > summary { min-height: 36px; display: flex; align-items: center; width: fit-content; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; list-style: none; }
.ai-why > summary::-webkit-details-marker { display: none; }
.ai-why > summary::after { content: " ›"; white-space: pre; }
.ai-why[open] > summary::after { content: " ˅"; }
.ai-why p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; padding-bottom: 4px; }
.ai-evidence, .ai-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.ai-evidence h3, .ai-history h3 { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ai-totals { display: grid; gap: 4px; }
.ai-totals div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); }
.ai-totals dd { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-mutations { min-width: 520px; }
.ai-mutations td, .ai-mutations th { padding: 8px 6px; }
.ai-mutations td .desc { white-space: normal; }
.ai-mutations .neg { color: var(--critical-text); }
.ai-ledgers { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.ai-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ai-timeline li { position: relative; padding-left: 18px; font-size: var(--fs-sm); }
.ai-timeline li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ai-timeline li[data-type="accepted"]::before, .ai-timeline li[data-type="executed"]::before, .ai-timeline li[data-type="verified"]::before { background: var(--good); }
.ai-timeline li[data-type="rejected"]::before, .ai-timeline li[data-type="execution_failed"]::before { background: var(--critical); }
.ai-timeline li[data-type="created"]::before, .ai-timeline li[data-type="updated"]::before, .ai-timeline li[data-type="reopened"]::before { background: var(--accent); }
.ai-timeline .t { display: flex; justify-content: space-between; gap: 10px; }
.ai-timeline .when { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.ai-timeline small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.ai-detail-actions { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .ai-detail-actions { grid-template-columns: 1fr 1fr; } .ai-detail-actions .ai-decision, .ai-detail-actions .btn-text { grid-column: 1 / -1; } }
.decision-form { display: grid; gap: 12px; padding: 12px 20px 8px !important; }
.decision-form textarea { width: 100%; min-height: 84px; resize: vertical; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-inner); background: var(--card); color: var(--ink); }
.decision-form .field { display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.decision-form .hint { line-height: 1.45; font-size: var(--fs-xs); }
.decision-form .error:empty { display: none; }
.decision-foot { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.decision-foot .btn-text { min-height: 48px; padding: 0 12px; background: none; color: var(--ink-2); }
.decision-foot #ai-decision-confirm.danger-action { background: var(--critical); color: #fff; }
body[data-view="ai"] .page-title { margin-bottom: 12px; }

/* ---------- v4: blokvolgorde in de instellingen-sheet ---------- */
.block-order-hint { margin: 0 4px 6px; }
.block-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.block-order li { display: grid; grid-template-columns: 28px 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 44px; padding: 2px 4px 2px 2px; border-radius: var(--r-inner); background: var(--card-2); border: 1px solid transparent; }
.block-order li.is-dragging { opacity: .45; }
.block-order li:focus-within { border-color: var(--line-strong); }
.block-order .handle { display: grid; place-items: center; width: 28px; height: 40px; color: var(--muted); cursor: grab; touch-action: none; border-radius: var(--r-ctl); }
.block-order .handle:active { cursor: grabbing; }
.block-order .handle .icon { width: 16px; height: 16px; }
.block-order .pos { color: var(--muted); font-size: var(--fs-2xs); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.block-options .block-order label { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 0 4px; border: 0; border-radius: var(--r-ctl); background: none; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.block-order label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-order li:has(input:not(:checked)) label { color: var(--muted); }
.block-order .moves { display: inline-flex; gap: 2px; }
.block-order .moves button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-ctl); color: var(--ink-2); }
.block-order .moves button:hover { background: var(--card); }
.block-order .moves button:disabled { opacity: .3; cursor: default; }
.block-order .moves .icon { width: 16px; height: 16px; }
.block-order .moves .up .icon { transform: rotate(180deg); }

/* ---------- v4: Bonnen compacter ---------- */
.receipts { gap: 10px; }
.capture-card { padding: 14px 16px; }
.capture-intro h3 { font-size: var(--fs-md); }
.capture-intro .muted { font-size: var(--fs-xs); margin-top: 2px; }
.step-number { flex-basis: 28px; height: 28px; font-size: var(--fs-sm); }
.document-kind-field { margin-top: 12px; padding-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.document-kind-field select { padding: 9px 11px; }
.capture-actions { margin-top: 12px; }
.camera-button, .album-button { min-height: 52px; }
.archive-panel .card-head { margin-bottom: 10px; }
.receipt-list { gap: 6px; }
.receipt-card { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
.receipt-thumb { width: 52px; height: 60px; }
.receipt-main h3 { font-size: var(--fs-sm); }
.receipt-meta { margin-top: 2px; }
.receipt-card .status { margin-top: 4px; }

/* ---------- v4: verfijningen na QA-ronde 3 ---------- */
.page-title h1:focus-visible { outline: none; }
.review-more { min-height: 40px; padding: 6px 4px; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }
.review-more::after { content: " ›"; white-space: pre; }
.review-more[aria-expanded="true"]::after { content: " ˄"; }
.ai-mutations { min-width: 560px; }
.ai-mutations .col-date { width: 64px; }
.ai-mutations .col-nr { width: 54px; }
.ai-mutations .col-ledger { width: 70px; }
.ai-mutations .col-amount { width: 98px; }
.ai-mutations td .desc, .ai-mutations td .sub { white-space: normal; overflow: visible; font-weight: 500; }

/* ---------- v4: bestellingen en retouren ---------- */
.orders-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.orders-tiles .card { padding: 10px 12px; }
.orders-tiles .value { font-size: 1.25rem; margin-top: 4px; }
.orders-tiles .delta { display: flex; flex-wrap: wrap; column-gap: 4px; margin-top: 4px; font-size: var(--fs-xs); }
.orders-tiles .delta small { flex-basis: 100%; font-size: var(--fs-2xs); color: var(--muted); font-weight: 500; }
@media (max-width: 719px) { .orders-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.orders-readout { margin-bottom: 4px; }
.orders-chart { display: block; width: 100%; height: 200px; }
.orders-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.orders-legend span { display: inline-flex; align-items: center; gap: 6px; }
.orders-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.hatch-ink { background: repeating-linear-gradient(135deg, var(--ink-2) 0 1px, transparent 1px 3px); outline: 1px solid var(--ink-2); outline-offset: -1px; }
.orders-bar.partial { fill-opacity: .45; }
.returns-bar { stroke: var(--ink-2); stroke-width: 1; }
#orders-card .bar.active { fill-opacity: 1; }

/* ---------- O-Tools (operationele laag: Shopify-resultaat, medewerkers, bestellingen) ---------- */
.otools-group { color: var(--otools); }
.otools-group::after { background: var(--otools-line); }
.card-head h3 .tag { margin-left: 8px; vertical-align: 2px; font-size: var(--fs-2xs); letter-spacing: .02em; }
.tag.otools { color: var(--otools); background: var(--otools-soft); border: 1px solid var(--otools-line); }
.otools-tiles, .workforce-tiles, .price-strategy-tiles { gap: 8px; margin-bottom: 12px; }
.otools-tiles .card, .workforce-tiles .card, .price-strategy-tiles .card { padding: 10px 12px; }
.otools-tiles .value, .workforce-tiles .value, .price-strategy-tiles .value { font-size: 1.25rem; margin-top: 4px; }
.otools-content { display: grid; grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr); gap: 22px; align-items: start; }
.panel-title { margin: 0 0 6px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bridge { display: grid; }
.bridge-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "bar bar"; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.bridge-row:first-child { border-top: 0; padding-top: 0; }
.bridge-row .name { grid-area: name; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.bridge-row .name b { display: inline-block; width: 12px; color: var(--muted); font-weight: 600; }
.bridge-row .amt { grid-area: amt; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.bridge-row .amt small { margin-left: 6px; color: var(--muted); font-weight: 500; font-size: var(--fs-2xs); }
.bridge-row .bar-track { grid-area: bar; height: 4px; border-radius: 2px; background: var(--card-2); }
.bridge-row .bar-fill { display: block; height: 100%; border-radius: 2px; background: var(--muted); }
.bridge-row[data-kind="base"] .bar-fill { background: var(--s-omzet); }
.bridge-row[data-kind="cost"] .bar-fill { background: var(--s-kosten); opacity: .8; }
.bridge-row[data-kind="margin"] .bar-fill, .bridge-row[data-kind="result"] .bar-fill, .bridge-row[data-kind="final"] .bar-fill { background: var(--otools); }
.bridge-row[data-kind="result"], .bridge-row[data-kind="final"] { font-weight: 700; }
.bridge-row[data-kind="result"] .name, .bridge-row[data-kind="final"] .name { color: var(--ink); }
.bridge-row[data-kind="final"] { border-top: 1px solid var(--line-strong); }
.bridge-row.is-negative .amt { color: var(--critical-text); }
.bridge-row.is-negative .bar-fill { background: var(--critical); }
.otools-chart-panel, .workforce-chart-panel { min-width: 0; }
.otools-metric { margin-bottom: 6px; }
.otools-readout, .workforce-readout { flex-wrap: wrap; margin-bottom: 4px; }
.otools-readout b, .workforce-readout b { white-space: normal; text-align: right; }
.otools-chart, .workforce-chart { display: block; width: 100%; height: 200px; }
.otools-bar { fill: var(--otools); }
.otools-bar.negative { fill: var(--critical); }
.otools-bar.partial, .workforce-bar.partial { fill-opacity: .45; }
/* Lopende dag: lichte, omlijnde staaf in de kleur van reeks of medewerker; nooit in het periodetotaal. */
.otools-bar.provisional, .workforce-bar.provisional, .ostrip-bar.provisional { fill-opacity: .22; stroke-width: 1.25; stroke-dasharray: 3 2; }
.otools-bar.provisional { stroke: var(--otools); }
.otools-bar.provisional.negative { stroke: var(--critical); }
.ostrip-bar.provisional.f-otools { stroke: var(--otools); }
.ostrip-bar.provisional.f-kosten { stroke: var(--s-kosten); }
.ostrip-bar.provisional.f-muted { stroke: var(--muted); }
.ostrip-bar.provisional.negative { stroke: var(--critical); }
.otools-card .bar.active, .workforce-card .bar.active { fill-opacity: 1; stroke: var(--ink); stroke-width: 1; }
#otools-chart-sub { margin-top: 6px; }
.workforce-content { display: grid; gap: 16px; }
.workforce-table { table-layout: auto; }
.workforce-table th, .workforce-table td { padding: 8px 6px; white-space: nowrap; }
.workforce-table td:first-child { white-space: normal; }
.workforce-table th:first-child, .workforce-table td:first-child { padding-left: 0; }
.workforce-table th:last-child, .workforce-table td:last-child { padding-right: 0; }
.workforce-table .who { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.workforce-table .who i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.workforce-table .sub { display: none; margin-top: 2px; color: var(--muted); font-size: var(--fs-2xs); font-weight: 500; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.workforce-table tfoot td { font-weight: 700; border-top: 1px solid var(--line-strong); }
.workforce-legend { margin-top: 6px; }
.price-strategy-table { table-layout: auto; }
.price-strategy-table th, .price-strategy-table td { padding: 9px 8px; }
.price-strategy-table th:first-child, .price-strategy-table td:first-child { padding-left: 0; width: 34%; }
.price-strategy-table th:last-child, .price-strategy-table td:last-child { padding-right: 0; }
.price-strategy-table .strategy-name strong { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.price-strategy-table .strategy-name small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-2xs); line-height: 1.35; }
.price-strategy-table .strategy-name .strategy-live { color: var(--otools); }
.price-strategy-table tr.is-active td { background: color-mix(in srgb, var(--otools) 5%, transparent); }
.price-strategy-table .mobile-label { display: none; }
.price-strategy-table .strategy-name .key { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.price-strategy-table .num.strong { font-weight: 700; }
.price-strategy-table .num.neg { color: var(--critical-text); }
.price-strategy-strip { margin-bottom: 14px; }
.price-strategy-card details > summary { min-height: 44px; padding: 10px 0; color: var(--otools); cursor: pointer; }
.price-strategy-card details p { font-size: var(--fs-sm); line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.price-strategy-table details table { width: 100%; max-width: 360px; font-size: var(--fs-sm); }
.price-strategy-table details table caption { text-align: left; white-space: normal; }
.price-strategy-table details table th, .price-strategy-table details table td { padding: 4px 8px; width: auto; }
#price-strategy-evidence { margin-top: 12px; }
@media (max-width: 719px) {
  .otools-content { grid-template-columns: 1fr; gap: 14px; }
  .otools-tiles, .workforce-tiles, .price-strategy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workforce-table .c-desk { display: none; }
  .workforce-table .sub { display: block; }
  .price-strategy-table-wrap { margin: 0; overflow: visible; }
  .price-strategy-table thead { display: none; }
  .price-strategy-table, .price-strategy-table tbody, .price-strategy-table tr, .price-strategy-table td { display: block; width: 100%; }
  .price-strategy-table tr { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-inner); }
  .price-strategy-table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; text-align: right; white-space: normal; }
  .price-strategy-table td:first-child { display: block; width: 100%; padding: 0 0 7px; text-align: left; border-bottom: 1px solid var(--line); }
  .price-strategy-table .mobile-label { display: inline; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; }
  .price-strategy-table .c-desk { display: none; }
  .price-strategy-table .price-config-tiers { display: table; width: 100%; }
  .price-strategy-table .price-config-tiers thead { display: table-header-group; }
  .price-strategy-table .price-config-tiers tbody { display: table-row-group; }
  .price-strategy-table .price-config-tiers tr { display: table-row; margin: 0; padding: 0; border: 0; }
  .price-strategy-table .price-config-tiers td, .price-strategy-table .price-config-tiers th { display: table-cell; width: auto; padding: 4px 8px; text-align: left; border: 0; }
}

/* ---------- O-Tools per dag: veegstrook (mobiel) / vlakken naast elkaar (breed) ---------- */
.ostrip { display: block; }
.ostrip[hidden] { display: none; }
.ostrip .mstrip { padding-bottom: 2px; }
.ostrip .mpane-svg { height: 176px; }
.ostrip-bar.negative { fill: var(--critical); }
.ostrip-bar.partial { fill-opacity: .45; }
.ostrip .bar.active { fill-opacity: 1; stroke: var(--ink); stroke-width: 1; }
/* Getinte achtergrondvlakken en gestreepte niveaulijnen (bv. gemiddelde per prijsconfig). */
.ostrip-band { fill: var(--muted); fill-opacity: .09; }
.ostrip-mark { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 3; stroke-linecap: round; }
.ostrip-legend { margin-top: 2px; }
.ostrip .line { fill: none; stroke-width: 1.5; }
.ostrip .line.prev { stroke-dasharray: 3 3; stroke-opacity: .55; }
.ostrip .mpane-value .delta { font-size: var(--fs-xs); }
.f-muted { fill: var(--muted); }
.sw-otools { background: var(--otools); }
.f-otools { fill: var(--otools); }
@media (min-width: 1100px) {
  .ostrip .mstrip-tabs, .ostrip .mstrip-hint, .ostrip .mpane-meaning { display: none; }
  .ostrip .mstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 22px; overflow: visible; scroll-snap-type: none; }
  .ostrip .mpane { flex: none; }
  /* Gelijke kophoogte per vlak, zodat uitleesregel en grafiek van alle vlakken op één lijn staan. */
  .ostrip .mpane-value { min-height: 108px; align-content: start; }
}

/* ---------- Systemen: startpagina "Alles" ---------- */
.systems-scope-switch { grid-template-columns: repeat(3, 1fr); }
.board-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.board-tiles .card { grid-column: auto; }
.board-tile { display: grid; align-content: start; gap: 2px; padding: 10px 12px; text-align: left; }
.board-tile .value { margin-top: 4px; font-size: var(--fs-md); }
.board-tile[data-tone="ok"] .value { color: var(--good-text); }
.board-tile[data-tone="warn"] .value { color: var(--warn-text); }
.board-tile[data-tone="crit"] .value { color: var(--critical-text); }
.board-tile[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.board-tile[data-tone="crit"] { border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }
.board-tile:hover { background: var(--card-2); }
.board-groups { display: grid; gap: 14px; }
.board-group { display: grid; gap: 8px; }
.board-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }
.st-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: 0 0 8px; }
.st-chip:hover { background: var(--card-2); }
.st-chip[data-tone="info"] i { background: var(--info); }
.st-chip[data-tone="warn"] { color: var(--ink); border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.st-chip[data-tone="warn"] i { background: var(--warn); }
.st-chip[data-tone="crit"] { color: var(--ink); border-color: color-mix(in srgb, var(--critical) 55%, var(--line)); background: color-mix(in srgb, var(--critical) 8%, var(--card)); }
.st-chip[data-tone="crit"] i { background: var(--critical); }
button.attn-row { width: 100%; text-align: left; }
button.attn-row:hover { background: var(--card-2); }
.board-hint { margin-top: 12px; }
.is-highlight { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-inner); }
@media (max-width: 719px) {
  .board-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Systemen: VPS & O-Tools als inklapbare groepen ---------- */
.platform-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.platform-intro .hint { line-height: 1.4; }
.platform-sections .sec { margin-bottom: 10px; }
.platform-sections .sec-body { padding-top: 10px; }
.platform-sec-sub { margin: 0 0 10px; }
.platform-sections .health-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 719px) {
  .platform-intro { align-items: flex-start; flex-direction: column; }
  .platform-sections .health-cards { grid-template-columns: 1fr; }
}