/**
 * Z-Index Management System
 * Centralized z-index values using CSS custom properties
 * This prevents z-index conflicts and makes stacking order explicit
 */

:root {
    /* Base layers */
    --z-index-base: 1;
    --z-index-content: 10;

    /* Navigation */
    --z-index-nav: 1000;
    --z-index-dropdown: 1010;

    /* Overlays and modals */
    --z-index-overlay: 1040;
    --z-index-modal-backdrop: 1050;
    --z-index-modal: 1060;

    /* Toast notifications */
    --z-index-toast: 1070;

    /* Tooltips and popovers */
    --z-index-tooltip: 1080;
    --z-index-popover: 1090;

    /* Top layer (highest priority) */
    --z-index-top: 9999;
}

/* Apply z-index to common components */
.navbar {
    z-index: var(--z-index-nav);
}

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

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

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

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

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

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