/* ============================================================
   EyeManage Design System — "Clinical Warmth"
   Single Source of Truth for all design tokens.

   Architecture:
   1. RadzenTheme loads eyemanage-{light|dark}.css (Radzen generated)
   2. This file loads AFTER and overrides --rz-* variables
   3. Defines --em-* semantic tokens for application use

   DO NOT define colors in other CSS files.
   All color/spacing/shadow tokens live here.
   ============================================================ */

/* ============================================================
   LIGHT MODE (default)
   Applied via :root — overrides Radzen theme `:root`
   ============================================================ */
:root {
    /* ----------------------------------------------------------
       Brand: Primary — Healthcare Teal
       ---------------------------------------------------------- */
    --rz-primary: #208BAA;
    --rz-on-primary: #FFFFFF;
    --rz-primary-light: #35BAD9;
    --rz-on-primary-light: #0F2B33;
    --rz-primary-lighter: rgba(32, 139, 170, 0.12);
    --rz-on-primary-lighter: #208BAA;
    --rz-primary-dark: #1A7090;
    --rz-on-primary-dark: #FFFFFF;
    --rz-primary-darker: #0D667C;
    --rz-on-primary-darker: #FFFFFF;

    /* ----------------------------------------------------------
       Brand: Secondary — Muted Teal
       ---------------------------------------------------------- */
    --rz-secondary: #5F9EA8;
    --rz-on-secondary: #FFFFFF;
    --rz-secondary-light: #7DB4BC;
    --rz-on-secondary-light: #FFFFFF;
    --rz-secondary-lighter: rgba(95, 158, 168, 0.12);
    --rz-on-secondary-lighter: #5F9EA8;
    --rz-secondary-dark: #4D8A93;
    --rz-on-secondary-dark: #FFFFFF;
    --rz-secondary-darker: #3B7580;
    --rz-on-secondary-darker: #FFFFFF;

    /* ----------------------------------------------------------
       Functional: Status Colors
       ---------------------------------------------------------- */
    --rz-success: #059669;
    --rz-on-success: #FFFFFF;
    --rz-success-light: #34D399;
    --rz-on-success-light: #022C22;
    --rz-success-lighter: rgba(5, 150, 105, 0.12);
    --rz-on-success-lighter: #059669;
    --rz-success-dark: #047857;
    --rz-on-success-dark: #FFFFFF;
    --rz-success-darker: #065F46;
    --rz-on-success-darker: #FFFFFF;

    --rz-warning: #D97706;
    --rz-on-warning: #FFFFFF;
    --rz-warning-light: #FBBF24;
    --rz-on-warning-light: #422006;
    --rz-warning-lighter: rgba(217, 119, 6, 0.12);
    --rz-on-warning-lighter: #D97706;
    --rz-warning-dark: #B45309;
    --rz-on-warning-dark: #FFFFFF;
    --rz-warning-darker: #92400E;
    --rz-on-warning-darker: #FFFFFF;

    --rz-danger: #DC2626;
    --rz-on-danger: #FFFFFF;
    --rz-danger-light: #F87171;
    --rz-on-danger-light: #450A0A;
    --rz-danger-lighter: rgba(220, 38, 38, 0.12);
    --rz-on-danger-lighter: #DC2626;
    --rz-danger-dark: #B91C1C;
    --rz-on-danger-dark: #FFFFFF;
    --rz-danger-darker: #991B1B;
    --rz-on-danger-darker: #FFFFFF;

    --rz-info: #0891B2;
    --rz-on-info: #FFFFFF;
    --rz-info-light: #22D3EE;
    --rz-on-info-light: #083344;
    --rz-info-lighter: rgba(8, 145, 178, 0.12);
    --rz-on-info-lighter: #0891B2;
    --rz-info-dark: #0E7490;
    --rz-on-info-dark: #FFFFFF;
    --rz-info-darker: #155E75;
    --rz-on-info-darker: #FFFFFF;

    /* ----------------------------------------------------------
       Brand: Accent — Emerald Green (healthcare)
       ---------------------------------------------------------- */
    --rz-accent: #059669;
    --rz-on-accent: #FFFFFF;
    --rz-accent-light: #34D399;
    --rz-accent-lighter: rgba(5, 150, 105, 0.12);
    --rz-accent-dark: #047857;
    --rz-accent-darker: #065F46;

    /* ----------------------------------------------------------
       Brand: Neutral — Warm Grey
       ---------------------------------------------------------- */
    --rz-neutral: #4A5568;
    --rz-on-neutral: #FFFFFF;
    --rz-neutral-light: #718096;
    --rz-neutral-lighter: rgba(74, 85, 104, 0.12);
    --rz-neutral-dark: #2D3748;
    --rz-neutral-darker: #1A202C;

    /* ----------------------------------------------------------
       Brand: Highlight — Warm Amber
       ---------------------------------------------------------- */
    --rz-highlight: #F59E0B;
    --rz-on-highlight: #1A1A1A;
    --rz-highlight-light: #FBBF24;
    --rz-highlight-lighter: rgba(245, 158, 11, 0.12);
    --rz-highlight-dark: #D97706;
    --rz-highlight-darker: #B45309;

    /* ----------------------------------------------------------
       Base Scale — Warm Neutrals (NOT cold grey)
       ---------------------------------------------------------- */
    --rz-base: #D6D3CF;
    --rz-base-50: #FFFFFF;
    --rz-base-100: #F7F5F2;        /* warm off-white — KEY CHANGE */
    --rz-base-200: #EFECE8;
    --rz-base-300: #E2E0DD;
    --rz-base-400: #C8C5C0;
    --rz-base-500: #9CA3A8;
    --rz-base-600: #64748B;
    --rz-base-700: #475569;
    --rz-base-800: #334155;
    --rz-base-900: #1E293B;
    --rz-base-light: #EFECE8;
    --rz-base-lighter: #FFFFFF;
    --rz-base-dark: #64748B;
    --rz-base-darker: #334155;
    --rz-base-backgorund-color: #0D667C;

    --rz-on-base: #1E293B;
    --rz-on-base-light: #1E293B;
    --rz-on-base-lighter: #1E293B;
    --rz-on-base-dark: #FFFFFF;
    --rz-on-base-darker: #FFFFFF;

    /* ----------------------------------------------------------
       Semantic: Body / Background
       ---------------------------------------------------------- */
    --rz-body-background-color: var(--rz-base-100);
    --rz-content-background-color: #FFFFFF;
    --rz-sidebar-background-color: var(--rz-base-100);
    --rz-form-background-color: #FFFFFF;

    /* ----------------------------------------------------------
       Semantic: Text
       ---------------------------------------------------------- */
    --rz-text-color: #1E293B;
    --rz-text-title-color: var(--rz-base-900);
    --rz-text-secondary-color: var(--rz-base-700);
    --rz-text-tertiary-color: var(--rz-base-600);
    --rz-text-disabled-color: var(--rz-base-500);
    --rz-text-contrast-color: #FFFFFF;
    --rz-text-white: #64748B;

    /* ----------------------------------------------------------
       Chart Series — Accessible for light backgrounds
       ---------------------------------------------------------- */
    --rz-series-1: #208BAA;
    --rz-series-2: #059669;
    --rz-series-3: #D97706;
    --rz-series-4: #DC2626;
    --rz-series-5: #7C3AED;
    --rz-series-6: #DB2777;
    --rz-series-7: #0891B2;
    --rz-series-8: #65A30D;
    --rz-series-9: #EA580C;
    --rz-series-10: #4F46E5;
    --rz-series-11: #0D9488;
    --rz-series-12: #CA8A04;
    --rz-series-13: #9333EA;
    --rz-series-14: #E11D48;
    --rz-series-15: #0284C7;
    --rz-series-16: #16A34A;
    --rz-series-17: #C2410C;
    --rz-series-18: #6D28D9;
    --rz-series-19: #BE185D;
    --rz-series-20: #0E7490;
    --rz-series-21: #4D7C0F;
    --rz-series-22: #B91C1C;
    --rz-series-23: #5B21B6;
    --rz-series-24: #9D174D;

    /* ==========================================================
       EyeManage Semantic Tokens (--em-*)
       Application-level design tokens that reference --rz-*
       ========================================================== */

    /* --- Primary --- */
    --em-primary: var(--rz-primary);
    --em-primary-light: var(--rz-primary-light);
    --em-primary-lighter: var(--rz-primary-lighter);
    --em-primary-dark: var(--rz-primary-dark);
    --em-primary-darker: var(--rz-primary-darker);

    /* --- Secondary --- */
    --em-secondary: var(--rz-secondary);
    --em-secondary-light: var(--rz-secondary-light);
    --em-secondary-lighter: var(--rz-secondary-lighter);
    --em-secondary-dark: var(--rz-secondary-dark);
    --em-secondary-darker: var(--rz-secondary-darker);

    /* --- Accent (Emerald) --- */
    --em-accent: var(--rz-accent);
    --em-accent-light: var(--rz-accent-light);
    --em-accent-lighter: var(--rz-accent-lighter);
    --em-accent-dark: var(--rz-accent-dark);

    /* --- Backgrounds --- */
    --em-bg-primary: var(--rz-content-background-color);
    --em-bg-secondary: var(--rz-base-100);
    --em-bg-tertiary: var(--rz-form-background-color);
    --em-bg-page: var(--rz-base-100);
    --em-bg-surface: var(--rz-content-background-color);
    --em-bg-surface-raised: var(--rz-content-background-color);
    --em-bg-surface-sunken: var(--rz-base-200);
    --em-bg-overlay: rgba(30, 41, 59, 0.5);
    --em-bg-disabled: var(--rz-base-200);

    /* --- Text --- */
    --em-text-primary: var(--rz-text-color);
    --em-text-secondary: var(--rz-text-secondary-color);
    --em-text-tertiary: var(--rz-text-tertiary-color);
    --em-text-inverse: #FFFFFF;
    --em-text-disabled: var(--rz-text-disabled-color);

    /* --- Borders --- */
    --em-border-primary: var(--rz-base-300);
    --em-border-secondary: var(--rz-base-400);
    --em-border-subtle: #ECE9E4;
    --em-border-focus: var(--em-primary);
    --em-border-hover: var(--rz-base-500);
    --em-border-disabled: var(--rz-base-200);

    /* --- Status / on-primary (aliassen op de Radzen-themavariabelen, zodat --em-*
           overal gebruikt kan worden zonder per plek een rz-fallback te herhalen) --- */
    --em-success: var(--rz-success);
    --em-danger: var(--rz-danger);
    --em-warning: var(--rz-warning);
    --em-on-primary: var(--rz-on-primary);

    /* --- Layout: vaste linkerkolom van de order-drawers (DrawerWithAnchors) --- */
    --em-order-left-col: 380px;

    /* ----------------------------------------------------------
       Radzen-compat surface tokens
       Deze --rz-namen worden repo-breed geconsumeerd (CustomEMCard,
       drawers, LensConfigurator, Till, …) maar ontbraken in het
       gegenereerde thema; hier gedefinieerd zodat kaart-achtergronden,
       borders en schaduwen daadwerkelijk token-gestuurd zijn.
       ---------------------------------------------------------- */
    --rz-surface-background: var(--em-bg-surface);
    --rz-surface-background-alt: #FBFAF7;
    --rz-surface-hover: var(--rz-base-200);
    --rz-border-color: var(--em-border-primary);
    --rz-shadow: rgba(30, 41, 59, 0.10); /* schaduw-KLEUR: gebruik als `0 4px 12px var(--rz-shadow)` */

    /* ButtonStyle.Light leesbaar maken (DT-2.39-7): het gegenereerde thema zet
       --rz-button-light op base-200 (#EFECE8) waardoor outlined/text Light-knoppen
       wit-op-wit renderen (rand én tekst). Repo-brede fix via de token. */
    --rz-button-light: var(--rz-base-600);
    --rz-button-light-hover: var(--rz-base-700);
    --rz-button-light-active: var(--rz-base-800);

    /* ----------------------------------------------------------
       Klantendashboard v2 — strak/vierkant designtaal
       Vlak-tinten, actieve-kaart-accenten en semantische
       tekst+vlak-paren voor statuspills en record-accenten.
       ---------------------------------------------------------- */
    --em-surface-sunken: #FBFAF7;                     /* formulierblokken, actieve kaart */
    --em-primary-tint: rgba(32, 139, 170, 0.10);      /* zachte accentvlakken, hover-rijen */
    --em-primary-line: rgba(32, 139, 170, 0.38);      /* rand actieve/geselecteerde kaart */
    --em-shadow-overlay: 0 14px 34px rgba(30, 41, 59, 0.18); /* enige toegestane schaduw: overlays/menu's/drawer */

    /* Semantische paren: -text op -bg, rechthoekige pills (radius xs) */
    --em-sem-success-text: #2E9E5B;
    --em-sem-success-bg: #E7F5EC;
    --em-sem-wait-text: #B7891B;                      /* wachtend / aandacht / gepland */
    --em-sem-wait-bg: #FBF3DE;
    --em-sem-open-text: #B86E10;                      /* nazorg / inkoop open / nog te bestellen */
    --em-sem-open-bg: #FBEFDD;
    --em-sem-error-text: #D6483F;                     /* fout / retour / destructief */
    --em-sem-error-bg: #FBE9EC;
    --em-sem-subscription-text: #7E5AA6;              /* abonnement / secundair paars */
    --em-sem-subscription-bg: #F2ECF7;
    --em-sem-neutral-text: #5A6B71;                   /* draft, betaalstatus open, inactief */
    --em-sem-neutral-bg: #F0EEE7;

    /* Domein-accenten (3px border-top van kolommen) */
    --em-domain-appointments: #2E9E5B;
    --em-domain-sales: var(--rz-primary);
    --em-domain-medical: #D6483F;
    --em-domain-notes: #C9A227;
    --em-domain-subscriptions: #7E5AA6;
    --em-domain-aftersales: #E07B3C;
    --em-accent-draft: #9AA7AC;                       /* status-accent links op draft-kaarten */

    /* --- Forms --- */
    --em-form-bg: var(--rz-form-background-color);
    --em-form-border: var(--rz-base-400);
    --em-form-text: var(--rz-text-color);
    --em-form-placeholder: var(--rz-text-tertiary-color);
    --em-form-focus-ring: rgba(32, 139, 170, 0.15);
    --em-form-error: var(--rz-danger);
    --em-form-success: var(--rz-success);
    --em-form-warning: var(--rz-warning);

    /* --- Buttons --- */
    --em-btn-primary-bg: var(--em-primary);
    --em-btn-primary-text: #FFFFFF;
    --em-btn-primary-hover: var(--em-primary-dark);
    --em-btn-secondary-bg: var(--em-secondary);
    --em-btn-secondary-text: #FFFFFF;
    --em-btn-secondary-hover: var(--em-secondary-dark);
    --em-btn-light-bg: var(--em-bg-secondary);
    --em-btn-light-text: var(--em-text-primary);
    --em-btn-light-hover: var(--rz-base-300);

    /* --- Drawer / Modal --- */
    --em-drawer-bg: var(--em-bg-surface);
    --em-drawer-header-bg: var(--em-bg-surface-sunken);
    --em-drawer-footer-bg: var(--em-bg-surface-sunken);
    --em-drawer-overlay: var(--em-bg-overlay);
    --em-drawer-shadow: 0 20px 25px rgba(30, 41, 59, 0.10), 0 8px 10px rgba(30, 41, 59, 0.04);
    --em-drawer-border: var(--em-border-primary);
    --em-drawer-anchor-bg: var(--em-bg-surface-sunken);
    --em-drawer-anchor-active: var(--em-primary);

    /* --- Status Semantic --- */
    --em-status-inbox: var(--rz-info);
    --em-status-draft: var(--rz-base-600);
    --em-status-ready: var(--rz-primary);
    --em-status-progress: var(--rz-warning);
    --em-status-done: var(--rz-success);
    --em-status-approved: var(--rz-success);
    --em-status-review: var(--rz-warning);

    /* --- Priority --- */
    --em-priority-p1: var(--rz-danger);
    --em-priority-p2: var(--rz-warning);
    --em-priority-p3: var(--rz-info);
    --em-priority-p4: var(--rz-base-200);

    /* --- Type Semantic --- */
    --em-type-feature: var(--rz-success);
    --em-type-bug: var(--rz-danger);
    --em-type-enhancement: var(--rz-info);
    --em-type-task: var(--rz-primary);
    --em-type-research: var(--rz-base-600);
    --em-type-documentation: var(--rz-warning);

    /* --- Optical / Medical Domain --- */
    --em-eye-od: #208BAA;            /* Rechteroog (OD) — primary teal */
    --em-eye-os: #7C3AED;            /* Linkeroog (OS) — paars, conform brilorder-conventie */
    --em-ear-ad: #DC2626;            /* Rechteroor (AD) — rood, audiologie-conventie */
    --em-ear-as: #2563EB;            /* Linkeroor (AS) — blauw, audiologie-conventie */
    --em-rx-highlight: #FEF3C7;      /* Recept waarschuwing achtergrond */
    --em-rx-error: #FEE2E2;          /* Recept fout achtergrond */
    --em-measurement: #1E293B;       /* Meetwaarden — altijd hoog contrast */

    /* --- Sidebar --- */
    --em-sidebar-gradient: linear-gradient(180deg, #208BAA 0%, #1A7090 40%, #0D667C 100%);
    --em-sidebar-text: #F0FDFA;
    --em-sidebar-active: rgba(255, 255, 255, 0.15);
    --em-sidebar-hover: rgba(255, 255, 255, 0.08);

    /* --- NavRail "Menu 6" (light) — DT-2.39-4 --- */
    --em-rail-bg: linear-gradient(180deg, #2493B0 0%, #19788F 100%);
    --em-rail-wordmark: #FFFFFF;
    --em-rail-work: rgba(255, 255, 255, 0.82);
    --em-rail-bbs: rgba(255, 255, 255, 0.60);
    --em-rail-label: rgba(255, 255, 255, 0.92);
    --em-rail-caret: rgba(255, 255, 255, 0.50);
    --em-rail-hover-bg: rgba(255, 255, 255, 0.13);
    --em-rail-pill-bg: #FFFFFF;
    --em-rail-pill-fg: #178198;
    --em-rail-pill-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    --em-rail-subborder: rgba(255, 255, 255, 0.24);
    --em-rail-subtext: rgba(255, 255, 255, 0.82);
    --em-rail-subhover-bg: rgba(255, 255, 255, 0.11);
    --em-rail-logo-shadow: 0 5px 12px rgba(0, 0, 0, 0.16);

    /* --- Shadows / Elevation --- */
    --em-shadow-xs: 0 1px 2px rgba(30, 41, 59, 0.05);
    --em-shadow-sm: 0 1px 3px rgba(30, 41, 59, 0.08), 0 1px 2px rgba(30, 41, 59, 0.04);
    --em-shadow-md: 0 4px 6px rgba(30, 41, 59, 0.07), 0 2px 4px rgba(30, 41, 59, 0.04);
    --em-shadow-lg: 0 10px 15px rgba(30, 41, 59, 0.08), 0 4px 6px rgba(30, 41, 59, 0.04);
    --em-shadow-xl: 0 20px 25px rgba(30, 41, 59, 0.10), 0 8px 10px rgba(30, 41, 59, 0.04);
    --em-shadow-focus: 0 0 0 3px rgba(32, 139, 170, 0.2);

    /* --- Typography --- */
    --em-font-sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --em-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Source Code Pro', monospace;

    --em-text-xs: 0.75rem;      /* 12px */
    --em-text-sm: 0.875rem;     /* 14px */
    --em-text-base: 1rem;       /* 16px */
    --em-text-lg: 1.125rem;     /* 18px */
    --em-text-xl: 1.25rem;      /* 20px */
    --em-text-2xl: 1.5rem;      /* 24px */
    --em-text-3xl: 1.875rem;    /* 30px */
    --em-text-4xl: 2.25rem;     /* 36px */

    /* --- Spacing (4/8dp grid) --- */
    --em-spacing-xs: 0.25rem;   /* 4px */
    --em-spacing-sm: 0.5rem;    /* 8px */
    --em-spacing-md: 1rem;      /* 16px */
    --em-spacing-lg: 1.5rem;    /* 24px */
    --em-spacing-xl: 2rem;      /* 32px */
    --em-spacing-2xl: 3rem;     /* 48px */

    /* --- Border Radius --- */
    --em-radius-none: 0;
    --em-radius-xs: 2px;
    --em-radius-sm: 4px;
    --em-radius-md: 6px;
    --em-radius-lg: 8px;
    --em-radius-xl: 12px;
    --em-radius-full: 9999px;

    /* --- Transitions --- */
    --em-transition-fast: 0.15s;
    --em-transition-normal: 0.2s;
    --em-transition-slow: 0.3s;
    --em-transition-drawer: 0.25s;

    /* --- Scrollbar --- */
    --em-scrollbar-track: var(--rz-base-200);
    --em-scrollbar-thumb: var(--rz-base-400);
    --em-scrollbar-hover: var(--rz-base-500);
}


/* ============================================================
   DARK MODE
   Activated when RadzenTheme swaps to eyemanage-dark.
   Uses [data-theme] attribute set by MutationObserver on Radzen theme link.
   Also supports @media (prefers-color-scheme: dark) as fallback.
   ============================================================ */
:root[data-theme="dark"] {
    /* ----------------------------------------------------------
       Brand: Primary — Lighter for dark backgrounds
       ---------------------------------------------------------- */
    --rz-primary: #35BAD9;
    --rz-on-primary: #0F2B33;
    --rz-primary-light: #67D0E8;
    --rz-on-primary-light: #0F2B33;
    --rz-primary-lighter: rgba(53, 186, 217, 0.15);
    --rz-on-primary-lighter: #35BAD9;
    --rz-primary-dark: #208BAA;
    --rz-on-primary-dark: #FFFFFF;
    --rz-primary-darker: #1A7090;
    --rz-on-primary-darker: #FFFFFF;

    /* ----------------------------------------------------------
       Brand: Secondary — Lighter for dark backgrounds
       ---------------------------------------------------------- */
    --rz-secondary: #7DB4BC;
    --rz-on-secondary: #0F2B33;
    --rz-secondary-light: #9CC8CE;
    --rz-on-secondary-light: #0F2B33;
    --rz-secondary-lighter: rgba(125, 180, 188, 0.15);
    --rz-on-secondary-lighter: #7DB4BC;
    --rz-secondary-dark: #5F9EA8;
    --rz-on-secondary-dark: #FFFFFF;
    --rz-secondary-darker: #4D8A93;
    --rz-on-secondary-darker: #FFFFFF;

    /* ----------------------------------------------------------
       Functional: Status Colors — Desaturated for dark
       ---------------------------------------------------------- */
    --rz-success: #34D399;
    --rz-on-success: #022C22;
    --rz-success-light: #6EE7B7;
    --rz-on-success-light: #022C22;
    --rz-success-lighter: rgba(52, 211, 153, 0.15);
    --rz-on-success-lighter: #34D399;
    --rz-success-dark: #059669;
    --rz-on-success-dark: #FFFFFF;
    --rz-success-darker: #047857;
    --rz-on-success-darker: #FFFFFF;

    --rz-warning: #FBBF24;
    --rz-on-warning: #422006;
    --rz-warning-light: #FCD34D;
    --rz-on-warning-light: #422006;
    --rz-warning-lighter: rgba(251, 191, 36, 0.15);
    --rz-on-warning-lighter: #FBBF24;
    --rz-warning-dark: #D97706;
    --rz-on-warning-dark: #FFFFFF;
    --rz-warning-darker: #B45309;
    --rz-on-warning-darker: #FFFFFF;

    --rz-danger: #F87171;
    --rz-on-danger: #450A0A;
    --rz-danger-light: #FCA5A5;
    --rz-on-danger-light: #450A0A;
    --rz-danger-lighter: rgba(248, 113, 113, 0.15);
    --rz-on-danger-lighter: #F87171;
    --rz-danger-dark: #DC2626;
    --rz-on-danger-dark: #FFFFFF;
    --rz-danger-darker: #B91C1C;
    --rz-on-danger-darker: #FFFFFF;

    --rz-info: #22D3EE;
    --rz-on-info: #083344;
    --rz-info-light: #67E8F9;
    --rz-on-info-light: #083344;
    --rz-info-lighter: rgba(34, 211, 238, 0.15);
    --rz-on-info-lighter: #22D3EE;
    --rz-info-dark: #0891B2;
    --rz-on-info-dark: #FFFFFF;
    --rz-info-darker: #0E7490;
    --rz-on-info-darker: #FFFFFF;

    /* --- Accent (dark) --- */
    --rz-accent: #34D399;
    --rz-on-accent: #022C22;
    --rz-accent-light: #6EE7B7;
    --rz-accent-lighter: rgba(52, 211, 153, 0.15);
    --rz-accent-dark: #059669;
    --rz-accent-darker: #047857;

    /* --- Neutral (dark) --- */
    --rz-neutral: #A0AEC0;
    --rz-on-neutral: #1A202C;
    --rz-neutral-light: #CBD5E0;
    --rz-neutral-lighter: rgba(160, 174, 192, 0.15);
    --rz-neutral-dark: #718096;
    --rz-neutral-darker: #4A5568;

    /* --- Highlight (dark) --- */
    --rz-highlight: #FBBF24;
    --rz-on-highlight: #422006;
    --rz-highlight-light: #FCD34D;
    --rz-highlight-lighter: rgba(251, 191, 36, 0.15);
    --rz-highlight-dark: #D97706;
    --rz-highlight-darker: #B45309;

    /* ----------------------------------------------------------
       Base Scale — Dark mode (NOT inverted, teal-tinted darks)
       Scale direction: 50=lightest → 900=darkest (same as light)
       Radzen uses base-800/900 for backgrounds in dark mode.
       ---------------------------------------------------------- */
    --rz-base: #3B4F59;
    --rz-base-50: #E2E8F0;          /* lightest (text on dark) */
    --rz-base-100: #CBD5E1;
    --rz-base-200: #94A3B8;
    --rz-base-300: #64748B;
    --rz-base-400: #4A5F6B;
    --rz-base-500: #3B4F59;
    --rz-base-600: #2D3D47;
    --rz-base-700: #1C2A33;
    --rz-base-800: #162028;         /* dark surface (cards) */
    --rz-base-900: #0F1A1F;         /* darkest (page bg) */
    --rz-base-light: #4A5F6B;
    --rz-base-lighter: #64748B;
    --rz-base-dark: #162028;
    --rz-base-darker: #0F1A1F;
    --rz-base-backgorund-color: #0B1318;

    --rz-on-base: #0F1A1F;
    --rz-on-base-light: #0F1A1F;
    --rz-on-base-lighter: #0F1A1F;
    --rz-on-base-dark: #E2E8F0;
    --rz-on-base-darker: #E2E8F0;

    /* --- Semantic: Body / Background --- */
    --rz-body-background-color: var(--rz-base-900);
    --rz-content-background-color: var(--rz-base-800);
    --rz-sidebar-background-color: var(--rz-base-900);
    --rz-form-background-color: var(--rz-base-700);

    /* --- Semantic: Text --- */
    --rz-text-color: #E2E8F0;
    --rz-text-title-color: var(--rz-base-50);
    --rz-text-secondary-color: var(--rz-base-200);
    --rz-text-tertiary-color: var(--rz-base-300);
    --rz-text-disabled-color: var(--rz-base-400);
    --rz-text-contrast-color: #FFFFFF;
    --rz-text-white: #94A3B8;

    /* --- Chart Series — Brighter for dark backgrounds --- */
    --rz-series-1: #35BAD9;
    --rz-series-2: #34D399;
    --rz-series-3: #FBBF24;
    --rz-series-4: #F87171;
    --rz-series-5: #A78BFA;
    --rz-series-6: #F472B6;
    --rz-series-7: #22D3EE;
    --rz-series-8: #84CC16;
    --rz-series-9: #FB923C;
    --rz-series-10: #818CF8;
    --rz-series-11: #2DD4BF;
    --rz-series-12: #EAB308;
    --rz-series-13: #C084FC;
    --rz-series-14: #FB7185;
    --rz-series-15: #38BDF8;
    --rz-series-16: #4ADE80;
    --rz-series-17: #FB923C;
    --rz-series-18: #A78BFA;
    --rz-series-19: #F472B6;
    --rz-series-20: #22D3EE;
    --rz-series-21: #A3E635;
    --rz-series-22: #FCA5A5;
    --rz-series-23: #C4B5FD;
    --rz-series-24: #FDA4AF;

    /* ==========================================================
       EyeManage Semantic Token Overrides (dark mode)
       ========================================================== */

    /* --- Backgrounds --- */
    --em-bg-primary: var(--rz-content-background-color);
    --em-bg-secondary: var(--rz-base-900);
    --em-bg-tertiary: var(--rz-form-background-color);
    --em-bg-page: var(--rz-base-900);
    --em-bg-surface: var(--rz-content-background-color);
    --em-bg-surface-raised: var(--rz-base-700);
    --em-bg-surface-sunken: var(--rz-base-900);
    --em-bg-overlay: rgba(0, 0, 0, 0.65);
    --em-bg-disabled: var(--rz-base-700);

    /* --- Text --- */
    --em-text-primary: #E2E8F0;
    --em-text-secondary: #94A3B8;
    --em-text-tertiary: #64748B;
    --em-text-inverse: #0F1A1F;
    --em-text-disabled: #4A5F6B;

    /* --- Borders --- */
    --em-border-primary: var(--rz-base-600);
    --em-border-secondary: var(--rz-base-500);
    --em-border-subtle: var(--rz-base-700);
    --em-border-hover: var(--rz-base-400);
    --em-border-disabled: var(--rz-base-700);

    /* --- Radzen-compat surface tokens (dark) --- */
    --rz-surface-background: var(--em-bg-surface);
    --rz-surface-background-alt: var(--rz-base-800);
    --rz-surface-hover: var(--rz-base-700);
    --rz-border-color: var(--em-border-primary);
    --rz-shadow: rgba(0, 0, 0, 0.35);

    /* ButtonStyle.Light (dark): lichte rand/tekst op donkere vlakken */
    --rz-button-light: var(--rz-base-400);
    --rz-button-light-hover: var(--rz-base-300);
    --rz-button-light-active: var(--rz-base-200);

    /* --- Klantendashboard v2 (dark) --- */
    --em-surface-sunken: var(--rz-base-800);
    --em-primary-tint: rgba(53, 186, 217, 0.14);
    --em-primary-line: rgba(53, 186, 217, 0.45);
    --em-shadow-overlay: 0 14px 34px rgba(0, 0, 0, 0.45);

    --em-sem-success-text: #57C888;
    --em-sem-success-bg: rgba(46, 158, 91, 0.18);
    --em-sem-wait-text: #DBB25A;
    --em-sem-wait-bg: rgba(183, 137, 27, 0.18);
    --em-sem-open-text: #E09A4B;
    --em-sem-open-bg: rgba(184, 110, 16, 0.18);
    --em-sem-error-text: #F08078;
    --em-sem-error-bg: rgba(214, 72, 63, 0.18);
    --em-sem-subscription-text: #B79BD8;
    --em-sem-subscription-bg: rgba(126, 90, 166, 0.20);
    --em-sem-neutral-text: #A5B4BA;
    --em-sem-neutral-bg: rgba(90, 107, 113, 0.22);

    --em-domain-appointments: #3EB374;
    --em-domain-sales: var(--rz-primary);
    --em-domain-medical: #E0645B;
    --em-domain-notes: #D4B04A;
    --em-domain-subscriptions: #9878C0;
    --em-domain-aftersales: #E8925C;
    --em-accent-draft: #6E7E85;

    /* --- Forms --- */
    --em-form-bg: var(--rz-form-background-color);
    --em-form-border: var(--rz-base-500);
    --em-form-text: #E2E8F0;
    --em-form-placeholder: var(--rz-base-400);
    --em-form-focus-ring: rgba(53, 186, 217, 0.25);

    /* --- Buttons --- */
    --em-btn-light-bg: var(--rz-base-700);
    --em-btn-light-text: #E2E8F0;
    --em-btn-light-hover: var(--rz-base-600);

    /* --- Drawer / Modal --- */
    --em-drawer-shadow: 0 20px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.2);
    --em-drawer-anchor-bg: var(--rz-base-700);

    /* --- Priority --- */
    --em-priority-p4: var(--rz-base-700);

    /* --- Optical / Medical Domain --- */
    --em-eye-od: #35BAD9;
    --em-eye-os: #A78BFA;
    --em-ear-ad: #F87171;
    --em-ear-as: #60A5FA;
    --em-rx-highlight: rgba(251, 191, 36, 0.15);
    --em-rx-error: rgba(248, 113, 113, 0.15);
    --em-measurement: #E2E8F0;

    /* --- Sidebar --- */
    --em-sidebar-gradient: linear-gradient(180deg, #162028 0%, #0F1A1F 100%);
    --em-sidebar-text: #E2E8F0;
    --em-sidebar-active: rgba(53, 186, 217, 0.15);
    --em-sidebar-hover: rgba(255, 255, 255, 0.05);

    /* --- NavRail "Menu 6" (dark) — DT-2.39-4 --- */
    --em-rail-bg: linear-gradient(180deg, #11566A 0%, #0A3A48 100%);
    --em-rail-wordmark: #FFFFFF;
    --em-rail-work: rgba(255, 255, 255, 0.74);
    --em-rail-bbs: rgba(255, 255, 255, 0.50);
    --em-rail-label: rgba(255, 255, 255, 0.88);
    --em-rail-caret: rgba(255, 255, 255, 0.42);
    --em-rail-hover-bg: rgba(255, 255, 255, 0.09);
    --em-rail-pill-bg: #FFFFFF;
    --em-rail-pill-fg: #0E5266;
    --em-rail-pill-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
    --em-rail-subborder: rgba(255, 255, 255, 0.18);
    --em-rail-subtext: rgba(255, 255, 255, 0.74);
    --em-rail-subhover-bg: rgba(255, 255, 255, 0.09);
    --em-rail-logo-shadow: 0 5px 14px rgba(0, 0, 0, 0.32);

    /* --- Shadows --- */
    --em-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --em-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --em-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --em-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.2);
    --em-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.2);
    --em-shadow-focus: 0 0 0 3px rgba(53, 186, 217, 0.3);

    /* --- Scrollbar --- */
    --em-scrollbar-track: var(--rz-base-800);
    --em-scrollbar-thumb: var(--rz-base-500);
    --em-scrollbar-hover: var(--rz-base-400);
}

/* Fallback: system dark mode preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Same as dark mode above — only activates if no explicit light theme set */
        --em-bg-overlay: rgba(0, 0, 0, 0.65);
    }
}


