/* ================================================
   Z-INDEX SYSTEM - Unified Layer Management
   Giải quyết xung đột z-index và tạo hệ thống phân lớp rõ ràng
   ================================================ */

/* ================================================
   Z-INDEX SCALE ĐỊNH NGHĨA
   ================================================

   Hệ thống z-index chuẩn hóa:

   0-9     : Default layers (normal content)
   10-19   : Sidebar, banner, content overlays
   20-29   : Dropdown menus, tooltips
   30-39   : Sticky elements (navigation, header)
   40-49   : Fixed bottom elements (sticky banners)
   50-59   : Scroll to top, utility buttons
   60-69   : Mobile menu button
   70-79   : Mobile menu overlay
   80-89   : Mobile menu
   90-99   : Modals, dialogs
   100-109 : Prediction modal, important modals
   110-119 : Notification system (dropdown, toasts)
   120+    : Emergency/critical overlays

   ================================================ */

/* ================================================
   1. BASE LAYERS (0-9)
   ================================================ */

/* Content mặc định - không cần z-index */

/* ================================================
   2. SIDEBAR & BANNER LAYERS (10-19)
   ================================================ */

/* Header container */
header {
    position: relative !important;
    z-index: 30 !important; /* Below navigation (1200) and dropdowns */
}

/* Sidebar banners */
.sidebar,
.sidebar-left,
.sidebar-right {
    position: relative;
    z-index: 10;
}

.banner-section,
.banner-responsive-container {
    position: relative;
    z-index: 10;
}

/* ================================================
   3. DROPDOWN LAYERS (20-29)
   ================================================ */

/* User dropdown menu - Must be above navigation */
#user-dropdown,
.user-menu .dropdown-menu {
    position: fixed !important; /* Changed from absolute to fixed */
    z-index: 9999 !important; /* Maximum z-index - above all elements */
}

.dropdown-container {
    position: relative;
    z-index: 20;
}

/* Notification dropdown */
.notification-dropdown {
    position: fixed !important;
    z-index: 9999 !important; /* Maximum z-index - above all elements */
}

/* ================================================
   4. STICKY NAVIGATION (30-39)
   ================================================ */

/* Main navigation - sticky */
nav.main-navigation,
.main-navigation {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important; /* Higher than header (1001) and dropdowns */
}

/* ================================================
   5. FIXED BOTTOM ELEMENTS (40-49)
   ================================================ */

/* Mobile sticky banner */
.mobile-sticky-banner,
div[class*="mobile-sticky"] {
    position: fixed;
    bottom: 0;
    z-index: 40 !important;
}

/* Footer sticky banner */
.footer-sticky-banner,
div[class*="footer-sticky"] {
    position: fixed;
    bottom: 0;
    z-index: 42 !important; /* Higher than mobile sticky */
}

/* ================================================
   6. UTILITY BUTTONS (50-59)
   ================================================ */

/* Scroll to top button */
#scroll-top-btn,
.scroll-to-top {
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 50 !important;
}

/* ================================================
   7. MOBILE MENU BUTTON (60-69)
   ================================================ */

.mobile-menu-button {
    position: relative;
    z-index: 1250 !important; /* Must be above navigation and overlay */
}

/* ================================================
   8. MOBILE MENU OVERLAY (70-79)
   ================================================ */

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1210 !important; /* Above navigation (1200) */
}

/* ================================================
   9. MOBILE MENU (80-89)
   ================================================ */

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1240 !important; /* Above overlay, below button */
}

/* ================================================
   10. MODALS & DIALOGS (90-99)
   ================================================ */

/* Quick search modal */
#quick-search-modal,
.search-modal {
    position: fixed;
    z-index: 1300 !important; /* Above navigation (1200) */
}

/* Confirm modals */
.notification-confirm-modal {
    position: fixed;
    z-index: 95 !important;
}

/* Reply modal */
.notification-reply-modal {
    position: fixed;
    z-index: 95 !important;
}

/* ================================================
   11. PREDICTION MODAL (100-109)
   ================================================ */

#prediction-modal,
.prediction-modal {
    position: fixed;
    z-index: 100 !important;
}

/* ================================================
   12. NOTIFICATION SYSTEM (110-119)
   ================================================ */

/* Notification bell button - relative to header */
.notification-bell-btn {
    position: relative;
    z-index: 1; /* Local stacking within header */
}

/* Notification dropdown - FIXED positioning */
.notification-dropdown {
    position: fixed !important;
    z-index: 110 !important; /* Highest - always visible */
}

/* Toast notifications */
.notification-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 115 !important; /* Above dropdown */
}

.notification-toast {
    position: relative;
    z-index: 1;
}

/* ================================================
   13. LOADING INDICATORS (110-119)
   ================================================ */

.page-loading-indicator,
#page-loading {
    position: fixed;
    z-index: 112 !important; /* Between notification dropdown and toasts */
}

/* WebSocket connection status */
.websocket-status,
.connection-status {
    position: fixed;
    z-index: 112 !important;
}

/* ================================================
   14. EMERGENCY LAYERS (120+)
   ================================================ */

/* Critical error overlays, system messages */
.critical-overlay,
.system-message {
    position: fixed;
    z-index: 120 !important;
}

/* ================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ================================================ */

@media (max-width: 768px) {
    /* Ensure mobile menu system works correctly */
    .mobile-menu-button {
        z-index: 1250 !important;
    }

    .mobile-menu-overlay {
        z-index: 1210 !important;
    }

    .mobile-menu {
        z-index: 1240 !important;
    }

    /* Mobile sticky banners */
    .mobile-sticky-banner {
        z-index: 40 !important;
    }

    /* Notification dropdown on mobile */
    .notification-dropdown {
        z-index: 110 !important;
        max-height: calc(100vh - 120px);
    }
}

/* ================================================
   CONFLICT PREVENTION
   ================================================ */

/* Ensure no elements accidentally override these values */
body * {
    /* Remove any accidentally high z-index values */
}

/* Remove old conflicting z-index values */
.notification-dropdown:not([style*="z-index"]) {
    z-index: 110 !important;
}

/* ================================================
   DEBUG MODE (Development only)
   ================================================ */

/* Uncomment to visualize z-index layers in development */
/*
header::after {
    content: 'Z:30';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,0,0,0.7);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
}

.main-navigation::after {
    content: 'Z:35';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,255,0,0.7);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
}

.notification-dropdown::after {
    content: 'Z:110';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,255,0.7);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
}
*/