/* ─────────────────────────────────────────────────────────────────────────
   Football Intelligence — Matches page styles
   Faza 3, redesign v2.

   Page-specific styling. Reusable bits (.match-row, .skeleton) zostają
   w components.css; tutaj tylko .matches-page wrapper, .league-section,
   league badge variants, team-initial helper class.
   ───────────────────────────────────────────────────────────────────────── */


/* === Page wrapper ========================================================= */

.matches-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.matches-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;  /* allows truncate inside flex/grid children */
}

@media (min-width: 1024px) {
  .matches-page {
    display: grid;
    grid-template-columns: 220px minmax(0, 760px);
    align-items: start;
    gap: var(--space-3);
  }
}

/* F5.16-tweak v6 Karol QA "dużo pustego miejsca po prawej, chciałbym
   marketing banery". Right rail aktywuje się gdy mamy realną przestrzeń
   (1320+) — 3-col layout: sidebar | main | promo rail. Poniżej rail
   zwija się i main zostaje cap'owany jak wcześniej. */
@media (min-width: 1320px) {
  .matches-page {
    grid-template-columns: 220px minmax(0, 760px) 260px;
  }
  .matches-page__rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: sticky;
    top: var(--space-3);
  }
}
.matches-page__rail { display: none; }


/* Faza 7.1 — Match of the Day wrapper. Sits between header and toggle,
   gives the procedural banner a small breathing margin without imposing
   a card border (the banner ships its own border). */
.matches-page__motd {
  display: block;
  margin: 0 0 var(--space-1);
}

/* C2: Featured matchday rail — standard-tier banners (score 10-17).
   Desktop: auto-fit grid up to 2 columns. Mobile: horizontal scroll
   with snap (same OneFootball "Hot fixtures" pattern). */
.matches-page__featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
  margin-block: var(--space-2) var(--space-3);
}

@media (max-width: 640px) {
  .matches-page__featured {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-3);
    padding-inline: var(--space-3);
    gap: var(--space-2);
    /* hide scrollbar chrome but keep scroll functionality */
    scrollbar-width: none;
  }
  .matches-page__featured::-webkit-scrollbar { display: none; }
  .matches-page__featured > .motd-banner--standard {
    scroll-snap-align: start;
  }
}

/* Featured section heading: hairline rule style, NO accent color (accent
   stays uniquely on the hero chip). */
.matches-page__featured-label {
  font-size: 0.65rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--divider);
}

.matches-promo {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  overflow: hidden;
}
.matches-promo--accent {
  border-color: rgba(0, 229, 160, 0.4);
  background: linear-gradient(180deg, rgba(0, 229, 160, 0.06) 0%, var(--surface-1) 80%);
}
.matches-promo__eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.matches-promo__title {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  line-height: 1.25;
}
.matches-promo__sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 12px;
}
.matches-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-out);
}
.matches-promo__cta:hover { background: var(--accent-strong); }
.matches-promo__cta--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.matches-promo__cta--ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--text-primary);
}

.matches-page__header h1 { margin: 0 0 4px 0; }
.matches-page__header p  { margin: 0; }

.matches-page__empty,
.matches-page__error {
  text-align: center;
  padding: var(--space-4);
}
.matches-page__empty p:first-child,
.matches-page__error p:first-child { margin-bottom: 0.4rem; }
.matches-page__error #matchesRetryBtn { margin-top: var(--space-2); }


/* === Sidebar leagues (desktop ≥1024px) ===================================== */

.sidebar-leagues {
  display: none;
}

@media (min-width: 1024px) {
  .sidebar-leagues {
    display: block;
    position: sticky;
    top: calc(60px + var(--space-2));  /* below sticky header */
    /* z-index < --z-sticky (50) tak żeby header sticky zawsze nad sidebar.
       Test: scroll matches list w dół → header zostaje na wierzchu, sidebar
       zatrzymuje się pod jego dolną krawędzią, nie wjeżdża pod. */
    z-index: 1;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    max-height: calc(100vh - 60px - 2 * var(--space-2));
    overflow-y: auto;
  }
}

.sidebar-leagues__title {
  margin: 0 0 0.5rem 0.5rem;
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
}

