/**
 * Z-Index Layer System for 1Coloc
 *
 * Centralized z-index management to prevent conflicts and maintain a clear stacking hierarchy.
 *
 * USAGE:
 * - Use these CSS variables instead of arbitrary z-index values
 * - Add new layers here if needed, maintaining the hierarchy
 * - Document the purpose of each layer
 *
 * HIERARCHY (from bottom to top):
 * 1. Base content (z-0 to z-9)
 * 2. Dropdowns & Tooltips (z-10 to z-19)
 * 3. Sticky elements (z-20 to z-29)
 * 4. Fixed elements (z-30 to z-39)
 * 5. Navigation (z-40 to z-49)
 * 6. Overlays & Backdrops (z-50 to z-59)
 * 7. Modals (z-60 to z-69)
 * 8. Popovers (z-70 to z-79)
 * 9. Toasts & Notifications (z-80 to z-89)
 * 10. Lightbox & Full-screen viewers (z-90 to z-99)
 */

:root {
    /* ========================================
       LAYER 0-9: BASE CONTENT
       Content that should stay behind everything
       ======================================== */
    --z-base: 0;
    --z-behind: -1;

    /* ========================================
       LAYER 10-19: DROPDOWNS & TOOLTIPS
       Small contextual UI elements
       ======================================== */
    --z-dropdown: 10;
    --z-tooltip: 15;

    /* ========================================
       LAYER 20-29: STICKY ELEMENTS
       Elements that stick on scroll
       ======================================== */
    --z-sticky: 20;
    --z-sticky-sidebar: 25;

    /* ========================================
       LAYER 30-39: FIXED ELEMENTS
       Fixed position elements (not nav)
       ======================================== */
    --z-fixed: 30;

    /* ========================================
       LAYER 1005-1015: MOBILE FIXED ELEMENTS
       Must be above Leaflet map (200-1000) but below navbar (1020)
       ======================================== */
    --z-mobile-cta: 1010; /* Mobile fixed CTA bar at bottom */
    --z-mobile-toggle: 1015; /* Mobile view toggle bar (list/map) */

    /* ========================================
       LAYER 1000-1019: MAP ELEMENTS
       Leaflet map uses z-200 to z-1000 internally
       ======================================== */
    --z-map-controls: 1000; /* Map search button, fullscreen button - above Leaflet layers */

    /* ========================================
       LAYER 1020-1029: NAVIGATION
       Navigation must be above map to prevent map from covering nav on scroll
       ======================================== */
    --z-navbar: 1020;
    --z-user-menu: 1025; /* User dropdown in navbar */

    /* ========================================
       LAYER 1030-1039: OVERLAYS & BACKDROPS
       Semi-transparent overlays (must be above navbar)
       ======================================== */
    --z-overlay: 1030;
    --z-mobile-overlay: 1031; /* Mobile menu backdrop */
    --z-mobile-menu: 1032; /* Mobile menu panel */
    --z-mobile-sidebar: 1033; /* Mobile sidebar - above overlay backdrop */
    --z-backdrop: 1035;

    /* ========================================
       LAYER 1040-1049: MODALS
       Modal dialogs (auth, onboarding, etc.)
       ======================================== */
    --z-modal: 1040;
    --z-modal-content: 1045;

    /* ========================================
       LAYER 1050-1059: POPOVERS
       Contextual popups that appear above modals
       ======================================== */
    --z-popover: 1050;

    /* ========================================
       LAYER 1060-1069: TOASTS & NOTIFICATIONS
       Temporary notification messages
       ======================================== */
    --z-toast: 1060;
    --z-notification: 1065;

    /* ========================================
       LAYER 1070-1079: LIGHTBOX & FULL-SCREEN
       Full-screen viewers (photo lightbox, etc.)
       ======================================== */
    --z-lightbox: 1070;
    --z-lightbox-controls: 1075; /* Close button, navigation arrows */

    /* ========================================
       LAYER 10000: MAXIMUM PRIORITY
       Use sparingly for absolute top priority
       ======================================== */
    --z-maximum: 10000;
}

/* ========================================
   UTILITY CLASSES
   Tailwind-compatible classes using variables
   ======================================== */

.z-base { z-index: var(--z-base) !important; }
.z-behind { z-index: var(--z-behind) !important; }
.z-dropdown { z-index: var(--z-dropdown) !important; }
.z-tooltip { z-index: var(--z-tooltip) !important; }
.z-sticky { z-index: var(--z-sticky) !important; }
.z-sticky-sidebar { z-index: var(--z-sticky-sidebar) !important; }
.z-fixed { z-index: var(--z-fixed) !important; }
.z-mobile-cta { z-index: var(--z-mobile-cta) !important; }
.z-mobile-toggle { z-index: var(--z-mobile-toggle) !important; }
.z-map-controls { z-index: var(--z-map-controls) !important; }
.z-navbar { z-index: var(--z-navbar) !important; }
.z-user-menu { z-index: var(--z-user-menu) !important; }
.z-overlay { z-index: var(--z-overlay) !important; }
.z-mobile-overlay { z-index: var(--z-mobile-overlay) !important; }
.z-mobile-menu { z-index: var(--z-mobile-menu) !important; }
.z-mobile-sidebar { z-index: var(--z-mobile-sidebar) !important; }
.z-backdrop { z-index: var(--z-backdrop) !important; }
.z-modal { z-index: var(--z-modal) !important; }
.z-modal-content { z-index: var(--z-modal-content) !important; }
.z-popover { z-index: var(--z-popover) !important; }
.z-toast { z-index: var(--z-toast) !important; }
.z-notification { z-index: var(--z-notification) !important; }
.z-lightbox { z-index: var(--z-lightbox) !important; }
.z-lightbox-controls { z-index: var(--z-lightbox-controls) !important; }
.z-maximum { z-index: var(--z-maximum) !important; }