/* ============================================================
   /data/css/ui/forms.css
   - Shared form control styling
   ============================================================ */

/* ============================================================
   Field wrappers
   ============================================================ */

.field {
    display: grid;
    gap: 6px;
}

.field label {
    color: var(--muted);
    font-weight: 650;
}

/* ============================================================
   Shared control base
   ============================================================ */

.input,
.select,
input,
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .22);
    color: var(--text);
    outline: none;
}

/* Keep custom select class behavior explicit */
.select,
select {
    appearance: none;
    -webkit-appearance: none;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* ============================================================
   Focus states
   ============================================================ */

.input:focus,
.select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(216, 103, 0, .55);
    box-shadow: 0 0 0 3px rgba(216, 103, 0, .16);
}

/* ============================================================
   Select options
   ============================================================ */

.select option,
select option {
    background: #1b1e24;
    color: #fff;
}