/* ============================================================================================
   Ohms Premier League console — design tokens & component classes.
   Adapted from the Ohms.WorldCup WC26 console (gold-standard void theme). Same Ohms brand system:
   void surfaces, brand-green + gold accents, cyan reserved for the Ω mark. Class prefix kept as
   `wc-` so the shared components (Card/PageHeader/LoadState/Spinner) port verbatim.
   Trading-terminal density — do NOT air out the spacing.
   ============================================================================================ */

:root {
  --bg-page:#05080A; --bg-rail:#0A0F13; --bg-card:#0E1411; --bg-inset:#0B100D;
  --bg-chip:#131B16; --bg-track:#0A0F13;
  --border:#1E2A23; --border-hairline:#131B16;
  --text-primary:#E9F2EC; --text-secondary:#9DB3A6; --text-muted:#728A7C;
  --text-faint:#5E7868; --text-faint2:#46584D;
  --green:#43D17C; --green-mid:#2E9E5B; --green-deep:#1E5C3B; --green-idle:#243129;
  --gold:#E0B64E; --gold-dim:#A8842F; --gold-text:#C9B677;
  --red:#E5564D; --on-green:#06130B;
  --cyan:#00E5FF; --blue:#4FA3FF;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --michroma:'Michroma',sans-serif;
  --ui:'Barlow',system-ui,sans-serif;
  --sc:'Barlow Semi Condensed',system-ui,sans-serif;
}

