/**
 * Tactical Overlays — Floating surface primitives
 *
 * Two primitives, token-driven, BEM:
 *   .tactical-tooltip — small hover metadata (single/short multi-line)
 *   .tactical-popover — click/hover-triggered rich container
 *
 * Rules enforced:
 *   - No 1px solid borders (containment via tonal surface + ambient shadow).
 *   - Background tier: --surface-container-high (default) or --surface-highest (--rich).
 *   - Shadow: --te-shadow-md (tooltip), --te-shadow-lg (popover).
 *   - Z-index via the --z-* token scale only.
 *   - JS positioning preserved: position is absolute by default; --fixed for body-portaled.
 */

/* Tooltip — small hover metadata */
.tactical-tooltip {
  position: absolute;
  padding: 0.4rem 0.8rem;
  max-width: 220px;
  background: var(--surface-container-high);
  color: var(--on-surface);
  font-family: var(--te-font);
  font-size: 0.71rem;
  font-weight: 500;
  line-height: 1.45;
  border-radius: var(--te-radius-md);
  box-shadow: var(--te-shadow-md);
  z-index: var(--z-tooltip);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--te-transition-fast),
    visibility var(--te-transition-fast);
}

.tactical-tooltip.is-open {
  opacity: 1;
  visibility: visible;
}

.tactical-tooltip--fixed { position: fixed; }

/* Placement modifiers set transform-origin only — JS still writes style.left/top. */
.tactical-tooltip--top    { transform-origin: 50% 100%; }
.tactical-tooltip--bottom { transform-origin: 50% 0; }
.tactical-tooltip--left   { transform-origin: 100% 50%; }
.tactical-tooltip--right  { transform-origin: 0 50%; }

/* Popover — rich content container */
.tactical-popover {
  position: absolute;
  min-width: 13.5rem;
  padding: 0;
  background: var(--surface-container-high);
  color: var(--on-surface);
  border-radius: var(--te-radius-lg);
  box-shadow: var(--te-shadow-lg);
  z-index: var(--z-popover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity var(--te-transition-fast),
    visibility var(--te-transition-fast),
    transform var(--te-transition-base);
}

.tactical-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.tactical-popover--rich {
  background: var(--surface-highest);
  overflow: hidden;
}

.tactical-popover--glass {
  background: var(--te-glass-popover-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.tactical-popover--menu {
  padding: var(--space-1);
  min-width: 180px;
  z-index: var(--z-dropdown);
}

.tactical-popover--fixed { position: fixed; }

/* Explicit — Bootstrap's `display:block` on .dropdown-menu.show would otherwise override [hidden]. */
.tactical-popover[hidden] { display: none; }

/* Backward-compat JS hooks: legacy visibility classes resolve to .is-open behavior.
   Lineup popups and Bootstrap dropdowns still toggle their own legacy classes; standings
   fixture popup migrated to .is-open. */
.tactical-popover.lu-popup--pitch-visible,
.tactical-popover.lu-popup--bench-floating.lu-popup--bench-visible,
.tactical-popover.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tactical-tooltip,
  .tactical-popover {
    transition: none;
    transform: none;
  }
}