.container {
	margin-top: var(--s-4);
	width: 100%;
	max-height: 600px;
	overflow: auto;
	align-self: stretch;
}

.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--font-xs);
	text-align: left;
}

.table tbody tr:hover {
	background-color: var(--color-bg-high);
}

.table thead th {
	padding: var(--s-2);
}

.table tbody td {
	padding: var(--s-2) var(--s-3);
	border-bottom: 1px solid var(--color-border);
}

.table tbody tr:first-child td {
	border-top: 1px solid var(--color-border);
}

.thead {
	position: sticky;
	top: 0;
	z-index: 1;
}

.thead th {
	background-color: var(--color-bg);
}

.paramHeader {
	min-width: 180px;
}

.weaponHeader {
	min-width: 90px;
	padding: var(--s-2);
	text-align: center;
}

.weaponHeaderContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-1);
}

.weaponName {
	font-size: var(--font-2xs);
	max-width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.currentWeapon {
	background-color: var(--color-theme-low);
}

.categoryHeader {
	background-color: var(--color-bg-high);
	font-weight: var(--weight-bold);
	font-size: var(--font-2xs);
	letter-spacing: 0.5px;
	padding: var(--s-1-5) var(--s-2);
}

.paramName {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	font-size: var(--font-2xs);
	min-width: 180px;
}

.expandableRow .paramName {
	cursor: pointer;
}

.expandableRow .paramName:hover {
	background-color: var(--color-bg-high);
}

.paramNameText {
	flex: 1;
}

.historyIndicator {
	display: flex;
	align-items: center;
	color: var(--color-accent);
}

.paramCell {
	font-size: var(--font-2xs);
	vertical-align: top;
	min-width: 90px;
}

.cellContent {
	display: flex;
	align-items: center;
	gap: var(--s-1);
}

.currentValue {
	font-variant-numeric: tabular-nums;
}

.historyBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding-inline: var(--s-0-5);
	border-radius: var(--radius-full);
	background-color: var(--color-accent-low);
	color: var(--color-accent);
	font-size: var(--font-2xs);
	font-weight: var(--weight-bold);
}

.noValue {
	color: var(--color-text-high);
}

.historyList {
	margin-top: var(--s-1);
	display: flex;
	flex-direction: column;
	gap: var(--s-0-5);
	font-size: var(--font-2xs);
	border-top: 1px solid var(--color-border);
	padding-top: var(--s-1);
}

.historyItem {
	display: flex;
	justify-content: space-between;
	gap: var(--s-2);
}

.historyVersion {
	color: var(--color-text-high);
}

.historyValue {
	font-variant-numeric: tabular-nums;
	color: var(--color-accent);
	font-weight: var(--weight-semi);
}