/*
 * 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, .form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-32px);

    .notification {
        width: 100%;
        padding: 0;
    }

    .form-title {
        h1 {
            margin: 0;
        }
    }

    .form-header {
        display: flex;
        padding-bottom: var(--space-8px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--greyE8);
    }

    .form-inputs {
        display: flex;
        flex-direction: column;
        gap: var(--space-16px);
        align-self: stretch;
        align-items: flex-start;

        .section-header {
            display: flex;
            padding: 8px 0 8px 0;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            color: var(--black, #000);
            font-size: var(--space-12px);
            font-style: normal;
            font-weight: 700;
            line-height: var(--space-16px);
            text-transform: uppercase;

            .section-header-line {
                height: 0;
                border: 1px solid var(--greyD9);
            }
        }

        .form-input-group {
            display: flex;
            align-items: flex-start;
            gap: 30px;
            align-self: stretch;
        }

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

            .form-input-label-optional {
                display: flex;
                flex-direction: row;
                gap: var(--space-8px);
                align-self: stretch;

                span {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 16px;
                }
            }

            label {
                font-size: 12px;
                font-weight: 700;
                line-height: 16px;
            }

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

            input[type="checkbox"] {
                width: var(--space-24px);
                height: var(--space-24px);
                min-width: var(--space-24px);
                border-radius: var(--space-4px);
            }

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

            .error-text {
                color: red;
            }

            .sub-label {
                color: var(--black55);
                font-size: var(--space-12px);
                font-style: normal;
                font-weight: 400;
                line-height: var(--space-16px);
            }

            .form-checkbox-container {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: var(--space-12px);

                label {
                    font-size: var(--space-17px);
                    font-weight: 400;
                    line-height: var(--space-28px);
                }
            }

            .radio-group {
                display: flex;
                flex-direction: column;
                gap: var(--space-16px);
                align-self: stretch;
                padding-bottom: var(--space-16px);

                .radio-group__item {
                    display: flex;
                    flex-direction: row;
                    gap: var(--space-16px);

                    input[type="radio"] {
                        width: var(--space-24px);
                        height: var(--space-24px);
                        min-width: var(--space-24px);
                        align-self: center;
                    }

                    .radio-group__item-label-container {
                        display: flex;
                        flex-direction: column;
                        gap: var(--space-8px);
                        align-self: stretch;

                        label {
                            font-size: var(--space-17px);
                            line-height: var(--space-24px);
                            font-weight: 400;
                        }
                    }
                }
            }
        }

        .summary-section {
            display: flex;
            flex-direction: column;
            gap: var(--space-4px);
            align-self: stretch;
        }

        .summary-item {
            display: flex;
            flex-direction: row;
            gap: var(--space-8px);
            align-self: stretch;
            align-items: center;
            padding: var(--space-8px) var(--space-16px);
            border-radius: var(--space-4px);
            background-color: var(--greyFA);
            border: 1px solid var(--greyE8);

            label {
                font-size: var(--space-12px);
                line-height: var(--space-16px);
                font-weight: 700;
                width: 42%;
                min-width: 42%;
            }
            span {
                font-size: var(--space-17px);
                line-height: var(--space-24px);
            }

            .summary-item-empty-value {
                color: var(--black55);
            }

            textarea {
                width: 100%;
                background-color: var(--greyE8);
                color: var(--black55);
                padding: var(--space-12px);
                border: 0;
                border-radius: var(--space-4px);
            }
        }

        .summary-edit-step {
            a {
                font-size: var(--space-12px);
                line-height: var(--space-16px);
                text-decoration: underline;
                display: flex;
                flex-direction: row;
                gap: var(--space-8px);
                align-self: stretch;
                align-items: center;

                i {
                    background-image: url("icons/pen.svg");
                    width: var(--space-16px);
                    min-width: var(--space-16px);
                    height: var(--space-16px);
                }
            }
        }
    }

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

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

        .form-actions {
            margin-bottom: 0;
        }


    }

    .search-and-filter {

        input {
            width: 50%;
        }

        select {
            width: 25%;
        }
    }

    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;

        &:disabled {
            color: #E5E5E5;
            background-color: #666666;
            cursor: not-allowed;
        }
    }

    button.btn-secondary {
        background-color: var(--white);
        color: var(--black);
        border: 1px solid var(--black);
        width: fit-content;

        &:disabled {
            color: var(--grey65);
            border-color: var(--grey65);
            cursor: not-allowed;
        }
    }

    a.btn-primary {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        padding: 11px var(--space-24px) 10px var(--space-24px);
        font-size: 20px;
        border-radius: var(--base-size);
        background-color: var(--black);
        color: var(--white);
        text-decoration: none;
        font-weight: 700;
    }

    a.btn-secondary {
        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;
    }
}

.small-form {
    max-width: 730px;
}