/**
 * Z-INDEX HIERARCHY FIXES
 * Resolves all overlapping issues identified in audit 2026-06-19
 * 
 * HIERARCHY (lowest to highest):
 * 0     - Background effects (orbs, grid)
 * 1-10  - Content layer (sticky sections, tooltips)
 * 100   - Sticky elements (ambient strip, section headers)
 * 200   - Sticky header
 * 250   - Graph tooltips
 * 500   - Advisor bubbles
 * 510   - Floating AI bubble
 * 999   - Mobile sidebar overlay
 * 1000  - Mobile sidebar
 * 1200  - Modal overlays
 * 9500  - Toast notifications
 * 9999  - Brain view
 * 10000 - Login screen (highest)
 */

/* ═══════════════════════════════════════════════════════════════════════
   CRITICAL FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* C-1: Fix Modal vs Mobile Sidebar Conflict */
.modal-overlay {
  z-index: 1200 !important; /* Above mobile sidebar */
}

/* C-2: Fix Toast vs Login Screen Conflict */
#loginScreen {
  z-index: 10000 !important; /* Highest UI layer */
}

.toast-container {
  z-index: 9500 !important; /* Below login, above everything else */
}

/* C-3: Fix Live Ticker Overlapping Header Content */
.live-ticker {
  position: relative;
  z-index: 1; /* Below header controls, above background */
}

/* Ensure ticker doesn't overlap header meta on mobile */
@media (max-width: 640px) {
  .live-ticker {
    order: -1; /* Force to top in flex layout */
  }
  
  #appHeader {
    flex-direction: column;
    height: auto;
    padding: 0;
  }
  
  .header-inner {
    width: 100%;
    padding: 0 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HIGH PRIORITY FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* H-1: Nav Item Hover Tooltips Below Modals */
.nav-item[data-full]:hover::after,
.nav-item[data-full-cn]:hover::after {
  z-index: 150 !important; /* Below modals, above content */
}

/* H-2: Advisor Bubbles Below AI Bubble */
.floating-ai-bubble {
  z-index: 510 !important; /* Primary action above advisors */
}

.advisor-bubbles {
  z-index: 500 !important;
}

/* H-3: Alerts Rail Spacing Fix */
.alerts-rail {
  position: relative;
  z-index: 5;
  margin-bottom: 8px; /* Reduce collision with briefing */
}

.proactive-brief {
  position: relative;
  z-index: 4;
  margin-top: 0; /* Remove top margin to prevent gap */
}

/* H-4: Ambient Status Strip Stacking Context */
.ambient-status-strip {
  position: relative;
  z-index: 3;
}

/* H-5: Header Above All Module Content */
#appHeader {
  z-index: 200 !important; /* Above all content sticky elements */
}

.dd-section-header {
  z-index: 10 !important; /* Below header */
  top: 60px; /* Below header height + padding */
}

/* H-6: Mobile Sidebar Overlay Visibility Fix */
.sidebar.mobile-open ~ .sidebar-overlay {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MEDIUM PRIORITY FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* M-1: Graph Tooltips Above Header */
.graph-tooltip {
  z-index: 250 !important; /* Above header when charts near top */
}

/* M-2: DD Section Header Sticky Collision */
.dd-section-header {
  position: sticky;
  top: 60px; /* Below header */
  z-index: 10;
}

/* M-3: Ensure PDF Viewer Modal is Highest */
#pdfViewerModal {
  z-index: 10001 !important;
}

/* M-4: Command Palette Below PDF Viewer */
.cmd-palette-overlay {
  z-index: 10000 !important;
}

/* M-5: Brain View Below Login */
#brainView {
  z-index: 9000 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ADDITIONAL LAYOUT FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* Ensure main content doesn't overlap header */
main {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: 0;
}

/* Fix sticky elements in scrollable containers */
.bento-cell {
  position: relative;
  z-index: auto; /* Reset stacking context */
}

/* Ensure dropdowns appear above cards */
.dropdown-menu,
.select-dropdown {
  z-index: 300 !important; /* Above header, below modals */
}

/* Fix advisor notification positioning */
.advisor-notification {
  z-index: 502 !important; /* Above advisor chat */
}

.advisor-chat-popup {
  z-index: 501 !important;
}

/* Ensure loading overlays appear correctly */
.loading-overlay {
  z-index: 9000; /* Below login, above everything else */
}

/* Fix mobile menu button visibility */
.mobile-menu-btn {
  position: relative;
  z-index: 201; /* Above header */
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Ensure mobile sidebar is accessible */
  .sidebar {
    z-index: 1000 !important;
  }
  
  .sidebar-overlay {
    z-index: 999 !important;
  }
  
  /* Fix header stacking on mobile */
  #appHeader {
    z-index: 200 !important;
  }
  
  /* Ensure modals work on mobile */
  .modal-overlay {
    z-index: 1200 !important;
  }
}

@media (max-width: 640px) {
  /* Fix ticker on mobile */
  .live-ticker {
    width: 100%;
    margin: 0;
  }
  
  /* Adjust header layout */
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   VISUAL POLISH
   ═══════════════════════════════════════════════════════════════════════ */

/* Ensure glassmorphism effects don't cause z-index issues */
.glass,
.glass-ambient {
  isolation: isolate; /* Create new stacking context */
}

/* Fix card hover states not obscuring content below */
.bento-cell:hover {
  z-index: 2 !important; /* Slightly above siblings */
}

/* Ensure interactive elements are always clickable */
button,
a,
input,
select,
textarea {
  position: relative;
  z-index: auto;
}

/* Fix floating action buttons */
.floating-action-btn {
  z-index: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   DEBUG HELPERS (Remove in production)
   ═══════════════════════════════════════════════════════════════════════ */

/* Uncomment to visualize z-index layers during development */
/*
#loginScreen::before { content: 'z-10000'; position: fixed; top: 0; left: 0; background: red; color: white; padding: 4px; font-size: 10px; }
.modal-overlay::before { content: 'z-1200'; position: fixed; top: 20px; left: 0; background: orange; color: white; padding: 4px; font-size: 10px; }
#appHeader::before { content: 'z-200'; position: fixed; top: 40px; left: 0; background: yellow; color: black; padding: 4px; font-size: 10px; }
*/

/* ═══════════════════════════════════════════════════════════════════════
   C-4 (Han 2026-06-21): Global Explorer search-results dropdown was UNCLICKABLE
   — a `.module-panel > div { z-index:1 }`-style rule put .global-search-wrap and
   the sibling .global-vessel-filter at the SAME z-index, so DOM order let the
   later filter tabs paint over the dropdown. Lift the search wrap (and thus its
   absolutely-positioned results) above the filter tabs.
   ═══════════════════════════════════════════════════════════════════════ */
#module-global .global-search-wrap { z-index: 60 !important; }
#module-global .global-vessel-filter { z-index: 1; }
#globalSearchResults { z-index: 1000 !important; }