/* claude-polish.css — light visual pass on top of app.css (loaded after it).
   Nothing is hidden or removed; only spacing, readability and colour fixes. Works in both themes. */

/* ---------- type ---------- */
html[data-theme] {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.app-ready { font-family: var(--font); letter-spacing: -0.005em; }
body.app-ready table,
body.app-ready .matchup-line,
body.app-ready .season-summary-card,
body.app-ready .opponent-block,
body.app-ready .records-content,
body.app-ready .font-mono { font-variant-numeric: tabular-nums; }

/* wider reading area on big screens so card grids have room */
@media (min-width: 1280px) {
  body.app-ready .app-main .max-w-5xl { max-width: 72rem; }
}

/* ---------- W / L colours (dark theme rules were turning them white) ---------- */
body.app-ready .text-green-600,
body.app-ready td.text-green-600.font-bold,
body.app-ready .matchup-line .text-green-600 { color: #15803d !important; }
body.app-ready .text-red-600,
body.app-ready td.text-red-600.font-bold,
body.app-ready .matchup-line .text-red-600 { color: #dc2626 !important; }
html[data-theme="dark"] body.app-ready .text-green-600,
html[data-theme="dark"] body.app-ready td.text-green-600.font-bold,
html[data-theme="dark"] body.app-ready .matchup-line .text-green-600 { color: #4ade80 !important; }
html[data-theme="dark"] body.app-ready .text-red-600,
html[data-theme="dark"] body.app-ready td.text-red-600.font-bold,
html[data-theme="dark"] body.app-ready .matchup-line .text-red-600 { color: #f87171 !important; }
/* change labels keep their meaning colours in dark mode too */
html[data-theme="dark"] body.app-ready .text-yellow-400 { color: #facc15 !important; }
html[data-theme="dark"] body.app-ready .text-green-500 { color: #4ade80 !important; }

/* ---------- team cards ---------- */
body.app-ready .team-card { margin-bottom: 0.75rem !important; transition: box-shadow .15s ease; }
body.app-ready .team-card:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, .12) !important; }
body.app-ready .team-header { align-items: center; padding-top: .8rem !important; padding-bottom: .8rem !important; }
body.app-ready .team-header .toggle-btn { font-size: .75rem; opacity: .8; }
/* (manager change) / (team name change) / (12-man expansion) labels: dark pill so they read on gold, silver, bronze and blue */
body.app-ready .team-header span.text-xs[class*="text-red-"],
body.app-ready .team-header span.text-xs[class*="text-yellow-"],
body.app-ready .team-header span.text-xs[class*="text-green-"] {
  background: rgba(15, 23, 42, .78);
  border-radius: 999px;
  padding: .1rem .5rem;
  margin-left: .45rem !important;
  font-size: .68rem;
  vertical-align: middle;
  opacity: 1 !important;
}
body.app-ready .team-header span.text-xs[class*="text-red-"] { color: #fca5a5 !important; }
body.app-ready .team-header span.text-xs[class*="text-yellow-"] { color: #fde047 !important; }
body.app-ready .team-header span.text-xs[class*="text-green-"] { color: #86efac !important; }

/* inner tabs: clearer active state */
body.app-ready .card-tab-btn { border-radius: 8px 8px 0 0; transition: color .12s ease, background-color .12s ease; }
body.app-ready .card-tab-btn:hover { background: var(--main-surface-2); }

/* Record-vs blocks: responsive grid instead of one long column (same content, less scrolling) */
body.app-ready .stat-block > .space-y-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: .6rem;
}
body.app-ready .stat-block > .space-y-3 > * { margin: 0 !important; }
body.app-ready .opponent-block { margin-bottom: 0 !important; }
body.app-ready .opponent-block > .font-semibold { font-size: .95rem; }
/* the three H2H numbers (season / current manager / all managers) as small stat pills */
body.app-ready .opponent-block > .flex.items-center > div {
  background: var(--main-surface);
  border: 1px solid var(--main-border);
  border-radius: 8px;
  padding: .2rem .5rem;
}
body.app-ready .opponent-block > .flex.items-center {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem !important;
  align-items: stretch !important;
}
body.app-ready .opponent-block > .flex.items-center > div > div:first-child { line-height: 1.15; }
body.app-ready .opponent-block > .flex.items-center > div > div:last-child { font-size: .9rem; }
body.app-ready .matchup-line > div { padding: 1px 0; }

/* summary 4-boxes */
body.app-ready .season-summary-card { border-radius: 10px !important; }

/* ---------- tables ---------- */
body.app-ready table { border-collapse: separate; border-spacing: 0; }
body.app-ready tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--main-surface-2) 55%, transparent); }
body.app-ready tbody tr.champion-row td { background: var(--champion-bg) !important; }
body.app-ready th { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
body.app-ready td, body.app-ready th { padding-top: .45rem; padding-bottom: .45rem; }

/* ---------- League Records / Fun stats tiles ---------- */
body.app-ready .records-content .grid > div,
body.app-ready .records-content .grid > div { border-radius: 10px !important; }
body.app-ready .records-tab-btn { border-radius: 8px 8px 0 0; }
body.app-ready .records-tab-btn:hover { background: var(--main-surface-2); }

/* keyboard focus you can actually see */
body.app-ready a:focus-visible,
body.app-ready button:focus-visible,
body.app-ready [onclick]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

@media (max-width: 640px) {
  body.app-ready .stat-block > .space-y-3 { grid-template-columns: 1fr; }
  body.app-ready .opponent-block > .flex.items-center > div { padding: .2rem .35rem; min-width: 0; }
  body.app-ready .opponent-block > .flex.items-center > div > div:first-child { font-size: 8.5px !important; letter-spacing: .01em; }
  body.app-ready .opponent-block > .flex.items-center { grid-template-columns: 1fr 1fr 1.45fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.app-ready .team-card, body.app-ready .card-tab-btn { transition: none; }
}