/* Formulare — ein Raster für alle Eingabemasken (Konfiguration, Stammdaten).

   Ein Feld ist ein <label> mit drei Teilen: Titel, Bedienelement, optionaler
   Hilfetext. Das Raster sitzt auf dem <label> (Titelspalte | Feldspalte) und
   die Spaltenbreiten kommen als Variablen vom <form> — deshalb beginnen alle
   Bedienelemente eines Formulars an derselben Kante, egal wie lang ein Titel
   oder wie hoch der Hilfetext darüber ist. Vorher war .settings-form eine
   umbrechende Flex-Reihe: jedes <small> machte sein Feld höher und schob die
   ganze Zeile aus der Flucht.

   Der Titel ist ein blosser Textknoten und wird vom Grid als anonymes Item in
   Spalte 1 gelegt; alle *Element*-Kinder wandern explizit in Spalte 2. Darum
   stehen hier durchweg Kind-Selektoren (>) — verschachtelte Labels
   (.checkbox-inline in .webhook-events, .candidates) bleiben unberührt. */

input, select {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: inherit;
  font-size: .95rem;
  /* Höhe = Zeile + Polsterung; dieselben drei Werte trägt .combobox-trigger,
     damit ein Feld nicht springt, je nachdem ob es Liste oder Eingabe ist. */
  line-height: 1.4;
  padding: .55rem .75rem;
  margin-right: .5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select { cursor: pointer; }
input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* Gesperrtes Feld — im Bearbeiten-Modus der Stammdaten steht dort der Schlüssel
   der Zeile (Karte, MCC). Er bleibt sichtbar, damit die Maske vollständig ist,
   aber erkennbar unbedienbar: ihn zu ändern legte eine zweite Zeile an. */
input:disabled, select:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* Kästchen mit Text daneben — als Feldinhalt wie als Zeile in einer Liste. */
.checkbox-inline {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 400; color: var(--fg);
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
/* Kästchen tragen die Markenfarbe und nie die Input-Polsterung — sonst sitzen
   sie in einem 40px-Kasten und driften vom Text daneben weg. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--brand);
  width: auto; flex: none;
  margin: 0; padding: 0;
}

/* Die Spaltenmasse (--form-*) stehen in tokens.css: fix, sonst flüchtet nichts. */
.settings-form {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.settings-form > label {
  display: grid;
  grid-template-columns: var(--form-label-col) minmax(0, var(--form-field-col));
  column-gap: var(--form-gutter);
  row-gap: .25rem;
  align-items: center;
  /* Feldtitel wie Tabellenköpfe: UPPERCASE + letter-spacing (design.md §3). */
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
/* Alles Sichtbare rechts; der Titel-Textknoten bleibt allein in Spalte 1. */
.settings-form > label > * { grid-column: 2; min-width: 0; }

.settings-form > label > input,
.settings-form > label > select {
  width: 100%;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
/* Zahlenfelder (Minuten, Score) bleiben kurz — die linke Kante hält die
   Flucht, die Breite darf der Eingabe entsprechen. */
.settings-form > label > input[type="number"] { max-width: 8rem; }
.settings-form > label > .combobox { min-width: 0; }
.settings-form > label > button { justify-self: start; }

.settings-form > label > small {
  font-size: .8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
}

/* Absenden-Zeile: Trennlinie über die volle Breite, Knopf aber in der Flucht
   der Bedienelemente — deshalb Padding statt Margin. */
.settings-form > .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0 0 calc(var(--form-label-col) + var(--form-gutter));
  border-top: 1px solid var(--border);
}

/* Schmal: Titel über das Feld, Knopf an den linken Rand. */
@media (max-width: 720px) {
  .settings-form > label { grid-template-columns: minmax(0, 1fr); }
  .settings-form > label > * { grid-column: 1; }
  .settings-form > .form-actions { padding-left: 0; }
}

/* Breit: zwei Felder nebeneinander — und der Titel wandert dabei ÜBER das Feld.

   Gemessen, nicht geschätzt: bei 1200px Fenster ist eine Maske 839px breit, bei
   1600px 1239px. Zwei Spalten sind davon 403 bzw. 603px. Bliebe der Titel links
   (13rem + 1.5rem Rinne = 232px), hätte ein Feld bei 1200px noch 171px — und in
   dieser Spalte steht auch der Hilfetext, der hier oft drei Zeilen lang ist. Die
   Maske würde also höher statt kürzer, was den ganzen Zweck verfehlt. Gestapelt
   bekommt der Hilfetext 403px statt der 416px von vorher: gleich hoch, aber halb
   so viele Zeilen untereinander.

   Die Flucht der Bedienelemente, für die das Raster im <label> überhaupt da ist,
   kommt hier von der Spalte selbst — deshalb ist dieselbe Form richtig wie unter
   720px, aus dem umgekehrten Grund. */
@media (min-width: 1200px) {
  .settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    /* Sonst dehnt sich ein Feld ohne Hilfetext auf die Höhe seines Nachbarn und
       sein Bedienelement schwebt in der Mitte der Zeile. */
    align-items: start;
  }
  .settings-form > label { grid-template-columns: minmax(0, 1fr); }
  .settings-form > label > * { grid-column: 1; }
  /* Über die ganze Breite: die Absenden-Zeile (ihre Trennlinie trennt das
     Formular, nicht eine Spalte) und alles, was von Haus aus breit ist —
     Kästchenlisten, lange Adressen. */
  .settings-form > label.span-2 { grid-column: 1 / -1; }
  .settings-form > .form-actions {
    grid-column: 1 / -1;
    padding-left: 0;
  }
}

/* Inline-Filter in einer Toolbar (Transaktionen): Titel und Feld auf einer
   Linie mit den Knöpfen daneben. */
.toolbar label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.toolbar label select { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }