/* === BASE TOOLTIP STYLES === */
.custom-tooltip {
  position: fixed;
  z-index: 9999;
  background: transparent;
  border: none;
  color: rgba(24, 23, 23, 0.98);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.25s ease;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  bottom: auto;
  left: auto;
  transform: translate(12px, -50%);
  width: max-content;
  max-width: 200px;
}

/* Tooltip container with blur-glass effect */
.custom-tooltip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: -1;
}

/* Tooltip content - smaller text with better padding */
.custom-tooltip-content {
  padding: 8px 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  position: relative;
  z-index: 1;
  font-size: 12px;
}

/* REMOVED TOOLTIP ARROW - No ::after pseudo-element for arrow */

/* Tooltip visible state */
.custom-tooltip.show {
  opacity: 1;
  transform: translate(12px, -50%);
}

/* === DARK MODE STYLES === */
@media (prefers-color-scheme: dark) {
  .custom-tooltip {
    color: rgba(255, 255, 255, 0.95);
  }
  
  .custom-tooltip::before {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.25),
      0 1px 4px rgba(0, 0, 0, 0.15);
  }
}

/* === POSITION VARIANTS === */

/* Top position */
.custom-tooltip.top {
  transform: translate(-50%, -8px);
}

.custom-tooltip.top.show {
  transform: translate(-50%, -12px);
}

/* Bottom position */
.custom-tooltip.bottom {
  transform: translate(-50%, 8px);
}

.custom-tooltip.bottom.show {
  transform: translate(-50%, 12px);
}

/* Left position */
.custom-tooltip.left {
  transform: translate(-8px, -50%);
}

.custom-tooltip.left.show {
  transform: translate(-12px, -50%);
}

/* Right position (default) */
.custom-tooltip.right {
  transform: translate(8px, -50%);
}

.custom-tooltip.right.show {
  transform: translate(12px, -50%);
}

/* === SIZE VARIANTS === */

/* Small variant - even more compact */
.custom-tooltip.small .custom-tooltip-content {
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.2;
}

/* Large variant - for longer content */
.custom-tooltip.large .custom-tooltip-content {
  padding: 10px 14px;
  font-size: 13px;
  white-space: normal;
  max-width: 220px;
  line-height: 1.4;
}

/* === MULTILINE SUPPORT === */
.custom-tooltip.multiline .custom-tooltip-content {
  white-space: normal;
  max-width: 180px;
  text-align: left;
  line-height: 1.4;
  font-size: 11px;
  padding: 8px 10px;
}

/* Compact multiline for small tooltips */
.custom-tooltip.small.multiline .custom-tooltip-content {
  padding: 6px 8px;
  font-size: 10px;
  max-width: 160px;
  line-height: 1.3;
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  .custom-tooltip {
    transition: opacity 0.1s ease;
  }
}

/* Hide native tooltips when custom tooltip is active */
body.custom-tooltip-active [title] {
  pointer-events: none;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
  .custom-tooltip {
    font-size: 11px;
    max-width: 160px;
  }
  
  .custom-tooltip-content {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .custom-tooltip.large .custom-tooltip-content {
    max-width: 180px;
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .custom-tooltip.multiline .custom-tooltip-content {
    max-width: 150px;
    font-size: 10px;
  }
}