/**
 * Levridge Equity - Form Element Consistency Fix
 * 
 * This file ensures consistent text colors across all form elements in the application.
 * Addresses the dropdown text color issue where dropdowns appeared "light" and optional
 * compared to text inputs.
 * 
 * Color Scheme (matches theme.min.css constants):
 * - Primary text color: #18113c (--bs-dark, matches form-control)
 * - Placeholder text: #a8a3b9 (theme placeholder color) 
 * - Secondary text: #79758f (--bs-secondary)
 * - Focus border: #2f5265 (--bs-primary)
 * - Background colors: #fff (normal), #f5f4f8 (disabled)
 * 
 * Fixes:
 * - Native HTML select elements (.form-select)
 * - Select2 dropdowns consistency check
 * - Bootstrap Select components
 * - Validation state consistency
 */

/* =============================================================================
   NATIVE HTML SELECT ELEMENTS - Core Fix
   ============================================================================= */

/**
 * Override theme.min.css .form-select color to match .form-control
 * This is the primary fix for the dropdown text appearing "light"
 */
/* Remove any overrides - let dropdowns inherit the same color as text inputs */
select.form-select,
.form-select,
select[class*="form-select"] {
    color: inherit !important; /* Use the same color as text inputs */
}

/* Ensure placeholder text remains light for visual hierarchy */
.form-select option:first-child:disabled {
    color: #a8a3b9;
}

/* Maintain consistency in focused state */
select.form-select:focus,
.form-select:focus,
select[class*="form-select"]:focus {
    color: inherit !important;
    border-color: #2f5265;
    box-shadow: 0 0 0 .25rem rgba(47,82,101,.25);
}

/* Disabled state should be visually distinct but still readable */
.form-select:disabled {
    color: #79758f !important;
    background-color: #f5f4f8;
    opacity: 0.8;
}

/* =============================================================================
   BOOTSTRAP SELECT COMPONENTS
   ============================================================================= */

/* Style Bootstrap Select dropdowns to match theme */
.bootstrap-select .dropdown-toggle {
    color: #18113c !important;
    background-color: #fff;
    border: 1px solid #e8e7ed;
    border-radius: .25rem;
}

.bootstrap-select .dropdown-toggle:focus {
    border-color: #2f5265;
    box-shadow: 0 0 0 .25rem rgba(47,82,101,.25);
}

.bootstrap-select .dropdown-menu {
    border: 1px solid #e8e7ed;
    border-radius: .25rem;
}

.bootstrap-select .dropdown-item {
    color: #18113c;
}

.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
    background-color: #f5f4f8;
    color: #18113c;
}

.bootstrap-select .dropdown-item.active {
    background-color: #2f5265;
    color: #fff;
}

/* =============================================================================
   SELECT2 CONSISTENCY VERIFICATION
   ============================================================================= */

/**
 * Ensure Select2 components maintain consistency
 * (select2-equity.css already handles this well, but adding fallbacks)
 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #18113c !important;
}

.select2-results__option {
    color: #18113c !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    color: #18113c !important;
}

/* =============================================================================
   DATATABLE SELECT ELEMENTS
   ============================================================================= */

/* Ensure DataTable length select dropdowns are consistent */
.dataTables_wrapper .dataTables_length select {
    color: #18113c !important;
    background-color: #fff;
    border: 1px solid #e8e7ed;
    border-radius: .25rem;
    padding: .375rem 2.25rem .375rem .75rem;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: #2f5265;
    box-shadow: 0 0 0 .25rem rgba(47,82,101,.25);
    outline: 0;
}

/* =============================================================================
   VALIDATION STATES
   ============================================================================= */

/* Valid state - maintain theme colors */
.form-select.is-valid,
.was-validated .form-select:valid {
    border-color: #19cb98;
    color: #18113c !important;
}

.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
    border-color: #19cb98;
    box-shadow: 0 0 0 .25rem rgba(25,203,152,.25);
    color: #18113c !important;
}

/* Invalid state - maintain theme colors */
.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: #e53f3c;
    color: #18113c !important;
}

.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: #e53f3c;
    box-shadow: 0 0 0 .25rem rgba(229,63,60,.25);
    color: #18113c !important;
}

/* =============================================================================
   MULTIPLE SELECT ELEMENTS
   ============================================================================= */

/* Ensure multiple select elements are consistent */
.form-select[multiple] {
    color: #18113c !important;
    background-image: none; /* Remove dropdown arrow for multiple */
}

.form-select[multiple] option {
    color: #18113c;
    padding: .375rem .75rem;
}

.form-select[multiple] option:checked {
    background-color: #2f5265;
    color: #fff;
}

/* =============================================================================
   INPUT GROUP CONSISTENCY
   ============================================================================= */

/* Ensure select elements in input groups maintain consistency */
.input-group .form-select {
    color: #18113c !important;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.input-group .form-select:focus {
    z-index: 3;
    color: #18113c !important;
}

/* =============================================================================
   SIZE VARIANTS
   ============================================================================= */

/* Small form selects */
.form-select.form-select-sm {
    color: #18113c !important;
    font-size: .765625rem;
}

/* Large form selects */
.form-select.form-select-lg {
    color: #18113c !important;
    font-size: 1.09375rem;
}

/* =============================================================================
   FLOATING LABELS
   ============================================================================= */

/* Ensure floating label selects are consistent */
.form-floating .form-select {
    color: #18113c !important;
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.form-floating .form-select:focus ~ label,
.form-floating .form-select:not([value=""]) ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

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

/* Ensure sufficient contrast for screen readers and users with visual impairments */
@media (prefers-contrast: high) {
    .form-select {
        color: #000000 !important;
        border-color: #000000;
    }
    
    .form-select:focus {
        color: #000000 !important;
        border-color: #000000;
        box-shadow: 0 0 0 .25rem rgba(0,0,0,.5);
    }
}

/* Ensure no color changes in reduced motion mode affect text readability */
@media (prefers-reduced-motion: reduce) {
    .form-select {
        color: #18113c !important;
        transition: none;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

/* Ensure form elements are readable when printed */
@media print {
    .form-select {
        color: #000000 !important;
        background-color: transparent !important;
        border: 1px solid #000000 !important;
    }
}