/* forms.css — GLOBALE Form-Feld Styles (Single Source of Truth)
 *
 * GOLDENE REGEL: Alle Formfelder im gesamten Projekt werden HIER gestyled.
 * Keine lokalen Overrides in Seiten-CSS. Keine !important in anderen Dateien.
 * Gleiche Felder == gleiches Design. Überall. Basta.
 *
 * !important wird hier bewusst eingesetzt, weil:
 * 1. Bootstrap-CDN-Defaults überschrieben werden müssen
 * 2. Inline-Styles in Legacy-Code überschrieben werden müssen
 * 3. Dies die EINZIGE Datei ist, die Form-Styles definieren darf
 */

/* =============================================
   Globale Form-Felder — gelten ÜBERALL, IMMER
   ============================================= */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
    border: 1px solid var(--grey-200) !important;
    border-radius:var(--radius) !important;
    padding:var(--sp-3) var(--sp-4) !important;
    font-size:var(--fs-md) !important;
    color: var(--grey-800) !important;
    background: var(--surface) !important;
    transition: border-color var(--dur-fast) !important;
    box-shadow: none;
    outline: none;
}
/* EINE Höhe für ALLE einzeiligen Controls (Input/Select/Picker/Color) — box-border, damit padding sie nicht
   auseinandertreibt. Textarea (mehrzeilig) ausgenommen. Behebt: Dropdown/Color/Input verschieden hoch. */
.form-control:not(textarea),
.form-select,
input[type="text"], input[type="email"], input[type="number"], input[type="url"],
input[type="tel"], input[type="password"], input[type="search"], input[type="date"],
select, .mage-picker-trigger, .mpp-trigger, .cc-color {
    height:var(--sz-36) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

/* Natives Browser-Lösch-X in Suchfeldern (blau, webkit) AUS — das Lösch-X liefert der Kern
   einheitlich (graues X). Zwei verschiedene X im selben Feld = zwei Designs für dieselbe Rolle. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--o) !important;
    outline: none;
    box-shadow: var(--focus) !important;
}

/* Input-group: restore Bootstrap border-radius handling (overridden by !important above) */


/* Der Picker-Trigger wird vom picker-Kernmodul gestylt (Formfeld-Look) — nicht hier. */

/* Quill WYSIWYG Editor Container — gleiche Borders wie alle Formfelder */
.ql-toolbar.ql-snow {
    border: 1px solid var(--grey-200) !important;
    border-radius:var(--radius) 2px 0 0 !important;
    background: var(--grey-50) !important;
}
.ql-container.ql-snow {
    border: 1px solid var(--grey-200) !important;
    border-radius:0 0 var(--radius) var(--radius) !important;
    border-top: none !important;
}
.ql-editor {
    font-size:var(--fs-md) !important;
    color: var(--grey-800) !important;
    min-height:var(--sz-80);
}
/* Quill Toolbar Buttons — quadratisch, abgerundete Corners */
.ql-toolbar.ql-snow .ql-formats button {
    width:var(--sz-28) !important;
    height:var(--sz-28) !important;
    padding:var(--sp-1) !important;
    border: 1px solid transparent !important;
    border-radius:var(--radius) !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--dur-fast) !important;
}
.ql-toolbar.ql-snow .ql-formats button:hover {
    background: var(--grey-100) !important;
    border-color: var(--grey-300) !important;
}
.ql-toolbar.ql-snow .ql-formats button.ql-active {
    background: var(--border) !important;
    border-color: var(--grey-300) !important;
}
/* Icon-Farben: immer dunkel, nie blau */
.ql-toolbar.ql-snow .ql-stroke {
    stroke: var(--grey-800) !important;
}
.ql-toolbar.ql-snow .ql-fill,
.ql-toolbar.ql-snow .ql-stroke.ql-fill {
    fill: var(--grey-800) !important;
}
.ql-toolbar.ql-snow .ql-picker-label {
    color: var(--grey-800) !important;
}
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: var(--ink) !important;
}
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill {
    fill: var(--ink) !important;
}
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
    color: var(--ink) !important;
}
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--ink) !important;
}

