/* ─────────────────────────────────────────────────────────────────────────
   Football Intelligence — Leagues deep-dive page styles
   Faza 5.2, redesign v2.

   4 tabs: Matches / Standings / Top scorers / AI Picks.
   Layout: hero (mniejszy niż team-detail bo brak fanart) + tabs + lazy-loaded
   tab panels. CSS prefix `ld-` dla league-specific componentów.
   ───────────────────────────────────────────────────────────────────────── */


.leagues-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) 0;
}
@media (max-width: 767px) {
  .leagues-detail {
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-2)) 0;
  }
}
@media (max-width: 390px) {
  .leagues-detail {
    margin-left: -12px;
    margin-right: -12px;
  }
}


/* === Hero ================================================================= */

.ld-hero {
  position: relative;
  background:
    linear-gradient(135deg, rgba(15, 22, 33, 1) 0%, rgba(8, 14, 22, 1) 100%);
  padding: var(--space-3) var(--space-3);
  min-height: 180px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--divider);
  overflow: hidden;
}
.ld-hero::before {
  /* Subtle accent stripe — uses var(--ld-hero-accent) set inline z LEAGUE_BADGES color */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ld-hero-accent, transparent) 0%, transparent 50%);
  opacity: 0.15;
  pointer-events: none;
}
@media (max-width: 767px) {
  .ld-hero {
    min-height: 140px;
    padding: var(--space-3) var(--space-2);
  }
}

.ld-hero__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}

.ld-hero__badge {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: white;
  font-size: 1.5rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* P5.2.1 Bug 1: img variant — logo PNG z apifootball CDN. Bez tła, contain
   dla preserve aspect ratio, drop-shadow zamiast box-shadow. */
.ld-hero__badge--logo {
  background: transparent !important;
  box-shadow: none;
  object-fit: contain;
  padding: 4px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

@media (max-width: 767px) {
  .ld-hero__badge {
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
  }
}

.ld-hero__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ld-hero__name {
  margin: 0;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: var(--white);
}
@media (max-width: 767px) {
  .ld-hero__name { font-size: 1.25rem; }
}


/* === Tabs nav ============================================================ */

/* P5.2.1 Bug 3: tabs nav z max-width + margin auto żeby wizualnie aligned z
   tabpanel-host content (oba 1200px max), z gutter padding match. */
.ld-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  width: calc(100% - 2 * var(--space-3));
  max-width: calc(1200px - 2 * var(--space-3));
  margin: 0 auto;
  scrollbar-width: none;
}
@media (max-width: 767px) {
  .ld-tabs {
    width: calc(100% - 2 * var(--space-2));
    max-width: calc(1200px - 2 * var(--space-2));
  }
}
.ld-tabs::-webkit-scrollbar { display: none; }

.ld-tabs__btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.ld-tabs__btn:hover:not(.ld-tabs__btn--active) { color: var(--text-primary); }
.ld-tabs__btn--active {
  background: var(--surface-3);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}


/* === Tab panel host ====================================================== */

/* P5.2.1 Bug 3: max-width 1200px + margin 0 auto żeby content nie rozciągał
   się na 1920px+ desktop (bez sidebar leagues nie ma anchor po prawej, content
   wyglądał "left-anchored z dużo whitespace"). Match-detail ma podobny pattern
   poprzez .md-hero__inner max-width: 720px, ale dla league-detail content =
   match list potrzebuje więcej breathing room. */
.ld-tabpanel-host {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-4);
  width: 100%;
}
@media (max-width: 767px) {
  .ld-tabpanel-host { padding: 0 var(--space-2) var(--space-3); }
}

.ld-tabpanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ld-tabpanel--empty {
  text-align: center;
  padding: var(--space-4);
}

.ld-section { /* card variant container */ }


/* === Match list (Matches tab) ============================================ */

.ld-match-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* === Standings table (Standings tab) ===================================== */

