/*
 * PureCSS.com
 * https://purecss.com/examples/sticky-table/
 * A table header that stays fixed while scrolling using position: sticky on <thead>.
 */

.demo-sticky-table .table-scroll {
		max-height: 240px;
		overflow-y: auto;
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
	}

.demo-sticky-table table {
		width: 100%;
		border-collapse: collapse;
		font-size: .875rem;
	}

.demo-sticky-table thead th {
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--surface);
		padding: .75rem 1rem;
		text-align: left;
		font-weight: 600;
		font-size: .8rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--text-muted);
		border-bottom: 1px solid var(--border);
	}

.demo-sticky-table tbody tr {
		border-bottom: 1px solid var(--border);
		transition: background .15s;
	}

:is(.demo-sticky-table tbody tr):last-child {
			border-bottom: none;
		}

:is(.demo-sticky-table tbody tr):hover {
			background: var(--surface-2);
		}

.demo-sticky-table tbody td {
		padding: .65rem 1rem;
		color: var(--text);
	}

:is(.demo-sticky-table tbody td):first-child {
			font-weight: 500;
		}

.demo-sticky-table .badge-status {
		display: inline-block;
		padding: .2rem .6rem;
		border-radius: 99px;
		font-size: .75rem;
		font-weight: 600;
	}

.demo-sticky-table .badge-active {
		background: rgba(87, 217, 163, .12);
		color: var(--teal);
	}

.demo-sticky-table .badge-pending {
		background: rgba(255, 212, 68, .12);
		color: var(--yellow);
	}

.demo-sticky-table .badge-inactive {
		background: var(--surface-2);
		color: var(--text-muted);
	}