:root {
  color-scheme: dark;
  --bg: #0f1216;
  --card-bg: #1a1f26;
  --text: #e8eaed;
  --muted: #9aa4b2;
  --accent: #4f8cff;
  --accent-hover: #3a76e8;
  --error: #ff6b6b;
  --success: #4fd68a;
  --border: #2a303a;
  --input-bg: #10141a;
  --tag-bg: #202733;
  --badge-bg: #3a2a1a;
  --badge-text: #ffb84f;
  --status-open-bg: #1f2d3d;
  --status-open-text: #6fa8ff;
  --status-won-bg: #1c3325;
  --status-lost-bg: #3a1f22;
  --status-void-bg: #2a2a2a;
  --hover-bg: #2a303a;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --text: #1b1e26;
  --muted: #5b6270;
  --accent: #2f6fed;
  --accent-hover: #1f5bd1;
  --error: #d1293f;
  --success: #1f9d63;
  --border: #dde1e8;
  --input-bg: #ffffff;
  --tag-bg: #eaedf3;
  --badge-bg: #fdecd2;
  --badge-text: #a8620a;
  --status-open-bg: #e3ecfc;
  --status-open-text: #2f6fed;
  --status-won-bg: #e1f5ea;
  --status-lost-bg: #fbe4e6;
  --status-void-bg: #eceef1;
  --hover-bg: #eaedf3;
  --shadow: 0 1px 3px rgba(30, 35, 45, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px;
}
.container.narrow { max-width: 420px; margin-top: 60px; }

h1 { font-size: 1.6rem; margin-bottom: 4px; }
h2 { font-size: 1.15rem; margin-top: 32px; }
.tagline { color: var(--muted); margin-top: 0; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label { font-size: 0.9rem; color: var(--muted); margin-top: 10px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; flex-direction: row; }
input[type="email"], input[type="password"], input[type="text"], input[type="number"] {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
}

button {
  margin-top: 16px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 1rem;
  cursor: pointer;
}
button:hover { background: var(--accent-hover); }

/* A plain <a> styled to look and behave like a primary button — used
   where the action is a real navigation/download (e.g. the results CSV
   export) rather than a form submission, so it has to stay an <a>, not
   a <button>, but shouldn't read as a lesser, secondary action just
   because of that. */
.button-like {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.button-like:hover { background: var(--accent-hover); }

.link-button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}
.link-button:hover { color: var(--text); }

.error { color: var(--error); }
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.empty-state { color: var(--muted); }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.1rem; }
.site-header nav { display: flex; gap: 18px; align-items: center; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--text); }
.inline-form { display: inline; margin: 0; }

.balance-banner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  margin-bottom: 20px;
}

