/* Season standings (templates/standings/season_standings.html) -
   page-specific classes layered on static/css/base.css's shared .hl-*
   table components, same pattern as players.css/stat_leaders.css.

   10 columns (Team/Division/W/L/PCT/GP/PF/PA/DIFF/Streak) stay a real,
   horizontally-scrollable .hl-table on phones rather than switching to
   base.css's stacked-card layout (.hl-table--stack) - same call
   game_detail.css's box score table makes, for the same reason: stacking
   10 columns into label:value lines reads worse than a table you swipe
   through. The sticky Team column further down this file is what makes
   that swipe usable - without it, scrolling right to see PF/PA/DIFF would
   scroll the team name (the one thing you need to keep in sight) out of
   view too. */

/* Mirrors game_detail.css's `.gd-box-table th:first-child, td:first-child`
   sticky-column treatment - see that file's comment for the full
   reasoning (positioned layer needs an explicit per-state background so
   it doesn't go see-through against columns sliding past behind it).
   Not combined with base.css's .hl-table--row-link stretched-link overlay
   in this cell specifically for the same reason noted there: `position:
   sticky` would become the containing block and confine the overlay to
   just this column's width - the Team <a> here stays a plain inline link
   instead. */
.std-standings-table th:first-child,
.std-standings-table td:first-child {
  position: sticky;
  left: 0;
}

.std-standings-table th:first-child {
  z-index: 3;
}

.std-standings-table td:first-child {
  z-index: 2;
  background: var(--bg-card);
}

.std-standings-table tbody tr:hover td:first-child,
.std-standings-table tbody tr:focus-within td:first-child {
  background: var(--bg-raised);
}

/* ─── Scroll-reveal (static/js/league-home.js's generic [data-lh-reveal]
   IntersectionObserver, static/css/league_home.css's own base
   html.lh-anim-ready rules) - this page had none at all before, unlike
   every other public page in the shell. Reuses the exact same mechanism
   (both files already load unconditionally on every page - see
   base/league_public_base.html) rather than a second JS/CSS system: the
   table wrapper itself gets the shared container fade+rise for free from
   [data-lh-reveal] alone; only the per-row stagger below is page-specific,
   same split league_home.css's own .lh-standings-table tbody tr rules
   use for its teaser table. `--i` (row index, set inline per <tr> in the
   template) drives the delay instead of a hand-written nth-child list -
   this table's row count varies with the league (a handful of teams to
   several dozen), where a fixed nth-child(8) cutoff would leave later
   rows with no stagger at all. */
html.lh-anim-ready [data-lh-reveal] .std-standings-table tbody tr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.15s ease;
  transition-delay: calc(var(--i, 0) * 0.035s);
}

html.lh-anim-ready [data-lh-reveal].lh-is-visible .std-standings-table tbody tr {
  opacity: 1;
  transform: none;
}

/* ─── PCT win% fill-bar (view-computed `row.pct_number`, a 0-100 number
   alongside the ".750"-style `row.pct` display string) - same hard-stop
   gradient trick static/css/league_home.css's own .lh-standings-pct uses
   for the identical data in the League Home teaser table, so the full
   Standings table this links out to reads as a continuation of that
   preview rather than a plainer downgrade from it. */
.std-standings-pct {
  position: relative;
  background-image: linear-gradient(90deg, rgba(var(--primary-rgb), 0.14) var(--pct, 0%), transparent var(--pct, 0%));
}

/* ─── Landing-scoreboard look (user request: make this table match
   templates/core/landing.html's hero standings mockup, .landing-standings
   in static/css/landing.css) - rank chip, highlighted leader row (orange
   wash + left bar), colored ▲/▼ streak text instead of a pill badge, and
   a small color square for color-named teams with no logo ("Team Green"), picked by
   the `team_name_color` filter (apps/core/templatetags/badges.py). Own
   `std-standings-*` classes rather than reusing `.landing-*`, which are
   scoped to the landing page. */
.std-standings-table th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: var(--bg-card);
}

.std-standings-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.std-standings-team {
  gap: 9px;
  font-weight: 500;
}

.std-standings-rank {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--bg-raised);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
}

.std-standings-swatch {
  flex: none;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(245, 241, 236, 0.25);
}

/* Leader row. The sticky Team cell carries its own opaque background
   (see above), so it gets the wash layered over --bg-card instead of
   letting the <tr> tint show through it. */
.std-standings-table tr.std-standings-leader td {
  background-color: rgba(var(--primary-rgb), 0.05);
}

.std-standings-table tr.std-standings-leader td:first-child {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0.06)), var(--bg-card);
  box-shadow: inset 3px 0 0 var(--primary);
}

.std-standings-table tr.std-standings-leader:hover td:first-child {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0.08)), var(--bg-raised);
}

.std-standings-table tr.std-standings-leader .std-standings-team {
  font-weight: 700;
}

.std-standings-table tr.std-standings-leader .std-standings-rank {
  background: var(--primary);
  color: var(--on-primary);
}

.std-standings-streak {
  display: inline-flex;
  align-items: center;
  color: var(--teal);
  font-weight: 600;
}

.std-standings-streak::before {
  content: "\25b2";
  font-size: 8px;
  margin-right: 3px;
  position: relative;
  top: -1px;
}

.std-standings-streak.cold {
  color: var(--alert);
}

.std-standings-streak.cold::before {
  content: "\25bc";
}