/* material3-dark-overrides.css -- EW UI dark theme as a token override layer. Keyed on
   html[data-theme="dark"] (specificity 0,1,1) so it beats the licensed base AND the SDK light
   :root overrides regardless of link order -- a plain :root dark block would tie the light override
   and lose by source order. Foundation tokens (base ramp, surfaces, text, semantic) live here; dark
   BRAND (primary) lives in each palette's html[data-theme="dark"] block. Neutral ramp + text are
   verbatim from material3-dark-base.css :root; base-lighter is an elevated dark surface (licensed
   base uses #ffffff -- wrong for a surface token here). Custom-property indirection means input
   borders / field-bg auto-follow this ramp.
   Semantic families are the EdWise tone-grammar ramps at their DARK assignments (anchor T80,
   container T30, emphasis T70, deep T20; on-anchor T20) -- generated, same provenance as the light
   swatch: .tooling/theme-gen + docs/superpowers/specs/2026-06-09-edwise-theme-design.md.
   Plain-ASCII only. */
html[data-theme="dark"] {
  /* Neutral ramp (inverted) -- verbatim from material3-dark-base.css :root */
  --rz-white: #ffffff;
  --rz-base: #45494f;
  --rz-base-50: #e0e4e9;
  --rz-base-100: #c4c9d0;
  --rz-base-200: #8f9399;
  /* base-300 is the de-facto BORDER tone. The inverted-ramp #45494f reads ~1.9:1 against dark
     panels where the light theme's border is ~1.35:1 -- re-toned to #3a3e44 (~1.55:1) so dark
     borders match the light theme's hairline feel. Disabled text is pinned below (it used to
     alias this token and must NOT follow the border re-tone). */
  --rz-base-300: #3a3e44;
  --rz-base-400: #383b3e;
  --rz-base-500: #34373b;
  --rz-base-600: #292c30;
  --rz-base-700: #1f2226;
  --rz-base-800: #1b1d20;
  --rz-base-900: #121518;
  --rz-base-light: #8f9399;
  --rz-base-dark: #121518;
  --rz-base-darker: #000000;
  /* base-lighter = elevated dark surface (NOT the licensed #ffffff -- it backs cards/fields) */
  --rz-base-lighter: #1f2226;

  /* Surfaces */
  --rz-base-background-color: #1b1d20;
  --rz-body-background-color: #1f2226;
  --rz-panel-background-color: #1b1d20;

  /* Text (point at the inverted ramp -- light on dark) */
  --rz-text-color: var(--rz-base-50);
  --rz-text-secondary-color: var(--rz-base-100);
  /* Pinned (was var(--rz-base-200) #8f9399): the ramp value clears AA on the page background
     (#1b1d20 = 5.0:1) but fails on elevated surfaces (#373a3e = 3.7:1). Tertiary text must
     clear 4.5:1 on the LIGHTEST surface it can sit on: #a5abb3 = 4.9:1 on #373a3e. */
  --rz-text-tertiary-color: #a5abb3;
  /* Pinned (was var(--rz-base-300)): keeps the original ramp value now that base-300 carries
     the calmer border tone -- disabled text must stay legible. */
  --rz-text-disabled-color: #45494f;
  --rz-text-title-color: var(--rz-base-50);

  /* Input/dropdown borders: the base derives them from base-600/700, which invert to #292c30
     resting and #1f2226 hover here -- borders dimmer than the panel hairlines, and a hover
     state DARKER than resting. Point resting at the border tone (base-300) and hover one step
     brighter (#45494f, the pre-retone ramp value) so inputs match panel borders and hover
     still reads as emphasis. */
  --rz-border-normal: 1px solid var(--rz-base-300);
  --rz-border-hover: 1px solid #45494f;
  /* The input shorthands must be overridden directly -- the base's active definition does not
     re-derive from border-normal at use time. border-block-end is a separate longhand (the M3
     filled-input underline) that otherwise overrides the shorthand's bottom edge back to the
     dim base-600, leaving inputs with three visible borders and a vanished bottom. */
  --rz-input-border: 1px solid var(--rz-base-300);
  --rz-input-hover-border: 1px solid #45494f;
  --rz-input-border-block-end: 1px solid var(--rz-base-300);
  --rz-input-hover-border-block-end: 1px solid #45494f;
  --rz-input-border-color: var(--rz-base-300);
  --rz-input-hover-border-color: #45494f;

  /* Secondary family -- dark tone assignments (S2 ramp, H276 C16). */
  --rz-secondary: #c2c5dd;
  --rz-secondary-light: #424659;
  --rz-secondary-lighter: rgba(194, 197, 221, 0.16);
  --rz-secondary-dark: #a7aac1;
  --rz-secondary-darker: #2c2f42;
  --rz-on-secondary: #2c2f42;
  --rz-on-secondary-light: #dfe1f9;
  --rz-on-secondary-lighter: #dfe1f9;
  --rz-on-secondary-dark: #2c2f42;
  --rz-on-secondary-darker: #dfe1f9;

  /* Severity families -- the same four MCU ramps as light, flipped to dark tones. */
  --rz-info: #6bd3f9;
  --rz-info-light: #004d62;
  --rz-info-lighter: rgba(107, 211, 249, 0.16);
  --rz-info-dark: #4bb7dc;
  --rz-info-darker: #003544;
  --rz-on-info: #003544;
  --rz-on-info-light: #b9eaff;
  --rz-on-info-lighter: #b9eaff;
  --rz-on-info-dark: #003544;
  --rz-on-info-darker: #b9eaff;
  --rz-success: #84d994;
  --rz-success-light: #005323;
  --rz-success-lighter: rgba(132, 217, 148, 0.16);
  --rz-success-dark: #69bd7a;
  --rz-success-darker: #003916;
  --rz-on-success: #003916;
  --rz-on-success-light: #a0f6ae;
  --rz-on-success-lighter: #a0f6ae;
  --rz-on-success-dark: #003916;
  --rz-on-success-darker: #a0f6ae;
  --rz-warning: #ffba3e;
  --rz-warning-light: #604100;
  --rz-warning-lighter: rgba(255, 186, 62, 0.16);
  --rz-warning-dark: #e39e00;
  --rz-warning-darker: #432c00;
  --rz-on-warning: #352200;
  --rz-on-warning-light: #ffdeae;
  --rz-on-warning-lighter: #ffdeae;
  --rz-on-warning-dark: #352200;
  --rz-on-warning-darker: #ffdeae;
  --rz-danger: #ffb4ab;
  --rz-danger-light: #93000a;
  --rz-danger-lighter: rgba(255, 180, 171, 0.16);
  --rz-danger-dark: #ff897d;
  --rz-danger-darker: #690005;
  --rz-on-danger: #690005;
  --rz-on-danger-light: #ffdad6;
  --rz-on-danger-lighter: #ffdad6;
  --rz-on-danger-dark: #690005;
  --rz-on-danger-darker: #ffdad6;

  /* Chart series 1-8 -- brighter dark variants (T70-80) of the brand-harmonized light set. */
  --rz-series-1: #73adff;
  --rz-series-2: #b8c4ff;
  --rz-series-3: #63c8cc;
  --rz-series-4: #f1bf52;
  --rz-series-5: #e2a6d6;
  --rz-series-6: #89c78d;
  --rz-series-7: #ff9f94;
  --rz-series-8: #b5b7cf;

  /* Button interaction state layers: white scrims on dark (light scheme uses ink scrims). */
  --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
  --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10));
  --rz-button-active-gradient: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));

  /* Outlined-button border: the dark outline role (= the dark ramp's base-200, written as a
     literal -- a var(base-200) fallback here would be flagged by the light-value fallback
     police, and the indirection buys nothing inside the file that declares the ramp). */
  --ew-button-outline: #8f9399;

  /* Chrome (sidebar colors come from the palette's dark block; topbar darkens). field-bg
     auto-follows base-lighter; only the disabled field surface needs a darker explicit value. */
  --ew-topbar-bg: #1b1d20;
  --ew-topbar-fg: var(--rz-base-50);
  --ew-topbar-border: var(--rz-base-600);
  --ew-field-bg-disabled: var(--rz-base-800);
  /* Fields sit one elevation higher than panels in dark so inputs read as clearly raised -- the
     base-lighter default was only ~one ramp step over the dialog/panel surface (too subtle). */
  --ew-field-bg: var(--rz-base-600, #292c30);
  --ew-field-border: var(--rz-base-500, #34373b);
  /* Content canvas: the deepest dark surface, so panels/cards (#1b1d20/#1f2226) sit elevated
     above it (dark elevation = lighter surface, not bigger shadow). */
  --ew-content-bg: #121518;
}

/* Component surfaces the licensed Layer-0 base hardcodes white -- token-only flips cannot reach
   them, so flip them explicitly here (scoped html[data-theme="dark"], specificity beats the base).
   Plain-ASCII only; var() fallbacks are the real dark declared values from the block above. */

/* Dialog surfaces (SIDE sheets + CENTER dialogs): ew-ui paints both white for light. Flip the
   surface to an ELEVATED dark (midway between the panel token and the field surface) plus a left
   border on sheets -- at the plain panel token the surface blends into the page behind it (dark
   elevation = lighter surface). Stays below --ew-field-bg so the fields inside still read as
   raised. Center dialogs previously kept the base's --rz-base-200, an unusable mid-gray in dark. */
html[data-theme="dark"] .rz-dialog,
html[data-theme="dark"] .rz-dialog-titlebar,
html[data-theme="dark"] .rz-dialog-side,
html[data-theme="dark"] .rz-dialog-side-titlebar {
  background-color: color-mix(in srgb, var(--ew-field-bg, #292c30) 50%, var(--rz-base-background-color, #1b1d20));
  color: var(--rz-text-color, #e0e4e9);
}
html[data-theme="dark"] .rz-dialog-side {
  border-left: 1px solid var(--rz-base-300, #3a3e44);
}
html[data-theme="dark"] .rz-dialog-side-titlebar {
  border-bottom-color: var(--rz-base-300, #3a3e44);
}
/* Close (X): the base gives it a light-gray box -- make it a borderless dark-surface icon. */
html[data-theme="dark"] .rz-dialog-titlebar-close,
html[data-theme="dark"] .rz-dialog-side-titlebar-close {
  background-color: transparent;
  color: var(--rz-text-color, #e0e4e9);
}
html[data-theme="dark"] .rz-dialog-titlebar-close:hover,
html[data-theme="dark"] .rz-dialog-side-titlebar-close:hover {
  background-color: var(--rz-base-600, #292c30);
}

/* Keyboard-focused grid row: the transparent-surface group below resets row backgrounds with
   !important (so rows inherit the dark card), which also erases Radzen's rz-state-focused
   band -- keyboard navigation had NO visible indicator in dark (WCAG 2.4.7). Restore a
   visible wash at higher precedence; the primary accent bar comes from EwDataGrid's own CSS. */
html[data-theme="dark"] .rz-datatable .rz-data-row.rz-state-focused > td,
html[data-theme="dark"] .rz-data-grid .rz-data-row.rz-state-focused > td {
  background-color: color-mix(in srgb, var(--rz-text-color, #e0e4e9) 10%, transparent) !important;
}

/* Light-style buttons: the Layer-0 base borders them from base-200, which re-maps to a light
   silver under the dark ramp. Re-tone to a subtle text wash. (The pager border is fixed at its
   source in ew-ui.css -- it was our own rule, not Layer-0.) */
html[data-theme="dark"] .rz-button.rz-light {
  border-color: color-mix(in srgb, var(--rz-text-color, #e0e4e9) 15%, transparent);
}

/* Text-variant Base buttons: the Layer-0 base colors them plain black (not a token), so they
   vanish on dark surfaces. Flip to the secondary text tone + a text-wash hover. */
html[data-theme="dark"] .rz-button.rz-base.rz-variant-text {
  color: var(--rz-text-secondary-color, #c4c9d0);
}
html[data-theme="dark"] .rz-button.rz-base.rz-variant-text:hover {
  background-color: color-mix(in srgb, var(--rz-text-color, #e0e4e9) 8%, transparent);
  /* Hover is the emphasis state: full text tone, not the resting secondary (which reads
     washed-out against the hover wash). */
  color: var(--rz-text-color, #e0e4e9);
}

/* Data grid: Radzen datatable container/cells are hardcoded white / #000 in the base, and the
   header bar resolves to the inverted --rz-base-50 (light). Make the grid surfaces transparent so
   they inherit the dark card, light cell text, with subtle white-overlay header/stripe/hover. */
/* The base hardcodes these backgrounds with high specificity, so !important is needed in this
   dedicated override layer to flip the surfaces (cell text/border win on specificity alone). */
html[data-theme="dark"] .rz-data-grid,
html[data-theme="dark"] .rz-datatable,
html[data-theme="dark"] .rz-datatable .rz-data-row,
html[data-theme="dark"] .rz-datatable .rz-data-row > td,
html[data-theme="dark"] .rz-datatable .rz-datatable-emptymessage,
html[data-theme="dark"] .rz-data-grid .rz-pager {
  background-color: transparent !important;
  color: var(--rz-text-color, #e0e4e9);
}
html[data-theme="dark"] .rz-datatable thead th,
html[data-theme="dark"] .rz-datatable .rz-column-title,
html[data-theme="dark"] .rz-datatable .rz-column-title-content {
  color: var(--rz-text-secondary-color, #c4c9d0);
}
html[data-theme="dark"] .rz-datatable thead tr,
html[data-theme="dark"] .rz-datatable thead th {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
/* Even-row wash goes through a token so EwDataGrid's Striped=false (.ew-no-stripes) can
   neutralize it without a specificity war against the !important. */
html[data-theme="dark"] .rz-datatable .rz-data-row.rz-datatable-even > td,
html[data-theme="dark"] .rz-datatable .rz-data-row:nth-child(even) > td {
  background-color: var(--ew-grid-stripe, rgba(255, 255, 255, 0.03)) !important;
}
html[data-theme="dark"] .rz-datatable .rz-data-row:hover > td {
  background-color: rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] .rz-datatable .rz-data-row > td,
html[data-theme="dark"] .rz-datatable thead th {
  border-color: var(--rz-base-300, #3a3e44);
}

/* Popup / overlay surfaces (dropdown, multiselect, autocomplete, datepicker, menus, generic
   popups) are hardcoded light in the Layer-0 base and render in overlays token-only dark cannot
   reach -- the panel resolves to the inverted --rz-base-100 (#c4c9d0). Flip the panel to an
   elevated dark surface with light item text and subtle white-overlay hover/selected. */
html[data-theme="dark"] .rz-popup,
html[data-theme="dark"] .rz-dropdown-panel,
html[data-theme="dark"] .rz-multiselect-panel,
html[data-theme="dark"] .rz-autocomplete-panel,
html[data-theme="dark"] .rz-datepicker-popup,
html[data-theme="dark"] .rz-datepicker-calendar,
html[data-theme="dark"] .rz-menu,
html[data-theme="dark"] .rz-menu-popup,
html[data-theme="dark"] .rz-navigation-menu,
html[data-theme="dark"] .rz-contextmenu,
html[data-theme="dark"] .rz-overlaypanel {
  background-color: var(--rz-base-lighter, #1f2226) !important;
  color: var(--rz-text-color, #e0e4e9);
  border-color: var(--rz-base-300, #3a3e44);
}
/* The ProfileMenu TRIGGER also carries .rz-menu -- keep it transparent over the topbar; only
   the popup (.rz-navigation-menu) gets the elevated panel surface. */
html[data-theme="dark"] .rz-menu.rz-profile-menu {
  background-color: transparent !important;
}
html[data-theme="dark"] .rz-dropdown-item,
html[data-theme="dark"] .rz-multiselect-item,
html[data-theme="dark"] .rz-autocomplete-item,
html[data-theme="dark"] .rz-menuitem,
html[data-theme="dark"] .rz-menuitem-text,
html[data-theme="dark"] .rz-navigation-item-link,
html[data-theme="dark"] .rz-navigation-item-icon {
  color: var(--rz-text-color, #e0e4e9) !important;
}
html[data-theme="dark"] .rz-dropdown-item:hover,
html[data-theme="dark"] .rz-multiselect-item:hover,
html[data-theme="dark"] .rz-autocomplete-item:hover,
html[data-theme="dark"] .rz-menuitem:hover,
html[data-theme="dark"] .rz-navigation-menu .rz-navigation-item-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] .rz-dropdown-item.rz-state-highlight,
html[data-theme="dark"] .rz-multiselect-item.rz-state-highlight {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--rz-text-color, #e0e4e9) !important;
}

/* Chart legend: the Radzen legend text is hardcoded dark (#000) and does not flip in dark mode. */
html[data-theme="dark"] .rz-legend,
html[data-theme="dark"] .rz-legend-item,
html[data-theme="dark"] .rz-legend-item-text {
  color: var(--rz-text-color, #e0e4e9);
}

/* Loading skeletons (EwDataGrid shimmer grid + the standalone EwSkeleton). The scoped light rules
   build placeholders from base-50 / base-200 plus a near-white shimmer -- all of which invert to
   glaring light bars on the dark canvas. Re-tone to a subtle elevated-gray fill with a faint white
   shimmer. Global (un-scoped) so one block covers both components; the html[data-theme] prefix keeps
   specificity one step above the scoped light rules' [b-hash], so no !important is needed. Override
   ONLY background-image / -color (longhands) -- the shorthand would reset background-size:200% and
   kill the shimmer animation. Fallbacks are the real dark ramp values declared at the top. */
html[data-theme="dark"] .ew-datagrid .ew-dg-skel-row.head {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .ew-datagrid .ew-dg-skel-bar {
  background-color: var(--rz-base-500, #34373b);
  background-image: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
}
html[data-theme="dark"] .ew-skeleton {
  background-image: linear-gradient(90deg,
    var(--rz-base-600, #292c30) 25%,
    var(--rz-base-500, #34373b) 50%,
    var(--rz-base-600, #292c30) 75%);
}