/* Pitch Control Viewer — dark theme.
   Simple, beginner-readable CSS: flex layout, one dark palette. */

:root {
  --bg: #10161c;          /* page background */
  --panel: #1a232c;       /* sidebar / header panels */
  --panel-edge: #2a3743;  /* borders */
  --text: #dde7ee;
  --text-dim: #8fa3b3;
  --accent-a: #ff5252;    /* team A */
  --accent-b: #4080ff;    /* team B */
  --ball: #ffd54f;
  --good: #3ddc84;        /* connected dot */
  --bad: #ff5252;         /* disconnected dot */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-edge);
  flex-wrap: wrap;
}

h1 { font-size: 18px; margin: 0; }
.subtitle { color: var(--text-dim); font-weight: normal; font-size: 14px; }

/* Connection status: colored dot + text */
.conn { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.conn .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bad); display: inline-block;
}
.conn.connected .dot { background: var(--good); box-shadow: 0 0 6px var(--good); }

/* Data-source switcher buttons */
#source-switcher { margin-left: auto; display: flex; gap: 6px; }
.src-btn {
  background: var(--panel-edge);
  color: var(--text);
  border: 1px solid transparent;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.src-btn:hover { border-color: var(--text-dim); }
.src-btn.active { background: #2f5f8f; }

/* ---------- Main two-column layout ---------- */
main {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  min-height: 0;
}

#pitch-pane { flex: 1; display: flex; min-width: 0; }
#pitch { width: 100%; height: 100%; border-radius: 8px; background: var(--panel); }

/* ---------- Sidebar ---------- */
#sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
}

#sidebar h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin: 14px 0 6px;
}
#sidebar h2:first-child { margin-top: 0; }

.controls { display: flex; gap: 8px; align-items: center; }
#play-pause {
  background: var(--panel-edge); color: var(--text);
  border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer;
}
#speed { background: var(--panel-edge); color: var(--text); border: none; padding: 6px; border-radius: 6px; }

.overlays label, .controls label { display: block; font-size: 14px; padding: 3px 0; cursor: pointer; }

.stats .stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--panel-edge); font-size: 14px;
}
.stat-label { color: var(--text-dim); }

/* Stat badges: possession team, transition score */
.badge {
  padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: bold;
}
.badge.team-a { background: var(--accent-a); color: #fff; }
.badge.team-b { background: var(--accent-b); color: #fff; }
.badge.none { background: var(--panel-edge); color: var(--text-dim); }

/* Brief flash when a transition event arrives */
.badge.flash { animation: flash 1.2s ease-out; }
@keyframes flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.9); }
  100% { box-shadow: 0 0 0 14px rgba(255, 213, 79, 0); }
}

/* Transition overlay: temporary glow on the affected team's circles */
circle.team-a.glow { filter: drop-shadow(0 0 6px var(--accent-a)); stroke: #fff; stroke-width: 3; }
circle.team-b.glow { filter: drop-shadow(0 0 6px var(--accent-b)); stroke: #fff; stroke-width: 3; }