/*
  Radzen → FlowSentry v3 token bridge. Radzen ships material-base.css (structural, variable-driven); we map its --rz-*
  variables onto the --fs-* tokens instead of using a Radzen colour theme or ThemeService, so DataGrid, Pager and Chart
  follow [data-theme] with no JS. [data-theme] lives on <html>: a custom property that references another one resolves at
  its declaring element, so the bridge has to be declared on :root, where the theme attribute is (see js/theme.js).
  Only DataGrid, Pager, Charts and Icons are used from Radzen.
*/

:root {
  /* Base ramp (Radzen's internal greys) */
  --rz-white: var(--fs-color-surface);
  --rz-base: var(--fs-color-surface-sunken);
  --rz-base-50: var(--fs-color-surface-hover);
  --rz-base-100: var(--fs-color-surface-sunken);
  --rz-base-200: var(--fs-color-border-subtle);
  --rz-base-300: var(--fs-color-border);
  --rz-base-400: var(--fs-color-border-strong);
  --rz-base-500: var(--fs-color-text-tertiary);
  --rz-base-600: var(--fs-color-text-tertiary);
  --rz-base-700: var(--fs-color-text-secondary);
  --rz-base-800: var(--fs-color-text-primary);
  --rz-base-900: var(--fs-color-text-primary);
  --rz-base-light: var(--fs-color-surface-sunken);
  --rz-base-lighter: var(--fs-color-surface);
  --rz-base-dark: var(--fs-color-text-tertiary);
  --rz-base-darker: var(--fs-color-text-primary);
  --rz-on-base: var(--fs-color-text-primary);
  --rz-on-base-light: var(--fs-color-text-primary);
  --rz-on-base-lighter: var(--fs-color-text-primary);

  /* Surfaces & backgrounds */
  --rz-base-background-color: var(--fs-color-surface);
  --rz-body-background-color: var(--fs-color-canvas);
  --rz-content-background-color: var(--fs-color-surface);
  --rz-panel-background-color: var(--fs-color-surface);
  --rz-card-background-color: var(--fs-color-surface);

  /* Text */
  --rz-text-color: var(--fs-color-text-primary);
  --rz-body-color: var(--fs-color-text-primary);
  --rz-text-title-color: var(--fs-color-text-primary);
  --rz-text-secondary-color: var(--fs-color-text-secondary);
  --rz-text-tertiary-color: var(--fs-color-text-tertiary);
  --rz-text-disabled-color: var(--fs-color-text-disabled);
  --rz-text-font-family: var(--fs-font-sans);
  --rz-body-font-family: var(--fs-font-sans);
  --rz-text-font-size: var(--fs-text-base);
  --rz-body-font-size: var(--fs-text-base);
  --rz-input-value-color: var(--fs-color-text-primary);
  --rz-input-placeholder-color: var(--fs-color-text-tertiary);
  --rz-input-font-size: var(--fs-text-base);

  /* Accent */
  --rz-primary: var(--fs-color-accent-solid);
  --rz-primary-light: var(--fs-color-accent-solid-hover);
  --rz-primary-dark: var(--fs-color-accent-pressed);
  --rz-primary-darker: var(--fs-color-accent-pressed);
  --rz-primary-lighter: var(--fs-color-accent-soft);
  --rz-on-primary: var(--fs-color-on-accent);
  --rz-on-primary-lighter: var(--fs-color-accent-text);
  --rz-secondary: var(--fs-color-accent);
  --rz-secondary-lighter: var(--fs-color-accent-soft);
  --rz-on-secondary-lighter: var(--fs-color-accent-text);

  /* Semantic */
  --rz-success: var(--fs-color-success-solid);
  --rz-success-lighter: var(--fs-color-success-bg);
  --rz-info: var(--fs-color-info-solid);
  --rz-info-lighter: var(--fs-color-info-bg);
  --rz-warning: var(--fs-color-warning-solid);
  --rz-warning-lighter: var(--fs-color-warning-bg);
  --rz-danger: var(--fs-color-danger-solid);
  --rz-danger-lighter: var(--fs-color-danger-bg);

  /* Borders, radius, focus, elevation */
  --rz-border-color: var(--fs-color-border);
  --rz-border: 1px solid var(--fs-color-border);
  --rz-border-radius: var(--fs-radius-sm);
  --rz-card-border-radius: var(--fs-radius-lg);
  --rz-outline-color: var(--fs-color-focus);
  --rz-shadow-1: var(--fs-shadow-sm);
  --rz-shadow-2: var(--fs-shadow-md);
  --rz-shadow-3: var(--fs-shadow-lg);
  --rz-shadow-4: var(--fs-shadow-lg);

  /* DataGrid: hairline, zebra-free, sunken header, accent selection */
  --rz-grid-background-color: var(--fs-color-surface);
  --rz-grid-border: 1px solid var(--fs-color-border);
  --rz-grid-border-radius: var(--fs-radius-lg);
  --rz-grid-header-background-color: var(--fs-color-surface-sunken);
  --rz-grid-header-color: var(--fs-color-text-tertiary);
  --rz-grid-header-font-size: var(--fs-text-xs);
  --rz-grid-header-font-weight: 500;
  --rz-grid-header-line-height: 1rem;
  --rz-grid-header-text-transform: none;
  --rz-grid-header-cell-border: none;
  --rz-grid-header-cell-border-bottom: 1px solid var(--fs-color-border);
  --rz-grid-header-sorted-background-color: var(--fs-color-surface-hover);
  --rz-grid-cell-border: 1px solid var(--fs-color-border-subtle);
  --rz-grid-bottom-cell-border: 1px solid var(--fs-color-border-subtle);
  --rz-grid-right-cell-border: none;
  --rz-grid-cell-color: var(--fs-color-text-primary);
  --rz-grid-cell-font-size: var(--fs-text-sm);
  --rz-grid-cell-line-height: 1.25rem;
  --rz-grid-stripe-background-color: var(--fs-color-surface);
  --rz-grid-stripe-odd-background-color: var(--fs-color-surface);
  --rz-grid-hover-background-color: var(--fs-color-surface-hover);
  --rz-grid-hover-color: var(--fs-color-text-primary);
  --rz-grid-selected-background-color: var(--fs-color-surface-selected);
  --rz-grid-selected-color: var(--fs-color-text-primary);
  --rz-grid-cell-focus-background-color: var(--fs-color-surface-selected);
  --rz-grid-cell-focus-color: var(--fs-color-text-primary);
  --rz-grid-sort-icon-color: var(--fs-color-text-tertiary);
  --rz-grid-foot-background-color: var(--fs-color-surface-sunken);
  --rz-grid-detail-template-background-color: var(--fs-color-surface-sunken);
  --rz-grid-frozen-cell-background-color: var(--fs-color-surface);
  --rz-grid-loading-indicator-background-color: var(--fs-color-surface);
  --rz-grid-loading-indicator-background-opacity: 0.6;
  --rz-grid-filter-background-color: var(--fs-color-surface);
  --rz-grid-filter-color: var(--fs-color-text-tertiary);

  /* Pager */
  --rz-pager-background-color: transparent;
  --rz-pager-padding: 0.5rem 0;
  --rz-pager-gap: 0.25rem;
  --rz-pager-summary-color: var(--fs-color-text-tertiary);
  --rz-pager-summary-font-size: var(--fs-text-sm);
  --rz-pager-numeric-button-min-width: 2rem;
  --rz-pager-numeric-button-padding: 0 0.5rem;
  --rz-pager-numeric-button-selected-padding: 0 0.5rem;
  --rz-pager-button-border-radius: var(--fs-radius-sm);
  --rz-pager-numeric-button-color: var(--fs-color-text-secondary);
  --rz-pager-numeric-button-hover-background-color: var(--fs-color-surface-hover);
  --rz-pager-numeric-button-hover-color: var(--fs-color-text-primary);
  --rz-pager-numeric-button-selected-background-color: var(--fs-color-accent-soft);
  --rz-pager-numeric-button-selected-color: var(--fs-color-accent-text);
  --rz-pager-back-button-color: var(--fs-color-text-secondary);
  --rz-pager-next-button-color: var(--fs-color-text-secondary);

  /* Charts */
  --rz-chart-axis-color: var(--fs-chart-axis);
  --rz-chart-axis-label-color: var(--fs-chart-label);
  --rz-chart-axis-font-size: var(--fs-text-xs);
  --rz-chart-legend-font-size: var(--fs-text-sm);
  --rz-chart-marker-stroke: var(--fs-color-surface);
  --rz-chart-tooltip-background: var(--fs-color-surface-overlay);
  --rz-chart-tooltip-color: var(--fs-color-text-primary);
  --rz-chart-tooltip-font-size: var(--fs-text-sm);
  --rz-chart-tooltip-border-radius: var(--fs-radius-sm);
  --rz-series-1: var(--fs-chart-1);
  --rz-series-2: var(--fs-chart-2);
  --rz-series-3: var(--fs-chart-3);
  --rz-series-4: var(--fs-chart-4);
  --rz-series-5: var(--fs-chart-5);
  --rz-series-6: var(--fs-chart-6);
  --rz-series-7: var(--fs-chart-7);
  --rz-series-8: var(--fs-chart-8);

  /* Tooltip */
  --rz-tooltip-background-color: var(--fs-slate-900);
  --rz-tooltip-color: #ffffff;
  --rz-tooltip-font-size: var(--fs-text-xs);
  --rz-tooltip-border-radius: var(--fs-radius-xs);
}

