/* ── Tables ───────────────────────────────────────────────────────── */
.table {
	color: var(--color-text-on-dark);
	border-color: rgba(255, 255, 255, 0.1);
}

.table thead th {
	background-color: var(--color-table-header);
	color: var(--color-text-on-dark);
	border-color: rgba(255, 255, 255, 0.2);
	font-weight: 600;
}

.table tbody tr {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

.table tbody tr:hover {
	background-color: rgba(84, 128, 192, 0.1);
}

.table tbody td {
	color: var(--color-text-on-dark);
	border-color: rgba(255, 255, 255, 0.1);
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.03);
}

.table-bordered {
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.table-bordered th,
.table-bordered td {
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Table rows in light context */
.table-head-light thead {
	background-color: var(--color-bg-subtle);
}

.table-row-light {
	background-color: var(--color-bg-elevated);
}

.tr-clickable {
	cursor: pointer;
}

.clickable-row {
	cursor: pointer;
}

.clickable-row:hover td {
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

.table-link {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: none;
}

.table-link:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.row-action-link {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: 700;
	white-space: nowrap;
}

/* ── table-light on a dark page ────────────────────────────────────
   Bootstrap's .table-light sets --bs-table-bg to #f8f9fa and the text
   to #000 through variables that outrank `.table thead th`, so a header
   marked table-light rendered as a near-white band on a dark page.
   Rebound to the same primary fill the plain thead already uses, so a
   header looks the same whether or not the markup adds table-light. */
.table-light,
.table > thead.table-light,
.table > thead.table-light > tr > th {
	--bs-table-color: var(--color-text-on-dark);
	--bs-table-bg: var(--color-table-header);
	--bs-table-border-color: rgba(255, 255, 255, 0.2);
	--bs-table-striped-bg: var(--color-table-header);
	--bs-table-striped-color: var(--color-text-on-dark);
	--bs-table-active-bg: var(--color-primary-hover);
	--bs-table-active-color: var(--color-text-on-dark);
	--bs-table-hover-bg: var(--color-primary-hover);
	--bs-table-hover-color: var(--color-text-on-dark);
	background-color: var(--color-table-header);
	color: var(--color-text-on-dark);
}