/* =============================================================================
	 Table component
	 Clean rows, white surface, subtle stripe.
	 Depends on: tokens.css, base.css
	 ============================================================================= */

.shiftora-table-wrap {
	overflow-x:    auto;
	border:        1px solid var(--shiftora-color-border);
	border-radius: var(--shiftora-radius-xl);
	box-shadow:     var(--shiftora-shadow-xs);
	background:    var(--shiftora-color-bg-surface);
}

.shiftora-table {
	inline-size:     100%;
	border-collapse: collapse;
	font-size:       var(--shiftora-font-size-sm);
	/* Sizes, counts and dates line up down a column instead of jittering. */
	font-variant-numeric: tabular-nums;
}

/* Head */
.shiftora-table thead tr {
	background-color: var(--shiftora-n-50);
	border-block-end: 1px solid var(--shiftora-color-border);
}

.shiftora-table th {
	position:       sticky;
	top:            0;
	z-index:        1;
	padding:        var(--shiftora-space-3) var(--shiftora-space-4);
	text-align:     start;
	font-size:      var(--shiftora-font-size-xs);
	font-weight:    var(--shiftora-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--shiftora-tracking-wider);
	color:          var(--shiftora-color-text-muted);
	white-space:    nowrap;
	background:     var(--shiftora-n-50);
}

.shiftora-table th.is-sortable {
	cursor:      pointer;
	user-select: none;
	transition:  color var(--shiftora-transition-fast);
}

.shiftora-table th.is-sortable:hover {
	color: var(--shiftora-color-text);
}

/* Body */
.shiftora-table tbody tr {
	border-block-end: 1px solid var(--shiftora-color-border-light);
	transition:       background-color var(--shiftora-transition-fast);
}

.shiftora-table tbody tr:last-child {
	border-block-end: none;
}

.shiftora-table tbody tr:nth-child(even) {
	background-color: var(--shiftora-n-50);
}

.shiftora-table tbody tr:hover {
	background-color: var(--shiftora-blue-50);
}

.shiftora-table tbody tr.is-selected {
	background-color: var(--shiftora-blue-50);
	outline:          2px solid var(--shiftora-color-primary-border);
	outline-offset:   -2px;
}

.shiftora-table td {
	padding:        var(--shiftora-space-3) var(--shiftora-space-4);
	color:          var(--shiftora-color-text);
	vertical-align: middle;
}

.shiftora-table td.is-muted {
	color:     var(--shiftora-color-text-muted);
	font-size: var(--shiftora-font-size-xs);
}

.shiftora-table td.is-mono {
	font-family: var(--shiftora-font-family-mono);
	font-size:   var(--shiftora-font-size-mono-xs);
	color:       var(--shiftora-color-text-mono);
}

/* Footer / pagination */
.shiftora-table-footer {
	display:            flex;
	align-items:        center;
	justify-content:    space-between;
	padding:            var(--shiftora-space-3) var(--shiftora-space-4);
	border-block-start: 1px solid var(--shiftora-color-border-light);
	font-size:          var(--shiftora-font-size-sm);
	color:              var(--shiftora-color-text-muted);
	background-color:   var(--shiftora-n-50);
	border-radius:      0 0 var(--shiftora-radius-xl) var(--shiftora-radius-xl);
}

.shiftora-table .is-empty td {
	text-align:    center;
	padding-block: var(--shiftora-space-10);
	color:         var(--shiftora-color-text-muted);
	background:    transparent;
}