/* CS Table Widget */

.cs-table {
	width: 100%;
}

.cs-table__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1d1e46;
	margin: 0 0 1rem;
}

.cs-table__table {
	width: 100%;
	border-collapse: collapse;
}

.cs-table__th {
	background: var(--h-bg, #1d1e46);
	color: var(--h-color, #ffffff);
	font-size: var(--h-size, 16px);
	font-weight: 700;
	padding: 1rem;
}

.cs-table__td {
	font-size: var(--b-size, 16px);
	padding: 0.875rem 1rem;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: top;
}

.cs-table__tr:last-child .cs-table__td {
	border-bottom: 0;
}

.cs-table__td--bold {
	font-weight: 700;
}

/* Responsive: stack each row as a card below 780px. */
@media (max-width: 780px) {
	.cs-table__table,
	.cs-table__table tbody,
	.cs-table__tr,
	.cs-table__th,
	.cs-table__td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	/* Hide <thead> visually but keep it in the DOM for screen readers. */
	.cs-table__table thead {
		position: absolute;
		left: -9999px;
	}

	.cs-table__tr {
		border: 1px solid #e5e7eb;
		border-radius: 4px;
		padding: 1rem;
		margin-bottom: 1rem;
	}

	.cs-table__td {
		padding: 0;
		border: 0;
		text-align: left !important;
	}

	/* First cell of each row acts as the card heading. */
	.cs-table__td:first-child {
		font-size: 1.2em;
		font-weight: 700;
		margin-bottom: 0.5rem;
	}

	/* Non-first cells: prefix with the column header via data-label. */
	.cs-table__td:not(:first-child) {
		margin-top: 0.75rem;
	}
	.cs-table__td:not(:first-child)::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--h-bg, #1d1e46);
		margin-bottom: 0.25rem;
	}

	/* If the column had no header (empty data-label), skip the label row. */
	.cs-table__td[data-label=""]:not(:first-child)::before {
		content: none;
	}
}