/**
 * Z-INDEX SYSTEM - Organização Profissional de Camadas
 * Sistema centralizado de gerenciamento de sobreposição
 * Elite Financial System v10.0
 */

/* ============================================
   🎨 DESIGN #1: APLICAÇÃO DO SISTEMA DE Z-INDEX
   ============================================ */

/* LAYER -1: BACKGROUNDS */
#elegant-background,
.cosmic-background,
.animated-background {
    z-index: var(--z-background) !important;
}

/* LAYER 0: BASE */
.base-content {
    z-index: var(--z-base);
}

/* LAYER 1: CONTENT */
#app-wrapper,
.main-content,
.content-section {
    z-index: var(--z-content);
}

/* LAYER 10: ELEVATED CARDS */
.card,
.elite-card,
.elevated-card,
.cosmic-card {
    z-index: var(--z-elevated);
}

/* LAYER 50: DROPDOWNS & TOOLTIPS */
.dropdown,
.elite-dropdown,
.elite-lang-dropdown,
#lang-dropdown,
.tooltip,
.elite-tooltip {
    z-index: var(--z-dropdown) !important;
}

/* LAYER 100: STICKY ELEMENTS */
#elite-nav-bar,
.navbar,
.header-sticky,
.sticky-header {
    z-index: var(--z-sticky) !important;
}

#elite-nav-mobile {
    z-index: calc(var(--z-sticky) + 1) !important; /* Mobile menu acima da navbar */
}

/* LAYER 1000: MODAL BACKDROPS */
.modal-backdrop,
.elite-login-bg,
.overlay-backdrop {
    z-index: var(--z-modal-backdrop) !important;
}

/* LAYER 1100: MODALS */
#user-modal,
#lang-modal,
#password-modal,
.modal,
.elite-modal,
[role="dialog"] {
    z-index: var(--z-modal) !important;
}

/* Sub-modais (modais dentro de modais) */
.sub-modal,
.nested-modal {
    z-index: calc(var(--z-modal) + 10) !important;
}

/* LAYER 1200: POPOVERS */
.popover,
.elite-popover,
.context-menu {
    z-index: var(--z-popover) !important;
}

/* LAYER 9999: TOASTS */
#elite-toast-container,
.toast-container,
.notification-container {
    z-index: var(--z-toast) !important;
}

/* LAYER 10000: CRITICAL OVERLAYS */
#elite-splash-screen,
#elite-transition-overlay,
.critical-overlay,
.fullscreen-overlay {
    z-index: var(--z-critical) !important;
}

/* ============================================
   ELEMENTOS ESPECÍFICOS DO SISTEMA
   ============================================ */

/* Partículas de canvas em modais */
#user-modal-particles,
#lang-modal-particles,
#password-modal-particles,
.elite-login-particles,
.elite-card-particles {
    z-index: 0 !important; /* Sempre atrás do conteúdo do modal */
    position: absolute;
    pointer-events: none;
}

/* Conteúdo dentro de modais deve estar acima das partículas */
.modal > .relative,
.elite-modal > .relative,
.elite-user-card > canvas ~ * {
    position: relative;
    z-index: 10;
}

/* Botões de fechar em modais */
.modal-close,
.elite-nav-close,
[data-dismiss="modal"] {
    z-index: calc(var(--z-modal) + 50) !important;
}

/* Loading overlays */
.loading-overlay,
.spinner-overlay {
    z-index: calc(var(--z-modal) + 100) !important;
}

/* ============================================
   DEBUGGING HELPERS (comentar em produção)
   ============================================ */

/*
[style*="z-index"] {
    outline: 2px solid red !important;
}

[style*="z-index"]::before {
    content: "z: " attr(style);
    position: absolute;
    background: red;
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    top: 0;
    left: 0;
}
*/

/* ============================================
   FALLBACKS PARA COMPATIBILIDADE
   ============================================ */

/* Se variáveis CSS não suportadas (IE11) */
@supports not (z-index: var(--z-content)) {
    #elegant-background { z-index: -1 !important; }
    #app-wrapper { z-index: 1 !important; }
    .card { z-index: 10 !important; }
    .dropdown { z-index: 50 !important; }
    #elite-nav-bar { z-index: 100 !important; }
    .modal-backdrop { z-index: 1000 !important; }
    .modal { z-index: 1100 !important; }
    .popover { z-index: 1200 !important; }
    #elite-toast-container { z-index: 9999 !important; }
    #elite-splash-screen { z-index: 10000 !important; }
}

/* ============================================
   STACK CONTEXTS - Prevenir Problemas
   ============================================ */

/* Elementos que criam novo stacking context devem ter z-index explícito */
.transform-3d,
[style*="transform: translate"],
[style*="transform: rotate"],
[style*="filter"],
[style*="perspective"] {
    /* Herdar z-index do pai ou definir explicitamente */
    isolation: isolate; /* Cria novo stacking context */
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */

@media (max-width: 768px) {
    /* Mobile menu deve estar acima de tudo exceto splash/toast */
    #elite-nav-mobile {
        z-index: calc(var(--z-critical) - 1) !important;
    }

    /* Toasts devem estar acima do mobile menu */
    #elite-toast-container {
        z-index: var(--z-critical) !important;
    }
}

/* ============================================
   PRINT - Remover Z-INDEX
   ============================================ */

@media print {
    * {
        z-index: auto !important;
    }
}