/**
 * SMUGGLER: MODAL MANAGER STYLES
 * Centralized z-index management and modal styling
 */

/* Z-Index Scale - Managed by ModalManager */
:root {
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 10000;
    --z-modal: 10010;
    --z-modal-content: 10020;
    --z-popover: 10030;
    --z-tooltip: 10040;
    --z-toast: 10050;

/* Modal Manager Overlay - Base backdrop */
.modal-manager-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.7);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    pointer-events: all;
    opacity: 0;
    transition: opacity 0.3s ease;

.modal-manager-backdrop.active {
    opacity: 1;

/* Ensure modals use consistent base z-index */
.modal,
.custom-dialog-overlay,
.mechanics-depth-metrics,
.npc-manager-modal,
.equipment-purchase-modal,
.cargo-purchase-modal,
.ship-upgrades-modal,
.scenario-builder-modal,
.onboarding-modal,
.image-modal {
    /* Z-index will be managed by ModalManager */
    /* Base z-index set here, but will be overridden by JS */
    z-index: var(--z-modal);

/* Modal content should be above backdrop */
.modal-content,
.custom-dialog,
.mechanics-depth-metrics > div {
    z-index: var(--z-modal-content);
    position: relative;

/* Prevent multiple backdrops */
.modal-manager-backdrop + .modal-manager-backdrop {
    display: none;

/* Stacked modal styling - dim previous modals */
.modal-manager-stacked .modal:not(:last-child),
.modal-manager-stacked .custom-dialog-overlay:not(:last-child) {
    opacity: 0.5;
    pointer-events: none;

/* Unified Widget - Special handling */
.unified-widget {
    /* Widget has its own z-index management */
    /* But should respect modal manager */
    z-index: calc(var(--z-modal) - 1) !important;

.unified-widget.open {
    /* When widget is open, it should be above modals */
    z-index: calc(var(--z-modal) + 5) !important;

/* Toast notifications - Always on top */
.toast,
.error-toast,
.notification {
    z-index: var(--z-toast) !important;

/* Tooltips - Above everything except toasts */
[data-tooltip],
.tooltip {
    z-index: var(--z-tooltip) !important;

/* Prevent body scroll when modals are open */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;

/* Modal fade animation */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);

    to {
        opacity: 1;
        transform: scale(1) translateY(0);

.modal.show,
.custom-dialog-overlay.show,
.mechanics-depth-metrics.visible {
    animation: modalFadeIn 0.3s ease-out;

/* Reduce visual fatigue - dim background more when multiple modals */
body.modal-stack-2 .modal-manager-backdrop {
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.85);

body.modal-stack-3 .modal-manager-backdrop {
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.9);

/* Warning indicator when too many modals */
.modal-stack-warning {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--color-warning);
    color: var(--color-bg-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    z-index: calc(var(--z-toast) + 1);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
    animation: slideInRight 0.3s ease-out;

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;

    to {
        transform: translateX(0);
        opacity: 1;

}}}}}}}}}}}}}}}}}}}}}}