.attendee-list-table {
	display: grid;
	grid-template-columns: auto;
	inline-size: fit-content;
	margin-inline: auto;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0 0 0 / 0.1);

	caption {
		margin-block-end: 1rem;
		text-align: start;
		font-weight: 700;
	}

	thead, tbody, tr {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
	}

	thead tr {
		background-color: var(--grey-light, #f8f9fa);
		font-weight: 700;

		> * { padding: 0.75rem 1rem; text-align: start; }
	}

	tbody tr {
		border-bottom: 1px solid var(--grey-light, #e9ecef);
		align-items: center;

		&:hover { background-color: var(--grey-lightest, #f8f9fa); }

		> * { padding: 0.75rem 1rem; }

		td:first-child { font-weight: 500; }
	}
}