/**
 * Layout Fixes - Prevent UI Overlapping
 * Ensures proper z-index hierarchy and spacing
 */

/* Hide accessibility widget - moved to Site Settings */
.a11y-widget,
#accessibility-widget {
  display: none !important;
}

/* Hide layout mode switcher */
.layout-switcher,
#layoutSwitcher,
.view-mode-controls {
  display: none !important;
}

/* Ensure header stays on top */
header {
  position: sticky;
  top: 0;
  z-index: 10000 !important;
}

/* Channel banner should be below header but above content */
.channel-banner-top,
#channel-banner-top {
  position: relative;
  z-index: 50 !important;
  margin-bottom: 0;
}

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

/* Grid layout should not overlap */
.grid {
  position: relative;
  z-index: 1;
}

/* Cards should have proper stacking */
.card {
  position: relative;
  z-index: 2;
}

/* Modals and overlays should be highest */
.modal,
.overlay,
.site-settings-modal {
  z-index: 100000 !important;
}

/* Chat settings should be above chat but below modals */
.chat-settings-panel {
  z-index: 10001 !important;
}

/* Activity settings */
.activity-settings-panel {
  z-index: 10001 !important;
}

/* Dropdown menus */
.account-dropdown-menu,
.language-dropdown-menu {
  z-index: 10002 !important;
}

/* Tooltips and mini profiles */
.mini-profile-card {
  z-index: 10003 !important;
}

/* Notifications badge */
.badge {
  position: absolute !important;
  z-index: 1 !important;
}

/* Ensure no element has excessive z-index causing overlap */
* {
  max-width: 100%;
}

/* Fix any floating elements that might overlap */
.float-fix::after {
  content: "";
  display: table;
  clear: both;
}

/* Prevent body overflow that might cause elements to stick out */
body {
  overflow-x: hidden;
  position: relative;
}

/* Ensure containers have proper positioning context */
.container {
  position: relative;
}

/* Fix for elements that might be absolutely positioned incorrectly */
[style*="position: absolute"][style*="top: 0"][style*="right: 0"] {
  z-index: auto !important;
}

/* Ensure achievement/reaction displays don't overlap header */
.achievement-showcase,
.reaction-display,
.emoji-counter {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 16px;
}

/* Floating emoji container */
#floating-emoji-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

/* Ensure floating emojis don't interfere with interactions */
.floating-emoji {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Ensure watch stats don't overlap with header/logo */
.watch-stats {
  top: 80px !important;
  left: 20px !important;
  z-index: 100 !important;
}

/* Hide reactions panel (using floating emojis instead) */
.reactions-panel {
  display: none !important;
}

/* Fix events card layout */
.events-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Ensure activity feed content is visible */
#activityFeed {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Fix leaderboard widget spacing */
#leaderboardWidget {
  margin-top: 12px;
}

/* Ensure guild widget spacing */
#guildWidget {
  margin-top: 12px;
}