/* ============================================================
   Kalshi dashboard — "premium fintech terminal" theme.
   Layered on Tailwind (CDN). Color tokens live in base.html.
   ============================================================ */
:root {
  --bg: #0a0c0f;  --panel: #13171d;  --border: #232a33;
  --muted: #8a94a3; --text: #e8edf3;
  --up: #22c55e;  --down: #ef4444;  --accent: #5b9dff;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 560px at 88% -8%, rgba(91,157,255,0.07), transparent 60%),
    radial-gradient(900px 520px at -5% 0%, rgba(34,197,94,0.05), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}

/* aligned, tabular figures wherever we show data */
.font-mono, code, pre, table td, table th, .kpi-value { font-variant-numeric: tabular-nums; }

/* Panels get depth: faint top-light gradient, hairline highlight, soft shadow */
.bg-panel {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0) 42%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 34px -22px rgba(0,0,0,0.82);
}

a, button, .bot-card, .kpi { transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease, color .12s ease; }

/* KPI cards — accent rail on the left, mono value */
.kpi { position: relative; overflow: hidden; }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--accent); opacity:.5; }
.kpi.kpi-up::before   { background: var(--up);   opacity:.85; }
.kpi.kpi-down::before { background: var(--down); opacity:.85; }
/* whole-box tint (overrides the panel's neutral gradient) */
.kpi.kpi-up   { background-image: linear-gradient(180deg, rgba(34,197,94,0.13), rgba(34,197,94,0.02)); }
.kpi.kpi-down { background-image: linear-gradient(180deg, rgba(239,68,68,0.13), rgba(239,68,68,0.02)); }
.kpi:hover { transform: translateY(-1px); }
.kpi-value { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: -0.02em; }

/* Home bot cards lift on hover */
.bot-card:hover { transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 44px -24px rgba(0,0,0,0.9); }
/* Home cards tinted by total P&L */
.bot-card.card-up   { background-image: linear-gradient(180deg, rgba(34,197,94,0.11), rgba(34,197,94,0.015)); border-color: rgba(34,197,94,0.35); }
.bot-card.card-down { background-image: linear-gradient(180deg, rgba(239,68,68,0.11), rgba(239,68,68,0.015)); border-color: rgba(239,68,68,0.35); }

/* Tables: quiet uppercase headers, subtle row hover */
table thead th { text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
table tbody tr { transition: background-color .12s ease; }
table tbody tr:hover { background: rgba(255,255,255,0.025); }

/* Chart expand button */
.chart-expand { opacity: .5; transition: opacity .15s ease, transform .15s ease; }
.chart-expand:hover { opacity: 1; transform: scale(1.1); }

.status-pill { box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset; }

/* Scrollbars */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #283039; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3b4654; background-clip: padding-box; }
::selection { background: rgba(91,157,255,0.35); color: #fff; }

/* Radio-as-button (existing behaviour, recoloured) */
input[type="radio"]:checked + span { color: #e8edf3; font-weight: 600; }
input[type="radio"]:checked ~ * { color: #e8edf3; }
label:has(input[type="radio"]:checked) { border-color: var(--accent); background-color: rgba(91,157,255,0.15); }

canvas { color: #e8edf3; }
pre { line-height: 1.35; }

/* Toasts */
.toast { padding: .6rem 1rem; border-radius: .6rem; font-size: .8rem; color: #e8edf3; transition: opacity .3s; max-width: 360px; word-break: break-word; box-shadow: 0 12px 30px -12px rgba(0,0,0,.7); }
.toast-error   { background: rgba(239,68,68,.92);  border: 1px solid var(--down); }
.toast-success { background: rgba(34,197,94,.92); border: 1px solid var(--up); }