.xscores-roster:not(.xscores-native){
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.xscores-roster-card{
	border: none;
	border-radius: 12px;
	overflow: hidden;
}
.xscores-roster-header{
	background: linear-gradient(135deg, #3d6600 0%, #5c9801 60%, #7ab82e 100%);
	padding: 1rem 1.25rem;
}
.xscores-roster-title{
	color: #fff;
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.xscores-roster-body{
	padding: 1rem;
}

.xscores-roster-tabs .nav-link{
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #555;
	padding: 0.6rem 0.4rem;
}
.xscores-roster-tabs .nav-link.active{
	color: #3d6600;
	border-bottom: 2px solid #5c9801;
}

.xscores-roster-group{
	margin-bottom: 1.25rem;
}
.xscores-roster-group-title{
	font-size: 0.95rem;
	font-weight: 700;
	color: #2a2a2a;
	margin: 0.5rem 0 0.4rem 0;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.xscores-roster-table{
	font-size: 0.9rem;
}
.xscores-roster-table thead th{
	font-size: 0.75rem;
	font-weight: 600;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	padding: 0.4rem 0.5rem;
}
.xscores-roster-table tbody td{
	padding: 0.55rem 0.5rem;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0,0,0,0.04);
}
.xscores-roster-row-clickable{
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.xscores-roster-row-clickable:hover{
	background-color: rgba(122, 184, 46, 0.08);
}

.xscores-roster-shirt{
	width: 36px;
	text-align: center;
}
.xscores-roster-name{
	font-weight: 600;
}
.xscores-roster-name-link{
	color: #2a2a2a;
	text-decoration: none;
}
.xscores-roster-name-link:hover{
	color: #3d6600;
	text-decoration: underline;
}
.xscores-roster-badge{
	font-size: 0.7rem;
	font-weight: 500;
}

.xscores-roster-card-yellow,
.xscores-roster-card-red{
	display: inline-block;
	width: 9px;
	height: 13px;
	border-radius: 1px;
	vertical-align: middle;
}
.xscores-roster-card-yellow{
	background-color: #f1c40f;
}
.xscores-roster-card-red{
	background-color: #c0392b;
}

@media (max-width: 576px){
	.xscores-roster-body{
		padding: 0.75rem 0.5rem;
	}
	.xscores-roster-table{
		font-size: 0.82rem;
	}
	.xscores-roster-tabs .nav-link{
		font-size: 0.72rem;
		padding: 0.5rem 0.25rem;
	}
}

.xscores-roster.xscores-native {
	padding: 0;
}
.xscores-roster.xscores-native .xscores-roster-card {
	border-radius: 0;
	box-shadow: none;
}

/* Dark mode — app webview only (.xscores-native) */
@media (prefers-color-scheme: dark) {
	.xscores-native .xscores-roster-card {
		background: #1b2630;
		color: #ccd6df;
	}
	.xscores-native .xscores-roster-tabs .nav-link {
		color: #90a0ac;
	}
	.xscores-native .xscores-roster-tabs .nav-link.active {
		color: #8fbf3f;
		background-color: transparent;
		border-bottom-color: #7ab82e;
	}
	.xscores-native .xscores-roster-group-title {
		color: #e6edf3;
		border-bottom-color: #36444f;
	}
	.xscores-native .xscores-roster-table {
		color: #ccd6df;
		--mdb-table-color: #ccd6df;
		--mdb-table-bg: transparent;
	}
	.xscores-native .xscores-roster-table thead th {
		color: #90a0ac;
		border-bottom-color: #36444f;
	}
	.xscores-native .xscores-roster-table tbody td {
		border-bottom-color: #2a3742;
	}
	.xscores-native .xscores-roster-name-link {
		color: #e6edf3;
	}
	.xscores-native .xscores-roster-name-link:hover {
		color: #8fbf3f;
	}
	.xscores-native .xscores-roster-row-clickable:hover {
		background-color: rgba(122, 184, 46, 0.12);
	}
}