/* Navbar Item Tooltips */
.navbar-item {
  position: relative;
}

.navbar-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background-color: white;
  color: #333;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  z-index: 9000;  /* Increased z-index to be higher than navbar */
  text-align: left;
  font-size: 0.9rem;
  margin-top: 12px;
  border-left: 3px solid #003366;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
}

/* Show tooltip on hover - only outside tutorial mode */
.navbar-item:hover .navbar-tooltip:not(.tutorial-disabled) {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tutorial-specific tooltip adjustments - positioned on left by default */
.tutorial-tooltip {
  position: absolute;
  top: 50% !important;   /* Use !important to override any other positioning */
  right: calc(100% + 15px); /* Position on left side of element */
  left: auto;
  transform: translateY(-50%) !important;  /* Force vertical centering */
  width: 250px;
  background-color: white;
  color: #333;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(0, 51, 102, 0.1);
  z-index: 10000;  /* Higher z-index for tutorial tooltips */
  text-align: left;
  font-size: 0.9rem;
  border-right: 3px solid #003366;
  border-left: none;
  pointer-events: none;
  margin-top: 0 !important;  /* Remove any margin that could affect positioning */
}

/* Arrow pointing up for standard tooltip */
.navbar-tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent white transparent;
  z-index: 9001;  /* One higher than tooltip */
}

/* Arrow pointing right for tutorial tooltip */
.tutorial-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px; /* Arrow on right edge pointing to element */
  left: auto;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent white;
  z-index: 10001;  /* One higher than tutorial tooltip */
}

/* Alternative positioning for tutorial tooltip when too close to left edge */
.tutorial-tooltip-right {
  right: auto;
  left: calc(100% + 15px);
  border-right: none;
  border-left: 3px solid #003366;
}

/* Arrow pointing left for right-positioned tutorial tooltip */
.tutorial-tooltip-right::before {
  right: auto;
  left: -8px;
  border-width: 8px 8px 8px 0;
  border-color: transparent white transparent transparent;
}

/* During tutorial, make dropdown elements visible */
.navbar-item.tutorial-active > div[x-show="open"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 9900 !important;  /* Between normal tooltips and tutorial tooltips */
}

/* Fix for tutorial-active items to ensure proper stacking */
.navbar-item.tutorial-active {
  z-index: 9800;  /* Ensure active tutorial items are above navbar but below tooltips */
  position: relative;
}

/* Ensure tutorial highlights appear above other elements */
.tutorial-highlight {
  z-index: 9500 !important;
  position: relative !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .navbar-tooltip, .tutorial-tooltip, .tutorial-tooltip-right {
    position: static;
    transform: none;
    width: auto;
    margin: 5px 0 5px 28px;
    border-left: 2px solid #003366;
    border-right: none;
    border-top: none;
    padding: 0 0 0 10px;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    font-size: 0.75rem;
    pointer-events: auto;
  }
  
  .navbar-tooltip::before,
  .tutorial-tooltip::before,
  .tutorial-tooltip-right::before {
    display: none;
  }
}