/* =============================================
   SELECT2 MODAL POSITIONING FIX - CLEANED (DROP-IN)
   =============================================
   - Removes obsolete IE hacks
   - Avoids global position:fixed for dropdowns
   - Uses dropdownParent (recommended) + absolute positioning
   - Centralized z-index via CSS variable
   - Keeps modal, dark-mode, responsive, and print behaviors
   ============================================= */

/* Choose a z-index slightly above Bootstrap modal (modal ~1050) */
:root { --select2-z: 1060; }

/* Base tweak (avoid !important unless absolutely necessary) */
.select2-container {
    z-index: var(--select2-z);
}

/* Dropdown: prefer absolute so Select2 can position relative to dropdownParent (modal) */
.select2-container--default .select2-dropdown {
    position: absolute;
    z-index: calc(var(--select2-z) + 1);
    border: 1px solid #d2d6de;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: #fff;
    max-height: 40vh;
    overflow: auto;
}

/* Ensure select2 appended inside a modal inherits an appropriate z-index */
.modal .select2-container,
.modal .select2-container--default .select2-dropdown {
    z-index: calc(var(--select2-z) + 1);
}

/* Open state (no fixed positioning) */
.select2-container--open .select2-dropdown {
    /* keep absolute so it's positioned inside dropdownParent (modal) */
    position: absolute;
}

/* Single-select visuals */
.select2-container--default .select2-selection--single {
    height: 34px;
    line-height: 34px;
    border: 1px solid #d2d6de;
    border-radius: 3px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background: #fff;
}

.select2-container--default .select2-selection--single:hover {
    border-color: #3c8dbc;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    padding-left: 6px;
    color: #555;
}

/* Arrow & clear button */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #999;
    margin-right: 12px;
    font-weight: 600;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #555;
}

/* Dropdown list states */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3c8dbc;
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f4f4f4;
}

/* Search field in dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d2d6de;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 14px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #3c8dbc;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(60,139,188,0.25);
}

/* Loading / No results */
.select2-container--default .select2-results__option--loading,
.select2-container--default .select2-results__option--no-results {
    color: #999;
    font-style: italic;
    padding: 8px 12px;
}

/* Modal body scrolling - modern and consistent */
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Optional: lightweight webkit scrollbar styling (non-essential; safe to remove) */
.modal-body::-webkit-scrollbar {
    width: 12px;
}
.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Modal container safety: avoid forcing overflow hidden globally unless required.
   If you truly need to hide background scroll while modal open, handle via JS or
   Bootstrap modal class (Bootstrap handles this automatically). */

/* Responsive: select2 full-width on small viewports */
@media (max-width: 768px) {
    .select2-container {
        width: 100% !important;
    }

    .select2-container--default .select2-selection--single {
        height: 38px;
        line-height: 38px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
        padding-left: 15px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }
}

/* Dark theme support */
.dark-mode .select2-container--default .select2-selection--single {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}
.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e2e8f0;
}
.dark-mode .select2-container--default .select2-dropdown {
    background-color: #2d3748;
    border-color: #4a5568;
}
.dark-mode .select2-container--default .select2-results__option {
    color: #e2e8f0;
}
.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3c8dbc;
    color: white;
}

/* Print styles: hide Select2 UI and show native select for printing */
@media print {
    .select2-container {
        display: none !important;
    }

    .select2-container + select {
        display: block !important;
    }
}