.sidebar-leagues__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-leagues__item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: background-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
.sidebar-leagues__item:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.sidebar-leagues__item--dim {
  opacity: 0.45;
}
.sidebar-leagues__item--dim:hover {
  opacity: 0.7;
  background: transparent;
}

/* F5.16-tweak v7: skeleton loading state — replaces colored fallback discs
   z shimmer bars zanim /matches/upcoming response wraca z league_badges. */
.sidebar-leagues__item--skeleton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem;
  cursor: default;
}
.sidebar-leagues__skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: sidebar-leagues-shimmer 1.4s infinite;
}
.sidebar-leagues__skel--badge { width: 24px; height: 24px; border-radius: 4px; }
.sidebar-leagues__skel--label { flex: 1; height: 14px; }
@keyframes sidebar-leagues-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-leagues__skel { animation: none; }
}

/* F5.7: active filter visual state. Accent border-left + bg-tint indicates
   "this league filter is on". Combine z --dim gracefully (active wins
   opacity). */
.sidebar-leagues__item--active {
  background: var(--accent-soft);
  color: var(--text-primary);
  border-left: 3px solid var(--accent);
  padding-left: calc(0.5rem - 3px);  /* compensate border żeby content nie skakał */
  opacity: 1;
}
.sidebar-leagues__item--active:hover {
  background: var(--accent-soft);
}

/* "All leagues" reset row — distinguishes z liga rows przez italic + neutral
   bg. Active state shared z above rule. */
.sidebar-leagues__item--all .sidebar-leagues__name {
  font-style: italic;
}
.sidebar-leagues__badge--all {
  background: var(--surface-3);
  letter-spacing: 0.04em;
}

.sidebar-leagues__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 0.58rem;
  font-weight: var(--weight-extrabold);
  color: var(--white);
  letter-spacing: 0.04em;
}

/* F5.6.3.5a: real league logo z TheSportsDB R2 (transparent PNG).
   Karol QA 5.6.3.4.1c: "banery ligi są na białym tle co gryzie się z
   naszą kolorystyką, OneFootball nie ma takiego problemu". Apifootball
   PNGs miały baked-in white padding — backend now swaps na TheSportsDB
   strBadge URL (transparent). CSS: zero bg, zero padding. Logo "floats"
   na dark background jak w OneFootball. */
.sidebar-leagues__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}

.sidebar-leagues__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
}

.sidebar-leagues__count {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  min-width: 2ch;          /* 2-char width = consistent gutter dla 0-99 (post-Faza 3.5) */
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}


/* === League section ======================================================= */

.league-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.league-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.75rem var(--space-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--divider);
}
/* F5.8.4-fix: header wrapped w anchor → #leagues/<code> dla deep-dive page.
   Hover subtle bg lift; reset native anchor styling. */
.league-section__header--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-out);
}
.league-section__header--link:hover,
.league-section__header--link:focus-visible {
  background: var(--surface-3);
  outline: none;
}

.league-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  padding: 0 0.45rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: var(--weight-extrabold);
  color: var(--white);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* 5.6.1 → 5.6.3.4.1c → 5.6.3.5a: section header league logo.
   5.6.3.5a final: backend swap'uje league_logo URL na TheSportsDB R2
   transparent PNG (via get_tsdb_league_badge helper). CSS rezygnuje z
   białego-pill treatment — transparent PNG renderuje się czysto na dark
   background, OneFootball-style. Size 32×32 (square, scales clean dla
   landscape + portrait logos przez object-fit:contain). */
.league-section__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}

.league-section__name {
  margin: 0;
  flex: 1;
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  /* Truncate long competition names like "UEFA Europa League - Semi-finals" */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-section__count {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.league-section__matches {
  display: flex;
  flex-direction: column;
}


/* === Team initial (placeholder logo Fazy 3 — Faza 4 plug TheSportsDB) ==== */

.team-initial {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: var(--weight-extrabold);
  color: var(--white);
  flex-shrink: 0;
  text-transform: uppercase;
  /* Fallback border w razie similar-to-bg color (rare) */
  border: 1px solid rgba(0, 0, 0, 0.3);
}


/* === Date strip (horizontal day filter, -3 → +7) ========================= */
/* 5.6.2.1 hotfix po Karol QA — rollback do OneFootball-minimal.
   Removed: violet ALL pill, scale(1.04), accent shadow, micro-text, transforms.
   Active state: green border + green text (NOT filled bg). Today subtle accent. */

.date-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
  margin: 0 calc(-1 * var(--space-1));
  scroll-padding-left: var(--space-1);
}
.date-strip::-webkit-scrollbar { height: 4px; }
.date-strip::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }

.date-strip__btn {
  scroll-snap-align: start;
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: 0.5rem 0.7rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
.date-strip__btn:hover:not(.date-strip__btn--active) {
  color: var(--text-primary);
}
.date-strip__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.date-strip__weekday {
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1;
  min-height: 0.6rem;
}

.date-strip__day {
  font-size: 0.95rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.1;
}

.date-strip__btn--past .date-strip__day {
  color: var(--text-tertiary);
}

.date-strip__btn--today {
  border-color: var(--accent);
}
.date-strip__btn--today .date-strip__day {
  color: var(--accent);
  font-size: 0.85rem;
}
.date-strip__btn--today .date-strip__weekday {
  color: var(--accent);
}

/* Active state — green border + green text, NOT filled bg. OneFootball ref. */
.date-strip__btn--active {
  border-color: var(--accent);
  background: transparent;
}
.date-strip__btn--active .date-strip__day,
.date-strip__btn--active .date-strip__weekday {
  color: var(--accent);
}

/* ALL pill — visual divider od dni przez subtle bg-color shift, NIE violet. */
.date-strip__btn--all {
  background: var(--surface-2);
}
/* NOTE: the .date-strip rules above are still consumed by filter-bar.js /
   predictions (renderDateStrip). The Matches page itself no longer renders a
   per-day strip — it uses the .matches-toggle + .date-banner system below. */


/* === Today / All toggle (Matches-local, replaces the per-day strip) ======= */
/* Inspiracja: FotMob segmented "All games" control + Linear segmented toggle.
   Two-state pill group on a recessed track; the active segment gets the same
   textured accent fill as primary buttons (single accent, no rainbow). */

.matches-toggle {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.matches-toggle__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  padding: 0.4rem 1.05rem;
  min-height: 2rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-out),
              background-color var(--duration-fast) var(--easing-out);
}
.matches-toggle__btn:hover:not(.matches-toggle__btn--active) {
  color: var(--text-primary);
}
.matches-toggle__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Active segment — F5.18 refine ("zbyt zielono"): was a solid neon-accent block,
   now a calm accent-TINTED surface with accent text + a thin accent border. Reads
   clearly "selected" against the recessed track without a wall of green. Single
   accent — no new hue. Subtle inset keeps it lifted off the track. */
.matches-toggle__btn--active {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: rgba(0, 229, 160, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.20);
}
.matches-toggle__btn--active:hover { color: var(--accent); }


/* === Date-banner separators ("All" mode timeline) ========================= */
/* Inspiracja: The Athletic editorial date dividers + OneFootball day headers.
   Lightweight, sticky so the current day stays labelled while scrolling. */

.matches-date-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.matches-date-group + .matches-date-group {
  margin-top: var(--space-1);
}

.date-banner {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  position: sticky;
  top: calc(60px + var(--space-1));   /* clears the sticky app header */
  z-index: 2;
  padding: 0.5rem 0.1rem;
  /* subtle bg fade so rows scrolling underneath don't bleed through the label */
  background: linear-gradient(180deg, var(--bg) 55%, transparent 100%);
}
.date-banner__main {
  font-size: 0.82rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
.date-banner__sub {
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.date-banner__line {
  flex: 1;
  height: 1px;
  min-width: 1rem;
  background: var(--divider);
  align-self: center;
}
.date-banner__count {
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.date-banner__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.date-banner__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.55);
  animation: date-banner-pulse 1.8s ease-out infinite;
}
@keyframes date-banner-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(0, 229, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .date-banner__live-dot { animation: none; }
}


/* === MatchRow skeleton variant ============================================ */

.match-row--skeleton {
  cursor: default;
  pointer-events: none;
}
.match-row--skeleton:hover { background: transparent; }


/* === Mobile tweaks ======================================================== */

@media (max-width: 640px) {
  .league-section__header {
    padding: 0.6rem var(--space-1);
  }
  .league-section__name {
    font-size: 0.875rem;
  }
}