/* Layout */
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: system-ui, Arial, sans-serif;
	background: #f7f7f7;
	color: #222;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Header */
#header {
	padding: 8px 16px 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
#description {
	font-size: 14px;
	max-width: 100%;
	margin-top: 4px;
}

/* Totals row */
#totals-row {
	position: relative;
	display: flex;
	align-items: center;
	padding: 4px 16px;
	font-size: 14px;
	overflow: hidden;
}
#totals-by-level {
	position: relative;
	flex: 1 1 auto;
	height: 32px;
	overflow: visible;
}
#totals-by-level .level-box {
	position: absolute;
	white-space: nowrap;
	background: #ffffff;
	border: 1px solid #ccc;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	cursor: default;
	transition: background 0.2s, border-color 0.2s;
}
#totals-by-level .level-box.active {
	background: #ffeaa7;
	border-color: #fdcb6e;
}

/* Tree */
#tree-wrapper {
	flex: 1;
	position: relative;
	overflow: hidden;
}
#tree-container {
	width: 100%;
	height: 100%;
}

/* Legend at bottom */
#legend {
	padding: 8px 16px;
	font-size: 12px;
	background: #fff;
	border-top: 1px solid #ddd;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.legend-item {
	margin-right: 16px;
}

/* Nodes and links */
.node rect {
	fill: #fff;
	stroke: #666;
	stroke-width: 1px;
}
.node text {
	font-size: 12px;
	pointer-events: none;
}
.link {
	fill: none;
	stroke: #999;
	stroke-width: 1.2px;
	opacity: 0.6;
}
.arrow {
	font-size: 12px;
	fill: #444;
	pointer-events: none;
}
.label {
	font-size: 12px;
	fill: #000;
	pointer-events: none;
}

/* Highlighted nodes at a particular depth */
.node.highlighted rect {
	stroke: #d35400;
	stroke-width: 2px;
}

/* Tooltip for right-click details */
.tooltip {
	position: absolute;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #aaa;
	padding: 8px 12px;
	font-size: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	/* allow interaction so scrollbars and clicks work */
	pointer-events: auto;
	z-index: 1000;
	line-height: 1.2;
	max-width: 380px;
	min-width: 260px;
	overflow: auto;
	word-break: break-word;
}

/* Control panel buttons */
#controls button {
	background: #fff;
	border: 1px solid #888;
	border-radius: 4px;
	font-size: 12px;
}
#controls button:hover {
	background: #f0f0f0;
}