/* ───────────────────────────────────────────────────────────────
   Credova theme — "warm glow": high-end fintech glassmorphism.

   Dark   ·  warm zwart (houtskool, geen blauw) met een gloed die
             van onderaf opstijgt: boterroom & lavendel
             rgb(16 14 13) · glas rgb(30 27 25 / 0.66) · lavendel rgb(190 186 248)
   Light  ·  ochtendglow: warm gebroken wit met melkglas-kaarten
             rgb(248 246 242) · glas rgb(255 255 255 / 0.66) · violet rgb(124 116 210)

   De --cv-* tokens zijn de enige kleurbron voor custom views;
   de Filament gray- en primary-ramps worden hier overschreven
   zodat sidebar, tabellen, forms en modals dezelfde taal spreken.

   Vormtaal: "glas in lamplicht" — translucente panelen met
   backdrop-blur, hairline lichtranden, ruime radius, ambient
   gloed van onderaf, low-contrast hiërarchie met veel lucht.
   Charts krijgen gradient-fills (boterroom → lavendel) via
   resources/js/chart-gradients.js.

   NB: background-attachment: fixed is kapot op iOS — de ambient
   laag zit daarom op een position:fixed pseudo-element.
   ─────────────────────────────────────────────────────────────── */

html:root {
    /* ── Semantische tokens (light · ochtendglow) ── */
    --cv-base: rgb(248 246 242);          /* paginavlak           */
    --cv-surface: rgb(255 255 255 / 0.66);/* melkglas-kaarten     */
    --cv-surface-2: rgb(243 239 233 / 0.75); /* hover / zacht vlak */
    --cv-border: rgb(110 100 140 / 0.13);
    --cv-border-strong: rgb(110 100 140 / 0.26);
    --cv-text: rgb(44 40 54);
    --cv-text-soft: rgb(92 86 108);
    --cv-muted: rgb(140 133 152);
    --cv-accent: rgb(124 116 210);        /* violet-lavendel      */
    --cv-accent-strong: rgb(100 92 184);
    --cv-accent-soft: rgb(206 202 250);
    --cv-accent-tint: rgb(124 116 210 / 0.08);
    --cv-accent-2: rgb(196 154 86);       /* honing               */
    --cv-on-accent: rgb(252 251 248);
    --cv-success: rgb(96 156 122);          /* zachte mint        */
    --cv-success-strong: rgb(74 130 99);
    --cv-danger: rgb(202 116 108);          /* stofroze           */
    --cv-danger-strong: rgb(176 90 84);
    --cv-on-status: rgb(252 251 248);

    /* Glas-vormtaal */
    --cv-blur: 20px;
    --cv-edge-light: rgb(255 255 255 / 0.85);     /* bovenrand-glans   */
    --cv-shadow: rgb(96 84 70 / 0.10);            /* zachte zweefschaduw */
    --cv-glass-strong: rgb(255 255 255 / 0.88);   /* dropdowns/modals  */
    --cv-emboss: inset 0 1px 0 var(--cv-edge-light), 0 1px 2px var(--cv-shadow), 0 18px 44px -24px rgb(96 84 70 / 0.25);
    --cv-sunken: inset 0 1px 3px rgb(96 84 70 / 0.10), inset 0 0 0 1px rgb(96 84 70 / 0.05);
    --cv-focus-glow: 0 0 0 1px var(--cv-accent), 0 0 14px 0 color-mix(in srgb, var(--cv-accent) 28%, transparent);
    --cv-chrome: rgb(253 252 249 / 0.62);         /* topbar/sidebar    */

    /* Ambient gloed (light: zacht ochtendlicht van onderaf) */
    --cv-aura-cream: rgb(228 188 122 / 0.12);
    --cv-aura-lavender: rgb(150 140 220 / 0.10);
    --cv-aura-peach: rgb(226 162 134 / 0.07);

    /* ── Filament gray-ramp: warm wit → houtskool ──
       Light mode pakt 50–300 (vlakken/borders), dark mode 700–950
       (vlakken) en 100–400 (tekst); één ramp dient beide modes.   */
    --gray-50: rgb(250 248 246);
    --gray-100: rgb(243 240 236);
    --gray-200: rgb(228 223 217);
    --gray-300: rgb(200 193 185);
    --gray-400: rgb(138 131 122);
    --gray-500: rgb(108 101 93);
    --gray-600: rgb(74 68 62);
    --gray-700: rgb(52 47 43);
    --gray-800: rgb(36 32 29);
    --gray-900: rgb(23 20 18);
    --gray-950: rgb(16 14 13);

    /* Violet-lavendel primary-ramp (light) */
    --primary-50: rgb(247 246 254);
    --primary-100: rgb(238 236 252);
    --primary-200: rgb(222 219 250);
    --primary-300: rgb(206 202 250);
    --primary-400: rgb(172 165 238);
    --primary-500: rgb(124 116 210);
    --primary-600: rgb(100 92 184);
    --primary-700: rgb(82 75 156);
    --primary-800: rgb(66 61 126);
    --primary-900: rgb(55 51 102);
    --primary-950: rgb(34 31 66);

    /* Mint en stofroze: status-kleuren in dezelfde warme familie */
    --success-50: rgb(242 248 244);
    --success-100: rgb(228 241 233);
    --success-200: rgb(201 226 210);
    --success-300: rgb(165 204 180);
    --success-400: rgb(128 180 150);
    --success-500: rgb(96 156 122);
    --success-600: rgb(74 130 99);
    --success-700: rgb(60 106 82);
    --success-800: rgb(50 85 67);
    --success-900: rgb(41 69 55);
    --success-950: rgb(22 40 31);

    --danger-50: rgb(251 244 243);
    --danger-100: rgb(247 231 229);
    --danger-200: rgb(238 206 202);
    --danger-300: rgb(223 172 166);
    --danger-400: rgb(213 144 137);
    --danger-500: rgb(202 116 108);
    --danger-600: rgb(176 90 84);
    --danger-700: rgb(144 72 67);
    --danger-800: rgb(116 59 55);
    --danger-900: rgb(95 50 47);
    --danger-950: rgb(51 25 23);
}

html:root.dark {
    /* ── Semantische tokens (dark · warm glow) ── */
    --cv-base: rgb(16 14 13);             /* paginavlak: houtskool */
    --cv-surface: rgb(30 27 25 / 0.66);   /* glaspanelen          */
    --cv-surface-2: rgb(44 39 36 / 0.6);  /* hover / zacht vlak   */
    --cv-border: rgb(255 255 255 / 0.07);
    --cv-border-strong: rgb(255 255 255 / 0.15);
    --cv-text: rgb(240 237 232);
    --cv-text-soft: rgb(187 181 173);
    --cv-muted: rgb(138 131 122);
    --cv-accent: rgb(190 186 248);        /* pastel-lavendel      */
    --cv-accent-strong: rgb(210 206 251);
    --cv-accent-soft: rgb(106 99 150);
    --cv-accent-tint: rgb(190 186 248 / 0.10);
    --cv-accent-2: rgb(240 220 178);      /* boterroom            */
    --cv-on-accent: rgb(20 17 16);
    --cv-success: rgb(150 208 178);         /* mint               */
    --cv-success-strong: rgb(174 222 198);
    --cv-danger: rgb(232 160 152);          /* stofroze           */
    --cv-danger-strong: rgb(240 182 175);
    --cv-on-status: rgb(20 17 16);

    /* Glas-vormtaal */
    --cv-edge-light: rgb(255 248 235 / 0.08);
    --cv-shadow: rgb(6 4 3 / 0.5);
    --cv-glass-strong: rgb(27 24 22 / 0.9);
    --cv-emboss: inset 0 1px 0 var(--cv-edge-light), inset 0 0 0 1px rgb(255 248 235 / 0.03), 0 18px 44px -22px rgb(6 4 3 / 0.65);
    --cv-sunken: inset 0 1px 3px rgb(6 4 3 / 0.45), inset 0 0 0 1px rgb(255 248 235 / 0.04);
    --cv-focus-glow: 0 0 0 1px var(--cv-accent), 0 0 16px 0 color-mix(in srgb, var(--cv-accent) 25%, transparent);
    --cv-chrome: rgb(16 14 13 / 0.72);

    /* Ambient gloed (dark: lamplicht dat van onderaf opstijgt) */
    --cv-aura-cream: rgb(238 192 120 / 0.10);
    --cv-aura-lavender: rgb(168 158 232 / 0.11);
    --cv-aura-peach: rgb(228 158 128 / 0.06);

    /* Pastel-lavendel primary-ramp (dark): knoppen/links in lamplicht */
    --primary-50: rgb(247 246 254);
    --primary-100: rgb(238 236 252);
    --primary-200: rgb(222 219 250);
    --primary-300: rgb(206 202 250);
    --primary-400: rgb(190 186 248);
    --primary-500: rgb(168 162 240);
    --primary-600: rgb(143 136 225);
    --primary-700: rgb(118 111 198);
    --primary-800: rgb(94 88 160);
    --primary-900: rgb(75 70 127);
    --primary-950: rgb(47 44 82);

    /* Mint en stofroze bij lamplicht */
    --success-50: rgb(243 249 246);
    --success-100: rgb(230 243 237);
    --success-200: rgb(206 231 218);
    --success-300: rgb(180 220 198);
    --success-400: rgb(174 222 198);
    --success-500: rgb(150 208 178);
    --success-600: rgb(116 178 146);
    --success-700: rgb(92 146 119);
    --success-800: rgb(74 116 95);
    --success-900: rgb(60 95 78);
    --success-950: rgb(32 54 44);

    --danger-50: rgb(252 245 244);
    --danger-100: rgb(249 233 231);
    --danger-200: rgb(243 212 208);
    --danger-300: rgb(238 188 182);
    --danger-400: rgb(240 182 175);
    --danger-500: rgb(232 160 152);
    --danger-600: rgb(208 126 118);
    --danger-700: rgb(172 100 93);
    --danger-800: rgb(138 80 74);
    --danger-900: rgb(112 66 61);
    --danger-950: rgb(62 33 30);
}

