/* ===================================================================
   GLOBAL CSS FIXES FOR HEADER & NAVIGATION
   Purpose: Fix styling issues with dropdowns, notifications, and sidebar overlap
   =================================================================== */

/* ===================================================================
   1. FIX NOTIFICATION DROPDOWN Z-INDEX AND POSITIONING
   =================================================================== */

/* Increase z-index for notification dropdown to appear above sidebar */
.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown {
    z-index: 99 !important;  /* Higher than sidebar's z-index: 9 */
    max-height: 450px;  /* Limit height to prevent excessive scrolling */
    overflow-y: auto;  /* Enable vertical scrolling for long lists */
    overflow-x: hidden;  /* Prevent horizontal scrolling */
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
    right: -20px !important;
    top: 52px;
}

/* Ensure notification box list items don't overflow */
.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown .notification-box {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Style the scrollbar for notification dropdown */
.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown::-webkit-scrollbar {
    width: 6px;
}

.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ===================================================================
   2. FIX GENERAL DROPDOWN Z-INDEX
   =================================================================== */

/* All hover dropdowns should appear above sidebar */
.onhover-show-div {
    z-index: 99 !important;  /* Increased from 8 */
}

/* Quick action dropdown fix */
#QuickBtn .onhover-show-div {
    z-index: 99 !important;
    max-height: 500px;
    overflow-y: auto;
}

/* ===================================================================
   3. ENSURE SIDEBAR DOESN'T OVERLAP DROPDOWNS
   =================================================================== */

/* Keep sidebar at proper z-index */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
    z-index: 9 !important;  /* Keep as is, dropdowns now have higher z-index */
}

/* Ensure page header stays on top but below dropdowns */
.page-wrapper .page-header {
    z-index: 10 !important;  /* Increased from 8, but below dropdowns */
}

/* ===================================================================
   4. FIX MESSAGES DROPDOWN (IF ENABLED IN FUTURE)
   =================================================================== */

.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown.messages {
    z-index: 99 !important;
    max-height: 400px;
    overflow-y: auto;
}

/* ===================================================================
   5. FIX PROFILE DROPDOWN
   =================================================================== */

.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown {
    z-index: 99 !important;
}

/* ===================================================================
   6. RESPONSIVE FIXES FOR MOBILE/TABLET
   =================================================================== */

@media (max-width: 1199px) {
    .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown {
        right: 0 !important;
        left: auto !important;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown {
        width: 280px;
        max-height: 350px;
    }
    
    #QuickBtn .onhover-show-div {
        max-height: 400px;
    }
}

@media (max-width: 576px) {
    .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown {
        width: calc(100vw - 40px);
        right: -10px !important;
    }
}

/* ===================================================================
   7. RTL (RIGHT-TO-LEFT) SUPPORT
   =================================================================== */

html[dir=rtl] .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown,
[dir=rtl] .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown {
    left: -20px !important;
    right: unset !important;
}

html[dir=rtl] .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown:before,
html[dir=rtl] .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown:after,
[dir=rtl] .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown:before,
[dir=rtl] .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown:after {
    left: 28px !important;
    right: unset !important;
}

/* ===================================================================
   8. DARK MODE SUPPORT
   =================================================================== */

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown::-webkit-scrollbar-track {
    background: #2b3648;
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown::-webkit-scrollbar-thumb {
    background: #4a5568;
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown::-webkit-scrollbar-thumb:hover {
    background: #5a6578;
}

/* ===================================================================
   9. ENSURE DROPDOWN TITLE STAYS FIXED AT TOP
   =================================================================== */

.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown .dropdown-title {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    padding: 15px 20px 10px;
    margin: 0 -20px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown .dropdown-title {
    background: #2b3648;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ===================================================================
   10. SMOOTH TRANSITIONS
   =================================================================== */

.onhover-show-div,
.notification-dropdown,
.profile-dropdown {
    transition: all 0.3s ease-in-out !important;
}

/* ===================================================================
   11. PREVENT BODY SCROLL WHEN DROPDOWN IS LONG (OPTIONAL)
   =================================================================== */

/* Uncomment if you want to prevent page scrolling when hovering over notifications
.page-wrapper .page-header .header-wrapper .nav-right .onhover-dropdown:hover {
    overflow: hidden;
}
*/

/* ===================================================================
   END OF GLOBAL CSS FIXES
   =================================================================== */