/* Copyright Epic Games, Inc. All Rights Reserved. */

/* theme -------------------------------------------------------------------- */

/* system preference (default) */
@media (prefers-color-scheme: light) {
	:root {
		--theme_g0:	#1f2328;
		--theme_g1:	#656d76;
		--theme_g2:	#d0d7de;
		--theme_g3:	#f6f8fa;
		--theme_g4:	#ffffff;

		--theme_p0:	#0969da;
		--theme_p4:	#ddf4ff;
		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);

		--theme_ln:	var(--theme_p0);
		--theme_er:	#ffebe9;

		--theme_ok:		#1a7f37;
		--theme_warn:	#9a6700;
		--theme_fail:	#cf222e;

		--theme_bright:			#1f2328;
		--theme_faint:			#6e7781;
		--theme_border_subtle:	#d8dee4;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--theme_g0:	#c9d1d9;
		--theme_g1:	#8b949e;
		--theme_g2:	#30363d;
		--theme_g3:	#161b22;
		--theme_g4:	#0d1117;

		--theme_p0:	#58a6ff;
		--theme_p4:	#1c2128;
		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);

		--theme_ln:	#58a6ff;
		--theme_er:	#1c1c1c;

		--theme_ok:		#3fb950;
		--theme_warn:	#d29922;
		--theme_fail:	#f85149;

		--theme_bright:			#f0f6fc;
		--theme_faint:			#6e7681;
		--theme_border_subtle:	#21262d;
	}
}

/* manual overrides (higher specificity than media queries) */
:root[data-theme="light"] {
	--theme_g0:	#1f2328;
	--theme_g1:	#656d76;
	--theme_g2:	#d0d7de;
	--theme_g3:	#f6f8fa;
	--theme_g4:	#ffffff;

	--theme_p0:	#0969da;
	--theme_p4:	#ddf4ff;
	--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
	--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
	--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);

	--theme_ln:	var(--theme_p0);
	--theme_er:	#ffebe9;

	--theme_ok:		#1a7f37;
	--theme_warn:	#9a6700;
	--theme_fail:	#cf222e;

	--theme_bright:			#1f2328;
	--theme_faint:			#6e7781;
	--theme_border_subtle:	#d8dee4;
}

:root[data-theme="dark"] {
	--theme_g0:	#c9d1d9;
	--theme_g1:	#8b949e;
	--theme_g2:	#30363d;
	--theme_g3:	#161b22;
	--theme_g4:	#0d1117;

	--theme_p0:	#58a6ff;
	--theme_p4:	#1c2128;
	--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
	--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
	--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);

	--theme_ln:	#58a6ff;
	--theme_er:	#1c1c1c;

	--theme_ok:		#3fb950;
	--theme_warn:	#d29922;
	--theme_fail:	#f85149;

	--theme_bright:			#f0f6fc;
	--theme_faint:			#6e7681;
	--theme_border_subtle:	#21262d;
}

/* theme toggle ------------------------------------------------------------- */

#zen_ws_toggle {
	position:			fixed;
	top:				16px;
	right:				60px;
	z-index:			10;
	width:				36px;
	height:				36px;
	border-radius:		6px;
	border:				1px solid var(--theme_g2);
	background:			var(--theme_g3);
	color:				var(--theme_g1);
	cursor:				pointer;
	display:			flex;
	align-items:		center;
	justify-content:	center;
	font-size:			18px;
	line-height:		1;
	transition:			color 0.15s, background 0.15s, border-color 0.15s;
	user-select:		none;
}

#zen_ws_toggle:hover {
	color:				var(--theme_g0);
	background:			var(--theme_p4);
	border-color:		var(--theme_g1);
}

