#menu {
    width: 245px !important; 
    height: 100vh !important;
    position: fixed !important;
    transition: all 0.3s ease;
}

#side-menu {
    height: calc(100vh - 63px) !important; 
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 110px !important; 
}

#side-menu::-webkit-scrollbar { width: 0px; }
#side-menu::-webkit-scrollbar-thumb { background: #dfdfdf; border-radius: 10px; }


#setup-menu-wrapper::-webkit-scrollbar { width: 4px; }
#setup-menu-wrapper::-webkit-scrollbar-thumb { background: #dfdfdf; border-radius: 10px; }

/* Base dropdown scroll fix */
.dropdown-menu {
    max-height: 300px !important; 
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    z-index: 9999 !important; 
}

/* Allow Perfex JS to move the dropdown during scroll */
.dropdown-menu.open, 
.bootstrap-select .dropdown-menu {
    max-height: 220px !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
    /* Removed: position absolute and top 100% from here */
}

/* Inner dropdown scroll styling */
.bootstrap-select .dropdown-menu.inner {
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* Standard anchor for the button */
.bootstrap-select.btn-group {
    position: relative !important; 
}

/* This was causing the 'stuck' behavior - fixed now */
.bootstrap-select .dropdown-menu {
    /* Removed: top: 100% !important and transform: none !important */
    /* We let the library handle the exact pixel position */
    min-width: 100%;
}

/* Critical: Ensure the table doesn't clip the dropdown */
/* .table-responsive {
    overflow: visible !important; 
} */

/* .table td, .table th {
    position: relative;
} */

/* Handle automatic dropup when near the bottom of the screen */
.bootstrap-select.dropup .dropdown-menu {
    top: auto;
    bottom: 100%;
}

#wrapper {
    margin-left: 245px !important; 
    width: calc(100% - 245px) !important;
    height: 100vh !important;
    overflow: visible !important;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

#wrapper .content {
    height: calc(100vh - 63px) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding-bottom: 250px !important;
    -webkit-overflow-scrolling: touch;
}


body.hide-sidebar #wrapper {
    margin-left: 0 !important;
    width: 100% !important;
}

body.hide-sidebar #menu {
    transform: translateX(-245px);
}

body.show-sidebar #wrapper {
    margin-left: 245px !important;
    width: calc(100% - 245px) !important;
}

@media (min-width: 769px) {
    body.sidebar-collapsible #menu {
        width: 64px !important;
    }

    body.sidebar-collapsible #wrapper {
        margin-left: 64px !important;
        width: calc(100% - 64px) !important; 
    }

    body.sidebar-collapsible #side-menu li a i {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    #wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

.container-fluid, .row {
    width: 100% !important;
    max-width: 100% !important;
}