/* Tooltip — pure CSS hover tooltip with optional JS smart-flip enhancement */

/* === Wrapper === */
.tooltip {
  position: relative;
  display: inline-flex;
}

/* === Bubble (::after) === */
.tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 9999;

  /* dark theme (default) */
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 200px;
  pointer-events: none;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

/* multiline: longer text can wrap */
.tooltip[data-tooltip-multiline]::after {
  white-space: normal;
  max-width: 280px;
}

/* light theme */
.tooltip-light[data-tooltip]::after {
  background: #fff;
  color: #333;
  border: 1px solid #e2e2e2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* === Arrow (::before) === */
.tooltip[data-tooltip]::before {
  content: '';
  position: absolute;
  z-index: 10000;
  width: 0;
  height: 0;
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* dark arrow (default) */
.tooltip[data-tooltip]::before {
  border: 5px solid transparent;
}

/* light arrow */
.tooltip-light[data-tooltip]::before {
  border: 5px solid transparent;
}

/* === Show on hover / focus-visible === */
.tooltip[data-tooltip]:hover::after,
.tooltip[data-tooltip]:hover::before,
.tooltip[data-tooltip]:focus-visible::after,
.tooltip[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   Position: top (default)
   Bubble above, arrow pointing down
   ======================================== */
.tooltip[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::after,
.tooltip-top[data-tooltip]::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
.tooltip[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right):hover::after,
.tooltip-top[data-tooltip]:hover::after,
.tooltip[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right):focus-visible::after,
.tooltip-top[data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* Arrow down (top position) */
.tooltip[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before,
.tooltip-top[data-tooltip]::before {
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border-top-color: rgba(0, 0, 0, 0.85);
}
.tooltip[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right):hover::before,
.tooltip-top[data-tooltip]:hover::before,
.tooltip[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right):focus-visible::before,
.tooltip-top[data-tooltip]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}
/* light arrow down */
.tooltip-light.tooltip-top[data-tooltip]::before,
.tooltip-light[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before {
  border-top-color: #e2e2e2;
}

/* ========================================
   Position: bottom
   Bubble below, arrow pointing up
   ======================================== */
.tooltip-bottom[data-tooltip]::after {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
.tooltip-bottom[data-tooltip]:hover::after,
.tooltip-bottom[data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

.tooltip-bottom[data-tooltip]::before {
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-bottom-color: rgba(0, 0, 0, 0.85);
}
.tooltip-bottom[data-tooltip]:hover::before,
.tooltip-bottom[data-tooltip]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}
.tooltip-light.tooltip-bottom[data-tooltip]::before {
  border-bottom-color: #e2e2e2;
}

/* ========================================
   Position: left
   Bubble to the left, arrow pointing right
   ======================================== */
.tooltip-left[data-tooltip]::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
.tooltip-left[data-tooltip]:hover::after,
.tooltip-left[data-tooltip]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

.tooltip-left[data-tooltip]::before {
  right: calc(100% - 2px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  border-left-color: rgba(0, 0, 0, 0.85);
}
.tooltip-left[data-tooltip]:hover::before,
.tooltip-left[data-tooltip]:focus-visible::before {
  transform: translateY(-50%) translateX(0);
}
.tooltip-light.tooltip-left[data-tooltip]::before {
  border-left-color: #e2e2e2;
}

/* ========================================
   Position: right
   Bubble to the right, arrow pointing left
   ======================================== */
.tooltip-right[data-tooltip]::after {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
.tooltip-right[data-tooltip]:hover::after,
.tooltip-right[data-tooltip]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

.tooltip-right[data-tooltip]::before {
  left: calc(100% - 2px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  border-right-color: rgba(0, 0, 0, 0.85);
}
.tooltip-right[data-tooltip]:hover::before,
.tooltip-right[data-tooltip]:focus-visible::before {
  transform: translateY(-50%) translateX(0);
}
.tooltip-light.tooltip-right[data-tooltip]::before {
  border-right-color: #e2e2e2;
}