/**
 * Mobile table card layout — add class at-table--cards-md to tables.
 * Cells need data-th="Column label" for row labels.
 */

@media (max-width: 768px) {
	.at-table--cards-md thead,
	table.at-table--cards-md thead,
	.data-table.st-table-cards-md thead,
	table.data-table.st-table-cards-md thead,
	.villa-cs-table.st-table-cards-md thead,
	.tp-bc-history-table.at-table--cards-md thead,
	.tp-cs-overview-table.at-table--cards-md thead {
		display: none;
	}

	.at-table--cards-md tbody,
	table.at-table--cards-md tbody,
	.data-table.st-table-cards-md tbody,
	table.data-table.st-table-cards-md tbody,
	.villa-cs-table.st-table-cards-md tbody,
	.tp-bc-history-table.at-table--cards-md tbody,
	.tp-cs-overview-table.at-table--cards-md tbody {
		display: block;
	}

	.at-table--cards-md tbody tr,
	table.at-table--cards-md tbody tr,
	.data-table.st-table-cards-md tbody tr,
	table.data-table.st-table-cards-md tbody tr,
	.villa-cs-table.st-table-cards-md tbody tr,
	.tp-bc-history-table.at-table--cards-md tbody tr,
	.tp-cs-overview-table.at-table--cards-md tbody tr {
		display: block;
		margin-bottom: var(--space-3);
		padding: var(--space-3);
		background: var(--surface-elevated);
		border: 1px solid var(--border-default);
	}

	.at-table--cards-md tbody td,
	table.at-table--cards-md tbody td,
	.data-table.st-table-cards-md tbody td,
	table.data-table.st-table-cards-md tbody td,
	.villa-cs-table.st-table-cards-md tbody td,
	.tp-bc-history-table.at-table--cards-md tbody td,
	.tp-cs-overview-table.at-table--cards-md tbody td {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-2) 0;
		border: none;
		white-space: normal;
		text-align: right;
	}

	.at-table--cards-md tbody td::before,
	table.at-table--cards-md tbody td::before,
	.data-table.st-table-cards-md tbody td::before,
	table.data-table.st-table-cards-md tbody td::before,
	.villa-cs-table.st-table-cards-md tbody td::before,
	.tp-bc-history-table.at-table--cards-md tbody td::before,
	.tp-cs-overview-table.at-table--cards-md tbody td::before {
		content: attr(data-th);
		font-size: var(--text-sm);
		font-weight: var(--weight-semibold);
		color: var(--text-secondary);
		text-align: left;
		flex: 1 1 40%;
		min-width: 0;
	}

	.at-table--cards-md tbody td[data-th=""],
	table.at-table--cards-md tbody td:not([data-th])::before,
	.data-table.st-table-cards-md tbody td[data-th=""],
	table.data-table.st-table-cards-md tbody td:not([data-th])::before,
	.villa-cs-table.st-table-cards-md tbody td[data-th=""],
	.villa-cs-table.st-table-cards-md tbody td:not([data-th])::before,
	.tp-bc-history-table.at-table--cards-md tbody td[data-th=""],
	.tp-bc-history-table.at-table--cards-md tbody td:not([data-th])::before,
	.tp-cs-overview-table.at-table--cards-md tbody td[data-th=""],
	.tp-cs-overview-table.at-table--cards-md tbody td:not([data-th])::before {
		content: none;
	}

	#apAllScrollTop,
	#apScrollTop,
	#apSubmittedScrollTop,
	#apIssuedScrollTop,
	#purchasingScrollTop,
	.ap-scroll-top,
	.at-table-scroll-top {
		display: none !important;
	}
}