/**
 * Team Analysis Dashboard — Premium Analytics UI
 * Design: Sofascore/Fotmob/Opta inspired
 * Version: tca-v1-20260413
 */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --tca-green:     var(--success);
  --tca-green-bg:  color-mix(in srgb, var(--success) 14%, transparent);
  --tca-red:       var(--danger);
  --tca-red-bg:    color-mix(in srgb, var(--danger) 14%, transparent);
  --tca-amber:     var(--warning);
  --tca-amber-bg:  color-mix(in srgb, var(--warning) 14%, transparent);
  --tca-blue:      var(--accent-primary, var(--primary-container));
  --tca-blue-bg:   var(--accent-tint, color-mix(in srgb, var(--primary-container) 12%, transparent));
  --tca-card-bg:   var(--bg-secondary, var(--surface-container-high));
  --tca-card-border: var(--border-subtle, rgba(255,255,255,.07));
  --tca-radius:    14px;
  --tca-shadow:    0 2px 12px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.12);
}

/* ── Dashboard Shell ───────────────────────────────────────── */
.tca-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 0;
}

/* ── 1. TEAM HEADER ────────────────────────────────────────── */
.tca-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--tca-card-bg);
  border: 1px solid var(--tca-card-border);
  border-radius: var(--tca-radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--tca-shadow);
  flex-wrap: wrap;
}

.tca-header__logo-wrap {
  flex-shrink: 0;
}

.tca-header__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

.tca-header__logo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--tca-radius);
  background: var(--bg-tertiary, var(--surface-container-high));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-secondary, var(--outline));
}

.tca-header__info {
  flex: 1;
  min-width: 0;
}

.tca-header__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary, #fff);
  margin: 0 0 .35rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.tca-header__league {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text-secondary, var(--outline));
  font-weight: 500;
}

.tca-header__league:hover {
  color: var(--accent-primary, var(--primary-container));
}

/* Gauge cluster */
.tca-header__ratings {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-shrink: 0;
}

/* ── Gauge ─────────────────────────────────────────────────── */
.tca-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}

.tca-gauge__ring {
  position: relative;
  width: 64px;
  height: 64px;
}

.tca-gauge__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.tca-gauge__track {
  fill: none;
  stroke: var(--bg-tertiary, var(--surface-container-high));
  stroke-width: 6;
}

.tca-gauge__fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 150.796; /* 2π × 24 */
  stroke-dashoffset: calc(150.796 * (1 - min(var(--gauge-pct, 50), 100) / 100));
  transition: stroke-dashoffset .6s ease;
}

.tca-gauge--green .tca-gauge__fill { stroke: var(--tca-green); }
.tca-gauge--yellow .tca-gauge__fill { stroke: var(--tca-amber); }
.tca-gauge--red .tca-gauge__fill { stroke: var(--tca-red); }

.tca-gauge__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: var(--text-primary, #fff);
  line-height: 1;
}

.tca-gauge__label {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted, var(--outline));
}

/* ── 2. KPI ROW ────────────────────────────────────────────── */
.tca-kpi-row {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
}

.tca-kpi {
  flex: 1 1 80px;
  min-width: 70px;
  background: var(--tca-card-bg);
  border: 1px solid var(--tca-card-border);
  border-radius: 10px;
  padding: .875rem .75rem;
  text-align: center;
  box-shadow: var(--tca-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}

.tca-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}

.tca-kpi__val {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #fff);
}

.tca-kpi__label {
  display: block;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted, var(--outline));
  margin-top: .2rem;
}

.tca-kpi--green {
  border-color: color-mix(in srgb, var(--tca-green) 35%, transparent);
  background: color-mix(in srgb, var(--tca-card-bg) 85%, var(--tca-green) 15%);
}

.tca-kpi--green .tca-kpi__val { color: var(--tca-green); }

.tca-kpi--red {
  border-color: color-mix(in srgb, var(--tca-red) 35%, transparent);
  background: color-mix(in srgb, var(--tca-card-bg) 85%, var(--tca-red) 15%);
}

.tca-kpi--red .tca-kpi__val { color: var(--tca-red); }

.tca-kpi--accent {
  border-color: color-mix(in srgb, var(--tca-blue) 40%, transparent);
  background: color-mix(in srgb, var(--tca-card-bg) 85%, var(--tca-blue) 15%);
}

.tca-kpi--accent .tca-kpi__val { color: var(--tca-blue); }

/* ── 3. GRID ───────────────────────────────────────────────── */
.tca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

/* ── Card Base ─────────────────────────────────────────────── */
.tca-card {
  background: var(--tca-card-bg);
  border: 1px solid var(--tca-card-border);
  border-radius: var(--tca-radius);
  box-shadow: var(--tca-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tca-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .875rem 1.25rem .625rem;
  border-bottom: 1px solid var(--tca-card-border);
}

.tca-card__title {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary, var(--outline));
}