/* =============================================
   Mage-Field Layout — EIN Formular-Layout für das ganze System (Fenster UND Sidebar).
   Vorbild ist das Kontakt-Formular: Label LINKS (feste Spalte, rechtsbündig), Feld RECHTS,
   Hinweis unter dem Feld. Kein Modul entscheidet das selbst — Design::field() reicht.
   Gestapelt (Label über dem Feld) gibt es NUR noch in einer .mage-field-row (Filterzeile mit
   mehreren Feldern nebeneinander), sonst nirgends.
   ============================================= */
.mage-field { display: flex; align-items: flex-start; gap: var(--sp-8); margin-bottom: var(--sp-7); }
.mage-field:last-child { margin-bottom: 0; }
.mage-field-label { display: block; flex: 0 0 var(--sz-180); min-width: 0; overflow-wrap: anywhere; text-align: right;
                    padding-top: var(--sp-3); padding-right: var(--sp-6); margin-bottom: 0;
                    font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--grey-800); }
.mage-field-label .text-danger { color: var(--danger); }
/* Der Feld-Body (Control + Hinweis) ist die rechte Spalte — gedeckelt, ein Textfeld ist nie 2000 px breit. */
.mage-field-body { flex: 1; min-width: 0; max-width: var(--sz-500); }
/* Schalter-Felder: Label mittig zum Toggle (wie das Kontakt-Vorbild). */
.mage-field:has(> .mage-field-body > .mage-toggle) { align-items: flex-start; }
/* Label auf die Höhe der SCHALTER-Zeile setzen, nicht über Schalter + Hinweis zentrieren —
   sonst rutscht es bei einem Hinweis unter dem Schalter nach unten. */
.mage-field:has(> .mage-field-body > .mage-toggle) .mage-field-label { padding-top: 0; min-height: var(--sz-24); display: flex; align-items: center; justify-content: flex-end; }
/* Textwert statt Eingabefeld (Design::mono/muted/badge als Feldinhalt): auf die Zeile des Labels
   setzen — sonst hängt der Wert oben, das Label (padding-top) darunter. */
.mage-field-body > .txt-mono,
.mage-field-body > .txt-muted,
.mage-field-body > .badge-status,
.mage-field-body > .cc-row { display: inline-flex; align-items: center; min-height: calc(var(--sp-3) * 2 + 1.4em); }
/* Aktions-Button unter den Feldern: bündig zur Feld-Spalte (nicht unter den Labels). */
.mage-field + .mage-btn-add,
.mage-field + .btn-save,
/* Ein Hinweis ZWISCHEN zwei Feldern gehört ebenfalls in die Feld-Spalte („Zweite Bedingung (optional) …") —
   sonst steht er als loser Satz am linken Rand und die Label-Flucht wirkt gebrochen. */
.mage-field + .cc-hint,
.mage-field + .cc-row { margin-left: calc(var(--sz-180) + var(--sp-8)); }

/* SCHMALER Kontext (Anmelde-Karte, enge Panels): Wrapper `.cc-form-stack` stapelt Label über Feld.
   Das ist die EINZIGE erlaubte gestapelte Variante ausserhalb einer Feld-Zeile. */
.cc-form-stack .mage-field { display: block; }
.cc-form-stack .mage-field-label { flex: none; min-width: 0; text-align: left; padding: 0; margin-bottom: var(--sp-2); }
.cc-form-stack .mage-field-body { max-width: none; }
.cc-form-stack .mage-field + .cc-hint,
.cc-form-stack .mage-field + .cc-row { margin-left: 0; }

