/* ============================================================
   EPL Predictions — visual language

   Grounded in UK teletext football-results pages (Ceefax/Oracle,
   BBC Ceefax page 302 and its ilk): a monospace character grid,
   paged navigation ("P101"), and a small set of saturated colours.
   No decorative font pairing — teletext was one bitmap font, full
   stop, so the whole interface stays monospace; the personality
   comes from colour and grid discipline instead.

   Two themes: light (default) and dark (opt-in, toggled via the
   header button — see web/static/js/theme-init.js and app.js).
   Real Ceefax was always dark-on-black; the light theme here reads
   as more of a "printed teletext page" — a warm paper background
   rather than stark white, with the same accent hues pulled darker
   for contrast instead of neon.

   Every accent colour exists as two variables:
     --cyan / --yellow / --green / --red / --magenta
       Theme-adaptive. Used for body text, links, borders, and small
       accents that sit directly against the page background and
       therefore need real contrast tuning per theme.
     --cyan-fill / --yellow-fill / --green-fill / --red-fill / --magenta-fill
       Fixed — identical in both themes. Used only for small opaque
       chips (badges, buttons) that already pair with a hardcoded
       dark text colour; as a solid fill behind fixed dark text, the
       vivid neon tone works regardless of what theme surrounds it,
       so it doesn't need to change.
   ============================================================ */

:root {
  --bg:        #f6f5f0;
  --bg-panel:  #ffffff;
  --bg-raised: #ece9e1;
  --border:    #d6d2c4;

  --fg:        #1c1b18;
  --fg-dim:    #66645c;

  --cyan:      #0d7986;
  --yellow:    #8a6400;
  --green:     #1a7a3c;
  --red:       #c62828;
  --magenta:   #a3216b;

  --cyan-fill:    #4deeea;
  --yellow-fill:  #ffd23d;
  --green-fill:   #39ff6a;
  --red-fill:     #ff5a5a;
  --magenta-fill: #ff6ec7;

  --scanline: rgba(0, 0, 0, 0.025);

  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Consolas,
               "Liberation Mono", Menlo, monospace;

  --grid-max: 960px;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:        #0a0a0c;
  --bg-panel:  #101014;
  --bg-raised: #16161b;
  --border:    #2a2d31;

  --fg:        #e8e8e6;
  --fg-dim:    #8a8d92;

  --cyan:      #4deeea;
  --yellow:    #ffd23d;
  --green:     #39ff6a;
  --red:       #ff5a5a;
  --magenta:   #ff6ec7;

  --scanline: rgba(255, 255, 255, 0.012);

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  /* faint CRT scanline texture — static, not animated */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--scanline) 0px,
    var(--scanline) 1px,
    transparent 1px,
    transparent 3px
  );
}

a { color: var(--cyan); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.console {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 16px 64px;
}

/* ---------- Header: page number + nav, teletext-index style ---------- */

.tv-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 12px;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}

.tv-header .brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.page-number {
  background: var(--yellow-fill);
  color: #111;
  font-weight: 700;
  padding: 1px 7px;
  letter-spacing: 0.5px;
}

.brand-title {
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tv-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 13px;
}

.tv-nav a, .tv-nav span {
  padding: 3px 8px;
  border: 1px solid var(--border);
  color: var(--fg-dim);
}

.tv-nav a:hover, .tv-nav a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
  text-decoration: none;
}

.theme-toggle {
  font-family: inherit;
  font-size: 13px;
  padding: 3px 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  cursor: pointer;
}
.theme-toggle:hover, .theme-toggle:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.quicklinks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.quicklinks a {
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 13px;
}
.quicklinks a:hover, .quicklinks a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.tv-nav .current {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(77, 238, 234, 0.08);
}

.tv-nav .you {
  color: var(--fg);
}

/* ---------- Panels ---------- */

.panel {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 16px;
  margin-top: 20px;
}

