/* Tooltip container */
.tooltip-container {
  position: relative;
  display: inline-block;
}

/* Tooltip styling */
.tooltip {
  background-color: white;
  border: 1px solid #e5e7eb; /* gray-300 */
  border-radius: 0.375rem;
  padding: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  width: 15rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  max-height: 80vh; /* Prevent tooltips from being taller than the viewport */
  overflow-y: auto; /* Allow scrolling if content is too long */
}

/* Desktop tooltip positioning (default) */
.tooltip-desktop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile tooltip positioning */
.tooltip-mobile {
  position: fixed;
  left: 50vw;
  transform: translateX(-50%);
  max-width: 90vw; /* Prevent tooltip from extending beyond screen edges */
  width: 90vw;
}

/* Tooltip positioned below when near top of screen */
.tooltip-below {
  top: 100%;
  margin-top: 0.5rem;
  bottom: auto;
}

/* Tooltip positioned above when near bottom of screen */
.tooltip-above {
  bottom: 100%;
  margin-bottom: 0.5rem;
  top: auto;
}

/* Close button */
.tooltip-close {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  color: #6b7280; /* gray-500 */
  cursor: pointer;
}

.tooltip-close:hover {
  color: #374151; /* gray-700 */
}

@media (max-width: 767px) {
  /* Additional mobile-specific styling */
  .tooltip {
    width: 90vw;
  }
  
  /* Ensure tooltips don't get cut off at screen edges on mobile */
  .tooltip-container {
    position: static; /* Allow tooltips to position relative to viewport instead of container */
  }
  
  /* Hide tooltip containers when layout stacks */
  .tooltip-container {
    display: none;
  }
}