/* Design standard components: card, list, table, badge, avatar and empty state.
   Flat surfaces with hairline borders and no shadows. Stable at every width: a badge, date,
   number, action or tab stays on one line, a long name ends with an ellipsis, and a table drops
   its secondary columns as it narrows (720 and 560 px), then becomes list rows (480 px). */

.card {
	position: relative;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	overflow: hidden;
}

.card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-block-end: 1px solid var(--border);
}

.card-title {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	white-space: nowrap;
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
}

.list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-block-size: var(--bar);
	padding: var(--space-3) var(--space-4);
	color: var(--text);
	text-decoration: none;
}

.list > li + li,
.list-item + .list-item {
	border-block-start: 1px solid var(--border);
}

a.list-item:hover {
	background: var(--bg-subtle);
	text-decoration: none;
}

.list-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-inline-size: 0;
}

/* Rows fill their card, which clips: draw the focus ring inside. */
.list-item:focus-visible,
.table td :focus-visible {
	outline-offset: -2px;
}

.list-title,
.list-meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-title {
	font-weight: var(--weight-medium);
}

.list-meta {
	color: var(--text-secondary);
	font-size: var(--text-xs);
}

.table {
	inline-size: 100%;
	border-collapse: collapse;
}

.table th {
	padding: var(--space-2) var(--space-4);
	border-block-end: 1px solid var(--border);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	text-align: start;
	white-space: nowrap;
}

.table td {
	padding: var(--space-3) var(--space-4);
	border-block-end: 1px solid var(--border);
	vertical-align: middle;
	white-space: nowrap;
}

.table tbody tr:last-child td {
	border-block-end: 0;
}

.table tbody tr:hover {
	background: var(--bg-subtle);
}

.table td.num {
	color: var(--text-secondary);
}

/* The main title takes what the other cells leave and ends in an ellipsis; a name beside it keeps its own
   width up to a share of the table, and number and end cells hug their content: a long title or name never
   pushes an action out, and a field, picture or badge in a plain cell keeps its size. */
.table td:has(> .cell-main),
.table td:has(> .truncate) {
	max-inline-size: 0;
}

.table tr:has(> td > .cell-main) > td:has(> .truncate) {
	max-inline-size: none;
	inline-size: 1%;
}

.table tr:has(> td > .cell-main) > td > .truncate {
	max-inline-size: min(28ch, 15cqi);
}

.table :is(th, td):is(.num, .cell-end) {
	inline-size: 1%;
}

/* A field in a number or end cell keeps its own width (a number field 8ch), and a row's actions stay on one line until the rows stack. */
.table :is(th, td):is(.num, .cell-end) :is(input, select, textarea) {
	min-inline-size: max-content;
}

.table :is(th, td).num :is(input, textarea) {
	min-inline-size: 8ch;
}

@container (min-width: 481px) {
	.table .cell-actions {
		flex-wrap: nowrap;
	}
}

.cell-main {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	max-inline-size: 28ch;
}

.cell-main > * {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cell-main small {
	color: var(--text-secondary);
}

.table .cell-end {
	text-align: end;
}

/* Two or more actions in one row: they wrap as whole buttons, never inside one. */
.cell-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-2);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	block-size: 22px;
	padding: 0 var(--space-2);
	border-radius: var(--radius-full);
	background: var(--bg-subtle);
	box-shadow: inset 0 0 0 1px var(--border);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.badge-dot::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: var(--radius-full);
	background: currentColor;
}

.badge-success {
	background: var(--success-bg);
	box-shadow: none;
	color: var(--success);
}

.badge-warning {
	background: var(--warning-bg);
	box-shadow: none;
	color: var(--warning);
}

.badge-danger {
	background: var(--danger-bg);
	box-shadow: none;
	color: var(--danger);
}

.avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--radius-full);
	background: var(--surface-hover);
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	overflow: hidden;
}

.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-10) var(--space-4);
	text-align: center;
}

.empty-icon {
	display: grid;
	place-items: center;
	inline-size: var(--space-10);
	block-size: var(--space-10);
	border-radius: var(--radius-full);
	background: var(--surface-hover);
	color: var(--text-secondary);
}

.empty-text {
	max-inline-size: 320px;
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

/* A table drops columns by its own width, wherever it sits: the parent of a table is its container. */
:has(> .table) {
	container-type: inline-size;
}

@container (max-width: 720px) {
	.table [data-priority="3"] {
		display: none;
	}
}

@container (max-width: 560px) {
	.table [data-priority="2"] {
		display: none;
	}

	.table th,
	.table td {
		padding-inline: var(--space-3);
	}
}

@container (max-width: 480px) {
	/* The header row is hidden from sight only: a screen reader still names each cell's column. */
	.table-stack thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* A control in the header (sort, select all) shows the header row again while it has the focus. */
	.table-stack thead:focus-within {
		position: static;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		clip-path: none;
	}

	.table-stack,
	.table-stack tbody {
		display: block;
	}

	.table-stack tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1) var(--space-3);
		padding: var(--space-3) var(--space-4);
		border-block-end: 1px solid var(--border);
	}

	.table-stack tbody tr:last-child {
		border-block-end: 0;
	}

	.table-stack td {
		order: 2;
		flex-basis: 100%;
		min-inline-size: 0;
		padding: 0;
		border: 0;
		color: var(--text-secondary);
		font-size: var(--text-sm);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.table-stack td:first-child {
		order: 0;
		flex: 1 1 0;
		color: var(--text);
		font-size: var(--text-md);
	}

	.table-stack td.cell-end {
		order: 1;
		flex: none;
	}

	.table-stack td:has(> .cell-main),
	.table-stack td:has(> .truncate) {
		max-inline-size: none;
		inline-size: auto;
	}

	.table-stack tr:has(> td > .cell-main) > td > .truncate {
		max-inline-size: 100%;
	}

	.table-stack :is(th, td):is(.num, .cell-end) {
		inline-size: auto;
	}

	/* In a stacked row every cell shows again: a secondary column becomes a secondary line, and keeps its header. */
	.table-stack td[data-priority] {
		display: block;
	}

	.table-stack th[data-priority] {
		display: table-cell;
	}
}