/**
 * Select2 Custom Styling - Bootstrap 5 Integration with Theme Support
 * 
 * This stylesheet provides comprehensive styling for Select2 components
 * with Bootstrap 5 integration, following BEM methodology and modern
 * CSS best practices. Features seamless light/dark theme integration
 * with CSS custom properties and Bootstrap's color system.
 * 
 * Dependencies:
 * - Select2 4.0.13+ (https://select2.org/)
 * - Bootstrap 5.x (https://getbootstrap.com/)
 * - Select2 Bootstrap 5 Theme (optional enhancement)
 * 
 * Browser Support:
 * - Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
 * - IE 11 (with vendor prefixes and fallback colors)
 * 
 * @version  2.0.0
 * @license  MIT
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES - Theme Variables for Light/Dark Mode Integration
   ========================================================================== */

/* CSS CUSTOM PROPERTIES - Theme Variables for Light/Dark Mode Integration */
/**
 * Root-level CSS custom properties that align with Bootstrap's color system
 * These variables automatically adapt to theme changes and provide consistent
 * color schemes across light and dark modes.
 */
:root {
    /* Primary Colors - map to Bootstrap */
    --select2-primary: var(--bs-primary);
    --select2-primary-rgb: var(--bs-primary-rgb);
    --select2-secondary: var(--bs-secondary);
    --select2-success: var(--bs-success);
    --select2-success-rgb: var(--bs-success-rgb);
    --select2-danger: var(--bs-danger);
    --select2-danger-rgb: var(--bs-danger-rgb);
    --select2-warning: var(--bs-warning);
    --select2-info: var(--bs-info);

    /* Background Colors */
    --select2-bg-body: var(--bs-body-bg);
    --select2-bg-secondary: var(--bs-secondary-bg);
    --select2-bg-tertiary: var(--bs-tertiary-bg);

    /* Text Colors */
    --select2-text-primary: var(--bs-body-color);
    --select2-text-secondary: var(--bs-secondary-color);
    --select2-text-muted: var(--bs-secondary-color);

    /* Border Colors */
    --select2-border-color: var(--bs-border-color);
    --select2-border-color-translucent: var(--bs-border-color);

    /* Focus Colors */
    --select2-focus-border-color: var(--bs-primary);
    --select2-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);

    /* Dropdown Shadow */
    --select2-dropdown-shadow: var(--bs-box-shadow);

    /* Interactive States */
    --select2-hover-bg: rgba(var(--bs-primary-rgb), 0.10);
    --select2-hover-color: var(--bs-primary);
    --select2-selected-bg: var(--bs-tertiary-bg);
    --select2-selected-color: var(--bs-body-color);

    /* Choice/Tag Colors */
    --select2-choice-bg: var(--bs-secondary-bg);
    --select2-choice-border: var(--bs-border-color);
    --select2-choice-color: var(--bs-body-color);
    --select2-choice-remove-color: var(--bs-body-color);
    --select2-choice-remove-hover-color: var(--bs-danger);
}

/**
 * Dark theme CSS custom properties
 * Automatically applied when Bootstrap's dark theme is active or when
 * the user's system preference is set to dark mode
 */
html[data-bs-theme="dark"],
body[data-bs-theme="dark"] {
    /* Optional dark-specific tunings to improve contrast */
    --select2-hover-bg: rgba(var(--bs-primary-rgb), 0.18);
    --select2-dropdown-shadow: var(--bs-box-shadow-lg);
}

/**
 * High contrast theme support for accessibility
 * Enhanced visibility for users with visual impairments
 */
@media (prefers-contrast: high) {
    :root {
        --select2-border-color: #000;
        --select2-text-primary: #000;
        --select2-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
        --select2-choice-border: #000;
    }
    
    [data-bs-theme="dark"] {
        --select2-border-color: #fff;
        --select2-text-primary: #fff;
        --select2-focus-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
        --select2-choice-border: #fff;
    }
}

/* ==========================================================================
   BASE STYLES - Core Select2 Bootstrap 5 Integration
   ========================================================================== */

/**
 * Primary container styling for Select2 components
 * Uses CSS custom properties for seamless theme integration
 * Ensures consistent sizing and appearance with Bootstrap form controls
 */
