/* 
 * DEFINITIVE DROPDOWN FIX
 * Fixes: Empty white space on right, horizontal scroll on dropdown open
 * Root Cause: Bootstrap negative margins + Select2 absolute positioning
 */

/* ============================================
   1. GLOBAL LAYOUT FIXES
   Fixes the empty white space on the right side
   ============================================ */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Kills horizontal scrollbar caused by Bootstrap rows */
    position: relative; /* Essential for absolute positioning context */
}

/* ============================================
   2. FIX EMPTY SPACE ON RIGHT
   Override Bootstrap's max-width limit to fill screen
   ============================================ */
.container-xxl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.5rem !important; /* Add padding so content isn't glued to edge */
    padding-right: 1.5rem !important;
}

/* Fix Bootstrap negative margin causing overflow */
.layout-page, 
.content-wrapper, 
.container-fluid {
    overflow-x: hidden;
    width: 100%;
}

/* ============================================
   2. SELECT2 Z-INDEX & POSITIONING FIX
   Ensures dropdowns float above everything
   ============================================ */

/* High Z-Index to float above Modals and Sticky Headers */
.select2-container {
    /* z-index: 10000 !important; */
}

.select2-dropdown {
    /* z-index: 10001 !important; */
    /* CRITICAL: Ensure the dropdown never exceeds the viewport width */
    max-width: 98vw !important;
    box-sizing: border-box;
}

/* ============================================
   3. CONTENT WRAPPING
   Prevents long text from widening the dropdown
   ============================================ */
.select2-results__option {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 8px 10px !important;
}

/* Ensure selected items in multi-select also wrap */
.select2-selection__choice {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* ============================================
   4. SELECT2 INSIDE INPUT GROUPS/TABLES
   ============================================ */
.input-group > .select2-container--bootstrap-5 {
    flex: 1 1 auto;
    width: 1% !important; /* Force flexbox to handle width, not absolute width */
}

.input-group > .select2-container--bootstrap-5 .select2-selection {
    height: 100%;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
}

/* ============================================
   5. NAVBAR CLIPPING FIX
   ============================================ */
.layout-navbar,
.navbar,
.navbar-nav,
.nav-item.dropdown {
    overflow: visible !important;
}

/* ============================================
   6. CARD OVERFLOW
   Allow overflow visible so tooltips/popovers work
   Rely on body overflow-x:hidden to catch spills
   ============================================ */
.card {
    overflow: visible !important;
}

/* ============================================
   7. TABLE RESPONSIVE
   ============================================ */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

/* ============================================
   8. BOOTSTRAP DROPDOWN FIXES
   ============================================ */
.dropdown-menu {
    box-sizing: border-box;
    transform: none !important;
}

/* ============================================
   9. FORM SELECT FIXES
   ============================================ */
.form-select {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ============================================
   10. ROW FIXES
   Prevent Bootstrap row negative margins from causing issues
   ============================================ */
.row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* ============================================
   11. MOBILE RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .select2-container {
        width: 100% !important;
    }
    
    /* On mobile, ensure the dropdown doesn't exceed screen width */
    .select2-dropdown {
        max-width: 95vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* Center it if attached to body */
    }
    
    .dropdown-menu {
        max-width: 95vw !important;
    }
}

/* ============================================
   12. DATATABLES LENGTH MENU & FORM SELECT FIX
   Fixes the overlapping dropdown arrow in "entries per page"
   and prevents select boxes from collapsing text
   ============================================ */
div.dt-container .dt-length select.form-select,
.dataTables_wrapper .dataTables_length select.form-select,
.dataTables_wrapper .dataTables_length select,
div.dt-container select.dt-input {
    padding-right: 2.25rem !important; /* Force space for the background SVG arrow */
    background-position: right 0.5rem center !important;
    min-width: 75px !important;
    appearance: none !important; /* Ensure native arrow is hidden */
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
}

/* Ensure form-select-sm has enough right padding across the app */
select.form-select-sm {
    padding-right: 2.25rem !important;
    background-position: right 0.5rem center !important;
}

/* ============================================
   13. DROPDOWN ICON COLOR FIX
   Changes white icons to black for better visibility
   ============================================ */

/* Fix checkbox icons in dropdowns */
.dropdown-menu .ri-checkbox-circle-fill,
.dropdown-menu .ri-check-fill,
.dropdown-menu .ri-checkbox-fill {
    color: #000000 !important;
}

/* Fix for Select2 dropdown icons */
.select2-results__option .ri-checkbox-circle-fill,
.select2-results__option .ri-check-fill,
.select2-results__option .ri-checkbox-fill {
    color: #000000 !important;
}

/* Fix for any icon in dropdown items */
.dropdown-item i.ri-checkbox-circle-fill,
.dropdown-item i.ri-check-fill,
.dropdown-item i.ri-checkbox-fill {
    color: #000000 !important;
}

/* Fix for status filter dropdown specifically */
[class*="status"] .dropdown-menu i,
[class*="search"] .dropdown-menu i {
    color: #000000 !important;
}

/* General fix for all remix icons in dropdowns that might be white */
.dropdown-menu [class^="ri-"],
.dropdown-menu [class*=" ri-"] {
    color: inherit;
}

/* Ensure selected items have black icons */
.dropdown-menu .active i,
.dropdown-menu .selected i {
    color: #000000 !important;
}