/**
 * Select2 v5 Theme Override
 * 
 * Purpose: Override Select2's default v4 purple colors with v5 olive green theme
 * Created: February 10, 2026
 * 
 * This file should be loaded AFTER select2.bundle.css to properly override colors.
 * Include in your page: $pageCss = ['css/formplugins/select2/select2.bundle.css', 'css/formplugins/select2/select2-v5-theme.css'];
 */

/* ============================================================================
   Select2 within Bootstrap Input Groups - Layout Fixes
   ============================================================================ */

.input-group .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

.input-group .select2-container .select2-selection {
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ============================================================================
   v5 Primary Color Overrides (Olive Green)
   Replaces v4 purple (#886ab5) with v5 olive green
   ============================================================================ */

/* Highlighted/Hovered dropdown options - v5 olive green background */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option[aria-selected]:hover {
    background-color: var(--bs-primary, var(--primary, #6BBB70)) !important;
    color: #fff !important;
}

/* Selected dropdown options - light olive green background */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(107, 187, 112, 0.1) !important;
    color: var(--bs-primary, var(--primary, #6BBB70)) !important;
}

/* Focus state - input field border and shadow (olive green) */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--bs-primary, var(--primary, #6BBB70)) !important;
    box-shadow: 0 0 0 0.2rem rgba(107, 187, 112, 0.25) !important;
    outline: 0 !important;
}

/* Search field in dropdown - olive green border when focused */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--bs-primary, var(--primary, #6BBB70)) !important;
    outline: 0 !important;
}

/* Default state borders - neutral gray (removes v4 purple) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: #dee2e6 !important;
}

/* Dropdown container border - olive green to match v5 theme */
.select2-dropdown {
    border-color: var(--bs-primary, var(--primary, #6BBB70)) !important;
}

/* Remove bottom border of input when dropdown is open below */
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-color: transparent !important;
}

/* Top border when dropdown opens above */
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-color: transparent !important;
}

/* Dropdown border when opened above */
.select2-container--open.select2-container--above .select2-dropdown {
    border-bottom-color: var(--bs-primary, var(--primary, #6BBB70)) !important;
}

/* ============================================================================
   Multi-Select Selected Items (Tags/Chips) - Override v4 Purple
   ============================================================================ */

/* Selected item tags in multi-select - uses primary color */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-primary, var(--primary, #6BBB70)) !important;
    border-color: #5aa960 !important;
    color: #fff !important;
}

/* Remove button (X) on selected tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    opacity: 0.8;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    color: #fff !important;
    opacity: 1;
    background-color: transparent !important;
}

/* ============================================================================
   Color Variables Used
   ============================================================================
   
   Primary Color: var(--bs-primary, var(--primary, #6BBB70))
   - First tries Bootstrap 5 --bs-primary variable
   - Then tries --primary variable
   - Falls back to #6BBB70 (olive green)
   
   Shadow: rgba(107, 187, 112, 0.25)
   - 25% opacity olive green for focus glow
   
   Light Background: rgba(107, 187, 112, 0.1)
   - 10% opacity olive green for selected items
   
   Multi-Select Tags: Uses primary color variable
   - Automatically matches theme primary color
   - White text on tags
   - Border: #5aa960 (darker shade for definition)
   
   Default Border: #dee2e6
   - Bootstrap neutral gray border
   
   ============================================================================ */