/*
  Retargets Radzen's "standard" theme (Radzen.Blazor, loaded via
  <RadzenTheme Theme="standard" /> in App.razor) onto the LYAÉ brand tokens
  defined in tokens.css/app.css, so backoffice controls (buttons, inputs,
  dropdowns, checkboxes, the availability scheduler) match the rest of the
  app instead of Radzen's default blue Material-ish look.

  Method: Radzen's own stylesheet derives nearly every component's colors,
  radii, and shadows from a small set of root custom properties
  (--rz-primary, --rz-base-*, --rz-border-radius, --rz-shadow-*,
  --rz-text-font-family, ...) via var(). Overriding those here is enough to
  reskin buttons/grids/inputs/the scheduler consistently without touching
  per-component CSS. Two values are hardcoded literals in Radzen's own
  stylesheet rather than derived from another variable — flagged inline.

  This file must load after the Radzen stylesheet for the cascade to apply;
  it's linked at the end of BackofficeLayout's <HeadContent> for that reason.
  RadzenDataGrid is deliberately NOT reskinned via variables — the backoffice
  list pages use the native .data-table markup instead (see app.css), which
  read better in dark mode than a themed grid did.
*/

:root {
  /* ---- neutrals: Radzen's gray scale -> LYAÉ ink/taupe scale ---- */
  --rz-base-background-color: var(--surface);   /* master surface var — inputs, cards, dialogs, popups all key off this */
  --rz-base-50: var(--surface);
  --rz-base-100: var(--surface-2);
  --rz-base-200: var(--taupe-pale);
  --rz-base-300: #D9CAAE;
  --rz-base-400: #C9B694;
  --rz-base-500: var(--taupe);
  --rz-base-600: var(--taupe-deep);
  --rz-base-700: var(--ink-soft);
  --rz-base-800: #3A332B;
  --rz-base-900: var(--ink);
  --rz-base-light: var(--taupe-pale);
  --rz-base-lighter: var(--surface-2);
  --rz-base-dark: var(--ink-soft);
  --rz-base-darker: var(--ink);

  /* ---- primary accent: Radzen blue -> ink (matches .btn-primary) ---- */
  --rz-primary: var(--ink);
  --rz-primary-light: var(--taupe-deep);          /* hover state */
  --rz-primary-lighter: rgba(140, 122, 94, 0.16); /* hover rows / focus fills */
  --rz-primary-dark: #16120E;
  --rz-primary-darker: #0E0B08;
  --rz-on-primary: var(--bg);
  --rz-on-primary-light: var(--bg);
  --rz-on-primary-lighter: var(--ink);
  --rz-on-primary-dark: var(--bg);
  --rz-on-primary-darker: var(--bg);

  /* ---- secondary accent: taupe family ---- */
  --rz-secondary: var(--taupe);
  --rz-secondary-light: var(--taupe-deep);
  --rz-secondary-lighter: rgba(183, 164, 136, 0.16);
  --rz-secondary-dark: var(--taupe-deep);
  --rz-secondary-darker: #6B5B41;
  --rz-on-secondary: var(--on-taupe);
  --rz-on-secondary-lighter: var(--taupe-deep);

  /* ---- danger: reuses the error red already used as a fallback in
     Services.razor.css (.form-error { color: var(--error, #b3261e) }).
     Note the rest of app.css deliberately avoids inventing a red — see the
     comment above .notice-error/.validation-message — so this keeps
     Radzen's destructive buttons legible rather than matching house style
     exactly; revisit if/when an --error token gets formally adopted. ---- */
  --rz-danger: #B3261E;
  --rz-danger-light: #C13B32;
  --rz-danger-lighter: rgba(179, 38, 30, 0.12);
  --rz-danger-dark: #8F1E17;
  --rz-danger-darker: #7A1913;
  --rz-on-danger: var(--surface);

  /* success/info/warning intentionally left at Radzen defaults — no brand
     equivalents exist yet, and desaturating status colors risks hurting
     legibility for the sake of consistency. Revisit if those states get
     real design treatment. */

  /* ---- scheduler events (availability page's blocked-time blocks): these
     key off --rz-info/--rz-on-info, not --rz-primary, so they weren't
     covered by the primary-accent remap above and fell back to Radzen's
     default blue. Overridden directly here rather than by remapping
     --rz-info itself, since that token also feeds RadzenAlert/notification
     "info" styling and this only needs to fix the scheduler look. ---- */
  --rz-scheduler-event-background-color: var(--taupe-deep);
  --rz-scheduler-event-color: var(--on-taupe);

  /* ---- text ---- */
  --rz-text-title-color: var(--ink);
  --rz-text-color: var(--ink);
  --rz-text-secondary-color: var(--ink-soft);
  --rz-text-tertiary-color: var(--ink-soft);
  --rz-text-font-family: 'Fraunces', Georgia, serif;

  /* ---- shape: LYAÉ is sharp-cornered (2-3px), Radzen defaults to 4px+ ---- */
  --rz-border-radius: var(--radius-m);        /* 3px */
  --rz-button-border-radius: var(--radius-s); /* 2px, matches .btn */

  /* ---- shadow: LYAÉ has one subtle shadow token, not Radzen's 10-step scale ---- */
  --rz-shadow-1: none;
  --rz-shadow-2: none;
  --rz-shadow-3: var(--shadow);
  --rz-shadow-4: var(--shadow);
  --rz-shadow-5: var(--shadow);

  /* ---- focus ring ---- */
  --rz-outline-color: var(--taupe-deep);

  /* hardcoded literal in Radzen's stylesheet, not derived from --rz-primary — must
     override explicitly or inputs keep a blue focus glow */
  --rz-input-focus-shadow: 0 0 0 1px var(--surface), 0 0 0 3px rgba(140, 122, 94, 0.25);
}

/* Dark theme: same mapping — most values above already flip automatically
   because they reference tokens.css vars that flip themselves. Only the two
   literal intermediate tones introduced here need their own dark variant. */
@media (prefers-color-scheme: dark) {
  :root { --rz-base-300: #4A4030; --rz-base-400: #574A36; }
}
:root[data-theme="dark"] { --rz-base-300: #4A4030; --rz-base-400: #574A36; }

/* ---- toast notifications: match app.css's .notice/.notice-error pattern
   (surface card, left-border accent for severity) instead of Radzen's
   default solid green/red/amber/blue fills, which is the same
   "no invented status colors" rule app.css already applies to
   .validation-message/.notice. Success/info/warning all use the neutral
   taupe-deep accent; only error gets the ink accent, mirroring
   .notice-error. Written as direct selector overrides rather than the
   --rz-notification-* variables because the "standard" theme's default
   values are solid on-color fills (--rz-on-success etc. are hardcoded
   white), not tints, so remapping the tokens alone can't reach this look. */
.rz-notification-item-wrapper {
  background-color: transparent;
}

.rz-notification-item {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-left: 3px solid var(--taupe-deep);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
}

.rz-notification-error .rz-notification-item {
  border-left-color: var(--ink);
}

.rz-notification-title {
  color: var(--ink);
}

.rz-notification-message {
  color: var(--ink-soft);
}

.rz-notification-icon.rzi-check,
.rz-notification-icon.rzi-info-circle,
.rz-notification-icon.rzi-exclamation-triangle {
  color: var(--taupe-deep);
}

.rz-notification-icon.rzi-times {
  color: var(--ink);
}

.rz-notification-close {
  color: var(--ink-soft);
}