/* ── Typografie: Instrument Sans (via panel ->font), kalm ────── */
body,
.fi-body {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── Atmosfeer: gloed die van onderaf opstijgt, fixed laag ────
   (body-gradient met background-attachment: fixed rendert niet
   op iOS Safari; een position:fixed pseudo-element wél.)        */
body {
    background-color: var(--cv-base);
}

/* .fi-body transparant, anders dekt hij de gloed-laag af */
.fi-body {
    background-color: transparent;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(70rem 44rem at 50% 118%, var(--cv-aura-cream), transparent 62%),
        radial-gradient(60rem 38rem at 12% 112%, var(--cv-aura-lavender), transparent 60%),
        radial-gradient(56rem 34rem at 92% 108%, var(--cv-aura-peach), transparent 58%),
        radial-gradient(64rem 36rem at 85% -14%, var(--cv-aura-lavender), transparent 60%);
}

/* ── Chrome: topbar & sidebar als zwevend glas ────────────────── */
.fi-topbar-ctn {
    background-color: var(--cv-chrome);
    -webkit-backdrop-filter: blur(var(--cv-blur)) saturate(150%);
    backdrop-filter: blur(var(--cv-blur)) saturate(150%);
    border-bottom: 1px solid var(--cv-border);
    box-shadow: 0 1px 0 var(--cv-edge-light), 0 12px 32px -20px var(--cv-shadow);
}

.fi-topbar,
.fi-topbar nav {
    background-color: transparent;
}

.fi-sidebar {
    background-color: var(--cv-chrome);
    -webkit-backdrop-filter: blur(var(--cv-blur)) saturate(150%);
    backdrop-filter: blur(var(--cv-blur)) saturate(150%);
    border-right: 1px solid var(--cv-border);
}

/* Actief navigatie-item: lavendel-tint met gloeiende indicator */
.fi-sidebar-item-active .fi-sidebar-item-btn {
    background: linear-gradient(90deg, var(--cv-accent-tint), transparent 85%);
    box-shadow: inset 2px 0 0 var(--cv-accent), 0 0 18px -6px color-mix(in srgb, var(--cv-accent) 30%, transparent);
    border-radius: 0.5rem;
}

.fi-sidebar-item-btn:hover {
    background-color: var(--cv-accent-tint);
}

/* Groepslabels: low-contrast hiërarchie, veel lucht */
.fi-sidebar-group-label {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.66rem;
    color: var(--cv-muted);
}

/* ── Glaspanelen: blur, hairline lichtrand, zachte zweefschaduw ─ */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-wi-widget .fi-section,
.fi-ta-ctn,
.fi-modal-window,
.fi-dropdown-panel,
.review-card,
.bk-wrap,
.icp-wrap,
.docs-drawer {
    background-color: var(--cv-surface);
    border: 1px solid var(--cv-border);
    box-shadow: var(--cv-emboss);
    -webkit-backdrop-filter: blur(var(--cv-blur)) saturate(140%);
    backdrop-filter: blur(var(--cv-blur)) saturate(140%);
}

/* Ruime, zachte radius op de grote vlakken */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-modal-window,
.review-card,
.bk-wrap,
.icp-wrap {
    border-radius: 1rem;
}

/* Item-kaarten binnen glas: translucent, geen eigen blur (perf) */
.ac-item,
.side-doc {
    background-color: var(--cv-surface-2);
    border: 1px solid var(--cv-border);
    box-shadow: inset 0 1px 0 var(--cv-edge-light);
}

/* Dropdowns & modals: dichter glas voor leesbaarheid */
.fi-modal-window,
.fi-dropdown-panel {
    background-color: var(--cv-glass-strong);
}

/* ── Knoppen: glasknoppen — hairline, zachte lift, warme gloed ─ */
.fi-btn {
    border: 1px solid var(--cv-border);
    box-shadow: inset 0 1px 0 var(--cv-edge-light), 0 1px 2px var(--cv-shadow);
    transition: box-shadow 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}

.fi-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-0.5px);
}

