/* Team Hub screen — reuses .stub-screen (home.css) for the outer shell and
   .st-table (home.css) for tabular tabs. Tab-bar classes (th-tab-bar/th-tab/
   th-panel) mirror game_detail.css's .gd-dd-tab-bar/.gd-dd-tab/.gd-dd-panel. */

.th-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* ── Header ── */
.th-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--th-accent, var(--accent1)) 0%, var(--bg-card) 140%);
}

.th-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.th-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.th-team-name {
  font-family: "Heebo", sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--th-ink, #fff);
}

.th-team-sub {
  font-size: 13px;
  color: var(--th-ink, #fff);
  opacity: 0.8;
}

/* ── Tab bar (copies game_detail.css's .gd-dd-tab-bar shape) ──
   6 tabs is one more than game_detail's 3 — on a real phone width (375px)
   they don't fit in one row even at a small font, and overflow-x:auto just
   hides tabs off-screen (confirmed live — "Transfers" got clipped). Wrap
   into 2 rows of 3 below 480px instead, so every tab stays visible. */
.th-tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-block: 8px 4px;
  padding-inline-start: 10px;
  /* Logical, not physical — .th-close-btn below is positioned with
     inset-inline-end, which flips to the LEFT under this app's RTL
     default. A physical `padding-right` here cleared the wrong side and
     let the close button collide with whichever tab lands there (last
     in DOM order — "Transfers" — sits at the RTL visual-left too), so
     the ✕ was easy to miss, crammed against the tab. */
  padding-inline-end: 44px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.th-tab {
  flex: 1 1 auto;
  min-width: 70px;
  padding: 7px 4px;
  font-family: "Heebo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .th-tab {
    flex: 1 1 30%;
    font-size: 11.5px;
    padding: 8px 2px;
  }
}

.th-tab.active {
  color: var(--text);
  background: rgba(255,255,255,0.1);
}

html[data-theme="light"] .th-tab.active {
  background: rgba(0,0,0,0.06);
}

.th-close-btn {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px; /* right in LTR, left in RTL — matches the app's dir="rtl" default */
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--text);
  font-size: 15px;
  padding: 0;
  cursor: pointer;
}

html[data-theme="light"] .th-close-btn {
  background: rgba(0,0,0,0.07);
}

.th-close-btn:hover {
  background: rgba(255,255,255,0.18);
}

html[data-theme="light"] .th-close-btn:hover {
  background: rgba(0,0,0,0.12);
}

/* ── Panels ── */
.th-panel {
  padding: 12px 16px 24px;
}

.th-panel.hidden {
  display: none;
}

.th-loading, .th-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 14px;
}

