/* ============================================================
   RCLOUD-190 — Radzen ↔ Recycler.IQ token bridge
   ============================================================
   Remaps Radzen's --rz-* theme variables onto the Recycler.IQ
   --riq-* design tokens (tokens.css). Because the --riq-* tokens
   already invert under [data-theme="dark"], this single :root map
   is enough — the --rz-* vars point at --riq-* vars, so Radzen
   components follow the SAME data-theme toggle as the rest of the
   app. No separate Radzen dark theme, no second switch.

   Load order (index.html): material-base.css → tokens.css → THIS.
   This must come last so the remap wins over material-base defaults.

   Any --rz-* name Radzen doesn't actually consume is simply ignored
   (CSS custom properties never error), so this errs on the side of
   mapping a generous superset. Refine specific surfaces on visual QA.
   ============================================================ */

:root {
  /* ---- Typography ---- */
  --rz-text-font-family: var(--font-body);
  --rz-body-font-family: var(--font-body);
  --rz-text-h1-font-family: var(--font-display);
  --rz-text-h2-font-family: var(--font-display);
  --rz-text-h3-font-family: var(--font-display);
  --rz-text-h4-font-family: var(--font-display);
  --rz-text-h5-font-family: var(--font-body);
  --rz-text-h6-font-family: var(--font-body);

  /* ---- Product accent → Radzen primary (teal) ---- */
  --rz-primary: var(--riq-teal);
  --rz-primary-light: var(--riq-teal-200);
  --rz-primary-lighter: var(--riq-teal-100);
  --rz-primary-dark: var(--riq-teal-hover);
  --rz-primary-darker: var(--riq-teal-hover);

  /* ---- Secondary → deep navy chrome ---- */
  --rz-secondary: var(--riq-deep-navy);
  --rz-secondary-light: var(--riq-fg-3);
  --rz-secondary-lighter: var(--riq-fg-4);
  --rz-secondary-dark: var(--riq-deep-navy);
  --rz-secondary-darker: var(--riq-deep-navy);

  /* ---- Semantic (muted RIQ set, not bright Material) ---- */
  --rz-success: var(--riq-success);
  --rz-success-light: var(--riq-green-200);
  --rz-success-lighter: var(--riq-green-50);
  --rz-success-dark: var(--riq-green-hover);
  --rz-success-darker: var(--riq-green-hover);

  --rz-info: var(--riq-info);
  --rz-info-light: var(--riq-teal-200);
  --rz-info-lighter: var(--riq-teal-50);
  --rz-info-dark: var(--riq-teal-hover);
  --rz-info-darker: var(--riq-teal-hover);

  /* The -light/-lighter/-dark shades below are derived from the RIQ warning/danger hues —
     tokens.css only defines the base + ink values, so these stay literal until the design
     kit ships shade tokens. */
  --rz-warning: var(--riq-warning);
  --rz-warning-light: #E0C07A;
  --rz-warning-lighter: #F5EAD0;
  --rz-warning-dark: var(--riq-warning-ink);
  --rz-warning-darker: var(--riq-warning-ink);

  --rz-danger: var(--riq-danger);
  --rz-danger-light: #DE8B8B;
  --rz-danger-lighter: #F6E1E1;
  --rz-danger-dark: #A32F2F;
  --rz-danger-darker: #A32F2F;

  /* ---- Body / surfaces / text ---- */
  --rz-body-background-color: var(--riq-bg-app);
  --rz-body-color: var(--riq-fg-2);
  --rz-text-color: var(--riq-fg-1);
  --rz-text-secondary-color: var(--riq-fg-3);
  --rz-text-tertiary-color: var(--riq-fg-4);
  --rz-text-disabled-color: var(--riq-fg-disabled);
  --rz-text-title-color: var(--riq-fg-1);

  --rz-base-background-color: var(--riq-bg-elevated);
  --rz-content-background-color: var(--riq-bg-card);
  --rz-panel-background-color: var(--riq-bg-card);
  --rz-card-background-color: var(--riq-bg-card);
  --rz-input-background-color: var(--riq-bg-elevated);
  --rz-input-color: var(--riq-fg-1);
  --rz-input-placeholder-color: var(--riq-fg-4);
  --rz-input-disabled-background-color: var(--riq-bg-sunken);

  /* ---- Borders / dividers ---- */
  --rz-border-color: var(--riq-border-1);
  --rz-border-radius: var(--r-md);
  --rz-input-border-radius: var(--r-md);
  --rz-button-border-radius: var(--r-md);
  --rz-card-border-radius: var(--r-lg);
  --rz-panel-border-radius: var(--r-lg);

  /* ---- Layout: header (app bar) + sidebar (nav rail) ---- */
  --rz-header-background-color: var(--riq-deep-navy);
  --rz-header-color: var(--riq-soft-white);
  --rz-sidebar-background-color: var(--riq-bg-sunken);
  --rz-sidebar-color: var(--riq-fg-2);
  --rz-sidebar-width: 240px;

  /* ---- Links ---- */
  --rz-link-color: var(--riq-teal);
  --rz-link-hover-color: var(--riq-teal-hover);

  /* ---- Selection / hover ---- */
  --rz-selection-color: var(--riq-teal-100);
  --rz-hover-color: var(--riq-bg-hover);

  /* ---- DataGrid ---- */
  --rz-grid-background-color: var(--riq-bg-card);
  --rz-grid-header-background-color: var(--riq-bg-sunken);
  --rz-grid-header-color: var(--riq-fg-2);
  --rz-grid-cell-color: var(--riq-fg-2);
  --rz-grid-stripe-background-color: var(--riq-bg-app);
  --rz-grid-row-hover-background-color: var(--riq-bg-hover);
  --rz-grid-selected-background-color: var(--riq-teal-50);
  --rz-grid-border-color: var(--riq-border-1);

  /* ---- Shadows (navy-tinted RIQ ramp; flat operator feel) ---- */
  --rz-shadow-0: none;
  --rz-shadow-1: var(--shadow-1);
  --rz-shadow-2: var(--shadow-2);
  --rz-shadow-3: var(--shadow-3);
  --rz-shadow-4: var(--shadow-4);
  --rz-panel-shadow: var(--shadow-2);
  --rz-card-shadow: var(--shadow-2);

  /* ---- Chart series → RIQ series palette ---- */
  --rz-series-1: var(--riq-chart-1);
  --rz-series-2: var(--riq-chart-2);
  --rz-series-3: var(--riq-chart-3);
  --rz-series-4: var(--riq-chart-4);
  --rz-series-5: var(--riq-chart-5);
  --rz-series-6: var(--riq-chart-6);
  --rz-series-7: var(--riq-teal-light);
  --rz-series-8: var(--riq-blue);
}

