/* ═══════════════════════════════════════════════════════════════
   htmxRazor Tooltip Component
   The wrapper [data-rhx-tooltip] is transparent (display: contents).
   The popup .rhx-tooltip is created/positioned by JS.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tooltip wrapper (tag helper output) ── */
[data-rhx-tooltip] {
  display: contents;
}

/* ══════════════════════════════════════════════════════════════
   TOOLTIP POPUP (injected by JS)
   ══════════════════════════════════════════════════════════════ */

.rhx-tooltip {
  position: fixed;
  z-index: var(--rhx-z-tooltip, 9000);
  max-width: 20rem;
  padding: var(--rhx-space-xs) var(--rhx-space-sm);
  background: var(--rhx-color-neutral-900);
  color: var(--rhx-color-text-inverse);
  font-family: var(--rhx-font-family);
  font-size: var(--rhx-font-size-xs);
  line-height: var(--rhx-line-height-tight);
  border-radius: var(--rhx-radius-sm);
  pointer-events: none;
  white-space: normal;
  word-wrap: break-word;
  opacity: 0;
  transition: opacity var(--rhx-transition-fast) ease;
}

.rhx-tooltip--visible {
  opacity: 1;
}

/* ── Arrow ── */
.rhx-tooltip__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--rhx-color-neutral-900);
  transform: rotate(45deg);
}

/* Arrow placement */
.rhx-tooltip[data-placement="top"] .rhx-tooltip__arrow {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
}

.rhx-tooltip[data-placement="bottom"] .rhx-tooltip__arrow {
  top: -4px;
  left: 50%;
  margin-left: -4px;
}

.rhx-tooltip[data-placement="left"] .rhx-tooltip__arrow {
  right: -4px;
  top: 50%;
  margin-top: -4px;
}

.rhx-tooltip[data-placement="right"] .rhx-tooltip__arrow {
  left: -4px;
  top: 50%;
  margin-top: -4px;
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .rhx-tooltip {
    transition-duration: 0.01ms;
  }
}