/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: high) {
    :root {
        --em-border-primary: #000000;
        --em-border-secondary: #000000;
        --em-text-secondary: #1E293B;
        --em-form-border: #000000;
    }

    :root[data-theme="dark"] {
        --em-border-primary: #E2E8F0;
        --em-border-secondary: #E2E8F0;
        --em-text-secondary: #E2E8F0;
        --em-form-border: #E2E8F0;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --em-transition-fast: 0.01ms;
        --em-transition-normal: 0.01ms;
        --em-transition-slow: 0.01ms;
        --em-transition-drawer: 0.01ms;
    }
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Backgrounds */
.em-bg-primary { background-color: var(--em-bg-primary); }
.em-bg-secondary { background-color: var(--em-bg-secondary); }
.em-bg-tertiary { background-color: var(--em-bg-tertiary); }
.em-bg-surface { background-color: var(--em-bg-surface); }
.em-bg-surface-sunken { background-color: var(--em-bg-surface-sunken); }

/* Text */
.em-text-primary { color: var(--em-text-primary); }
.em-text-secondary { color: var(--em-text-secondary); }
.em-text-tertiary { color: var(--em-text-tertiary); }
.em-text-inverse { color: var(--em-text-inverse); }

/* Borders */
.em-border { border: 1px solid var(--em-border-primary); }
.em-border-secondary { border: 1px solid var(--em-border-secondary); }
.em-border-focus { border-color: var(--em-border-focus); }

/* Shadows */
.em-shadow-xs { box-shadow: var(--em-shadow-xs); }
.em-shadow-sm { box-shadow: var(--em-shadow-sm); }
.em-shadow-md { box-shadow: var(--em-shadow-md); }
.em-shadow-lg { box-shadow: var(--em-shadow-lg); }
.em-shadow-xl { box-shadow: var(--em-shadow-xl); }

/* Transitions */
.em-transition { transition: all var(--em-transition-normal) ease; }
.em-transition-fast { transition: all var(--em-transition-fast) ease; }
.em-transition-slow { transition: all var(--em-transition-slow) ease; }

/* Optical / Medical */
.em-eye-od { color: var(--em-eye-od); }
.em-eye-os { color: var(--em-eye-os); }
.em-border-od { border-left: 3px solid var(--em-eye-od); }
.em-border-os { border-left: 3px solid var(--em-eye-os); }
.em-border-ad { border-left: 3px solid var(--em-ear-ad); }
.em-border-as { border-left: 3px solid var(--em-ear-as); }
.em-rx-highlight { background-color: var(--em-rx-highlight); }
.em-rx-error { background-color: var(--em-rx-error); }

/* CustomSide — oog-lateraliteit (DT-2.39-1). Kleur ALTIJD via de tokens hierboven. */
.em-side {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.em-side--badge {
    color: #fff;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    min-width: 2.1rem;
}
.em-side--badge.em-side--od { background: var(--em-eye-od); }
.em-side--badge.em-side--os { background: var(--em-eye-os); }
.em-side--badge.em-side--ou { background: linear-gradient(100deg, var(--em-eye-od) 0 49%, var(--em-eye-os) 51% 100%); }
.em-side--badge.em-side--ad { background: var(--em-ear-ad); }
.em-side--badge.em-side--as { background: var(--em-ear-as); }
.em-side--badge.em-side--au { background: linear-gradient(100deg, var(--em-ear-ad) 0 49%, var(--em-ear-as) 51% 100%); }
.em-side--chip {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    min-width: 2.1rem;
}
.em-side--chip.em-side--od, .em-side--label.em-side--od { color: var(--em-eye-od); }
.em-side--chip.em-side--os, .em-side--label.em-side--os { color: var(--em-eye-os); }
.em-side--chip.em-side--ou, .em-side--label.em-side--ou { color: var(--rz-text-secondary-color, #64748B); }
.em-side--chip.em-side--ad, .em-side--label.em-side--ad { color: var(--em-ear-ad); }
.em-side--chip.em-side--as, .em-side--label.em-side--as { color: var(--em-ear-as); }
.em-side--chip.em-side--au, .em-side--label.em-side--au { color: var(--rz-text-secondary-color, #64748B); }

/* CustomSidePairRow — twee rijen (OD/OS) met content per oog */
.em-sidepair { display: flex; flex-direction: column; gap: 0.5rem; }
.em-sidepair__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--em-radius-sm, 4px);
    background: var(--rz-base-100, rgba(0, 0, 0, 0.02));
}
.em-sidepair__content { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }

/* CustomDiopterValue / CustomCurrencyDisplay / CustomDateDisplay */
.em-diopter { font-variant-numeric: tabular-nums; font-weight: 500; }
.em-currency { font-variant-numeric: tabular-nums; }
.em-currency--negative { color: var(--rz-danger, #DC2626); }
.em-currency--positive { color: var(--rz-success, #059669); }

/* CustomMedicalRangeIndicator — waarde + ernst-band */
.em-range {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    border: 1px solid transparent;
}
.em-range__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.em-range--info { background: rgba(53, 162, 217, 0.12); color: #1d6fa5; border-color: rgba(53, 162, 217, 0.35); }
.em-range--success { background: rgba(5, 150, 105, 0.12); color: #047857; border-color: rgba(5, 150, 105, 0.35); }
.em-range--warning { background: rgba(217, 119, 6, 0.14); color: #b45309; border-color: rgba(217, 119, 6, 0.4); }
.em-range--danger { background: rgba(220, 38, 38, 0.12); color: #b91c1c; border-color: rgba(220, 38, 38, 0.4); }

/* CustomLoadingIndicator */
.em-loading { display: flex; align-items: center; gap: 0.75rem; justify-content: center; padding: 1rem; }
.em-loading__text { color: var(--rz-text-secondary-color, #64748B); }

/* Design System Showcase-pagina */
.em-showcase-table { border-collapse: collapse; }
.em-showcase-table th, .em-showcase-table td { padding: 0.5rem 1.25rem 0.5rem 0; text-align: left; }
.em-showcase-table thead th { border-bottom: 1px solid var(--rz-base-300, #e2e8f0); }

/* CustomIconText */
.em-icontext { display: inline-flex; align-items: center; gap: 0.4rem; vertical-align: middle; }
.em-icontext--small { font-size: 0.8rem; }
.em-icontext--small .rzi { font-size: 1rem; }
.em-icontext--medium { font-size: 0.95rem; }
.em-icontext--medium .rzi { font-size: 1.2rem; }
.em-icontext--large { font-size: 1.1rem; }
.em-icontext--large .rzi { font-size: 1.5rem; }

/* Tabular numerics — critical for prescriptions, prices, codes */
.em-tabular-nums {
    font-variant-numeric: tabular-nums;
}
.em-mono {
    font-family: var(--em-font-mono);
    font-variant-numeric: tabular-nums;
}
.em-measurement {
    font-family: var(--em-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--em-measurement);
    font-weight: 600;
}

/* Medical block — distance/near (or labeled) rows: fixed label + control. */
.em-dnrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.em-dnrow__label {
    flex: 0 0 8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6b7280);
}

/* ==========================================================
   ButtonStyle.Light — gevulde variant (DT-2.39-7)
   Het gegenereerde thema geeft de filled Light-knop een hardcoded
   paars (#9B72C5); hier neutraal conform de v2-taal: sunken vlak,
   donkere tekst, 1px rand. Outlined/text-varianten volgen de
   --rz-button-light-token (hierboven leesbaar gemaakt).
   ========================================================== */
.rz-button.rz-light {
    background-color: var(--em-surface-sunken);
    color: var(--em-text-primary);
    box-shadow: inset 0 0 0 1px var(--em-border-primary);
}

.rz-button.rz-light:not(:disabled):hover {
    background-color: var(--rz-surface-hover);
    color: var(--em-text-primary);
}