/* Klaro — stijlen. Geladen na gridstack.min.css zodat overrides winnen. */

/* Space Grotesk self-hosted (variabel, 300–700): een Google Fonts-link zou
   op productie door de CSP geblokkeerd worden (fonts.googleapis.com staat
   niet in style-src) en stil terugvallen op het systeemlettertype.
   Self-hosten valt onder font-src 'self' — geen CSP-wijziging nodig.
   Space Grotesk heeft mono-afgeleide, sterk uitlijnende cijfers: prettig
   voor een cijferdashboard. Max. gewicht is 700 (variabel bereik 300–700). */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── THEME VARIABLES ─────────────────────────────────────────────────────── */
:root {
  /* Aliassen — veel inline styles verwijzen naar deze namen */
  --accent: #6366f1;
  /* Mengdoel voor de tintladder in de resultaat-samenstellingsbalk: tinten
     mengen WEG van de achtergrond (donker → lichter, licht → donkerder).
     Bewust niet --bg-card (dat recedeert en kost contrast), en bewust CSS
     i.p.v. JS: toggleTheme() rendert de Resultaat-tab niet opnieuw, dus in JS
     berekende tinten zouden na een themawissel stil verkeerd blijven staan. */
  --res-tint-to: #ffffff;
  --bg-main: #0f172a;
  --border: #334155;
  --bg-body: #0f172a;
  --bg-card: #1e293b;
  --bg-sidebar: #0b1120;
  --bg-input: #0f172a;
  --bg-hover: rgba(99,102,241,0.06);
  --bg-active: rgba(99,102,241,0.1);
  --bg-tooltip: #1e293b;
  --border-primary: #1e293b;
  --border-secondary: #334155;
  --border-input: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --text-faint: #475569;
  --btn-secondary-bg: #334155;
  --btn-secondary-hover: #475569;
  --badge-gray-bg: #1e293b;
  --badge-gray-border: #334155;
  --badge-green-bg: #064e3b;
  --badge-green-color: #6ee7b7;
  --badge-yellow-bg: #451a03;
  --badge-yellow-color: #fcd34d;
  --badge-red-bg: #450a0a;
  --badge-red-color: #fca5a5;
  --badge-blue-bg: #1e3a5f;
  --badge-blue-color: #93c5fd;
  --error-bg: #451a2a;
  --error-color: #fca5a5;
  --info-bg: #1a2744;
  --info-color: #93c5fd;
  --chart-grid: #1e293b;
  --chart-tick: #94a3b8;
  --scrollbar-thumb: #475569;
  --tl-selected-bg: rgba(20,184,166,0.13);
  --placeholder-bg: rgba(99,102,241,0.15);
  --shadow-dropdown: rgba(0,0,0,0.4);
  --shadow-panel: rgba(0,0,0,0.3);
  --widget-slider-bg: #475569;
  --spinner-track: #334155;
  --loading-bar-bg: #334155;
  --overlay-bg: rgba(0,0,0,0.4);
}
[data-theme="light"] {
  --res-tint-to: #0b1220;
  --bg-main: #ffffff;
  --border: #cbd5e1;
  --bg-body: #f1f5f9;
  --bg-card: #ffffff;
  --bg-sidebar: #f8fafc;
  --bg-input: #ffffff;
  --bg-hover: rgba(99,102,241,0.06);
  --bg-active: rgba(99,102,241,0.1);
  --bg-tooltip: #ffffff;
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --border-input: #cbd5e1;
  --text-primary: #0f172a;
  --text-secondary: #1e293b;
  --text-muted: #475569;
  --text-dim: #64748b;
  --text-faint: #94a3b8;
  --btn-secondary-bg: #e2e8f0;
  --btn-secondary-hover: #cbd5e1;
  --badge-gray-bg: #f1f5f9;
  --badge-gray-border: #cbd5e1;
  --badge-green-bg: #d1fae5;
  --badge-green-color: #065f46;
  --badge-yellow-bg: #fef3c7;
  --badge-yellow-color: #92400e;
  --badge-red-bg: #fee2e2;
  --badge-red-color: #991b1b;
  --badge-blue-bg: #dbeafe;
  --badge-blue-color: #1e40af;
  --error-bg: #fee2e2;
  --error-color: #991b1b;
  --info-bg: #dbeafe;
  --info-color: #1e40af;
  --chart-grid: #e2e8f0;
  --chart-tick: #475569;
  --scrollbar-thumb: #cbd5e1;
  --tl-selected-bg: rgba(20,184,166,0.08);
  --placeholder-bg: rgba(99,102,241,0.1);
  --shadow-dropdown: rgba(0,0,0,0.12);
  --shadow-panel: rgba(0,0,0,0.08);
  --widget-slider-bg: #cbd5e1;
  --spinner-track: #cbd5e1;
  --loading-bar-bg: #cbd5e1;
  --overlay-bg: rgba(0,0,0,0.2);
}

