/* Data Table component (`[lpos_table]`, includes/Components/DataTable.php).
   Token-driven glass HUD list: sticky head row (title + pager), a single frosted panel body
   holding a real <table> (zebra rows, right-aligned numeric cells, status pills), paginated to
   fit the panel -- never a scrollbar. Mirrors the Archive Card Grid's paginate-not-scroll recipe
   (console-tokens.css `.lpos-c-archive-grid*`) with the component's own BEM classes so it stays
   fully self-contained. 100% var(--lpos-*) -- every fallback matches that token's :where(:root)
   canon value (console-tokens.css lines ~37-180); zero raw hex/px/rgba outside var()/calc(). */

.lpos-c-table {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-gap, 12px);
	min-height: 0;
	height: 100%;
	flex: 1 1 auto;
	box-sizing: border-box;
	overflow: hidden;
}

/* ---- head row: title left, pager cluster top-right (same slot pattern as the archive grid) ---- */
.lpos-c-table__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpos-gap, 12px);
	min-height: var(--lpos-titlebar-h, 64px);
}
.lpos-c-table__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.lpos-c-table__title h2 {
	margin: 0;
	font: 700 var(--lpos-text-md, 17px) / 1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, #EAF2FB);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lpos-c-table__empty {
	margin: 0;
	padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px);
	color: var(--lpos-muted, #A8B2C7);
	font: 400 var(--lpos-text-sm, 14px) / 1.4 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
}

/* pager -- inherits .lpos-c-subpanel/.lpos-c-subpanel--cluster/.lpos-c-icon-btn chrome from
   console-tokens.css; these two classes size/center the info readout only. */
.lpos-c-table__pager {
	flex: 0 0 auto;
	align-self: center;
}
.lpos-c-table__pageinfo {
	font: 600 var(--lpos-text-sm, 14px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, #EAF2FB);
	min-width: 3.5ch;
	text-align: center;
	padding: 0 var(--lpos-space-xs, 4px);
	white-space: nowrap;
}
.lpos-c-table__pagesep {
	color: var(--lpos-muted, #A8B2C7);
}

/* ---- body panel: one frosted glass card holding the table, fixed height inside its grid cell,
   overflow hidden -- pagination (not scrolling) resolves any row overflow (NO-SCROLLBAR law). ---- */
.lpos-c-table__body {
	flex: 1 1 auto;
	min-height: 0;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* glass fill: console-tokens.css (one canonical rule) */
	border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent);
	border-radius: var(--lpos-radius-panel, 10px);
}

.lpos-c-table__grid {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

/* sticky head row: pinned to the top of the body panel (never itself paginated/hidden) */
.lpos-c-table__thead {
	position: sticky;
	top: 0;
	z-index: 1;
}
.lpos-c-table__thead tr {
	background: var(--lpos-glass-2, rgba(255,255,255,0.055));
}
.lpos-c-table__thead .lpos-c-table__cell {
	font: 600 var(--lpos-text-xs, 13px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
	letter-spacing: var(--lpos-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lpos-muted, #A8B2C7);
	padding: var(--lpos-space-sm, 8px) var(--lpos-panel-pad, 12px);
	border-bottom: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent);
	white-space: nowrap;
}

.lpos-c-table__tbody .lpos-c-table__cell {
	padding: var(--lpos-space-sm, 8px) var(--lpos-panel-pad, 12px);
	font: 400 var(--lpos-text-sm, 14px) / 1.3 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, #EAF2FB);
	border-bottom: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-ink, #EAF2FB) 8%, transparent);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 0; /* forces the ellipsis to respect the column's computed width instead of forcing table growth */
}
.lpos-c-table__row[hidden] {
	display: none;
}
/* zebra via a token-alpha wash, not a second literal color */
.lpos-c-table__row:nth-of-type(even) {
	background: var(--lpos-glass-1, rgba(255,255,255,0.035));
}
.lpos-c-table__row:last-child .lpos-c-table__cell {
	border-bottom: 0;
}

/* alignment modifiers -- shared by <th> and <td> */
.lpos-c-table__cell--left {
	text-align: left;
}
.lpos-c-table__cell--center {
	text-align: center;
}
.lpos-c-table__cell--right {
	text-align: right;
}

.lpos-c-table__value--num {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ---- status pill ---- */
/* CHIP-IN-PANEL EXCEPTION (documented 2026-08-10, JD's law pass -- the same exception media.php
   has carried since 2026-08-04, written down here for the Component sheets that lacked it).
   The one-panel law bans a PANEL inside a panel. It does not ban a CHIP inside a panel: a small
   round or pill-shaped marker that carries its own background/border to read as a distinct token
   ON a surface -- avatars, timeline nodes, status pills, calendar day cells, sample badges, stat
   icons. These are Assets with a shape, not panels: they never take the panel radius, never take
   the panel blur, and never contain other content. A law audit will flag them as "bare chrome
   inside chrome"; that is expected and correct. If one of these ever grows the panel radius plus
   backdrop-filter, it has stopped being a chip and the law applies again. */
.lpos-c-table__pill {
	display: inline-flex;
	align-items: center;
	font: 600 var(--lpos-text-xs, 13px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
	border-radius: var(--lpos-radius-control, 8px);
	color: var(--lpos-ink, #EAF2FB);
	background: color-mix(in srgb, var(--lpos-muted, #A8B2C7) var(--lpos-border-alpha-2, 40%), transparent);
	border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-muted, #A8B2C7) var(--lpos-border-alpha-3, 55%), transparent);
}
/* BRAND-ONLY retint (2026-08-03): tone pills read as an accent-intensity ladder, never a hue swap
   -- info < good < warn on the same --lpos-accent (opacity/lightness steps via the existing
   border-alpha ladder), bad/cancelled drops to the neutral muted tone with a dashed border (shape,
   not color, signals "void/inactive"). Every tenant's --lpos-accent repaints every tone. */
.lpos-c-table__pill--info {
	color: var(--lpos-accent, #00D4FF);
	background: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-1, 30%), transparent);
	border-color: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-2, 40%), transparent);
}
.lpos-c-table__pill--good {
	color: var(--lpos-ink, #EAF2FB);
	background: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-2, 40%), transparent);
	border-color: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-3, 55%), transparent);
}
.lpos-c-table__pill--warn {
	color: var(--lpos-ink, #EAF2FB);
	background: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-3, 55%), transparent);
	border-color: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-4, 65%), transparent);
}
.lpos-c-table__pill--bad {
	color: var(--lpos-muted, #A8B2C7);
	background: transparent;
	border-style: dashed;
	border-color: color-mix(in srgb, var(--lpos-muted, #A8B2C7) var(--lpos-border-alpha-3, 55%), transparent);
}
.lpos-c-table__pill--muted {
	color: var(--lpos-muted, #A8B2C7);
}

/* ---- "Sample records" chip -- same honest-demo convention as StatTile's __sample chip: a
   quiet, unmistakably-not-live-data label, never disguised as real content. ---- */
.lpos-c-table__sample {
	flex: 0 0 auto;
	align-self: flex-end;
	font: 600 var(--lpos-text-2xs, 12px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
	letter-spacing: var(--lpos-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lpos-muted, #A8B2C7);
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
}

/* ---- responsive: fewer columns show comfortably; on narrow panels drop the least-critical
   text-heavy column (date) rather than truncating everything into illegibility. Liquid per
   device, per JD's liquid-grid law -- whole-column drops, not partial squish. ---- */
@media (max-width: 640px) {
	.lpos-c-table__grid .lpos-c-table__cell:nth-child(2) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpos-c-table__row {
		transition: none;
	}
}