/* Keeps the TN9400 server web UI identity (slate masthead, light sidebar, light-blue selection)
   with a lighter, more spacious treatment: system font, soft borders, rounded controls, focus rings. */
:root {
	--masthead: #3b4048;
	--masthead-2: #4a5059;
	--statusbar: #f4f5f7;
	--sidebar: #f7f8fa;
	--sidebar-edge: #e3e5e9;
	--accent: #2f6fb5;
	--accent-soft: #e7f0fa;
	--selected: #d6e8fb;
	--title-bar: #f7f8fa;
	--rule: #e3e5e9;
	--rule-strong: #cfd3d9;
	--grid: #eef0f2;
	--bg: #ffffff;
	--text: #1d2127;
	--text-2: #3f4650;
	--heading: #1d2127;
	--muted: #6b7380;
	--button: #ffffff;
	--button-hover: #f2f4f6;
	--button-border: #cfd3d9;
	--disabled: #a3a9b2;
	--ok: #2e8a3e;
	--fail-bg: #fdf0ef;
	--warn-bg: #fdf6ea;
	--ok-bg: #eff7f0;
	--fail: #b42318;
	--focus: 0 0 0 3px rgba(47, 111, 181, .22);
	--radius: 6px;
	--shadow: 0 1px 2px rgba(16, 24, 40, .05);
	--font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	--mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
	--row: 26px;
	color-scheme: light;
}

* { box-sizing: border-box; }

/* Elements that set their own display (e.g. the drop overlay's grid) must still hide. */
[hidden] { display: none !important; }

html, body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text);
	font: 13.5px/1.4 var(--font);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

button, input, select {
	font: inherit;
	color: inherit;
}

button {
	height: 28px;
	padding: 0 12px;
	border: 1px solid var(--button-border);
	border-radius: var(--radius);
	background: var(--button);
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: background .12s, border-color .12s;
}

button:hover:not(:disabled) { background: var(--button-hover); border-color: #b9bfc8; }
button:disabled { color: var(--disabled); border-color: var(--rule); box-shadow: none; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--accent); }

input:not([type=checkbox]), select {
	height: 28px;
	padding: 0 8px;
	border: 1px solid var(--button-border);
	border-radius: var(--radius);
	background: #fff;
	transition: border-color .12s, box-shadow .12s;
}

input:not([type=checkbox]):hover, select:hover { border-color: #b9bfc8; }
input::placeholder { color: #9aa1ab; }

input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
input.invalid { border-color: var(--fail); }
.muted { color: var(--muted); }

/* ------------------------------------------------------------ masthead + status bar */

.masthead {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 20px;
	background: var(--masthead);
	color: #fff;
	flex: none;
}

.masthead h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.masthead .logo { max-height: 28px; }
.masthead-right { margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, .7); }

.statusbar {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 32px;
	padding: 4px 20px;
	background: var(--statusbar);
	border-bottom: 1px solid var(--rule);
	color: var(--text-2);
	font-size: 12.5px;
	flex: none;
}

.status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status.error { color: var(--fail); white-space: normal; }

.progress { width: 180px; height: 6px; margin-left: auto; border-radius: 3px; background: var(--rule); overflow: hidden; flex: none; }
.progress > div { height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .15s; }
.progress.busy > div { width: 35% !important; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* ------------------------------------------------------------ sidebar */

.layout { flex: 1; min-height: 0; display: flex; }

.sidebar {
	width: 232px;
	flex: none;
	overflow-y: auto;
	padding: 12px 10px;
	background: var(--sidebar);
	border-right: 1px solid var(--sidebar-edge);
}

.nav-group { margin-bottom: 14px; }
.nav-group h2 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	padding: 0 6px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* Chevron that points down when expanded, right when collapsed. */
.collapse {
	position: relative;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: none;
	box-shadow: none;
}

.collapse:hover:not(:disabled) { background: var(--rule); }
.collapse::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	width: 5px;
	height: 5px;
	border-right: 1.6px solid var(--muted);
	border-bottom: 1.6px solid var(--muted);
	transform: rotate(45deg);
	transition: transform .15s;
}
.collapse[aria-expanded=false]::before { transform: translate(-1px, 2px) rotate(-45deg); }
.nav-group.collapsed .nav-items { display: none; }

.nav-items { display: flex; flex-direction: column; gap: 1px; }

.nav-items > button {
	display: block;
	width: 100%;
	height: auto;
	padding: 6px 10px 6px 28px;
	border: none;
	border-radius: var(--radius);
	background: none;
	box-shadow: none;
	color: var(--text-2);
	text-align: left;
	font-size: 13.5px;
}

.nav-items > button:hover:not(:disabled) { background: #eceef2; color: var(--text); }
.nav-items > button.active { background: var(--selected); color: #133f6e; font-weight: 600; }
.nav-items > button:disabled { color: var(--disabled); }

.nav-items.form { gap: 6px; padding: 4px 6px 0 28px; font-size: 13px; }
.nav-items.form label:not(.check) { color: var(--muted); font-size: 12px; }
.nav-items.form select { width: 100%; }
.nav-items.form .check { margin-top: 2px; }

/* ------------------------------------------------------------ content */

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--rule);
	flex: none;
}

.page-title {
	color: var(--heading);
	font-size: 19px;
	font-weight: 600;
	flex: none;
}

.bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 10px 20px;
	border-bottom: 1px solid var(--rule);
	flex: none;
}

