/* forms.css — Gemeinsame Validierungs-Styles.
   Verbindliche Spec: docs/design/forms.md (TICKET-021).
   Scope: gilt fuer alle Formulare (Planungs-Modal, Login, zukuenftige).
   Seiten-spezifische CSS-Dateien duerfen diese Klassen scopen, aber nicht ueberschreiben. */

/* -- Form-level Container (oben im Formular) ------------------------------- */

.form-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.4;
}

.form-error[hidden] {
    display: none;
}

/* Icon-Praefix ueber ::before — kein reines Farbcoding (A11y).
   Verwendet "!" als schlankes, font-agnostisches Bedeutungssignal. */
.form-error::before {
    content: "!";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--color-danger);
    color: var(--color-text-inverse);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

.form-error__text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/* -- Severity-Varianten (vorbereitet, aktuell kein aktiver Use-Case) ------- */

.form-error--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.form-error--warning::before {
    background: var(--color-warning);
}

.form-error--info {
    background: var(--color-info-bg);
    color: var(--color-info);
    border-color: var(--color-info);
}

.form-error--info::before {
    background: var(--color-info);
    content: "i";
}

/* -- Sticky-Modifier fuer Modals ------------------------------------------- */

.form-error-sticky {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-top: 0;
}

/* -- Field-level Message --------------------------------------------------- */

.field-error {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-danger);
    min-height: 1em;
}

.field-error:empty {
    display: none;
}

/* Tab-Order: die Message darf keinen Fokus bekommen, der Fokus bleibt am Feld. */
.field-error[tabindex] {
    outline: none;
}

/* -- Input-Baseline (TICKET-026) ------------------------------------------
   Gemeinsame visuelle Sprache fuer alle Eingabefelder im Repo.
   Native Inputs (Block 2a), Kendo-Widget-Wrapper (Block 2b) und
   Kendo-Inner-Buttons (Block 2c) teilen sich Border/Radius/Hoehe/Padding/Font.
   Subtle Delta zwischen editierbar/readonly nur ueber den Hintergrund. */

/* Block 2a — Native Inputs Baseline. Kendo-Widget-Wrapper greifen denselben
   Look ueber 2b, damit ein readonly-<input> und ein editierbarer Kendo-DropDownList
   gleiche Hoehe/Border/Radius haben. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

input[readonly],
input:disabled,
select:disabled,
textarea[readonly],
textarea:disabled {
    background: #f8f9fa;
    cursor: not-allowed;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Block 2b — Kendo-Widget-Wrapper an Native-Input-Baseline angleichen.
   Scope: DropDownList, ComboBox, DatePicker, NumericTextBox.
   Kein AutoComplete / TimePicker / DateTimePicker / MultiSelect (kein Use-Case).
   Telerik UI for ASP.NET Core rendert je nach Widget-Typ mit `.k-input` ODER
   `.k-picker` als Wrapper-Modifier — DropDownList/ComboBox haben in dieser
   Version nur `.k-picker`, DatePicker zusaetzlich `.k-input`, NumericTextBox
   nur `.k-input`. Beide Pfade explizit listen. */
.k-dropdownlist.k-input,
.k-dropdownlist.k-picker,
.k-combobox.k-input,
.k-combobox.k-picker,
.k-datepicker.k-input,
.k-datepicker.k-picker,
.k-numerictextbox.k-input {
    min-height: 36px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.k-dropdownlist.k-input:focus-within,
.k-dropdownlist.k-picker:focus-within,
.k-combobox.k-input:focus-within,
.k-combobox.k-picker:focus-within,
.k-datepicker.k-input:focus-within,
.k-datepicker.k-picker:focus-within,
.k-numerictextbox.k-input:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Inner-Input erbt vom Wrapper — keine eigenen Borders/Radien, kein zweites Padding. */
.k-dropdownlist .k-input-inner,
.k-combobox .k-input-inner,
.k-datepicker .k-input-inner,
.k-numerictextbox .k-input-inner {
    padding: 6px 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--color-text);
    font: inherit;
}

/* Block 2c — Kendo-Widget-Inner-Buttons an .row-action-Sprache anlehnen
   (TICKET-023): transparent in Ruhe, brandlila auf Hover/Focus, kein eigener Border. */
.k-dropdownlist .k-input-button,
.k-combobox .k-input-button,
.k-datepicker .k-input-button,
.k-numerictextbox .k-spinner-increase,
.k-numerictextbox .k-spinner-decrease {
    background: transparent;
    color: var(--color-primary);
    border: 0;
    border-radius: 0;
    transition: background-color 120ms ease, color 120ms ease;
}

.k-dropdownlist .k-input-button:hover,
.k-combobox .k-input-button:hover,
.k-datepicker .k-input-button:hover,
.k-numerictextbox .k-spinner-increase:hover,
.k-numerictextbox .k-spinner-decrease:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.k-dropdownlist .k-input-button:focus-visible,
.k-combobox .k-input-button:focus-visible,
.k-datepicker .k-input-button:focus-visible,
.k-numerictextbox .k-spinner-increase:focus-visible,
.k-numerictextbox .k-spinner-decrease:focus-visible {
    outline: 0;
    box-shadow: var(--shadow-focus);
}

/* -- Feld-Modifikator (rote Border auf native Inputs und Kendo-Widgets) ---- */

input.field-invalid,
select.field-invalid,
textarea.field-invalid {
    border-color: var(--color-danger);
}

/* Kendo-Widgets: wenn der Widget-Wrapper die Klasse traegt, wird der innere
   k-input-Rahmen rot gezogen. Kendo setzt .k-invalid selbst nur sporadisch —
   wir spiegeln das ueber .field-invalid auf dem Wrapper-<span>. */
.field-invalid .k-input,
.field-invalid.k-input,
.field-invalid.k-picker,
.field-invalid .k-picker {
    border-color: var(--color-danger);
}

.field-invalid .k-input:focus-within,
.field-invalid.k-input:focus-within,
.field-invalid .k-picker:focus-within,
.field-invalid.k-picker:focus-within {
    box-shadow: 0 0 0 2px var(--color-danger-bg);
}

/* Native Inputs mit aria-invalid="true" bekommen ebenfalls rote Border —
   redundant mit .field-invalid, damit server-seitig gesetztes aria-invalid
   ohne JS sofort greift. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
}