/*
 * form.css
 *
 * Dieses Stylesheet enthält alle relevanten CSS-Definitionen
 * für die Formularelemente der Anwendung.
 *
 * Enthaltene Elemente:
 *  - Formularlayout und -container
 *  - Eingabefelder (input, textarea, select)
 *  - Beschriftungen (label)
 *  - Schaltflächen (button, submit, reset)
 *  - Validierungszustände (gültig, ungültig, Fehlermeldungen)
 *  - Checkboxen und Radio-Buttons
 *  - Formulargruppen und Abstände
 */

.admin-form {
    max-width: 730px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-32px);

    .notification {
        width: 100%;
        padding: 0;
    }
    .form-title {
        h1 {
            margin: 0;
        }
    }

    .form-inputs {
        display: flex;
        flex-direction: column;
        gap: var(--base-size);

        .form-input-row {
            display: flex;
            flex-direction: column;
            gap: 4px;

            label {
                font-size: 16px;
                font-weight: bold;
            }

            input,
            textarea {
                padding: var(--space-12px);
                border: 1px solid var(--black55);
                border-radius: 4px;
                font-size: 18px;
                font-family: inherit;
            }

            input {
                &:read-only {
                    background-color: var(--blackF0);
                }
            }

            .error-text {
                color: red;
            }
        }
    }

    .form-actions {
        display: flex;
        flex-direction: row;
        gap: var(--space-16px);
        margin-bottom: var(--space-16px);
    }

    button {
        padding: 11px var(--space-24px) 10px var(--space-24px);
        font-size: 20px;
        border-radius: var(--base-size);
        border: none;
        cursor: pointer;
    }

    button.btn-primary {
        background-color: var(--black);
        color: var(--white);
        font-weight: bold;
    }

    a.back-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 11px var(--space-24px) 10px var(--space-24px);
        font-size: 20px;
        border-radius: var(--base-size);
        border: 1px solid var(--black55);
        background-color: var(--white);
        color: var(--black);
        text-decoration: none;
    }
}