/* ==========================================================================
   Lawpath Louie 3.0 — Table Styling
   Depends on tokens declared in colors_and_type.css
   Use: <table class="lp-table">…</table>
        <table class="lp-table lp-table--striped">…</table>
        <table class="lp-table lp-table--compact">…</table>
        Wrap in <div class="lp-table-wrap">…</div> for scrolling + card chrome.
   ========================================================================== */
/* -------- Wrapper: paper-on-paper card with rounded clip -------- */
.lp-table-wrap {
	background: var(--surface-light0);
	border: 1px solid var(--outline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevation);
	overflow: hidden; /* clip rounded corners against table edges */
	width: 100%;
}

.lp-table-wrap--scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* -------- Optional toolbar above the table -------- */
.lp-table-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--outline);
	background: var(--surface-light0);
}

.lp-table-toolbar__title {
	font: var(--headline-small);
	color: var(--fg1);
}

.lp-table-toolbar__meta {
	font: var(--body-small);
	color: var(--fg2);
}

/* -------- Base table -------- */
.lp-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--surface-light0);
	color: var(--fg1);
	font: var(--body-medium);
	text-align: left;
}

/* -------- Header -------- */
.lp-table thead th {
	background: var(--surface-light2); /* warm off-white */
	color: var(--fg2);
	font: var(--label-small);
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--outline);
	white-space: nowrap;
	vertical-align: middle;
	position: sticky;
	top: 0;
	z-index: 1;
}

.lp-table thead th:first-child {
	padding-left: var(--space-6);
}

.lp-table thead th:last-child {
	padding-right: var(--space-6);
}

/* Sortable header */
.lp-table th.is-sortable {
	cursor: pointer;
	user-select: none;
}

.lp-table th.is-sortable:hover {
	color: var(--fg1);
}

.lp-table th .lp-sort-icon {
	font-family: 'Material Symbols Rounded';
	font-size: 16px;
	vertical-align: -3px;
	margin-left: 4px;
	opacity: .6;
}

.lp-table th[aria-sort="ascending"] .lp-sort-icon,
.lp-table th[aria-sort="descending"] .lp-sort-icon {
	opacity: 1;
	color: var(--primary);
}

/* -------- Body cells -------- */
.lp-table tbody td {
	padding: var(--space-4) var(--space-4);
	border-bottom: 1px solid var(--outline);
	vertical-align: middle;
	font: var(--body-medium);
	color: var(--fg1);
}

.lp-table tbody td:first-child {
	padding-left: var(--space-6);
}

.lp-table tbody td:last-child {
	padding-right: var(--space-6);
}

.lp-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Hover state — neutral state-layer overlay */
.lp-table tbody tr {
	transition: background var(--duration-base) var(--ease-standard);
}

.lp-table tbody tr:hover {
	background: var(--neutral-dark-05);
}

/* Selected row */
.lp-table tbody tr.is-selected {
	background: var(--primary-container);
}

.lp-table tbody tr.is-selected td {
	color: var(--on-primary-container);
}

/* Focus-visible row (keyboard nav) */
.lp-table tbody tr:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--primary-container);
}

/* -------- Variant: striped -------- */
.lp-table--striped tbody tr:nth-child(even) {
	background: var(--surface-light1);
}

.lp-table--striped tbody tr:nth-child(even):hover {
	background: var(--neutral-dark-05);
}

/* -------- Variant: compact (denser rows for data tables) -------- */
.lp-table--compact thead th {
	padding: var(--space-2) var(--space-3);
}

.lp-table--compact tbody td {
	padding: var(--space-3) var(--space-3);
	font: var(--body-small);
}

.lp-table--compact thead th:first-child,
.lp-table--compact tbody td:first-child {
	padding-left: var(--space-4);
}

.lp-table--compact thead th:last-child,
.lp-table--compact tbody td:last-child {
	padding-right: var(--space-4);
}

/* -------- Variant: bordered (rule between every column) -------- */
.lp-table--bordered thead th + th,
.lp-table--bordered tbody td + td {
	border-left: 1px solid var(--outline);
}

/* -------- Cell utilities -------- */
.lp-cell--num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.lp-cell--center {
	text-align: center;
}

.lp-cell--nowrap {
	white-space: nowrap;
}

.lp-cell--shrink {
	width: 1%;
	white-space: nowrap;
}

/* shrink-to-fit column */
.lp-cell--muted {
	color: var(--fg2);
}

.lp-cell--strong {
	font-weight: 500;
	color: var(--fg1);
}

/* -------- Inline elements you'll use inside cells -------- */
/* Tag / chip — pill, container color pair */
.lp-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font: var(--label-small);
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
}

.lp-tag--neutral {
	background: var(--neutral-container);
	color: var(--on-neutral-container);
}

.lp-tag--success {
	background: var(--success-container);
	color: var(--on-success-container);
}

.lp-tag--warning {
	background: var(--warning-container);
	color: var(--on-warning-container);
}

.lp-tag--error {
	background: var(--error-container);
	color: var(--on-error-container);
}

.lp-tag--inform {
	background: var(--inform-container);
	color: var(--on-inform-container);
}

.lp-tag--primary {
	background: var(--primary-container);
	color: var(--on-primary-container);
}

/* Avatar + name cluster */
.lp-cell-user {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}

.lp-cell-user__avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	background: var(--primary-container);
	color: var(--on-primary-container);
	font: var(--label-small);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.lp-cell-user__name {
	font: var(--body-bold);
	color: var(--fg1);
}

.lp-cell-user__sub {
	font: var(--body-small);
	color: var(--fg2);
}

/* Row action button (icon-only, ghost) */
.lp-row-action {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fg2);
	cursor: pointer;
	transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.lp-row-action:hover {
	background: var(--neutral-dark-10);
	color: var(--fg1);
}

.lp-row-action:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--primary-container);
}

/* -------- Empty / loading -------- */
.lp-table__empty {
	padding: var(--space-12) var(--space-6);
	text-align: center;
}

.lp-table__empty-title {
	font: var(--headline-small);
	color: var(--fg1);
	margin: 0 0 var(--space-2);
}

.lp-table__empty-body {
	font: var(--body-medium);
	color: var(--fg2);
	margin: 0;
}

/* -------- Pagination footer -------- */
.lp-table-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-6);
	border-top: 1px solid var(--outline);
	background: var(--surface-light1);
	font: var(--body-small);
	color: var(--fg2);
}

.lp-table-foot__pager {
	display: flex;
	gap: var(--space-1);
}

.lp-table-foot__pager button {
	appearance: none;
	background: var(--surface-light0);
	border: 1px solid var(--outline);
	border-radius: var(--radius-sm);
	padding: 4px 10px;
	font: var(--body-small);
	color: var(--fg1);
	cursor: pointer;
}

.lp-table-foot__pager button[aria-current="page"] {
	background: var(--primary-container);
	border-color: var(--primary-container);
	color: var(--on-primary-container);
}

.lp-table-foot__pager button:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* -------- Responsive: collapse to cards under sm -------- */
@media (max-width: 640px) {
	.lp-table--responsive thead {
		display: none;
	}

	.lp-table--responsive tbody tr {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-1);
		padding: var(--space-4) var(--space-6);
		border-bottom: 1px solid var(--outline);
	}

	.lp-table--responsive tbody td {
		display: grid;
		grid-template-columns: 120px 1fr;
		align-items: baseline;
		padding: 2px 0;
		border: 0;
	}

	.lp-table--responsive tbody td::before {
		content: attr(data-label);
		font: var(--label-small);
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--fg2);
	}
}