.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid var(--select2-border-color) !important;
    border-radius: 0.3rem;
    min-height: calc(1.5em + 0.75rem + 5px);
    background-color: var(--select2-bg-body);
    font-size: 0.843rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--select2-text-primary);
}

/**
 * Single select dropdown styling
 * Matches Bootstrap form-select height and padding
 */
.select2-container--bootstrap-5 .select2-selection--single {
    height: calc(1.5em + 0.75rem + 5px);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

/* Ensure single-select text adapts to Bootstrap theme (light/dark) */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color) !important;
}

/* Placeholder color adapts to Bootstrap secondary color (light/dark) */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-secondary-color) !important;
}

/* Disabled single-select text should be lower contrast, per Bootstrap */
.select2-container--bootstrap-5.select2-container--disabled
.select2-selection--single .select2-selection__rendered {
    color: var(--bs-secondary-color) !important;
}

/**
 * Multiple select dropdown styling
 * Matches single-select height and visual properties exactly
 * Ensures identical appearance to form-control elements
 */
.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + 5px);
    height: auto;
    padding: 0.1875rem 0.375rem 0.1875rem 0.75rem;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
}

/**
 * Inline search input styling for multiple selections
 * Matches form-control styling and integrates seamlessly with choices
 */
.select2-search--inline .select2-search__field {
    border: none !important;
    background: transparent !important;
    padding: 0 0.25rem !important;
    margin: 0 !important;
    min-width: 120px;
    height: calc(1.5em + 0.175rem);
    line-height: 1.5;
    font-size: 0.5rem;
    font-weight: 300;
    color: var(--select2-text-primary);
    outline: none !important;
    box-shadow: none !important;
}

/**
 * Placeholder styling for inline search
 */
.select2-search--inline .select2-search__field::placeholder {
    color: var(--select2-text-muted);
    opacity: 1;
}

/* ==========================================================================
   FOCUS STATES - Interactive feedback for user actions
   ========================================================================== */

/**
 * Focus state styling for accessibility and user feedback
 * Uses theme-aware CSS variables for consistent Bootstrap integration
 * Matches Bootstrap focus ring styling across light and dark themes
 */
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--select2-focus-border-color) !important;
    box-shadow: var(--select2-focus-box-shadow) !important;
    outline: 0;
}

/* ==========================================================================
   VALIDATION STATES - Form validation feedback with theme support
   ========================================================================== */

/**
 * Valid state styling - uses theme-aware success colors
 * Maintains consistent validation feedback across themes
 */
/* .select2-container.is-valid .select2-selection {
    border-color: var(--select2-success);
} */
/* 
.select2-container.is-valid .select2-selection:focus {
    border-color: var(--select2-success);
    box-shadow: 0 0 0 0.25rem rgba(var(--select2-success-rgb), 0.25);
} */

/**
 * Invalid state styling - uses theme-aware danger colors
 * Provides clear error indication across light and dark themes
 */
/* .select2-container.is-invalid .select2-selection {
    border-color: var(--select2-danger);
}

.select2-container.is-invalid .select2-selection:focus {
    border-color: var(--select2-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--select2-danger-rgb), 0.25);
} */

/* ==========================================================================
   DROPDOWN STYLING - Enhanced dropdown appearance with theme support
   ========================================================================== */

/**
 * Main dropdown container with theme-aware styling
 * Uses CSS variables for consistent appearance across light/dark themes
 * Ensures proper layering and visual hierarchy
 */
.select2-dropdown {
    border: 1px solid var(--select2-border-color);
    border-radius: 0.3rem;
    box-shadow: var(--select2-dropdown-shadow);
    z-index: 9999;
    background-color: var(--select2-bg-body);
}

/**
 * Search input field within dropdown
 * Theme-aware styling that matches Bootstrap form controls
 * Ensures proper input functionality and accessibility
 */
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--select2-border-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.575rem;
    margin: 0.5rem;
    width: calc(100% - 1rem) !important;
    background-color: var(--select2-bg-body);
    color: var(--select2-text-primary);
    /* Ensure input is interactive */
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/**
 * Search field focus state with theme-aware colors
 */
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--select2-focus-border-color) !important;
    box-shadow: var(--select2-focus-box-shadow) !important;
    outline: none !important;
}