/* ============================================================
   Component fidelity — RIQ classes on our own markup + a
   best-effort pass at Radzen emitted classes. Selectors that
   target a class Radzen doesn't emit are simply inert (refine
   the Radzen-class ones on the live visual QA pass).
   ============================================================ */

/* Header (navy app bar) — tint the header buttons/title for contrast. */
.rz-header,
.rz-header .rz-text-h6 { color: var(--riq-soft-white); }
.riq-header-btn.rz-button,
.riq-header-btn .rz-button-text,
.riq-header-btn .rzi,
.rz-header .rz-button .rzi { color: var(--riq-soft-white) !important; }
.riq-header-btn.rz-button:hover { background: rgba(255, 255, 255, 0.10); }

/* Flexbox spacer — pushes trailing toolbar/header content to the far edge. */
.riq-spacer { flex: 1 1 auto; }

/* Grid toolbar row (page header + search + primary action on one line). */
.riq-grid__toolbar-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-3, 12px);
  flex-wrap: wrap;
}

.riq-grid__empty {
  padding: var(--space-8, 32px) var(--space-4, 16px);
  color: var(--riq-fg-3);
  font-family: var(--font-body);
  text-align: center;
}

/* Compact search box in the toolbar. */
.riq-search { width: 280px; max-width: 100%; }
.riq-search.rz-textbox,
.riq-search .rz-textbox {
  background-color: var(--riq-bg-elevated);
  border: 1px solid var(--riq-border-1);
  border-radius: var(--r-md);
  color: var(--riq-fg-1);
}

/* Nav rail active item — teal accent + inset stripe (operator convention). */
.rz-panel-menu .rz-navigation-item-link.active,
.rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper .rz-navigation-item-link {
  background-color: var(--riq-teal-50);
  color: var(--riq-teal);
  box-shadow: inset 3px 0 0 var(--riq-teal);
  font-weight: 600;
}

/* DataGrid — hairline card shell + overline header, matching the retired Mud pass. */
.riq-datagrid.rz-datatable {
  border: 1px solid var(--riq-border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  background-color: var(--riq-bg-card);
  overflow: hidden;
}
.riq-datagrid .rz-column-title,
.riq-datagrid .rz-column-title-content {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--riq-fg-4);
}