/* Roster page styles — loaded on roster pages after main.css */

.roster-content .roster-table td.roster-mobile-only {
	display: none;
}

@media (max-width: 640px) {
	.roster-page.page-card {
		padding: 1rem 0.875rem;
	}

	.roster-toolbar {
		gap: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.roster-search-field {
		padding: 0.4375rem 0.625rem;
		font-size: 16px;
	}

	.roster-sort-label {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
		white-space: nowrap;
	}

	.roster-sort-select {
		width: 100%;
		min-width: 0;
	}

	.roster-count {
		font-size: 0.75rem;
	}

	.roster-table-wrap {
		margin: 0 -0.25rem;
	}

	.roster-content .roster-table.roster-table--compact {
		display: block;
		width: 100%;
		margin: 0;
		border: none;
		font-size: 0.8125rem;
	}

	.roster-content .roster-table.roster-table--compact thead {
		display: none !important;
	}

	.roster-content .roster-table.roster-table--compact tbody {
		display: block;
		width: 100%;
	}

	.roster-content .roster-table.roster-table--compact tbody tr {
		display: grid !important;
		grid-template-columns: 2rem minmax(0, 1fr);
		grid-template-areas:
			"jersey name"
			"jersey meta";
		column-gap: 0.5rem;
		row-gap: 0.0625rem;
		align-items: start;
		width: 100% !important;
		max-width: 100%;
		margin: 0 !important;
		padding: 0.28125rem 0.375rem !important;
		border: none !important;
		border-bottom: 1px solid var(--color-gray-200) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	.roster-content .roster-table.roster-table--compact tbody tr:nth-child(even) {
		background: var(--color-gray-50) !important;
	}

	.roster-content .roster-table.roster-table--compact tbody td {
		display: block !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		text-align: left !important;
		vertical-align: top;
	}

	.roster-content .roster-table.roster-table--compact tbody td::before,
	.roster-content .roster-table.roster-table--compact tbody td::after {
		content: none !important;
		display: none !important;
	}

	.roster-content .roster-table.roster-table--compact td.roster-col-jersey {
		grid-area: jersey;
		align-self: center;
		font-weight: 700;
		font-size: 0.75rem;
		color: var(--color-cardinal);
		text-align: right !important;
		font-variant-numeric: tabular-nums;
	}

	.roster-content .roster-table.roster-table--compact td.roster-col-name {
		grid-area: name;
		font-weight: 600;
		font-size: 0.8125rem;
		line-height: 1.2;
		color: var(--color-navy);
	}

	.roster-content .roster-table.roster-table--compact td.roster-col-mobile-meta {
		grid-area: meta;
		display: block !important;
		font-size: 0.6875rem;
		line-height: 1.25;
		font-weight: 500;
		color: var(--color-gray-600);
	}

	.roster-content .roster-table.roster-table--compact td.roster-col-mobile-meta:empty {
		display: none !important;
	}

	.roster-content .roster-table.roster-table--compact td.roster-desktop-only {
		display: none !important;
	}
}