/* ==========================================================================
   RESULT ITEMS - Dropdown option styling with theme support
   ========================================================================== */

/**
 * Individual result item styling
 * Uses theme-aware colors for consistent appearance across themes
 * Provides clear visual separation without animations
 */
.select2-results__option {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--select2-bg-secondary);
    cursor: pointer;
    color: var(--select2-text-primary);
}

/**
 * Remove border from last result item for clean appearance
 */
.select2-results__option:last-child {
    border-bottom: none;
}

/**
 * Highlighted (hovered/focused) result item with theme-aware colors
 */
.select2-results__option--highlighted {
    background-color: var(--select2-hover-bg);
    /* color: var(--select2-hover-color); */
}

/**
 * Selected result item styling with theme support
 */
.select2-results__option--selected {
    background-color: var(--select2-selected-bg);
    /* color: var(--select2-selected-color); */
    font-weight: 500;
}

/* ==========================================================================
   MULTIPLE SELECTION STYLING - Tags and choice management with theme support
   ========================================================================== */

/**
 * Individual choice/tag styling for multiple selections
 * Uses theme-aware CSS variables for consistent badge-like appearance
 * Matches Bootstrap badge styling with proper spacing and alignment
 */
.select2-selection__choice {
    background-color: var(--select2-choice-bg) !important;
    border: 1px solid var(--select2-choice-border);
    border-radius: 0.3rem;
    color: var(--select2-choice-color) !important;
    font-size: 0.89rem !important;
    font-weight: 400;
    padding: 0.25rem 0.5rem;
    margin: 0.625rem 0.125rem 0.625rem 0;
    display: inline-flex;
    align-items: center;
    height: calc(1.5em + 0.125rem);
    line-height: 1.5 !important;
    white-space: nowrap;
    vertical-align: middle;
}

/**
 * Choice text content styling
 */
.select2-selection__choice__display {
    padding-right: 0.25rem;
}

/**
 * Remove button styling within choice tags
 * Theme-aware colors for consistent appearance
 * Improved positioning and hover states
 */
.select2-selection__choice__remove {
    color: var(--select2-choice-remove-color) !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.5rem;
    line-height: 1;
    padding: 0;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    transition: all 0.15s ease-in-out;
}

/**
 * Remove button hover state with theme support
 * Enhanced visual feedback for better UX
 */
.select2-selection__choice__remove:hover {
    color: var(--select2-choice-remove-hover-color);
    background-color: rgba(var(--select2-danger-rgb), 0.1);
    transform: scale(1.1);
}

/* ==========================================================================
   SUCCESS FEEDBACK - Visual confirmation with theme support
   ========================================================================== */

/**
 * Success feedback styling for form validation
 * Uses theme-aware success colors for consistent feedback
 */
.select2-selection-success .select2-selection {
    border-color: var(--select2-success);
    box-shadow: 0 0 0 0.25rem rgba(var(--select2-success-rgb), 0.25);
}

/* ==========================================================================
   LOADING AND EMPTY STATES - User feedback with theme support
   ========================================================================== */

/**
 * Loading and no results message styling
 * Uses theme-aware text colors for consistent appearance
 */
.select2-results__message {
    padding: 1rem;
    text-align: center;
    color: var(--select2-text-muted);
    font-style: italic;
}

/**
 * Loading spinner integration with theme support
 */
