/*
 * Sierra NSP — single standard hover/focus tooltip.
 *
 * One class for the whole app: add `class="tix-tooltip"` and `data-tip="…"`.
 * Loaded globally from body_open.php. This replaces the former per-page copies
 * (.score-tooltip, .p3-tooltip, .roster-tooltip, .eds-tooltip), which were
 * near-identical duplicates of this same pattern.
 *
 * Modifiers:
 *   .tix-tooltip--wide   long text — wraps instead of one nowrap line
 *   .tix-tooltip--below  bubble appears below the element instead of above
 *
 * Theming: the bubble colors come from --tix-tooltip-bg/fg, defined here for
 * light, explicit dark (body.theme-dark), and system dark (no theme class).
 */

:root {
  --tix-tooltip-bg: #11100e;
  --tix-tooltip-fg: #f7f3ea;
  --tix-tooltip-border: transparent;
  --tix-tooltip-ring: 0 0 0 0 transparent;
}
body.theme-dark {
  /* Lighter slate-blue that echoes the row-hover tint so the edge no longer
     bleeds into the dark page background; light-blue outline + ring match a
     focused input. */
  --tix-tooltip-bg: #26375c;
  --tix-tooltip-fg: #f8fafc;
  --tix-tooltip-border: #60a5fa;
  --tix-tooltip-ring: 0 0 0 3px rgba(96, 165, 250, 0.22);
}
@media (prefers-color-scheme: dark) {
  body:not(.theme-light) {
    --tix-tooltip-bg: #26375c;
    --tix-tooltip-fg: #f8fafc;
    --tix-tooltip-border: #60a5fa;
    --tix-tooltip-ring: 0 0 0 3px rgba(96, 165, 250, 0.22);
  }
}

.tix-tooltip {
  position: relative;
}

.tix-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--tix-tooltip-bg);
  color: var(--tix-tooltip-fg);
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--tix-tooltip-border, transparent);
  font-size: 11px;
  font-family: Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), var(--tix-tooltip-ring, 0 0 0 0 transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 30030;
}

.tix-tooltip::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--tix-tooltip-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 30030;
}

.tix-tooltip:hover::after,
.tix-tooltip:hover::before,
.tix-tooltip:focus-visible::after,
.tix-tooltip:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Long text — wrap to a bounded box instead of one long line. */
.tix-tooltip--wide::after {
  white-space: normal;
  width: max-content;
  max-width: min(240px, 86vw);
  text-align: left;
}

/* Bubble below the element (e.g. header controls near the top of a table). */
.tix-tooltip--below::after {
  top: calc(100% + 8px);
  bottom: auto;
}
.tix-tooltip--below::before {
  top: calc(100% + 2px);
  bottom: auto;
  border-top-color: transparent;
  border-bottom-color: var(--tix-tooltip-bg);
}
.tix-tooltip--below:hover::after,
.tix-tooltip--below:hover::before,
.tix-tooltip--below:focus-visible::after,
.tix-tooltip--below:focus-visible::before {
  transform: translateX(-50%) translateY(2px);
}

/*
 * Edge-anchored variants for elements near a viewport/container edge, where the
 * default centered bubble would overflow and get clipped/unreadable.
 *   .tix-tooltip--start  bubble's LEFT edge aligns to the element, grows right
 *                        (use for controls in a left column / near the left edge)
 *   .tix-tooltip--end    bubble's RIGHT edge aligns to the element, grows left
 * The arrow (::before) stays centered on the element. Compose with --wide/--below.
 */
.tix-tooltip--start::after {
  left: 0;
  right: auto;
  transform: translateX(0);
}
.tix-tooltip--start:hover::after,
.tix-tooltip--start:focus-visible::after {
  transform: translateX(0) translateY(-2px);
}
.tix-tooltip--end::after {
  left: auto;
  right: 0;
  transform: translateX(0);
}
.tix-tooltip--end:hover::after,
.tix-tooltip--end:focus-visible::after {
  transform: translateX(0) translateY(-2px);
}