.ld-standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.ld-standings thead th {
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}
.ld-standings thead th.ld-standings__pos,
.ld-standings thead th.ld-standings__team {
  text-align: left;
}
.ld-standings tbody td {
  padding: 8px 4px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.ld-standings tbody td.ld-standings__pos,
.ld-standings tbody td.ld-standings__team {
  text-align: left;
}
.ld-standings__team {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ld-standings__badge {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.ld-standings__pos {
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
  width: 32px;
  position: relative;
}
.ld-standings__pts {
  color: var(--text-primary);
  font-weight: var(--weight-extrabold);
}

/* Zone color borders dla qualification + relegation */
.ld-standings__row--ucl .ld-standings__pos::before,
.ld-standings__row--uel .ld-standings__pos::before,
.ld-standings__row--uecl .ld-standings__pos::before,
.ld-standings__row--relegation .ld-standings__pos::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 2px;
}
.ld-standings__row--ucl       .ld-standings__pos::before { background: #1dbb79; }
.ld-standings__row--uel       .ld-standings__pos::before { background: #f59e0b; }
.ld-standings__row--uecl      .ld-standings__pos::before { background: #fcd34d; }
.ld-standings__row--relegation .ld-standings__pos::before { background: #ef4444; }

/* Mobile: hide GF/GA/GD columns + tighter padding (same approach jak td-standings).
   P5.2.1 Bug 2: explicit symmetric padding na first/last cells żeby tabela
   miała równe oddechu od lewej i prawej krawędzi card containera (Karol QA:
   wyglądała left-anchored z niewyrównanym prawym marginesem). */
@media (max-width: 767px) {
  .ld-standings thead th:nth-child(7),  /* GF */
  .ld-standings tbody td:nth-child(7),
  .ld-standings thead th:nth-child(8),  /* GA */
  .ld-standings tbody td:nth-child(8),
  .ld-standings thead th:nth-child(9),  /* GD */
  .ld-standings tbody td:nth-child(9) {
    display: none;
  }
  .ld-standings thead th,
  .ld-standings tbody td {
    padding: 6px 4px;
    font-size: 0.8rem;
  }
  .ld-standings thead th:first-child,
  .ld-standings tbody td:first-child {
    padding-left: 8px;
  }
  .ld-standings thead th:last-child,
  .ld-standings tbody td:last-child {
    padding-right: 8px;
  }
  .ld-standings__badge {
    width: 16px;
    height: 16px;
  }
  /* Team name: flex-shrink + unconstrained max-width lets it grow to fill
     the available column space rather than truncating too early. */
  .ld-standings__team {
    gap: 6px;
    max-width: none;
    min-width: 0;
  }
  .ld-standings__team span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .ld-standings__pos {
    width: 24px;
  }
}

/* At very narrow phones: further reduce font-size and badge so all stat
   columns (P W D L PTS) still fit without horizontal overflow. */
@media (max-width: 390px) {
  .ld-standings thead th,
  .ld-standings tbody td {
    padding: 5px 3px;
    font-size: 0.73rem;
  }
  .ld-standings__badge {
    width: 14px;
    height: 14px;
  }
  .ld-standings__pos { width: 20px; }
}

/* Scorer row: smaller rank + tighter gap at very small screens. */
@media (max-width: 390px) {
  .ld-scorer {
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    padding: 8px 2px;
  }
  .ld-scorer__rank { font-size: 0.9rem; }
  .ld-scorer__stats { gap: 8px; }
  .ld-scorer__stat-value { font-size: 0.88rem; }
}

/* Zone legend (under standings table) */
.ld-standings__legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.ld-standings__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ld-standings__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ld-standings__legend-dot--ucl        { background: #1dbb79; }
.ld-standings__legend-dot--uel        { background: #f59e0b; }
.ld-standings__legend-dot--uecl       { background: #fcd34d; }
.ld-standings__legend-dot--relegation { background: #ef4444; }


/* === Top Scorers (Scorers tab) =========================================== */

.ld-scorers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ld-scorer {
  display: grid;
  /* rank | [avatar+body] | stats — avatar is optional: rank col is fixed,
     body is flex and grows, stats are fixed-width inline. */
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}

/* Player/scorer avatar — rendered when the backend provides a photo URL.
   Circle, object-fit cover. When the img errors, the sibling initials
   fallback chip (rendered by JS) shows instead. */
.ld-scorer__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-3);
}
.ld-scorer__avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
/* When avatar present, show body as flex row: avatar + text column. */
.ld-scorer__body--with-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ld-scorer:last-child { border-bottom: none; }

.ld-scorer__rank {
  font-size: 1.1rem;
  font-weight: var(--weight-extrabold);
  color: var(--text-tertiary);
  text-align: center;
}

.ld-scorer__body {
  min-width: 0;
}
.ld-scorer__name {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-scorer__team {
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ld-scorer__stats {
  display: flex;
  gap: 12px;
}
.ld-scorer__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 28px;
}
.ld-scorer__stat-value {
  font-size: 1rem;
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}
.ld-scorer__stat-label {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ld-scorer__stat--pen .ld-scorer__stat-value {
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  .ld-scorer { grid-template-columns: 28px 1fr auto; gap: 8px; padding: 8px 2px; }
  .ld-scorer__stats { gap: 8px; }
}


/* === AI Picks list (Picks tab) =========================================== */

.ld-picks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ld-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.ld-pick-row:last-child { border-bottom: none; }

.ld-pick-row__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.ld-pick-row__main:hover {
  text-decoration: none;
  color: var(--accent);
}
.ld-pick-row__home,
.ld-pick-row__away {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.ld-pick-row__away { text-align: right; }
.ld-pick-row__vs {
  flex-shrink: 0;
  font-size: 0.85rem;
}

.ld-pick-row__outcome {
  flex-shrink: 0;
}

.ld-picks-disclaimer {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}


/* === Error state ========================================================= */

.ld-error {
  text-align: center;
  padding: var(--space-4);
  margin: var(--space-3);
}
.ld-error p:first-child { margin-bottom: 0.5rem; }