/**
 * Elite Tactician Design System - Forms v3
 * Bottom-border inputs, surface backgrounds
 *
 * Version: 3.0
 * Date: March 2026
 */

/* =========================================
   BASE INPUT - Bottom border only
   ========================================= */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    background-color: var(--et-surface-container-low);
    border: none;
    border-bottom: 2px solid rgba(197, 198, 205, 0.25);
    border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

/* Focus state - primary bottom accent */
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-bottom-color: var(--et-primary);
    box-shadow: none;
    background-color: var(--et-surface-container-lowest);
}

/* Hover state */
.form-input:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled),
.form-textarea:hover:not(:focus):not(:disabled) {
    border-bottom-color: rgba(197, 198, 205, 0.4);
}

/* =========================================
   LABELS - Body font, muted
   ========================================= */
.form-label {
    font-family: var(--font-body);
    color: var(--et-on-surface-variant);
}

/* =========================================
   VALIDATION STATES
   ========================================= */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid,
.is-valid .form-input,
.is-valid .form-select,
.is-valid .form-textarea {
    border-bottom-color: var(--et-success);
}

.form-input.is-valid:focus,
.form-select.is-valid:focus,
.form-textarea.is-valid:focus,
.is-valid .form-input:focus,
.is-valid .form-select:focus,
.is-valid .form-textarea:focus {
    border-bottom-color: var(--et-success);
    box-shadow: none;
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
.is-invalid .form-input,
.is-invalid .form-select,
.is-invalid .form-textarea {
    border-bottom-color: var(--et-error);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus,
.is-invalid .form-input:focus,
.is-invalid .form-select:focus,
.is-invalid .form-textarea:focus {
    border-bottom-color: var(--et-error);
    box-shadow: none;
}

/* =========================================
   CHECKBOX & RADIO - Crimson checked state
   ========================================= */
.form-check-input:checked {
    background-color: var(--et-secondary);
    border-color: var(--et-secondary);
}

.form-check-input:focus {
    border-color: var(--et-secondary);
    box-shadow: 0 0 0 3px rgba(182, 21, 46, 0.15);
}

/* =========================================
   TOGGLE SWITCH - Crimson checked
   ========================================= */
.form-switch-input:checked {
    background-color: var(--et-secondary);
}

.form-switch-input:focus {
    box-shadow: 0 0 0 3px rgba(182, 21, 46, 0.15);
}

/* =========================================
   FIELDSET - Ghost border
   ========================================= */
.form-fieldset {
    border: var(--ghost-border);
}

/* =========================================
   INPUT ADDON - Surface hierarchy
   ========================================= */
.input-addon {
    background: var(--et-surface-container);
    border: none;
    border-bottom: 2px solid rgba(197, 198, 205, 0.25);
}