/* The date range sits at the right of the page header rather than in its own bar. */
.page-head .bar.range { margin-left: auto; padding: 0; border: none; gap: 8px 12px; }

.bar.filters { background: var(--title-bar); }

.field { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-2); }

main { flex: 1; min-height: 0; position: relative; }
.tab { display: none; position: absolute; inset: 0; flex-direction: column; }
.tab.active { display: flex; }
.summary { padding: 7px 20px; color: var(--muted); border-bottom: 1px solid var(--rule); min-height: 32px; font-size: 12.5px; }
.summary:empty { display: none; }

.split { flex: 1; min-height: 0; display: flex; }
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pane.list { width: 620px; flex: none; }
.pane.list.narrow { width: 560px; }
.pane.detail { flex: 1; }

/* A 1px rule with a wider invisible grab area. */
.splitter { position: relative; width: 1px; flex: none; background: var(--rule-strong); cursor: col-resize; }
.splitter::before { content: ""; position: absolute; inset: 0 -4px; z-index: 1; }
.splitter:hover, .splitter:active { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.tabs { display: flex; align-items: flex-end; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--rule); background: var(--bg); flex: none; }
.tabs button {
	height: 36px;
	margin-bottom: -1px;
	padding: 0 10px;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--muted);
	font-weight: 500;
}
.tabs button:hover:not(:disabled) { background: transparent; color: var(--text); }
.tabs button.active { border-bottom-color: var(--accent); color: var(--text); font-weight: 600; }
.tabs .list-toggle { align-self: center; height: 24px; margin: 0 0 0 auto; padding: 0 10px; border: 1px solid var(--button-border); border-radius: var(--radius); font-size: 12px; }
.tabs .list-toggle:hover:not(:disabled) { background: var(--button-hover); }
.split.list-hidden > .pane.list, .split.list-hidden > .splitter { display: none; }

