/* ===================================
   Z-Index Management System
   Centralized z-index hierarchy to prevent conflicts
   =================================== */

:root {
    /* Z-Index Layers - Organized from bottom to top */
    
    /* Base content layer */
    --z-base: 1;
    
    /* Floating elements (tooltips, dropdowns) */
    --z-dropdown: 100;
    --z-tooltip: 150;
    
    /* Sticky elements */
    --z-sticky: 200;
    
    /* Fixed elements */
    --z-fixed: 300;
    
    /* Header and navigation */
    --z-header: 1000;
    --z-nav-dropdown: 1050;
    --z-mobile-menu-overlay: 1098;
    --z-mobile-menu: 1099;
    --z-language-switcher: 1100;
    
    /* Modals and overlays */
    --z-overlay: 2000;
    --z-modal: 2100;
    --z-modal-backdrop: 1999;
    
    /* Notifications and alerts */
    --z-notification: 3000;
    --z-alert: 3100;
    
    /* Critical UI (loading screens, system messages) */
    --z-loading: 9000;
    --z-system-message: 9999;
    
    /* Development tools */
    --z-debug: 10000;
}

/* Apply z-index to common components */

/* Header Components */
.header {
    z-index: var(--z-header);
}

.nav__dropdown {
    z-index: var(--z-nav-dropdown);
}

#language-switcher-container,
.language-switcher {
    z-index: var(--z-language-switcher);
}

/* Mobile Navigation */
.nav__overlay {
    z-index: var(--z-mobile-menu-overlay);
}

.nav__menu {
    z-index: var(--z-mobile-menu);
}

.nav__toggle,
.nav__close {
    z-index: calc(var(--z-mobile-menu) + 1);
}

/* Modals and Overlays */
.modal-backdrop,
.modal-overlay {
    z-index: var(--z-modal-backdrop);
}

.modal,
.dialog {
    z-index: var(--z-modal);
}

/* Dropdowns and Tooltips */
.dropdown,
.dropdown-menu {
    z-index: var(--z-dropdown);
}

.tooltip {
    z-index: var(--z-tooltip);
}

/* Notifications */
.notification,
.toast {
    z-index: var(--z-notification);
}

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

/* Loading States */
.loading-overlay,
.spinner-overlay {
    z-index: var(--z-loading);
}

/* Sticky Elements */
.sticky-element {
    z-index: var(--z-sticky);
}

/* Fixed Elements */
.fixed-element {
    z-index: var(--z-fixed);
}

/* Portfolio Specific */
.portfolio-modal {
    z-index: var(--z-modal);
}

.portfolio-modal-backdrop {
    z-index: var(--z-modal-backdrop);
}

/* EmotiAI Demo Components */
.emotiai-overlay {
    z-index: var(--z-overlay);
}

.emotiai-controls {
    z-index: calc(var(--z-overlay) + 10);
}

/* Contact Form */
.contact-form-overlay {
    z-index: var(--z-overlay);
}

.contact-form-modal {
    z-index: var(--z-modal);
}

/* OmniCreator Section */
.omnicreator-feature {
    z-index: var(--z-base);
}

.omnicreator-tooltip {
    z-index: var(--z-tooltip);
}

/* Utility Classes for Quick Application */
.z-base {
    z-index: var(--z-base) !important;
}

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

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

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

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

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

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

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

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

/* Helper Mixin-like Classes */
.bring-to-front {
    position: relative;
    z-index: var(--z-base);
}

.above-content {
    position: relative;
    z-index: calc(var(--z-base) + 1);
}

/* Debug Mode - Shows z-index values */
.debug-z-index {
    position: relative;
}

.debug-z-index::after {
    content: "z: " attr(data-z-index);
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    z-index: var(--z-debug);
    pointer-events: none;
}

/* Ensure proper stacking context */
.create-stacking-context {
    position: relative;
    z-index: 0;
}

/* Fix for common z-index issues */
.fix-safari-z-index {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Responsive z-index adjustments */
@media screen and (max-width: 768px) {
    /* Mobile-specific z-index adjustments if needed */
    .mobile-priority {
        z-index: calc(var(--z-header) + 100);
    }
}