/* helix-mud-overrides.css — MudBlazor 7.14 component overrides to match Helix design language.
 * Loaded last. Selectors deliberately specific to win over MudBlazor defaults.
 * IMPORTANT: If upgrading MudBlazor, audit these selectors — internal class names may change.
 */

/* ── base body ──────────────────────────────────────────────────────────────── */
html, body {
  max-width: 100vw;
}
body {
  font-family: var(--f-sans, "IBM Plex Sans", sans-serif);
  font-size: var(--text, 14px);
  background: var(--bg, #fafaf8);
  color: var(--ink, #1e2040);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ── MudCard ────────────────────────────────────────────────────────────────── */
.mud-card {
  border-radius: var(--r-3, 14px) !important;
  border: 1px solid var(--line, oklch(0.91 0.006 80)) !important;
  box-shadow: var(--sh-2, 0 1px 2px rgba(20,24,40,.04), 0 1px 0 oklch(0.92 0.006 80)) !important;
  background: var(--surface, #fff) !important;
}
.mud-card-content { padding: 18px 20px 20px !important; }
.mud-card-header  { padding: 16px 20px 0 !important; }
.mud-card-actions { padding: 0 20px 16px !important; }
.mud-card-content:hover { background: inherit !important; }

/* ── MudPaper ───────────────────────────────────────────────────────────────── */
.mud-paper {
  border-radius: var(--r-3, 14px) !important;
  box-shadow: var(--sh-2) !important;
}
.mud-paper.mud-elevation-1 { box-shadow: var(--sh-1) !important; }
.mud-paper.mud-elevation-2 { box-shadow: var(--sh-2) !important; }
.mud-paper.mud-elevation-3 { box-shadow: var(--sh-3) !important; }

/* ── MudButton ──────────────────────────────────────────────────────────────── */
.mud-button-root {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  font-family: var(--f-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .04s !important;
}
.mud-button-root:active { transform: translateY(0.5px); }

/* Filled / Primary */
.mud-button-filled.mud-button-filled-primary {
  background: var(--p-600) !important;
  color: white !important;
  box-shadow: none !important;
}
.mud-button-filled.mud-button-filled-primary:hover {
  background: var(--p-700) !important;
  box-shadow: none !important;
}

/* Filled / Secondary */
.mud-button-filled.mud-button-filled-secondary {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: var(--sh-1) !important;
}
.mud-button-filled.mud-button-filled-secondary:hover { background: var(--surface-2) !important; }

/* Outlined */
.mud-button-outlined {
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh-1) !important;
}
.mud-button-outlined:hover { background: var(--surface-2) !important; }

/* Text / Ghost */
.mud-button-text { color: var(--ink-2) !important; }
.mud-button-text:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.mud-button-text.mud-button-text-primary { color: var(--p-600) !important; }

/* Icon buttons */
.mud-icon-button {
  border-radius: var(--r-sm) !important;
  color: var(--ink-3) !important;
  transition: background .12s, color .12s !important;
}
.mud-icon-button:hover { background: var(--surface-2) !important; color: var(--ink) !important; }

/* ── MudTextField / MudInput ────────────────────────────────────────────────── */
.mud-input-root { font-family: var(--f-sans) !important; }

/* Outlined inputs */
.mud-input-outlined .mud-notch { border-color: var(--line-2) !important; border-radius: var(--r-sm) !important; }
.mud-input-outlined .mud-input-outlined-border { border-color: var(--line-2) !important; border-radius: var(--r-sm) !important; }
.mud-input-outlined.mud-input-root-outlined { border-radius: var(--r-sm) !important; }

/* Kill MudBlazor's default hover/focus semi-transparent background (looks glass-like) */
.mud-input-root-outlined,
.mud-input-root-outlined:hover,
.mud-input-root-outlined.mud-focused,
.mud-input-root-outlined:focus-within { background-color: var(--surface) !important; }

.mud-input-outlined:hover .mud-notch,
.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--ink-4) !important; }

.mud-input-outlined.mud-focused .mud-notch,
.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--p-400) !important;
  box-shadow: 0 0 0 3px var(--p-100);
}

/* Underline (default) inputs */
.mud-input-underline::after { border-bottom-color: var(--p-500) !important; }
.mud-input-underline:hover::before { border-bottom-color: var(--ink-3) !important; }