/* Feld-Zeile (Design::fieldRow): mehrere Felder NEBENEINANDER — Filterzeilen, Von/Bis, Adresse.
   Hier stapelt das Label über dem Feld (Platz), Inputs unten bündig — so steht ein Button (oder ein
   zweizeiliges Label) nie über/unter den anderen Inputs. */
.mage-field-row { display: flex; gap:var(--sp-7); align-items: flex-end; flex-wrap: wrap; }
.mage-field-row .mage-field { flex: 1; display: block; margin-bottom: 0 !important; }
.mage-field-row .mage-field-label { min-width: 0; text-align: left; padding: 0; margin-bottom: var(--sp-2); }
.mage-field-row .mage-field-body { max-width: none; }
.mage-field .form-control,
.mage-field .form-select { width: 100%; }
.mage-field .form-text { font-size:var(--fs-sm); color: var(--muted); margin-top:var(--sp-1); }

/* MagePicker-Trigger volle Breite in Modals und mage-field */
.modal .mage-picker-trigger,
.mage-field .mage-picker-trigger {
    width: 100%;
    max-width: none;
    margin-right: 0;
}

/* Field Hint (subtitle/description under inputs) */
.field-hint {
    display: block;   /* eigene Zeile unter dem Control — auch hinter einem inline-flex .cc-row */
    font-size:var(--fs-sm);
    color: var(--muted);
    margin-top:var(--sp-1);
    line-height: 1.4;
}

/* Button-Feld in einer .mage-field-row bündig zu den Inputs (unsichtbarer Label-Platzhalter) */
.mage-field-label.spacer{visibility:hidden;user-select:none;pointer-events:none}

/* =============================================
   Input-Zeile (Design::inputRow): mehrere Controls nebeneinander, je mit kleinem
   Sub-Label darüber — Adresse (Strasse/PLZ/Ort/Land), Vor-/Nachname. EIN Baustein,
   kein Modul baut sich das Grid selbst.
   ============================================= */
/* Feld-Zeile: bricht sie um (schmale Sidebar), muss der Abstand ZWISCHEN den Zeilen genauso
   sichtbar sein wie zwischen den Feldern — sonst kleben die Eingaben mal aneinander und stehen
   mal weit auseinander (Verbindungsdaten/Monitoring-Sidebar). Beschriftung bekommt Luft. */
.cc-input-row { display: flex; gap: var(--sp-4) var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.cc-input-cell { flex: 1 1 var(--sz-160); min-width: var(--sz-160); }
.cc-input-cell.cc-cell-sm { flex: 0 0 var(--sz-80); min-width: var(--sz-80); }
/* Knopf in einer Eingabezeile: die Zelle wächst mit ihrem Knopf. cc-cell-sm ist 80 px breit — ein Knopf
   „Hinzufügen" passt nicht hinein und ragte über die Zeile hinaus (Felder → Auswahlwerte, Florian 12.09.2026:
   „der Hinzufügen-Button ist verrutscht"). Greift für JEDE Zeile, auch wenn ein Modul cc-cell-sm wählt. */
.cc-input-cell.cc-cell-auto,
.cc-input-cell:has(> button, > a.mage-btn-add, > a.mage-btn-light) { flex: 0 0 auto; min-width: 0; }
.cc-input-sub { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-1); display: block; }

/* ── Radio-Gruppe + Schieberegler (Design::radio/range) ──────────────────────── */
.cc-radio-group { display: flex; flex-direction: column; gap:var(--sp-2); }
.cc-radio { display: inline-flex; align-items: center; gap:var(--sp-2); cursor: pointer; font-size: var(--fs-base); }
.cc-radio input { accent-color: var(--o); margin: 0; }
.cc-range { width: 100%; accent-color: var(--o); }

/* ── Empfänger-Feld mit Labels (Design::tokenField) ─────────────────────────────
   Jede fertige Adresse wird zum Label; geprüfte Adressen sind ruhig, fehlerhafte rot.
   Vorschläge hängen unter dem Feld und rollen bei vielen Treffern. */
