/* =============================================================================
   agrolink-radzen.css — the A1.6 Radzen theme bridge (blazor-notes.md §2/§4).
   -----------------------------------------------------------------------------
   Binds Radzen's own --rz-* custom properties to the shared --al-* dark tokens
   (tokens.css). Loaded AFTER Radzen's material-base.css and tokens.css so these
   overrides win. This does NOT compile a .rztheme — it is the variable-contract
   layer the note specifies. Do not hand-tune colours here: re-measure the
   showcase and update tokens.css (visual-is-canonical, §1.1).
   ============================================================================ */

:root {
  /* Surfaces */
  --rz-base-background-color:  var(--al-bg-0);
  --rz-body-background-color:  var(--al-bg-1);
  --rz-panel-background-color: var(--al-bg-2);
  --rz-input-background-color: var(--al-bg-3);
  --rz-base-background:         var(--al-bg-1);

  /* Text ramp (dark base inverts the scale) */
  --rz-text-color:           var(--al-ink-1);
  --rz-text-title-color:     var(--al-ink-0);
  --rz-text-secondary-color: var(--al-ink-2);
  --rz-text-disabled-color:  var(--al-ink-3);
  --rz-base-900: var(--al-ink-0);
  --rz-base-800: var(--al-ink-1);
  --rz-base-700: var(--al-ink-1);
  --rz-base-600: var(--al-ink-2);
  --rz-base-500: var(--al-ink-2);
  --rz-base-400: var(--al-ink-3);
  --rz-base-300: var(--al-line-3);
  --rz-base-200: var(--al-line-2);
  --rz-base-100: var(--al-line-1);

  /* Borders / rules */
  --rz-border-color:      var(--al-line-2);
  --rz-border:            1px solid var(--al-line-2);
  --rz-grid-cell-border:  1px solid var(--al-line-1);

  /* Accent + status families */
  --rz-primary:        var(--al-signal);
  --rz-primary-light:  var(--al-signal-bg);
  --rz-primary-dark:   var(--al-signal-dim);
  --rz-success:        var(--al-signal);
  --rz-success-light:  var(--al-signal-bg);
  --rz-warning:        var(--al-amber);
  --rz-warning-light:  var(--al-amber-bg);
  --rz-danger:         var(--al-red);
  --rz-danger-light:   var(--al-red-bg);
  --rz-info:           var(--al-cool);
  --rz-info-light:     var(--al-cool-bg);

  /* On-accent ink: the signal green wants dark ink on top (the showcase button shape) */
  --rz-primary-contrast-color: var(--al-bg-0);

  /* Shape */
  --rz-border-radius:    var(--al-radius-lg);
  --rz-border-radius-sm: var(--al-radius-xs);

  /* Type */
  --rz-body-font-family: var(--al-font-body);
  --rz-text-font-family: var(--al-font-body);
}

/* --- Component nudges beyond the variable contract (blazor-notes.md §4) ------- */

/* App chrome sits on the darkest surface. */
body {
  background: var(--al-bg-0);
  color: var(--al-ink-1);
  font-family: var(--al-font-body);
}

/* DataGrid: comfortable density, faint bottom rules, uppercase eyebrow headers,
   mono data cells, signal-tinted selected row (the showcase table anatomy). */
.rz-datatable .rz-data-grid-data,
.rz-grid-table {
  background: transparent;
}
.rz-datatable .rz-column-title,
.rz-datatable thead .rz-cell-data {
  font-family: var(--al-font-body);
  font-size: var(--al-text-label);
  letter-spacing: var(--al-ls-label);
  text-transform: uppercase;
  color: var(--al-ink-3);
  font-weight: var(--al-weight-medium);
}
.rz-datatable td.rz-cell-data,
.rz-datatable .rz-data-cell {
  padding: var(--al-space-4);
  border-bottom: 1px solid var(--al-line-1);
  color: var(--al-ink-1);
}
.rz-datatable tbody tr:hover {
  background: var(--al-bg-4);
}
/* Monospace the data columns (amounts, ids, metrics) — the showcase data convention. */
.al-data,
.rz-datatable .al-data .rz-cell-data {
  font-family: var(--al-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Cards / panels flat + border-driven (the showcase is shadowless). */
.rz-card,
.rz-panel {
  background: var(--al-bg-2);
  border: 1px solid var(--al-line-1);
  box-shadow: none;
  border-radius: var(--al-radius-lg);
}

/* Inputs. */
.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-numeric input,
.rz-spinner input {
  background: var(--al-bg-3);
  color: var(--al-ink-0);
  border: 1px solid var(--al-line-2);
  border-radius: var(--al-radius-lg);
}
.rz-textbox:focus,
.rz-dropdown.rz-state-focused,
.rz-numeric input:focus {
  border-color: var(--al-signal-line);
  box-shadow: var(--al-glow-signal);
  outline: none;
}

/* Buttons: primary = filled signal with dark ink; light = bordered ghost. */
.rz-button.rz-primary {
  background: var(--al-signal);
  color: var(--al-bg-0);
  border: none;
  border-radius: var(--al-radius-lg);
  font-weight: var(--al-weight-medium);
}
.rz-button.rz-secondary,
.rz-button.rz-light {
  background: transparent;
  color: var(--al-ink-1);
  border: 1px solid var(--al-line-2);
  border-radius: var(--al-radius-lg);
}
.rz-button.rz-danger { background: var(--al-red); color: var(--al-bg-0); border: none; }

/* Badges: dense 2px mono uppercase pills. */
.rz-badge {
  border-radius: var(--al-radius-xs);
  font-family: var(--al-font-mono);
  font-size: var(--al-text-data-s);
  letter-spacing: var(--al-ls-data-s);
  text-transform: uppercase;
  font-weight: var(--al-weight-medium);
}

/* Dialog surface. */
.rz-dialog { background: var(--al-bg-2); color: var(--al-ink-1); border: 1px solid var(--al-line-2); }

/* Notifications inherit the status families. */
.rz-notification { border-radius: var(--al-radius-lg); }