.panel-title {
  color: var(--cyan);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title .idx {
  color: var(--fg-dim);
  font-weight: 400;
}

.panel + .panel { margin-top: 20px; }

/* ---------- Fixture rows ---------- */

.fixture-list { display: flex; flex-direction: column; gap: 1px; }

.fixture-row {
  display: grid;
  grid-template-columns: 44px 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  background: var(--bg-raised);
  border-left: 3px solid var(--border);
}

/* Used on the admin fixtures list, where matchweek is shown once via
   .mw-divider rather than repeated on every row — one fewer column
   than the regular 5-column fixture-row. */
.fixture-row.admin-row {
  grid-template-columns: 1fr auto 1fr auto;
}

.mw-divider {
  grid-column: 1 / -1;
  margin: 18px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mw-divider:first-child { margin-top: 0; }

.fixture-manage {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.fixture-manage summary {
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 12px;
  list-style: none;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.fixture-manage summary::-webkit-details-marker { display: none; }
.fixture-manage summary::before {
  content: "▸ ";
}
.fixture-manage[open] summary::before {
  content: "▾ ";
}
.fixture-manage summary:hover,
.fixture-manage summary:focus-visible {
  color: var(--cyan);
}
.fixture-manage-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
}
.fixture-manage-body + .fixture-manage-body {
  border-top: 1px dashed var(--border);
  margin-top: 8px;
  padding-top: 8px;
}

.fixture-row .mw {
  color: var(--fg-dim);
  font-size: 12px;
}

.fixture-row .team {
  text-align: left;
}
.fixture-row .team.away { text-align: right; }

.fixture-row .team .full { display: inline; }
.fixture-row .team .short { display: none; }

.fixture-row .kickoff {
  grid-column: 1 / -1;
  color: var(--fg-dim);
  font-size: 12px;
  margin-top: 2px;
}

.score-box {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-weight: 700;
}

.score-box input[type="text"] {
  width: 2.6em;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 16px;
  text-align: center;
  padding: 4px 2px;
}

.score-box input[type="text"]:focus-visible {
  border-color: var(--cyan);
}

.score-actual {
  font-size: 18px;
  color: var(--fg);
  min-width: 3.5em;
  text-align: center;
}

.your-guess {
  font-size: 12px;
  color: var(--fg-dim);
  text-align: center;
  margin-top: 4px;
  grid-column: 1 / -1;
}

.pts-badge {
  display: inline-block;
  padding: 1px 6px;
  font-weight: 700;
  font-size: 12px;
  margin-left: 6px;
}
.pts-badge.pts-5 { background: var(--green-fill); color: #06210f; }
.pts-badge.pts-3 { background: var(--yellow-fill); color: #241b00; }
.pts-badge.pts-0 { background: var(--bg); color: var(--fg-dim); border: 1px solid var(--border); }
/* Banker (doubled) point values: 10 = exact score, 6 = correct result.
   Visually distinct from their non-banker counterparts (pts-5/pts-3)
   so a doubled score is recognisable at a glance, not just from the
   "(banker)" text suffix. */
.pts-badge.pts-10 { background: var(--magenta-fill); color: #2a0a1c; }
.pts-badge.pts-6  { background: var(--magenta-fill); color: #2a0a1c; opacity: 0.85; }

.locked-tag {
  font-size: 11px;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 0 5px;
}

.postponed-tag {
  font-size: 11px;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  padding: 0 5px;
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.session-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.you-badge {
  font-size: 10px;
  color: var(--green);
  border: 1px solid var(--green);
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn {
  font-family: var(--font-mono);
  background: var(--cyan-fill);
  color: #04211f;
  border: none;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.btn:hover, .btn:focus-visible { background: #7ff3ef; }
.btn:disabled { background: var(--border); color: var(--fg-dim); cursor: not-allowed; }

/* ---------- Leaderboard ---------- */

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.leaderboard-table th {
  text-align: left;
  color: var(--fg-dim);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.leaderboard-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}

.leaderboard-table tr.you { background: rgba(77, 238, 234, 0.07); }
.leaderboard-table tr.you td:first-child { border-left: 3px solid var(--cyan); }

.rank-cell { color: var(--yellow); font-weight: 700; width: 2.5em; }
.rank-cell.rank-1 { color: var(--green); }

.points-cell { color: var(--green); font-weight: 700; text-align: right; }

/* Used only on the last column's header (Points/Pts) — plain inline
   text-align:right on the <th> itself works correctly for every other
   right-aligned header in these tables, but empirically did not for
   this one specific column, consistently, across browsers. The most
   likely differentiator is that this is the table's rightmost column,
   adjacent to the outer edge under border-collapse — not a general
   <th> problem, since the other headers were never affected. Wrapping
   just this column's header text in a block-level span sidesteps
   whatever that edge-specific interaction is. Do not apply this more
   broadly without testing — doing so previously misaligned the
   columns that were already working correctly. */
.th-right {
  display: block;
  text-align: right;
}

/* ---------- Forms ---------- */

.form-field { margin-bottom: 14px; }
.form-field label {
  display: block;
  font-size: 12px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.form-field input[type="email"],
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="datetime-local"],
.form-field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 9px 10px;
}
.form-field input:focus-visible, .form-field select:focus-visible {
  border-color: var(--cyan);
}

.form-row { display: flex; gap: 12px; }
.form-row .form-field { flex: 1; }

.empty-state {
  color: var(--fg-dim);
  font-size: 13px;
  padding: 8px 0;
}

.flash {
  border-left: 3px solid var(--red);
  background: rgba(255, 90, 90, 0.08);
  color: var(--fg);
  padding: 10px 12px;
  margin-top: 16px;
  font-size: 13px;
}

.stat-strip {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.stat-strip .stat {
  border: 1px solid var(--border);
  padding: 10px 16px;
  min-width: 120px;
}
.stat-strip .stat .label {
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.stat-strip .stat .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--yellow);
}

footer.tv-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Responsive ---------- */

@media (max-width: 620px) {
  .fixture-row {
    grid-template-columns: 32px 1fr auto 1fr;
  }
  .fixture-row .team .full { display: none; }
  .fixture-row .team .short { display: inline; }
  .form-row { flex-direction: column; }
  .stat-strip { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}