/* Match page: Standings / Form / Over-Under / HT-FT / Top Scorers (public/js/match-stats.js).
   Brand colours come from the theme tokens (Admin → Settings → Theme Colours); W/D/L use the
   standard result colours. */

.ms-card { overflow: hidden; }

.ms-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 12px;
}
.ms-tabs::-webkit-scrollbar { display: none; }

.ms-tab,
.ms-chip {
  flex: none;
  border: 1px solid var(--vp-border, #E5E7EB);
  background: var(--vp-card, #FFFFFF);
  color: var(--vp-muted, #5F7168);
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ms-tab { padding: 8px 16px; font-size: 13px; }
.ms-chip { padding: 5px 12px; font-size: 12px; }

.ms-tab:hover,
.ms-chip:hover { border-color: var(--vp-brand, #06301F); color: var(--vp-brand, #06301F); }

.ms-tab.is-active {
  background: var(--vp-brand, #06301F);
  border-color: var(--vp-brand, #06301F);
  color: #FFFFFF;
}
.ms-chip.is-active {
  background: var(--c-c7f04b, #C7F04B);
  border-color: var(--c-c7f04b, #C7F04B);
  color: var(--on-accent, #06301F);
}

.ms-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ms-controls:empty { display: none; }
.ms-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ms-chips-label { font-size: 12px; color: var(--vp-muted, #5F7168); margin-left: 2px; }

.ms-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--vp-border, #E5E7EB);
  border-radius: 12px;
}
.ms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--vp-text, #1E1E1E);
}
.ms-table th {
  padding: 10px 8px;
  background: var(--vp-bg-subtle, #F4F6F8);
  color: var(--vp-muted, #5F7168);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}
.ms-table td {
  padding: 9px 8px;
  border-top: 1px solid var(--vp-border, #E5E7EB);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ms-table .ms-left { text-align: left; }
.ms-table tr.is-team td { background: rgba(var(--c-c7f04b-rgb, 199, 240, 75), 0.16); font-weight: 700; }
.ms-table td.ms-zero { color: var(--vp-faint, #667085); font-weight: 500; }
.ms-pts { font-weight: 800; color: var(--vp-brand, #06301F); }

.ms-rank {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--vp-bg-subtle, #F4F6F8);
  font-weight: 700;
  font-size: 12px;
}

.ms-team { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; }
.ms-team span { overflow: hidden; text-overflow: ellipsis; }
.ms-team img,
.ms-crest-blank { width: 18px; height: 18px; flex: none; object-fit: contain; }
.ms-crest-blank { border-radius: 50%; background: var(--vp-bg-subtle, #F4F6F8); }

.ms-badges { display: inline-flex; gap: 3px; }
.ms-badge {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  color: #FFFFFF;
}
.ms-badge.is-w { background: #16A34A; }
.ms-badge.is-d { background: #6B7280; }
.ms-badge.is-l { background: #DC2626; }

.ms-pct {
  display: inline-block;
  min-width: 48px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(var(--c-06301f-rgb, 6, 48, 31), 0.08);
  color: var(--vp-brand, #06301F);
  font-weight: 800;
}
.ms-pct.is-alt { background: var(--vp-bg-subtle, #F4F6F8); color: var(--vp-muted, #5F7168); }

.ms-more {
  display: block;
  margin: 12px auto 0;
  padding: 8px 18px;
  border: 1px solid var(--vp-border, #E5E7EB);
  border-radius: 999px;
  background: var(--vp-card, #FFFFFF);
  color: var(--vp-brand, #06301F);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ms-more:hover { border-color: var(--vp-brand, #06301F); }

.ms-empty { margin: 8px 0; color: var(--vp-muted, #5F7168); font-size: 14px; }
.ms-note { margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: var(--vp-muted, #5F7168); }
.ms-note[hidden] { display: none; }

@media (max-width: 760px) {
  .ms-tab { padding: 7px 13px; font-size: 12px; }
  .ms-table { font-size: 12px; }
  .ms-table th, .ms-table td { padding: 8px 6px; }
  .ms-team { max-width: 130px; gap: 6px; }
  .ms-badge { width: 18px; height: 18px; font-size: 10px; }
}

/* Dark mode: the match page's own tokens switch; only the highlight needs a nudge. */
html[data-theme="dark"] .ms-tab.is-active { color: var(--vp-card, #112018); }
html[data-theme="dark"] .ms-table tr.is-team td { background: rgba(var(--c-c7f04b-rgb, 199, 240, 75), 0.10); }