#zen_theme_toggle {
	position:			fixed;
	top:				16px;
	right:				16px;
	z-index:			10;
	width:				36px;
	height:				36px;
	border-radius:		6px;
	border:				1px solid var(--theme_g2);
	background:			var(--theme_g3);
	color:				var(--theme_g1);
	cursor:				pointer;
	display:			flex;
	align-items:		center;
	justify-content:	center;
	font-size:			18px;
	line-height:		1;
	transition:			color 0.15s, background 0.15s, border-color 0.15s;
	user-select:		none;
}

#zen_theme_toggle:hover {
	color:				var(--theme_g0);
	background:			var(--theme_p4);
	border-color:		var(--theme_g1);
}

/* page --------------------------------------------------------------------- */

body, input, button {
	font-family:	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	font-size:		14px;
}

body {
	overflow-y:			scroll;
	margin:				0;
	padding:			20px;
	background-color:	var(--theme_g4);
	color:				var(--theme_g0);
}

pre, code {
	font-family:	'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:		13px;
	margin:			0;
}

input {
	color:				var(--theme_g0);
	background-color:	var(--theme_g3);
	border:				1px solid var(--theme_g2);
	border-radius:		4px;
	padding:			4px 8px;
}

button {
	color:				var(--theme_g0);
	background:			transparent;
	border:				none;
	cursor:				pointer;
}

* {
	box-sizing: border-box;
}

#container {
	max-width:				1400px;
	margin:					auto;

	> div {
		padding-top:		1.0em;
		padding-bottom:		1.5em;
	}
}

/* service nav -------------------------------------------------------------- */

#service_nav {
	display:			flex;
	align-items:		center;
	gap:				4px;
	margin-bottom:		16px;
	padding:			4px;
	background-color:	var(--theme_g3);
	border:				1px solid var(--theme_g2);
	border-radius:		6px;

	a {
		padding:			6px 14px;
		border-radius:		4px;
		font-size:			13px;
		font-weight:		500;
		color:				var(--theme_g1);
		text-decoration:	none;
		transition:			color 0.15s, background 0.15s;
	}

	a:hover {
		background-color:	var(--theme_p4);
		color:				var(--theme_g0);
		text-decoration:	none;
	}
}

/* links -------------------------------------------------------------------- */

a {
	text-decoration:		unset;
}

.zen_action, a {
	cursor:					pointer;
	color:					var(--theme_ln);

	&:hover {
		text-decoration:	underline var(--theme_ln);
	}
}

/* sector ------------------------------------------------------------------- */

.zen_sector {
	h1, h2, h3 {
		white-space:		nowrap;
	}

	h1 {
		font-size:			20px;
		font-weight:		600;
		width:				100%;
		color:				var(--theme_bright);
		border-bottom:		1px solid var(--theme_g2);
		padding-bottom:		0.4em;
		margin-bottom:		16px;
	}

	h2 {
		font-size:			16px;
		font-weight:		600;
		margin-bottom:		12px;
	}

	h3 {
		font-size:			14px;
		font-weight:		600;
		margin:				0em;
		padding:			8px 12px;
		background-color:	var(--theme_g3);
		border:				1px solid var(--theme_g2);
		border-radius:		6px 6px 0 0;
		color:				var(--theme_g1);
		text-transform:		uppercase;
		letter-spacing:		0.5px;
	}

	margin-bottom:	2em;
	> *:not(h1) {
		margin-left:	0;
	}
}


/* table -------------------------------------------------------------------- */

.zen_table {
	display:				grid;
	border:					1px solid var(--theme_g2);
	border-radius:			6px;
	overflow:				hidden;
	margin-bottom:			1.2em;
	font-size:				13px;

	> div {
		display: contents;
	}

	> div:nth-of-type(odd) > div {
		background-color:	var(--theme_g4);
	}

	> div:nth-of-type(even) > div {
		background-color:	var(--theme_g3);
	}

	> div:first-of-type {
		font-weight:		600;
		> div {
			background-color:	var(--theme_g3);
			color:				var(--theme_g1);
			text-transform:		uppercase;
			letter-spacing:		0.5px;
			font-size:			11px;
			border-bottom:		1px solid var(--theme_g2);
		}
	}

	> div:not(:first-of-type):hover > div {
		background-color:	var(--theme_p4);
	}

	> hidden {
		visibility:			hidden;
		display:			none;
	}

	> div > div {
		padding:			8px 12px;
		align-content:		center;
		border-left:		1px solid var(--theme_border_subtle);
		overflow:			auto;
		overflow-wrap:		break-word;
		white-space: 		pre-wrap;
	}

	> div > div:first-child {
		border-left:		none;
	}
}

