/**
 * Team Season Aggregate Comparison
 * Prefix: tsac-
 * Used in: match_detail.html -> Analysis tab
 */

:root {
  --tsac-home: var(--primary-container);
  --tsac-home-dim: color-mix(in srgb, var(--primary-container) 52%, transparent);
  --tsac-away: var(--tertiary);
  --tsac-away-dim: color-mix(in srgb, var(--tertiary) 52%, transparent);
  --tsac-neutral: color-mix(in srgb, var(--outline) 58%, transparent);
  --tsac-card-bg: var(--surface-container);
  --tsac-card-bg-alt: var(--surface-container-low);
  --tsac-card-bg-emphasis: var(--surface-container-high);
  --tsac-track-bg: color-mix(in srgb, var(--outline) 20%, var(--surface-container-high) 80%);
  --tsac-text: var(--on-surface);
  --tsac-text-dim: var(--on-surface-variant);
  --tsac-radius: var(--te-radius-lg);
}

/* ── Panel shell ───────────────────────────────────────────── */
.tsac-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
.tsac-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--tsac-card-bg-alt);
  border-radius: var(--tsac-radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--te-shadow-ambient);
}

.tsac-header__team {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.tsac-header__team--away {
  flex-direction: row-reverse;
  text-align: right;
}

.tsac-header__logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.tsac-header__logo-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--tsac-card-bg-emphasis);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tsac-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--te-label-spacing);
  flex-shrink: 0;
}

.tsac-header__team-name {
  font-size: .9375rem;
  font-weight: 800;
  color: var(--tsac-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

/* home team name color accent */
.tsac-header__team--home .tsac-header__team-name {
  border-bottom: 2px solid var(--tsac-home);
  padding-bottom: 2px;
  display: inline-block;
}

.tsac-header__team--away .tsac-header__team-name {
  border-bottom: 2px solid var(--tsac-away);
  padding-bottom: 2px;
  display: inline-block;
}

/* center section */
.tsac-header__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  text-align: center;
}

.tsac-header__label {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--te-label-spacing);
  color: var(--tsac-text-dim);
}

.tsac-header__season {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-container) 14%, transparent);
  color: color-mix(in srgb, var(--primary-container) 86%, var(--on-surface) 14%);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   KPI CHIPS ROW  (both teams side-by-side)
   ═══════════════════════════════════════════════════════════ */
.tsac-kpi-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .75rem;
  align-items: start;
}

.tsac-kpi-col {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.tsac-kpi-col--home { align-items: flex-start; }
.tsac-kpi-col--away { align-items: flex-end; }

.tsac-kpi-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tsac-text-dim);
  padding-top: .5rem;
}

.tsac-kpi-pair {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--tsac-card-bg);
  border-radius: 10px;
  padding: .5rem .875rem;
  width: 100%;
  min-width: 0;
}

.tsac-kpi-col--away .tsac-kpi-pair {
  flex-direction: row-reverse;
}

.tsac-kpi-pair__val {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tsac-text);
  flex-shrink: 0;
}

.tsac-kpi-pair__lbl {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--te-label-spacing);
  color: var(--tsac-text-dim);
  line-height: 1.3;
}

/* Color variants */
.tsac-kpi-pair--green {
  background: color-mix(in srgb, var(--te-win) 11%, var(--tsac-card-bg));
}
.tsac-kpi-pair--green .tsac-kpi-pair__val { color: var(--te-win); }

.tsac-kpi-pair--red {
  background: color-mix(in srgb, var(--error) 10%, var(--tsac-card-bg));
}
.tsac-kpi-pair--red .tsac-kpi-pair__val { color: var(--error); }

.tsac-kpi-pair--amber {
  background: color-mix(in srgb, var(--te-caution) 13%, var(--tsac-card-bg));
}
.tsac-kpi-pair--amber .tsac-kpi-pair__val { color: var(--te-caution); }

/* ═══════════════════════════════════════════════════════════
   STAT GROUP CARD
   ═══════════════════════════════════════════════════════════ */
.tsac-group {
  background: var(--tsac-card-bg);
  border-radius: var(--tsac-radius);
  overflow: hidden;
  box-shadow: var(--te-shadow-ambient);
}

.tsac-group__head {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1.25rem;
  background: var(--tsac-card-bg-alt);
}

.tsac-group__title {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--te-label-spacing);
  color: var(--tsac-text-dim);
}

.tsac-group--possession .tsac-group__head {
  background: color-mix(in srgb, var(--primary-container) 8%, var(--tsac-card-bg-alt));
}

.tsac-group--attacking .tsac-group__head {
  background: color-mix(in srgb, var(--tertiary) 9%, var(--tsac-card-bg-alt));
}

.tsac-group--defensive .tsac-group__head {
  background: color-mix(in srgb, var(--te-win) 11%, var(--tsac-card-bg-alt));
}

.tsac-group--discipline .tsac-group__head {
  background: color-mix(in srgb, var(--te-caution) 10%, var(--tsac-card-bg-alt));
}

/* ═══════════════════════════════════════════════════════════
   STAT ROW  (home_val ← LABEL → away_val  +  split bar)
   ═══════════════════════════════════════════════════════════ */
.tsac-row {
  padding: .875rem 1.25rem .75rem;
  transition: background .12s ease;
  cursor: default;
}

.tsac-row + .tsac-row {
  margin-top: 0.3rem;
}

.tsac-row:hover {
  background: color-mix(in srgb, var(--surface-highest) 28%, transparent);
}

/* top line: values + label */
.tsac-row__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: .625rem;
  margin-bottom: .55rem;
}

