/* ============================================================
   Anolira — Layer B Mud overrides
   ------------------------------------------------------------
   Closes the gap between the typed MudTheme (Theming/AnoliraMudTheme.cs)
   and the design package. Mud's typed surface (palette + typography +
   layout + shadows) covers ~70% of the visual; the remaining 30% lives
   here as targeted CSS against Mud's deterministic .mud-* selectors.

   Tokens come from wwwroot/anolira-tokens.css. Inside the alt workspace
   (.an-frame[data-palette="alt"]) the same variables resolve to the
   Bone & Copper palette automatically.

   Load order: AFTER MudBlazor.min.css AND after anolira-tokens.css so
   our selectors win on equal specificity.
   ============================================================ */

/* ── Buttons ───────────────────────────────────────────────── */
.mud-button-root {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--rad-3);
}
.mud-button-filled.mud-button-filled-primary {
  background: var(--forest-900);
  color: #fff;
  box-shadow: var(--shd-1);
}
.mud-button-filled.mud-button-filled-primary:hover {
  background: var(--forest-800);
  box-shadow: var(--shd-2);
}
.mud-button-outlined {
  border-color: var(--border);
}
.mud-button-outlined:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
}
.mud-button-text:hover {
  background: var(--bg-elevated);
}
.mud-icon-button {
  border-radius: var(--rad-2);
}

/* ── Inputs ────────────────────────────────────────────────── */
.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--border);
  border-radius: var(--rad-3);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
  border-color: var(--ink-500);
}
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--forest-900);
  border-width: 1px;
  box-shadow: 0 0 0 3px rgba(31, 55, 46, 0.10);
}
.mud-input-label,
.mud-input-label-outlined {
  font-family: var(--font-body);
  color: var(--ink-500);
}
.mud-input-label.mud-focused {
  color: var(--forest-900);
}
.mud-input-helper-text {
  font-family: var(--font-body);
  color: var(--ink-500);
}

/* ── Cards / Paper ─────────────────────────────────────────── */
.mud-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-3);
}
.mud-paper.mud-elevation-0 { border: 1px solid var(--border-soft); }

/* ── Dialogs ───────────────────────────────────────────────── */
.mud-dialog-container .mud-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-4);
  box-shadow: var(--shd-pop);
}
.mud-dialog-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
}
.mud-dialog-content {
  color: var(--ink-900);
  padding: var(--sp-3) var(--sp-6);
}
.mud-dialog-actions {
  padding: var(--sp-3) var(--sp-6) var(--sp-5);
  gap: var(--sp-2);
}

/* ── Snackbar ──────────────────────────────────────────────── */
.mud-snackbar {
  font-family: var(--font-body);
  border-radius: var(--rad-3);
  border: 1px solid var(--border);
  box-shadow: var(--shd-3);
}

/* ── Tables ────────────────────────────────────────────────── */
.mud-table-root {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-3);
  overflow: hidden;
}
.mud-table-head .mud-table-cell {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.mud-table-body .mud-table-cell {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  border-bottom: 1px solid var(--border-soft);
}
.mud-table-body .mud-table-row:hover {
  background: var(--bg-elevated);
}
.mud-table-body .mud-table-row.mud-selected-item {
  background: var(--forest-50);
}

/* ── Chips ─────────────────────────────────────────────────── */
.mud-chip {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  border-radius: var(--rad-full);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--ink-900);
  letter-spacing: 0.02em;
}
.mud-chip.mud-chip-outlined {
  background: transparent;
}
.mud-chip.mud-chip-color-success { color: var(--forest-700); border-color: var(--forest-100); background: var(--forest-50); }
.mud-chip.mud-chip-color-warning { color: var(--warn-600);   border-color: var(--warn-100);    background: #FCF4DC; }
.mud-chip.mud-chip-color-error   { color: var(--danger-600); border-color: var(--danger-100); background: #FCE6E1; }
.mud-chip.mud-chip-color-info    { color: var(--info-600);   border-color: var(--info-100);   background: #E6EFF6; }

/* ── Tabs ──────────────────────────────────────────────────── */
.mud-tabs .mud-tab {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
}
.mud-tabs .mud-tab.mud-tab-active {
  color: var(--ink-900);
}
.mud-tabs-tabbar-inner .mud-tab-slider {
  background: var(--ink-900);
  height: 2px;
}
.mud-tabs-tabbar {
  border-bottom: 1px solid var(--border-soft);
}

/* ── Pagination ────────────────────────────────────────────── */
.mud-pagination-item {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  border-radius: var(--rad-2);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-900);
}
.mud-pagination-item.mud-pagination-item-selected,
.mud-pagination-item[aria-current="true"] {
  background: var(--forest-900);
  border-color: var(--forest-900);
  color: #fff;
}

/* ── Stepper ───────────────────────────────────────────────── */
.mud-stepper .mud-stepper-nav-connector {
  background: var(--border-soft);
}
.mud-stepper .mud-stepper-nav-step-completed .mud-stepper-nav-step-label-icon {
  background: var(--forest-700);
  color: #fff;
}
.mud-stepper .mud-stepper-nav-step-active .mud-stepper-nav-step-label-icon {
  background: var(--ink-900);
  color: #fff;
}
.mud-stepper .mud-stepper-nav-step-label-icon {
  background: var(--bg-elevated);
  color: var(--ink-500);
  border: 1px solid var(--border);
}

/* ── Menus / Popovers / Lists ──────────────────────────────── */
.mud-popover {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-3);
  box-shadow: var(--shd-3);
}
.mud-list-item:hover {
  background: var(--bg-elevated);
}
.mud-list-item.mud-selected-item {
  background: var(--forest-50);
  color: var(--ink-900);
}

/* ── Date picker ───────────────────────────────────────────── */
.mud-picker-content {
  background: var(--surface);
  border-radius: var(--rad-3);
}
.mud-picker-day.mud-picker-day-selected {
  background: var(--forest-900);
  color: #fff;
}
.mud-picker-day:hover {
  background: var(--bg-elevated);
}

/* ── Switch / Checkbox / Radio ─────────────────────────────── */
.mud-switch-base.mud-checked .mud-switch-thumb { background: var(--forest-900); }
.mud-switch-base.mud-checked + .mud-switch-track { background: var(--forest-700); }
.mud-checkbox.mud-checked .mud-icon-root { color: var(--forest-900); }
.mud-radio.mud-checked .mud-icon-root { color: var(--forest-900); }

/* ── Alerts ────────────────────────────────────────────────── */
.mud-alert {
  font-family: var(--font-body);
  border-radius: var(--rad-3);
  border: 1px solid var(--border);
}
.mud-alert.mud-alert-filled-success { background: var(--forest-50); color: var(--forest-900); border-color: var(--forest-100); }
.mud-alert.mud-alert-filled-warning { background: #FCF4DC;          color: var(--warn-600);   border-color: var(--warn-100); }
.mud-alert.mud-alert-filled-error   { background: #FCE6E1;          color: var(--danger-600); border-color: var(--danger-100); }
.mud-alert.mud-alert-filled-info    { background: #E6EFF6;          color: var(--info-600);   border-color: var(--info-100); }

/* ── Tooltip ───────────────────────────────────────────────── */
.mud-tooltip {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  background: var(--ink-900);
  color: var(--sand-50);
  border-radius: var(--rad-2);
}

/* ── Divider ───────────────────────────────────────────────── */
.mud-divider { border-color: var(--border-soft); }