/**
 * OptimaDrywall Flow — shared form validation UX
 */

.form-error-summary {
    border-left: 4px solid #dc3545;
}

.app-form .app-field.is-field-invalid .form-control,
.app-form .app-field.is-field-invalid .form-select,
.app-form .form-control.is-invalid,
.app-form .form-select.is-invalid {
    border-color: #dc3545;
    background-color: #fff8f8;
}

.app-form .app-field.is-field-invalid .form-label,
.app-form .form-control.is-invalid + .invalid-feedback,
.app-form .invalid-feedback.d-block {
    color: #b02a37;
}

.app-form .form-control:focus,
.app-form .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.2);
}

.password-toggle-wrap .password-toggle-input {
    border-right: 0;
}

.password-toggle-wrap .password-toggle-btn {
    border-color: var(--border-color, #e5e7eb);
    color: var(--text-color, #1f2937);
    z-index: 4;
}

.password-toggle-wrap .password-toggle-btn:hover {
    background-color: var(--background-color, #f9fafb);
    color: var(--primary-color, #023f80);
}

.login-field.password-toggle-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.login-field.password-toggle-wrap .login-input {
    flex: 1 1 auto;
}

.app-form .form-control.is-invalid:focus,
.app-form .app-field.is-field-invalid .form-control:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}

.app-form .form-control.is-valid,
.app-form .app-field.is-field-valid .form-control {
    border-color: var(--brand-primary);
}

.app-form .app-field.field-focus-highlight .form-control,
.app-form .app-field.field-focus-highlight .form-select {
    animation: field-error-pulse 1.2s ease;
}

@keyframes field-error-pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .app-form .app-field.field-focus-highlight .form-control,
    .app-form .app-field.field-focus-highlight .form-select {
        animation: none;
        outline: 2px solid #dc3545;
        outline-offset: 2px;
    }
}