/* ==========================================================================
   Z-INDEX LAYERING SYSTEM
   ========================================================================== */

:root {
    --z-base: 1;
    --z-card-overlay: 2;
    --z-card-top: 3;
    --z-profile-delete: 5;
    --z-storage-progress: 10;
    --z-nav-top: 100;
    --z-bottom-nav: 500;
    --z-reader: 999;
    --z-reader-nav: 1000;
    --z-modal: 10000;
    --z-toast: 20000;
}

/* Component Z-Index Mappings */
.login-wrapper {
    z-index: var(--z-base);
}

.profiles-wrapper > * {
    z-index: var(--z-base);
}

.search-wrapper::before {
    z-index: var(--z-base);
}

.card-overlay-top {
    z-index: var(--z-card-overlay);
}

.profile-delete-btn {
    z-index: var(--z-profile-delete);
}

.storage-delete-progress {
    z-index: var(--z-storage-progress);
}

.nav-bar {
    z-index: var(--z-nav-top);
}

.bottom-nav {
    z-index: var(--z-bottom-nav);
}

#reader-view {
    z-index: var(--z-reader);
}

.nav-bar.reader-nav {
    z-index: var(--z-reader-nav);
}

.reader-bottom-bar {
    z-index: var(--z-reader-nav);
}

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

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