/*
 * Mapping of the ace tokens onto Radzen's theme variables.
 * Loaded after Radzen's "standard" base theme and after ace-tokens.css.
 *
 * Rule: Radzen is themed through its --rz-* variables only. Radzen's internal class names are
 * not overridden here; the few classes below (ace-btn--*) are our own and are set by AceButton.
 */

:root {
  /* ---------- Palette ---------- */

  /* Primary = navy: structure, default actions. */
  --rz-primary: var(--ace-navy);
  --rz-primary-light: var(--ace-blue);
  --rz-primary-lighter: var(--ace-blue-wash);
  --rz-primary-dark: var(--ace-navy-deep);
  --rz-primary-darker: var(--ace-navy-deep);
  --rz-on-primary: var(--ace-page);
  --rz-on-primary-light: var(--ace-page);
  --rz-on-primary-lighter: var(--ace-navy);
  --rz-on-primary-dark: var(--ace-page);
  --rz-on-primary-darker: var(--ace-page);

  /* Secondary = the one orange accent: new, active, call to action. Text on orange is dark. */
  --rz-secondary: var(--ace-orange);
  --rz-secondary-light: var(--ace-orange-soft);
  --rz-secondary-lighter: var(--ace-orange-wash);
  --rz-secondary-dark: var(--ace-orange-deep);
  --rz-secondary-darker: var(--ace-orange-deep);
  --rz-on-secondary: var(--ace-ink-strong);
  --rz-on-secondary-light: var(--ace-ink-strong);
  --rz-on-secondary-lighter: var(--ace-orange-text);
  --rz-on-secondary-dark: var(--ace-page);
  --rz-on-secondary-darker: var(--ace-page);

  /* Neutral scale. */
  --rz-base-50: var(--ace-surface);
  --rz-base-100: var(--ace-page);
  --rz-base-200: var(--ace-line);
  --rz-base-300: var(--ace-line);
  --rz-base-400: var(--ace-line-strong);
  --rz-base-500: var(--ace-line-dashed);
  --rz-base-600: var(--ace-muted);
  --rz-base-700: var(--ace-muted-2);
  --rz-base-800: var(--ace-ink);
  --rz-base-900: var(--ace-ink-strong);
  --rz-base: var(--ace-line);
  --rz-base-light: var(--ace-line);
  --rz-base-lighter: var(--ace-page);
  --rz-base-dark: var(--ace-muted);
  --rz-base-darker: var(--ace-ink-strong);
  --rz-on-base: var(--ace-ink);
  --rz-on-base-light: var(--ace-ink);
  --rz-on-base-lighter: var(--ace-ink);

  /*
   * Info, success, warning and danger are deliberately left at Radzen's values: the ace layout
   * defines no semantic colours (open point, see docs/STYLEGUIDE.md, section 2).
   */

  /* ---------- Text ---------- */
  --rz-text-font-family: var(--ace-font);
  --rz-body-font-size: 1rem;
  --rz-body-line-height: 1.4;
  --rz-body-background-color: var(--ace-page);
  --rz-text-title-color: var(--ace-navy);
  --rz-text-color: var(--ace-ink);
  --rz-text-secondary-color: var(--ace-muted-2);
  --rz-text-tertiary-color: var(--ace-muted);
  --rz-text-disabled-color: var(--ace-line-dashed);
  --rz-text-contrast-color: var(--ace-page);
  --rz-link-color: var(--ace-blue);
  --rz-link-hover-color: var(--ace-navy);

  /* ---------- Shape ---------- */
  --rz-border-radius: var(--ace-radius-sm);
  --rz-border-normal: var(--rz-border-width) solid var(--ace-line);
  --rz-border-hover: var(--rz-border-width) solid var(--ace-blue-light);
  --rz-border-focus: var(--rz-border-width) solid var(--ace-blue);
  --rz-border-disabled: var(--rz-border-width) solid var(--ace-line);
  --rz-outline-color: var(--ace-blue);
  --rz-outline-width: 2px;
  --rz-outline-offset: 2px;

  /* Shadows are navy-tinted, never neutral black. */
  --rz-shadow-1: var(--ace-shadow);
  --rz-shadow-2: var(--ace-shadow);
  --rz-shadow-3: var(--ace-shadow-lg);
  --rz-shadow-4: var(--ace-shadow-lg);
  --rz-shadow-5: 0 6px 18px rgba(23, 69, 107, .14);
  --rz-shadow-6: 0 8px 22px rgba(23, 69, 107, .16);
  --rz-shadow-7: 0 10px 26px rgba(23, 69, 107, .18);
  --rz-shadow-8: 0 12px 30px rgba(23, 69, 107, .20);
  --rz-shadow-9: 0 14px 36px rgba(23, 69, 107, .22);
  --rz-shadow-10: 0 16px 44px rgba(23, 69, 107, .24);

  /* ---------- Icons: thin outline, never filled ---------- */
  --rz-icon-fill: 0;
  --rz-icon-weight: 300;

  /* ---------- App bar, sidebar, body ---------- */
  --rz-header-background-color: var(--ace-navy);
  --rz-header-color: var(--ace-page);
  --rz-header-border: none;
  --rz-header-shadow: none;
  --rz-header-min-height: 3.5rem;
  --rz-sidebar-toggle-color: var(--ace-page);
  --rz-sidebar-toggle-hover-color: var(--ace-orange-soft);
  --rz-sidebar-toggle-background-color: transparent;
  --rz-sidebar-toggle-hover-background-color: transparent;
  --rz-sidebar-toggle-border: none;
  --rz-sidebar-background-color: var(--ace-surface);
  --rz-sidebar-color: var(--ace-ink);
  --rz-sidebar-border-inline-end: 1px solid var(--ace-line);
  --rz-sidebar-width: 16.5rem;
  --rz-layout-body-padding: 0;
  --rz-layout-body-background-color: var(--ace-page);

  /* ---------- Navigation menu: orange marks the current page ---------- */
  --rz-panel-menu-font-weight: 700;
  --rz-panel-menu-item-color: var(--ace-navy);
  --rz-panel-menu-item-background-color: var(--ace-surface);
  --rz-panel-menu-item-border: none;
  --rz-panel-menu-item-hover-color: var(--ace-navy);
  --rz-panel-menu-item-hover-background-color: var(--ace-blue-wash);
  --rz-panel-menu-item-active-color: var(--ace-navy);
  --rz-panel-menu-item-active-background-color: var(--ace-blue-wash);
  --rz-panel-menu-item-active-indicator: var(--ace-orange);
  --rz-panel-menu-item-padding-block: .5625rem;
  --rz-panel-menu-item-2nd-level-color: var(--ace-ink);
  --rz-panel-menu-item-2nd-level-background-color: var(--ace-surface);
  --rz-panel-menu-item-2nd-level-hover-color: var(--ace-navy);
  --rz-panel-menu-item-2nd-level-hover-background-color: var(--ace-blue-wash);
  --rz-panel-menu-item-2nd-level-active-color: var(--ace-navy);
  --rz-panel-menu-item-2nd-level-active-background-color: var(--ace-blue-wash);
  --rz-panel-menu-item-2nd-level-active-font-weight: 700;
  --rz-panel-menu-item-2nd-level-padding-block: .4375rem;
  --rz-panel-menu-icon-color: var(--ace-blue);

  /* ---------- Cards ---------- */
  --rz-card-border-radius: var(--ace-radius);
  --rz-card-shadow: var(--ace-shadow);
  --rz-card-padding: 1.125rem 1.25rem;
  --rz-card-background-color: var(--ace-surface);
  --rz-card-flat-background-color: var(--ace-page);

  /* ---------- Buttons ---------- */
  --rz-button-border-radius: var(--ace-radius-sm);
  --rz-text-button-font-weight: 700;
  --rz-text-button-letter-spacing: 0;
  --rz-button-base-background-color: var(--ace-blue-wash);
  --rz-button-base-color: var(--ace-navy);

  /* ---------- Badges: pills, mixed case ---------- */
  --rz-badge-border-radius: var(--ace-radius-pill);
  --rz-badge-pill-border-radius: var(--ace-radius-pill);
  --rz-badge-padding: .125rem .625rem;
  --rz-badge-pill-padding: .125rem .625rem;
  --rz-badge-font-weight: 700;
  --rz-badge-text-transform: none;
  --rz-badge-letter-spacing: 0;

  /* ---------- Data grid: navy header, zebra rows, 1px grid lines ---------- */
  --rz-grid-header-background-color: var(--ace-navy);
  --rz-grid-header-color: var(--ace-page);
  --rz-grid-header-font-size: 1rem;
  --rz-grid-header-font-weight: 700;
  --rz-grid-header-cell-border: var(--rz-border-width) solid var(--ace-navy-deep);
  --rz-grid-header-cell-border-bottom: var(--rz-border-width) solid var(--ace-navy-deep);
  --rz-grid-cell-border: var(--rz-border-width) solid var(--ace-line-strong);
  --rz-grid-right-cell-border: var(--rz-border-width) solid var(--ace-line-strong);
  --rz-grid-bottom-cell-border: var(--rz-border-width) solid var(--ace-line-strong);
  --rz-grid-cell-padding: .375rem .5rem;
  --rz-grid-cell-font-size: 1rem;
  --rz-grid-cell-color: var(--ace-ink);
  --rz-grid-stripe-background-color: var(--ace-blue-wash);
  --rz-grid-stripe-odd-background-color: var(--ace-surface);
  --rz-grid-hover-background-color: var(--ace-blue-pale);
  --rz-grid-hover-color: var(--ace-ink);
  --rz-grid-selected-background-color: var(--ace-orange-wash);
  --rz-grid-selected-color: var(--ace-ink-strong);
  --rz-grid-border-radius: 3px;

  /*
   * Filtering is a funnel icon in the navy header that opens a popup (FilterMode.CheckBoxList or
   * Advanced), never a filter row below the header. Light blue at rest, light on hover, soft
   * orange while a filter is active on the column.
   */
  --rz-grid-filter-color: var(--ace-blue-light);
  --rz-grid-header-filter-icon-hover-color: var(--ace-page);
  --rz-grid-header-filter-icon-active-color: var(--ace-orange-soft);
  --rz-grid-header-filter-icon-font-size: 1.125rem;
  --rz-grid-filter-background-color: var(--ace-surface);
  --rz-grid-filter-buttons-background-color: var(--ace-surface);
  --rz-grid-filter-buttons-border: 1px solid var(--ace-line);
  --rz-grid-filter-buttons-padding: .75rem 1rem;
  --rz-grid-clear-filter-button-background-color: var(--ace-surface);
  --rz-grid-clear-filter-button-color: var(--ace-blue);
  --rz-grid-clear-filter-button-shadow: inset 0 0 0 1px var(--ace-blue);
  --rz-grid-apply-filter-button-background-color: var(--ace-navy);
  --rz-grid-apply-filter-button-color: var(--ace-page);

  /* Popups (filter, drop-down lists, date picker): raised panel look. */
  --rz-overlay-shadow: var(--ace-shadow-lg);
  --rz-overlay-border: 1px solid var(--ace-line);
  --rz-overlay-background-color: var(--ace-surface);

  /* ---------- Tabs and steps: orange marks the current one ---------- */
  --rz-tabs-tab-background-color: var(--ace-blue-wash);
  --rz-tabs-tab-color: var(--ace-navy);
  --rz-tabs-tab-selected-color: var(--ace-navy);
  --rz-tabs-tab-selected-top-border-color: var(--ace-orange);
  --rz-steps-number-color: var(--ace-navy);
  --rz-steps-number-background-color: var(--ace-blue-pale);
  --rz-steps-number-selected-color: var(--ace-ink-strong);
  --rz-steps-number-selected-background: var(--ace-orange);
  --rz-steps-title-selected-color: var(--ace-navy);

  /* ---------- Dialogs and notifications: raised panels ---------- */
  --rz-dialog-shadow: var(--ace-shadow-lg);
  --rz-dialog-border-radius: var(--ace-radius);
  --rz-dialog-title-font-size: 1.25rem;
  --rz-dialog-title-color: var(--ace-navy);
  --rz-notification-shadow: var(--ace-shadow-lg);
  --rz-notification-border-radius: var(--ace-radius);
}