/* DataGrid */
.rz-data-grid {
  overflow: hidden;
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-color-surface);
  font-family: var(--fs-font-sans);
  font-size: var(--fs-text-sm);
  font-variant-numeric: tabular-nums;
}

.fs-panel .rz-data-grid { border-radius: var(--fs-radius-md); box-shadow: none; }

.rz-grid-table thead th > div:not(.rz-cell-filter) { padding: 0.5rem 0.75rem; }
.rz-grid-table thead th .rz-column-title { color: var(--fs-color-text-tertiary); font-size: var(--fs-text-xs); font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.rz-grid-table tbody td,
.rz-grid-table tbody td .rz-cell-data { color: var(--fs-color-text-primary); }
.rz-grid-table tbody td { height: var(--fs-row-h); padding: 0.5rem 0.75rem; vertical-align: middle; }
.rz-grid-table-compact tbody td,
.rz-density-compact .rz-grid-table tbody td { height: var(--fs-row-h-dense); padding: 0.375rem 0.75rem; }
.rz-grid-table tbody tr:last-child td { border-bottom: 0; }
.rz-data-row { transition: background-color var(--fs-transition); }
.rz-data-grid .rz-data-row:hover > td { background-color: var(--fs-color-surface-hover); }
.rz-data-grid .rz-data-row.rz-state-highlight > td { background-color: var(--fs-color-surface-selected); }
.rz-data-grid .fs-mono,
.rz-data-grid .fs-figure { font-family: var(--fs-font-mono); }
.rz-data-grid .rz-grid-table .rz-sortable-column:hover { background-color: var(--fs-color-surface-hover); }
.rz-cell-filter .rz-textbox,
.rz-cell-filter input { height: 30px; border-radius: var(--fs-radius-xs); }

/* Pager: quiet buttons, accent current page. */
.rz-pager { gap: var(--fs-space-1); font-family: var(--fs-font-sans); }
.rz-pager .rz-pager-element,
.rz-pager .rz-pager-page { min-width: 32px; height: 32px; border-radius: var(--fs-radius-sm); font-size: var(--fs-text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; }
.rz-pager .rz-pager-element:hover { background: var(--fs-color-surface-hover); }
.rz-pager .rz-pager-page.rz-state-active { background: var(--fs-color-accent-soft); color: var(--fs-color-accent-text); }
.rz-pager-summary { color: var(--fs-color-text-tertiary); }

/* Charts */
.rz-chart { font-family: var(--fs-font-sans); }
.rz-chart .rz-axis .rz-grid-line { stroke: var(--fs-chart-grid); }
.rz-chart .rz-axis line,
.rz-chart .rz-axis path { stroke: var(--fs-chart-axis); }
.rz-chart .rz-tick-text { fill: var(--fs-chart-label); font-size: 11px; }
.rz-chart .rz-legend-item-text { color: var(--fs-color-text-secondary); font-size: var(--fs-text-sm); }
.rz-chart .rz-donut-content { color: var(--fs-color-text-primary); }

.rz-chart-tooltip-content {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--fs-color-border) !important;
  border-radius: var(--fs-radius-sm);
  background: var(--fs-color-surface-overlay);
  box-shadow: var(--fs-shadow-lg);
  color: var(--fs-color-text-primary);
  font-family: var(--fs-font-sans);
  font-size: var(--fs-text-sm);
}

.rz-chart-tooltip-content::after { display: none; }

.rz-dialog,
.rz-notification,
.rz-tooltip-content { font-family: var(--fs-font-sans); }

/* Radzen buttons (rare): 8px controls, not pills. */
.rz-button { border-radius: var(--fs-radius-sm); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Radzen sizes the donut's centre box to the hole but stacks its content at the top: centre it for every donut. */
.rz-donut-content {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}