/* Mobile Sidebar Fix CSS */

/* Ensure parent doesn't clip sidebar on mobile */
@media (max-width: 991px) {
    .sesli-layout {
        overflow: visible !important;
    }
}

@media (max-width: 991px) {
    /* Force mobile sidebar positioning */
    .sesli-layout .sesli-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 350px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 9999 !important;  /* Sidebar should be ABOVE backdrop */
        background: #ffffff !important;
        border-right: 1px solid #e5e5e5 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }

    .sesli-layout .sesli-sidebar.open {
        left: 0 !important;
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Additional specificity for any conflicting styles */
    .sesli-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 350px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 9999 !important;  /* Sidebar should be ABOVE backdrop */
        background: #ffffff !important;
        border-right: 1px solid #e5e5e5 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .sesli-sidebar.open {
        left: 0 !important;
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    .sesli-sidebar-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.2) !important;  /* More transparent backdrop */
        z-index: 9998 !important;  /* Backdrop should be BEHIND sidebar */
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        pointer-events: none !important;
    }
    
    .sesli-sidebar-backdrop.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Ensure content is visible */
    .sesli-sidebar > * {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Debug: Make sure sidebar is visible when open */
    .sesli-sidebar.open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        left: 0 !important;
        z-index: 9999 !important;  /* Consistent z-index */
    }
    
    /* Tab content should be flex when active */
    .sesli-tab-content {
        display: none !important;
    }
    
    .sesli-tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }
    
    /* Ensure room list is scrollable */
    .sesli-room-list {
        flex: 1 !important;
        overflow-y: auto !important;
        padding-bottom: 20px !important;
    }
    
    /* Ensure hamburger menu button is visible on mobile */
    #sidebarToggle {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999 !important;
    }
    
    /* Override Bootstrap d-lg-none hiding */
    .d-lg-none {
        display: inline-block !important;
    }
    
    /* Specifically for chat header buttons */
    .sesli-chat-header #sidebarToggle {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure user list toggle is also visible */
    #userListToggle {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Context menus, dropdowns and modals should be above everything */
.dropdown-menu,
.user-menu-dropdown,
.modal,
.modal-backdrop,
#userProfileModal,
#settingsModal,
#adminPanelModal,
.central-modal,
.toast-notification,
.emoji-picker-dropdown,
[role="menu"],
.popover,
.tooltip,
.user-profile-menu,
.context-menu,
.user-menu-toggle + .dropdown-menu,
.btn-group .dropdown-menu {
    z-index: 10500 !important;
    position: fixed !important;
}

/* Bootstrap modal backdrop */
.modal-backdrop {
    z-index: 10400 !important;
}

/* Bootstrap modals */
.modal {
    z-index: 10500 !important;
}

/* Fix for menus inside sidebar - use portal pattern */
.sesli-sidebar .dropdown-menu,
.sesli-sidebar .user-menu-dropdown,
.sesli-sidebar [role="menu"],
.sesli-user-profile-section .dropdown-menu,
.user-profile-card .dropdown-menu,
.user-menu-toggle ~ .dropdown-menu {
    z-index: 10600 !important;
    position: fixed !important;
}

/* Any dropdown or menu that might appear */
.dropdown.show .dropdown-menu,
.dropup.show .dropdown-menu,
.dropstart.show .dropdown-menu,
.dropend.show .dropdown-menu {
    z-index: 10600 !important;
}

/* Specific fix for user profile card menu */
.user-profile-card {
    position: relative !important;
}

.user-profile-card .user-menu-toggle {
    position: relative !important;
    z-index: 1 !important;
}