/* ══════════════════════════════════════════
   DRAINQ CLOUD — MudBlazor Overrides (SA-Design, Welle 2)
   Gleicht MudBlazor-Material-Formularelemente an den flachen SA-Look an.
   WICHTIG: Muss NACH MudBlazor.min.css und VOR drainq.css geladen werden.
   Farben ausschließlich über SA-Tokens (siehe drainq.css §3).
   MudBlazor 6.21 — kein MudGlobal.InputDefaultVariant (7.x), daher rein CSS.
══════════════════════════════════════════ */

/* ── Outlined Inputs: flache Border, Amber-Fokus ──
   Felder nutzen überwiegend Variant.Outlined; die Border sitzt auf dem
   <fieldset.mud-input-outlined-border>. Radius/Primary kommen schon aus dem
   MudTheme (W0); hier wird die unscharfe Default-Linie auf --border-strong
   gehoben und Hover/Fokus auf Amber gesetzt. */
.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--border-strong);
  border-radius: var(--radius);
  transition: border-color .12s;
}
.mud-input.mud-input-outlined:hover:not(.mud-disabled):not(.mud-error) .mud-input-outlined-border {
  border-color: var(--primary);
}
.mud-input.mud-input-outlined.mud-focused:not(.mud-error) .mud-input-outlined-border {
  border-color: var(--primary) !important;
}

/* Filled/Text-Varianten: Unterstrich auf Amber statt Mud-Default */
.mud-input.mud-input-filled:not(.mud-error):after,
.mud-input.mud-input-text:not(.mud-error):after {
  border-bottom-color: var(--primary);
}

/* Label im Fokus auf Amber (statt Mud-Standard) */
.mud-input-control.mud-focused:not(.mud-error) .mud-input-label {
  color: var(--primary);
}

/* ── Primär-Flächen lesbar: dunkler Text auf Amber ──
   (aus drainq.css W0 hierher konsolidiert, damit alle Mud-Overrides an
   einer Stelle liegen.) MudBlazor setzt auf Primary-Flächen sonst weißen
   Text → auf Amber unlesbar. */
.mud-button-filled-primary,
.mud-chip-filled.mud-chip-color-primary {
  color: var(--on-primary) !important;
}

/* ── Popover-/Dropdown-Flächen (Select, Autocomplete, Datepicker-Menüs) ── */
.mud-popover {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.mud-list-item:hover:not(.mud-selected-item) {
  background-color: var(--surface2);
}
.mud-list-item.mud-selected-item {
  background-color: var(--primary-container);
  color: var(--text);
}

/* ── Datepicker: Amber-Flächen mit dunklem Text ── */
.mud-picker-toolbar,
.mud-picker-calendar-header {
  color: var(--on-primary);
}
.mud-picker-calendar-day.mud-selected,
.mud-picker .mud-button-root.mud-button-filled-primary {
  color: var(--on-primary) !important;
}