/**
 * CL List Template Styles
 */

.cl-list-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.cl-list-header {
	text-align: center;
	margin-bottom: 30px;
}

.cl-list-meta {
	background: #f8f9fa;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #666;
}

.cl-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.cl-list-item {
	background: #fff;
	border: 1px solid #e1e5e9;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cl-list-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.cl-list-photo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 15px;
	display: block;
}

.cl-list-name {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
	text-align: center;
}

.cl-list-name a {
	text-decoration: none;
	color: inherit;
}

.cl-list-name a:hover {
	color: var(--ast-global-color-0, #007cba);
}

.cl-list-details {
	text-align: center;
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

.cl-list-stats {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e1e5e9;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 10px;
	text-align: center;
}

.cl-stat {
	font-size: 12px;
}

.cl-stat-value {
	display: block;
	font-weight: 600;
	font-size: 16px;
	color: var(--ast-global-color-0, #007cba);
}

.cl-no-results {
	text-align: center;
	padding: 60px 20px;
	color: #666;
	font-size: 16px;
}

.cl-data-table-container {
	margin-top: 20px;
	overflow-x: auto;
}

.cl-player-list-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

.cl-player-list-table th {
	background: var(--club-color-0);
	color: #fff;
	font-weight: 600;
	padding: 12px 8px;
	border-bottom: 1px solid #ddd;
	text-align: left;
}

.cl-player-list-table td {
	padding: 12px 8px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

.cl-row.alternate {
	background: #f9f9f9;
}

.cl-player-list-table img {
	max-width: 40px;
	height: auto;
}

.cl-player-list-table a {
	text-decoration: none;
	color: inherit;
}

.cl-player-list-table a:hover {
	color: var(--ast-global-color-0, #007cba);
}

/* Title section */
.cl-list-title-container {
	text-align: center;
	margin-bottom: 30px;
}

/* Rank column */
.cl-list-rank-column {
	width: 60px;
}

/* Player photo container */
.cl-list-player-photo-container {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Player photo images */
.cl-list-player-photo {
	width: 40px;
	height: 40px;
	border-radius: 3px;
	object-fit: cover;
}

/* Bottom spacing */
.cl-list-bottom-spacing {
	margin-bottom: 1.5em;
}

/* Team Selector Dropdown Styles */
.cl-team-selector {
	width: 100%;
	padding: 4px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	font-size: inherit;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
}

.cl-team-selector:hover {
	border-color: var(--ast-global-color-0, #007cba);
}

.cl-team-selector:focus {
	outline: none;
	border-color: var(--ast-global-color-0, #007cba);
	box-shadow: 0 0 0 1px var(--ast-global-color-0, #007cba);
}

.cl-team-selector option {
	padding: 4px;
}

/* Responsive styles */
@media (max-width: 768px) {

	.cl-list-grid {
		grid-template-columns: 1fr;
	}

	.cl-list-container {
		padding: 10px;
	}

	.cl-player-list-table {
		font-size: 14px;
	}

	.cl-player-list-table th,
	.cl-player-list-table td {
		padding: 8px 4px;
	}
}