body {
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px; /* Add some padding */
}

h1,
h2 {
	text-align: center;
	width: 100%;
}

/* --- Responsive Layout --- */
#mainLayoutContainer {
	display: flex;
	flex-wrap: wrap; /* Allow columns to stack on narrow screens */
	justify-content: center; /* Center columns if space allows */
	gap: 20px; /* Space between columns */
	width: 100%;
	max-width: 1400px; /* Max overall width */
}

.simulation-column,
.data-column {
	flex: 1 1 610px; /* Grow, Shrink, Base size (canvas width + padding/border) */
	min-width: 300px; /* Prevent columns from becoming too narrow */
	display: flex;
	flex-direction: column;
	gap: 15px; /* Space between items within a column */
}

/* --- Adjust container widths --- */
.controls {
	/* Style as before, width will be determined by column */
	margin-bottom: 0; /* Remove bottom margin if gap handles spacing */
	padding: 10px;
	border: 1px solid #eee;
}
.simulation-container {
	/* width: 603px; /* Fixed width previously */
	width: 100%; /* Take full width of its column */
	max-width: 603px; /* Optional: Prevent canvas getting huge */
	height: auto; /* Allow height to adjust */
	aspect-ratio: 1 / 1; /* Maintain square shape */
	border: 1px solid #ccc;
	margin: 0 auto; /* Center if max-width is applied */
}
#simulationCanvas {
	display: block;
	width: 100%; /* Fill container */
	height: 100%; /* Fill container */
}

.table-container,
#histogramContainer {
	width: 100%; /* Take full width of their column */
	/* max-width: 600px; /* Removed, let column control width */
}

/* --- Table Styles --- */
.table-container h2,
#histogramContainer h2 {
	margin-top: 0;
}
.table-scroll-wrapper {
	/* Style as before */
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid #ccc;
}
#agentTable {
	/* Style as before */
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}
#agentTable th,
#agentTable td {
	/* Style as before */
	border: 1px solid #ddd;
	padding: 4px 8px;
	text-align: right;
	white-space: nowrap; /* Prevent text wrapping in cells */
}
#agentTable th {
	/* Style as before */
	background-color: #f2f2f2;
	position: sticky;
	top: 0;
	z-index: 1;
}
#agentTable td:first-child {
	/* Agent ID */
	text-align: left;
}
#agentTable tbody tr:nth-child(even) {
	/* Style as before */
	background-color: #f9f9f9;
}
#agentTable tbody tr.selected-row {
	background-color: #ffffbb !important; /* Light yellow background, !important overrides zebra striping */
	font-weight: bold; /* Optional: make text bold */
}

/* --- Sortable Table Header Styles --- */
.sortable-header {
	cursor: pointer;
	user-select: none; /* Prevent text selection on click */
	position: relative; /* For positioning the indicator */
}
.sortable-header:hover {
	background-color: #e0e0e0;
}
.sort-indicator {
	display: inline-block;
	width: 1em; /* Reserve space */
	margin-left: 5px;
	font-size: 0.8em;
	/* Icons will be added via ::after pseudo-element */
}
.sortable-header.sort-asc .sort-indicator::after {
	content: '▲'; /* Up arrow */
}
.sortable-header.sort-desc .sort-indicator::after {
	content: '▼'; /* Down arrow */
}