/* sessions ----------------------------------------------------------------- */

.sessions-layout {
	display:				flex;
	gap:					1.5em;
	align-items:			flex-start;
}

.sessions-table {
	flex:					1;
	min-width:				0;
}

.sessions-table .zen_table > div > div {
	text-align:				right;
}

.sessions-table .zen_table > div > div:nth-child(2) {
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
}

.sessions-detail {
	width:					600px;
	flex-shrink:			0;
	font-size:				13px;
}

.sessions-detail h3 {
	margin:					0 0 0.6em 0;
	font-size:				13px;
	text-transform:			uppercase;
	letter-spacing:			0.5px;
	color:					var(--theme_g1);
}

.sessions-detail .zen_table {
	margin-bottom:			1em;
}

.sessions-detail-placeholder {
	color:					var(--theme_g1);
	font-style:				italic;
}

.sessions-selected {
	background-color:		var(--theme_p3) !important;
}

.sessions-log-panel {
	margin-top:				12px;
	border:					1px solid var(--theme_g3);
	border-radius:			6px;
	overflow:				hidden;
}
.sessions-log-header {
	display:				flex;
	align-items:			center;
	padding:				6px 12px;
	background-color:		var(--theme_bg1);
	border-bottom:			1px solid var(--theme_g3);
}
.sessions-log-title {
	font-size:				12px;
	font-weight:			600;
	text-transform:			uppercase;
	letter-spacing:			0.5px;
	color:					var(--theme_g1);
}
.sessions-log-body {
	max-height:				300px;
	overflow-y:				auto;
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:				12px;
	line-height:			1.5;
	padding:				4px 0;
	background-color:		var(--theme_bg0);
}
.sessions-log-empty {
	color:					var(--theme_g1);
	font-style:				italic;
	padding:				8px 12px;
	font-family:			inherit;
}
.sessions-log-trimmed {
	color:					var(--theme_g1);
	font-style:				italic;
	padding:				2px 12px;
	font-size:				11px;
}
.sessions-log-line {
	padding:				0 12px;
	white-space:			pre;
	display:				flex;
	gap:					8px;
}
.sessions-log-line:hover {
	background-color:		var(--theme_bg1);
}
.sessions-log-ts {
	color:					var(--theme_g1);
	flex-shrink:			0;
}
.sessions-log-level {
	flex-shrink:			0;
	min-width:				4em;
	font-weight:			600;
}
.sessions-log-level-info  { color: var(--theme_ln); }
.sessions-log-level-warn  { color: #d29922; }
.sessions-log-level-error { color: #f85149; }
.sessions-log-level-debug { color: var(--theme_g1); }
.sessions-log-msg {
	white-space:			pre-wrap;
	word-break:				break-all;
}
.sessions-log-data {
	color:					var(--theme_g1);
	white-space:			pre-wrap;
	word-break:				break-all;
}

.sessions-self-pill {
	display:				inline-block;
	font-size:				0.7em;
	font-weight:			600;
	padding:				1px 6px;
	margin-right:			6px;
	border-radius:			8px;
	background-color:		var(--theme_p4);
	color:					var(--theme_g0);
	vertical-align:			middle;
}

.objectstore-bucket-detail {
	grid-column:			1 / -1;
	padding:				8px 16px;
	background-color:		var(--theme_bg1);
	border-top:				1px solid var(--theme_g3);
	font-size:				0.9em;
}
.objectstore-objects-table {
	width:					100%;
	border-collapse:		collapse;
}
.objectstore-objects-table th {
	text-align:				left;
	font-weight:			600;
	padding:				4px 8px;
	border-bottom:			1px solid var(--theme_g3);
	color:					var(--theme_g1);
	font-size:				0.85em;
}
.objectstore-objects-table td {
	padding:				2px 8px;
	font-family:			var(--font_mono);
	font-size:				0.85em;
}

.sessions-pager {
	display:				flex;
	align-items:			center;
	gap:					8px;
	margin-top:				8px;
}
.sessions-pager-label {
	font-size:				0.85em;
	opacity:				0.7;
}

/* expandable cell ---------------------------------------------------------- */

.zen_expand_icon {
	cursor:                 pointer;
	margin-right:           0.5em;
	color:                  var(--theme_g1);
	font-weight:            bold;
	user-select:            none;
}

.zen_expand_icon:hover {
	color:                  var(--theme_ln);
}

.zen_data_text {
	user-select:            text;
	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
	font-size:				13px;
}

/* toolbar ------------------------------------------------------------------ */

.zen_toolbar {
	display:			flex;
	margin-top:			0.5em;
	margin-bottom:		0.6em;
	font-size:			13px;

	> div {
		display:		flex;
		align-items:	center;
	}

	> div > .zen_toolbar_sep {
		color:			var(--theme_g2);
	}

	> div:last-child {
		margin-left:	auto;
	}

	> div > div {
		padding-right:	0.7em;
	}

	> div:last-child > :last-child {
		padding-right:	0;
	}

	&.zen_toolbar_inline {
		margin:			unset;
	}
}


/* modal -------------------------------------------------------------------- */

.zen_modal {
	position:					fixed;
	z-index:					1;
	top:						0;
	left:						0;
	width:						100%;
	height:						100%;
	display:					flex;
	justify-content:			center;
	align-items:				center;
	backdrop-filter:			blur(5px);

	.zen_modal_bg {
		position:				absolute;
		z-index:				-1;
		top:					0;
		left:					0;
		width:					100%;
		height:					100%;
		background:				var(--theme_g0);
		opacity:				0.4;
	}

	> div {
		border-radius:			6px;
		background-color:		var(--theme_g3);
		border:					1px solid var(--theme_g2);
		opacity:				1.0;
		width:					35em;
		padding:				0em 2em 2em 2em;
	}

	> div > div {
		text-align:				center;
	}

	.zen_modal_title {
		font-size:				16px;
		font-weight:			600;
		border-bottom:			1px solid var(--theme_g2);
		padding:				1.2em 0em 0.5em 0em;
		color:					var(--theme_bright);
	}

	.zen_modal_buttons {
		display:				flex;
		justify-content:		center;
		padding-bottom:			0em;

	> div {
			margin:				0em 1em 0em 1em;
			padding:			10px 16px;
			align-content:		center;
			border-radius:		6px;
			background-color:	var(--theme_p4);
			border:				1px solid var(--theme_g2);
			width:				6em;
			cursor:				pointer;
			font-weight:		500;
			transition:			background 0.15s;
		}

		> div:hover {
			background-color:	var(--theme_p3);
		}
	}

	.zen_modal_message {
		padding:				2em;
		min-height:				8em;
		align-content:			center;
	}
}

/* progress bar ------------------------------------------------------------- */

.zen_progressbar {
	position:				absolute;
	top:					0;
	left:					0;
	width:					100%;
	height:					4px;
	border-radius:			2px;
	overflow:				hidden;

	> div:first-of-type {
		/* label */
		padding:			0.3em;
		padding-top:		8px;
		background-color:	var(--theme_g3);
		width:				max-content;
		font-size:			12px;
		color:				var(--theme_g1);
	}

	> div:last-of-type {
		/* bar */
		position:			absolute;
		top:				0;
		left:				0;
		width:				0%;
		height:				100%;
		background-color:	var(--theme_p0);
		transition:			width 0.3s ease;
	}

	> div:nth-of-type(2) {
		/* bg */
		position:			absolute;
		top:				0;
		left:				0;
		width:				100%;
		height:				100%;
		background-color:	var(--theme_g3);
	}
}

/* crumbs ------------------------------------------------------------------- */

#crumbs {
	display:			flex;
	position:			relative;
	top:				-0.5em;
	font-size:			13px;
	color:				var(--theme_g1);

	> div {
		padding-right:	0.5em;
	}

	> div:nth-child(odd)::after {
		content:		"/";
		color:			var(--theme_g2);
		padding-left:	0.5em;
	}
}

/* banner ------------------------------------------------------------------- */

zen-banner {
	margin-bottom:		24px;
}

/* error -------------------------------------------------------------------- */

#error {
	position:				fixed;
	bottom:					0;
	z-index:				1;
	color:					var(--theme_g0);
	background-color:		var(--theme_er);
	padding:				12px 20px 16px 20px;
	width:					100%;
	border-top:				1px solid var(--theme_g2);
	display:				flex;
	gap:					16px;
	align-items:			center;
	font-size:				13px;

	> div:nth-child(1) {
		font-size:			24px;
		font-weight:		bold;
		color:				var(--theme_fail);
	}

	> div:nth-child(2) > pre:nth-child(2) {
		margin-top:			4px;
		font-size:			12px;
		color:				var(--theme_g1);
	}
}