.flash-message {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.flash-success { background: var(--status-won-bg); color: var(--success); }
.flash-error { background: var(--status-lost-bg); color: var(--error); }

.activity-feed {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  margin-bottom: 20px;
}
.activity-feed-title {
  margin: 0 0 8px 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feed-item {
  font-size: 0.85rem;
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.feed-actor { font-weight: 600; }
.feed-points { color: var(--accent); font-weight: 600; }
.feed-matchup { color: var(--text); }
.feed-sport {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.feed-when { float: right; color: var(--muted); font-size: 0.78rem; }
.feed-empty { color: var(--muted); font-size: 0.85rem; margin: 0; }

.parlay-slip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  margin-bottom: 20px;
}
.parlay-slip-title {
  margin: 0 0 8px 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.parlay-slip-legs { list-style: none; margin: 0 0 10px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.parlay-slip-leg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.parlay-slip-leg:last-child { border-bottom: none; }
.parlay-slip-empty { color: var(--muted); font-size: 0.85rem; font-style: italic; list-style: none; }
.parlay-slip-remove {
  margin: 0;
  padding: 2px 8px;
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
}
.parlay-slip-remove:hover { background: var(--hover-bg); color: var(--text); }
.parlay-slip-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 0.9rem; }
.parlay-slip-summary label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.parlay-slip-summary input[type="number"] { width: 80px; padding: 5px 8px; font-size: 0.9rem; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); }
.parlay-slip-summary button { margin-top: 0; padding: 6px 14px; font-size: 0.85rem; }

.parlay-leg-list { list-style: none; margin: 6px 0; padding: 0; font-size: 0.85rem; }
.parlay-leg-list li { padding: 2px 0; }
.parlay-leg-status {
  margin-left: 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.parlay-leg-won .parlay-leg-status { color: var(--success); }
.parlay-leg-lost .parlay-leg-status { color: var(--error); }

/* The events.html wager forms are empty (stub) elements — the actual
   inputs live in table cells and associate back via form="...", so
   there's nothing for these to visually contain. */
.wager-form { display: none; }
.already-bet { color: var(--muted); font-style: italic; }

.events-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.events-header h1 { margin-bottom: 0; }
.events-header .sport-filter-form { margin-left: auto; }
.sport-filter-form select, .odds-format-control select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.9rem;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Sport cells (events page, grouped view) ------------------------- */
/* One cell per sport rather than one long cross-sport table — see
   docs/ARCHITECTURE_AND_DECISIONS.md and events.go's groupEventsBySport.
   Deliberately reuses .table-scroll/.events-table as-is inside each
   cell rather than a different layout, so the fixed-column-width /
   sticky-slip-column work stays exactly as it was fixed — only the
   wrapper around the table is new. */
.sport-cell {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease;
}
.sport-cell:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); }
.sport-cell .table-scroll { margin-top: 12px; }
.sport-cell-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sport-cell-header h2 { margin: 0; font-size: 1.05rem; }
.sport-cell-count {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.sport-cell-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 0.85rem;
  text-decoration: none;
}
.sport-cell-more:hover { text-decoration: underline; }

/* Admin "Awaiting Results" settlement list ------------------------- */
/* The CSV export/import round trip (AdminResultsExportCSV /
   AdminResultsBulkUpload) is the intended path once there's more than
   a handful of events to settle — this block exists specifically to
   make that path visually primary rather than a footnote link buried
   in a hint sentence, which is what it used to be. See
   docs/ARCHITECTURE_AND_DECISIONS.md. */
.settlement-bulk-actions {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}
.settlement-bulk-actions .hint { margin-top: 8px; margin-bottom: 0; }
.settlement-bulk-actions .hint code {
  background: var(--tag-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Reuses .sport-cell's card/shadow treatment (see above) via the same
   class name — a <details> here is visually just another cell, the
   disclosure behavior is additive, not a different visual language. */
.awaiting-sport-group { cursor: default; }
.awaiting-sport-group > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none; /* hide the default marker; a custom one is added below so every browser's is consistent */
}
.awaiting-sport-group > summary::-webkit-details-marker { display: none; }
.awaiting-sport-group > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform 0.1s ease;
}
.awaiting-sport-group[open] > summary::before { transform: rotate(90deg); }
.awaiting-sport-group .admin-row { margin-top: 10px; }
.awaiting-sport-group .admin-row:first-of-type { margin-top: 14px; }

/* Events table ---------------------------------------------------- */
/* .table-scroll lets the table itself stay proper markup (real
   <thead>/<tr>/<td>) at all widths, rather than switching to a
   fabricated non-tabular layout on small screens — it just scrolls
   horizontally there. Column widths are kept compact deliberately so
   most phones need little or no scrolling in practice. */
.table-scroll { overflow-x: auto; margin-top: 16px; border: 1px solid var(--border); border-radius: 8px; }

/* table-layout: fixed + explicit per-column widths (via the <colgroup>
   classes below) is deliberate, not cosmetic — the table previously
   used the default "auto" layout, where every column's width is
   recalculated per-row from that row's content. Combined with the
   sticky Slip column, that produced two real bugs in practice: the
   column scrolling out of view with no indication it existed (fixed by
   pinning it — see the slip-col rule below), and then the pinned
   column's computed position drifting out of its own column slot and
   overlapping its neighbor whenever a row's content made auto-layout
   recompute that row's widths differently from the row before it.
   Sticky positioning is only reliably well-behaved in table cells when
   column widths are geometrically stable across every row — which is
   exactly what fixed layout guarantees and auto layout does not.
   border-collapse: separate (not collapse) is the other half of this:
   collapsed borders are a documented source of sticky-cell rendering
   glitches in Chrome/Firefox; border-spacing: 0 keeps the visual result
   identical to collapse for this table's borders, which only ever come
   from border-bottom on individual cells anyway. */
.events-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card-bg);
  font-size: 0.88rem;
}
.col-matchup-wide { width: 30%; }
.col-kickoff { width: 12%; }
.col-home, .col-draw, .col-away { width: 12%; }
.col-stake   { width: 9%; }
.col-action  { width: 8%; }
.col-slip    { width: 5%; }