.tca-card__sub {
  font-size: .72rem;
  color: var(--text-muted, var(--outline));
}

.tca-card__badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tca-blue-bg);
  color: var(--tca-blue);
  border: 1px solid color-mix(in srgb, var(--tca-blue) 30%, transparent);
}

.tca-card__body {
  padding: 1.125rem 1.25rem;
  flex: 1;
}

.tca-card__footnote {
  font-size: .7rem;
  color: var(--text-muted, var(--outline));
  margin: .75rem 0 0;
  line-height: 1.4;
}

/* ── 3a. Form Card ─────────────────────────────────────────── */
.tca-form-badges {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tca-form-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-decoration: none;
  width: 46px;
  cursor: pointer;
  transition: transform .15s ease;
}

.tca-form-badge:hover {
  transform: translateY(-3px);
}

.tca-form-badge__letter {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.tca-form-badge__score {
  font-size: .6rem;
  font-weight: 600;
  color: var(--text-muted, var(--outline));
  letter-spacing: -.01em;
}

.tca-form-badge--w .tca-form-badge__letter {
  background: var(--tca-green-bg);
  color: var(--tca-green);
  border: 1.5px solid color-mix(in srgb, var(--tca-green) 35%, transparent);
}

.tca-form-badge--d .tca-form-badge__letter {
  background: var(--tca-amber-bg);
  color: var(--tca-amber);
  border: 1.5px solid color-mix(in srgb, var(--tca-amber) 35%, transparent);
}

.tca-form-badge--l .tca-form-badge__letter {
  background: var(--tca-red-bg);
  color: var(--tca-red);
  border: 1.5px solid color-mix(in srgb, var(--tca-red) 35%, transparent);
}

/* Form detail list */
.tca-form-detail {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.tca-form-detail__item {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .8125rem;
  text-decoration: none;
  color: var(--text-secondary, var(--outline));
  padding: .3rem .5rem;
  border-radius: 6px;
  transition: background .12s ease, color .12s ease;
}

.tca-form-detail__item:hover {
  background: var(--bg-tertiary, var(--surface-container-high));
  color: var(--text-primary, #fff);
}

.tca-form-detail__badge {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: .65rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tca-form-detail__badge--w { background: var(--tca-green-bg); color: var(--tca-green); }
.tca-form-detail__badge--d { background: var(--tca-amber-bg); color: var(--tca-amber); }
.tca-form-detail__badge--l { background: var(--tca-red-bg); color: var(--tca-red); }

.tca-form-detail__opp {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tca-form-detail__score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #fff);
  flex-shrink: 0;
}

/* ── 3b. Season Stats / Bar Rows ──────────────────────────── */
.tca-stat-grid {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.125rem;
}

/* .tca-stat-row* moved to .premium-stat-bar (premium.css). */

/* Mini stat chips */
.tca-mini-stat-pair {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.tca-mini-stat {
  flex: 1 1 72px;
  min-width: 64px;
  border-radius: 8px;
  padding: .5rem .625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
}

.tca-mini-stat__val {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tca-mini-stat__label {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .2rem;
  text-align: center;
}

.tca-mini-stat--green {
  background: var(--tca-green-bg);
  border-color: color-mix(in srgb, var(--tca-green) 25%, transparent);
}
.tca-mini-stat--green .tca-mini-stat__val  { color: var(--tca-green); }
.tca-mini-stat--green .tca-mini-stat__label { color: color-mix(in srgb, var(--tca-green) 70%, white); }

.tca-mini-stat--red {
  background: var(--tca-red-bg);
  border-color: color-mix(in srgb, var(--tca-red) 25%, transparent);
}
.tca-mini-stat--red .tca-mini-stat__val  { color: var(--tca-red); }
.tca-mini-stat--red .tca-mini-stat__label { color: color-mix(in srgb, var(--tca-red) 70%, white); }

.tca-mini-stat--amber {
  background: var(--tca-amber-bg);
  border-color: color-mix(in srgb, var(--tca-amber) 25%, transparent);
}
.tca-mini-stat--amber .tca-mini-stat__val  { color: var(--tca-amber); }
.tca-mini-stat--amber .tca-mini-stat__label { color: color-mix(in srgb, var(--tca-amber) 70%, white); }

.tca-mini-stat--blue {
  background: var(--tca-blue-bg);
  border-color: color-mix(in srgb, var(--tca-blue) 25%, transparent);
}
.tca-mini-stat--blue .tca-mini-stat__val  { color: var(--tca-blue); }
.tca-mini-stat--blue .tca-mini-stat__label { color: color-mix(in srgb, var(--tca-blue) 70%, white); }

/* ── 3c. xPi Rating Trio ───────────────────────────────────── */
.tca-rating-trio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.25rem;
  padding: .5rem 0;
}

.tca-rating-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.tca-rating-item--center .tca-rating-item__arc {
  width: 76px;
  height: 76px;
  font-size: 1.2rem;
}

.tca-rating-item__arc {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  transition: transform .2s ease;
}

.tca-rating-item:hover .tca-rating-item__arc {
  transform: scale(1.07);
}

.tca-rating-item__arc--green {
  background: var(--tca-green-bg);
  border-color: color-mix(in srgb, var(--tca-green) 40%, transparent);
}
.tca-rating-item__arc--green .tca-rating-item__val { color: var(--tca-green); }

.tca-rating-item__arc--amber {
  background: var(--tca-amber-bg);
  border-color: color-mix(in srgb, var(--tca-amber) 40%, transparent);
}
.tca-rating-item__arc--amber .tca-rating-item__val { color: var(--tca-amber); }

.tca-rating-item__arc--red {
  background: var(--tca-red-bg);
  border-color: color-mix(in srgb, var(--tca-red) 40%, transparent);
}
.tca-rating-item__arc--red .tca-rating-item__val { color: var(--tca-red); }

.tca-rating-item__val {
  font-size: .875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tca-rating-item__label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted, var(--outline));
}

/* ── 4. CHARTS ─────────────────────────────────────────────── */
.tca-charts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.tca-chart-card {
  background: var(--tca-card-bg);
  border: 1px solid var(--tca-card-border);
  border-radius: var(--tca-radius);
  box-shadow: var(--tca-shadow);
  overflow: hidden;
}

.tca-chart-card--full {
  grid-column: 1 / -1;
}

.tca-chart-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1.25rem .625rem;
  border-bottom: 1px solid var(--tca-card-border);
  flex-wrap: wrap;
}

.tca-chart-card__title {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary, var(--outline));
}

.tca-chart-card__meta {
  font-size: .72rem;
  color: var(--text-muted, var(--outline));
  margin: 0;
}

.tca-chart-card__meta strong {
  color: var(--text-primary, #fff);
}

.tca-chart-card__body {
  padding: .875rem 1rem;
}

/* Toggle */
.tca-toggle {
  display: flex;
  align-items: center;
  gap: .375rem;
  cursor: pointer;
  user-select: none;
}

.tca-toggle__label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted, var(--outline));
  white-space: nowrap;
}

.tca-toggle input:checked + .tca-toggle__label {
  color: var(--tca-blue);
}

/* Empty state */
.tca-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2rem;
  min-height: 100px;
}

