/*
 * fixtures.css — styles for the FixtureSystem component (see fixtures.js
 * header for drop-in instructions and the full token list).
 *
 * This file intentionally does NOT declare a :root block. Every color/font
 * reference below goes through a --fixtures-* custom property with a
 * hardcoded fallback, so the component renders correctly standalone; host
 * sites brand it by overriding the --fixtures-* tokens in their own
 * stylesheet. --fixtures-accent is the one exception set inline per instance
 * (fixtures.js `accent` option), since it changes per team page.
 */

#fixtures-live, #fixtures-next, #fixtures-upcoming, #fixtures-results {
  font-family: var(--fixtures-font-body, inherit);
  color: var(--fixtures-text, #F4F1EC);
}

/* the league table sits directly on the page ground (light), not inside a
   dark card like the rest of the component, so it needs dark text of its
   own rather than --fixtures-text (which is tuned for the dark cards). */
#fixtures-table {
  font-family: var(--fixtures-font-body, inherit);
  color: var(--fixtures-table-text, #1A1A1A);
}

/* ---------- shared bits ---------- */

.fx-pill {
  display: inline-flex;
  align-items: center;
  padding: .3em .85em;
  border-radius: 999px;
  background: var(--fixtures-accent, #B80006);
  color: var(--fixtures-accent-ink, #fff);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fx-crest {
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  flex-shrink: 0;
}

.fx-vs {
  opacity: .55;
  font-weight: 600;
  text-transform: lowercase;
}

.fx-card {
  background: var(--fixtures-surface-dk, #0B0B0B);
  color: var(--fixtures-text, #F4F1EC);
  border-radius: var(--fixtures-radius, 14px);
  padding: 1.1rem 1.25rem;
}

/* ---------- loading skeleton ---------- */

.fx-skeleton-card {
  height: 6.5rem;
  border-radius: var(--fixtures-radius, 14px);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  background: var(--fixtures-skeleton-base, #00000014);
}

.fx-skeleton-list { display: flex; flex-direction: column; gap: .75rem; }

.fx-skeleton-row { display: flex; gap: 1rem; }

.fx-skeleton {
  position: relative;
  display: block;
  height: 1em;
  overflow: hidden;
  border-radius: 3px;
  background: var(--fixtures-skeleton-base, #00000014);
}

.fx-skeleton-card::after, .fx-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--fixtures-skeleton-shimmer, #ffffff26), transparent);
  animation: fxSkeletonShimmer 1.6s infinite;
}

@keyframes fxSkeletonShimmer {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-skeleton-card::after, .fx-skeleton::after { animation: none; }
}

/* ---------- LIVE banner ---------- */

.fx-live {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .7em 1.1em;
  margin-bottom: 1rem;
  border-radius: var(--fixtures-radius, 14px);
  background: var(--fixtures-surface-dk, #0B0B0B);
  color: var(--fixtures-text, #F4F1EC);
}

.fx-live-dot {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--fixtures-accent, #B80006);
  animation: fxLiveBlink 1.4s ease-in-out infinite;
}

@keyframes fxLiveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-live-dot { animation: none; }
}

.fx-live-label {
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fixtures-accent, #B80006);
}

.fx-live-fixture { font-weight: 700; }
.fx-live-score { margin-left: auto; font-weight: 800; }

/* ---------- next-game card ---------- */

.fx-next__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}

.fx-next__meta {
  font-size: .8rem;
  opacity: .75;
}

.fx-next__fixture {
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: var(--fixtures-font-heading, inherit);
  font-size: 1.3rem;
  margin: 0 0 .75rem;
}

.fx-next__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
}

.fx-next__foot-left { opacity: .75; }

.fx-next__foot-link {
  color: var(--fixtures-accent, #B80006);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.fx-card--fallback { text-align: center; }
.fx-fallback-msg { margin: 0 0 .75rem; }

.fx-retry, .fx-load-more, .fx-ics-btn {
  border: 1.5px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .6em 1.2em;
  border-radius: 999px;
  cursor: pointer;
}

.fx-retry:hover, .fx-load-more:hover, .fx-ics-btn:hover {
  background: rgba(255, 255, 255, .1);
}

/* .fx-load-more/.fx-ics-btn live in .fx-list-actions, a sibling of .fx-list
   (the dark card) rather than a child of it — they sit directly on the
   page's own light ground, not the dark card, so the light-on-dark colors
   above (correct for .fx-retry, inside its dark fallback card) leave them
   almost invisible here. Same "sits on the light ground" case the league
   table is already in, so it reuses that same text token. */
.fx-load-more, .fx-ics-btn {
  border-color: var(--fixtures-table-text, #1A1A1A);
  color: var(--fixtures-table-text, #1A1A1A);
}
.fx-load-more:hover, .fx-ics-btn:hover {
  background: rgba(0, 0, 0, .06);
}

/* ---------- Upcoming / Results tabs ---------- */

.fx-tabs {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--fixtures-hairline, rgba(0, 0, 0, .12));
}

.fx-tab {
  border: none;
  background: transparent;
  color: var(--fixtures-muted, #6B6B6B);
  font: inherit;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .25rem 0 .75rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.fx-tab.is-active {
  border-bottom-color: var(--fixtures-accent, #B80006);
}

/* ---------- upcoming / results lists ---------- */

.fx-list {
  display: flex;
  flex-direction: column;
  background: var(--fixtures-surface-dk, #0B0B0B);
  color: var(--fixtures-text, #F4F1EC);
  border-radius: var(--fixtures-radius, 14px);
  overflow: hidden;
}

.fx-row {
  display: grid;
  /* first column is a fixed width, not auto — each row is its own grid, so an
     auto column would size to that row's own date text and the fixture
     names beside it would start at a different x per row (varying date
     lengths like "Sat 19 Sept" vs "Tue 13 Oct · 14:45") */
  grid-template-columns: 10rem 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.fx-row:last-child { border-bottom: none; }

.fx-row--live { background: rgba(255, 255, 255, .06); }

.fx-row__date {
  font-size: .78rem;
  opacity: .7;
  white-space: nowrap;
}

.fx-row__fixture { display: flex; align-items: center; gap: .5em; font-weight: 700; }

.fx-row__meta, .fx-row__score {
  font-size: .82rem;
  opacity: .8;
  text-align: right;
  white-space: nowrap;
}

.fx-row__link {
  color: var(--fixtures-accent, #B80006);
  font-weight: 800;
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
}

.fx-list-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.fx-empty {
  opacity: .7;
  padding: 1rem 0;
}

/* ---------- league table ---------- */

.fx-table-wrap { overflow-x: auto; }

.fx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.fx-table th, .fx-table td {
  padding: .6em .85em;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--fixtures-hairline, rgba(0, 0, 0, .12));
}

.fx-table tbody tr:nth-child(odd) {
  background: var(--fixtures-table-stripe, rgba(0, 0, 0, .04));
}

.fx-table th {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fixtures-muted, #6B6B6B);
}

/* Team column stays put while GP/W/D/L/... scroll under it (.fx-table-wrap
   is the overflow-x:auto container) — needs its own opaque background per
   row since a sticky cell sits above the columns scrolling behind it, so it
   can't rely on the row's own (semi-transparent, on odd rows) background
   showing the page through it like the rest of the row does. Instead: an
   opaque fill in the same color as the page underneath, with the stripe
   painted on top as the exact same translucent overlay the row itself
   uses — so it composites to the same result, not an approximation of it. */
.fx-table th:first-child, .fx-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--fixtures-table-bg, var(--ground, #FFF));
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, .15);
}
.fx-table tbody tr:nth-child(odd) td:first-child {
  background-image: linear-gradient(var(--fixtures-table-stripe, rgba(0, 0, 0, .04)), var(--fixtures-table-stripe, rgba(0, 0, 0, .04)));
}

/* ---------- mobile ---------- */

@media (max-width: 700px) {
  .fx-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "fixture fixture"
      "date link"
      "meta status";
    row-gap: .35rem;
  }
  .fx-row__fixture { grid-area: fixture; }
  .fx-row__date { grid-area: date; }
  .fx-row__link { grid-area: link; justify-self: end; }
  .fx-row__meta { grid-area: meta; text-align: left; }
  .fx-row__score { grid-area: status; }

  .fx-live-score { margin-left: 0; }
  .fx-live { flex-wrap: wrap; }

  .fx-list-actions { flex-wrap: wrap; }

  /* Rows/cards stack team text above date and meta lines at this width —
     the crest's width+gap would push just that one line's start in from
     the left edge, out of line with everything stacked under it. Drop it
     here so every line shares the same left edge. */
  .fx-crest { display: none; }
}