.unit-item, .role-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
}

.delete-x {
	color: red;
	cursor: pointer;
	font-weight: bold;
}

.delete-x:hover {
	color: darkred;
}

.add-unit, .add-role {
	margin-top: 8px;
	display: flex;
	gap: 4px;
}

.ld-table-container {
	display: grid;
	grid-template-columns: repeat(var(--col-count), minmax(0, 1fr));
	border: 1px solid #ccc;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.ld-table-row {
	display: contents;
}

.ld-table-cell {
	padding: 8px;
	border-bottom: 1px solid #ccc;
}

.ld-col-wide {
	grid-column: span 2;
}

.ld-col-narrow {
	grid-column: span 1;
}

.ld-cell-center {
	text-align: center;
}

.ld-fixed-last-col {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.bg-blue-500 {
	background-color: #3b82f6;
	color: white;
	padding: 4px 8px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.bg-red-500 {
	background-color: #ef4444;
	color: white;
	padding: 4px 8px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.bg-green-500 {
	background-color: #10b981;
	color: white;
	padding: 4px 8px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.bg-blue-500:hover { background-color: #2563eb; }
.bg-red-500:hover { background-color: #dc2626; }
.bg-green-500:hover { background-color: #059669; }