/* TERRACE MANAGER — spectator site. Teletext-inspired: dense, mono, snappy. */

:root {
  --bg: #0A0C0A;
  --panel: #101310;
  --panel-2: #151915;
  --line: #232823;
  --text: #D9E0D2;
  --muted: #6E766B;
  --amber: #FFB000;
  --green: #38E54D;
  --red: #FF4D3A;
  --cyan: #4DD9FF;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }
body {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 4px),
    var(--bg);
  min-height: 100vh;
}

.frame { max-width: 880px; margin: 0 auto; padding: 16px 12px 40px; }

/* masthead */
.masthead {
  border: 2px solid var(--amber);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  background: var(--panel);
}
.mast-title { font-weight: 700; letter-spacing: .08em; color: var(--amber); }
.mast-logo { color: var(--green); }
.mast-mode {
  margin-left: 10px; font-size: 11px; color: var(--bg);
  background: var(--amber); padding: 1px 6px; font-weight: 700;
}
.mast-status { font-size: 12px; color: var(--muted); }
.mast-status b { color: var(--green); font-weight: 400; }

/* tabs */
.tabs {
  display: flex; gap: 2px; margin-top: 8px; flex-wrap: wrap;
}
.tabs a {
  color: var(--muted); text-decoration: none; padding: 6px 14px;
  border: 1px solid var(--line); background: var(--panel);
  font-size: 12px; letter-spacing: .06em;
}
.tabs a:hover { color: var(--text); border-color: var(--muted); }
.tabs a.active { color: var(--bg); background: var(--amber); border-color: var(--amber); font-weight: 700; }

.view { margin-top: 10px; }
.loading { color: var(--muted); padding: 40px 0; text-align: center; letter-spacing: .2em; }

/* generic panel + heading */
.panel { border: 1px solid var(--line); background: var(--panel); margin-bottom: 12px; }
.panel-head {
  padding: 6px 12px; border-bottom: 1px solid var(--line);
  color: var(--amber); font-size: 12px; letter-spacing: .1em;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.panel-head .sub { color: var(--muted); letter-spacing: 0; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 4px 8px; text-align: right; white-space: nowrap; }
th { color: var(--muted); font-weight: 400; font-size: 11px; border-bottom: 1px solid var(--line); }
td:first-child, th:first-child { text-align: right; width: 2.2em; color: var(--muted); }
.cell-name { text-align: left !important; width: auto !important; }
tbody tr { border-bottom: 1px solid rgba(35,40,35,.5); }
tbody tr:hover { background: var(--panel-2); }
tr.clickable { cursor: pointer; }
td.pts { color: var(--amber); font-weight: 700; }
tr.zone-up td:first-child { color: var(--green); font-weight: 700; }
tr.zone-down td:first-child { color: var(--red); font-weight: 700; }

.form { letter-spacing: 2px; font-size: 12px; }
.form .V { color: var(--green); }
.form .E { color: var(--muted); }
.form .D { color: var(--red); }

/* division tabs */
.divtabs { display: flex; gap: 2px; margin-bottom: 8px; }
.divtabs a {
  color: var(--muted); text-decoration: none; padding: 4px 12px;
  border: 1px solid var(--line); font-size: 12px;
}
.divtabs a.active { color: var(--bg); background: var(--green); border-color: var(--green); font-weight: 700; }
.divtabs a:hover:not(.active) { color: var(--text); }

/* fixtures */
.fixture-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  padding: 5px 12px; border-bottom: 1px solid rgba(35,40,35,.5);
  cursor: pointer; align-items: baseline;
}
.fixture-row:hover { background: var(--panel-2); }
.fixture-row .h { text-align: right; }
.fixture-row .a { text-align: left; }
.fixture-row .score {
  color: var(--amber); font-weight: 700; min-width: 5ch; text-align: center;
  background: var(--panel-2); padding: 0 6px;
}
.fixture-row .score.pending { color: var(--muted); font-weight: 400; }

.roundnav { display: flex; align-items: center; gap: 10px; }
.roundnav a { color: var(--cyan); text-decoration: none; padding: 0 6px; }
.roundnav a.disabled { color: var(--line); pointer-events: none; }

/* match page */
.scoreline {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px;
  padding: 18px 12px; align-items: center;
}
.scoreline .team { font-size: 15px; }
.scoreline .team.h { text-align: right; }
.scoreline .big {
  font-size: 30px; font-weight: 700; color: var(--amber);
  background: var(--panel-2); padding: 2px 14px; border: 1px solid var(--line);
}
.scoreline .team a { color: var(--text); text-decoration: none; }
.scoreline .team a:hover { color: var(--cyan); }
.xgline { text-align: center; color: var(--muted); font-size: 12px; padding-bottom: 10px; }