html, body { margin:0; padding:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--ui); height:100%; }
* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
h1, h2, h3, h4, h5 { font-family:var(--ui); }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#1E2A23; border-radius:5px; border:2px solid #070B09; }
::-webkit-scrollbar-track { background:transparent; }
::selection { background:rgba(67,209,124,0.25); }
@keyframes wcPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes wcEq { 0%,100% { transform:scaleY(0.2); } 50% { transform:scaleY(1); } }
input[type="range"] { accent-color:#43D17C; }

/* ---- Loading / error state ---------------------------------------------------------------- */
.wc-loadstate { display:flex; align-items:center; gap:10px; padding:8px 2px; }
.wc-loadstate-error { flex-direction:column; align-items:flex-start; gap:5px; }
/* Equaliser-bar loader — brand-green bars bouncing out of phase (the "live meter" look). */
.wc-eq { display:inline-flex; align-items:flex-end; gap:3px; height:18px; flex:none; }
.wc-eq i { display:block; width:3px; height:100%; border-radius:1.5px; transform-origin:center bottom;
  background:linear-gradient(180deg,#4FDB87,#2E9E5B); box-shadow:0 0 5px rgba(67,209,124,0.25);
  animation:wcEq 1.1s ease-in-out infinite; }
.wc-eq i:nth-child(1) { animation-delay:-0.92s; animation-duration:1.05s; }
.wc-eq i:nth-child(2) { animation-delay:-0.48s; animation-duration:1.32s; }
.wc-eq i:nth-child(3) { animation-delay:-0.21s; animation-duration:0.88s; }
.wc-eq i:nth-child(4) { animation-delay:-0.69s; animation-duration:1.48s; }
.wc-eq i:nth-child(5) { animation-delay:-0.34s; animation-duration:1.12s; }
.wc-eq i:nth-child(6) { animation-delay:-0.61s; animation-duration:0.96s; }
.wc-eq i:nth-child(7) { animation-delay:-0.12s; animation-duration:1.24s; }
@media (prefers-reduced-motion:reduce) {
  .wc-eq i { animation:none; transform:scaleY(0.5); }
  .wc-eq i:nth-child(even) { transform:scaleY(0.85); }
}
.wc-retry { margin-top:5px; font-family:var(--mono); font-size:10px; letter-spacing:0.5px;
  color:var(--green); background:rgba(67,209,124,0.08); border:1px solid var(--green-deep);
  border-radius:5px; padding:5px 13px; cursor:pointer; }
.wc-retry:hover { background:rgba(67,209,124,0.14); }

/* ---- App shell ---------------------------------------------------------------------------- */
.wc-app { display:flex; width:100%; height:100vh; overflow:hidden; }
.wc-rail { width:210px; min-width:210px; display:flex; flex-direction:column;
  border-right:1px solid var(--border); background:var(--bg-rail); }
.wc-rail-head { padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.wc-rail-lockup { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.wc-rail-mark { width:22px; height:22px; color:var(--cyan); flex:none; }
.wc-rail-divider { width:1px; height:16px; background:var(--cyan); opacity:0.35; flex:none; }
.wc-rail-ohms { font-family:var(--michroma); font-size:13px; letter-spacing:0.06em; color:var(--text-primary); line-height:1; }
.wc-brand { font-size:22px; font-weight:800; letter-spacing:0.5px; line-height:1.2; }
.wc-brand-sub { font-size:10.5px; color:var(--text-muted); letter-spacing:0.4px; }
.wc-nav { display:flex; flex-direction:column; gap:2px; padding:10px 8px; }
.wc-nav a { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:6px; }
.wc-nav a:hover { background:rgba(67,209,124,0.06); }
.wc-nav a.active { background:rgba(67,209,124,0.10); }
.wc-nav .dot { width:6px; height:6px; border-radius:2px; background:var(--green-idle); }
.wc-nav a.active .dot { background:var(--green); }
.wc-nav .label { font-size:13px; font-weight:600; color:var(--text-secondary); flex:1; }
.wc-nav a.active .label { color:var(--text-primary); }
.wc-nav .route { font-family:var(--mono); font-size:9px; color:var(--text-faint); }
.wc-rail-spacer { flex:1; }
.wc-status { margin:10px; padding:10px 12px; border:1px solid var(--border); border-radius:7px;
  background:var(--bg-card); }
.wc-status-row { display:flex; align-items:center; gap:7px; }
.wc-livedot { width:7px; height:7px; border-radius:50%; background:var(--green);
  animation:wcPulse 2.2s infinite; }
.wc-rail-foot { padding:0 16px 14px; font-family:var(--mono); font-size:9px; color:var(--text-faint);
  letter-spacing:0.5px; }

.wc-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.wc-topbar { height:52px; min-height:52px; display:flex; align-items:center; gap:12px;
  padding:0 20px; border-bottom:1px solid var(--border); background:var(--bg-rail); }
.wc-topbar .title { font-size:16px; font-weight:700; letter-spacing:0.2px; }
.wc-content { flex:1; overflow:auto; padding:14px 20px 20px; }

/* ---- Cards & sections --------------------------------------------------------------------- */
.wc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:13px 15px; }
.wc-card-prose { padding:18px 20px; }
.wc-card-prose p { color:var(--text-secondary); line-height:1.65; font-size:13.5px; margin:0 0 12px; }
.wc-card-prose p:last-child { margin-bottom:0; }
.wc-card-gold { border-color:rgba(224,182,78,0.3); }
.wc-inset { background:var(--bg-inset); border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; }
.wc-sech { font-family:var(--sc); font-size:11px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--text-secondary); }
.wc-sech.gold { color:var(--gold); }
.wc-sech-note { font-family:var(--mono); font-size:9.5px; color:var(--text-muted); }
.wc-sech-row { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }

/* ---- Chips, mono, bars -------------------------------------------------------------------- */
.wc-mono { font-family:var(--mono); }
.wc-code { font-family:var(--mono); font-size:10.5px; font-weight:600; text-align:center;
  background:var(--bg-chip); border:1px solid var(--border); border-radius:3px; padding:1.5px 6px; }
.wc-chip { font-family:var(--mono); font-size:10.5px; padding:5px 13px; border-radius:5px;
  cursor:pointer; border:1px solid var(--border); color:var(--text-secondary); background:var(--bg-card); }
.wc-chip.active { background:rgba(67,209,124,0.12); border-color:rgba(67,209,124,0.4); color:var(--green); }
.wc-typechip { font-family:var(--mono); font-size:8.5px; letter-spacing:0.5px; color:var(--text-secondary);
  border:1px solid var(--border); border-radius:3px; padding:1.5px 6px; }
.wc-track { background:var(--bg-track); border-radius:3px; overflow:hidden; }
.wc-track .fill { height:100%; border-radius:3px; }

.wc-teamref { display:inline-flex; align-items:center; gap:5px; color:inherit; text-decoration:none; cursor:pointer; }
.wc-teamref:hover { color:var(--green); }
.wc-teamref:hover .wc-code { color:var(--green); border-color:rgba(67,209,124,0.4); }
.wc-bar-green { background:linear-gradient(90deg,#1E5C3B,#43D17C); }
.wc-bar-gold { background:linear-gradient(90deg,#A8842F,#E0B64E); }
.wc-bar-red { background:linear-gradient(90deg,#7A2A26,#E5564D); }
.wc-bar-blue { background:linear-gradient(90deg,#1E3C5C,#4FA3FF); }

/* ---- Buttons ------------------------------------------------------------------------------ */
.wc-btn-green { font-family:var(--mono); font-weight:600; color:var(--on-green);
  background:linear-gradient(180deg,#4FDB87,#2E9E5B); border:none; border-radius:5px; cursor:pointer;
  padding:6px 14px; font-size:10.5px; }
.wc-btn-green:hover { filter:brightness(1.1); }
.wc-btn-ghost { font-family:var(--mono); font-weight:600; color:var(--text-secondary);
  border:1px solid var(--border); background:transparent; border-radius:4px; cursor:pointer;
  padding:6px 12px; font-size:10.5px; }
.wc-btn-ghost:hover { color:var(--green); border-color:var(--green-deep); }
.wc-btn-green:disabled { filter:grayscale(0.6) brightness(0.7); cursor:not-allowed; }
.wc-btn-ghost:disabled { opacity:0.35; cursor:not-allowed; }
.wc-input { background:var(--bg-track); border:1px solid var(--border); border-radius:5px;
  color:var(--text-primary); font-family:var(--mono); font-size:10.5px; padding:7px 10px; outline:none; }

/* tone helpers */
.t-green { color:var(--green); } .t-gold { color:var(--gold); } .t-red { color:var(--red); }
.t-muted { color:var(--text-muted); } .t-faint { color:var(--text-faint); } .t-sec { color:var(--text-secondary); }
.t-cyan { color:var(--cyan); } .t-blue { color:var(--blue); }

/* ============================================================================================
   Premier League page helpers — restyled onto the void palette (originally TRACK-014 Bootstrap).
   ============================================================================================ */

/* Zone rails: a left-edge colour bar on a standings row marking its European / relegation zone. */
.wc-zone-dot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px;
  vertical-align:middle; background:var(--green-idle); }
.zone-title { background:var(--gold); }
.zone-cl    { background:var(--green); }
.zone-el    { background:var(--blue); }
.zone-conf  { background:#5FB0D9; }
.zone-rel   { background:var(--red); }
.zone-none  { background:var(--green-idle); }

/* Probability bars: void track + branded fill, mono % label inset. */
.wc-prob { position:relative; background:var(--bg-track); border:1px solid var(--border);
  border-radius:3px; height:16px; overflow:hidden; }
.wc-prob .fill { height:100%; border-radius:0; }
.wc-prob .lbl { position:absolute; top:0; left:6px; font-family:var(--mono); font-size:9.5px;
  line-height:16px; color:var(--text-primary); text-shadow:0 0 3px rgba(0,0,0,0.6); }

/* 1X2 split bar for fixtures. */
.wc-split { display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--bg-track); }
.ps-home { background:var(--green); } .ps-draw { background:var(--green-idle); } .ps-away { background:var(--blue); }

/* Fixture card hover lift. */
.wc-fixture { transition:border-color .12s, background .12s; }
.wc-fixture:hover { border-color:var(--green-deep); background:var(--bg-inset); }

/* Scoreline heat grid. */
.wc-scoregrid { border-collapse:collapse; font-family:var(--mono); }
.wc-scoregrid th { font-size:9.5px; color:var(--text-muted); text-align:center; padding:2px 5px; font-weight:600; }
.wc-scoregrid td { width:26px; height:26px; border:1px solid var(--bg-page); }

/* Stat tiles. */
.wc-stat { background:var(--bg-inset); border:1px solid var(--border); border-radius:7px;
  padding:12px 14px; text-align:center; }
.wc-stat .val { font-family:var(--mono); font-size:1.5rem; font-weight:600; color:var(--text-primary); }
.wc-stat .lbl { font-family:var(--sc); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-muted); margin-top:3px; }

/* Form pills. */
.wc-formpill { display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center;
  border-radius:5px; color:var(--on-green); font-family:var(--mono); font-weight:700; font-size:11px; }
.form-W { background:var(--green); color:var(--on-green); }
.form-D { background:var(--green-idle); color:var(--text-secondary); }
.form-L { background:var(--red); color:#fff; }

/* Team crest swatch. */
.wc-crest { width:40px; height:40px; border-radius:8px; border:1px solid var(--border); flex:none; }

/* Tables onto the void. */
.wc-table { width:100%; border-collapse:collapse; }
.wc-table th { font-family:var(--sc); font-size:10px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-muted); text-align:left; padding:6px 8px;
  border-bottom:1px solid var(--border); }
.wc-table td { padding:7px 8px; border-bottom:1px solid var(--border-hairline); font-size:12.5px; }
.wc-table tbody tr:hover { background:var(--bg-inset); }
.wc-table .num { text-align:center; font-family:var(--mono); }
.wc-table .r { text-align:right; }

/* tier badge (pundit). */
.wc-tier { font-family:var(--mono); font-size:9px; letter-spacing:0.5px; text-transform:uppercase;
  border-radius:4px; padding:2px 8px; border:1px solid var(--border); }
.tier-conviction { color:var(--gold); border-color:rgba(224,182,78,0.4); background:rgba(224,182,78,0.08); }
.tier-value      { color:var(--green); border-color:rgba(67,209,124,0.4); background:rgba(67,209,124,0.08); }
.tier-lean       { color:var(--text-secondary); }

/* attribution chips (pundit reasons). */
.wc-attr { font-family:var(--mono); font-size:9px; color:var(--text-muted); border:1px solid var(--border);
  border-radius:3px; padding:1.5px 6px; background:var(--bg-inset); }

/* verdict banner. */
.wc-verdict { border-radius:7px; padding:11px 14px; font-size:13px; line-height:1.5; }
.wc-verdict.good { border:1px solid rgba(67,209,124,0.4); background:rgba(67,209,124,0.07); color:var(--text-primary); }
.wc-verdict.warn { border:1px solid rgba(224,182,78,0.4); background:rgba(224,182,78,0.07); color:var(--text-primary); }

/* error ui (framework) — on-brand SYSTEM HALTED banner. */
#blazor-error-ui { background:#13160E; color:var(--gold); bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,0.4);
  display:none; left:0; padding:0.6rem 1.25rem 0.7rem; position:fixed; width:100%; z-index:1000;
  font-family:var(--mono); font-size:12px; letter-spacing:0.4px; }
#blazor-error-ui .reload { color:var(--green); text-decoration:none; margin-left:8px; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:0.75rem; top:0.5rem; }
.blazor-error-boundary { background:#13160E; padding:1rem; color:var(--gold); font-family:var(--mono);
  border-top:1px solid var(--gold-dim); }
.blazor-error-boundary::after { content:"SYSTEM HALTED — Runtime fault in this panel."; }

/* ---- Reconnect modal — re-skinned onto the void --------------------------------------------- */
#components-reconnect-modal { background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border); border-radius:9px; font-family:var(--mono); font-size:12px;
  padding:22px 26px; box-shadow:0 10px 40px rgba(0,0,0,0.6); }
#components-reconnect-modal::backdrop { background:rgba(4,7,5,0.7); }
#components-reconnect-button, #components-resume-button { font-family:var(--mono); color:var(--on-green);
  background:linear-gradient(180deg,#4FDB87,#2E9E5B); border:none; border-radius:5px; padding:6px 14px;
  cursor:pointer; margin-top:10px; }

/* ============================================================================================
   RESPONSIVE — tablet (≤960px) collapses the rail into a drawer driven by the Blazor _navOpen
   flag (same pattern as MainLayout). Phone (≤480px) single-column.
   ============================================================================================ */
.wc-hamburger { display:none; }
.wc-nav-overlay { display:none; }
.wc-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.wc-content svg { max-width:100%; }

@media (min-width:961px) {
  .wc-app { min-width:1180px; }
}

@media (max-width:960px) {
  .wc-app { min-width:0; }
  .wc-rail {
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:264px; min-width:264px; max-width:84vw;
    transform:translateX(-100%); transition:transform 0.22s ease;
    box-shadow:2px 0 18px rgba(0,0,0,0.5);
  }
  .wc-app.wc-nav-open .wc-rail { transform:translateX(0); }
  .wc-main { width:100%; min-width:0; }
  .wc-nav-overlay {
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(4,7,5,0.62);
    opacity:0; visibility:hidden; transition:opacity 0.22s ease, visibility 0.22s ease;
  }
  .wc-app.wc-nav-open .wc-nav-overlay { opacity:1; visibility:visible; }
  .wc-hamburger {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:-8px; margin-right:2px;
    flex:none; padding:0; cursor:pointer;
    background:transparent; border:1px solid var(--border); border-radius:6px;
    color:var(--text-secondary);
  }
  .wc-hamburger:hover { color:var(--text-primary); border-color:var(--green-deep); }
  .wc-hamburger:focus-visible { outline:2px solid var(--green); outline-offset:1px; }
  .wc-hamburger svg { width:20px; height:20px; display:block; }
  .wc-app.wc-nav-open .wc-content { overflow:hidden; }
}

@media (max-width:480px) {
  .wc-topbar { padding:0 12px; gap:8px; }
  .wc-topbar .title { font-size:15px; }
  .wc-content { padding:12px 12px 16px; }
  .wc-card { padding:12px 13px; }
  .wc-content div[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  .wc-nav a { padding:11px 12px; min-height:44px; }
}

@media (prefers-reduced-motion:reduce) {
  .wc-rail, .wc-nav-overlay { transition:none; }
}