/**
 * 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)
 *    Consent notice (750): above the memory reader, below auth
 * 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;

    /* The cookie notice waits for the welcome sheet / tour in the prompt queue
       (home/includes/prompt_queue.html), but on a memory or moment deep link
       it is asked for while the server-opened reader (tier 2) is already up.
       Under the reader it could not be answered, and the queue then held the
       "View in the app" prompt back for the whole visit. */
    --z-consent-notice: 750;

    --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: absolute;  /* Use absolute within the fixed modal-container for full coverage without affecting flex centering */
    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;
    }
}