/* Marvin design tokens (dark & light). Follows the system setting until the theme toggle
   stores an explicit choice in data-theme. Loaded after bootstrap and app.css. */

@font-face {
	font-family: "Geist";
	src: url("fonts/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("fonts/GeistMono-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

/* -- Light ------------------------------------------------- */
:root {
	color-scheme: light;

	--font-ui: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	--bg-app: oklch(0.985 0.008 260);
	--bg-sidebar: oklch(0.975 0.008 260);
	--bg-surface: oklch(1 0.009 260);
	--bg-control: oklch(1 0.01 260);
	--bg-nav-active: oklch(0.93 0.012 260);
	--bg-segment-active: oklch(0.92 0.012 260);
	--bg-row-hover: oklch(0.97 0.01 260);
	--bg-nav-hover: oklch(0.955 0.01 260);

	--border-default: oklch(0.9 0.01 260);
	--border-control: oklch(0.87 0.01 260);
	--border-row: oklch(0.935 0.01 260);

	--text-primary: oklch(0.2 0.005 260);
	--text-button: oklch(0.26 0.005 260);
	--text-message: oklch(0.3 0.008 260);
	--text-secondary: oklch(0.48 0.01 260);
	--text-ip: oklch(0.45 0.01 260);
	--text-header: oklch(0.5 0.01 260);
	--text-date: oklch(0.52 0.01 260);
	--text-placeholder: oklch(0.62 0.01 260);

	--switch-off: oklch(0.86 0.01 260);
	--switch-on: oklch(0.55 0.15 250);
	--accent-link: oklch(0.5 0.15 250);
	--live-text: oklch(0.45 0.13 150);
	--live-dot: oklch(0.75 0.15 150);
	--offline-text: oklch(0.55 0.18 25);
	--offline-dot: oklch(0.68 0.17 25);
	--danger-text: oklch(0.55 0.18 25);
	--danger-base: oklch(0.68 0.17 25);
	--highlight-bg: oklch(0.88 0.16 80 / 28%);
	--highlight-text: oklch(0.25 0.05 80);
	--avatar-bg: oklch(0.9 0.04 250);

	--lvl-info-text: #005fad;    --lvl-info-dot: #1a83db;    --lvl-info-accent: #1a83db;
	--lvl-warning-text: #884f00; --lvl-warning-dot: #b17100; --lvl-warning-accent: #b17100;
	--lvl-error-text: #a12f2f;   --lvl-error-dot: #ce514d;   --lvl-error-accent: #ce514d;
	--lvl-success-text: oklch(0.45 0.13 150); --lvl-success-dot: oklch(0.6 0.15 150);
	--lvl-debug-text: var(--text-secondary);  --lvl-debug-dot: var(--text-header);
}

/* -- Dark (system setting, unless light was chosen) ---------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--bg-app: oklch(0.235 0.008 260);
		--bg-sidebar: oklch(0.215 0.008 260);
		--bg-surface: oklch(0.265 0.009 260);
		--bg-control: oklch(0.28 0.01 260);
		--bg-nav-active: oklch(0.33 0.012 260);
		--bg-segment-active: oklch(0.38 0.012 260);
		--bg-row-hover: oklch(0.31 0.01 260);
		--bg-nav-hover: oklch(0.3 0.01 260);

		--border-default: oklch(0.34 0.01 260);
		--border-control: oklch(0.37 0.01 260);
		--border-row: oklch(0.32 0.01 260);

		--text-primary: oklch(0.95 0.005 260);
		--text-button: oklch(0.9 0.005 260);
		--text-message: oklch(0.86 0.008 260);
		--text-secondary: oklch(0.68 0.01 260);
		--text-ip: oklch(0.7 0.01 260);
		--text-header: oklch(0.62 0.01 260);
		--text-date: oklch(0.58 0.01 260);
		--text-placeholder: oklch(0.55 0.01 260);

		--switch-off: oklch(0.42 0.01 260);
		--switch-on: oklch(0.65 0.15 250);
		--accent-link: oklch(0.78 0.12 250);
		--live-text: oklch(0.78 0.13 150);
		--offline-text: oklch(0.75 0.15 25);
		--danger-text: oklch(0.75 0.15 25);
		--highlight-bg: oklch(0.78 0.14 80 / 28%);
		--highlight-text: oklch(0.97 0.02 80);
		--avatar-bg: oklch(0.3 0.04 250);

		--lvl-info-text: #86caff;    --lvl-info-dot: #5cb3ff;    --lvl-info-accent: #52a9fe;
		--lvl-warning-text: #edbb64; --lvl-warning-dot: #dfa11a; --lvl-warning-accent: #d59800;
		--lvl-error-text: #ffa59d;   --lvl-error-dot: #ff847d;   --lvl-error-accent: #f47b74;
		--lvl-success-text: oklch(0.82 0.12 150); --lvl-success-dot: oklch(0.75 0.15 150);
	}
}

/* -- Dark (chosen with the theme toggle) -------------------- */
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg-app: oklch(0.235 0.008 260);
	--bg-sidebar: oklch(0.215 0.008 260);
	--bg-surface: oklch(0.265 0.009 260);
	--bg-control: oklch(0.28 0.01 260);
	--bg-nav-active: oklch(0.33 0.012 260);
	--bg-segment-active: oklch(0.38 0.012 260);
	--bg-row-hover: oklch(0.31 0.01 260);
	--bg-nav-hover: oklch(0.3 0.01 260);

	--border-default: oklch(0.34 0.01 260);
	--border-control: oklch(0.37 0.01 260);
	--border-row: oklch(0.32 0.01 260);

	--text-primary: oklch(0.95 0.005 260);
	--text-button: oklch(0.9 0.005 260);
	--text-message: oklch(0.86 0.008 260);
	--text-secondary: oklch(0.68 0.01 260);
	--text-ip: oklch(0.7 0.01 260);
	--text-header: oklch(0.62 0.01 260);
	--text-date: oklch(0.58 0.01 260);
	--text-placeholder: oklch(0.55 0.01 260);

	--switch-off: oklch(0.42 0.01 260);
	--switch-on: oklch(0.65 0.15 250);
	--accent-link: oklch(0.78 0.12 250);
	--live-text: oklch(0.78 0.13 150);
	--offline-text: oklch(0.75 0.15 25);
	--danger-text: oklch(0.75 0.15 25);
	--highlight-bg: oklch(0.78 0.14 80 / 28%);
	--highlight-text: oklch(0.97 0.02 80);
	--avatar-bg: oklch(0.3 0.04 250);

	--lvl-info-text: #86caff;    --lvl-info-dot: #5cb3ff;    --lvl-info-accent: #52a9fe;
	--lvl-warning-text: #edbb64; --lvl-warning-dot: #dfa11a; --lvl-warning-accent: #d59800;
	--lvl-error-text: #ffa59d;   --lvl-error-dot: #ff847d;   --lvl-error-accent: #f47b74;
	--lvl-success-text: oklch(0.82 0.12 150); --lvl-success-dot: oklch(0.75 0.15 150);
}

/* -- Base ---------------------------------------------------- */
html, body {
	background: var(--bg-app);
	color: var(--text-primary);
	font-family: var(--font-ui);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

a, .btn-link { color: var(--accent-link); }

::placeholder { color: var(--text-placeholder); opacity: 1; }

/* Search match (rendered from code, so it can't live in scoped CSS) */
mark.hl {
	padding: 0;
	border-radius: 3px;
	background: var(--highlight-bg);
	color: var(--highlight-text);
}

/* -- Bootstrap overrides (Account pages) --------------------- */
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
hr { border-color: var(--border-default); opacity: 1; }

.form-control, .form-select, input, select, textarea {
	background-color: var(--bg-control);
	color: var(--text-primary);
	border: 1px solid var(--border-control);
	border-radius: 8px;
}

.form-control:focus, .form-select:focus {
	background-color: var(--bg-control);
	color: var(--text-primary);
	border-color: var(--switch-on);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--switch-on) 25%, transparent);
}

.form-floating > label, .text-muted { color: var(--text-secondary) !important; }
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after { background: transparent !important; }

.btn-primary {
	background: var(--switch-on);
	border-color: var(--switch-on);
	color: #fff;
	border-radius: 8px;
}

.btn-primary:hover { background: color-mix(in oklch, var(--switch-on) 85%, black); border-color: transparent; }

.card, .list-group-item {
	background: var(--bg-surface);
	color: var(--text-primary);
	border-color: var(--border-default);
}

.nav-pills .nav-link { color: var(--text-secondary); border-radius: 8px; }
.nav-pills .nav-link.active { background: var(--bg-nav-active); color: var(--text-primary); }

.text-danger, .validation-message { color: var(--danger-text) !important; }

/* The log page manages its own padding and scrolling */
main.content:has(> .log-page) {
	padding: 0;
	overflow: hidden;
}