/* ── Details tab ── */
.th-details-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.th-detail-row {
  display: flex;
  align-items: baseline;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

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

/* Zebra striping so the eye can track a row as one horizontal unit —
   with a plain flex row and no fill between key/value/leader, a wide
   gap between the right-side label and left-side number reads as two
   unrelated columns rather than one row. */
.th-detail-row:nth-child(even) { background: var(--bg-card2, rgba(255,255,255,0.025)); }

/* Dotted "leader" line (classic menu/receipt pattern) filling the gap
   between label and value, so the eye has something to follow across
   instead of jumping a blank gap — same fix as a restaurant menu's
   dots between a dish name and its price. */
.th-detail-leader {
  flex: 1;
  margin: 0 10px;
  border-bottom: 2px dotted var(--border);
  align-self: center;
  min-width: 16px;
}

.th-detail-k {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.th-detail-v {
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
}

.th-today-game {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-card2);
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}

/* ── Titles / championship history banner ── */
.th-titles-card {
  margin: 0 16px 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--team-accent-bg, rgba(255,255,255,0.06)), transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.th-titles-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.th-titles-trophy {
  font-size: 20px;
}

.th-titles-count {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
}

.th-titles-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.th-titles-years {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.th-titles-note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ── Stats tab ── */
.th-stat-section {
  margin-bottom: 20px;
}

.th-stat-title {
  font-family: "Heebo", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.th-leader-top3 {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.th-leader-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}

.th-leader-value {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-ink);
}

.th-leader-name {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.th-leader-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.th-leader-row {
  display: flex;
  align-items: baseline;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.th-leader-row:nth-child(even) { background: var(--bg-card2, rgba(255,255,255,0.025)); }

.th-leader-row span:first-child {
  font-weight: 700;
  color: var(--text);
}

/* ── Squad / Standings tables ── */
.th-jersey { text-align: center; color: var(--muted); width: 40px; }
.th-name { text-align: start; }
.th-pos { text-align: center; color: var(--muted); }
.th-row-clickable { cursor: pointer; }
.th-row-clickable:hover { background: rgba(255,255,255,0.04); }

/* ── Standings list (redesigned: logos, bigger type, clean columns) ── */
.th-standings-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

.th-standings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.th-standings-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.th-standings-head .th-standings-rank,
.th-standings-head .th-standings-name,
.th-standings-head .th-standings-rec,
.th-standings-head .th-standings-pct {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.th-standings-row-me {
  background: var(--team-accent-bg, rgba(255,255,255,0.08));
  border-radius: 8px;
}

.th-standings-rank {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
}

.th-standings-logo-wrap {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-standings-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.th-standings-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.th-standings-rec {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  font-size: 13px;
  color: var(--text);
}

.th-standings-pct {
  flex-shrink: 0;
  width: 48px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* ── Squad: front office, then a section per role ──────────────────────── */
.th-squad-office {
  margin: 4px 16px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.1));
}
.th-squad-office-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.th-squad-office-row + .th-squad-office-row { margin-top: 3px; }
.th-squad-office-label {
  flex: 0 0 auto;
  min-width: 86px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--muted, #6b7280);
}
.th-squad-office-name {
  font-size: .92rem;
  font-weight: 800;
  color: var(--text, #111);
}

.th-squad-group + .th-squad-group { margin-top: 14px; }
.th-squad-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 16px 4px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--muted, #6b7280);
}
.th-squad-group-count {
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-card2, rgba(0,0,0,.05));
  color: var(--muted, #6b7280);
}

/* ── Squad list (365scores-style row: photo, bold name, position, jersey) ── */
.th-squad-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

.th-squad-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.th-squad-photo-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.th-squad-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-squad-silhouette {
  font-size: 20px;
}

.th-squad-info {
  flex: 1;
  min-width: 0;
}

.th-squad-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.th-squad-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.th-squad-jersey {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  min-width: 26px;
  text-align: center;
}

/* ── Games tab ── */
.th-games-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.th-game-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.th-game-date { color: var(--muted); }
.th-game-teams { font-weight: 600; color: var(--text); }

/* ── Transfers tab ── */
.th-transfers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.th-transfer-row {
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.th-transfer-date {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 2px;
}

.th-transfer-desc { color: var(--text); }

/* ── Last-10 strip ───────────────────────────────────────────────────────────
   Ten games on one line: opponent, result in the colour, a dot for home. */

/* One line, always. Wrapping put two chips on a second row and made the card
   look broken; a strip that scrolls sideways keeps the shape. */
.th-l10-strip {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 .55rem;
  margin-top: -.15rem;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.th-l10-strip::-webkit-scrollbar { display: none; }



/* A home game carries a dot; an away game doesn't. One mark, not two labels. */



/* ── Last ten, as games ──────────────────────────────────────────────────────
   The opponent's crest with that game's score under it, green when it was won
   and red when it wasn't. Each game sizes to its own score: a fixed 46px cell
   was narrower than "103-89", so wide scores pushed into the next game and the
   row read as one smear of numbers.

   The strip is also its own block, set off from the rows above and below it —
   pressed straight against "בית 11-8" it looked like part of that line. */
.th-l10-strip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  margin: .15rem 0 .35rem;
  padding: .7rem .25rem .8rem;
  border-top: 1px solid var(--border, rgba(0,0,0,.07));
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07));
  scrollbar-width: thin;
}
.th-l10-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;          /* never squeezed, never stretched */
  font-family: inherit;
}
.th-l10-logo { width: 26px; height: 26px; object-fit: contain; display: block; }
.th-l10-abbr {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-secondary, #777);
  height: 26px;
  display: flex;
  align-items: center;
}
.th-l10-score {
  font-size: .66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  padding: .1rem .42rem;
  border-radius: 999px;
  border: 1.5px solid;
  white-space: nowrap;
}
.th-l10-game.won  .th-l10-score { color: #15803d; border-color: #22c55e; }
.th-l10-game.lost .th-l10-score { color: #b91c1c; border-color: #ef4444; }
.th-l10-game:hover .th-l10-logo { transform: scale(1.08); transition: transform .12s; }

/* Every value in this table is a number or a number pair — a record, a rank, a
   streak, a percentage. In an RTL page "11-8 · 58%" laid out as "58% · 11-8",
   and a record can flip outright ("27-14" reading as "14-27"), which changes
   who has the better season. */
.th-detail-v { direction: ltr; unicode-bidi: isolate; }


/* ── Crests on the near-black EuroLeague / National-Teams palettes ────────
   Measured live: the recent-form strip sits on #141410 and the title band on
   #666666, and the EuroLeague crest set is largely dark — ASVEL loses 100% of
   its visible pixels to below 3:1 on that ground, Baskonia 70%, Efes 67%.
   Same light disc the game card uses, so a badge reads the same wherever it
   appears. Not applied to the NBA, whose crests carry white. */
html[data-theme="dark"] body[data-league="EuroLeague"] .th-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .th-logo {
  padding: 4px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
}
html[data-theme="dark"] body[data-league="EuroLeague"] .th-l10-logo,
html[data-theme="dark"] body[data-league="EuroLeague"] .th-standings-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .th-l10-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .th-standings-logo {
  padding: 2px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
}

/* Shown only while the recent-form strip is drawing last season's games,
   directly under a record that reads 0-0. Quiet: it is a caveat, not a
   warning — the games themselves are real, they are just not from now. */
.th-l10-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-align: start;
}

/* The club name under each chip in the recent-form strip.

   This is the one place in the app where a crest stands without a name beside
   it, and the crests are now colour discs. Measured across the twenty
   EuroLeague clubs: four are the identical black — Milan, Besiktas, Partizan,
   Virtus — and Paris and Crvena Zvezda share one red exactly, with sixteen
   more pairs under a just-noticeable difference. A disc cannot tell those
   apart and should not be asked to; the name does it.

   The tooltip already carried the name, which is no answer on a phone.
   Truncated rather than shortened by rule: an ellipsis is honestly partial,
   where a made-up abbreviation reads as the club's actual short name. */
.th-l10-name {
  max-width: 54px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}


/* ── Where the team stands in the league ─────────────────────────────── */
.th-rk { margin-bottom: 20px; }
.th-rk-title { font-size: 16px; font-weight: 800; color: var(--text); }
.th-rk-sub { color: var(--muted); font-size: 12px; margin: 2px 0 10px; }
.th-rk-note {
  font-size: 12px; color: var(--text); margin: -4px 0 10px;
  padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.th-rk-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.th-rk-tile {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  background: var(--bg-card);
}
.th-rk-tile-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.th-rk-tile-rank { font-size: 20px; font-weight: 800; color: var(--text); margin: 2px 0; }
.th-rk-tile-val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.th-rk-more { margin-top: 10px; }
.th-rk-more > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 6px 0;
}
/* Columns by the room the panel actually has, not the window: in a 660px
   panel three columns wrapped every label onto two lines. */
.th-rk-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.th-rk-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--bg-card);
}
.th-rk-group-title {
  font-size: 12px; font-weight: 800; color: var(--muted);
  letter-spacing: .02em; margin-bottom: 4px;
}
.th-rk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 13px;
}
.th-rk-row:first-of-type { border-top: 0; }
.th-rk-k { flex: 1; color: var(--text); min-width: 0; }
.th-rk-v { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.th-rk-pill {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text);
}
/* Colour only reinforces the place, which is always written out. */
.th-rk-t1 { background: color-mix(in srgb, #16a34a 24%, var(--bg-card)); border-color: color-mix(in srgb, #16a34a 50%, transparent); }
.th-rk-t2 { background: color-mix(in srgb, #16a34a 11%, var(--bg-card)); }
.th-rk-t3 { background: var(--bg-card); }
.th-rk-t4 { background: color-mix(in srgb, #d97706 12%, var(--bg-card)); }
.th-rk-t5 { background: color-mix(in srgb, #d97706 24%, var(--bg-card)); border-color: color-mix(in srgb, #d97706 50%, transparent); }