/**
 * Form Validation Styling
 * Consistent error and success message styling across all forms
 */

/* Alert Messages */
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
}

.alert i {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.alert-success {
    background-color: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.alert-error {
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.alert-warning {
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.alert-info {
    background-color: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
}

/* Form Field Errors */
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: #dc2626 !important;
    border-width: 2px !important;
}

.form-control.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* Error Message Text */
.text-red-600 {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.text-red-600 p {
    margin: 0.25rem 0;
}

/* Success State */
.form-control.is-valid,
input.is-valid,
textarea.is-valid,
select.is-valid {
    border-color: #16a34a !important;
    border-width: 2px !important;
}

/* Field Labels with Required Indicator */
label .text-red-500 {
    color: #dc2626;
    font-weight: 600;
}

/* Error Icon */
.error-icon {
    color: #dc2626;
    margin-right: 0.5rem;
}

/* Success Icon */
.success-icon {
    color: #16a34a;
    margin-right: 0.5rem;
}

/* Highlight Invalid Fields on Focus */
.form-control:invalid:not(:placeholder-shown) {
    border-color: #fca5a5;
}

.form-control:valid:not(:placeholder-shown) {
    border-color: #6ee7b7;
}

/* Non-field Errors (Form-level errors) */
.non-field-errors {
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.non-field-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.non-field-errors li {
    margin: 0.25rem 0;
}

/* Accessible Error Messages */
[aria-invalid="true"] {
    border-color: #dc2626;
}

[aria-describedby] + .text-red-600 {
    display: block;
}

/* Loading State for Submit Buttons */
button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

button[disabled]:hover {
    transform: none !important;
}

/* Responsive Error Messages */
@media (max-width: 767px) {
    .alert {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    .text-red-600 {
        font-size: 0.8125rem;
    }
}

/* Animation for Error Messages */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.alert-error {
    animation: shake 0.5s ease-in-out;
}

/* Focus Ring for Accessibility */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.form-control.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
    outline-color: #dc2626;
}

/* Error Summary at Top of Form */
.error-summary {
    background-color: #fee2e2;
    border: 2px solid #dc2626;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.error-summary h3 {
    color: #991b1b;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.error-summary ul {
    list-style: disc;
    padding-left: 1.5rem;
    color: #991b1b;
}

.error-summary li {
    margin: 0.25rem 0;
}

/* Success Message Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success {
    animation: slideDown 0.3s ease-out;
}

/* Tooltip for Validation Hints */
.validation-hint {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
    display: block;
}

.validation-hint.error {
    color: #dc2626;
}

.validation-hint.success {
    color: #16a34a;
}

/* Character Counter Styling */
.char-counter {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: right;
    margin-top: 0.25rem;
}

.char-counter.over-limit {
    color: #dc2626;
    font-weight: 600;
}

/* Required Field Indicator */
.required-indicator {
    color: #dc2626;
    margin-left: 0.25rem;
}

/* Form Section Errors */
.form-section.has-errors {
    border-left: 4px solid #dc2626;
    padding-left: 1rem;
}

/* Inline Validation Icons */
.validation-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.validation-icon.valid {
    color: #16a34a;
}

.validation-icon.invalid {
    color: #dc2626;
}