/* ============================================================
   05-FORMS.CSS
   Formulare, Inputs, Labels, Textareas, Selects (Core)
   ------------------------------------------------------------
   Plattform-unabhängige Form-Styles für native HTML-Elemente
   und eigene .cd-* Klassen.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. LABELS
   ──────────────────────────────────────────────────────────── */

label {
    display: block;
    font-family: var(--cd-font-family);
    font-size: var(--cd-fs-small);
    font-weight: var(--cd-fw-semibold);
    color: var(--cd-color-text);
    margin-bottom: var(--cd-space-2xs);
}


/* ────────────────────────────────────────────────────────────
   2. INPUTS, TEXTAREAS, SELECTS — Basis-Style
   ──────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select,
.cd-input {

    display: block;
    width: 100%;
    padding: 0.75em 1em;

    font-family: var(--cd-font-family);
    font-weight: var(--cd-fw-medium);
    font-size: var(--cd-fs-body);
    line-height: var(--cd-lh-normal);
    color: var(--cd-color-text);

    background-color: var(--cd-color-bg);
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius-md);

    transition:
        border-color var(--cd-transition-base),
        box-shadow var(--cd-transition-base);

    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
}


/* ────────────────────────────────────────────────────────────
   3. PLACEHOLDER
   ──────────────────────────────────────────────────────────── */

input::placeholder,
textarea::placeholder {
    color: var(--cd-color-text-muted);
    opacity: 1;
}


/* ────────────────────────────────────────────────────────────
   4. FOCUS-STATE — Koral-Ring
   ──────────────────────────────────────────────────────────── */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
.cd-input:focus {
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 3px var(--cd-color-primary-tint);
}


/* ────────────────────────────────────────────────────────────
   5. TEXTAREA
   ──────────────────────────────────────────────────────────── */

textarea {
    min-height: 8em;
    resize: vertical;
}


/* ────────────────────────────────────────────────────────────
   6. SELECT — eigener Pfeil (Navy)
   ──────────────────────────────────────────────────────────── */

select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23004266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    padding-right: 2.5em;
    cursor: pointer;
}


/* ────────────────────────────────────────────────────────────
   7. CHECKBOXEN & RADIO-BUTTONS
   ──────────────────────────────────────────────────────────── */

input[type="checkbox"],
input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    accent-color: var(--cd-color-primary);
    cursor: pointer;
    margin-right: var(--cd-space-2xs);
    vertical-align: middle;
}


/* ────────────────────────────────────────────────────────────
   8. FIELDSET & LEGEND
   ──────────────────────────────────────────────────────────── */

fieldset {
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius-md);
    padding: var(--cd-space-md);
    margin: 0 0 var(--cd-space-md) 0;
}

legend {
    font-weight: var(--cd-fw-semibold);
    padding: 0 var(--cd-space-xs);
    color: var(--cd-color-text);
}


/* ────────────────────────────────────────────────────────────
   9. FORM-ABSTÄNDE & LAYOUT-KLASSEN
   ──────────────────────────────────────────────────────────── */

form > * + * {
    margin-top: var(--cd-space-md);
}

.cd-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-2xs);
}

.cd-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cd-space-md);
}

@media (max-width: 640px) {
    .cd-form-row {
        grid-template-columns: 1fr;
    }
}


/* ────────────────────────────────────────────────────────────
   10. VALIDIERUNGS-ZUSTÄNDE
   ──────────────────────────────────────────────────────────── */

input:user-invalid,
textarea:user-invalid,
select:user-invalid {
    border-color: #DC3545;
}

input:user-invalid:focus,
textarea:user-invalid:focus,
select:user-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.cd-input--error {
    border-color: #DC3545;
}

.cd-form-message--error {
    color: #DC3545;
    font-size: var(--cd-fs-small);
    margin-top: var(--cd-space-2xs);
}

.cd-form-message--success {
    color: #28A745;
    font-size: var(--cd-fs-small);
    margin-top: var(--cd-space-2xs);
}