/* ═══════════════════════════════════════════════════════════════════ Z-INDEX SCALE — Centralized Layering System ═══════════════════════════════════════════════════════════════════ RULES: 1. NEVER use raw z-index numbers — always use these variables. 2. Each layer has a clear purpose and MUST NOT be reused for others. 3. Higher layers ALWAYS appear above lower layers (no exceptions). 4. If you need a new layer, add it HERE — don't invent values. 5. Layers are spaced by 100 to allow sub-layers if needed. STACKING CONTEXT WARNING: CSS properties that create new stacking contexts: - position: fixed/sticky/absolute + z-index - transform (any value other than none) - opacity < 1 - filter / backdrop-filter - will-change: transform If your element is INSIDE a stacking context, its z-index is relative to that context — NOT the document. The fix is to move the element to directly (portal pattern). ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Layer 1: Content-level (inside page flow) ──────────────── */ --z-content: 1; /* Cards, relative elements */ --z-sticky: 10; /* Sticky table headers, pinned rows */ /* ── Layer 2: Navigation (always visible above content) ─────── */ --z-sidebar: 100; /* Sidebar panel */ --z-topbar: 200; /* Top navigation bar */ --z-bottombar: 200; /* Footer/status bar */ --z-ticker: 200; /* Ticker bar (same level as nav) */ /* ── Layer 3: Floating UI (above nav, interactive) ─────────── */ --z-dropdown: 300; /* Dropdown menus, select popups */ --z-tooltip: 350; /* Tooltips, popovers */ --z-notification: 400; /* Notification panel (slide-out) */ /* ── Layer 4: Mobile overlays ──────────────────────────────── */ --z-sidebar-overlay: 450; /* Dark backdrop behind mobile sidebar */ --z-sidebar-mobile: 500; /* Mobile sidebar (slides over content) */ /* ── Layer 5: Page-level overlays ──────────────────────────── */ --z-loading: 600; /* Full-page loading spinners */ --z-offline: 600; /* Offline banner */ --z-command-palette: 650; /* Command palette (Ctrl+K) */ /* ── Layer 6: Modals (block interaction with page) ─────────── */ --z-modal: 700; /* Standard modals (forms, editors) */ --z-modal-content: 701; /* Modal content box (above backdrop) */ /* ── Layer 7: Confirm/Alert (above any modal) ──────────────── */ --z-confirm: 800; /* Confirmation dialogs */ --z-alert: 800; /* Alert dialogs */ /* ── Layer 8: System-level (above everything) ──────────────── */ --z-toast: 900; /* Toast notifications */ --z-lightbox: 950; /* Image lightbox/viewer */ --z-splash: 980; /* App splash screen (initial load) */ --z-fatal: 999; /* Fatal error / kicked-out overlay */ } /* ═══════════════════════════════════════════════════════════════════ APPLIED Z-INDEX CLASSES ═══════════════════════════════════════════════════════════════════ */ /* Standard modals */ .modal { z-index: var(--z-modal); } /* Confirmation dialogs — MUST appear above modals */ .confirm-overlay { position: fixed; inset: 0; z-index: var(--z-confirm); display: flex; align-items: center; justify-content: center; } .confirm-overlay .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: var(--z-confirm); } .confirm-overlay .modal-box { position: relative; z-index: calc(var(--z-confirm) + 1); } /* Toast notifications — above everything */ .toast-container, #toast-container { z-index: var(--z-toast) !important; }