/* components/forms.css */

.form-group {
    margin-bottom: 1.2rem;
}

.form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--color-text);
}

/* Vollbreites Formularelement (z.B. in Modals, Verwaltungsseiten) */
.form-control {
    width: 100%;
    height: 48px;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: var(--font-body);
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.form-control::placeholder {
    color: var(--color-text-light);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}

textarea.form-control {
    height: auto;
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

/* Begrenztes Formularelement (z.B. in Listen, schmaleren Bereichen) */
.form-input {
    width: 100%;
    max-width: 400px;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: var(--font-body);
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    transition: all 0.25s ease;
    display: block;
    box-sizing: border-box;
}

.form-input::placeholder {
    color: var(--color-text-light);
}

/* Vollbreite Variante (z.B. Suche, Verwaltungsseiten) */
.form-input.full-width,
.search-input {
    max-width: none;
    width: 100%;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}

.form-input:disabled,
.form-input[readonly] {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select-Elemente (gleiche Darstellung wie form-input) */
.form-select {
    width: 100%;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: var(--font-body);
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    transition: all 0.25s ease;
    box-sizing: border-box;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}

/* Formular-Aktionen (Button-Zeile am Ende von Formularen) */
.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
}

/* Fehlermeldung unter Formularfeldern */
.form-error {
    color: var(--color-danger);
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

/* Custom Checkbox Styling */
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    gap: 0;
}

.form-checkbox {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-right: 10px;
    position: relative;
    background: var(--color-white);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.form-checkbox:checked + .checkmark {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-checkbox:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label:hover .checkmark {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}

/* Checkbox-Gruppe (für mehrere Checkboxen nebeneinander) */
.form-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Abschnitts-Container in Formular-Editoren (weißes Card-Panel) */
.form-section {
    background: var(--color-white);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

/* ── Form-Layout: Zeilen mit mehreren Eingabefeldern nebeneinander ── */
.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--color-text);
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border-light);
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-group--grow {
    flex: 1;
}

.form-group--small {
    width: 120px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }

    .form-group--small {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Zustimmungs-Checkboxen (.consent-checkbox / .consent-intro)

   EINE zentrale Definition fuer alle „Haken setzen + bestaetigen"-Stellen
   (Billing-Wizard, Import-Wizard, Cockpit-„Rechtliches"-AVV). Global ueber
   base.html geladen — daher ueberall verfuegbar, ohne pro Seite ein
   Stylesheet einzubinden.

   Jede Zustimmung ist eine eigene, klar abgegrenzte Box (gestapelt
   untereinander), damit auf einen Blick erkennbar ist, wo der Haken
   gesetzt werden muss. Die Checkbox ist bewusst groesser und nutzt die
   Primaerfarbe; der angehakte Zustand hebt die Box hervor.
--------------------------------------------------------------------------- */
.consent-intro {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    cursor: pointer;
    line-height: 1.5;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.consent-checkbox:last-of-type {
    margin-bottom: 0;
}

.consent-checkbox:hover {
    border-color: var(--color-primary);
}

.consent-checkbox:has(input[type="checkbox"]:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.consent-checkbox input[type="checkbox"] {
    margin-top: 0.1rem;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Kurze, fette Kernaussage als erste Zeile; die ausfuehrliche
   Rechtsformulierung folgt darunter. */
.consent-checkbox span strong {
    display: block;
    margin-bottom: 0.15rem;
}

.consent-checkbox a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}