/* =============================================================================
   AlchemOS Positive — MudBlazor Component Overrides
   Style Contract v1.0 — verified against MudBlazor 8.0.0
   All hex values are forbidden here — use semantic tokens from joy-tokens.css
   ============================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════════
   Global — Typography base application
   ═══════════════════════════════════════════════════════════════════════════════ */
body, html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  /* Inter variable font — activate OpenType features for softer, more refined rendering */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  font-variation-settings: "wght" 400;  /* explicit variable axis for smooth interpolation */
  color: var(--color-text-primary);
  background-color: var(--color-bg-app);
}

.mud-typography,
.mud-input, .mud-select, .mud-button, .mud-menu, .mud-list,
.mud-table, .mud-dialog, .mud-snackbar, .mud-alert,
.mud-chip, .mud-badge, .mud-tooltip, .mud-drawer,
.mud-appbar, .mud-navmenu {
  font-family: var(--font-sans);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 0.2 Typography Scale — MudBlazor Typo variant → design token mapping
   Use Typo="Typo.h5" etc. on <MudText>; color and component spacing stay in
   each component's .razor.css. Only font-shape properties live here so the
   entire app shares one consistent type scale without per-component duplication.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Page/hero titles — Typo.h4 | Typo.h5 */
.mud-typography-h4,
.mud-typography-h5 {
  font-size: var(--text-xl);     /* 1.563rem / 25px */
  font-weight: 700;
  font-variation-settings: "wght" 680;   /* Inter variable — softer than bold-700 */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Card headings, section titles — Typo.h6 */
.mud-typography-h6 {
  font-size: var(--text-lg);     /* 1.25rem / 20px */
  font-weight: 600;
  font-variation-settings: "wght" 580;   /* Inter variable — softer semibold */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Descriptive subtitles / long-form descriptions — Typo.subtitle1 */
.mud-typography-subtitle1 {
  font-size: var(--text-sm);     /* 0.875rem / 14px */
  font-weight: 400;
  font-variation-settings: "wght" 410;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  line-height: var(--leading-relaxed);   /* 1.65 — comfortable for multi-line descriptions */
}

/* Secondary inline subtitles / metadata labels — Typo.subtitle2 */
.mud-typography-subtitle2 {
  font-size: var(--text-sm);
  font-weight: 500;
  font-variation-settings: "wght" 490;   /* slightly softer than 500 */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  line-height: var(--leading-body);
}

/* Primary body copy — Typo.body1 */
.mud-typography-body1 {
  font-size: var(--text-base);   /* 1rem / 16px */
  font-weight: 400;
  font-variation-settings: "wght" 400;   /* explicit axis for smooth rendering */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  line-height: var(--leading-body);
}

/* Secondary body / table cells / labels — Typo.body2 */
.mud-typography-body2 {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-body);
}

/* Timestamps, metadata, helper text — Typo.caption */
.mud-typography-caption {
  font-size: var(--text-xs);     /* 0.75rem / 12px */
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--color-text-secondary);  /* only Typo variant where color is set globally */
}

/* Section eyebrows — ALL-CAPS badge-style category labels — Typo.overline */
.mud-typography-overline {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  /* color is intentionally NOT set here — context determines it (accent, primary, secondary) */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.1 Buttons
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Strip MudBlazor uppercase default */
.mud-button-root {
  text-transform: none;
  letter-spacing: var(--tracking-wide);
}

/* Primary (filled) */
.mud-button-filled.mud-button-filled-primary {
  background-color: var(--color-accent);
  color: #FFFFFF !important; /* pinned — MudBlazor 8 auto-calc can drop below 4.5:1 */
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  box-shadow: none !important;
  border: none;
  transition: background-color var(--transition-interactive),
              opacity var(--transition-interactive);
}
.mud-button-filled.mud-button-filled-primary:hover {
  background-color: var(--color-accent-hover);
}
.mud-button-filled.mud-button-filled-primary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.mud-button-filled.mud-button-filled-primary:disabled,
.mud-button-filled.mud-button-filled-primary[disabled] {
  background-color: var(--color-bg-component);
  color: var(--color-text-secondary);
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary (outlined) */
.mud-button-outlined.mud-button-outlined-primary {
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: none !important;
  transition: background-color var(--transition-interactive),
              border-color var(--transition-interactive);
}
.mud-button-outlined.mud-button-outlined-primary:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-accent);
}
.mud-button-outlined.mud-button-outlined-primary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.mud-button-outlined.mud-button-outlined-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ghost / text */
.mud-button-text.mud-button-text-primary {
  background-color: transparent;
  color: var(--color-accent-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: none !important;
  transition: background-color var(--transition-interactive);
}
.mud-button-text.mud-button-text-primary:hover {
  background-color: var(--color-accent-subtle);
}

/* Dark mode button — teal accent on dark bg: dark text for contrast */
[data-theme="dark"] .mud-button-filled.mud-button-filled-primary {
  color: #0F1A25 !important;
}
[data-theme="dark"] .mud-button-outlined.mud-button-outlined-primary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Global: Filled button text contrast — WCAG AA (all palette variants) ── */
/* MudBlazor 8 auto-calculates --mud-palette-*-text but the threshold can     */
/* produce sub-4.5:1 ratios. Explicit !important pins are the reliable fix.   */

/* Light mode — dark/saturated backgrounds → white text                       */
.mud-button-filled.mud-button-filled-secondary { color: #FFFFFF !important; } /* #5B21B6 violet → 8.4:1 ✓ */
.mud-button-filled.mud-button-filled-tertiary  { color: #FFFFFF !important; } /* #2B7FBC blue   → 4.9:1 ✓ */
.mud-button-filled.mud-button-filled-success   { color: #FFFFFF !important; } /* #15803D green  → 4.6:1 ✓ */
.mud-button-filled.mud-button-filled-info      { color: #FFFFFF !important; } /* #0369A1 blue   → 5.4:1 ✓ */
.mud-button-filled.mud-button-filled-error     { color: #FFFFFF !important; } /* #DC2626 red    → 4.8:1 ✓ */
.mud-button-filled.mud-button-filled-dark      { color: #FFFFFF !important; } /* #1E3122 dark   → high  ✓ */
/* Warning amber (#D97706): white is only 3.0:1 — dark text required          */
.mud-button-filled.mud-button-filled-warning   { color: #1C1200 !important; } /* #D97706 amber  → 7.1:1 ✓ */

/* Dark mode — lightened palette backgrounds → dark text                      */
[data-theme="dark"] .mud-button-filled.mud-button-filled-secondary { color: #0F1A25 !important; } /* #A78BFA violet */
[data-theme="dark"] .mud-button-filled.mud-button-filled-tertiary  { color: #0F1A25 !important; } /* #5BA8D8 sky    */
[data-theme="dark"] .mud-button-filled.mud-button-filled-success   { color: #0D1710 !important; } /* #4ADE80 green  */
[data-theme="dark"] .mud-button-filled.mud-button-filled-info      { color: #0F1A25 !important; } /* #38BDF8 sky    */
[data-theme="dark"] .mud-button-filled.mud-button-filled-warning   { color: #1C1200 !important; } /* #FBBF24 amber  */
[data-theme="dark"] .mud-button-filled.mud-button-filled-error     { color: #0F1A25 !important; } /* #F87171 red    */

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.2 Inputs / TextFields
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--color-border-default);
  border-radius: var(--radius-md);
  background-color: transparent;
  box-shadow: none !important;
  transition: border-color var(--transition-interactive);
}
.mud-input.mud-input-outlined {
  background-color: var(--color-surface-1);
  border-radius: var(--radius-md);
}
.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--color-focus-ring);
  border-width: 2px;
  box-shadow: none !important;
}
.mud-input-outlined.mud-input-error .mud-input-outlined-border {
  border-color: var(--color-error-border);
  border-width: 2px;
}
.mud-input-error .mud-input-helper-text {
  color: var(--color-error-text);
  font-size: var(--text-xs);
}
.mud-input-outlined.mud-disabled .mud-input-outlined-border {
  border-color: var(--color-border-subtle);
  background-color: transparent;
  color: var(--color-text-secondary);
  opacity: 0.6;
}
.mud-input.mud-input-outlined.mud-disabled {
  background-color: var(--color-bg-subtle);
}
/* Explicit text color guard — prevents MudBlazor PaletteDark light text
   from being applied when CSS tokens haven't yet switched to dark mode,
   and prevents browser autofill from rendering invisible light-on-white text */
.mud-input-root,
.mud-input-slot {
  color: var(--color-text-primary) !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}
/* Autofill: keep our surface background + dark text so Chrome's yellow tint
   doesn't fight with the white input background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-1) inset !important;
  caret-color: var(--color-text-primary);
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-1) inset !important;
}
.mud-input-label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.mud-input-outlined.mud-focused .mud-input-label {
  color: var(--color-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.3 Cards / Paper
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-paper {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  transition: transform var(--transition-interactive);
}
.mud-paper:hover:not(.mud-paper-static) {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
.mud-card {
  border-radius: var(--radius-lg);
}
.mud-card-header {
  padding: var(--space-content);
}
.mud-card-content {
  padding: var(--space-content);
}
.mud-card-actions {
  padding: var(--space-4) var(--space-content);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.4 Navigation Drawer
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-drawer {
  background-color: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border-subtle);
  box-shadow: none !important;
}
.mud-nav-item.mud-nav-item-active > .mud-nav-link {
  background-color: var(--color-bg-selected);
  color: var(--color-accent-text);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 500;
}
.mud-nav-item > .mud-nav-link {
  border-radius: var(--radius-md);
  margin: 2px var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--transition-interactive);
}
.mud-nav-item > .mud-nav-link:hover {
  background-color: var(--color-bg-hover);
}
/* Nav group nested items */
.mud-nav-group .mud-collapse-container .mud-nav-link {
  font-size: var(--text-sm);
  font-weight: 400;
  padding-left: var(--joy-space-8);
}
.mud-nav-group .mud-collapse-container .mud-nav-link.active {
  font-weight: 500;
}
/* Nav section headers */
.mud-navmenu .mud-text {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  padding-left: 1.25rem;
}
.nav-section-header {
  padding-left: 1.25rem;
}
/* Icon-rail mode: collapse section header labels + version text (mini drawer, closed) */
.mud-drawer-mini.mud-drawer-close .nav-section-header {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  transition: opacity var(--transition-interactive),
              max-height var(--transition-interactive),
              padding var(--transition-interactive),
              margin var(--transition-interactive);
}
/* On hover the mini drawer expands — fade headers back in */
.mud-drawer-mini.mud-drawer-close:hover .nav-section-header {
  opacity: 1;
  max-height: 2rem;
  overflow: visible;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
  transition: opacity var(--transition-reveal),
              max-height var(--transition-reveal),
              padding var(--transition-reveal),
              margin var(--transition-reveal);
}
/* Fully open (lg+ persistent drawer) — always visible, no override needed */
.mud-drawer-mini.mud-drawer-open .nav-section-header {
  opacity: 1;
  max-height: none;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.4.1 Dark Mode — AppBar, Drawer, Nav overrides
   Applied via [data-theme="dark"] set on <html> by themeHelpers.applyTheme().
   These ensure MudBlazor's PaletteDark defaults are reinforced with our tokens.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* AppBar — dark surface */
[data-theme="dark"] .mud-appbar {
  background-color: var(--color-bg-app) !important;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
}
[data-theme="dark"] .mud-appbar .mud-icon-button {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .mud-appbar .mud-typography {
  color: var(--color-text-primary);
}

/* Drawer — deep forest surface */
[data-theme="dark"] .mud-drawer {
  background-color: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border-subtle);
}

/* Nav links — use light text on dark surface */
[data-theme="dark"] .mud-nav-item > .mud-nav-link {
  color: var(--color-text-primary);
}
[data-theme="dark"] .mud-nav-item.mud-nav-item-active > .mud-nav-link {
  background-color: var(--color-bg-selected);
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}
[data-theme="dark"] .mud-nav-item > .mud-nav-link:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-accent);
}

/* Nav icons in dark mode */
[data-theme="dark"] .mud-nav-link .mud-icon-root {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .mud-nav-item.mud-nav-item-active > .mud-nav-link .mud-icon-root,
[data-theme="dark"] .mud-nav-item > .mud-nav-link:hover .mud-icon-root {
  color: var(--color-accent);
}

/* Nav section headers in dark mode */
[data-theme="dark"] .mud-navmenu .mud-text,
[data-theme="dark"] .nav-section-header {
  color: var(--color-text-secondary) !important;
}

/* Drawer header separator in dark mode */
[data-theme="dark"] .mud-drawer-header {
  border-bottom-color: var(--color-border-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.5 DataGrid / Table
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-table-head .mud-table-row .mud-table-cell {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
}
.mud-table-row .mud-table-cell {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background-color: transparent;
}
/* Lighter, softer alternate stripe — lives on <tr>, cells stay transparent */
.mud-table-row:nth-child(even) {
  background-color: var(--color-bg-subtle);
}
.mud-table-row:nth-child(even) .mud-table-cell {
  background-color: transparent;
}
/* Typography inside table cells AND dropdown list items must be transparent —
   MudBlazor injects a default background that bleeds through as white boxes */
.mud-table-cell .mud-typography,
.mud-list-item .mud-typography,
.mud-select-popover .mud-typography {
  background-color: transparent !important;
}
/* Pager caption elements ("Rows per page:" / "1-5 of 5") ARE .mud-typography themselves
   so the parent-scoped rule above doesn't cover them — target directly */
.mud-table-pagination-caption {
  background-color: transparent !important;
}
/* Pager select wrapper: force flex centering so the value+arrow sit mid-height in the 52px toolbar */
.mud-table-pagination-select {
  align-items: center !important;
  display: flex !important;
  /* MudBlazor's .mud-input-control default adds margin-bottom: 16px (floating-label space).
     This shifts the visible "5 ▼" content upward away from the toolbar centre.
     Remove it so the element is vertically centred by the toolbar's own align-items:center. */
  margin-bottom: 0 !important;
}
/* Outer .mud-select wrapper rendered by MudBlazor inside the pager toolbar is a flex-row
   container with align-items:normal (stretch), but its inner .mud-input-control is only
   ~20px tall so the content floats to the top of the ~36px wrapper.
   Force center so the "5 ▼" value aligns with the surrounding caption text. */
.mud-table-pagination-toolbar .mud-select {
  align-items: center;
}
.mud-table-row:hover .mud-table-cell {
  background-color: var(--color-bg-hover);
  cursor: pointer;
}
.mud-table-row.mud-selected-item .mud-table-cell {
  background-color: var(--color-bg-selected);
  border-left: 2px solid var(--color-accent);
}
.mud-table-root {
  border: none;
}
/* ── MudDataGridPager / MudTablePager: zero out the 2px margin-top that
   MudBlazor's own _table.scss injects on .mud-table-pagination-select
   .mud-input .mud-input-root — match the exact 3-class specificity so
   !important wins regardless of stylesheet load order ── */
.mud-table-pagination-select .mud-input .mud-input-root {
  margin-top: 0 !important;
}
/* ── Grid action bar: icon buttons side-by-side in any grid/table row ── */
.grid-action-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
}
/* Action icon button — hover lift effect (global, usable without scoping to a specific table) */
.action-icon-btn {
  border-radius: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.action-icon-btn:hover {
  transform: scale(1.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  background: rgba(99, 102, 241, 0.08) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.6 Chips / Badges
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-chip {
  background-color: var(--spring-2);               /* #EDF4E8 — soft sage morning */
  color: var(--spring-11);                          /* #3A5A3F — deep moss, ~7:1 WCAG AAA */
  border: 1px solid var(--spring-moss-mid);          /* #C1D9C3 — muted sage border */
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
}
.mud-chip.mud-chip-color-success { background-color: var(--color-success-bg); color: var(--color-success-text); }
.mud-chip.mud-chip-color-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.mud-chip.mud-chip-color-error   { background-color: var(--color-error-bg);   color: var(--color-error-text); }
.mud-chip.mud-chip-color-info    { background-color: var(--color-info-bg);    color: var(--color-info-text); }

.mud-badge {
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.7 Tooltip
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-tooltip {
  background-color: var(--color-tooltip-bg) !important;    /* semantic inversion token; do not use Color prop on MudTooltip */
  color: var(--color-tooltip-text) !important;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  max-width: 280px;
  padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.20);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.8 Focus Ring (universal keyboard accessibility)
   ═══════════════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.9 MudSelect / MudAutocomplete
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-popover.mud-select-popover {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  padding: 4px 0;
}
.mud-list-item {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  padding: 8px 16px;
  transition: background-color var(--transition-interactive);
}
.mud-list-item:hover {
  background-color: var(--color-bg-hover);
}
.mud-list-item.mud-selected {
  background-color: var(--color-bg-selected);
  color: var(--color-accent-text);
  font-weight: 500;
}
.mud-list-item-icon {
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.10 MudDialog
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-overlay {
  background-color: rgba(15, 23, 42, 0.40);
}
.mud-dialog {
  background-color: var(--color-surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18) !important;
  max-width: 560px;
  width: 100%;
}
.mud-dialog-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  padding: var(--space-content);
  border-bottom: 1px solid var(--color-border-subtle);
  letter-spacing: var(--tracking-tight);
}
.mud-dialog-content {
  padding: var(--space-content);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-body);
}
.mud-dialog-actions {
  padding: 12px var(--space-content);
  border-top: 1px solid var(--color-border-subtle);
  gap: 8px;
  justify-content: flex-end;
}
.mud-dialog.mud-dialog-destructive .mud-dialog-title {
  color: var(--color-error-text);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.11 MudAlert / MudSnackbar
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-alert {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.mud-alert-filled-success {
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
}
.mud-alert-filled-warning {
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
}
.mud-alert-filled-error {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}
.mud-alert-filled-info {
  background-color: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info-text);
}
.mud-alert-icon {
  font-size: 1.2em;
  flex-shrink: 0;
}

.mud-snackbar {
  background-color: var(--slate-12);
  color: var(--slate-1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.20);
  max-width: 480px;
}
.mud-snackbar .mud-button-text {
  color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § 7.12 MudPagination
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-pagination { gap: 4px; }
.mud-pagination-item .mud-button-root {
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  transition: background-color var(--transition-interactive),
              border-color var(--transition-interactive);
}
.mud-pagination-item .mud-button-root:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
.mud-pagination-item.mud-pagination-item-selected .mud-button-root {
  background-color: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
  font-weight: 500;
}
[data-theme="dark"] .mud-pagination-item.mud-pagination-item-selected .mud-button-root {
  color: #0F1A25;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AppBar
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-appbar {
  background-color: var(--color-surface-1) !important;
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: none !important;
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Tabs
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-tabs-toolbar {
  border-bottom: 1px solid var(--color-border-subtle);
}
.mud-tab {
  border-radius: var(--radius-md);
  text-transform: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  transition: background-color var(--transition-interactive);
}
.mud-tab:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.mud-tab.mud-tab-active {
  color: var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent);
}
.mud-tab-slider {
  background-color: var(--color-accent) !important;
}

/* Wide tabs helper (for icon + text + badge) */
.wide-tabs .mud-tab {
  min-width: 200px;
}
.wide-tabs .mud-tab .mud-tab-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Menu
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-popover:not(.mud-select-popover) {
  background-color: var(--color-surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}
.mud-menu-item:hover {
  background-color: var(--color-bg-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Expansion Panels
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-expansion-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}
.mud-expand-panel-header {
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Breadcrumbs
   ═══════════════════════════════════════════════════════════════════════════════ */

.mud-breadcrumb-item {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}
.mud-breadcrumb-item:last-child {
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Scrollbar Styling
   ═══════════════════════════════════════════════════════════════════════════════ */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) var(--color-bg-app);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}
*::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   § MudStepper — Step icon contrast overrides
   Blazor CSS isolation (::deep) cannot reach MudBlazor's inner component HTML
   because those elements are rendered without the parent component's b-xxxx
   scoping attribute. These global rules use the same specificity (0-5-0) as
   MudBlazor.min.css but load later, winning the cascade.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Inactive step: light gray bg (#EAEEF2) + near-black text → ~11:1 WCAG AAA */
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon {
  background-color: var(--color-bg-component) !important;
  color: var(--color-text-primary) !important;
  font-weight: 700 !important;
}

/* Active step: bright aqua bg + dark teal text → ~14:1 WCAG AAA — visually pops */
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon.mud-primary {
  background-color: var(--teal-3) !important;   /* #99F6E4 — bright aqua */
  color: var(--teal-12) !important;             /* #134E4A — dark forest teal */
  font-weight: 700 !important;
}

/* Completed step (mud-success / mud-secondary states) */
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon.mud-success,
.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon.mud-secondary {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Connector line between steps */
.mud-stepper .mud-stepper-nav .mud-stepper-nav-connector .mud-stepper-nav-connector-line {
  border-top-color: var(--color-border-subtle);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Misc utility classes (backward compat — keep for existing pages)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Contract card surface — Elevation="1" + border-radius via CSS token */
.joy-card {
  border-radius: var(--radius-lg) !important;
}
.joy-card-hover {
  transition: transform var(--transition-interactive);
}
.joy-card-hover:hover {
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Elevation normalisation (Section 3 / Section 11.4)
   Contract: single 0 4px 16px shadow only. Components may still carry
   Elevation="1-4" props — flatten them all to the contract value.
   ══════════════════════════════════════════════════════════════════════════════ */
[class*="mud-elevation-"] {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[class*="mud-elevation-"]:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important; /* no hover escalation */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Icon-rail nav (Mini drawer collapsed)
   MudBlazor 8 adds .mud-drawer-mini-closed when DrawerVariant.Mini + Open=false.
   Native MudNavLink text is hidden by MudBlazor — we only need to suppress
   MudNavGroup header text, expand chevrons, and section label subheaders.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Group header text + expand chevron */
.mud-drawer-mini-closed .mud-nav-group-header-text,
.mud-drawer-mini-closed .mud-nav-group-expand-button {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--transition-reveal, 150ms ease), width var(--transition-reveal, 150ms ease);
}
/* Section subheader labels (Main / Administration / Settings) */
.mud-drawer-mini-closed .mud-list-subheader {
  display: none;
}
/* Ensure the mini drawer clips any overflowing content */
.mud-drawer-mini {
  overflow: hidden;
}
/* Restore on open */
.mud-drawer-mini-open .mud-nav-group-header-text,
.mud-drawer-mini-open .mud-nav-group-expand-button {
  opacity: 1;
  width: auto;
  pointer-events: auto;
}
.mud-drawer-mini-open .mud-list-subheader {
  display: block;
}