/* ============================================================
   EyeManage — merk-overlay "EyeWish" (demo, DT-2.39-9)

   Laadt NA design-system.css en overschrijft uitsluitend tokens
   die daar al gedefinieerd zijn, onder :root[data-brand="eyewish"].
   Zonder dat attribuut doet dit bestand niets: de bestaande
   light/dark-thema's blijven volledig intact.

   Vocabulaire van eyewish.com (peildatum 2026-09-14): wit en zwart,
   veel witruimte, dunne lichtgrijze lijnen, pil-vormige knoppen.
   Geel (#FFD600) is uitsluitend het accent: de call-to-action,
   de actieve menuregel en het klant-kopvlak — verder niets.
   Lettertype Axiforma is commercieel en wordt niet gebundeld.

   Schakelen: knop in de topbalk (BrandToggle) → window.emBrand,
   cookie + localStorage 'em-brand'. Geen opslag in de database.
   ============================================================ */

:root[data-brand="eyewish"] {
    /* --- Primair = de INKT: zwart. De app gebruikt de primaire kleur op ruim
           honderd plekken als tekst-, link- en randkleur; geel kan dat nooit dragen.
           Geel komt alleen terug op gevulde CTA-vlakken (regels onderaan). --- */
    --rz-primary: #1A1A1A;
    --rz-on-primary: #FFFFFF;
    --rz-primary-light: #3D3D3D;
    --rz-on-primary-light: #FFFFFF;
    --rz-primary-lighter: #F6F6F6;          /* tinten/chips: neutraal, géén geel */
    --rz-on-primary-lighter: #2B2E31;
    --rz-primary-dark: #000000;
    --rz-on-primary-dark: #FFFFFF;
    --rz-primary-darker: #000000;
    --rz-on-primary-darker: #FFFFFF;

    /* --- Secundair: zwart, zoals de tweede knop op de site --- */
    --rz-secondary: #2B2E31;
    --rz-on-secondary: #FFFFFF;
    --rz-secondary-light: #4A4D50;
    --rz-on-secondary-light: #FFFFFF;
    --rz-secondary-lighter: rgba(43, 46, 49, 0.08);
    --rz-on-secondary-lighter: #2B2E31;
    --rz-secondary-dark: #1A1A1A;
    --rz-on-secondary-dark: #FFFFFF;
    --rz-secondary-darker: #000000;
    --rz-on-secondary-darker: #FFFFFF;

    /* --- Status (EyeWish-tinten, ingetogen) --- */
    --rz-success: #3FA178;
    --rz-success-light: #6BBF9A;
    --rz-success-lighter: #E7F3EE;
    --rz-on-success-lighter: #2C7A59;
    --rz-success-dark: #2C7A59;
    --rz-success-darker: #1F5A41;

    --rz-warning: #F29100;
    --rz-warning-light: #F7BD66;
    --rz-warning-lighter: #FEF4E5;
    --rz-on-warning-lighter: #B86E10;
    --rz-warning-dark: #D17D00;
    --rz-warning-darker: #A86400;

    --rz-danger: #A82424;
    --rz-danger-light: #D14A4A;
    --rz-danger-lighter: #FCEAED;
    --rz-on-danger-lighter: #A82424;
    --rz-danger-dark: #8A1D1D;
    --rz-danger-darker: #6A1515;

    --rz-info: #006FAC;
    --rz-info-light: #3B94C9;
    --rz-info-lighter: #E0F4FF;
    --rz-on-info-lighter: #006FAC;
    --rz-info-dark: #005A8C;
    --rz-info-darker: #00466D;

    /* --- Accent / neutraal / highlight: monochroom, geel als highlight --- */
    --rz-accent: #2B2E31;
    --rz-accent-light: #4A4D50;
    --rz-accent-lighter: rgba(43, 46, 49, 0.08);
    --rz-accent-dark: #1A1A1A;
    --rz-accent-darker: #000000;

    --rz-neutral: #3D3D3D;
    --rz-neutral-light: #707070;
    --rz-neutral-lighter: rgba(61, 61, 61, 0.08);
    --rz-neutral-dark: #2B2E31;
    --rz-neutral-darker: #1A1A1A;

    --rz-highlight: #FFD600;
    --rz-on-highlight: #1A1A1A;
    --rz-highlight-light: #FFE24D;
    --rz-highlight-lighter: rgba(255, 214, 0, 0.16);
    --rz-highlight-dark: #F2C800;
    --rz-highlight-darker: #E0B800;

    /* --- Basisvlakken: wit, met koel lichtgrijs voor lijnen en velden --- */
    --rz-base: #E7E7E7;
    --rz-base-50: #FFFFFF;
    --rz-base-100: #FAFAFA;
    --rz-base-200: #F6F6F6;
    --rz-base-300: #E7E7E7;
    --rz-base-400: #D4D4D4;
    --rz-base-500: #A3A3A3;
    --rz-base-600: #707070;
    --rz-base-700: #3D3D3D;
    --rz-base-800: #2B2E31;
    --rz-base-900: #1A1A1A;
    --rz-base-light: #F6F6F6;
    --rz-base-lighter: #FFFFFF;
    --rz-base-dark: #707070;
    --rz-base-darker: #2B2E31;

    --rz-body-background-color: var(--rz-base-100);
    --rz-text-color: #2B2E31;
    --rz-text-title-color: #1A1A1A;
    --rz-text-secondary-color: #707070;
    --rz-text-tertiary-color: #8A8A8A;
    --rz-text-disabled-color: #A3A3A3;
    --rz-text-white: #707070;
    --rz-base-backgorund-color: #1A1A1A;

    /* --- Radzen-compat vlakken --- */
    --rz-surface-background-alt: #FAFAFA;
    --rz-shadow: rgba(0, 0, 0, 0.08);
    --rz-button-light: var(--rz-base-700);
    --rz-button-light-hover: var(--rz-base-800);
    --rz-button-light-active: #1A1A1A;

    /* --- Semantische EyeManage-tokens --- */
    --em-border-subtle: #EFEFEF;
    --em-surface-sunken: #FAFAFA;
    --em-primary-tint: rgba(255, 214, 0, 0.12);
    --em-primary-line: #FFD600;
    --em-shadow-overlay: 0 14px 34px rgba(0, 0, 0, 0.14);
    --em-shadow-focus: 0 0 0 3px rgba(255, 214, 0, 0.55);
    --em-form-focus-ring: rgba(255, 214, 0, 0.45);
    --em-border-focus: #1A1A1A;

    --em-btn-primary-text: #FFFFFF;
    --em-btn-secondary-text: #FFFFFF;

    --em-sem-success-text: #2C7A59;
    --em-sem-success-bg: #E7F3EE;
    --em-sem-wait-text: #A86400;
    --em-sem-wait-bg: #FEF4E5;
    --em-sem-open-text: #B86E10;
    --em-sem-open-bg: #FEF4E5;
    --em-sem-error-text: #A82424;
    --em-sem-error-bg: #FCEAED;
    --em-sem-subscription-text: #3D3D3D;
    --em-sem-subscription-bg: #F6F6F6;
    --em-sem-neutral-text: #707070;
    --em-sem-neutral-bg: #F6F6F6;

    /* Kolomaccenten: één rustige zwarte lijn, geen regenboog */
    --em-domain-appointments: #2B2E31;
    --em-domain-sales: #2B2E31;
    --em-domain-medical: #2B2E31;
    --em-domain-notes: #2B2E31;
    --em-domain-subscriptions: #2B2E31;
    --em-domain-aftersales: #2B2E31;
    --em-accent-draft: #A3A3A3;

    /* Klant-kopvlak: geel met zwarte tekst, net als de servicefilters en de CTA. */
    --em-customer-hero-bg: #FFD600;
    --em-customer-hero-fg: #1A1A1A;

    /* --- Zijbalk / NavRail: wit met zwarte tekst, actieve regel als gele pil --- */
    --em-sidebar-gradient: #FFFFFF;
    --em-sidebar-text: #2B2E31;
    --em-sidebar-active: rgba(255, 214, 0, 0.35);
    --em-sidebar-hover: #F6F6F6;
    --em-rail-bg: #FFFFFF;
    --em-rail-wordmark: #1A1A1A;
    --em-rail-work: #707070;
    --em-rail-bbs: #A3A3A3;
    --em-rail-label: #2B2E31;
    --em-rail-caret: #A3A3A3;
    --em-rail-hover-bg: #F6F6F6;
    --em-rail-pill-bg: #FFD600;
    --em-rail-pill-fg: #1A1A1A;
    --em-rail-pill-shadow: none;
    --em-rail-subborder: #E7E7E7;
    --em-rail-subtext: #3D3D3D;
    --em-rail-subhover-bg: #F6F6F6;
    --em-rail-logo-shadow: none;
}

/* Vormtaal van de site: pil-vormige knoppen en badges, dunne grijze scheidslijn
   naast de witte zijbalk. Gevulde primaire knoppen zijn de gele CTA met zwarte
   tekst; de tweede knopstijl (outlined) is wit met zwarte rand, zoals op de site. */
:root[data-brand="eyewish"] .rz-button,
:root[data-brand="eyewish"] .rz-badge {
    border-radius: 9999px;
}
:root[data-brand="eyewish"] .nav-rail {
    border-right: 1px solid #E7E7E7;
}
:root[data-brand="eyewish"] .rz-button.rz-variant-filled.rz-primary,
:root[data-brand="eyewish"] .rz-badge.rz-badge-primary {
    background-color: #FFD600;
    color: #1A1A1A;
}
:root[data-brand="eyewish"] .rz-button.rz-variant-filled.rz-primary:hover:not(:disabled) {
    background-color: #F2C800;
    color: #1A1A1A;
}
:root[data-brand="eyewish"] .rz-button.rz-variant-outlined.rz-primary {
    box-shadow: inset 0 0 0 1.5px #2B2E31;
    color: #1A1A1A;
}

/* Selectievlakken die op de site óók geel zijn: de servicefilters bovenaan het
   klantdashboard en de snelboek-knoppen in het afsprakenpaneel. Geel met zwarte tekst,
   iets donkerder geel bij hover. */