.cc-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); position: relative;
             border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
             background: var(--surface); min-height: var(--sz-36); cursor: text; }
.cc-tokens:focus-within { border-color: var(--o); box-shadow: var(--focus); }
.cc-token-list { display: contents; }
.cc-token { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2);
            border-radius: var(--radius); font-size: var(--fs-sm); border: 1px solid var(--border); background: var(--grey-50); }
.cc-token-ok { border-color: var(--ok); color: var(--ok); }
.cc-token-bad { border-color: var(--danger); color: var(--danger); }
.cc-token-x { border: none; background: none; cursor: pointer; color: inherit; font-size: var(--fs-base); line-height: 1; padding: 0; }
.cc-token-input { flex: 1 1 var(--sz-120); min-width: var(--sz-120); border: none; outline: none; background: none;
                  font-size: var(--fs-base); color: var(--ink); }
/* Das innere Tipp-Feld ist KEIN eigenes Eingabefeld: der Rahmen gehört dem Wrapper (.cc-tokens). Die
   globale input[type=text]-Regel (Rahmen + Fokus-Ring) darf hier nicht greifen — sonst steckt ein Feld im Feld.
   Die globalen Feld-Regeln weiter oben setzen Rahmen/Radius/Polster/Höhe/Schrift mit !important (Altlast
   gegen Bootstrap-Reste) — eine Regel OHNE !important verliert dagegen, egal wie spezifisch sie ist.
   Deshalb hier ebenfalls !important: gleiche Waffe, höhere Spezifität, also gewinnt diese Regel. */
.cc-tokens input.cc-token-input, .cc-tokens input.cc-token-input:focus {
                  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
                  background: none !important; padding: var(--sp-1) 0 !important; outline: none !important;
                  height: auto !important; min-height: 0 !important; font-size: var(--fs-base) !important; }

/* ZEITPLAN-BAUKASTEN (Design::cronField): Häufigkeit + passende Teile in EINER Zeile, darunter der
   Cron-Ausdruck (mono, gedimmt solange der Baukasten ihn schreibt) und der Klartext. */
.cc-cron { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.cc-cron-build { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cc-cron-build .form-control, .cc-cron-build .form-select, .cc-cron-build .mage-picker-trigger { width: auto; min-width: var(--sz-120); }
.cc-cron-part { display: inline-flex; align-items: center; }
.cc-cron-part.cc-hidden { display: none; }
.cc-cron-expr { font-family: var(--mono); max-width: var(--sz-260); }
.cc-cron-expr-dim { color: var(--muted); }
.cc-cron-read { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.cc-token-typing-bad { color: var(--danger); }
.cc-token-sug { position: absolute; left: 0; top: 100%; margin-top: var(--sp-1); z-index: var(--z-popover);
                background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
                box-shadow: var(--shadow-md); min-width: var(--sz-280); max-height: var(--sz-240); overflow: auto; }
.cc-token-sugrow { display: flex; gap: var(--sp-3); width: 100%; text-align: left; border: none; background: none;
                   padding: var(--sp-2) var(--sp-4); cursor: pointer; font-size: var(--fs-sm); }
.cc-token-sugrow:hover { background: var(--grey-50); }
.cc-token-sugname { font-weight: var(--fw-bold); color: var(--ink); }
.cc-token-sugmail { color: var(--muted); }

/* Breite Such-Leiste (Design::searchBar) — EINE Zeile über einem Inhaltsbereich, Lupe links vor dem Feld,
   Fläche + Unterkante; ['sticky'=>true] bleibt beim Scrollen oben stehen. */
.cc-searchbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-8);
                background: var(--surface); border-bottom: 1px solid var(--grey-300); }
.cc-searchbar.cc-searchbar-sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
.cc-searchbar > .cc-searchbar-ico { color: var(--muted); font-size: var(--fs-lg); flex: 0 0 auto; }
.cc-searchbar > .cc-searchbar-input { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); }