/* ============================================================
   display.css — Public TV display, 1920px logical viewport.

   Self-contained ON PURPOSE: this page does not load base.css (it is
   public and must render with zero dependency on the portal chrome).
   The token palette below intentionally mirrors base.css so the look
   stays consistent, but the file stands alone.

   Always high-contrast and TV-legible: large type, fixed layout, no
   hover/focus states (it is never interacted with).
   ============================================================ */

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

:root {
	--bg:       #080a10;
	--surface:  #13161f;
	--surface2: #1c1f2e;
	--border:   #3d4460;
	--accent:   #6ba3ff;
	--green:    #4edd9f;
	--amber:    #fbb93a;
	--red:      #f07070;
	--text:     #f0f4ff;
	--muted:    #c2c8de;
	--radius:   10px;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--bg);
	color: var(--text);
	font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Outer centering wrapper — the canvas is scaled by JS inside it ── */
.disp-outer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: var(--bg);
}

/* ── The fixed 1920×1080 logical canvas ──────────────────────────── */
.disp-wrap {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 20px;

	width: 1920px;
	height: 1080px;
	padding: 32px 40px 22px;

	transform-origin: center center;
}

/* ── Header ──────────────────────────────────────────────────────── */
.disp-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	flex-shrink: 0;
}

.disp-header-left {
	justify-self: start;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
}

.disp-header-center {
	justify-self: center;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	color: var(--muted);
}

.disp-header-right {
	justify-self: end;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--muted);
}

/* ── Stat row ────────────────────────────────────────────────────── */
.disp-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	flex-shrink: 0;
}

.disp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 14px 20px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);

	text-align: center;
}

.disp-stat-lbl {
	margin-bottom: 6px;

	font-size: .95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--muted);
}

.disp-stat-val {
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1;
	color: var(--text);
}

.disp-stat-unit {
	margin-left: 4px;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--muted);
}

/* ── Cards ───────────────────────────────────────────────────────── */
.disp-card {
	display: flex;
	flex-direction: column;
	min-height: 0;

	padding: 16px 20px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.disp-card--bar { flex: 2.1; }
.disp-card--24h { flex: 1.5; }

.disp-card-title {
	flex-shrink: 0;
	margin-bottom: 6px;

	font-size: 1.15rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-align: center;
	color: var(--muted);
}

/* ── Chart canvases ──────────────────────────────────────────────── */
#disp-bar-canvas {
	display: block;
	flex: 1;
	width: 100%;
	min-height: 0;
	margin-top: 8px;
}

#disp-24h-canvas {
	display: block;
	flex: 1;
	width: 100%;
	min-height: 0;
	margin-top: 6px;
}