/* Global Tooltip Fix - Ensures tooltips are always visible above all content */

/* Force maximum z-index for all DaisyUI tooltips */
.tooltip::before,
.tooltip:before {
  position: fixed !important;
  z-index: 999999 !important;
  max-width: 250px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

/* Fix for custom tooltip-content used in InteractiveWord component */
.tooltip-content {
  position: fixed !important;
  z-index: 999999 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(15px) !important;
}

/* Fix pronunciation tooltips specifically - positioning handled by JavaScript */
.interactive-word .tooltip-content {
  z-index: 999999 !important;
}

/* Ensure custom tooltips with arrows are also visible */
.tooltip-content::after {
  z-index: 999998 !important;
}

.tooltip::after,
.tooltip:after {
  position: fixed !important;
  z-index: 999998 !important;
}

/* Ensure tooltip container doesn't interfere */
.tooltip {
  position: relative !important;
  overflow: visible !important;
  z-index: 999999 !important;
}

/* Override any parent container that might hide tooltips */
.tooltip * {
  overflow: visible !important;
}

/* Prevent containers from creating stacking contexts that interfere with tooltips */
.card:has(.tooltip),
.container:has(.tooltip),
.flex:has(.tooltip),
.grid:has(.tooltip),
header:has(.tooltip),
.sticky:has(.tooltip) {
  transform: none !important;
  contain: none !important;
  overflow: visible !important;
}

/* Specific positioning fixes for header tooltips */
header .tooltip::before,
header .tooltip:before {
  transform: translateX(-50%) translateY(calc(100% + 8px)) !important;
  top: 100% !important;
  left: 50% !important;
  bottom: auto !important;
  margin-top: 0 !important;
}

header .tooltip::after,
header .tooltip:after {
  transform: translateX(-50%) translateY(calc(100% + 4px)) !important;
  top: 100% !important;
  left: 50% !important;
  bottom: auto !important;
  margin-top: 0 !important;
  border-color: transparent transparent currentColor transparent !important;
}

/* Fix for sticky headers */
.sticky .tooltip::before,
.sticky .tooltip:before {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Ensure tooltips work in overflow hidden containers */
.overflow-hidden .tooltip::before,
.overflow-hidden .tooltip:before,
.overflow-auto .tooltip::before,
.overflow-auto .tooltip:before,
.overflow-scroll .tooltip::before,
.overflow-scroll .tooltip:before {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Reset any transforms on tooltip parents */
.tooltip:hover {
  transform: none !important;
}

/* Ensure tooltips escape flexbox and grid containers */
.flex .tooltip::before,
.flex .tooltip:before,
.grid .tooltip::before,
.grid .tooltip:before {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  .tooltip::before,
  .tooltip:before {
    max-width: 200px !important;
    font-size: 0.7rem !important;
    padding: 0.375rem 0.5rem !important;
  }
  
  /* Show tooltips below on mobile for better visibility */
  .tooltip::before,
  .tooltip:before {
    transform: translateX(-50%) translateY(calc(100% + 8px)) !important;
    top: 100% !important;
    bottom: auto !important;
  }
  
  .tooltip::after,
  .tooltip:after {
    transform: translateX(-50%) translateY(calc(100% + 4px)) !important;
    top: 100% !important;
    bottom: auto !important;
    border-color: transparent transparent currentColor transparent !important;
  }
}

/* Debugging: Red outline for tooltips (remove in production) */
/*
.tooltip::before,
.tooltip:before {
  outline: 2px solid red !important;
  outline-offset: 2px !important;
}
*/