/* Bobby Match Intelligence — web theme. Same design tokens as the Windows app (Themes/Colors.xaml). */
:root {
    --bg0: #09090B; --bg1: #0F0F12; --surface: #151519; --surface2: #1C1C21; --surface3: #24242B;
    --border: #2A2A32; --border-strong: #3A3A44; --graphite: #4A4A55;
    --bordeaux: #7A1022; --bordeaux-deep: #4A0A16; --red: #C8102E; --red-bright: #E0233F;
    --text: #F4F4F6; --muted: #A1A1AC; --dim: #6C6C78;
    --ok: #22C55E; --warn: #F59E0B; --err: #EF4444; --info: #8AB4F8;
    --ok-soft: rgba(34,197,94,.15); --warn-soft: rgba(245,158,11,.15); --err-soft: rgba(239,68,68,.15); --red-soft: rgba(200,16,46,.15); --info-soft: rgba(138,180,248,.13);
    --radius: 12px; --radius-s: 8px;
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg0); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--red-bright); }
h1 { font-size: 1.7rem; margin: 0; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 0 0 .5rem; font-weight: 600; }
:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
h1:focus, h1:focus-visible { outline: none; }

/* ---------- Layout ---------- */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { background: var(--bg1); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand .t1 { font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.brand .t2 { color: var(--red-bright); font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-s); color: var(--muted); font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.04); color: var(--text); }
.nav a.active { background: linear-gradient(90deg, var(--bordeaux-deep), rgba(74,10,22,.35)); color: var(--text); box-shadow: inset 3px 0 0 var(--red); }
.nav .ico { width: 20px; text-align: center; opacity: .9; }
.sidebar .spacer { flex: 1; }
.responsible { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; font-size: .8rem; color: var(--muted); background: var(--surface); }
.responsible b { display: block; color: var(--dim); font-size: .7rem; letter-spacing: .08em; margin-bottom: 4px; }
.version { color: var(--dim); font-size: .75rem; padding: 10px 8px 0; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: linear-gradient(90deg, #0F0F12 0%, #160A0E 60%, #2A0912 100%); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.topbar .title { font-weight: 650; }
.topbar .grow { flex: 1; }
.topbar .status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; }
.lang { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.lang a { padding: 5px 11px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.lang a.on { background: var(--red); color: #fff; }
.menu-btn { display: none; background: none; border: 1px solid var(--border-strong); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 1rem; cursor: pointer; }
.page { padding: 24px; max-width: 1400px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.subtitle { color: var(--muted); margin-top: 4px; }

/* ---------- Components ---------- */
.card { background: linear-gradient(180deg, #1B1B20, #151519); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.card.accent { background: linear-gradient(135deg, #2A0B13 0%, #151519 70%); }
.card.warn { border-color: rgba(245,158,11,.4); }
.empty { color: var(--muted); text-align: center; padding: 34px 18px; }
.grid { display: grid; gap: 16px; }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.tile .label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.tile .value { font-size: 1.9rem; font-weight: 700; margin-top: 6px; }
.tile .hint { color: var(--dim); font-size: .8rem; margin-top: 2px; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .small { font-size: .82rem; }
.mono { font-family: var(--mono); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--err-soft); color: var(--err); } .badge.info { background: var(--info-soft); color: var(--info); }
.badge.red { background: var(--red-soft); color: var(--red-bright); } .badge.muted { background: rgba(255,255,255,.06); color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--dim); flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.err { background: var(--err); }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); background: var(--surface2); color: var(--text); padding: 8px 14px; border-radius: var(--radius-s); font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--surface3); color: var(--text); }
.btn.primary { background: linear-gradient(135deg, var(--red), var(--bordeaux)); border-color: transparent; color: #fff; }
.btn.primary:hover { background: linear-gradient(135deg, var(--red-bright), #8E1428); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.disclaimer { border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.07); color: var(--warn); border-radius: var(--radius); padding: 10px 14px; font-weight: 600; font-size: .9rem; }

/* Forms */
label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=number], select { width: 100%; background: var(--bg1); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-s); padding: 9px 11px; font: inherit; }
input:focus, select:focus { border-color: var(--red); outline: none; }
.form-row { margin-bottom: 14px; }
.inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.inline > * { flex: 1 1 150px; }
.check { display: flex; gap: 8px; align-items: center; color: var(--text); }
.check input { width: auto; }
.alert { border-radius: var(--radius-s); padding: 10px 12px; margin-bottom: 14px; font-size: .9rem; }
.alert.err { background: var(--err-soft); color: #FCA5A5; border: 1px solid rgba(239,68,68,.35); }
.alert.ok { background: var(--ok-soft); color: #86EFAC; border: 1px solid rgba(34,197,94,.35); }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--dim); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid rgba(42,42,50,.6); vertical-align: middle; }
tr:hover td { background: rgba(255,255,255,.02); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.match-cell { font-weight: 600; }
.match-cell .vs { color: var(--dim); font-weight: 400; margin: 0 6px; }

/* Probability bars */
.prob { display: flex; flex-direction: column; gap: 3px; min-width: 64px; }
.prob .v { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem; }
.prob .bar { height: 4px; border-radius: 3px; background: var(--surface3); overflow: hidden; }
.prob .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bordeaux), var(--red-bright)); }
.prob.top .v { color: var(--red-bright); }

.why { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.why li { margin: 3px 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .9rem; }
.kv .k { color: var(--muted); }
.match-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.match-hero .teams { font-size: 1.5rem; font-weight: 700; }
.match-hero .teams .vs { color: var(--dim); font-weight: 400; margin: 0 10px; font-size: 1.1rem; }

/* Auth pages */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 70% 0%, #2A0912 0%, var(--bg0) 55%); }
.auth .card { width: 100%; max-width: 420px; }
.auth .brand { justify-content: center; padding-bottom: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease; z-index: 30; }
    .sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
    .menu-btn { display: inline-block; }
    .topbar { padding: 10px 16px; gap: 10px; }
    .topbar .status.hide-s { display: none; }
    .page { padding: 16px; }
    .grid.two { grid-template-columns: 1fr; }
    h1 { font-size: 1.35rem; }
    .hide-s { display: none; }
}
@media (max-width: 520px) {
    .tile .value { font-size: 1.5rem; }
    td, th { padding: 8px 6px; }
    .match-hero .teams { font-size: 1.15rem; }
}

#blazor-error-ui { background: var(--err); color: #fff; bottom: 0; display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected { }