/* =============================================================================
GHEYS BRAND — Radzen Blazor Theme Overrides
-----------------------------------------------------------------------------
Laad dit bestand NA de Radzen base CSS en VÓÓr app-specifieke CSS:
In _Host.cshtml / App.razor (Blazor Server):
In index.html (Blazor WASM):
Gebaseerd op Radzen Blazor 4.x / 5.x CSS custom properties.
Verifieer variabelenamen bij een major upgrade via:
https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/themes/default-base.css
============================================================================= */
:root {
/* ── Primaire kleur ──────────────────────────────────────────────────── */
--rz-primary: var(--color-primary);
--rz-primary-color: var(--color-primary);
--rz-primary-dark: var(--color-primary-dark);
--rz-primary-darker: var(--color-primary-darker);
--rz-primary-light: var(--color-primary-light);
--rz-primary-lighter: #f0f7fc;
--rz-primary-contrast: #ffffff;
/* ── Secundaire kleur ────────────────────────────────────────────────────
Radzen gebruikt --rz-secondary (standaard een lichtblauw, #35a0d7) als
accentkleur voor o.a. scheduler-knoppen, tabs, checkboxes, dropdowns,
datepicker en panel-menu indicators. Zonder deze mapping blijven die
onderdelen in Radzen's eigen lichtblauw i.p.v. het Gheys-blauw. */
--rz-secondary: var(--color-primary);
--rz-on-secondary: #ffffff;
--rz-secondary-dark: var(--color-primary-dark);
--rz-secondary-darker: var(--color-primary-darker);
--rz-secondary-light: var(--color-primary-light);
--rz-secondary-lighter: #f0f7fc;
/* ── Semantisch ──────────────────────────────────────────────────────── */
--rz-danger: var(--color-danger);
--rz-danger-dark: #dc2626;
--rz-danger-light: var(--color-danger-bg);
--rz-danger-contrast: #ffffff;
--rz-success: var(--color-success);
--rz-success-dark: #16a34a;
--rz-success-light: var(--color-success-bg);
--rz-success-contrast: #ffffff;
--rz-warning: var(--color-warning);
--rz-warning-dark: #d97706;
--rz-warning-light: var(--color-warning-bg);
--rz-warning-contrast: #ffffff;
--rz-info: var(--color-primary);
--rz-info-light: var(--color-primary-light);
--rz-info-contrast: #ffffff;
/* ── Typografie ──────────────────────────────────────────────────────── */
--rz-body-font-family: var(--font-family);
--rz-body-font-size: var(--font-size-base);
--rz-body-line-height: 1.55;
--rz-heading-font-family: var(--font-family-heading);
/* ── Achtergronden ───────────────────────────────────────────────────── */
--rz-body-background-color: var(--color-bg);
--rz-base-background-color: var(--color-surface);
--rz-secondary-background-color: var(--color-surface-muted);
--rz-tertiary-background-color: var(--color-primary-light);
--rz-overlay-background-color: rgba(11, 40, 70, 0.55);
/* ── Tekst ───────────────────────────────────────────────────────────── */
--rz-text-color: var(--color-text);
--rz-text-secondary-color: var(--color-text-muted);
--rz-text-tertiary-color: var(--color-text-faint);
--rz-text-disabled-color: var(--color-text-faint);
/* ── Borders ─────────────────────────────────────────────────────────── */
--rz-border-radius: var(--radius-base);
--rz-border-radius-sm: var(--radius-sm);
--rz-border-radius-lg: var(--radius-lg);
--rz-border-color: var(--color-border);
--rz-border-light-color: var(--color-border-light);
/* ── Schaduwen ───────────────────────────────────────────────────────── */
--rz-shadow: var(--shadow-md);
--rz-shadow-sm: var(--shadow-sm);
--rz-shadow-lg: var(--shadow-lg);
/* ── Inputs & Forms ──────────────────────────────────────────────────── */
--rz-input-background-color: var(--color-surface);
--rz-input-border-color: var(--color-border);
--rz-input-hover-border-color: var(--color-primary-dark);
--rz-input-focus-border-color: var(--color-primary);
--rz-input-focus-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15);
--rz-input-color: var(--color-text);
--rz-input-placeholder-color: var(--color-text-faint);
--rz-input-disabled-background-color: var(--color-surface-muted);
--rz-input-disabled-border-color: var(--color-border-light);
--rz-input-disabled-color: var(--color-text-faint);
/* ── Buttons ─────────────────────────────────────────────────────────── */
--rz-button-border-radius: var(--radius-base);
--rz-button-font-size: var(--font-size-sm);
--rz-button-font-weight: var(--font-weight-medium);
--rz-button-text-transform: uppercase;
--rz-button-letter-spacing: .03em;
/* ── DataGrid ────────────────────────────────────────────────────────── */
--rz-grid-header-background-color: var(--color-surface-muted);
--rz-grid-header-color: var(--color-text-muted);
--rz-grid-header-border-color: var(--color-primary);
--rz-grid-cell-border-color: var(--color-border-light);
--rz-grid-row-hover-background-color: var(--color-primary-light);
--rz-grid-row-selected-background-color: var(--color-primary-light);
--rz-grid-row-selected-color: var(--color-text);
--rz-grid-footer-background-color: var(--color-surface-muted);
--rz-grid-pager-background-color: var(--color-surface-muted);
/* ── Sidebar / Layout ────────────────────────────────────────────────── */
--rz-sidebar-background-color: var(--color-navy);
--rz-sidebar-color: #ffffff;
--rz-sidebar-border-color: var(--color-navy-mid);
--rz-sidebar-link-color: rgba(255, 255, 255, 0.65);
--rz-sidebar-link-hover-color: #ffffff;
--rz-sidebar-link-hover-background-color: rgba(255, 255, 255, 0.08);
--rz-sidebar-link-active-color: #ffffff;
--rz-sidebar-link-active-background-color: rgba(0, 95, 158, 0.45);
/* ── Dialog ──────────────────────────────────────────────────────────── */
--rz-dialog-background-color: var(--color-surface);
--rz-dialog-header-background-color: var(--color-navy);
--rz-dialog-header-color: #ffffff;
--rz-dialog-border-radius: var(--radius-xl);
--rz-dialog-shadow: var(--shadow-lg);
/* ── Tabs ────────────────────────────────────────────────────────────── */
--rz-tabs-nav-background-color: transparent;
--rz-tabs-selected-border-color: var(--color-primary);
--rz-tabs-selected-color: var(--color-primary);
--rz-tabs-selected-background-color: transparent;
--rz-tabs-hover-color: var(--color-primary-dark);
--rz-tabs-panel-background-color: var(--color-surface);
/* ── Notifications / Alerts ──────────────────────────────────────────── */
--rz-notification-success-background-color: var(--color-success-bg);
--rz-notification-success-color: var(--color-success-text);
--rz-notification-error-background-color: var(--color-danger-bg);
--rz-notification-error-color: var(--color-danger-text);
--rz-notification-warning-background-color: var(--color-warning-bg);
--rz-notification-warning-color: var(--color-warning-text);
--rz-notification-info-background-color: var(--color-info-bg);
--rz-notification-info-color: var(--color-info-text);
/* ── Steps / Wizard ──────────────────────────────────────────────────── */
--rz-steps-item-active-color: var(--color-primary);
--rz-steps-item-active-background-color: var(--color-primary-light);
--rz-steps-item-done-color: var(--color-success-text);
--rz-steps-item-done-background-color: var(--color-success-bg);
/* ── Splitter ────────────────────────────────────────────────────────── */
--rz-splitter-bar-background-color: var(--color-border);
--rz-splitter-bar-hover-background-color: var(--color-primary-light);
/* ── Scheduler ───────────────────────────────────────────────────────── */
--rz-scheduler-appointment-background-color: var(--color-primary);
--rz-scheduler-appointment-color: #ffffff;
--rz-scheduler-today-background-color: var(--color-primary-light);
}