/* ─── LIGHT MODE BADGE OVERRIDES ─────────────────────────────────────────── */
[data-theme="light"] .badge-green  { background: var(--badge-green-bg); color: #065f46; }
[data-theme="light"] .badge-yellow { background: var(--badge-yellow-bg); color: #92400e; }
[data-theme="light"] .badge-red    { background: var(--badge-red-bg); color: #991b1b; }
[data-theme="light"] .badge-gray   { background: var(--badge-gray-bg); color: var(--text-dim); border-color: var(--badge-gray-border); }
[data-theme="light"] .badge-blue   { background: var(--badge-blue-bg); color: #1e40af; }

/* ─── THEME TOGGLE ──────────────────────────────────────────────────────── */
/* (topbar-knoppen: zie .hdr-btn bij TOPBAR) */

/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-body); color: var(--text-secondary); min-height: 100vh; }

/* ─── Scrollbalken in Klaro-stijl: dun, afgerond, thema-bewust, transparante
       track — de standaard OS-balken (dik/wit) vloeken vooral in dark mode.
       Let op: zodra scrollbar-width/scrollbar-color gezet is, negeren
       Chrome ≥121 en Safari ≥18 álle ::-webkit-scrollbar-styling (ook de
       bestaande .ss-list-regels). Daarom de standaard-properties alleen in
       browsers zónder ::-webkit-scrollbar-ondersteuning (Firefox). ── */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Tabellaire cijfers: bedragen in kolommen lijnen verticaal uit. Space Grotesk
   heeft mono-afgeleide cijfers die van nature strak uitlijnen. */
.report-table td, .amount, .kpi-value { font-variant-numeric: tabular-nums; }
/* Doorklikbare regel in het prognose-jaaroverzicht → voedende module. */
.fc-link { cursor: pointer; transition: color .12s; }
.fc-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Formuliervelden erven het lettertype — anders vallen native inputs/selects terug op het systeemfont. */
button, input, select, textarea { font-family: inherit; }
a { color: #6366f1; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── LOGIN SCREEN ─────────────────────────────────────────────────────────── */
.login-screen { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 24px; }
.login-card { background: var(--bg-card); border-radius: 16px; padding: 40px; max-width: 500px; width: 100%; }
.login-card h1 { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.login-card p.sub { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; line-height: 1.5; }
.login-card label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; }
.login-card input { width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; outline: none; transition: border 0.2s; }
.login-card input:focus { border-color: #6366f1; }
.btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.btn-primary { background: #6366f1; color: #fff; width: 100%; }
.btn-primary:hover { background: #4f46e5; }
.btn-primary:disabled { background: var(--btn-secondary-bg); color: var(--text-dim); cursor: not-allowed; }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--text-secondary); width: 100%; margin-top: 8px; }
.btn-secondary:hover { background: var(--btn-secondary-hover); }
.error-msg { background: var(--error-bg); color: var(--error-color); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; }
.info-msg { background: var(--info-bg); color: var(--info-color); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; line-height: 1.5; }

/* ─── LOADING ──────────────────────────────────────────────────────────────── */
.loading-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; gap: 16px; padding: 32px 20px; box-sizing: border-box; overflow-y: auto; }
/* Startkaart: instellingen invullen terwijl de cijfers binnenkomen. */
.ob-host { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ob-card { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-sizing: border-box; }
.ob-hero { font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.ob-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
.ob-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.ob-inp { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-main); color: var(--text-primary); font-size: 14px; width: 100%; box-sizing: border-box; font-family: inherit; }
.ob-go { width: 100%; margin-top: 16px; padding: 12px; border: none; border-radius: 8px; background: #6366f1; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ob-go[disabled] { background: var(--bg-input); color: var(--text-dim); cursor: default; }
.ob-go2 { width: 100%; margin-top: 8px; padding: 10px; background: none; border: none; color: var(--text-dim); font-size: 13px; cursor: pointer; font-family: inherit; }
.ob-go2:hover { color: var(--text-primary); }
.spinner { width: 40px; height: 40px; border: 3px solid var(--spinner-track); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--text-muted); font-size: 14px; }
.loading-progress { width: 240px; height: 4px; background: var(--loading-bar-bg); border-radius: 4px; overflow: hidden; }
.loading-progress-bar { height: 100%; background: #6366f1; border-radius: 4px; transition: width 0.3s; }

/* ─── DASHBOARD ────────────────────────────────────────────────────────────── */
.dashboard { display: flex; min-height: 100vh; }
/* ─── TOPBAR ───────────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: -24px -32px 20px; padding: 11px 32px;
  background: var(--bg-body);
  background: color-mix(in srgb, var(--bg-body) 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-primary);
}
.header h1 { font-size: 26px; font-weight: 700; color: var(--text-primary); }
.hdr-admin { display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; border-radius: 10px; padding: 4px 8px; margin: -4px -8px; }
.hdr-admin:hover { background: var(--bg-hover); }
/* Administratie-menu (dropdown onder de naam in de topbar) */
.adm-menu { position: fixed; z-index: 10001; min-width: 270px; max-height: calc(100vh - 90px); overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: 12px; padding: 6px; box-shadow: 0 16px 48px rgba(0,0,0,.35); }
.adm-menu .adm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: none; border: none; border-radius: 8px; color: var(--text-secondary); font-size: 13.5px; cursor: pointer; text-align: left; }
.adm-menu .adm-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.adm-menu .adm-item.actief { color: var(--text-primary); font-weight: 600; }
.adm-menu .adm-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-menu .adm-scheiding { height: 1px; background: var(--border-primary); margin: 6px 4px; }
.hdr-avatar { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; box-shadow: 0 3px 10px rgba(99,102,241,.3); }
.hdr-name { font-weight: 700; font-size: 14px; color: var(--text-primary); line-height: 1.2; white-space: nowrap; }
.hdr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.hdr-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 2px 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hdr-chip.hdr-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 5px rgba(16,185,129,.7); }
.hdr-acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hdr-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border-input); background: var(--bg-card); color: var(--text-muted); font-size: 12px; cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s, filter .15s; white-space: nowrap; }
.hdr-btn:hover { border-color: #6366f1; color: #a5b4fc; }
.hdr-btn.hdr-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(99,102,241,.3); }
.hdr-btn.hdr-primary:hover { color: #fff; filter: brightness(1.1); }
.hdr-btn.hdr-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
.hdr-btn.hdr-danger:hover { border-color: #ef4444; color: #ef4444; }
/* Globale zoekbalk in de header */
.hdr-search { position: relative; flex: 1 1 240px; max-width: 440px; min-width: 0; display: flex; align-items: center; }
.hdr-search .gs-icon { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }
#gsInput { width: 100%; box-sizing: border-box; padding: 8px 12px 8px 34px; border-radius: 10px; border: 1px solid var(--border-input); background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
#gsInput::placeholder { color: var(--text-dim); }
#gsInput:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.gs-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: 12px; box-shadow: 0 12px 34px var(--shadow-dropdown); max-height: 66vh; overflow-y: auto; z-index: 200; padding: 6px; display: none; }
.gs-results.open { display: block; }
.gs-item { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.gs-item.sel { background: var(--bg-input); }
.gs-item .gs-ic { width: 22px; text-align: center; font-size: 15px; flex: none; }
.gs-item .gs-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.gs-item .gs-name { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-item .gs-sub { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-item .gs-badge { flex: none; font-size: 10px; font-weight: 600; color: var(--text-muted); background: var(--bg-input); border-radius: 7px; padding: 2px 7px; }
.gs-item.sel .gs-badge { background: var(--bg-body); }
.gs-empty { padding: 16px 12px; color: var(--text-dim); font-size: 12.5px; text-align: center; }
@media (max-width: 720px) { .hdr-search { order: 3; flex-basis: 100%; max-width: none; } }
.hamburger { display: none; } /* alleen op mobiel zichtbaar */
#navOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 290; }
#navOverlay.open { display: block; }
/* Grafiek + zijlijst naast elkaar; stapelt op mobiel */
.split-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 16px; margin-bottom: 18px; }
/* Inzichten (klanten): tabel is hier de hoofdrolspeler — grafiek smaller zodat
   de tabel op de meeste schermen volledig zichtbaar is zonder h-scroll. Onder
   ~1020px zou het tabel-minimum (340px) de grafiek tot een onbruikbare sliert
   knijpen — daar stapelen we al (eerder dan de generieke 768px-grens). */
.ins-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 1.6fr); }
@media (max-width: 1020px) { .ins-grid { grid-template-columns: 1fr; } }

/* ─── PERIODE-PICKER (datumfilter) ─────────────────────────────────────────── */
.filters { margin-bottom: 14px; }
.global-filters { display: flex; gap: 14px; margin-bottom: 24px; align-items: center; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 10px 16px; }
.global-filters label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; white-space: nowrap; }
.global-filters select, .global-filters input[type="number"] { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; padding: 6px 11px; color: var(--text-primary); font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.global-filters select:focus, .global-filters input[type="number"]:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
/* Module-lokale filterbalken — zelfde taal als de globale balk */
.mod-filterbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--bg-body); border: 1px solid var(--border-primary); border-radius: 12px; padding: 8px 14px; }
.mod-filterbar label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; white-space: nowrap; }
.mod-filterbar select, .mod-filterbar input[type="text"] { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; padding: 6px 11px; color: var(--text-secondary); font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit; }
.mod-filterbar select:focus, .mod-filterbar input[type="text"]:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.mod-filterbar select { cursor: pointer; }
/* Wrapper: één rij — presets, ‹ jaar › met maanden en kwartalen, bereik, filterknop */
.tl-wrap { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 14px; overflow: hidden; }
.tl-bar { display: flex; align-items: center; gap: 14px; padding: 9px 14px; flex-wrap: wrap; }
.tl-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.tl-rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.tl-filtertel { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 8px; background: #6366f1; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: 1px; }
.tl-chip.actief .tl-filtertel { background: rgba(255,255,255,.28); }
.tl-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-right: 4px; }
.tl-chip { padding: 5px 12px; border-radius: 16px; border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-secondary); font-size: 12px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, color .15s; }
.tl-chip:hover { border-color: #6366f1; color: #a5b4fc; }
.tl-chip.actief { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; color: #fff; font-weight: 600; }
.tl-selected-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Jaarrij: ‹ jaar › · twaalf maand-segmenten · K1–K4 */
.tl-jaarrij { display: flex; align-items: center; gap: 8px; flex: 1 1 640px; min-width: 640px; }
.tl2-nav { width: 26px; padding: 5px 0; border-radius: 7px; border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-muted); font-size: 13px; line-height: 1.2; cursor: pointer; font-family: inherit; }
.tl2-nav:hover { border-color: #6366f1; color: #a5b4fc; }
.tl2-nav:disabled { opacity: .3; cursor: default; }
.tl2-year { min-width: 54px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, color .15s; text-align: center; }
.tl2-year:hover { border-color: #6366f1; color: #a5b4fc; }
.tl2-year.tl-y-on { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; color: #fff; }
.tl2-quarters { display: flex; gap: 4px; flex-shrink: 0; }
.tl2-q { width: 30px; padding: 5px 0; border-radius: 7px; border: 1px solid var(--border-input); background: transparent; color: var(--text-faint); font-size: 10.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, color .15s; text-align: center; }
.tl2-q:hover { border-color: #6366f1; color: #a5b4fc; }
.tl2-q.tl-q-on { background: rgba(99,102,241,.18); border-color: #6366f180; color: #a5b4fc; }
.tl2-q.tl-uit { opacity: .2; pointer-events: none; }
.tl2-months { display: flex; flex: 1; min-width: 336px; }
.tl-m { flex: 1; min-width: 28px; padding: 7px 0; text-align: center; font-size: 11px; color: var(--text-faint); cursor: pointer; user-select: none; background: var(--bg-body); border: none; border-right: 1px solid var(--border-primary); font-family: inherit; transition: background .1s, color .1s; white-space: nowrap; }
.tl2-months .tl-m:first-child { border-radius: 8px 0 0 8px; }
.tl2-months .tl-m:last-child { border-radius: 0 8px 8px 0; border-right: none; }
.tl-m:hover { color: var(--text-primary); background: var(--bg-hover); }
.tl-m.tl-in { background: var(--tl-selected-bg); color: var(--text-secondary); }
.tl-m.tl-s, .tl-m.tl-e { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-weight: 700; }
.tl-m.tl-uit { opacity: .22; pointer-events: none; }
/* Controlebadge in de kop van Abonnementen (kleur via --kleur: amber of rood) */
.subs-controleknop { border-color: var(--kleur); color: var(--kleur); background: transparent; font-weight: 600; }
.subs-controleknop:hover { border-color: var(--kleur); color: var(--kleur); filter: brightness(1.15); }
.subs-controleknop.actief { background: var(--kleur); border-color: transparent; color: #fff; }

/* ─── SIDEBAR ──────────────────────────────────────────────────────────────── */
.sidebar {
  width: 220px; min-width: 220px; position: sticky; top: 0; height: 100vh;
  background: var(--bg-sidebar); border-right: 1px solid var(--border-primary);
  display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-primary); font-size: 18px; font-weight: 700; color: var(--text-primary);
}
.sidebar-nav { display: flex; flex-direction: column; padding: 12px 0; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  font-size: 14px; color: var(--text-muted); background: none; border: none;
  border-left: 3px solid transparent; cursor: pointer; transition: all 0.15s;
  text-align: left; width: 100%;
}
.nav-item:hover { color: #c7d2fe; background: var(--bg-hover); }
.nav-item.active { color: #a5b4fc; font-weight: 600; border-left-color: #6366f1; background: var(--bg-active); }
.nav-icon { width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-label { white-space: nowrap; }
/* Submodules (Omzet/Kosten onder Resultaat): ingesprongen met een boomconnector. */
.nav-subgroup { display: flex; flex-direction: column; }
.sidebar-nav .nav-item.nav-subitem { position: relative; padding-left: 46px; font-size: 13px; }
.nav-subitem .nav-icon svg { width: 16px; height: 16px; }
.nav-subitem::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 10px; border-left: 1.5px solid var(--border-secondary); }
.nav-subitem::after { content: ""; position: absolute; left: 30px; top: 50%; width: 9px; height: 1.5px; background: var(--border-secondary); }
.nav-subgroup .nav-subitem:last-child::before { bottom: 50%; } /* laatste tak: verticale lijn stopt bij de tick → hoek */
.main-content { flex: 1; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 24px 32px; }

/* ─── SIDEBAR COLLAPSE ─────────────────────────────────────────────────────── */
.sidebar { transition: width 0.25s ease, min-width 0.25s ease; }
.sidebar.collapsed { width: 60px; min-width: 60px; }
.sidebar.collapsed .sidebar-logo span { display: none; }
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 20px 0 16px; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .nav-item .nav-icon { margin: 0; }
.sidebar.collapsed .nav-item.nav-subitem { padding-left: 0; }
.sidebar.collapsed .nav-subitem::before, .sidebar.collapsed .nav-subitem::after { display: none; }
.sidebar.collapsed .nav-subitem .nav-icon svg { width: 18px; height: 18px; }
.sidebar-toggle {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0; margin-top: auto;
  background: none; border: none; border-top: 1px solid var(--border-primary);
  color: var(--text-faint); cursor: pointer; transition: color 0.15s; width: 100%;
}
.sidebar-toggle:hover { color: var(--text-muted); }
.sidebar-toggle svg { transition: transform 0.25s ease; }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── KPI CARDS ────────────────────────────────────────────────────────────── */
/* Zelfde visuele taal als de rc-tegels: zachte gradient-gloed in de accentkleur. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 32px; }
.kpi-card { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 14px; padding: 18px 22px; }
.kpi-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent, #6366f1) 0%, transparent 55%); opacity: .09; pointer-events: none; }
.kpi-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.kpi-value { font-size: 25px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
/* Hero-variant: de drie ochtendvraag-kaarten op het Overzicht — groter cijfer,
   ruimte voor twee subregels en een sparkline. */
.kpi-hero .kpi-value { font-size: 34px; }
.kpi-hero .kpi-sub { font-size: 12.5px; margin-top: 6px; }
.kpi-spark { display: block; width: 100%; height: 34px; margin-top: 10px; }
/* Compacter in de kleinere motor-KPI-kaarten (niet in de grotere hero's). */
.kpi-card:not(.kpi-hero) .kpi-spark { height: 24px; margin-top: 7px; }
/* Hero-rij voor custom-gerenderde modules (geen gridstack): responsive grid
   die op smal scherm vanzelf stapelt. */
.hero-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 20px; }
.hero-rij .kpi-card { height: auto; }
.basis-balk { position: relative; height: 10px; border-radius: 5px; background: var(--loading-bar-bg); overflow: hidden; margin: 6px 0 4px; }
.basis-balk > div { height: 100%; border-radius: 5px; transition: width .3s; }
.grid-stack-item[gs-no-resize] > .grid-stack-item-content > div:first-child { height: 100%; }
.grid-stack-item .kpi-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }

/* ─── CARDS & CHARTS ───────────────────────────────────────────────────────── */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 14px; padding: 24px; }
.card h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 18px; letter-spacing: -0.01em; }
.card canvas { max-height: 300px; }
.full-width { grid-column: 1 / -1; }

/* ─── TABLES ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border-secondary); color: var(--text-dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; z-index: 2; background: var(--bg-card); }
th.r { text-align: right; }
th.sortable { cursor: pointer; user-select: none; transition: color .15s; }
th.sortable:hover { color: var(--text-secondary); }
td { padding: 11px 14px; border-bottom: 1px solid var(--border-primary); color: var(--text-secondary); }
td.r { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--bg-hover); }
tbody tr:last-child td { border-bottom: none; }
.text-green { color: #10b981; font-weight: 600; }
.text-yellow { color: #f59e0b; font-weight: 600; }
.text-red { color: #ef4444; font-weight: 600; }
.footer { text-align: center; color: var(--text-faint); font-size: 12px; margin-top: 40px; padding-bottom: 24px; }

/* ─── BADGES ───────────────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-green  { background:var(--badge-green-bg); color:#6ee7b7; }
.badge-yellow { background:var(--badge-yellow-bg); color:#fcd34d; }
.badge-red    { background:var(--badge-red-bg); color:#fca5a5; }
.badge-gray   { background:var(--badge-gray-bg); color:var(--text-dim); border:1px solid var(--badge-gray-border); }
.badge-blue   { background:var(--badge-blue-bg); color:#93c5fd; }

/* ─── KLIKBARE CONTACTNAMEN (naar contactkaart) ───────────────────────────── */
.contact-link { color:#6366f1; font-weight:600; cursor:pointer; }
.contact-link:hover { text-decoration:underline; }

@media (max-width: 768px) {
  html { overflow-x: clip; } /* vangnet tegen horizontale pagina-scroll */
  .dashboard { flex-direction: column; }
  /* Jaartabel: smallere sticky naamkolom zodat er maandkolommen zichtbaar blijven */
  .rc-jaar-tabel td:first-child, .rc-jaar-tabel th:first-child { max-width: 130px; }

  /* ── Navigatie: off-canvas drawer met hamburger ── */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh;
    width: 268px; min-width: 268px; z-index: 300;
    transform: translateX(-105%); transition: transform .25s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,.35);
  }
  .sidebar.mobiel-open { transform: translateX(0); }
  /* desktop-inklapstand negeren op mobiel: drawer is altijd volledig */
  .sidebar.collapsed { width: 268px; min-width: 268px; }
  .sidebar.collapsed .nav-label, .sidebar.collapsed .sidebar-logo span { display: inline; }
  .sidebar.collapsed .sidebar-logo { justify-content: flex-start; padding: 20px 20px 16px; }
  .sidebar.collapsed .nav-item { justify-content: flex-start; }
  .sidebar-toggle { display: none; }
  .nav-item, .sidebar.collapsed .nav-item { padding: 12px 20px; font-size: 15px; } /* ruimere touch-targets */
  .hamburger { display: inline-flex; }

  /* margin:0 auto (desktop-centrering) schakelt flex-stretch uit en laat de
     kolom naar max-content groeien → expliciet op volle breedte zetten. */
  .main-content { padding: 14px; margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
  .chart-grid { grid-template-columns: 1fr; }

  /* ── Topbar compact ── */
  .header { margin: -14px -14px 14px; padding: 10px 14px; gap: 10px; }
  .hdr-desktop-only { display: none; } /* widgets/reset: alleen desktop */
  .hdr-acties { width: 100%; justify-content: flex-end; gap: 7px; }
  .hdr-name { font-size: 13.5px; white-space: normal; }

  /* ── Tegels: twee per rij ── */
  .rc-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rc-tile { padding: 12px 13px; }
  .rc-tile .rc-val { font-size: 19px; }
  .rc-tile .rc-ico { font-size: 16px; right: 10px; top: 9px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-card { padding: 13px 15px; }
  .kpi-value { font-size: 20px; }
  .kpi-hero .kpi-value { font-size: 26px; }
  #overview-modules-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }

  /* ── Naast-elkaar-layouts stapelen ── */
  .split-grid, .ins-grid { grid-template-columns: 1fr; }

  /* ── Kaarten & tijdlijn compacter ── */
  .card { padding: 15px; }
  .tl-bar { padding: 8px 10px; gap: 8px; }
  .tl-jaarrij { min-width: 0; flex-basis: 100%; }
  .tl2-months { min-width: 0; }
  .global-filters { padding: 9px 12px; gap: 10px; }

  /* ── Detailpanelen (contact-/projectkaart, widgets) full-width ── */
  .widget-panel { width: 100vw !important; max-width: 100vw; border-left: none; }
}

/* ─── GRIDSTACK WIDGETS ─────────────────────────────────────────────────── */
.grid-stack { background: transparent; min-height: 100px; }
.grid-stack-item-content { background: transparent; overflow: visible !important; }
.grid-stack > .grid-stack-item > .grid-stack-item-content { inset: 0; }
.grid-stack-item { cursor: default; }
.grid-stack-placeholder > .placeholder-content {
  background: var(--placeholder-bg) !important;
  border: 2px dashed #6366f1 !important;
  border-radius: 12px;
}
.widget-drag-handle {
  position: absolute; top: 8px; right: 8px; cursor: grab;
  color: var(--text-faint); font-size: 14px; opacity: 0; transition: opacity 0.2s; z-index: 5;
}
.grid-stack-item:hover .widget-drag-handle { opacity: 1; }
.grid-stack-item .card { height: 100%; display: flex; flex-direction: column; }
.grid-stack-item .card canvas { flex: 1; min-height: 0; max-height: none; }
.grid-stack-item .card .table-wrap { flex: 1; min-height: 0; overflow: auto; }
/* (reset-layout-knop gebruikt .hdr-btn) */

/* ─── INLINE BEWERKEN: klik op een waarde → mini-dropdown in filterstijl ──── */
.ie-cell { cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color .12s, color .12s; }
.ie-cell:hover { border-bottom-color: var(--accent); color: var(--text-primary); }
.ie-pop { position: fixed; background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: 8px; z-index: 1200; box-shadow: 0 8px 24px var(--shadow-dropdown); }
.ie-pop .ie-kop { padding: 8px 12px 6px; font-size: 11px; color: var(--text-dim); border-bottom: 1px solid var(--border-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.ie-pop .ie-body { padding: 8px; display: flex; gap: 6px; align-items: center; }
.ie-pop .ie-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; padding: 6px 10px; color: var(--text-primary); font-size: 13px; outline: none; min-width: 0; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.ie-pop .ie-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.ie-pop .ie-ok { background: var(--accent); border: none; color: #fff; border-radius: 8px; padding: 6px 11px; cursor: pointer; font-size: 13px; font-family: inherit; }
.ie-pop .ie-list { max-height: 220px; overflow-y: auto; padding: 4px 0; }
.ie-pop .ie-wis { display: block; width: calc(100% - 16px); margin: 6px 8px 8px; padding: 5px 10px; background: none; border: 1px dashed var(--border-input); border-radius: 8px; color: var(--text-dim); font-size: 12px; cursor: pointer; font-family: inherit; }
.ie-pop .ie-wis:hover { color: var(--text-secondary); border-color: var(--text-dim); }

/* ─── SEARCHABLE SELECT ───────────────────────────────────────────────────── */
.ss-wrap { position: relative; display: inline-block; }
.ss-trigger {
  background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px;
  padding: 6px 28px 6px 11px; color: var(--text-primary); font-size: 13px;
  cursor: pointer; min-width: 130px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  appearance: none; position: relative; transition: border-color .15s, box-shadow .15s;
}
.ss-trigger::after {
  content: '▾'; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); color: var(--text-dim); font-size: 10px; pointer-events: none;
}
.ss-trigger:hover { border-color: #6366f1; }
.ss-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: 8px;
  min-width: 220px; z-index: 999; box-shadow: 0 8px 24px var(--shadow-dropdown);
}
.ss-panel.open { display: block; }
.ss-search {
  width: 100%; padding: 8px 10px; background: var(--bg-input); border: none;
  border-bottom: 1px solid var(--border-secondary); color: var(--text-primary); font-size: 13px;
  outline: none; border-radius: 8px 8px 0 0;
}
.ss-search::placeholder { color: var(--text-faint); }
.ss-list { max-height: 200px; overflow-y: auto; padding: 4px 0; }
.ss-opt {
  padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--text-secondary);
  transition: background .1s;
}
.ss-opt:hover { background: var(--btn-secondary-bg); }
.ss-opt.selected { color: #6366f1; font-weight: 600; }
.ss-list::-webkit-scrollbar { width: 6px; }
.ss-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
/* ─── MULTI-SELECT (alles geselecteerd = gloed; deselecteren mogelijk) ─────── */
.ms-opt { display: flex; align-items: center; gap: 9px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--text-muted); transition: background .1s, color .1s; }
.ms-opt:hover { background: var(--btn-secondary-bg); }
.ms-opt.on { color: var(--text-primary); background: rgba(99,102,241,.09); }
.ms-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-input); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #fff; flex: none; transition: background .1s, border-color .1s, box-shadow .1s; }
.ms-opt.on .ms-check { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.20); }
.ms-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-allrow { display: flex; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--border-secondary); }
.ms-allbtn { flex: 1; padding: 5px 8px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s; }
.ms-allbtn:hover { border-color: #6366f1; color: var(--text-primary); }
.ss-trigger.ms-active { border-color: #6366f1; color: #a5b4fc; }

/* ─── WIDGET PANEL ────────────────────────────────────────────────────────── */
.widget-panel-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9998; }
.widget-panel-overlay.open { display:block; }
.widget-panel {
  display:none; position:fixed; top:0; right:0; width:520px; height:100vh;
  background:var(--bg-card); border-left:1px solid var(--border-secondary); z-index:9999;
  overflow:hidden; padding:0; box-shadow:-4px 0 24px var(--shadow-panel);
  flex-direction:column;
}
.widget-panel.open { display:flex; }
.wp-header { padding:20px 24px 0; flex-shrink:0; }
.wp-header h3 { color:var(--text-primary); font-size:16px; margin:0; }
.wp-cat-tabs { display:flex; gap:4px; padding:12px 24px 0; flex-shrink:0; flex-wrap:wrap; }
.wp-cat-tab {
  padding:5px 12px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer;
  background:var(--btn-secondary-bg); color:var(--text-muted); border:1px solid transparent; transition:all .15s;
}
.wp-cat-tab:hover { border-color:var(--border-secondary); color:var(--text-secondary); }
.wp-cat-tab.active { background:#6366f120; color:#818cf8; border-color:#6366f140; }
.wp-body { display:flex; flex:1; overflow:hidden; }
.wp-list { flex:1; overflow-y:auto; padding:12px 24px 24px; min-width:0; }
.wp-preview-pane {
  width:200px; flex-shrink:0; border-left:1px solid var(--border-secondary);
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:var(--bg-body); overflow:hidden;
}
.wp-preview-pane .wp-prev-empty { color:var(--text-muted); font-size:12px; text-align:center; }
.widget-panel h4 { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px; }
.wp-row {
  display:flex; justify-content:space-between; align-items:center; padding:7px 8px;
  border-radius:6px; transition:background .1s; cursor:default;
}
.wp-row:hover { background:var(--bg-body); }
.wp-row-left { display:flex; align-items:center; gap:8px; min-width:0; }
.wp-label { color:var(--text-secondary); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-tab-badge {
  font-size:10px; padding:1px 6px; border-radius:4px; white-space:nowrap;
  background:var(--btn-secondary-bg); color:var(--text-muted); border:1px solid var(--border-primary);
}
.wp-toggle { position:relative; width:36px; height:20px; cursor:pointer; flex-shrink:0; }
.wp-toggle input { opacity:0; width:0; height:0; }
.wp-toggle .slider {
  position:absolute; inset:0; background:var(--widget-slider-bg); border-radius:10px; transition:background .2s;
}
.wp-toggle .slider::before {
  content:''; position:absolute; width:16px; height:16px; left:2px; top:2px;
  background:#fff; border-radius:50%; transition:transform .2s;
}
.wp-toggle input:checked + .slider { background:#6366f1; }
.wp-toggle input:checked + .slider::before { transform:translateX(16px); }
.wp-prev-kpi { text-align:center; }
.wp-prev-val { display:block; font-size:22px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.wp-prev-lbl { display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
.wp-prev-chart { width:100%; height:60px; background:var(--bg-card); border-radius:8px; display:flex; align-items:flex-end; gap:3px; padding:8px; }
.wp-prev-bar { flex:1; background:#6366f1; border-radius:2px 2px 0 0; min-height:4px; }
.wp-prev-table { width:100%; font-size:10px; color:var(--text-secondary); border-collapse:collapse; }
.wp-prev-table td { padding:3px 4px; border-bottom:1px solid var(--border-primary); }
/* (widgets-knop gebruikt .hdr-btn) */
@media (max-width: 600px) {
  .widget-panel { width:100vw; }
  .wp-preview-pane { display:none; }
}

/* ─── COLUMN PICKER ──────────────────────────────────────────────────────── */
.col-picker-wrap { position: relative; display: inline-block; }
.col-picker-btn {
  background: var(--btn-secondary-bg); color: var(--text-muted); border: 1px solid var(--btn-secondary-hover);
  padding: 3px 10px; border-radius: 6px; font-size: 11px; cursor: pointer;
  white-space: nowrap;
}
.col-picker-btn:hover { border-color: #6366f1; color: #c7d2fe; }
.col-picker-panel {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: 8px;
  min-width: 200px; z-index: 999; box-shadow: 0 8px 24px var(--shadow-dropdown);
  padding: 8px 0;
}
.col-picker-panel.open { display: block; }
.col-picker-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 14px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: background .1s;
}
.col-picker-opt:hover { background: var(--btn-secondary-bg); }
.col-picker-opt input[type="checkbox"] { accent-color: #6366f1; cursor: pointer; }
.col-picker-opt.disabled { opacity: .5; cursor: default; }

/* ─── Report tab ────────────────────────────────────────────────────────────── */
.report-container { padding: 0; }
.report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.report-sub-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.report-tab {
  padding: 8px 18px; border-radius: 20px; border: 1px solid var(--border-secondary);
  background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; font-family: inherit; transition: all .2s;
}
.report-tab:hover { border-color: #6366f1; color: #818cf8; }
.report-tab.active { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(99,102,241,.35); }
.report-period-selector { display: flex; gap: 8px; align-items: center; }
.report-period-selector select {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-input);
  background: var(--bg-input); color: var(--text-secondary); font-size: 13px; cursor: pointer;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.report-period-selector select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--border-secondary); color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0; z-index: 2; background: var(--bg-card); }
.report-table th.amount { text-align: right; }
.report-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-primary); color: var(--text-secondary); font-size: 13px; }
.report-table .amount { text-align: right; font-variant-numeric: tabular-nums; }
.report-table .group-header td { font-weight: 600; color: var(--text-primary); background: var(--bg-body); cursor: pointer; user-select: none; }
.report-table .group-header td:first-child::before { content: '▾ '; font-size: 10px; color: var(--text-muted); display: inline-block; width: 14px; transition: transform .15s; }
.report-table .group-header.collapsed td:first-child::before { content: '▸ '; }
.report-table .group-child.hidden-row { display: none; }
.report-table .group-total td { font-weight: 600; border-top: 1px solid var(--border-secondary); }
.report-table .grand-total td { font-weight: 700; font-size: 14px; border-top: 2px solid var(--border-secondary); color: var(--text-primary); }
.report-table .indent-1 td:first-child { padding-left: 28px; }
.report-table .indent-2 td:first-child { padding-left: 44px; }
.report-table .indent-3 td:first-child { padding-left: 60px; }
.report-table .positive { color: #10b981; }
.report-table .negative { color: #ef4444; }
/* ── Forecast Builder ─────────────────────────────────────────────────── */
.fc-list-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fc-list-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); }
/* Inklapbare "prognose-opbouw"-widget: de bouw-UI staat standaard dicht zodat de
   resultatentabel bovenaan komt; je klapt hem alleen open om te bewerken. */
.fc-builder-panel { border: 1px solid var(--border-primary); border-radius: 12px; margin-bottom: 18px; overflow: hidden; background: var(--bg-card); }
.fc-builder-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; user-select: none; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.fc-builder-bar:hover { background: var(--bg-input); }
.fc-builder-bar .fc-builder-meta { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.fc-builder-bar .fc-chev-x { display: inline-block; width: 14px; color: var(--text-muted); }
.fc-builder-body { padding: 4px 16px 16px; border-top: 1px solid var(--border-primary); }
/* Resultaatmodule — LunchMoney-stijl W&V-overzicht */
.res-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.res-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 640px) { .res-kpis { grid-template-columns: 1fr; } .res-name { width: 120px; } .res-amt { width: 92px; } }
.res-kpi { background: var(--bg-card); border: 1px solid var(--border-primary); border-left: 3px solid var(--res-accent); border-radius: 12px; padding: 14px 18px; }
.res-kpi-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.res-kpi-val { font-size: 22px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: 2px; }
.res-kpi-clic { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.res-kpi-clic:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--res-accent); }
.res-kpi-clic:focus-visible { outline: 2px solid var(--res-accent); outline-offset: 2px; }
.res-kpi-lbl .res-kpi-arrow { font-size: 12px; color: var(--text-faint); margin-left: 3px; transition: color .15s; }
.res-kpi-clic:hover .res-kpi-arrow { color: var(--res-accent); }
.res-comp { padding: 16px 18px; margin-bottom: 16px; }
.res-comp-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 7px; }
.res-comp-amt { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 700; }
.res-compbar { display: flex; height: 16px; border-radius: 5px; overflow: hidden; background: var(--bg-input); }
/* flex:none is geen cosmetica: met de default flex-shrink:1 herschaalt de
   kleinste afrondingsoverschrijding stilletjes álle segmenten, waarmee elk
   percentage onwaar wordt. Precies één kind per container is flexibel en vangt
   de afrondingsrest op (toFixed(2) kan op 99,99% of 100,01% uitkomen). */
.rcb-grp { display: flex; height: 100%; flex: none; overflow: hidden; }
.rcb-grp:last-child { flex: 1 1 auto; }
.rcb-grp.clic { cursor: pointer; }
.rcb-seg { height: 100%; flex: none; transition: width .3s, filter .15s; }
.rcb-grp > .rcb-seg:last-child { flex: 1 1 auto; }
/* Tintladder. De eerste declaratie is de fallback: in een browser zonder
   color-mix() sneuvelt de tweede bij het parsen en blijft de basiskleur staan
   (de hairlines verdelen de rekeningen dan nog steeds). */
.rcb-seg, .res-tint { background: var(--seg); background: color-mix(in srgb, var(--seg) var(--mix, 100%), var(--res-tint-to)); }
/* Scheidingen via inset box-shadow, niet via border: een border met border-box
   op een percentage-breedte maakt elk segment 1px smaller dan zijn aandeel. */
.rcb-seg + .rcb-seg { box-shadow: inset 1px 0 0 var(--bg-card); }
.rcb-grp + .rcb-grp > .rcb-seg:first-child { box-shadow: inset 2px 0 0 var(--bg-card); }
.rcb-seg.rest { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.20) 0 2px, transparent 2px 4px); }
/* Hover-dim: het aangewezen segment blijft vol, de rest zakt weg. De un-dim-regel
   moet specifieker zijn (0,4,0 vs 0,3,0) — niet op bronvolgorde leunen. */
.res-compbar:hover .rcb-seg { filter: saturate(.55) opacity(.72); }
.res-compbar:hover .rcb-seg:hover { filter: none; }
.res-compbar span[data-tip] { cursor: default; }
/* Herbruikbare zwevende tooltip in Klaro-huisstijl (data-tip / data-tip-sub / data-tip-color). */
.klaro-tip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; background: var(--bg-tooltip); color: var(--text-secondary); border: 1px solid var(--border-secondary); border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.4; max-width: 260px; box-shadow: 0 8px 24px -6px rgba(0,0,0,.4); }
.klaro-tip.show { opacity: 1; transform: translateY(0); }
.klaro-tip .kt-ttl { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-primary); }
.klaro-tip .kt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.klaro-tip .kt-sub { color: var(--text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.klaro-tip .kt-hint { color: var(--text-dim); font-size: 11px; margin-top: 3px; }
.res-sec-h { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.res-break { padding: 8px 6px 6px; margin-bottom: 16px; }
.res-break-head { display: flex; justify-content: space-between; padding: 6px 12px 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; border-bottom: 1px solid var(--border-primary); }
.res-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; }
.res-grp.clic { cursor: pointer; }
.res-grp.clic:hover { background: var(--bg-input); }
.res-acc { padding-left: 14px; }
.res-acc .res-name { color: var(--text-secondary); font-size: 12.5px; }
.res-chev { width: 12px; flex: none; color: var(--text-muted); font-size: 10px; }
.res-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.res-name { flex: none; width: 190px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-primary); }
.res-cnt { font-size: 9px; font-weight: 600; color: var(--text-muted); background: var(--bg-input); border-radius: 7px; padding: 1px 6px; }
.res-bar { flex: 1; height: 9px; background: var(--bg-input); border-radius: 5px; overflow: hidden; min-width: 40px; }
.res-bar span { display: block; height: 100%; border-radius: 5px; }
.res-amt { flex: none; width: 110px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-primary); }
.res-pct { flex: none; width: 44px; text-align: right; font-size: 12px; color: var(--text-muted); }
.res-netto { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.res-netto span:first-child { color: var(--text-secondary); }
.res-netto.pos span:last-child { color: #10b981; }
.res-netto.neg span:last-child { color: #ef4444; }
.fc-list-card h4 { margin: 0 0 4px; color: var(--text-primary); font-size: 15px; }
.fc-list-card .fc-meta { font-size: 12px; color: var(--text-muted); }
.fc-list-card .fc-summary { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.fc-type-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.fc-type-badge.revenue { background: rgba(16,185,129,0.15); color: #10b981; }
.fc-type-badge.cost, .fc-type-badge.overhead { background: rgba(239,68,68,0.15); color: #ef4444; }
.fc-type-badge.direct-cost { background: rgba(249,115,22,0.15); color: #f97316; }
.fc-type-badge.other { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.fc-var-link-select { background: var(--bg-body); border: 1px solid var(--border-secondary); border-radius: 4px; padding: 2px 4px; font-size: 11px; color: var(--text-muted); font-family: inherit; max-width: 160px; }
.fc-var-link-select:hover { border-color: var(--accent); }
td.fc-has-actual { cursor: help; position: relative; }
td.fc-has-actual::after { content: ''; position: absolute; bottom: 2px; left: 20%; right: 20%; height: 1px; border-bottom: 1px dotted var(--text-dim); }
.fc-back-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px 0; margin-bottom: 12px; }
.fc-back-btn:hover { color: var(--text-primary); }
.fc-cell-input { width: 80px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); font-size: 13px; text-align: right; padding: 4px 6px; font-family: inherit; font-variant-numeric: tabular-nums; }
.fc-cell-euro { position: relative; display: inline-flex; align-items: center; }
.fc-cell-euro::before { content: '\20AC'; position: absolute; left: 4px; color: var(--text-dim); font-size: 10px; pointer-events: none; z-index: 1; }
.fc-cell-euro .fc-cell-input { padding-left: 16px; }
.fc-cell-input:hover { border-color: var(--border-secondary); }
.fc-cell-input:focus { border-color: var(--accent); outline: none; background: var(--bg-body); }
.fc-actual-row td { color: var(--text-muted); font-style: italic; font-size: 12px; }
.fc-diff-row td { font-size: 12px; }
.fc-pl-table-wrap { overflow-x: auto; margin-top: 20px; }
.fc-pl-table td, .fc-pl-table th { white-space: nowrap; }
.fc-pl-table td:first-child, .fc-pl-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-card); min-width: 210px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
/* Prognose drill-down: band, arcering, chevrons, chips, koppel-picker */
.fc-band th { border: none; padding: 6px 8px 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; }
.fc-pl-table td.fc-fc, .fc-pl-table th.fc-fc { background: var(--bg-hover); }
.fc-pl-table td.fc-cur, .fc-pl-table th.fc-cur { box-shadow: inset 2px 0 0 var(--accent); }
.fc-chev { display: inline-block; width: 15px; color: var(--text-muted); font-size: 10px; }
.fc-chev-none { visibility: hidden; }
.fc-node.group-header td { font-weight: 600; }
.fc-node[onclick]:hover td:first-child { color: var(--accent); }
.fc-import td:first-child { color: var(--accent); }
.fc-leaf td { font-size: 12px; color: var(--text-dim); }
.fc-count-chip { font-size: 10px; font-weight: 600; color: var(--text-muted); background: var(--bg-input); border-radius: 8px; padding: 1px 7px; margin-left: 6px; }
.fc-warn-chip { font-size: 10px; font-weight: 600; color: #f59e0b; background: rgba(245,158,11,.13); border-radius: 8px; padding: 1px 7px; margin-left: 8px; white-space: nowrap; }
/* Verschil-cel per maand: klikbaar voor een notitie; klein wolkje rechtsboven. */
.fc-diff-cell:hover { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 4px; }
.fc-cell-note { position: absolute; top: 0; right: 1px; font-size: 8px; line-height: 1; pointer-events: none; }
.fc-note-pop { position: fixed; z-index: 1300; width: 300px; background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow-dropdown); padding: 12px; }
.fc-note-pop textarea { width: 100%; box-sizing: border-box; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; padding: 8px 10px; color: var(--text-primary); font-size: 13px; font-family: inherit; resize: vertical; outline: none; }
.fc-note-pop textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
/* Actual-drilldown: klik op een Actual-bedrag → mutaties per grootboekrekening. */
.fc-actual-click { cursor: pointer; }
.fc-actual-click:hover { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 4px; }
.fc-actual-pop { position: fixed; z-index: 1300; width: 340px; max-height: 62vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow-dropdown); padding: 12px 14px; }
.fc-actual-pop .fc-ap-row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.fc-actual-pop .fc-ap-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-actual-pop .fc-ap-amt { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-actual-pop .fc-ap-total { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-secondary); font-weight: 600; font-size: 13px; color: var(--text-primary); }
.koppel-select { width: 100%; max-width: 260px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; padding: 5px 9px; color: var(--text-primary); font-size: 12.5px; font-family: inherit; outline: none; }
.koppel-select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.fc-uncoupled-warn { display: flex; align-items: flex-start; gap: 10px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); border-radius: 10px; padding: 11px 14px; margin: 0 0 16px; font-size: 12.5px; color: var(--text-secondary); }
.fc-uncoupled-warn b { color: var(--text-primary); }
.fc-link-summary.fc-none { color: #f59e0b; background: rgba(245,158,11,.13); }
.fc-cat-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.fc-cat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fc-cat-header h4 { margin: 0; font-size: 14px; color: var(--text-primary); }
.fc-var-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--text-secondary); }
.fc-var-row .fc-var-name { min-width: 120px; }
.fc-btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border-secondary); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.fc-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.fc-btn-danger { color: #ef4444; border-color: transparent; }
.fc-btn-danger:hover { background: rgba(239,68,68,0.1); }
.fc-link-section { padding: 12px 0; margin: 0 0 12px; border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); }
.fc-link-summary { font-size: 11px; color: var(--accent); background: rgba(99,102,241,0.1); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.fc-rgs-checklist { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fc-account-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.fc-account-item:hover { background: var(--bg-body); }
.fc-account-item input[type="checkbox"] { accent-color: var(--accent); margin: 0; }
.fc-create-form { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.fc-create-form input, .fc-create-form select { background: var(--bg-body); border: 1px solid var(--border-secondary); border-radius: 6px; padding: 8px 12px; color: var(--text-primary); font-size: 13px; font-family: inherit; }
.fc-create-form input:focus, .fc-create-form select:focus { border-color: var(--accent); outline: none; }
/* ─── Rapporten-upgrade: KPI-strip, samenstellingsbalken, groep-dots, chips,
       aandeel-balken achter bedragen (balans + resultatenrekening) ─────────── */
.rpt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rpt-kpi { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 13px 16px; border-top: 3px solid var(--rpt-accent, #6366f1); }
.rpt-kpi .rk-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: 5px; }
.rpt-kpi .rk-value { font-size: 20px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rpt-kpi .rk-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.rpt-mix { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px 16px; }
.rpt-mix + .rpt-mix { margin-top: 12px; }
.rpt-mix .rm-titel { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 9px; text-transform: uppercase; letter-spacing: .6px; display: flex; justify-content: space-between; }
.rpt-mix-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bg-input); }
.rpt-mix-bar span { min-width: 3px; }
.rpt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; font-size: 11.5px; color: var(--text-muted); }
.rpt-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.rt-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: 1px; }
.rt-chip { font-size: 10.5px; font-weight: 600; color: var(--text-muted); background: var(--bg-input); border-radius: 8px; padding: 2px 7px; margin-left: 8px; white-space: nowrap; }

.balance-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.balance-column { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-primary); overflow: hidden; }
.balance-column-header { padding: 14px 16px 10px; font-size: 14px; font-weight: 700; color: var(--text-primary); border-bottom: 2px solid var(--border-secondary); display: flex; justify-content: space-between; align-items: center; }
.balance-column-header .balance-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
@media (max-width: 768px) { .balance-sheet { grid-template-columns: 1fr; } }
.aging-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 24px; }
.aging-card { background: var(--bg-body); border-radius: 10px; padding: 16px 20px; border-left: 4px solid var(--aging-color, #64748b); }
.aging-card .aging-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.aging-card .aging-amount { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.aging-card .aging-count { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.aging-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 24px; background: var(--bg-body); }
.aging-bar-segment { height: 100%; transition: width .3s; }

/* ─── TOASTS ───────────────────────────────────────────────────────────────── */
#toastHost { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-secondary);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 16px; font-size: 13px;
  box-shadow: 0 8px 24px var(--shadow-dropdown); max-width: 320px;
  animation: toast-in .25s ease; pointer-events: auto;
}
.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }
.toast.fade-out { opacity: 0; transition: opacity .4s; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ─── TOEGANKELIJKHEID ─────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .spinner { animation: spin 1.5s linear infinite !important; }
}
/* ── Vaste lasten: visuele upgrade ── */
.rc-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.rc-tile { position:relative; overflow:hidden; background:var(--bg-card); border:1px solid var(--border-primary); border-radius:14px; padding:16px 18px; }
.rc-tile::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--rc-accent,#6366f1) 0%, transparent 55%); opacity:.09; pointer-events:none; }
.rc-tile .rc-ico { position:absolute; right:14px; top:12px; font-size:20px; opacity:.75 }
.rc-tile .rc-lbl { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px }
.rc-tile .rc-val { font-size:24px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums }
.rc-tile .rc-sub { font-size:12px; color:var(--text-dim); margin-top:4px }
.rc-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:20px; border:1px solid var(--border-input); background:var(--bg-input); color:var(--text-secondary); font-size:12.5px; cursor:pointer; transition:border-color .15s, background .15s, color .15s; font-family:inherit }
.rc-chip:hover { border-color:var(--rc-accent,#6366f1) }
.rc-chip.actief { background:var(--rc-accent,#6366f1); border-color:var(--rc-accent,#6366f1); color:#fff; font-weight:600 }
.rc-cat-card { background:var(--bg-card); border:1px solid var(--border-primary); border-radius:14px; padding:16px; border-top:3px solid var(--rc-accent,#94a3b8); transition:box-shadow .2s, transform .2s }
.rc-cat-card.rc-cat-flash { box-shadow:0 0 0 2px var(--rc-accent,#6366f1), 0 8px 24px -6px var(--rc-accent,#6366f1); transform:translateY(-2px) }
.rc-bar { height:6px; border-radius:3px; background:var(--bg-body); overflow:hidden; margin:10px 0 12px }
.rc-bar > div { height:100%; border-radius:3px; background:var(--rc-accent,#6366f1) }
.rc-tl-item { display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px dashed var(--border-primary); font-size:13px }
.rc-tl-item:last-child { border-bottom:none }
/* Jaartabel realisatie + forecast (zoals de Overhead-Excel) */
.rc-jaar-tabel td, .rc-jaar-tabel th { white-space: nowrap; }
.rc-jaar-tabel td:first-child, .rc-jaar-tabel th:first-child { position: sticky; left: 0; z-index: 3; background: var(--bg-card); max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.rc-jaar-tabel thead th { z-index: 4; }
.rc-jaar-tabel thead th:first-child { z-index: 5; } /* hoekcel boven de maandkoppen bij horizontaal scrollen */
.rc-jaar-tabel .rc-band th { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; padding: 6px 12px; border-bottom: none; }
.rc-jaar-tabel .rc-fc { background: rgba(99,102,241,.06); }
.rc-jaar-tabel td.rc-fc { color: var(--text-muted); }
.rc-jaar-tabel .rc-cur { box-shadow: inset 0 2px 0 #6366f1; }
.rc-jaar-tabel .rc-groep td { background: var(--bg-body); font-weight: 600; color: var(--text-primary); font-size: 12.5px; }
.rc-jaar-tabel .rc-groep td:first-child { background: var(--bg-body); }
.rc-jaar-tabel .rc-subtot td { font-weight: 600; border-top: 1px solid var(--border-secondary); }
.rc-jaar-tabel .rc-groot td { font-weight: 700; border-top: 2px solid var(--border-secondary); color: var(--text-primary); }
.rc-jaar-tabel .rc-jr { font-weight: 700; border-left: 1px solid var(--border-secondary); }
.rc-tl-dot { width:10px; height:10px; border-radius:50%; margin-top:4px; flex:none }
.rc-form-input { padding:9px 11px; border:1px solid var(--border-input); border-radius:9px; background:var(--bg-input); color:var(--text-primary); font-size:13.5px; font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s; width:100%; box-sizing:border-box }
.rc-form-input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15) }
.rc-lbl-sm { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:500; color:var(--text-muted) }
.rc-add-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:none; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; font-family:inherit; box-shadow:0 4px 14px rgba(99,102,241,.35); transition:transform .12s, box-shadow .12s }
.rc-add-btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(99,102,241,.45) }

/* ── Progressief laden: dashboard staat open terwijl de bronnen binnenkomen ── */
.dash-loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; pointer-events: none; opacity: 0; transition: opacity .4s; }
.dash-loadbar.actief { opacity: 1; }
.dash-loadbar > div { height: 100%; width: 0; background: linear-gradient(90deg, #6366f1, #8b5cf6); box-shadow: 0 0 8px rgba(99,102,241,.6); transition: width .35s ease; }
.hdr-chip.hdr-laden { color: #a5b4fc; border-color: rgba(99,102,241,.45); }
.hdr-chip.hdr-laden::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6366f1; animation: klaro-pulse 1s ease-in-out infinite; }
.hdr-chip.hdr-onvolledig { color: #f59e0b; border-color: rgba(245,158,11,.45); }
@keyframes klaro-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes klaro-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Kaart of tab waarvan de bron nog onderweg is: skelet in plaats van € 0 */
.is-laden { position: relative; }
.is-laden .kpi-value { color: transparent !important; background: linear-gradient(90deg, var(--border-secondary) 25%, var(--border-primary) 50%, var(--border-secondary) 75%); background-size: 200% 100%; animation: klaro-shimmer 1.4s linear infinite; border-radius: 6px; width: 55%; min-height: 1em; }
.is-laden .kpi-value * { visibility: hidden; }
.is-laden .kpi-sub, .is-laden .kpi-spark { visibility: hidden; }
.is-laden canvas, .is-laden table, .is-laden .ov-strip, .is-laden .ov-list { opacity: .25; filter: saturate(.3); }
.grid-stack-item-content.is-laden::after, .card.is-laden::after { content: 'laden…'; position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: var(--text-dim); letter-spacing: .04em; pointer-events: none; }
.tab-content.is-laden::before { content: 'De gegevens voor deze module worden nog geladen…'; display: block; margin-bottom: 14px; padding: 9px 14px; border-radius: 10px; background: var(--bg-active); color: var(--text-muted); font-size: 12.5px; }
/* Welkomstkaart bovenin het dashboard */
.ob-card.ob-dash { margin: 0 0 16px; padding: 18px 22px; }
.ob-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ob-dash .ob-hero { font-size: 17px; }
.ob-dash .ob-sub { margin-bottom: 12px; }
.ob-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; max-width: 640px; }
.ob-dash .ob-lbl { margin-bottom: 0; }
.ob-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ob-dash .ob-go { width: auto; margin-top: 0; padding: 9px 18px; }
.ob-dash .ob-go2 { width: auto; margin-top: 0; padding: 9px 12px; }
.ob-sluit { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px; font-family: inherit; }
.ob-sluit:hover { color: var(--text-primary); background: var(--bg-hover); }