/**
 * Form Validation Styles
 * Provides visual feedback for form validation states
 */

/* ============================================
   FIELD STATES
   ============================================ */

/* Error State */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: var(--error-color, #dc3545);
    background-color: var(--error-bg, #fff5f5);
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus,
.form-group.has-error select:focus,
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
    border-color: var(--error-color, #dc3545);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
    outline: none;
}

/* Success State */
.form-group.has-success input,
.form-group.has-success textarea,
.form-group.has-success select,
input.is-valid,
textarea.is-valid,
select.is-valid {
    border-color: var(--success-color, #28a745);
    background-color: var(--success-bg, #f0fff4);
}

.form-group.has-success input:focus,
.form-group.has-success textarea:focus,
.form-group.has-success select:focus,
input.is-valid:focus,
textarea.is-valid:focus,
select.is-valid:focus {
    border-color: var(--success-color, #28a745);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
    outline: none;
}

/* Warning State */
.form-group.has-warning input,
.form-group.has-warning textarea,
.form-group.has-warning select,
input.is-warning,
textarea.is-warning,
select.is-warning {
    border-color: var(--warning-color, #ffc107);
    background-color: var(--warning-bg, #fffbf0);
}

.form-group.has-warning input:focus,
.form-group.has-warning textarea:focus,
.form-group.has-warning select:focus,
input.is-warning:focus,
textarea.is-warning:focus,
select.is-warning:focus {
    border-color: var(--warning-color, #ffc107);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
    outline: none;
}

/* ============================================
   ERROR MESSAGE STYLING
   ============================================ */

.field-error {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--error-color, #dc3545);
    line-height: 1.4;
    animation: slideDown 0.2s ease-out;
}

.field-error.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error icon before message (optional) */
.field-error::before {
    content: '\f06a'; /* Font Awesome exclamation-circle icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 0.375rem;
    font-size: 0.8125rem;
}

/* ============================================
   SUCCESS INDICATOR (Optional)
   ============================================ */

.form-group.has-success::after {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0.75rem;
    top: 2.25rem;
    color: var(--success-color, #28a745);
    font-size: 1rem;
    pointer-events: none;
}

.form-group.has-success {
    position: relative;
}

/* Adjust input padding when success indicator is present */
.form-group.has-success input,
.form-group.has-success textarea,
.form-group.has-success select {
    padding-right: 2.5rem;
}

/* ============================================
   FORM GROUP ENHANCEMENTS
   ============================================ */

.form-group {
    margin-bottom: 1.25rem;
    position: relative;
    transition: all 0.2s ease;
}

/* Label styling with required indicator */
.form-group label.required::after {
    content: ' *';
    color: var(--error-color, #dc3545);
    font-weight: bold;
}

/* Help text styling */
.form-help,
.help-text {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-muted, #6c757d);
    line-height: 1.4;
}

/* Error message takes precedence over help text */
.form-group.has-error .form-help {
    display: none;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Ensure error messages are accessible */
.field-error[role="alert"] {
    position: relative;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .field-error {
        font-weight: 600;
        border-left: 3px solid var(--error-color, #dc3545);
        padding-left: 0.5rem;
    }
    
    input.is-invalid,
    textarea.is-invalid,
    select.is-invalid {
        border-width: 2px;
        border-style: solid;
    }
    
    input.is-valid,
    textarea.is-valid,
    select.is-valid {
        border-width: 2px;
        border-style: solid;
    }
}

/* Focus visible for keyboard navigation */
input.is-invalid:focus-visible,
textarea.is-invalid:focus-visible,
select.is-invalid:focus-visible {
    outline: 2px solid var(--error-color, #dc3545);
    outline-offset: 2px;
}

input.is-valid:focus-visible,
textarea.is-valid:focus-visible,
select.is-valid:focus-visible {
    outline: 2px solid var(--success-color, #28a745);
    outline-offset: 2px;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    .field-error {
        font-size: 0.8125rem;
        margin-top: 0.25rem;
    }
    
    .form-group.has-success::after {
        top: 2.5rem;
        right: 0.5rem;
        font-size: 0.875rem;
    }
    
    .form-group.has-success input,
    .form-group.has-success textarea,
    .form-group.has-success select {
        padding-right: 2rem;
    }
}

/* ============================================
   THEME SUPPORT
   ============================================ */

[data-theme="high-contrast"] {
    --error-color: #ff0000;
    --success-color: #00aa00;
    --warning-color: #ff8800;
    --error-bg: #fff5f5;
    --success-bg: #f0fff4;
    --warning-bg: #fffbf0;
}

[data-theme="light"] {
    --error-color: #dc3545;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --error-bg: #fff5f5;
    --success-bg: #f0fff4;
    --warning-bg: #fffbf0;
}

/* ============================================
   ANIMATION ENHANCEMENTS
   ============================================ */

/* Smooth transition for state changes */
.form-group input,
.form-group textarea,
.form-group select {
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Prevent flash of unstyled validation */
.form-group:not(.has-error):not(.has-success):not(.has-warning) input:invalid {
    box-shadow: none;
}

/* ============================================
   CHECKBOX AND RADIO VALIDATION
   ============================================ */

.form-group.has-error input[type="checkbox"],
.form-group.has-error input[type="radio"] {
    border-color: var(--error-color, #dc3545);
}

.form-group.has-success input[type="checkbox"],
.form-group.has-success input[type="radio"] {
    border-color: var(--success-color, #28a745);
}

/* Error message positioning for checkboxes/radios */
.form-group:has(input[type="checkbox"]) .field-error,
.form-group:has(input[type="radio"]) .field-error {
    margin-top: 0.5rem;
}

/* ============================================
   FILE INPUT VALIDATION
   ============================================ */

.form-group.has-error input[type="file"] {
    border: 2px dashed var(--error-color, #dc3545);
}

.form-group.has-success input[type="file"] {
    border: 2px dashed var(--success-color, #28a745);
}

/* ============================================
   DISABLED STATE
   ============================================ */

input:disabled.is-invalid,
textarea:disabled.is-invalid,
select:disabled.is-invalid,
input:disabled.is-valid,
textarea:disabled.is-valid,
select:disabled.is-valid {
    background-color: var(--disabled-bg, #e9ecef);
    border-color: var(--border-color, #ced4da);
    opacity: 0.6;
}