/* Validation Error Styling */
/* Error Message Container */
#common-error-message,
.alert.alert-danger {
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #dc3545;
    font-weight: 500;
}

/* Form Control Error States */
.form-control.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-select.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Form Control Valid States */
.form-control.valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.1rem rgba(40, 167, 69, 0.15) !important;
}

.form-select.valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.1rem rgba(40, 167, 69, 0.15) !important;
}

/* TomSelect Error States - Enhanced with higher specificity */
.ts-wrapper.ts-wrapper.error .ts-control,
.ts-wrapper.ts-wrapper.error .ts-control.single,
.ts-wrapper.ts-wrapper.error .ts-control.multi,
.ts-wrapper.error .ts-control,
.ts-wrapper.error .ts-control.single,
.ts-wrapper.error .ts-control.multi {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff !important;
}

.ts-wrapper.ts-wrapper.error .ts-control:focus,
.ts-wrapper.ts-wrapper.error .ts-control.single:focus,
.ts-wrapper.ts-wrapper.error .ts-control.multi:focus,
.ts-wrapper.error .ts-control:focus,
.ts-wrapper.error .ts-control.single:focus,
.ts-wrapper.error .ts-control.multi:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff !important;
}

.ts-wrapper.ts-wrapper.error .ts-control.dropdown-active,
.ts-wrapper.ts-wrapper.error .ts-control.single.dropdown-active,
.ts-wrapper.ts-wrapper.error .ts-control.multi.dropdown-active,
.ts-wrapper.error .ts-control.dropdown-active,
.ts-wrapper.error .ts-control.single.dropdown-active,
.ts-wrapper.error .ts-control.multi.dropdown-active {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff !important;
}

.ts-wrapper.ts-wrapper.error .ts-control.input-active,
.ts-wrapper.error .ts-control.input-active {
    border-color: #dc3545 !important;
    background-color: #fff !important;
}

.ts-wrapper.ts-wrapper.error .ts-control .ts-control-input::placeholder,
.ts-wrapper.error .ts-control .ts-control-input::placeholder {
    color: #dc3545;
    opacity: 0.7;
}

/* TomSelect Error - Override any Bootstrap 5 styles */
.form-group .ts-wrapper.error .ts-control,
.form-floating .ts-wrapper.error .ts-control,
div .ts-wrapper.error .ts-control {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* TomSelect Valid States - Enhanced with higher specificity */
.ts-wrapper.ts-wrapper.valid .ts-control,
.ts-wrapper.ts-wrapper.valid .ts-control.single,
.ts-wrapper.ts-wrapper.valid .ts-control.multi,
.ts-wrapper.valid .ts-control,
.ts-wrapper.valid .ts-control.single,
.ts-wrapper.valid .ts-control.multi {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.1rem rgba(40, 167, 69, 0.15) !important;
    background-color: #fff !important;
}

.ts-wrapper.ts-wrapper.error .ts-control:not(.dropdown-active):focus,
.ts-wrapper.error .ts-control:not(.dropdown-active):focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff !important;
}

/* Specific override for TomSelect with Bootstrap 5 classes */
.ts-wrapper.error .ts-control.form-control,
.ts-wrapper.error .ts-control.form-select {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Hide Individual Error Labels */
label.error {
    display: none !important;
}

/* Loading Animation */
.ti-loader-2.fa-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

/* Success Message Styling */
/*.alert-success {*/
/*    border-color: #28a745;*/
/*    background-color: #d4edda;*/
/*    color: #155724;*/
/*}*/

/* Tooltip Error Messages */
.form-control[title],
.form-select[title],
.ts-control[title] {
    position: relative;
}

/* Field Required Indicator */
.form-label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* Validation Icon States */
.form-control.error + .validation-icon::before {
    content: "\f071"; /* FontAwesome exclamation-triangle */
    color: #dc3545;
}

.form-control.valid + .validation-icon::before {
    content: "\f00c"; /* FontAwesome check */
    color: #28a745;
}

/* Tab Validation Error Styles */
.nav-link.has-validation-error {
    color: #dc3545 !important;
    border-bottom-color: #dc3545 !important;
}

.nav-link.has-validation-error:hover,
.nav-link.has-validation-error:focus {
    color: #dc3545 !important;
    border-bottom-color: #dc3545 !important;
}

.nav-link.has-validation-error.active {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-bottom-color: #dc3545 !important;
    color: #dc3545 !important;
}

.tab-error-indicator {
    font-size: 0.8rem;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Enhanced error message styling */
#common-error-message small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.9;
}


/* Debug styles - remove these after testing */
/*
.ts-wrapper.error {
    outline: 3px solid red !important;
}

.ts-wrapper.error .ts-control {
    outline: 2px solid orange !important;
}
*/