.select2-results__message .spinner-border {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* ==========================================================================
   RESPONSIVE DESIGN - Mobile and tablet optimizations
   ========================================================================== */

/**
 * Tablet and small desktop optimizations
 * Maintains visual consistency across different screen sizes
 */
@media (max-width: 991.98px) {
    .select2-dropdown {
        max-width: 100%;
    }
    
    .select2-selection__choice {
        font-size: 0.8125rem;
        padding: 0.1875rem 0.375rem;
        height: calc(1.5em + 0.0625rem);
    }
    
    .select2-search--inline .select2-search__field {
        min-width: 100px;
        font-size: 0.9375rem;
    }
}

/**
 * Mobile device optimizations
 * Prevents zoom on iOS and improves touch targets
 * Enhanced multiple selection support for mobile
 */
@media (max-width: 767.98px) {
    .select2-dropdown {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .select2-search--dropdown .select2-search__field {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    .select2-search--inline .select2-search__field {
        font-size: 16px; /* Prevents zoom on iOS */
        min-width: 80px;
        padding: 0.25rem !important;
    }
    
    .select2-results__option {
        padding: 0.75rem;
        font-size: 1rem;
    }
    
    .select2-selection__choice {
        margin: 0.1875rem 0.125rem 0.1875rem 0;
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
        height: calc(1.5em + 0.25rem);
    }
    
    .select2-selection__choice__remove {
        width: 1.125rem;
        height: 1.125rem;
        font-size: 1.125rem;
    }
}

/**
 * Extra small devices (phones in portrait)
 * Optimized for smallest screen sizes with enhanced multiple selection support
 */
@media (max-width: 575.98px) {
    .select2-container--bootstrap-5 .select2-selection {
        font-size: 0.9375rem;
    }
    
    .select2-container--bootstrap-5 .select2-selection--multiple {
        padding: 0.125rem 0.375rem 0.125rem 0.5rem;
    }
    
    .select2-search--inline .select2-search__field {
        min-width: 60px;
        font-size: 0.9375rem;
        padding: 0.1875rem !important;
    }
    
    .select2-dropdown {
        border-radius: 0.25rem;
    }
    
    .select2-selection__choice {
        font-size: 0.8125rem;
        padding: 0.1875rem 0.375rem;
        margin: 0.0625rem 0.0625rem 0.0625rem 0;
        height: calc(1.5em);
    }
    
    .select2-selection__choice__remove {
        width: 1rem;
        height: 1rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   ACCESSIBILITY FEATURES - Screen readers and keyboard navigation
   ========================================================================== */

/**
 * High contrast mode support for better visibility
 * Enhanced border visibility and focus indicators
 */
@media (prefers-contrast: high) {
    .select2-container--bootstrap-5 .select2-selection {
        border-width: 2px;
        border-color: var(--select2-border-color);
    }
    
    .select2-results__option--highlighted {
        background-color: var(--select2-primary);
        color: var(--select2-bg-body);
        border: 2px solid var(--select2-bg-body);
    }
    
    .select2-selection__choice {
        border-width: 2px;
        border-color: var(--select2-choice-border);
    }
}

/**
 * Focus indicators for keyboard navigation
 * Enhanced visibility for keyboard users with theme support
 */
/* .select2-results__option:focus {
    outline: 2px solid var(--select2-primary);
    outline-offset: -2px;
} */

/* ==========================================================================
   BOOTSTRAP THEME INTEGRATION - Automatic theme detection and adaptation
   ========================================================================== */

/**
 * Bootstrap dark theme integration
 * Automatically applies when [data-bs-theme="dark"] is present
 * Provides seamless integration with Bootstrap's theme system
 */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--select2-bg-body);
    border-color: var(--select2-border-color);
    color: var(--select2-text-primary);
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--select2-bg-body);
    border-color: var(--select2-border-color);
}

[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: #2b3035 !important;
    border-color: var(--select2-border-color);
    color: #f8f9fa ;
}

[data-bs-theme="dark"] .select2-results__option {
    color: var(--select2-text-primary);
    border-bottom-color: var(--select2-border-color);
}

[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: #244261 !important;
    color: var(--select2-hover-color);
}

[data-bs-theme="dark"] .select2-selection__choice {
    background-color: var(--select2-choice-bg);
    border-color: var(--select2-choice-border);
    color: var(--select2-choice-color);
}

[data-bs-theme="dark"] .select2-search--inline .select2-search__field {
    color: var(--select2-text-primary);
}

[data-bs-theme="dark"] .select2-search--inline .select2-search__field::placeholder {
    color: var(--select2-text-muted);
}

/**
 * System preference dark mode support
 * Fallback for when Bootstrap theme is not explicitly set
 */
@media (prefers-color-scheme: dark) {
    .select2-container--bootstrap-5 .select2-selection {
        background-color: var(--select2-bg-body);
        border-color: var(--select2-border-color);
        color: var(--select2-text-primary);
    }
    
    .select2-dropdown {
        background-color: var(--select2-bg-body);
        border-color: var(--select2-border-color);
    }
    
    .select2-search--dropdown .select2-search__field {
        background-color: var(--select2-bg-secondary);
        border-color: var(--select2-border-color);
        color: var(--select2-text-primary);
    }
    
    .select2-results__option {
        color: var(--select2-text-primary);
        border-bottom-color: var(--select2-border-color);
    }
    
    .select2-results__option--highlighted {
        background-color: var(--select2-hover-bg);
        color: var(--select2-hover-color);
    }
    
    .select2-selection__choice {
        background-color: var(--select2-choice-bg);
        border-color: var(--select2-choice-border);
        color: var(--select2-choice-color);
    }
}

/* ==========================================================================
   PRINT STYLES - Optimized appearance for printed documents
   ========================================================================== */

/**
 * Print-friendly styling
 * Removes interactive elements and optimizes for black and white printing
 */
@media print {
    .select2-dropdown {
        display: none !important;
    }
    
    .select2-container--bootstrap-5 .select2-selection {
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    
    .select2-selection__choice {
        background: #f8f9fa !important;
        border: 1px solid #000 !important;
        color: #000 !important;
    }
}

/* ==========================================================================
   UTILITY CLASSES - Helper classes for specific use cases
   ========================================================================== */

/**
 * BEM modifier classes for different Select2 variants
 */

/* Large size variant */
.select2-container--large .select2-selection {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
}

.select2-container--large .select2-selection--multiple {
    padding: 0.25rem 0.5rem 0.25rem 1rem;
}

.select2-container--large .select2-search--inline .select2-search__field {
    height: calc(1.5em + 0.5rem);
    font-size: 1.125rem;
    padding: 0.5rem 0.25rem !important;
}

.select2-container--large .select2-selection__choice {
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
    height: calc(1.5em + 0.25rem);
}

/* Small size variant */
.select2-container--small .select2-selection {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.select2-container--small .select2-selection--multiple {
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
}

.select2-container--small .select2-search--inline .select2-search__field {
    height: calc(1.5em + 0.25rem);
    font-size: 0.875rem;
    padding: 0.25rem 0.125rem !important;
    min-width: 80px;
}

.select2-container--small .select2-selection__choice {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    height: calc(1.5em);
}

/* Compact variant for dense layouts */
.select2-container--compact .select2-selection {
    min-height: calc(1.5em + 0.25rem + 2px);
    padding: 0.125rem 0.375rem;
    font-size: 0.8125rem;
}

.select2-container--compact .select2-selection--multiple {
    padding: 0.0625rem 0.125rem 0.0625rem 0.375rem;
}

.select2-container--compact .select2-search--inline .select2-search__field {
    height: calc(1.5em + 0.125rem);
    font-size: 0.8125rem;
    padding: 0.125rem 0.0625rem !important;
    min-width: 60px;
}

.select2-container--compact .select2-selection__choice {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.25rem;
    height: calc(1.5em - 0.125rem);
    margin: 0.03125rem 0.0625rem 0.03125rem 0;
}

/* Full width variant */
.select2-container--full-width {
    width: 100% !important;
}

/* ==========================================================================
   BROWSER-SPECIFIC FIXES - Compatibility adjustments
   ========================================================================== */

/**
 * Internet Explorer 11 compatibility fixes
 * Enhanced support for multiple selection components
 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .select2-container--bootstrap-5 .select2-selection {
        height: auto;
        min-height: 38px;
    }
    
    .select2-container--bootstrap-5 .select2-selection--multiple {
        display: block;
        height: auto;
    }
    
    .select2-search--inline .select2-search__field {
        display: inline-block;
        vertical-align: top;
        width: auto;
        min-width: 120px;
    }
    
    .select2-selection__choice {
        display: inline-block;
        vertical-align: top;
        zoom: 1;
        display: inline;
    }
    
    .select2-selection__choice__remove {
        display: inline-block;
        vertical-align: top;
    }
}

/**
 * Safari-specific fixes for better rendering
 */
/* @supports (-webkit-appearance: none) {
    .select2-search--dropdown .select2-search__field {
        -webkit-appearance: none;
    }
} */

/* ==========================================================================
   END OF STYLESHEET
   ========================================================================== */