/* Live Event Highlight — presentation only (pairs with live-event-highlight.js) */

.leh-active {
  --leh-accent: #4f9463;
  /* ~20% stronger wash than 0.14 — still temporary via leh-soft-fade */
  --leh-tint: rgba(79, 148, 99, 0.17);
  /* Scorer name: cool sky blue — contrasts green wash, fits StatsNexus live chrome */
  --leh-scorer: #7eb6d9;
  --leh-scorer-weight: 700;
  position: relative;
  isolation: isolate;
  /* No side accent — flat wash only */
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="light"] .leh-active {
  --leh-scorer: #3d7ea6;
}

/* Single full-row wash (avoids per-cell “box in a box”) */
.leh-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--leh-tint);
  pointer-events: none;
  z-index: 0;
  animation: leh-soft-fade 15s linear forwards;
}

.leh-active > * {
  position: relative;
  z-index: 1;
}

/* Keep table cells clear so the wash reads as one surface */
tr.leh-active > td {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Don’t fight hover inset accent / lift while highlighted */
.enhanced-table tbody tr.leh-active:hover,
.leh-active:hover {
  box-shadow: none !important;
  transform: none;
  background: rgba(255, 255, 255, 0.012);
}

.leh-active.leh-enter::before {
  animation:
    leh-tint-enter 200ms cubic-bezier(0.22, 1, 0.36, 1),
    leh-soft-fade 15s linear forwards;
}

@keyframes leh-tint-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Soft hold then fade wash over 15s */
@keyframes leh-soft-fade {
  0%,
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.leh-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  pointer-events: none;
}

.match-ft-status .leh-chip,
.fx-match-status .leh-chip,
.home-match-status .leh-chip {
  margin-left: 8px;
}

/*
 * Toast already names the event — hide duplicate row status chrome while
 * the highlight wash is active. Keep the status column space (visibility)
 * so team/score alignment does not jump.
 */
.leh-active .leh-chip {
  display: none !important;
}

tr.leh-active > td.match-ft-status,
.leh-active .match-ft-status,
.leh-active .fx-match-status,
.leh-active .home-match-status,
.leh-active .leh-chip-host {
  visibility: hidden !important;
}

/* Round strip: hide FT/status labels only — keep live minute / score visible */
.leh-active .rndfx-ft {
  visibility: hidden !important;
}

.rndfx-item.leh-active,
.mobile-card.leh-active,
.nexus-match-card.leh-active {
  border-radius: 10px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .leh-active::before,
  .leh-active.leh-enter::before {
    animation: none !important;
    opacity: 1;
  }

  .leh-scorer,
  .leh-scorer.leh-scorer-enter,
  .leh-active.leh-enter .leh-scorer,
  [data-theme="light"] .leh-active .leh-scorer {
    animation: none !important;
    color: var(--leh-scorer) !important;
    font-weight: var(--leh-scorer-weight, 700) !important;
  }
}

/* Scoring team name — orange emphasis; same 15s hold+fade as the row wash.
 * Specificity must beat [data-theme="light"] .team-name { color: … !important }. */
.leh-active .leh-scorer,
.leh-active .leh-scorer a,
[data-theme="light"] .leh-active .leh-scorer,
[data-theme="light"] .leh-active .leh-scorer a {
  color: var(--leh-scorer) !important;
  font-weight: var(--leh-scorer-weight, 700) !important;
  animation: leh-scorer-soft-fade 15s linear forwards;
}

.leh-scorer.leh-scorer-enter,
.leh-active.leh-enter .leh-scorer,
.leh-active.leh-enter .leh-scorer a,
[data-theme="light"] .leh-active.leh-enter .leh-scorer,
[data-theme="light"] .leh-active.leh-enter .leh-scorer a {
  animation:
    leh-scorer-enter 200ms cubic-bezier(0.22, 1, 0.36, 1),
    leh-scorer-soft-fade 15s linear forwards;
}

.leh-active .leh-scorer a {
  color: inherit !important;
  font-weight: inherit !important;
}

@keyframes leh-scorer-enter {
  from {
    color: var(--leh-text-rest, inherit);
    font-weight: inherit;
  }
  to {
    color: var(--leh-scorer);
    font-weight: var(--leh-scorer-weight, 700);
  }
}

/* Soft hold then fade back to resting text — mirrors leh-soft-fade */
@keyframes leh-scorer-soft-fade {
  0%,
  55% {
    color: var(--leh-scorer);
    font-weight: var(--leh-scorer-weight, 700);
  }
  100% {
    color: var(--leh-text-rest, inherit);
    font-weight: inherit;
  }
}