/* Label */
.mud-input-label { font-family: var(--f-sans) !important; font-size: 13px !important; }
.mud-input-label.mud-input-label-animated { color: var(--ink-3) !important; }
.mud-input-label.mud-input-label-inputcontrol.mud-focused { color: var(--p-500) !important; }

/* Placeholder */
.mud-input input::placeholder,
.mud-input textarea::placeholder { color: var(--ink-4) !important; }

/* ── MudSelect ──────────────────────────────────────────────────────────────── */
.mud-select .mud-input-slot { font-family: var(--f-sans) !important; }

/* ── MudAutocomplete ────────────────────────────────────────────────────────── */
.mud-popover-paper { border-radius: var(--r-2) !important; border: 1px solid var(--line) !important; box-shadow: var(--sh-3) !important; }

/* ── MudDataGrid ────────────────────────────────────────────────────────────── */
.mud-data-grid {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.mud-table-root { border-radius: 12px !important; overflow: hidden; }

@media (max-width: 600px) {
  /* Allow table container to scroll horizontally without being double-clipped */
  .mud-data-grid  { overflow: visible !important; border-radius: 12px !important; }
  .mud-table-root { overflow: visible !important; }
}

.mud-data-grid .mud-table-head .mud-table-cell {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px var(--row-x, 16px) !important;
  position: sticky; top: 0;
}

.mud-data-grid .mud-table-body .mud-table-cell {
  padding: var(--row-y, 12px) var(--row-x, 16px) !important;
  font-size: var(--text, 14px) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-family: var(--f-sans) !important;
  vertical-align: middle !important;
}

.mud-data-grid .mud-table-body .mud-table-row:hover .mud-table-cell {
  background: var(--surface-2) !important;
}

.mud-data-grid .mud-table-body .mud-table-row:last-child .mud-table-cell {
  border-bottom: 0 !important;
}

/* Column sort header */
.mud-data-grid .mud-table-sort-label { color: var(--ink-4) !important; font-weight: 600; }
.mud-data-grid .mud-table-sort-label:hover { color: var(--ink) !important; }
.mud-data-grid .mud-table-sort-label.mud-active { color: var(--p-600) !important; }

/* ── MudTable ───────────────────────────────────────────────────────────────── */
.mud-table {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.mud-table-head .mud-table-cell {
  font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.07em !important;
  text-transform: uppercase !important; color: var(--ink-4) !important;
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px var(--row-x, 16px) !important;
}
.mud-table-body .mud-table-cell {
  padding: var(--row-y, 12px) var(--row-x, 16px) !important;
  font-size: var(--text, 14px) !important;
  border-bottom: 1px solid var(--line) !important;
  font-family: var(--f-sans) !important;
}
.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0 !important; }
.mud-table-body .mud-table-row:hover .mud-table-cell { background: var(--surface-2) !important; }

/* ── MudAppBar ──────────────────────────────────────────────────────────────── */
.mud-appbar {
  background: color-mix(in oklab, var(--bg, #fafaf8) 90%, white) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  height: 60px !important;
}
.mud-appbar .mud-icon-button { color: var(--ink-3) !important; }

/* ── MudDrawer ──────────────────────────────────────────────────────────────── */
.mud-drawer {
  border-right: 1px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.mud-drawer-content { background: var(--surface) !important; }

/* NavGroup headers in drawer */
.mud-nav-group .mud-nav-group-header { color: var(--ink-4) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }

/* NavLink */
.mud-nav-link { border-radius: var(--r-sm) !important; margin: 1px 8px !important; color: var(--ink-2) !important; font-size: 13.5px !important; font-weight: 500 !important; transition: background .12s, color .12s !important; }
.mud-nav-link:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.mud-nav-link.active { background: var(--p-50) !important; color: var(--p-700) !important; }

/* ── MudChip ────────────────────────────────────────────────────────────────── */
.mud-chip {
  border-radius: var(--r-pill, 999px) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  height: auto !important;
  padding: 2px 8px !important;
  font-family: var(--f-sans) !important;
  border: 1px solid var(--line) !important;
}
.mud-chip-outlined { background: var(--surface-2) !important; color: var(--ink-2) !important; }

/* ── MudTabs ────────────────────────────────────────────────────────────────── */
.mud-tabs { background: transparent !important; }
.mud-tab-slider { background: var(--p-600) !important; height: 2px !important; }
.mud-tab-panel  { padding: 16px 0 !important; }
.mud-tab        { text-transform: none !important; font-weight: 500 !important; font-family: var(--f-sans) !important; color: var(--ink-3) !important; min-width: 80px !important; }
.mud-tab.mud-tab-active { color: var(--p-600) !important; }
.mud-tab:hover  { color: var(--ink) !important; }

/* ── MudDialog ──────────────────────────────────────────────────────────────── */
.mud-dialog {
  border-radius: var(--r-3, 14px) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-3) !important;
}
.mud-dialog-title    { font-family: var(--f-serif) !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: var(--ink) !important; padding: 20px 24px 12px !important; }
.mud-dialog-content  { padding: 8px 24px 16px !important; }
.mud-dialog-actions  { padding: 8px 24px 16px !important; gap: 8px !important; }
.mud-overlay         { backdrop-filter: none !important; background: transparent !important; }
/* Strong enough to visually separate dialogs from the (very light) page behind. */
.mud-overlay-dark    { background: rgba(20,24,40,0.48) !important; }

/* ── MudSnackbar ────────────────────────────────────────────────────────────── */
.mud-snackbar { border-radius: var(--r-2, 10px) !important; box-shadow: var(--sh-3) !important; font-family: var(--f-sans) !important; }

/* ── MudAlert ───────────────────────────────────────────────────────────────── */
.mud-alert { border-radius: var(--r-2, 10px) !important; font-family: var(--f-sans) !important; }

/* ── MudPagination ──────────────────────────────────────────────────────────── */
.mud-pagination-item .mud-icon-button { border-radius: 6px !important; }
.mud-pagination-item .mud-icon-button.mud-pagination-item-selected {
  background: var(--p-600) !important;
  color: white !important;
}

/* ── MudMenu ────────────────────────────────────────────────────────────────── */
.mud-menu-paper { border-radius: var(--r-2) !important; border: 1px solid var(--line) !important; box-shadow: var(--sh-3) !important; }
.mud-list-item { font-size: 13.5px !important; font-family: var(--f-sans) !important; }
.mud-list-item:hover { background: var(--surface-2) !important; }

/* ── MudTooltip ─────────────────────────────────────────────────────────────── */
.mud-tooltip { border-radius: var(--r-1, 6px) !important; font-size: 12px !important; font-family: var(--f-sans) !important; }

/* ── MudBreadcrumbs ─────────────────────────────────────────────────────────── */
.mud-breadcrumb-item a { color: var(--p-600) !important; font-size: 12px !important; }
.mud-breadcrumb-separator { color: var(--ink-4) !important; }

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
.mud-drawer ::-webkit-scrollbar { width: 6px; }
.mud-drawer ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

/* ── MudDatePicker ──────────────────────────────────────────────────────────── */
/* Selected day: white text on primary-blue background */
.mud-button-day.mud-selected,
.mud-button-day.mud-selected:hover,
.mud-button-day.mud-selected:focus {
  color: #fff !important;
  background-color: var(--p-600) !important;
}
/* Today (unselected): bold + primary text, no gray wash */
.mud-button-day.mud-today:not(.mud-selected) {
  color: var(--p-600) !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--p-400) !important;
  background: transparent !important;
}
/* Default day text: use full-opacity ink so nothing looks grayed-out */
.mud-button-day {
  color: var(--ink) !important;
  font-family: var(--f-sans) !important;
}
/* Disabled days (outside current month) */
.mud-button-day:disabled,
.mud-button-day[disabled] {
  color: var(--ink-4) !important;
  opacity: 0.45 !important;
}
/* Day-of-week header row */
.mud-picker-calendar-week .mud-picker-calendar-week-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: var(--ink-3) !important;
  text-transform: uppercase !important;
}
/* Month/year navigation buttons */
.mud-picker-calendar-header-switch .mud-button-root {
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-family: var(--f-sans) !important;
  text-transform: none !important;
}
/* Picker popup container */
.mud-picker-calendar-container {
  font-family: var(--f-sans) !important;
}
/* Year/month picker items */
.mud-picker-year,
.mud-picker-month {
  color: var(--ink) !important;
  font-family: var(--f-sans) !important;
}
.mud-picker-year.mud-picker-year-selected,
.mud-picker-month.mud-picker-month-selected {
  color: #fff !important;
  background-color: var(--p-600) !important;
  border-radius: var(--r-sm) !important;
}