/**
 * Metablox Z-Index System
 * =======================
 * Centralized z-index management for consistent layering across the app.
 *
 * IMPORTANT: Always use these CSS custom properties instead of hardcoded z-index values.
 *
 * Layer Hierarchy (lowest to highest):
 * ------------------------------------
 * 1. Base content (0-10)
 * 2. Sticky elements, cards (10-50)
 * 3. Dropdowns, tooltips, popovers (100-200)
 * 4. Fixed navigation, headers (300-400)
 * 5. Modal overlays/backdrops (500)
 * 6. Standard modals (600-700)
 * 7. Priority modals (auth, payment) (800-900)
 * 8. Critical overlays, notifications (1000)
 * 9. Accessibility (skip links) (100000)
 */

:root {
    /* Base Content Layers */
    --z-base: 1;
    --z-above-base: 2;
    --z-card: 10;
    --z-card-hover: 15;

    /* Interactive Elements */
    --z-dropdown: 100;
    --z-tooltip: 150;
    --z-popover: 200;

    /* Fixed UI Elements */
    --z-sticky: 300;
    --z-fixed-header: 350;
    --z-fixed-footer: 350;
    --z-bottom-nav: 400;

    /* Modal System - Core */
    --z-modal-backdrop: 500;
    --z-modal-content: 510;
    --z-modal-close: 520;

    /* Modal Tiers - For stacking multiple modals */
    --z-modal-tier-1: 600;           /* Welcome modal, general info modals */
    --z-modal-tier-1-content: 610;

    --z-modal-tier-2: 700;           /* Memory modal, content modals */
    --z-modal-tier-2-content: 710;

    --z-modal-tier-3: 800;           /* Auth modal, payment modals */
    --z-modal-tier-3-content: 810;

    --z-modal-tier-4: 900;           /* Confirmation dialogs on top of other modals */
    --z-modal-tier-4-content: 910;

    /* Critical Overlays */
    --z-notification: 1000;
    --z-toast: 1100;
    --z-loading-overlay: 1200;

    /* Accessibility - Always on top */
    --z-skip-link: 100000;
}

/* ==========================================
   Modal Container Base Styles
   ==========================================
   All modal containers should use these base styles.
   Specific modals should override z-index with tier-specific values.
*/

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal-tier-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-container .dark-overlay {
    position: fixed;  /* Use fixed instead of absolute for full coverage */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
}

.modal-container .modal {
    position: relative;
    z-index: var(--z-modal-content);
    background: white;
    border-radius: 16px;
    box-sizing: border-box;
}

/* ==========================================
   Modal Tier Classes
   ==========================================
   Apply these classes to modal-container elements
   to control their stacking order.
*/

/* Tier 1: General modals (welcome, info, etc.) */
.modal-container.modal-tier-1,
.modal-container#welcome-modal {
    z-index: var(--z-modal-tier-1);
}

.modal-container.modal-tier-1 .modal,
.modal-container#welcome-modal .modal {
    z-index: var(--z-modal-tier-1-content);
}

/* Tier 2: Content modals (memory, collection, etc.) */
.modal-container.modal-tier-2,
.modal-container#memory-modal,
.modal-container#collection-creation-mobile,
.modal-container#moment-form-wrapper,
.modal-container#recent-moments-display,
.modal-container#moment-streak-feedback {
    z-index: var(--z-modal-tier-2);
}

.modal-container.modal-tier-2 .modal,
.modal-container#memory-modal .modal,
.modal-container#collection-creation-mobile .modal,
.modal-container#moment-form-wrapper .modal,
.modal-container#recent-moments-display .modal,
.modal-container#moment-streak-feedback .modal {
    z-index: var(--z-modal-tier-2-content);
}

/* Memory Carousel - Full-screen memory viewer */
.memory-carousel {
    z-index: var(--z-modal-tier-2, 700);
}

.memory-carousel .dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.memory-carousel .carousel-wrapper {
    position: relative;
    z-index: 1;
}

/* Tier 3: Critical modals (auth, payment, wallet) */
.modal-container.modal-tier-3,
.modal-container#auth-modal,
.modal-container#payment-modal,
.modal-container#choose-wallet-modal,
.modal-container#credit-payment-modal {
    z-index: var(--z-modal-tier-3);
}

.modal-container.modal-tier-3 .modal,
.modal-container#auth-modal .modal,
.modal-container#payment-modal .modal,
.modal-container#choose-wallet-modal .modal,
.modal-container#credit-payment-modal .modal {
    z-index: var(--z-modal-tier-3-content);
}

/* Tier 4: Confirmation dialogs (delete, cancel, etc.) */
.modal-container.modal-tier-4,
.modal-container#confirm-delete-memory-desktop,
.modal-container#confirm-delete-modal,
.modal-container.confirm-modal-container {
    z-index: var(--z-modal-tier-4);
}

.modal-container.modal-tier-4 .modal,
.modal-container#confirm-delete-memory-desktop .modal,
.modal-container#confirm-delete-modal .modal,
.modal-container.confirm-modal-container .modal {
    z-index: var(--z-modal-tier-4-content);
}

/* ==========================================
   Utility Classes
   ========================================== */

/* Force a modal to be on top of everything except accessibility */
.modal-container.modal-priority {
    z-index: var(--z-notification);
}

.modal-container.modal-priority .modal {
    z-index: calc(var(--z-notification) + 10);
}

/* Loading overlay that covers modals */
.loading-overlay-global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: var(--z-loading-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Toast notifications */
.toast-notification {
    position: fixed;
    z-index: var(--z-toast);
}

/* ==========================================
   Mobile-Specific Adjustments
   ========================================== */

@media screen and (max-width: 812px) {
    /* Mobile modals often slide up from bottom */
    .modal-container .modal {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
    }

    /* Fullscreen mobile modals */
    .modal-container .modal.fullscreen {
        top: 0;
        max-height: 100%;
        border-radius: 0;
    }
}