.statgrid { padding: 6px 12px 10px; }
.statrow { display: grid; grid-template-columns: 4ch 1fr 4ch; gap: 10px; font-size: 12px; padding: 2px 0; }
.statrow .label { text-align: center; color: var(--muted); }
.statrow .bar { display: flex; height: 6px; margin-top: 5px; background: var(--panel-2); }
.statrow .bar i { background: var(--amber); }
.statrow .bar b { background: var(--cyan); }

.timeline { padding: 4px 0 8px; }
.tl-row { display: grid; grid-template-columns: 5ch 6ch 1fr; gap: 8px; padding: 3px 12px; font-size: 13px; }
.tl-row:hover { background: var(--panel-2); }
.tl-min { color: var(--muted); text-align: right; }
.tl-tag { font-weight: 700; font-size: 11px; padding-top: 1px; }
.tl-GOAL { color: var(--green); }
.tl-YELLOW_CARD { color: var(--amber); }
.tl-RED_CARD { color: var(--red); }
.tl-INJURY { color: var(--red); }
.tl-SUBSTITUTION, .tl-SHOT_SAVED { color: var(--muted); }
.tl-PENALTY_MISSED { color: var(--red); }
.tl-side-away { opacity: .85; }

/* club page */
.clubhead { padding: 12px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.club-swatch { width: 26px; height: 26px; border: 1px solid var(--line); flex: none; }
.clubhead h2 { font-size: 17px; letter-spacing: .04em; }
.clubhead .meta { color: var(--muted); font-size: 12px; width: 100%; }
.clubhead .meta b { color: var(--text); font-weight: 400; }

.wci-spark { display: block; width: 100%; height: 60px; }

.attr { color: var(--muted); }
.attr b { color: var(--text); font-weight: 400; }
.pos-GK { color: var(--cyan); }
.pos-DEF { color: var(--green); }
.pos-MID { color: var(--amber); }
.pos-ATT { color: var(--red); }

.status-out { color: var(--red); font-size: 11px; }

/* two-column helper */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }

.footer {
  margin-top: 26px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
}

a.plain { color: var(--cyan); text-decoration: none; }
a.plain:hover { text-decoration: underline; }

.note { color: var(--muted); font-size: 12px; padding: 10px 12px; }

/* manager mode */
.tab-manager { border-color: var(--green) !important; }
.tab-manager.active { background: var(--green) !important; border-color: var(--green) !important; }

.mgr-form { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mgr-form label { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.mgr-form input[type="text"], .mgr-form select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; padding: 6px 8px; width: 100%;
}
.mgr-form select:focus, .mgr-form input:focus { outline: 1px solid var(--amber); }

.btn {
  display: inline-block; background: var(--amber); color: var(--bg);
  border: none; font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; padding: 8px 16px; cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid var(--red); }
.btn:disabled { opacity: .5; cursor: default; }

.tactic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px; }
.tactic-grid label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; letter-spacing: .08em; }
.tactic-grid select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; padding: 5px 6px; width: 100%;
}

.lineup-grid { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.lineup-slot { display: grid; grid-template-columns: 5ch 1fr; gap: 10px; align-items: center; }
.lineup-slot .slot-pos { font-weight: 700; text-align: right; }
.lineup-slot select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; padding: 4px 6px; width: 100%;
}
.lineup-slot select.dup { outline: 1px solid var(--red); }

.panel-actions { padding: 10px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); }
.save-note { font-size: 12px; color: var(--green); }
.save-note.err { color: var(--red); }

.token-box {
  margin: 12px; padding: 12px; border: 2px dashed var(--amber);
  font-size: 15px; letter-spacing: .1em; color: var(--amber);
  word-break: break-all; text-align: center; background: var(--panel-2);
}

.claim-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(35,40,35,.5); align-items: center; }
.claim-row .info { font-size: 12px; color: var(--muted); }
.claim-row .info b { color: var(--text); font-weight: 400; }

.lineups-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 6px 0 10px; }
.lineups-cols .lu { padding: 0 12px; }
.lineups-cols .lu-row { display: grid; grid-template-columns: 4ch 1fr; gap: 8px; font-size: 12px; padding: 1px 0; }
.lineups-cols .lu-row .p { color: var(--muted); text-align: right; }