/**
 * Riva Z-Index System
 * 
 * Centralized z-index management to prevent conflicts and ensure
 * proper layering across all UI components.
 * 
 * IMPORTANT: This file should be loaded FIRST before any other CSS.
 * 
 * @package RivaClientPortal
 * @version 1.0.0
 */

:root {
    /* ========================================
     * Z-INDEX SCALE (0-100,000)
     * ========================================
     * 
     * WordPress Admin Bar: 99999
     * WordPress Admin Menu: 100000
     * 
     * Our scale:
     * - Base (0-10): Content layers
     * - Fixed (1000-1999): Sticky headers, sidebars
     * - Dropdown (10000-19999): Dropdowns, tooltips
     * - Modal (20000-29999): Modals, dialogs
     * - Toast (30000-39999): Notifications, toasts
     * - Admin (90000-99998): Admin UI (below WP admin bar)
     */
    
    /* Base Layers (0-10) */
    --riva-z-base: 1;
    --riva-z-background: 0;
    --riva-z-content: 1;
    --riva-z-above-content: 2;
    
    /* Fixed Elements (1000-1999) */
    --riva-z-sidebar: 900;
    --riva-z-header: 1100;
    --riva-z-topbar: 1100;
    --riva-z-sticky: 1200;
    --riva-z-fixed: 1500;
    
    /* Interactive Elements (10000-19999) */
    --riva-z-dropdown: 10100;
    --riva-z-popover: 10200;
    --riva-z-tooltip: 10300;
    --riva-z-select-dropdown: 10100;
    
    /* Overlays & Modals (20000-29999) */
    --riva-z-overlay: 20000;
    --riva-z-modal-backdrop: 20100;
    --riva-z-modal: 20200;
    --riva-z-modal-dialog: 20300;
    --riva-z-modal-close: 20400;
    
    /* Notifications & Alerts (30000-39999) */
    --riva-z-toast: 30000;
    --riva-z-notification: 30100;
    --riva-z-alert: 30200;
    
    /* Admin UI (90000-99998) */
    /* Must stay below WordPress Admin Bar (99999) */
    --riva-z-admin-overlay: 90000;
    --riva-z-admin-modal: 90100;
    
    /* Special Cases */
    --riva-z-loading-spinner: 25000; /* Above modals during loading */
    --riva-z-debug-panel: 99998; /* Just below WP admin bar */
    
    /* ========================================
     * Mobile Specific (rt- prefix)
     * ========================================*/
    --riva-z-mobile-sheet: 21000; /* Mobile bottom sheets */
    --riva-z-mobile-overlay: 20500; /* Mobile overlays */
    --riva-z-mobile-topbar: 1100; /* Mobile top bar */
    --riva-z-mobile-bottom-bar: 1100; /* Mobile bottom navigation */
}

/* ========================================
 * PORTAL PAGES
 * ======================================== */

/* Background gradient layer */
body.rcp-portal-page::before,
body.riva-portal-page::before {
    z-index: var(--riva-z-background) !important;
}

/* Main content */
.rcp-main,
.rcp-content {
    z-index: var(--riva-z-content) !important;
}

/* Sidebar */
.rcp-sidebar {
    z-index: var(--riva-z-sidebar) !important;
}

/* Header & Topbar */
.rcp-header,
.rcp-topbar {
    z-index: var(--riva-z-header) !important;
}

/* Dropdowns */
.rcp-notifications__dropdown,
.rcp-user-menu__dropdown,
.rcp-dropdown,
.rcp-select__dropdown,
.rcp-client-selector__dropdown {
    z-index: var(--riva-z-dropdown) !important;
}

/* Tooltips */
.rcp-tooltip,
[data-tooltip]::after {
    z-index: var(--riva-z-tooltip) !important;
}

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

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

.rcp-modal__dialog {
    z-index: var(--riva-z-modal-dialog) !important;
    position: relative; /* Establish stacking context */
}