.events-table th, .events-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
}
.events-table tbody tr:last-child td { border-bottom: none; }
.events-table tbody tr:hover { background: var(--hover-bg); }
.events-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.events-table .matchup-cell { font-weight: 600; white-space: normal; overflow-wrap: break-word; }
.events-table .commence-cell { color: var(--muted); font-size: 0.8rem; white-space: normal; }
.events-table .already-bet { white-space: normal; }

/* Pinned to the right edge of .table-scroll's scroll area, so the Slip
   checkbox stays reachable regardless of scroll position instead of
   just wherever the table happens to end (see the fixed-layout comment
   above for why this now behaves predictably rather than drifting).
   Deliberately scoped to this class rather than :last-child — the
   already-bet row's colspan cell is also its row's last child, and
   sticky-positioning a wide colspan cell serves no purpose there since
   that row has no slip control to lose in the first place. */
.events-table th.slip-col,
.events-table td.slip-col {
  position: sticky;
  right: 0;
  background: var(--card-bg);
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.events-table tbody tr:hover td.slip-col { background: var(--hover-bg); }
.sport-tag {
  background: var(--tag-bg);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.odds-radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.underdog-tag { font-size: 0.85em; cursor: help; }
.no-draw { color: var(--muted); }
.stake-input { width: 60px; padding: 4px 6px; font-size: 0.85rem; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); }
.events-table button[type="submit"] { margin-top: 0; padding: 5px 8px; font-size: 0.8rem; }

.wager-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.wager-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.wager-detail { color: var(--text); font-size: 0.95rem; }
.event-meta { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-size: 0.78rem; margin-bottom: 6px; }
.event-teams { font-size: 0.92rem; font-weight: 600; }
.commence-time { color: var(--muted); font-size: 0.75rem; }
.status-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.status-open { background: var(--status-open-bg); color: var(--status-open-text); }
.status-won  { background: var(--status-won-bg); color: var(--success); }
.status-lost { background: var(--status-lost-bg); color: var(--error); }
.status-void { background: var(--status-void-bg); color: var(--muted); }

table.leaderboard { width: 100%; border-collapse: collapse; margin-top: 16px; }
table.leaderboard th, table.leaderboard td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
table.leaderboard th { color: var(--muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.record-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.record-card-unachieved { opacity: 0.6; }
.record-title {
  margin: 0 0 8px 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.record-holder { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.record-detail { margin: 4px 0 0 0; color: var(--text); font-size: 0.9rem; }
.record-empty { margin: 0; color: var(--muted); font-size: 0.88rem; font-style: italic; }

.admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  margin-bottom: 8px;
  gap: 12px;
}
.admin-row-check { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
.admin-row-check input[type="checkbox"] { flex-shrink: 0; }
.edit-link { color: var(--accent); font-size: 0.85rem; white-space: nowrap; margin-left: 12px; }
.button-row { display: flex; gap: 10px; margin-top: 16px; }
.button-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.button-secondary:hover { background: var(--hover-bg); color: var(--text); }
.select-all-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
  cursor: pointer;
}
.admin-row-result { flex-direction: column; align-items: flex-start; gap: 8px; }
.result-picks { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.9rem; }
.result-picks label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.bulk-upload-form { margin-top: 16px; }
.bulk-upload-form label { display: flex; flex-direction: column; gap: 6px; }