/* ============================================================================================
   Ohms Cricket console — design tokens & component classes.
   Adapted verbatim from the Ohms.WorldCup WC26 console (the gold-standard void theme). Same
   void/green/gold/cyan-Ω brand system; only the brand title differs (Cricket, not WC26).
   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;
  --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, h6 { font-weight:700; letter-spacing:0.2px; margin:0 0 8px; }

::-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-family:var(--michroma); font-size:18px; font-weight:400; letter-spacing:0.5px; line-height:1.2; }
.wc-brand-sub { font-size:10.5px; color:var(--text-muted); letter-spacing:0.4px; margin-top:3px; }
.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 + .wc-card { margin-top:14px; }
.wc-card-prose { padding:18px 20px; line-height:1.6; }
.wc-card-prose p { margin:0 0 12px; color:var(--text-secondary); }
.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; display:inline-block; }
.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-cyan { background:linear-gradient(90deg,#0B6E7A,#00E5FF); }

/* ---- 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:7px 14px; font-size:11px; }
.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; text-decoration:none; display:inline-block; }
.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; }

.wc-seg { display:inline-flex; gap:4px; border:1px solid var(--border); border-radius:6px; padding:3px;
  background:var(--bg-card); }
.wc-seg > div { font-family:var(--mono); font-size:10.5px; padding:4px 11px; border-radius:4px; cursor:pointer;
  color:var(--text-muted); }
.wc-seg > div.active { background:rgba(67,209,124,0.12); color:var(--green); }

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

/* ---- Tables (void theme) ------------------------------------------------------------------ */
.wc-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.wc-table th { font-family:var(--sc); font-size:9.5px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-muted); text-align:left; padding:7px 9px;
  border-bottom:1px solid var(--border); }
.wc-table th.num, .wc-table td.num { text-align:right; }
.wc-table th.ctr, .wc-table td.ctr { text-align:center; }
.wc-table td { padding:7px 9px; border-bottom:1px solid var(--border-hairline); color:var(--text-secondary); }
.wc-table tbody tr:hover { background:rgba(67,209,124,0.04); }
.wc-table td.strong { color:var(--text-primary); font-weight:700; }

/* ============================================================================================
   CRICKET-SPECIFIC HELPERS — restyled onto the void palette.
   ============================================================================================ */

/* Competition / fixture cards on the home + fixtures pages. */
.cr-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; transition:border-color 0.15s; display:block; }
.cr-card:hover { border-color:var(--green-deep); }
.cr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
/* Dashboard two-column split: competition picker beside the active-signals summary. */
.cr-dash-grid { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:14px; align-items:start; }
.cr-badge { font-family:var(--mono); font-size:8.5px; letter-spacing:0.5px; text-transform:uppercase;
  border:1px solid var(--border); border-radius:3px; padding:2px 7px; color:var(--text-secondary); }
.cr-badge.green { color:var(--green); border-color:rgba(67,209,124,0.4); background:rgba(67,209,124,0.08); }
.cr-badge.gold { color:var(--gold); border-color:rgba(224,182,78,0.4); background:rgba(224,182,78,0.08); }
.cr-badge.cyan { color:var(--cyan); border-color:rgba(0,229,255,0.35); background:rgba(0,229,255,0.06); }

/* Win-probability split bar (home/away). Two segments; home=green, away=gold. */
.winbar { display:flex; height:30px; border-radius:5px; overflow:hidden; border:1px solid var(--border);
  font-family:var(--mono); font-size:11px; font-weight:600; }