/* ---------- Our own button classes (set by the AceButton component) ---------- */

/* The framework's lighten/darken overlay is replaced by the ace hover colours below. */
.ace-btn {
  --rz-button-hover-gradient: none;
  --rz-button-focus-gradient: none;
  --rz-button-active-gradient: none;
}

.ace-btn--primary:hover:not(:disabled),
.ace-btn--primary:active:not(:disabled) {
  --rz-primary: var(--ace-navy-deep);
}

.ace-btn--cta:hover:not(:disabled),
.ace-btn--cta:active:not(:disabled) {
  --rz-secondary: var(--ace-orange-deep);
  --rz-on-secondary: var(--ace-page);
}

/*
 * Secondary: white fill, blue outline. Rendered as Radzen's outlined primary with a local blue.
 * Radzen sets the background of outlined buttons with a four-class selector, so the fill needs
 * !important here; these are the only uses of it.
 */
.ace-btn--secondary {
  --rz-primary: var(--ace-blue);
  background-color: var(--ace-surface) !important;
}

.ace-btn--secondary:hover:not(:disabled),
.ace-btn--secondary:active:not(:disabled) {
  background-color: var(--ace-blue-wash) !important;
}

/* Unavailable: a dashed outline says "planned / not available" instead of a faded button. */
.ace-btn--unavailable,
.ace-btn--unavailable:disabled {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px dashed var(--ace-line-dashed);
  color: var(--ace-muted) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* On navy the dashed outline and its caption switch to the light tones. */
.ace-on-navy .ace-btn--unavailable {
  border-color: var(--ace-blue-light);
  color: var(--ace-blue-pale) !important;
}