/*
 * Native Formularfelder an das FraDi-Design-System angleichen — als statische
 * Datei geladen (wie richtext.css), damit kein Vite-Build nötig ist.
 *
 * Alle Farben aus den Theme-Tokens (hell/dunkel). Die Basis-Regeln nutzen
 * :where() (Spezifität 0), damit Utility-Klassen in den Views sie bei Bedarf
 * überschreiben können. Wichtig: native <select> und Checkboxen sehen sonst
 * nach Browser-Standard aus — das wird hier behoben.
 */

/* ---- Text-/Auswahl-/Mehrzeilenfelder: gemeinsame Optik ---- */
:where(
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="url"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="month"], input[type="time"], input[type="week"],
  textarea, select
) {
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md, 8px);
  line-height: 1.4;
}

/* Einzeilige Felder + Selects: einheitliche Höhe/Innenabstand. */
:where(
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="url"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="month"], input[type="time"], input[type="week"],
  select:not([multiple])
) {
  height: 40px;
  padding: 0 0.75rem;
}

:where(textarea) {
  padding: 0.5rem 0.75rem;
  min-height: 88px;
}

:where(
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="url"], input[type="tel"],
  input[type="number"], textarea
)::placeholder {
  color: var(--color-placeholder, var(--color-text-muted));
}

/* Fokus: farbiger Rahmen (der globale Fokusring aus base.css liegt darüber). */
:where(input, textarea, select):focus {
  border-color: var(--color-accent);
}

:where(input, textarea, select):disabled,
:where(input, textarea, select)[readonly] {
  opacity: 0.7;
}

/* ---- <select>: Browser-Standardpfeil ersetzen ---- */
select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 12px;
}
/* Mehrfach-Auswahl behält Listendarstellung, nur die Optik angleichen. */
select[multiple] {
  padding: 0.25rem;
}

/* ---- Checkboxen / Radios: in Akzentfarbe (nativ, aber themengerecht) ----
   Nur accent-color/cursor — keine Größen, um ds-switch/ds-checkbox
   (appearance:none) nicht zu stören; accent-color ist dort wirkungslos. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* ---- Datei-Auswahl: Button-Teil an ds-btn angleichen ---- */
input[type="file"] {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text);
}
input[type="file"]::file-selector-button {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md, 8px);
  padding: 0 0.75rem;
  height: 32px;
  margin-right: 0.75rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--color-bg-subtle);
}