.tca-empty__icon {
  font-size: 2rem;
  opacity: .6;
}

.tca-empty__text {
  font-size: .8125rem;
  color: var(--text-muted, var(--outline));
  margin: 0;
  text-align: center;
}

/* ── Light Theme Overrides ─────────────────────────────────── */
html.theme-light {
  --tca-card-bg: var(--bg-secondary, var(--surface-container-low));
  --tca-card-border: var(--border-subtle, rgba(0,0,0,.07));
  --tca-shadow: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
}

html.theme-light .tca-gauge__track {
  stroke: var(--bg-elevated, var(--surface-highest));
}


html.theme-light .tca-header__logo-placeholder {
  background: var(--bg-elevated, var(--surface-highest));
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tca-header {
    gap: 1rem;
    padding: 1rem;
  }

  .tca-header__name {
    font-size: 1.25rem;
  }

  .tca-header__logo,
  .tca-header__logo-placeholder {
    width: 56px;
    height: 56px;
  }

  .tca-header__ratings {
    width: 100%;
    justify-content: flex-end;
  }

  .tca-kpi-row {
    gap: .5rem;
  }

  .tca-kpi {
    flex: 1 1 64px;
    min-width: 60px;
    padding: .625rem .5rem;
  }

  .tca-kpi__val {
    font-size: 1.25rem;
  }

  .tca-grid,
  .tca-charts {
    grid-template-columns: 1fr;
  }

  .tca-card .premium-stat-bar--single {
    grid-template-columns: 100px 1fr 44px;
  }

  .tca-rating-trio {
    gap: .75rem;
  }
}

@media (max-width: 480px) {
  .tca-kpi__val {
    font-size: 1.1rem;
  }

  .tca-kpi__label {
    font-size: .6rem;
  }

  .tca-form-badges {
    gap: .4rem;
  }

  .tca-form-badge {
    width: 40px;
  }

  .tca-form-badge__letter {
    width: 32px;
    height: 32px;
    font-size: .875rem;
  }

  .tca-header__ratings {
    gap: .625rem;
  }
}