/* Same tokens and components as the extension's src/assets/common.css (YTTracker), plus the table. */
:root {
	color-scheme: light dark;
	--bg: #f6f7f9;
	--surface: #ffffff;
	--text: #1b1f24;
	--muted: #5f6873;
	--border: #dde1e6;
	--accent: #c4302b;
	--accent-text: #ffffff;
	--radius: 8px;
	--series-watched: #2e8540;
	--series-opened: #c4302b;
	--series-count: #2f6fdb;
	/* One colour per user in the charts: the dataviz reference categorical palette, in its validated order. */
	--user-1: #2a78d6;
	--user-2: #eb6834;
	--user-3: #1baf7a;
	--user-4: #eda100;
	--user-5: #e87ba4;
	--user-6: #008300;
	--user-7: #6250d6;
	--user-8: #e34948;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 15px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #15181c;
		--surface: #1f2328;
		--text: #e7e9ec;
		--muted: #9aa3ad;
		--border: #343a41;
		--accent: #e5534b;
		--series-watched: #4fbf67;
		--series-opened: #f06a63;
		--series-count: #6c9ef8;
		--user-1: #3987e5;
		--user-2: #d95926;
		--user-3: #199e70;
		--user-4: #c98500;
		--user-5: #d55181;
		--user-6: #008300;
		--user-7: #9085e9;
		--user-8: #e66767;
	}
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
}

main {
	display: grid;
	gap: 12px;
	padding: 16px;
}

nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 8px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

nav > img {
	width: 32px;
}

/* Store badges: kept at their own aspect ratio, never recoloured. */
.badge {
	display: inline-flex;
	border-radius: 6px;
}

.badge img {
	display: block;
	height: 40px;
	width: auto;
}

.badge:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

a {
	color: var(--accent);
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px 16px;
	min-width: 0;
}

.card h2 {
	margin: 0;
	font-size: 1rem;
	color: var(--accent);
}

.card-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.card h3 {
	margin: 16px 0 0;
	font-size: 0.9rem;
}

.chart {
	position: relative;
	height: 360px;
	margin-top: 8px;
}

/* One legend for the three charts: toggling a user shows or hides them everywhere. */
.legend,
.legend-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
}

.legend-item[aria-pressed='false'] {
	opacity: 0.45;
	text-decoration: line-through;
}

.swatch {
	width: 20px;
	border-top-width: 3px;
}

.muted {
	color: var(--muted);
	font-size: 0.85rem;
}

button {
	font: inherit;
	padding: 6px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	line-height: 1.25;
}

button:focus-visible,
select:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

select {
	font: inherit;
	padding: 6px 8px;
	line-height: 1.25;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
}

.spacer {
	flex: 1;
}

/* "?" with a tooltip, shown on hover or focus (a tap focuses the button on touch screens). */
.help {
	position: relative;
}

.help button {
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	color: var(--muted);
}

.help [role='tooltip'] {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 1;
	width: max-content;
	max-width: min(260px, 80vw);
	padding: 6px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font-size: 0.85rem;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

.help:hover [role='tooltip'],
.help:focus-within [role='tooltip'] {
	display: block;
}

/* Users table */
.table-wrap {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

th,
td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--border);
	text-align: right;
	white-space: nowrap;
}

th.name,
td.name {
	text-align: left;
}

thead th {
	color: var(--muted);
	font-size: 0.85rem;
	font-weight: 600;
}

thead th[colspan] {
	text-align: center;
}

/* A line before each group: total, last 7 days, today. */
thead th[colspan],
tbody td:nth-child(3n + 2),
thead tr:last-child th:nth-child(3n + 1) {
	border-left: 1px solid var(--border);
}

th button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

th[aria-sort] button {
	color: var(--text);
}

th[aria-sort='descending'] button::after {
	content: ' ▼';
}

th[aria-sort='ascending'] button::after {
	content: ' ▲';
}

tbody tr:hover {
	background: var(--bg);
}

tbody td.message {
	text-align: center;
	color: var(--muted);
}