/* stats -------------------------------------------------------------------- */

#stat .zen_proptable pre {
	float:			left;
	min-width:		15%;
}

/* sections ----------------------------------------------------------------- */

.zen_sector {
	position:			relative;
}

.dropall {
	position:			absolute;
	top:				16px;
	right:				0;
	font-size:			12px;
	margin:				0;
}

/* stats tiles -------------------------------------------------------------- */

.stats-tiles {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stats-tile {
	cursor:				pointer;
	transition:			border-color 0.15s, background 0.15s;
}

.stats-tile:hover {
	border-color:		var(--theme_p0);
	background:			var(--theme_p4);
}

.stats-tile-detailed {
	position:			relative;
}

.stats-tile-detailed::after {
	content:			"details \203A";
	position:			absolute;
	bottom:				12px;
	right:				20px;
	font-size:			11px;
	color:				var(--theme_g1);
	opacity:			0.6;
	transition:			opacity 0.15s;
}

.stats-tile-detailed:hover::after {
	opacity:			1;
	color:				var(--theme_p0);
}

.stats-tile-selected {
	border-color:		var(--theme_p0);
	background:			var(--theme_p4);
	box-shadow:			0 0 0 1px var(--theme_p0);
}

.stats-tile-selected::after {
	content:			"details \2039";
	opacity:			1;
	color:				var(--theme_p0);
}

.tile-metrics {
	display:			flex;
	flex-direction:		column;
	gap:				12px;
}

.tile-columns {
	display:			flex;
	gap:				24px;
}

.tile-columns > .tile-metrics {
	flex:				1;
	min-width:			0;
}

.tile-metric .metric-value {
	font-size:			16px;
}

.tile-metric-hero .metric-value {
	font-size:			28px;
}

/* start -------------------------------------------------------------------- */

#start {
	#version {
		color:		var(--theme_faint);
		text-align: center;
		font-size:	12px;
		margin-top:	24px;
	}
}