.rcp-modal__close {
    z-index: var(--riva-z-modal-close) !important;
    position: relative;
}

/* Toasts & Notifications */
.rcp-toast,
.rcp-notification,
.riva-toast {
    z-index: var(--riva-z-toast) !important;
}

/* Loading Spinner */
.rcp-loading,
.rcp-spinner-overlay {
    z-index: var(--riva-z-loading-spinner) !important;
}

/* ========================================
 * MOBILE VIEW (rt- prefix)
 * ======================================== */

/* Mobile overlay */
.rt-overlay {
    z-index: var(--riva-z-mobile-overlay) !important;
}

/* Mobile sheets */
.rt-sheet {
    z-index: var(--riva-z-mobile-sheet) !important;
}

/* Mobile topbar */
.rt-topbar {
    z-index: var(--riva-z-mobile-topbar) !important;
}

/* Mobile bottom bar */
.rt-bottom-bar {
    z-index: var(--riva-z-mobile-bottom-bar) !important;
}

/* ========================================
 * ADMIN PAGES
 * ======================================== */

/* Keep WordPress admin elements above our UI */
#wpadminbar,
#adminmenuwrap,
#adminmenu,
.ui-dialog,
.wp-pointer {
    /* WordPress default: 99999-100000 */
    /* Don't override, just ensure ours stay below */
}

/* Admin page modals (below WP admin bar) */
body.wp-admin .rcp-modal {
    z-index: var(--riva-z-admin-modal) !important;
}

body.wp-admin .rcp-modal-backdrop {
    z-index: var(--riva-z-admin-overlay) !important;
}

/* Prevent portal background in admin */
body.wp-admin::before {
    content: none !important;
    z-index: auto !important;
}

/* ========================================
 * POINTER EVENTS FIX
 * ======================================== */

/* Ensure modals are clickable */
.rcp-modal.is-open {
    pointer-events: auto !important;
}

.rcp-modal:not(.is-open) {
    pointer-events: none !important;
}

/* Backdrop should block clicks to content below */
.rcp-modal-backdrop.is-open {
    pointer-events: auto !important;
}

.rcp-modal-backdrop:not(.is-open) {
    pointer-events: none !important;
}

/* Mobile overlay pointer events */
.rt-overlay[aria-hidden="false"] {
    pointer-events: auto !important;
}

.rt-overlay[aria-hidden="true"] {
    pointer-events: none !important;
}

/* ========================================
 * STACKING CONTEXT FIX
 * ======================================== */

/* 
 * Fix: Some elements create new stacking contexts which can
 * interfere with z-index. Ensure modal containers don't have
 * transform, opacity, or other properties that create contexts.
 */

.rcp-modal,
.rcp-modal-backdrop,
.rt-overlay {
    /* Reset properties that create stacking contexts */
    transform: none;
    will-change: auto;
}

/* Only the dialog should have transforms (for animation) */
.rcp-modal__dialog {
    /* Transform is OK here - within modal's stacking context */
}

/* ========================================
 * DEBUG HELPERS (Development only)
 * ======================================== */

/* Show z-index in development (add .debug-z-index to body) */
body.debug-z-index .rcp-modal::before {
    content: "z-index: " attr(data-z-index);
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(255,0,0,0.8);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    font-family: monospace;
    pointer-events: none;
    z-index: 99999;
}

/* ========================================
 * COMPATIBILITY
 * ======================================== */

/* Ensure compatibility with other plugins */
.rcp-modal,
.rcp-modal-backdrop {
    /* Prevent other plugins from affecting our modals */
    isolation: isolate;
}

/* Fix for plugins that use high z-index for dropdowns */
.rcp-modal.is-open ~ * {
    /* Content behind modal should not interfere */
    pointer-events: none;
}

.rcp-modal.is-open {
    /* Modal itself should be interactive */
    pointer-events: auto;
}