/*
Ability Esports — Table / Data-UI system.
/docs/UI-PATTERN-LIBRARY.md §23, consuming the --ae-data-* component tokens
already defined in tokens.css §Layer 3 (added in Stage 2, deliberately
unused in CSS until a real table existed to style). No live table exists
yet — this is Component Engine completion, ready for Stage 12/13
(standings/leaderboards). Responsive default is column-priority/card-row
transformation, not horizontal scroll — see .ae-table--scroll below for the
explicit opt-in fallback for genuinely dense data only.
*/

.ae-table-wrap {
	width: 100%;
}

.ae-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ae-font-body);
}

.ae-table thead th {
	background: var(--ae-data-header-bg);
	font-size: var(--ae-data-header-font);
	font-weight: var(--ae-data-header-weight);
	letter-spacing: var(--ae-data-header-tracking);
	text-transform: uppercase;
	color: var(--ae-color-text-secondary);
	text-align: left;
	padding: var(--ae-space-sm) var(--ae-space-md);
}

.ae-table thead th[aria-sort] {
	cursor: pointer;
}

.ae-table tbody tr {
	height: var(--ae-data-row-height);
	border-bottom: var(--ae-data-row-border);
}

.ae-table tbody tr.is-highlighted {
	background: var(--ae-color-surface-2);
}

.ae-table td {
	padding: var(--ae-space-sm) var(--ae-space-md);
	color: var(--ae-color-text-primary);
}

.ae-table td[data-numeric] {
	font-family: var(--ae-data-cell-numeric-font);
	font-variant-numeric: var(--ae-data-cell-numeric-variant);
	text-align: right;
}

/* Explicit opt-in fallback for genuinely dense tables (10+ columns) — never the default. */
.ae-table--scroll {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Card-per-row transformation for mobile — opt in per table via this modifier when priority-column reduction isn't enough. */
@media (max-width: 767px) {
	.ae-table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.ae-table--stack,
	.ae-table--stack tbody,
	.ae-table--stack tr,
	.ae-table--stack td {
		display: block;
		width: 100%;
	}

	.ae-table--stack tr {
		height: auto;
		padding-block: var(--ae-space-sm);
	}

	.ae-table--stack td {
		display: flex;
		justify-content: space-between;
		gap: var(--ae-space-md);
		padding-block: var(--ae-space-xs);
	}

	.ae-table--stack td::before {
		content: attr(data-label);
		font-weight: var(--ae-weight-medium);
		color: var(--ae-color-text-secondary);
	}
}