/* info --------------------------------------------------------------------- */

#info {
	.info-tiles {
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	}

	.info-tile {
		overflow:			hidden;
	}

	.info-props {
		display:			flex;
		flex-direction:		column;
		gap:				1px;
		font-size:			13px;
	}

	.info-prop {
		display:			flex;
		gap:				12px;
		padding:			4px 0;
		border-bottom:		1px solid var(--theme_border_subtle);
	}

	.info-prop:last-child {
		border-bottom:		none;
	}

	.info-prop-label {
		color:				var(--theme_g1);
		min-width:			140px;
		flex-shrink:		0;
		text-transform:		capitalize;
	}

	.info-prop-value {
		color:				var(--theme_bright);
		word-break:			break-all;
		margin-left:		auto;
		text-align:			right;
	}
}

/* entry -------------------------------------------------------------------- */

#entry {
	#datatable > div {
		> div:nth-child(3), > div:nth-child(4) {
			text-align: right;
		}
	}
}

/* tree --------------------------------------------------------------------- */

#tree {
	font-size:					13px;

	#tree_root > ul {
		margin-left:			0em;
	}
	ul {
		list-style-type:		none;
		padding-left:			0;
		margin-left:			1em;
	}
	li > div {
		display:				flex;
		border-bottom:			1px solid transparent;
		padding:				4px 6px;
		border-radius:			4px;
	}
	li > div > div[active] {
		text-transform:			uppercase;
		color:					var(--theme_p0);
		font-weight:			600;
	}
	li > div > div:nth-last-child(3) {
		margin-left:			auto;
	}
	li > div > div:nth-last-child(-n + 3) {
		font-size:				12px;
		width:					10em;
		text-align:				right;
		color:					var(--theme_g1);
		font-family:			'SF Mono', 'Cascadia Mono', Consolas, monospace;
	}
	li > div > div:nth-last-child(1) {
		width:					6em;
	}
	li > div:hover {
		background-color:		var(--theme_p4);
		border-bottom:			1px solid var(--theme_border_subtle);
	}
	li a {
		font-weight:			600;
	}
	li::marker {
		content:				"+";
		color:					var(--theme_g1);
	}
	li[expanded]::marker {
		content:				"-";
	}
	li[leaf]::marker {
		content:				"|";
	}
	li:last-child::marker {
		content:				"\\";
	}
}

/* map ---------------------------------------------------------------------- */

html:has(#map) {
	height: 100%;
	body, #container, #map {
		height:					100%;
	}
}
#map {
	#treemap {
		position:				relative;
		canvas {
			width:				100%;
		}
	}
}

/* ========================================================================== */
/* Shared classes for compute / dashboard pages                               */
/* ========================================================================== */

/* cards -------------------------------------------------------------------- */

.card {
	background:			var(--theme_g3);
	border:				1px solid var(--theme_g2);
	border-radius:		6px;
	padding:			20px;
}

.card-title {
	font-size:			14px;
	font-weight:		600;
	color:				var(--theme_g1);
	margin-bottom:		12px;
	text-transform:		uppercase;
	letter-spacing:		0.5px;
}

/* grid --------------------------------------------------------------------- */

.grid {
	display:			grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap:				20px;
	margin-bottom:		24px;
}

/* metrics ------------------------------------------------------------------ */

.metric-value {
	font-size:			36px;
	font-weight:		600;
	color:				var(--theme_bright);
	line-height:		1;
}

.metric-label {
	font-size:			12px;
	color:				var(--theme_g1);
	margin-top:			4px;
}

/* section titles ----------------------------------------------------------- */

.section-title {
	font-size:			20px;
	font-weight:		600;
	margin-bottom:		16px;
	color:				var(--theme_bright);
}

/* html tables (compute pages) ---------------------------------------------- */

table {
	width:				100%;
	border-collapse:	collapse;
	font-size:			13px;
}

th {
	text-align:			left;
	color:				var(--theme_g1);
	padding:			8px 12px;
	border-bottom:		1px solid var(--theme_g2);
	font-weight:		600;
	text-transform:		uppercase;
	letter-spacing:		0.5px;
	font-size:			11px;
}

td {
	padding:			8px 12px;
	border-bottom:		1px solid var(--theme_border_subtle);
	color:				var(--theme_g0);
}

