/* ═══════════════════════════════════════════════════════════════════════════
   Z-INDEX MASTER FILE - Single Source of Truth
   ═══════════════════════════════════════════════════════════════════════════

   ALL z-index values for modals, overlays, and floating elements go HERE.
   Do NOT define z-index values in other CSS files or inline styles.

   HIERARCHY (lowest to highest):
   ───────────────────────────────────────────────────────────────────────────
   Layer 1: Page Content         (default, no z-index needed)
   Layer 2: Sticky Headers        1000-1029
   Layer 3: Dropdowns/Tooltips    1030-1049  (Bootstrap default)
   Layer 4: Fixed Elements        1050-1079  (sidebars, drawers)
   Layer 5: Modal Backdrops       1080-1089
   Layer 6: Modals                1090-1099
   Layer 7: Popovers/Toasts       1100-1109
   Layer 8: Preview Overlays      9990-9999  (legacy, kept for compatibility)

   MODAL STACK (all modals use same backdrop/modal layers):
   - Backdrop: 1080
   - All modals: 1090 (they don't stack, only one modal at a time)
   - Nested modal backdrop: 1085
   - Nested modal: 1095

   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────────────
     CSS Custom Properties for z-index values
     Use these variables instead of hardcoded numbers!
     ───────────────────────────────────────────────────────────────────────── */

  /* Sticky elements (headers, navs) */
  --z-sticky: 1020;

  /* Bootstrap dropdowns/tooltips (don't change, Bootstrap expects this) */
  --z-dropdown: 1030;
  --z-tooltip: 1040;

  /* Fixed sidebars and drawers */
  --z-sidebar: 1050;
  --z-drawer: 1055;

  /* Modal system - UNIFIED for all modals */
  --z-modal-backdrop: 1080;
  --z-modal: 1090;

  /* Nested/stacked modals (e.g., flag modal inside chat modal) */
  --z-modal-nested-backdrop: 1085;
  --z-modal-nested: 1095;

  /* Toast notifications and popovers */
  --z-toast: 1100;
  --z-popover: 1100;

  /* Preview watermark (legacy - high number for backwards compatibility) */
  --z-preview-watermark: 9998;
  --z-preview-banner: 9999;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL MODAL RULES
   All modals use these values - no exceptions, no per-modal overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bootstrap modal backdrop */
.modal-backdrop {
  z-index: var(--z-modal-backdrop) !important;
}

/* All Bootstrap modals */
.modal {
  z-index: var(--z-modal) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPECIFIC ELEMENT OVERRIDES
   Only use these for elements that need special handling
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ava Chat Drawer (mobile full-screen) - fixed element, not a modal */
#ava-chat-drawer {
  z-index: var(--z-drawer) !important;
}

/* Flag Modal (nested inside Ava chat context) */
#avaFlagModal {
  z-index: var(--z-modal-nested) !important;
}

/* Preview watermark and banner (legacy high values) */
.preview-watermark {
  z-index: var(--z-preview-watermark) !important;
}

.preview-banner {
  z-index: var(--z-preview-banner) !important;
}

/* Toast notifications */
.toast-container,
.alert[style*="position: fixed"] {
  z-index: var(--z-toast) !important;
}