/* ============================================================================
   team-page.css — the team drill-down (dashboard.html #teamPage) in the
   shadcn style: rating panel with ring charts, an area chart for the rating
   trend, a bar per match for rating changes, and the match history as a
   timeline grouped by play day (markup from team-page.js). Loaded after
   ui.css; colors come from the page's theme variables so light and dark
   both work. Wins are blue, losses orange (told apart by lightness too).
   ============================================================================ */

:root {
  --tpx-win: #1d4ed8;      --tpx-win-bg: rgba(29, 78, 216, 0.10);
  --tpx-loss: #c2410c;     --tpx-loss-bg: rgba(194, 65, 12, 0.10);
  --tpx-gold: #a16207;
  --tpx-indigo: #4f46e5;
  --tpx-cyan: #0e7490;
  --tpx-line: #2563eb;
}
:root[data-theme="dark"] {
  --tpx-win: #60a5fa;      --tpx-win-bg: rgba(96, 165, 250, 0.16);
  --tpx-loss: #fb923c;     --tpx-loss-bg: rgba(251, 146, 60, 0.16);
  --tpx-gold: #fcd34d;
  --tpx-indigo: #818cf8;
  --tpx-cyan: #22d3ee;
  --tpx-line: #60a5fa;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tpx-win: #60a5fa;      --tpx-win-bg: rgba(96, 165, 250, 0.16);
    --tpx-loss: #fb923c;     --tpx-loss-bg: rgba(251, 146, 60, 0.16);
    --tpx-gold: #fcd34d;
    --tpx-indigo: #818cf8;
    --tpx-cyan: #22d3ee;
    --tpx-line: #60a5fa;
  }
}

/* The page's older sections (best win / worst loss, streak tiles, head-to-
   head) color results with --green / --red: map them onto the same win /
   loss pair the charts and timeline use. */
#teamPage { --green: var(--tpx-win); --red: var(--tpx-loss); }

/* ---- Hero: identity row ------------------------------------------------- */
#teamPage .tp-hero { background: transparent; padding: 24px 0 8px; border-bottom: 0; }
#teamPage .tp-hero-inner { max-width: 1100px; }
#teamPage .tp-body { max-width: 1100px; padding-top: 16px; }
#teamPage .tp-name-row { gap: 14px; margin-bottom: 18px; flex-wrap: nowrap; align-items: center; }
#teamPage .tp-name-group { gap: 6px; min-width: 0; }
#teamPage .tp-name { margin: 0; font-size: 1.85rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
#teamPage .tpx-verified { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.25em; vertical-align: -0.06em;
  fill: var(--tpx-win); stroke: var(--bg, #fff); }
#teamPage .tpx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#teamPage .tp-club-label { font-size: 14px; }
#teamPage .tp-club-label:empty { display: none; }
#teamPage .tp-division-badge { padding: 2px 10px; font-size: 12px; background: var(--ui-tint, rgba(37, 99, 235, .12));
  color: var(--accent2, #16467A); border-radius: 999px; }
#teamPage .tp-hero-logo { width: 64px; height: 64px; border-radius: 14px; box-shadow: none; border: 1px solid var(--border); }
/* No logo at all: the upload link becomes a dashed tile in the logo's place */
#teamPage #tpHeroLogo[style*="display: none"] + .tp-upload-link,
#teamPage #tpHeroLogo[style*="display:none"] + .tp-upload-link {
  width: 64px; height: 64px; box-sizing: border-box; margin: 0; padding: 6px; border-radius: 14px;
  border: 1.5px dashed var(--border); display: flex !important; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1.2; opacity: 1; color: var(--text2);
}
#teamPage #tpHeroLogo[style*="display: none"] + .tp-upload-link:hover,
#teamPage #tpHeroLogo[style*="display:none"] + .tp-upload-link:hover { color: var(--accent2); border-color: var(--accent2); text-decoration: none; }

/* ---- Rating panel (rendered into #tpStatsGrid) -------------------------- */
#teamPage .tp-stats-grid { display: flex; flex-direction: column; gap: 12px; }
.tpx-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px;
  padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.tpx-rating-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; }
.tpx-elo { font-size: 64px; line-height: 1; font-weight: 650; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tpx-elo-label { color: var(--text2); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tpx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tpx-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.tpx-chip.gold { color: var(--tpx-gold); }
.tpx-chip.up { color: var(--tpx-win); background: var(--tpx-win-bg); border-color: transparent; }
.tpx-chip.down { color: var(--tpx-loss); background: var(--tpx-loss-bg); border-color: transparent; }
.tpx-rings { display: grid; grid-template-columns: repeat(3, minmax(76px, 1fr)); gap: 12px; flex: 0 1 340px; }
.tpx-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.tpx-ring svg text { font-size: 15px; font-weight: 650; fill: var(--text); font-variant-numeric: tabular-nums; }
.tpx-ring-track { fill: none; stroke: var(--border); stroke-width: 7; }
.tpx-ring-val { fill: none; stroke-width: 7; stroke-linecap: round; }
.tpx-ring-val.r1 { stroke: var(--tpx-win); }
.tpx-ring-val.r2 { stroke: var(--tpx-indigo); }
.tpx-ring-val.r3 { stroke: var(--tpx-cyan); }
.tpx-ring-label { font-size: 13px; font-weight: 600; margin-top: 4px; }
.tpx-ring-sub { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.tpx-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tpx-mini > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--border); }
.tpx-mini > div:first-child { border-left: 0; }
.tpx-mini span { font-size: 12px; color: var(--text2); }
.tpx-mini b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- Cards -------------------------------------------------------------- */
#teamPage .tp-grid { gap: 16px; }
#teamPage .tp-grid > * { min-width: 0; }   /* let the chart cards shrink to the track */
#teamPage .tp-card { border-radius: 12px; overflow: visible; }
#teamPage .tp-card-header { padding: 14px 18px; font-size: 15px; gap: 8px; flex-wrap: wrap; }
#teamPage .tp-card-header > svg { color: var(--text2); flex: 0 0 auto; }
#teamPage .tp-card-body { padding: 16px 18px; }
.tpx-hd-note { margin-left: auto; color: var(--text2); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tpx-sub { color: var(--text2); font-size: 12.5px; margin: -4px 0 10px; }
.tpx-seg { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--ui-muted, rgba(0,0,0,.06)); }
.tpx-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text2);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.tpx-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* ---- Charts ------------------------------------------------------------- */
.tpx-chart-box { position: relative; width: 100%; }
.tpx-chart { display: block; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.tpx-chart text, .tpx-axis text { font-size: 11px; fill: var(--text2); }
.tpx-grid { stroke: var(--border); stroke-width: 1; }
.tpx-base { stroke: var(--text2); stroke-opacity: 0.55; stroke-dasharray: 4 4; }
.tpx-chart text.tpx-base-label { font-size: 11px; font-weight: 600; fill: var(--text2); }
.tpx-zero { stroke: var(--border); }
.tpx-line { fill: none; stroke: var(--tpx-line); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.tpx-fill-a { stop-color: var(--tpx-line); stop-opacity: 0.35; }
.tpx-fill-b { stop-color: var(--tpx-line); stop-opacity: 0; }
.tpx-peak { fill: var(--surface); stroke: var(--tpx-gold); stroke-width: 2; }
.tpx-last { fill: var(--tpx-line); stroke: var(--surface); stroke-width: 2; }
.tpx-hover { fill: var(--surface); stroke: var(--tpx-line); stroke-width: 2.5; pointer-events: none; }
.tpx-guide { stroke: var(--text2); stroke-opacity: 0.5; stroke-dasharray: 2 3; pointer-events: none; }
.tpx-up { fill: var(--tpx-win); }
.tpx-down { fill: var(--tpx-loss); }
.tpx-na { fill: var(--text2); opacity: 0.5; }
.tpx-tip { display: none; position: absolute; top: -6px; z-index: 5; pointer-events: none; max-width: 260px;
  padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(4, 28, 61, 0.18); font-size: 12px; line-height: 1.35; transform: translateY(-100%); }
.tpx-tip b, .tpx-tip span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpx-tip b { font-size: 13px; margin: 2px 0; }
.tpx-tip span { color: var(--text2); font-variant-numeric: tabular-nums; }
.tpx-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text2); }
.tpx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---- Match timeline ----------------------------------------------------- */
.tpx-tl { border-left: 2px solid var(--border); margin-left: 6px; }
.tpx-day { padding: 14px 0 2px 18px; }
.tpx-day:first-child { padding-top: 0; }
.tpx-day-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tpx-day h3 { margin: 0; font-size: 13.5px; font-weight: 650; }
.tpx-day-sum { color: var(--text2); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpx-day-t { color: var(--text2); font-size: 12px; margin-top: 2px; }
.tpx-m { position: relative; padding: 10px 0 10px 18px; display: flex; flex-direction: column; gap: 6px; }
.tpx-dot { position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; border-radius: 999px;
  border: 2px solid var(--surface); background: var(--text2); }
.tpx-m.won .tpx-dot { background: var(--tpx-win); }
.tpx-m.lost .tpx-dot { background: var(--tpx-loss); }
.tpx-m-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tpx-opp { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.tpx-opp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpx-opp:hover span { color: var(--accent); text-decoration: underline; }
.tpx-opp img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }
.tpx-delta { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpx-delta.up { color: var(--tpx-win); }
.tpx-delta.down { color: var(--tpx-loss); }
.tpx-delta.na { color: var(--text2); font-weight: 500; font-size: 12px; }
.tpx-m-bot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpx-res { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.tpx-res.w { color: var(--tpx-win); background: var(--tpx-win-bg); }
.tpx-res.l { color: var(--tpx-loss); background: var(--tpx-loss-bg); }
.tpx-set { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--border);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tpx-set.lost { color: var(--text2); }
.tpx-tag { font-size: 11.5px; color: var(--text2); }
.tpx-after { margin-left: auto; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.tpx-m.start { padding-bottom: 2px; }
.tpx-m.start .tpx-dot { background: var(--border); }
.tpx-start { font-size: 13px; color: var(--text2); }

/* Form dots and streak tiles match the win/loss colors */
#teamPage .tp-form-dot.w { background: var(--tpx-win-bg); color: var(--tpx-win); }
#teamPage .tp-form-dot.l { background: var(--tpx-loss-bg); color: var(--tpx-loss); }

@media (max-width: 640px) {
  #teamPage .tp-hero { padding-top: 16px; }
  #teamPage .tp-name { font-size: 1.45rem; }
  #teamPage .tp-hero-logo { width: 56px; height: 56px; }
  .tpx-rating { padding: 18px 16px; justify-content: center; text-align: center; }
  .tpx-rating-main { align-items: center; flex-basis: 100%; }
  .tpx-chips { justify-content: center; }
  .tpx-elo { font-size: 60px; }
  .tpx-rings { flex-basis: 100%; }
  .tpx-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpx-mini > div:nth-child(3) { border-left: 0; }
  .tpx-mini > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  #teamPage .tp-card-header { padding: 12px 14px; }
  #teamPage .tp-card-body { padding: 14px; }
  .tpx-seg { margin-left: 0; width: 100%; }
  .tpx-seg button { flex: 1; }
}