/* Call Scorecard theme — dark, warm, dense, data-first.
   Palette and type scale modelled on the GMGN AI Trader dashboard; every rule here is our own. */

:root {
	--ink: #0a0907;
	--ink-2: #0f0d0a;
	--panel: #14110b;
	--panel-2: #191510;
	--raise: #211c14;
	--line: #272219;
	--line-soft: #39322560;
	--paper: #ece3d0;
	--paper-2: #cfc6b1;
	--dim: #8a8268;
	--dim-2: #5b5443;
	--look: #c8f24a;   /* good, primary action */
	--skip: #ec5a40;   /* bad, errors, dead */
	--watch: #f0a93b;  /* warning, repeat, partial */
	--info: #5fb4c4;   /* links, neutral info */
	--font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	--radius: 12px;
	--nav-w: 208px;
	--strip-h: 44px;
	color-scheme: dark; /* native scrollbars, date pickers and form controls follow the dark theme */
}

* { scrollbar-width: thin; scrollbar-color: var(--dim-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--dim-2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
	background: var(--ink);
	color: var(--paper);
	font: 13px/1.5 var(--font-mono);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--look); outline-offset: 2px; border-radius: 4px; }
code { font-family: var(--font-mono); font-size: 12px; color: var(--paper-2); }
::selection { background: color-mix(in srgb, var(--look) 30%, transparent); }

/* ---------- Shell: status strip, nav, content ---------- */

.strip {
	position: sticky; top: 0; z-index: 20;
	height: var(--strip-h);
	display: flex; align-items: center; gap: 20px;
	padding: 0 20px;
	background: color-mix(in srgb, var(--ink-2) 92%, transparent);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--line);
	white-space: nowrap; overflow-x: auto;
}
.brand {
	font-family: var(--font-display); font-weight: 700; font-size: 15px;
	letter-spacing: -0.01em; color: var(--paper); margin-right: 8px;
}
.brand b { color: var(--look); font-weight: 700; }
.strip-item { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }
.strip-item strong { color: var(--paper); font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim-2); flex: none; }
.dot.ok { background: var(--look); box-shadow: 0 0 0 3px color-mix(in srgb, var(--look) 18%, transparent); }
.dot.warn { background: var(--watch); }
.dot.bad { background: var(--skip); box-shadow: 0 0 0 3px color-mix(in srgb, var(--skip) 18%, transparent); }
.strip-spacer { flex: 1; }

.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: calc(100vh - var(--strip-h)); }

.nav {
	position: sticky; top: var(--strip-h); align-self: start;
	height: calc(100vh - var(--strip-h));
	padding: 16px 12px;
	border-right: 1px solid var(--line);
	background: var(--ink-2);
}
.nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim-2); padding: 8px 10px; }
.nav a {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px; margin: 2px 0;
	border-radius: 8px; color: var(--paper-2);
	font-family: var(--font-display); font-size: 14px;
}
.nav a:hover { background: var(--panel); text-decoration: none; color: var(--paper); }
.nav a[aria-current="page"] { background: var(--panel-2); color: var(--look); box-shadow: inset 2px 0 0 var(--look); }
.nav svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }

.content { padding: 24px 28px 48px; min-width: 0; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.page-sub { color: var(--dim); margin: 6px 0 0; font-size: 12px; max-width: 760px; }

/* ---------- Panels, KPIs ---------- */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel + .panel { margin-top: 16px; }
.panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.panel-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0; }
.panel-body { padding: 16px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.kpi-note { color: var(--dim); font-size: 11px; margin-top: 2px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.facts dt { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding-top: 2px; }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.message { white-space: pre-wrap; color: var(--paper-2); max-height: 160px; overflow: auto; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th {
	position: sticky; top: 0; z-index: 1;
	background: var(--panel-2);
	font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--dim); text-align: left;
	padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { height: 30px; padding: 4px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
table.data tbody tr:hover td { background: var(--panel-2); }
table.data .num { text-align: right; }
table.data .empty { color: var(--dim); text-align: center; padding: 28px; height: auto; }
.token-sym { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--paper); }
.addr { color: var(--dim); }

.good { color: var(--look); }
.bad { color: var(--skip); }
.warn { color: var(--watch); }
.muted { color: var(--dim); }

/* ---------- Chips (status is always text, colour only reinforces it) ---------- */

.chip {
	--c: var(--dim);
	display: inline-flex; align-items: center; gap: 4px;
	padding: 1px 8px; border-radius: 999px;
	font-size: 11px; line-height: 18px; white-space: nowrap;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.chip.look { --c: var(--look); }
.chip.watch { --c: var(--watch); }
.chip.skip { --c: var(--skip); }
.chip.info { --c: var(--info); }

/* ---------- Forms, buttons ---------- */

.btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px; border-radius: 8px;
	font: 500 13px var(--font-display);
	color: var(--paper); background: var(--raise);
	border: 1px solid var(--line); cursor: pointer;
}
.btn:hover { border-color: var(--dim-2); }
.btn.primary { color: var(--ink); background: var(--look); border-color: var(--look); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--skip); border-color: color-mix(in srgb, var(--skip) 40%, transparent); background: transparent; }
.btn.small { padding: 3px 10px; font-size: 12px; }

.field { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 10px; }
.field > label { color: var(--paper-2); font-size: 12px; }
.hint { color: var(--dim); font-size: 11px; margin: -4px 0 12px; }

input[type=text], input[type=number], input[type=password], select, textarea {
	width: 100%; max-width: 420px;
	padding: 7px 10px; border-radius: 8px;
	font: 13px var(--font-mono); color: var(--paper);
	background: var(--ink-2); border: 1px solid var(--line);
}
textarea { max-width: 100%; resize: vertical; }
table.data input[type=text], table.data select { max-width: none; min-width: 140px; padding: 4px 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--look); }
input[type=checkbox] { accent-color: var(--look); width: 16px; height: 16px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toast { min-height: 20px; color: var(--look); font-size: 12px; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
	.shell { grid-template-columns: 1fr; }
	.nav {
		position: static; height: auto;
		display: flex; gap: 4px; overflow-x: auto;
		padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line);
	}
	.nav-label { display: none; }
	.nav a { white-space: nowrap; }
	.content { padding: 16px; }
	.field { grid-template-columns: 1fr; gap: 4px; }
	.brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------- Dialogs (the one place a shadow is allowed) ---------- */

.dialog {
	position: fixed; inset: 0; z-index: 50;
	display: flex; align-items: center; justify-content: center;
	padding: 16px; background: #000a;
}
.dialog[hidden] { display: none; }
.dialog-panel {
	width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto;
	background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 24px 60px #000c;
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.dialog-body { padding: 16px; }
.dialog-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.icon-btn { background: none; border: 0; color: var(--dim); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.icon-btn:hover { color: var(--paper); background: var(--raise); }

/* ---------- Login ---------- */

.centered { display: flex; align-items: center; justify-content: center; padding: 8vh 16px; }
.card-narrow { width: min(380px, 100%); }

/* ---------- Source management bits ---------- */

.stack { display: grid; gap: 10px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.toast.ok { color: var(--look); }
.toast.err { color: var(--skip); }
.preview { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--ink-2); }
.sender-list { max-height: 190px; overflow: auto; display: grid; gap: 2px; }
.sender-list label { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; }
.sender-list label:hover { background: var(--panel-2); }
.sender-list input[type=checkbox] { flex: none; }
.paused td { opacity: 0.6; }
.gate-result { margin-top: 10px; }