/* ── Values ─────────────────────────────────────────────────  */
.tsac-val {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tsac-text-dim);
  font-variant-numeric: tabular-nums;
  transition: color .2s ease, font-size .15s ease;
  line-height: 1.2;
}

.tsac-val--home { text-align: left; }
.tsac-val--away { text-align: right; }

/* winning side: brighter, slightly larger */
.tsac-val--leading {
  color: var(--tsac-text) !important;
  font-size: 1.175rem;
  font-weight: 800;
}

/* losing side: dimmer */
.tsac-val--trailing {
  color: var(--tsac-text-dim);
  opacity: .6;
}

/* arrow indicators on leading values */
.tsac-val--home.tsac-val--leading::after {
  content: ' ▲';
  font-size: .6em;
  color: var(--tsac-home);
  vertical-align: middle;
}

.tsac-val--away.tsac-val--leading::after {
  content: ' ▲';
  font-size: .6em;
  color: var(--tsac-away);
  vertical-align: middle;
}

/* trailing: down arrow */
.tsac-val--home.tsac-val--trailing::after {
  content: ' ▼';
  font-size: .55em;
  color: var(--tsac-text-dim);
  vertical-align: middle;
  opacity: .7;
}

.tsac-val--away.tsac-val--trailing::after {
  content: ' ▼';
  font-size: .55em;
  color: var(--tsac-text-dim);
  vertical-align: middle;
  opacity: .7;
}

/* ── Stat label ──────────────────────────────────────────────  */
.tsac-lbl {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  color: var(--tsac-text-dim);
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: var(--te-label-spacing);
  user-select: none;
}

/* tooltip indicator */
.tsac-lbl[data-tooltip] {
  cursor: help;
  border-bottom: 1px dashed color-mix(in srgb, var(--on-surface-variant) 50%, transparent);
  padding-bottom: 1px;
}

/* Duel bars: rendered via football/_stat_compare_bar.html partial.
   Premium gradient/track styling activates because .tsac-panel carries
   .mc-modern-stats-card.mc-modern-stats-card--bar-scope-only — the override
   block at match_center.css .mc-modern-stats-card .mc-stat-compare-bar applies. */

/* ═══════════════════════════════════════════════════════════
   "BETTER TEAM" SUMMARY BADGE  (per section)
   ═══════════════════════════════════════════════════════════ */
.tsac-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin: .5rem 1.25rem .75rem;
}

.tsac-summary-badge--home {
  background: color-mix(in srgb, var(--tsac-home) 12%, transparent);
  color: var(--tsac-home);
}

.tsac-summary-badge--away {
  background: color-mix(in srgb, var(--tsac-away) 12%, transparent);
  color: var(--tsac-away);
}

.tsac-summary-badge--tie {
  background: color-mix(in srgb, var(--on-surface-variant) 12%, transparent);
  color: var(--tsac-text-dim);
}

/* ═══════════════════════════════════════════════════════════
   EMPTY / UNAVAILABLE STATE
   ═══════════════════════════════════════════════════════════ */
.tsac-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: 2.5rem 1.5rem;
  background: var(--tsac-card-bg);
  border-radius: var(--tsac-radius);
  box-shadow: var(--te-shadow-ambient);
  text-align: center;
}

.tsac-empty__icon {
  font-size: .6875rem;
  font-weight: var(--te-label-weight);
  letter-spacing: var(--te-label-spacing);
  opacity: .7;
}

.tsac-empty__title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--tsac-text);
  margin: 0;
}

.tsac-empty__sub {
  font-size: .78rem;
  color: var(--tsac-text-dim);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIP (rendered via JS, positioned absolute)
   ═══════════════════════════════════════════════════════════ */
.tsac-tooltip {
  position: absolute;
  z-index: 9999;
  padding: .4rem .8rem;
  background: var(--surface-container-high);
  color: var(--tsac-text);
  font-size: .71rem;
  font-weight: 500;
  line-height: 1.45;
  border-radius: 8px;
  box-shadow: var(--te-shadow-md);
  pointer-events: none;
  max-width: 220px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════ */
html.theme-light .tsac-header__logo-placeholder {
  background: var(--surface-container-high);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .tsac-header {
    padding: 1rem;
    gap: .625rem;
  }

  .tsac-header__logo,
  .tsac-header__logo-placeholder {
    width: 40px;
    height: 40px;
  }

  .tsac-header__team-name {
    font-size: .8125rem;
  }

  .tsac-header__season {
    font-size: .65rem;
    padding: 2px 8px;
  }

  .tsac-kpi-wrap {
    grid-template-columns: 1fr auto 1fr;
    gap: .5rem;
  }

  .tsac-kpi-pair {
    padding: .4rem .625rem;
    gap: .4rem;
  }

  .tsac-kpi-pair__val {
    font-size: 1.125rem;
  }

  .tsac-kpi-pair__lbl {
    font-size: .58rem;
  }

  .tsac-row {
    padding: .75rem 1rem;
  }

  .tsac-row__top {
    gap: .375rem;
  }

  .tsac-val {
    font-size: .9375rem;
  }

  .tsac-val--leading {
    font-size: 1.0625rem;
  }

  .tsac-lbl {
    font-size: 0.625rem;
  }

  .tsac-group__head {
    padding: .625rem 1rem;
  }
}

@media (max-width: 400px) {
  .tsac-header {
    flex-wrap: wrap;
    justify-content: center;
  }

  .tsac-header__center {
    order: -1;
    width: 100%;
    padding-bottom: .625rem;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--outline) 18%, transparent);
    margin-bottom: .125rem;
  }

  .tsac-val {
    font-size: .875rem;
  }

  .tsac-lbl {
    font-size: 0.625rem;
  }
}