/*
 * Table recipe.
 *
 *   [data-table]                    → <table> root
 *   [data-table-header]             → <thead>
 *   [data-table-body]               → <tbody>
 *   [data-table-footer]             → <tfoot>
 *   [data-table-column-header]      → <th>
 *   [data-table-row]                → <tr> (body row)
 *   [data-table-cell]               → <td>
 *   [data-table-row-detail]         → full-width disclosure <tr>
 *   [data-table-row-detail-trigger] → toggle button (Button consumer)
 *
 * Wrapper element is provided by the eidos root: `<div data-table-root>`
 * absorbs `data-size` / `data-variant` / `data-color` / `data-block` /
 * `data-striped` / `data-hoverable` / `data-sticky-header` so the table
 * itself can stay clean `<table>` semantics.
 *
 * Sizes — xs..xl on the wrapper; cascades to row block-size, cell
 * padding and font-size.
 *
 * Variant `'surface' | 'outline' | 'ghost'` (ControlVariant).
 *   - surface: card chrome around the whole table
 *   - outline: border only, transparent background
 *   - ghost: no chrome
 *
 * Color cascades the accent for selected rows + sort indicator + focus.
 */

[data-table-root] {
	--_table-radius: var(--radius-md);
	--_table-row-block-size: var(--control-height-md);
	--_table-cell-px: var(--space-3);
	--_table-cell-py: var(--space-2);
	--_table-font-size: var(--font-size-sm);
	--_table-header-bg: var(--color-surface-subtle);
	--_table-row-hover-bg: var(--color-surface-overlay);
	--_table-row-striped-bg: var(--color-surface-subtle);
	--_table-divider: var(--color-border-default);
	--_table-accent: var(--color-primary-solid);
	--_table-accent-soft: var(--color-primary-element);

	position: relative;
	display: block;
	font-family: var(--font-ui);
	color: var(--color-content-primary);
	border-radius: var(--_table-radius);
	overflow: hidden;
}

[data-table-root][data-block] {
	inline-size: 100%;
}

/* ── Variant — surface (default) ─ */
[data-table-root][data-variant='surface'] {
	border: 1px solid var(--_table-divider);
	background: var(--color-surface-default);
}

[data-table-root][data-variant='outline'] {
	border: 1px solid var(--_table-divider);
	background: transparent;
}

[data-table-root][data-variant='ghost'] {
	border: 1px solid transparent;
	background: transparent;
}

/* ── Sizes ─ */
[data-table-root][data-size='xs'] {
	--_table-row-block-size: var(--control-height-xs);
	--_table-cell-px: var(--space-2);
	--_table-cell-py: var(--space-1);
	--_table-font-size: var(--font-size-xs);
}
[data-table-root][data-size='sm'] {
	--_table-row-block-size: var(--control-height-sm);
	--_table-cell-px: var(--space-2);
	--_table-cell-py: var(--space-1);
	--_table-font-size: var(--font-size-sm);
}
[data-table-root][data-size='lg'] {
	--_table-row-block-size: var(--control-height-lg);
	--_table-cell-px: var(--space-4);
	--_table-cell-py: var(--space-3);
	--_table-font-size: var(--font-size-md);
}
[data-table-root][data-size='xl'] {
	--_table-row-block-size: var(--control-height-xl);
	--_table-cell-px: var(--space-5);
	--_table-cell-py: var(--space-3);
	--_table-font-size: var(--font-size-lg);
}

/* ── Color cascades ─ */
[data-table-root][data-color='secondary'] {
	--_table-accent: var(--color-secondary-solid);
	--_table-accent-soft: var(--color-secondary-element);
}
[data-table-root][data-color='affirm'] {
	--_table-accent: var(--color-affirm-solid);
	--_table-accent-soft: var(--color-affirm-element);
}
[data-table-root][data-color='risk'] {
	--_table-accent: var(--color-risk-solid);
	--_table-accent-soft: var(--color-risk-element);
}
[data-table-root][data-color='threat'] {
	--_table-accent: var(--color-threat-solid);
	--_table-accent-soft: var(--color-threat-element);
}
[data-table-root][data-color='fulfill'] {
	--_table-accent: var(--color-fulfill-solid);
	--_table-accent-soft: var(--color-fulfill-element);
}
[data-table-root][data-color='loss'] {
	--_table-accent: var(--color-loss-solid);
	--_table-accent-soft: var(--color-loss-element);
}
[data-table-root][data-color='neutral'] {
	--_table-accent: var(--color-neutral-solid);
	--_table-accent-soft: var(--color-neutral-element);
}

/*
 * Scrolling region — only when consumer sets `maxHeight`. Pure CSS
 * overflow auto with overscroll containment so wheel scrolling inside
 * the table doesn't bubble to the page.
 */
[data-table-root][data-scrollable] {
	overflow: auto;
	overscroll-behavior: contain;
}

