/* Z-Index Management System */
/* This file defines standardized z-index levels for consistent layering */

:root {
    /* Background Elements (Lowest) */
    --z-background: 0;
    --z-floating-elements: 1;
    --z-content-background: 5;
    
    /* Content Elements */
    --z-content: 10;
    --z-interactive-content: 20;
    --z-form-elements: 30;
    
    /* Navigation & UI Components */
    --z-navbar: 40;
    --z-sidebar: 45;
    --z-header: 900;
    
    /* Overlays & Dropdowns */
    --z-dropdown: 100;
    --z-tooltip: 200;
    --z-popover: 300;
    
    /* Modals & Mobile Menus */
    --z-mobile-menu: 500;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    
    /* Notifications & Alerts */
    --z-notification: 1100;
    --z-toast: 1200;
    
    /* Critical UI (Highest) */
    --z-loading: 9000;
    --z-emergency: 9999;
}

/* Apply z-index levels to common elements */

/* Background Elements */
.floating-background,
.floating-background *,
.hero-background,
.section-background {
    z-index: var(--z-background) !important;
}

.floating-element,
.decoration-element {
    z-index: var(--z-floating-elements) !important;
}

/* Content Elements */
.content-section,
section,
main {
    z-index: var(--z-content) !important;
}

.interactive-element,
.card,
.item-card {
    z-index: var(--z-interactive-content) !important;
}

/* Navigation & Header */
.sticky-header,
header,
.navbar {
    z-index: var(--z-header) !important;
}

/* Dropdowns & Overlays */
.dropdown-menu,
.notification-dropdown {
    z-index: var(--z-dropdown) !important;
}

/* Mobile Menu */
#mobileMenu,
.mobile-menu {
    z-index: var(--z-mobile-menu) !important;
}

/* Modals */
.modal-backdrop {
    z-index: var(--z-modal-backdrop) !important;
}

.modal,
.auth-modal {
    z-index: var(--z-modal) !important;
}


/* Loading & Emergency */
.loading-overlay {
    z-index: var(--z-loading) !important;
}

.emergency-alert {
    z-index: var(--z-emergency) !important;
}

body {
    overflow-x: hidden;
}