/**
 * Z-Index Management System
 * Hit the Theatre - Centralized z-index hierarchy
 * 
 * RULES:
 * - All z-index values MUST use CSS variables from this file
 * - Do NOT use arbitrary z-index values
 * - Lower layers: 0-999
 * - Middle layers: 1000-9999
 * - Top layers: 10000+
 * 
 * Updated: 2025-10-29
 */

:root {
    /* ========================================
       LAYER 1: Base Content (0-99)
       ======================================== */
    --z-base: 0;
    --z-content: 1;
    --z-carousel: 10;
    --z-carousel-nav: 11;
    
    /* ========================================
       LAYER 2: UI Elements (100-999)
       ======================================== */
    --z-dropdown: 100;
    --z-sticky-header: 200;
    --z-sidebar: 300;
    --z-fixed-footer: 400;
    
    /* ========================================
       LAYER 3: Overlays & Popups (1000-9999)
       ======================================== */
    --z-tooltip: 1000;
    --z-notification: 2000;
    --z-lightbox: 3000;
    --z-calendar-desktop: 3500;
    
    /* ========================================
       LAYER 4: Navigation & Header (10000-19999)
       ======================================== */
    --z-header: 10000;
    --z-header-search: 10010;
    --z-navigation: 10020;
    --z-navigation-dropdown: 10030;
    --z-mobile-nav: 10040;
    
    /* ========================================
       LAYER 5: Modals (20000-29999)
       ======================================== */
    --z-modal-backdrop: 20000;
    --z-modal-content: 20010;
    --z-calendar-modal: 20020;
    --z-seat-plan-modal: 20030;
    
    /* ========================================
       LAYER 6: Critical Alerts (30000+)
       ======================================== */
    --z-alert: 30000;
    --z-emergency: 40000;
}

/* ========================================
   Component-Specific Classes
   ======================================== */

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

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

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

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

.htt-mobile-nav {
    z-index: var(--z-mobile-nav) !important;
}

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

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

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

/* Desktop Calendar */
.htt-calendar-desktop {
    z-index: var(--z-calendar-desktop) !important;
}

/* Hide header when modal is active */
body.modal-active .htt-header,
body.modal-active .htt-navigation {
    z-index: 0 !important;
    pointer-events: none !important;
}

body.modal-active .htt-calendar-modal {
    z-index: var(--z-calendar-modal) !important;
    pointer-events: auto !important;
}

/* ========================================
   Debug Helper (Remove in production)
   ======================================== */
.z-debug::before {
    content: 'z-index: ' attr(data-z-index);
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 0 0 0 4px;
    pointer-events: none;
}