.container {
	padding: 1.5rem 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.historyHeader {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.historyHeader h1 {
	margin: 0;
}

.wsStatus {
	font-size: 0.85em;
	color: #777;
}

.wsStatus.wsConnected {
	color: #22a722;
}

.wsStatus.wsDisconnected {
	color: #c0392b;
}

#historyTableWrapper {
	overflow-x: auto;
}

#historyTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

#historyTable th,
#historyTable td {
	padding: 0.35rem 0.7rem;
	text-align: left;
	border-bottom: 1px solid #eee;
}

#historyTable th {
	background: #f5f5f5;
	font-weight: 600;
	border-bottom: 2px solid #ccc;
}

.colTimestamp {
	white-space: nowrap;
}

.colAttribute {
	min-width: 8rem;
}

.colValue {
	text-align: right;
	min-width: 5rem;
}

.colDiff {
	text-align: right;
	min-width: 5rem;
}

.colUpdater {
	min-width: 8rem;
}

/* First row of each event group gets a thicker top border */
tr.eventFirstRow td {
	border-top: 2px solid #ccc;
}

/* Diff colors */
.diffPositive {
	color: #22a722;
}

.diffNegative {
	color: #c0392b;
}

.diffNeutral {
	color: inherit;
}

/* New-entry highlight animation */
@keyframes newEntryHighlight {
	from {
		background-color: #d4f0d4;
	}
	to {
		background-color: transparent;
	}
}

.newEntry {
	animation: newEntryHighlight 1.2s ease-out forwards;
}

.historyMessage {
	color: #666;
	margin-top: 1rem;
}