.fi-btn:active {
    transform: translateY(0.5px);
    box-shadow: var(--cv-sunken);
}

.fi-btn:focus-visible {
    outline: none;
    box-shadow: var(--cv-focus-glow);
}

/* Primaire (accent-)knoppen: lavendel met boterroom-glans + gloed */
.fi-btn.fi-color-primary {
    border-color: transparent;
    background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--cv-accent-2) 28%, transparent), transparent 60%),
        linear-gradient(180deg, rgb(255 255 255 / 0.16), transparent 55%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 4px 18px -6px color-mix(in srgb, var(--cv-accent) 45%, transparent);
}

/* ── Pills & badges: hairline glas met tint uit het palet ────── */
.fi-badge {
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    box-shadow: inset 0 1px 0 var(--cv-edge-light);
}

/* ── Datagrids: glaspaneel met fluisterende koptekst ─────────── */
.fi-ta-header-ctn,
.fi-ta-header-cell {
    background-color: var(--cv-surface-2);
}

.fi-ta-header-cell {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
    color: var(--cv-muted);
}

.fi-ta-row {
    transition: background-color 0.1s ease;
}

.fi-ta-row:hover {
    background-color: var(--cv-accent-tint) !important;
}

.fi-ta-cell {
    border-color: var(--cv-border);
}

/* ── Inputs: verzonken in het glas, lavendel-gloed bij focus ─── */
.fi-input-wrp,
.fi-select-input,
.je-search,
.review-select {
    background-color: var(--cv-surface);
    box-shadow: var(--cv-sunken);
    border-color: var(--cv-border);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.fi-input-wrp:focus-within,
.je-search:focus,
.review-select:focus {
    border-color: var(--cv-accent);
    box-shadow: var(--cv-sunken), var(--cv-focus-glow);
}

/* ── Koppen: kalm, licht gespatieerd, low-contrast hiërarchie ── */
.fi-header-heading {
    letter-spacing: -0.01em;
    font-weight: 600;
}

.fi-section-header-heading {
    letter-spacing: 0.02em;
    color: var(--cv-text-soft);
}

/* ── Mobiel: niets mag de pagina breder duwen dan het scherm ──
   (clip ipv hidden: maakt géén scroll-container, sticky blijft werken) */
@media (max-width: 768px) {
    .fi-main {
        overflow-x: clip;
    }
}

/* ── Scrollbars in dezelfde taal ─────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--cv-border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: var(--cv-border-strong);
    border-radius: 9999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}