.winbar-home { background:linear-gradient(90deg,#1E5C3B,#43D17C); color:var(--on-green);
  display:flex; align-items:center; justify-content:flex-start; padding-left:9px; min-width:0; white-space:nowrap; overflow:hidden; }
.winbar-away { background:linear-gradient(90deg,#A8842F,#E0B64E); color:#1A1405;
  display:flex; align-items:center; justify-content:flex-end; padding-right:9px; min-width:0; white-space:nowrap; overflow:hidden; }

/* Compact fixture-card probability split. */
.prob-split { display:flex; height:5px; border-radius:3px; overflow:hidden; background:var(--bg-track); margin-top:6px; }
.prob-split .ps-home { background:var(--green); }
.prob-split .ps-away { background:var(--gold); }

/* Standings probability bars (Top4 / Final / Champion). */
.prob-bar { position:relative; height:16px; background:var(--bg-track); border-radius:3px; overflow:hidden; }
.prob-fill { position:absolute; inset:0 auto 0 0; border-radius:3px; }
.prob-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9.5px; font-weight:600; color:var(--text-primary); }

/* Run-total distribution chart (negative-binomial, 10-run bands). */
.runtotal-chart { display:flex; align-items:flex-end; gap:3px; height:160px; padding:6px 2px 0;
  border-bottom:1px solid var(--border); }
.rt-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.rt-bar { width:100%; background:linear-gradient(180deg,#43D17C,#1E5C3B); border-radius:2px 2px 0 0; min-height:1px; }
.rt-lbl { font-family:var(--mono); font-size:8px; color:var(--text-muted); margin-top:4px; }

/* Per-format Elo stat boxes + champion prob. */
.cr-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.stat-box { background:var(--bg-inset); border:1px solid var(--border); border-radius:6px; padding:10px 12px; }
.stat-val { font-family:var(--mono); font-size:20px; font-weight:600; color:var(--text-primary); line-height:1; }
.stat-lbl { font-family:var(--mono); font-size:9px; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--text-muted); margin-top:5px; }

/* Recent-form pills (W/L/NR/T). */
.form-pill { font-family:var(--mono); font-size:10px; font-weight:600; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:4px; border:1px solid var(--border); }
.form-W { background:rgba(67,209,124,0.16); color:var(--green); border-color:rgba(67,209,124,0.4); }
.form-L { background:rgba(229,86,77,0.14); color:var(--red); border-color:rgba(229,86,77,0.35); }
.form-NR, .form-N { background:var(--bg-chip); color:var(--text-muted); }
.form-T { background:rgba(224,182,78,0.14); color:var(--gold); border-color:rgba(224,182,78,0.35); }

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

/* error ui (framework) — on-brand SYSTEM HALTED bar. */
#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:11px; letter-spacing:1px; text-transform:uppercase; }
#blazor-error-ui::before { content:"SYSTEM HALTED · "; color:var(--red); }
#blazor-error-ui .reload { color:var(--green); text-decoration:none; margin-left:4px; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:0.75rem; top:0.5rem; }
.blazor-error-boundary { background:#13160E; border:1px solid var(--red); color:var(--gold);
  padding:1rem; font-family:var(--mono); }

/* ---- Reconnect modal — re-skinned onto the void theme (overrides scoped defaults) ---------- */
#components-reconnect-modal { background-color:var(--bg-card) !important; color:var(--text-primary);
  border:1px solid var(--border) !important; border-radius:8px !important;
  box-shadow:0 8px 30px rgba(0,0,0,0.6) !important; font-family:var(--mono); }
#components-reconnect-modal::backdrop { background-color:rgba(4,7,5,0.7) !important; }
#components-reconnect-modal p { color:var(--text-secondary); font-size:12px; }
#components-reconnect-modal button { background-color:var(--green) !important; color:var(--on-green) !important;
  font-family:var(--mono); font-weight:600; }
#components-reconnect-modal button:hover { filter:brightness(1.1); }
#components-reconnect-modal .components-rejoining-animation div { border-color:var(--green) !important; }

/* ============================================================================================
   RESPONSIVE — tablet (≤960px) collapses the rail into an off-canvas drawer (Blazor-driven via
   `.wc-nav-open` on `.wc-app`). Phone (≤480px) goes single column. Desktop (≥961px) keeps the
   dense terminal floor.
   ============================================================================================ */

.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-card-prose { padding:14px 15px; }
  .cr-grid { grid-template-columns:1fr; }
  .cr-dash-grid { grid-template-columns:1fr; }
  .wc-seg { flex-wrap:wrap; }
  .wc-nav a { padding:11px 12px; min-height:44px; }
  .wc-chip { padding:10px 14px; min-height:44px; display:inline-flex; align-items:center; }
  .wc-btn-green, .wc-btn-ghost { min-height:44px; padding:0 16px; }
  .wc-retry { min-height:44px; }
}

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