/* Z-Index Layer Management System
   ================================
   Proper layering to prevent conflicts between:
   - Mobile menu (offcanvas)
   - Marketplace coming soon modal
   - Navigation dropdowns
   - Tour overlays
   - Other modals
*/

/* Z-Index Scale:
   1000-1029: Base UI elements (dropdowns, tooltips)
   1030-1039: Fixed navigation elements
   1040-1049: Offcanvas/slide-out menus
   1050-1059: Modal backdrops
   1060-1069: Modal content
   1070-1079: Tour overlays
   1080-1089: Toast notifications
   1090-1099: Emergency overlays
*/

/* Mobile Navigation Toggle Button - Above most content but below modals */
.navbar-toggler {
    z-index: 1090 !important;
    position: relative !important;
}

/* Offcanvas Mobile Menu - Must be above everything except critical overlays */
#navigationMenu.offcanvas {
    z-index: 1100 !important;
    position: fixed !important;
}

.offcanvas {
    z-index: 1100 !important;
    position: fixed !important;
}

.offcanvas-backdrop {
    z-index: 1095 !important;
    position: fixed !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Bootstrap Modal Backdrop - Standard modal layer */
.modal-backdrop {
    z-index: 1050 !important;
}

/* Bootstrap Modal Content - Above backdrop */
.modal {
    z-index: 1055 !important;
}

/* Marketplace Coming Soon Modal - Above offcanvas */
#marketplaceComingSoonModal {
    z-index: 1200 !important;
    position: fixed !important;
}

#marketplaceComingSoonModal .modal-dialog {
    z-index: 1201 !important;
}

#marketplaceComingSoonModal .modal-backdrop {
    z-index: 1195 !important;
    position: fixed !important;
}

/* Mega Menu Dropdowns - Below modals and offcanvas */
.mega-menu,
.dropdown-menu {
    z-index: 1030 !important;
}

/* Floating Search Modal - Same level as other modals */
.floating-search-modal {
    z-index: 1055 !important; /* Reduced from 1060 */
}

.floating-search-button {
    z-index: 1035 !important; /* Reduced from 1050 */
}

/* Tour Guide Overlays - Highest priority */
.tour-overlay {
    z-index: 1070 !important; /* Reduced from 9999 */
}

.tour-tooltip {
    z-index: 1075 !important; /* Reduced from 10000 */
}

.tour-highlight {
    z-index: 1071 !important; /* Reduced from 9998 */
}

.tour-skip-button {
    z-index: 1076 !important; /* Reduced from 10001 */
}

/* Navigation Bar - Fixed positioning */
.navbar {
    z-index: 1030 !important;
}

/* Sticky Elements */
.sticky-top {
    z-index: 1020 !important;
}

/* Toast Notifications */
.toast-container {
    z-index: 1080 !important;
}

/* Loading Overlays */
.loading-overlay {
    z-index: 1045 !important;
}

/* Product Card Overlays */
.product-card-overlay,
.quick-add-overlay {
    z-index: 10 !important; /* Much lower, just above card content */
}

/* Gallery and Image Modals */
.image-gallery-modal {
    z-index: 1060 !important;
}

/* Admin Panels - Should be below modals */
.admin-panel-float {
    z-index: 1025 !important;
}

/* Fix for specific problematic elements */
.marketplace-blocked {
    position: relative;
    z-index: auto !important;
}

/* Ensure modals stack properly when multiple are open */
.modal.show ~ .modal-backdrop {
    z-index: 1049 !important;
}

.modal.show {
    z-index: 1055 !important;
}

/* Emergency cleanup for any rogue high z-index elements */
[style*="z-index: 9999"],
[style*="z-index: 10000"],
[style*="z-index: 10001"] {
    z-index: 1075 !important; /* Cap at tour tooltip level */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    /* Ensure mobile menu is accessible */
    .navbar-toggler {
        z-index: 1090 !important;
        position: relative !important;
    }
    
    /* Mobile offcanvas must be on top */
    #navigationMenu.offcanvas,
    .offcanvas {
        z-index: 1100 !important;
        position: fixed !important;
    }
    
    /* Mobile menu backdrop */
    .offcanvas-backdrop {
        z-index: 1095 !important;
        position: fixed !important;
    }
    
    /* Ensure marketplace modal is on top of offcanvas */
    #marketplaceComingSoonModal {
        z-index: 1200 !important;
    }
}

/* Bootstrap 5 compatibility fixes */
.dropdown-menu.show {
    z-index: 1030 !important;
}

.btn-group > .dropdown-menu {
    z-index: 1031 !important;
}

/* Fix for nested modals */
.modal.nested-modal {
    z-index: 1065 !important;
}

.modal.nested-modal ~ .modal-backdrop {
    z-index: 1064 !important;
}

/* Accessibility: Ensure focus indicators are visible */
*:focus {
    position: relative;
    z-index: 1 !important;
}

/* Fix for sticky headers in tables */
.table thead th.sticky-top {
    z-index: 1015 !important;
}

/* Popover and tooltip adjustments */
.popover {
    z-index: 1035 !important;
}

.tooltip {
    z-index: 1035 !important;
}

/* Ensure form validation messages appear above form elements */
.invalid-feedback,
.valid-feedback {
    z-index: 5 !important;
}

/* Fix for overlapping issues in cards */
.card {
    position: relative;
    z-index: 0;
}

.card:hover {
    z-index: 1;
}

/* Emergency override for inline styles with !important */
.force-top-layer {
    z-index: 2147483647 !important; /* Maximum safe integer for z-index */
    position: fixed !important;
}