:root[data-brand="eyewish"] .tab-item.active,
:root[data-brand="eyewish"] .tab-item.active-all,
:root[data-brand="eyewish"] .tab-item.included,
:root[data-brand="eyewish"] .quickbook-overlay__type,
:root[data-brand="eyewish"] .quickbook-overlay__full {
    background: #FFD600;
    border-color: #FFD600;
    color: #1A1A1A;
}
:root[data-brand="eyewish"] .tab-item.active:hover,
:root[data-brand="eyewish"] .tab-item.active-all:hover,
:root[data-brand="eyewish"] .tab-item.included:hover,
:root[data-brand="eyewish"] .quickbook-overlay__type:hover,
:root[data-brand="eyewish"] .quickbook-overlay__full:hover {
    background: #F2C800;
    border-color: #F2C800;
    color: #1A1A1A;
}

/* Badges in het gele klant-kopvlak (spaarpunten, abonnement, niveau): de kaart dwingt
   zwarte tekst af en de badge-achtergronden zijn in EyeWish óók zwart of grijs — dan is er
   niets te lezen. Hier: zwarte pil met witte tekst, de tweede kleur van de site. */
:root[data-brand="eyewish"] .primary-card .rz-badge {
    background: #1A1A1A !important;
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
}

/* Donkere modus + EyeWish: zwart-grijs met geel als accent. */
:root[data-theme="dark"][data-brand="eyewish"] {
    --rz-primary: #F6F6F6;
    --rz-on-primary: #1A1A1A;
    --rz-primary-light: #FFFFFF;
    --rz-on-primary-light: #1A1A1A;
    --rz-primary-lighter: #2B2E31;
    --rz-on-primary-lighter: #F6F6F6;
    --rz-primary-dark: #D4D4D4;
    --rz-on-primary-dark: #1A1A1A;
    --rz-primary-darker: #A3A3A3;
    --rz-on-primary-darker: #1A1A1A;

    --rz-secondary: #E7E7E7;
    --rz-on-secondary: #1A1A1A;
    --rz-secondary-light: #F6F6F6;
    --rz-secondary-lighter: rgba(231, 231, 231, 0.12);
    --rz-on-secondary-lighter: #E7E7E7;
    --rz-secondary-dark: #D4D4D4;
    --rz-secondary-darker: #A3A3A3;

    --rz-base-900: #141414;
    --rz-base-800: #1F1F1F;
    --rz-base-700: #2B2E31;
    --rz-body-background-color: var(--rz-base-900);

    --em-primary-tint: rgba(255, 214, 0, 0.12);
    --em-primary-line: #FFD600;
    --em-form-focus-ring: rgba(255, 214, 0, 0.35);
    --em-shadow-focus: 0 0 0 3px rgba(255, 214, 0, 0.4);
    --em-border-focus: #FFD600;
    --em-btn-primary-text: #1A1A1A;

    --em-domain-appointments: #E7E7E7;
    --em-domain-sales: #E7E7E7;
    --em-domain-medical: #E7E7E7;
    --em-domain-notes: #E7E7E7;
    --em-domain-subscriptions: #E7E7E7;
    --em-domain-aftersales: #E7E7E7;
    --em-customer-hero-bg: #FFD600;
    --em-customer-hero-fg: #1A1A1A;

    --em-sidebar-gradient: #141414;
    --em-sidebar-text: #F6F6F6;
    --em-rail-bg: #141414;
    --em-rail-wordmark: #FFFFFF;
    --em-rail-work: #A3A3A3;
    --em-rail-bbs: #707070;
    --em-rail-label: #F6F6F6;
    --em-rail-caret: #707070;
    --em-rail-hover-bg: #1F1F1F;
    --em-rail-pill-bg: #FFD600;
    --em-rail-pill-fg: #1A1A1A;
    --em-rail-subborder: #2B2E31;
    --em-rail-subtext: #E7E7E7;
    --em-rail-subhover-bg: #1F1F1F;
}
:root[data-theme="dark"][data-brand="eyewish"] .nav-rail {
    border-right: 1px solid #2B2E31;
}
:root[data-theme="dark"][data-brand="eyewish"] .rz-button.rz-variant-outlined.rz-primary {
    box-shadow: inset 0 0 0 1.5px #F6F6F6;
    color: #F6F6F6;
}