/*
 * Stable rows — reserve a vertical floor of `stableRows` row-heights
 * (plus the header). Keeps the wrapper height steady so the surrounding
 * layout (pagination, sticky footers, sibling cards) doesn't jump as
 * filters / pageSize change the visible row count. Ignored when the
 * wrapper is already capped by `maxHeight` (scroll region).
 *
 * The consumer sets `--_table-stable-rows` via inline style; the recipe
 * multiplies by `--_table-row-block-size` (already scaled by `data-size`)
 * and adds one row for the header.
 */
[data-table-root][data-stable-rows] {
	/*
	 * Real row block-size at render = `--_table-row-block-size` (control
	 * height, the centred content) + 2 × `--_table-cell-py` (cell vertical
	 * padding) + 1px (cell `border-block-end`). Sum × (rows + 1 header).
	 */
	min-block-size: calc(
		(var(--_table-row-block-size) + var(--_table-cell-py) * 2 + 1px)
		* (var(--_table-stable-rows, 0) + 1)
	);
}

[data-table-root][data-disabled] {
	opacity: 0.55;
	pointer-events: none;
}

/* ── Table element ─ */
[data-table] {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--_table-font-size);
	line-height: var(--leading-ui);
	color: inherit;
	caption-side: top;
}

/* ── Header (thead) ─ */
[data-table-header] {
	background: var(--_table-header-bg);
}

/*
 * Sticky header — when the wrapper is scrollable AND `stickyHeader` is on,
 * the `<th>` cells stick to the top of the wrapper. Position is set on
 * `<th>` (not `<thead>`) because `<thead>` is not a valid containing
 * block for `position: sticky` in legacy rendering paths.
 */
[data-table-root][data-sticky-header] [data-table-column-header] {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	background: var(--_table-header-bg);
}

/* ── ColumnHeader (th) ─ */
[data-table-column-header] {
	box-sizing: border-box;
	padding-block: var(--_table-cell-py);
	padding-inline: var(--_table-cell-px);
	text-align: start;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-content-primary);
	border-block-end: 1px solid var(--_table-divider);
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
}

[data-table-column-header][data-sortable] {
	cursor: pointer;
}

[data-table-column-header][data-sorted] {
	color: var(--_table-accent);
}

[data-table-column-header][data-pinned] {
	background: var(--_table-header-bg);
}

/* ── Body (tbody) ─ */
[data-table-body] [data-table-row] {
	background: var(--color-surface-default);
	transition: background var(--duration-fast) var(--ease-default);
}

[data-table-root][data-variant='ghost'] [data-table-body] [data-table-row] {
	background: transparent;
}

/* Striped — alternate body rows. Skip when ghost (no chrome). */
[data-table-root][data-striped]:not([data-variant='ghost'])
	[data-table-body]
	[data-table-row]:nth-of-type(even) {
	background: var(--_table-row-striped-bg);
}

/* Hoverable — row hover highlight. Drop when row is selected. */
[data-table-root][data-hoverable]
	[data-table-body]
	[data-table-row]:not([data-selected]):hover {
	background: var(--_table-row-hover-bg);
}

/* Selected row — accent tint. Overrides hover + striped. */
[data-table-body] [data-table-row][data-selected] {
	background: var(--_table-accent-soft);
	color: var(--color-content-primary);
}

/* Last row has no bottom divider — the wrapper border handles the edge. */
[data-table-body] [data-table-row]:last-of-type [data-table-cell] {
	border-block-end: 0;
}

/* ── Row (tr) ─ */
[data-table-row] {
	outline: none;
}

[data-table-row]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: -1px;
}

/* ── Cell (td) ─ */
[data-table-cell] {
	box-sizing: border-box;
	padding-block: var(--_table-cell-py);
	padding-inline: var(--_table-cell-px);
	border-block-end: 1px solid var(--_table-divider);
	vertical-align: middle;
	color: inherit;
}

/*
 * Pinned cells take the row's background so the sticky offset doesn't
 * reveal content behind them. Cascade from `data-pinned` on either the
 * cell or the header.
 */
[data-table-cell][data-pinned] {
	background: inherit;
}

/* ── Footer (tfoot) ─ */
[data-table-footer] {
	background: var(--_table-header-bg);
}

[data-table-footer] [data-table-cell] {
	font-weight: var(--font-weight-semibold, 600);
	border-block-end: 0;
	border-block-start: 1px solid var(--_table-divider);
}

/* ── RowDetail (disclosure) ─ */
[data-table-row-detail] {
	background: var(--color-surface-subtle);
}

[data-table-row-detail][data-state='closed'] {
	display: none;
}

[data-table-row-detail] > td {
	padding: var(--space-3) var(--_table-cell-px);
	border-block-end: 1px solid var(--_table-divider);
	color: var(--color-content-secondary);
}

/* ── SortButton (eidos helper) ─ */
[data-table-sort-trigger] {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	user-select: none;
	border-radius: var(--radius-sm);
}

[data-table-sort-trigger]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 2px;
}

[data-table-sort-trigger][data-sorted] {
	color: var(--_table-accent);
}

[data-table-sort-indicator] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1em;
	block-size: 1em;
	opacity: 0.55;
	transition: opacity var(--duration-fast) var(--ease-default);
}

[data-table-sort-trigger][data-sorted] [data-table-sort-indicator] {
	opacity: 1;
}