/* Z-Index Hierarchy for Talesion Frontend
 * 
 * This file establishes a standardized z-index system to prevent
 * layering conflicts and ensure proper UI element stacking.
 * 
 * Usage: Use CSS custom properties in your components
 * Example: z-index: var(--z-modal);
 */

:root {
    /* Base Layer - Normal content flow */
    --z-base: 1;
    --z-content: 10;
    
    /* Interactive Elements */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    
    /* Canvas and Editor Elements */
    --z-canvas-background: 1040;
    --z-canvas-zones: 1050;
    --z-canvas-overlay: 1060;
    --z-canvas-controls: 1070;
    
    /* Notification and Feedback */
    --z-notification: 1080;
    --z-feedback: 1090;
    
    /* Modal System - Hierarchical */
    --z-modal-backdrop: 2000;
    --z-modal-standard: 2010;
    --z-modal-system: 2020;        /* Admin modals, error details */
    --z-modal-critical: 2030;      /* File upload, image crop */
    --z-modal-emergency: 2040;     /* Critical system alerts */
    
    /* Overlay System */
    --z-popover: 2050;
    --z-tooltip: 2060;
    --z-toast: 2070;
    
    /* Development and Debug */
    --z-debug: 9000;
    --z-dev-tools: 9010;
}

/* Helper Classes for Common Z-Index Values */
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal-standard { z-index: var(--z-modal-standard); }
.z-modal-system { z-index: var(--z-modal-system); }
.z-modal-critical { z-index: var(--z-modal-critical); }
.z-canvas-overlay { z-index: var(--z-canvas-overlay); }
.z-notification { z-index: var(--z-notification); }
.z-tooltip { z-index: var(--z-tooltip); }

/* Pointer Events Helpers */
.pointer-events-auto { pointer-events: auto !important; }
.pointer-events-none { pointer-events: none !important; }

/* Modal Interaction Helpers */
.modal-interactive {
    pointer-events: auto;
    position: relative;
    z-index: inherit;
}

.modal-backdrop {
    pointer-events: auto;
    z-index: var(--z-modal-backdrop);
}

.modal-content {
    pointer-events: auto;
    position: relative;
}

/* Debug Helper - Shows z-index values in development */
.debug-z-index::before {
    content: "z: " attr(data-z-index);
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 2px 4px;
    font-size: 10px;
    font-family: monospace;
    z-index: 9999;
}