/* ============================================================
   Z-INDEX SCALE — Global hierarchy for all layered elements
   Version: 1.0.0

   This file provides a consistent z-index strategy to prevent
   layering conflicts and ensure proper stacking context.

   Rule: Always use these variables instead of hardcoded z-index
   ============================================================ */

:root {
    /* Dropdown menus and temporary overlays */
    --z-dropdown: 1050;

    /* Filter sidebar drawer (tablet view) */
    --z-filter-drawer: 100;

    /* Modal backdrops (semi-transparent overlays) */
    --z-modal-backdrop: 1000;

    /* Modal content (above backdrop) */
    --z-modal: 1001;

    /* Floating action buttons (FAB) and persistent UI */
    --z-fab: 999;

    /* Tooltips and popovers */
    --z-tooltip: 1100;

    /* Full-screen overlays (video, lightbox) */
    --z-fullscreen: 1200;

    /* Sticky headers and fixed navigation — intentionally very high */
    --z-sticky-header: 10001;

    /* Toast notifications and transient messages */
    --z-notification: 9998;
}

/* ============================================================
   APPLY VARIABLES TO EXISTING ELEMENTS
   ============================================================ */

.main-header {
    z-index: var(--z-sticky-header) !important;
}

.dropdown-menu {
    z-index: var(--z-dropdown);
}

.filter-sidebar {
    z-index: var(--z-filter-drawer);
}

.notification,
.toast {
    z-index: var(--z-notification);
}

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

.modal-content {
    z-index: var(--z-modal);
}

.floating-action-button,
.fab {
    z-index: var(--z-fab);
}

.tooltip {
    z-index: var(--z-tooltip);
}

/* Ensure no conflicts with specific instances */
.dropdown-menu.show {
    z-index: var(--z-dropdown);
}

.cookie-wall-overlay {
    z-index: var(--z-modal-backdrop);
}

.cookie-wall-content {
    z-index: var(--z-modal);
}