/*!
 * @be-partner-labs/ds v1.8.0 — components/table
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/table.min.css">
 * npm:  @import "@be-partner-labs/ds/components/table";
 * Docs: https://ds.bepartnerlabs.com/components/table/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --table-border:        cell border (default: 1px solid --bp-color-border)
	 * --table-radius:        wrapper border radius (default: --bp-radius-lg)
	 * --table-background:            row background (default: --bp-color-bg)
	 * --table-background-alt:        striped row background (default: --bp-color-bg-subtle)
		 * --table-background-head:       header background (default: --bp-color-bg-subtle)
	 * --table-sort-color:    sort icon active color (default: --bp-primary)
	 * --table-padding:       cell padding (default: --bp-space-3 --bp-space-4)
	 */

	/* ─── Scroll wrapper ─────────────────────────────────────── */
	.bp-table-wrap {
		--_border: var(--table-border, 1px solid var(--bp-color-border));
		--_radius: var(--table-radius, var(--bp-radius-lg));

		overflow-x: auto;
		border: var(--_border);
		border-radius: var(--_radius);
	}

	/* ─── Table ──────────────────────────────────────────────── */
	.bp-table {
		--_background: var(--table-background, var(--bp-color-bg));
		--_background-alt: var(--table-background-alt, var(--bp-color-bg-subtle));
		--_background-head: var(--table-background-head, var(--bp-color-bg-subtle));
		--_sort-color: var(--table-sort-color, var(--bp-primary));
		--_padding: var(--table-padding, var(--bp-space-3) var(--bp-space-4));

		width: 100%;
		border-collapse: collapse;
		font-size: var(--bp-text-sm);
		background-color: var(--_background);
	}

	/* ─── Header ─────────────────────────────────────────────── */
	.bp-table thead {
		background-color: var(--_background-head);
	}

	.bp-table th {
		padding: var(--_padding);
		text-align: start;
		font-weight: var(--bp-font-semibold);
		color: var(--bp-color-text-muted);
		white-space: nowrap;
		border-bottom: var(--_border);
	}

	/* ─── Sortable headers ───────────────────────────────────── */
	.bp-table th[aria-sort] {
		cursor: pointer;
		user-select: none;
	}

	.bp-table th[aria-sort]:hover {
		color: var(--bp-color-text);
	}

	.bp-table th[aria-sort]::after {
		content: " ↕" / "";
		opacity: 0.4;
		font-size: 0.75em;
	}

	.bp-table th[aria-sort="ascending"]::after {
		content: " ↑" / "";
		opacity: 1;
		color: var(--_sort-color);
	}

	.bp-table th[aria-sort="descending"]::after {
		content: " ↓" / "";
		opacity: 1;
		color: var(--_sort-color);
	}

	/* ─── Body ───────────────────────────────────────────────── */
	.bp-table td {
		padding: var(--_padding);
		border-bottom: var(--_border);
		color: var(--bp-color-text);
		vertical-align: middle;
	}

	.bp-table tbody tr:last-child td {
		border-bottom: none;
	}

	/* ─── Hover ──────────────────────────────────────────────── */
	.bp-table tbody tr:hover td {
		background-color: var(--table-background, var(--bp-color-bg-subtle));
	}

	/* ─── Striped variant ────────────────────────────────────── */
	.bp-table--striped tbody tr:nth-child(even) td {
		background-color: var(--_background-alt);
	}

	/* ─── Selected row ───────────────────────────────────────── */
	.bp-table tbody tr[aria-selected="true"] td {
		background-color: color-mix(in srgb, var(--bp-primary) 8%, transparent);
	}

	/* ─── Numeric column ─────────────────────────────────────── */
	.bp-table .bp-table__num {
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	/* ─── Empty state ────────────────────────────────────────── */
	.bp-table__empty {
		text-align: center;
		color: var(--bp-color-text-muted);
		padding-block: var(--bp-space-8);
	}
}