.header { padding: 8px 14px; border-bottom: 1px solid var(--grid); color: var(--text-2); font-size: 12.5px; flex: none; }
.subtab { display: none; flex: 1; min-height: 0; }
.detail-lines { margin: 0; padding: 6px 14px; max-height: 120px; overflow: auto; border-bottom: 1px solid var(--grid); background: #fafbfc; font: 12px/1.5 var(--mono); white-space: pre; flex: none; }
.subtab.active { display: flex; flex-direction: column; }
.scroll { overflow: auto; }
.fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.diagram { align-self: flex-start; padding: 4px; }
.diagram svg { display: block; }

/* Thin, unobtrusive scrollbars. */
.sidebar, .vt-body, .lines, .scroll, .charts, .ev-chart, .detail-lines { scrollbar-width: thin; scrollbar-color: #c9ced5 transparent; }

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

.vt { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 13px; }
.vt-head, .vt-row { display: grid; white-space: nowrap; }
.vt-head { background: var(--title-bar); border-bottom: 1px solid var(--rule-strong); color: var(--muted); font-size: 12px; font-weight: 600; flex: none; overflow: hidden; }
.vt-head > div { padding: 7px 8px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.vt-head > div + div { box-shadow: inset 1px 0 0 var(--grid); }
.vt-head > div:hover { background: #eceef2; color: var(--text); }
.vt-head > div.sorted { color: var(--text); }
.vt-head > div.sorted::after { content: " \25B2"; font-size: 8px; color: var(--accent); }
.vt-head > div.sorted.desc::after { content: " \25BC"; }
.vt-body { flex: 1; overflow: auto; position: relative; outline: none; }
.vt-spacer { position: relative; }
.vt-row { position: absolute; left: 0; height: var(--row); line-height: var(--row); border-bottom: 1px solid var(--grid); cursor: default; }
.vt-row > div { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
.vt-row.fail { background: var(--fail-bg); }
.vt-row.warn { background: var(--warn-bg); }
.vt-row.ok { background: var(--ok-bg); }
.vt-row.emerg { background: #fbe3e1; color: #8a1c13; font-weight: 600; }
.vt-row:hover { background: #f1f6fc; }
.vt-row.selected { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); }
.vt-empty { padding: 16px; color: var(--muted); }

/* ------------------------------------------------------------ log lines */

.lines-wrap { display: none; }
.lines-wrap.active { display: flex; }
.line-tools { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--grid); font-size: 12.5px; flex: none; }
.line-tools button { height: 26px; }
.lines { flex: 1; overflow: auto; font: 12px/1.55 var(--mono); padding: 6px 0; outline: none; background: #fcfcfd; }
.lines div { padding: 0 14px; white-space: pre; cursor: default; }
.lines div:hover { background: #f1f3f6; }
.lines div.warn { color: var(--fail); }
.lines div.sel { background: var(--selected); }

/* ------------------------------------------------------------ diagrams */

.diagram text { font-family: var(--font); }
.diagram .mono { font-family: var(--mono); }
.diagram .row-hit { fill: transparent; }
.diagram .row-hit:hover { fill: rgba(47, 111, 181, .09); }

/* ------------------------------------------------------------ charts */

.charts { flex: 1; padding: 16px 20px; background: var(--title-bar); }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px 12px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h3 { margin: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.card .sub { color: var(--muted); margin: 2px 0 6px; font-size: 12.5px; }
.legend { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 4px 0 6px; font-size: 12.5px; color: var(--text-2); }
.key { display: inline-flex; align-items: center; gap: 6px; }
.key i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.chart svg { display: block; width: 100%; }
.stats { border-collapse: collapse; margin: 6px 0 12px; background: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.stats th, .stats td { padding: 6px 12px; border-bottom: 1px solid var(--grid); text-align: right; }
.stats th { color: var(--muted); background: var(--title-bar); font-size: 12px; font-weight: 600; border-bottom-color: var(--rule-strong); }
.stats th:first-child, .stats td:first-child { text-align: left; }
h2.section { margin: 22px 0 10px; color: var(--text); font-size: 15px; font-weight: 600; }

/* ------------------------------------------------------------ visualization */

.viz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 16px; align-items: start; }
.viz-grid .card { margin: 0; min-width: 0; }
.viz-grid .card.wide { grid-column: 1 / -1; }
.viz .empty { padding: 10px 0; margin: 0; }
.key i.swatch, .donut-table i.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.viz svg .pick { cursor: pointer; }

.tiles { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.tile { flex: 1 1 150px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow); }
.tile-label { color: var(--muted); font-size: 12px; font-weight: 500; }
.tile-value { font-size: 24px; font-weight: 600; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tile-note { color: var(--muted); font-size: 12px; }

.hbars { display: grid; grid-template-columns: minmax(0, 44%) 1fr auto; gap: 2px 10px; margin-top: 6px; font-size: 13px; }
.hbar { display: contents; }
.hbar > span { padding: 3px 0; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { display: flex; align-items: center; }
.hbar-track i { display: block; height: 12px; border-radius: 0 4px 4px 0; }
.hbar-value { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hbar:hover > span { background: #f4f6f8; }
.hbar.pick > span { cursor: pointer; }

.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.donut { flex: none; }
.donut path { transition: opacity .12s; }
.donut-table { border-collapse: collapse; font-size: 13px; flex: 1; min-width: 200px; table-layout: fixed; }
.donut-table td { padding: 4px 6px; border-bottom: 1px solid var(--grid); }
.donut-table td:first-child { width: 22px; }
.donut-table td.num { text-align: right; width: 64px; font-variant-numeric: tabular-nums; }
.donut-table .donut-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-table tr:hover td { background: #f4f6f8; }

/* ------------------------------------------------------------ home */

.home { flex: 1; padding: 24px 28px 32px; }
.home > * { max-width: 1100px; }

.drop-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: auto;
	min-height: 190px;
	padding: 28px 20px;
	border: 2px dashed var(--rule-strong);
	border-radius: 14px;
	background: var(--title-bar);
	box-shadow: none;
	color: var(--text-2);
	text-align: center;
}
.drop-zone svg { color: var(--accent); margin-bottom: 4px; }
.drop-zone strong { font-size: 17px; font-weight: 600; color: var(--text); }
.drop-zone span { color: var(--muted); font-size: 13px; }
.drop-zone:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone:disabled { opacity: .6; }

.loaded .stats.files { width: 100%; }
.loaded .stats.files td:nth-child(2), .loaded .stats.files th:nth-child(2) { text-align: left; }
.loaded .stats.files td:first-child { font-family: var(--mono); font-size: 12px; word-break: break-all; }

.file-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.types-note { grid-column: 1 / -1; margin: -4px 0 2px; font-size: 12.5px; }
.ftype { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.ftype h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }
.ftype p { margin: 0; color: var(--text-2); font-size: 12.5px; }
.ftype code, .types-note code { padding: 0 4px; border-radius: 4px; background: #f1f3f6; font: 11.5px var(--mono); }

/* ------------------------------------------------------------ system timeline */

.tl-lanes { margin-bottom: 4px; }
.tl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; font-size: 13px; }
.tl-tools button { min-width: 32px; height: 26px; }
.tl-view { margin-left: 8px; }
.tl { position: relative; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; user-select: none; }
.tl canvas { display: block; }
.tl-axis { position: sticky; top: 0; z-index: 1; cursor: crosshair; border-bottom: 1px solid var(--rule); }
.tl-stack { position: relative; }
.tl-body { cursor: grab; }
.tl-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }

/* ------------------------------------------------------------ overlays */

.tooltip {
	position: fixed;
	z-index: 10;
	max-width: 720px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--rule-strong);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
	font: 12px/1.45 var(--mono);
	white-space: pre-wrap;
	pointer-events: none;
}

.drop-hint {
	position: fixed;
	inset: 12px;
	z-index: 20;
	display: grid;
	place-items: center;
	background: rgba(231, 240, 250, .88);
	border: 2px dashed var(--accent);
	border-radius: 14px;
	font-size: 19px;
	font-weight: 600;
	color: var(--accent);
	text-align: center;
	backdrop-filter: blur(2px);
}
.drop-hint small { font-size: 13px; font-weight: 400; color: var(--text-2); }

@media (max-width: 1100px) {
	.sidebar { width: 200px; }
}

@media (max-width: 900px) {
	.layout { flex-direction: column; }
	.sidebar { width: auto; max-height: 30vh; border-right: none; border-bottom: 1px solid var(--sidebar-edge); }
	.split { flex-direction: column; }
	.pane.list, .pane.list.narrow { width: auto; height: 40%; }
	.splitter { display: none; }
	.page-head .bar.range { margin-left: 0; }
}

/* ------------------------------------------------------------ repeater events */

.ev-chart { flex: none; max-height: 46%; overflow: auto; padding: 10px 20px 8px; border-bottom: 1px solid var(--rule); }
.ev-chart .empty { margin: 6px 0; }
.ev-chart-svg { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; user-select: none; }
.ev-svg { display: block; cursor: crosshair; font-family: var(--font); }
.ev-svg .pick { cursor: pointer; }
.ev-axis { font-size: 11px; fill: #8a909a; }
.ev-axis.strong { fill: #4b525c; font-weight: 600; }
.ev-head { font-size: 12px; font-weight: 600; fill: var(--text); }
.ev-sub { font-size: 11px; fill: #4b525c; }
.ev-lane { font-size: 11px; fill: var(--text-2); }
.ev-lane.node { fill: #4A3AA7; font-style: italic; }
.ev-state { font-size: 10px; fill: #fff; pointer-events: none; }
.checks { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; }
.ev-detail { flex: 1; min-height: 0; padding: 12px 16px; white-space: normal; font-size: 13px; }
.ev-detail h4 { margin: 2px 0 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.ev-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; }
.ev-detail dt { color: var(--muted); }
.ev-detail dd { margin: 0; }
.ev-detail pre { margin: 4px 0 12px; padding: 8px 10px; background: #fafbfc; border: 1px solid var(--grid); border-radius: var(--radius); font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.ev-detail .related div { padding: 1px 0; }
.ev-detail .related .t { color: var(--muted); margin-right: 8px; font-family: var(--mono); font-size: 12px; }
button.link { height: auto; border: none; background: none; box-shadow: none; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
button.link:hover:not(:disabled) { background: none; color: #1f5590; }