tr:last-child td {
	border-bottom:		none;
}

.total-row td {
	border-top:			2px solid var(--theme_g2);
	font-weight:		600;
	color:				var(--theme_bright);
}

/* status badges ------------------------------------------------------------ */

.status-badge {
	display:			inline-block;
	padding:			2px 8px;
	border-radius:		4px;
	font-size:			11px;
	font-weight:		600;
}

.status-badge.active,
.status-badge.success {
	background:			color-mix(in srgb, var(--theme_ok) 15%, transparent);
	color:				var(--theme_ok);
}

.status-badge.inactive {
	background:			color-mix(in srgb, var(--theme_g1) 15%, transparent);
	color:				var(--theme_g1);
}

.status-badge.failure {
	background:			color-mix(in srgb, var(--theme_fail) 15%, transparent);
	color:				var(--theme_fail);
}

/* health dots -------------------------------------------------------------- */

.health-dot {
	display:			inline-block;
	width:				10px;
	height:				10px;
	border-radius:		50%;
	background:			var(--theme_g1);
}

.health-green {
	background:			var(--theme_ok);
}

.health-yellow {
	background:			var(--theme_warn);
}

.health-red {
	background:			var(--theme_fail);
}

/* inline progress bar ------------------------------------------------------ */

.progress-bar {
	width:				100%;
	height:				8px;
	background:			var(--theme_border_subtle);
	border-radius:		4px;
	overflow:			hidden;
	margin-top:			8px;
}

.progress-fill {
	height:				100%;
	background:			var(--theme_p0);
	transition:			width 0.3s ease;
}

/* stats row (label + value pair) ------------------------------------------- */

.stats-row {
	display:			flex;
	justify-content:	space-between;
	margin-bottom:		12px;
	padding:			8px 0;
	border-bottom:		1px solid var(--theme_border_subtle);
}

.stats-row:last-child {
	border-bottom:		none;
	margin-bottom:		0;
}

.stats-label {
	color:				var(--theme_g1);
	font-size:			13px;
}

.stats-value {
	color:				var(--theme_bright);
	font-weight:		600;
	font-size:			13px;
}

/* detail tag (inline badge) ------------------------------------------------ */

.detail-tag {
	display:			inline-block;
	padding:			2px 8px;
	border-radius:		4px;
	background:			var(--theme_border_subtle);
	color:				var(--theme_g0);
	font-size:			11px;
	margin:				2px 4px 2px 0;
}

/* timestamp ---------------------------------------------------------------- */

.timestamp {
	font-size:			12px;
	color:				var(--theme_faint);
}

/* inline error ------------------------------------------------------------- */

.error {
	color:				var(--theme_fail);
	padding:			12px;
	background:			var(--theme_er);
	border-radius:		6px;
	margin:				20px 0;
	font-size:			13px;
}

/* empty state -------------------------------------------------------------- */

.empty-state {
	color:				var(--theme_faint);
	font-size:			13px;
	padding:			20px 0;
	text-align:			center;
}

/* header layout ------------------------------------------------------------ */

.header {
	display:			flex;
	justify-content:	space-between;
	align-items:		center;
	margin-bottom:		24px;
}

/* history tabs ------------------------------------------------------------- */

.history-tabs {
	display:			flex;
	gap:				4px;
	background:			var(--theme_g4);
	border-radius:		6px;
	padding:			2px;
}

.history-tab {
	background:			transparent;
	border:				none;
	color:				var(--theme_g1);
	cursor:				pointer;
	font-size:			12px;
	font-weight:		600;
	padding:			4px 12px;
	border-radius:		4px;
	text-transform:		uppercase;
	letter-spacing:		0.5px;
}

.history-tab:hover {
	color:				var(--theme_g0);
}

.history-tab.active {
	background:			var(--theme_g2);
	color:				var(--theme_bright);
}