/* ==========================================================================
   Match list container — scrollable
   ========================================================================== */

[data-matches-list] {
	max-height: 800px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Scrollbar styling */
[data-matches-list]::-webkit-scrollbar {
	width: 8px;
}

[data-matches-list]::-webkit-scrollbar-track {
	background: var(--color-surface);
}

[data-matches-list]::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 4px;
	transition: background var(--transition-base) var(--transition-ease);
}

[data-matches-list]::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-muted);
}

/* Firefox scrollbar */
[data-matches-list] {
	scrollbar-color: var(--color-border) var(--color-surface);
	scrollbar-width: thin;
}

/* ==========================================================================
   Hero Carousel (live match cards)
   ========================================================================== */

.hero-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: 200px;
}

.hero-carousel__track {
	display: block;
	width: 100%;
}

.hero-match__slide {
	width: 100%;
	box-sizing: border-box;
	padding: var(--spacing-4);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--spacing-2);
}

/* League label */
.hero-match__league {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-1);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-overlay-light-8);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hero-match__league-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Teams row */
.hero-match__teams {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-4);
	width: 100%;
	max-width: 560px;
}

.hero-match__team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-1);
	flex: 1;
	min-width: 0;
}

.hero-match__shield {
	font-size: 2.5rem;
	color: var(--color-overlay-light-6);
}

.hero-match__team-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-on-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

@media (min-width: 768px) {
	.hero-match__shield { font-size: 3.5rem; }
	.hero-match__team-name { font-size: 1.25rem; }
}

/* Score block (center) */
.hero-match__score-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.hero-match__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hero-match__badge--live {
	background: var(--color-danger);
	color: var(--color-on-primary);
	animation: pulse-bg 1.5s infinite;
}

.hero-match__badge--ft {
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
}

.hero-match__badge--upcoming {
	background: var(--color-primary-alpha-2);
	color: var(--color-on-primary);
}

.hero-match__score {
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
}

.hero-match__score span {
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-on-primary);
}

.hero-match__score .sep {
	color: var(--color-overlay-light-6);
}

@media (min-width: 768px) {
	.hero-match__score span { font-size: 3rem; }
}

.hero-match__ht {
	font-size: 0.75rem;
	color: var(--color-overlay-light-6);
}

/* Arrows */
.hero-carousel__prev,
.hero-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--color-overlay-light-2);
	border: none;
	color: var(--color-on-primary);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: var(--z-above);
	transition: background var(--transition-base) var(--transition-ease);
	font-size: 1.25rem;
}

.hero-carousel__prev:hover,
.hero-carousel__next:hover {
	background: var(--color-overlay-light);
}

.hero-carousel__prev { left: var(--spacing-2); }
.hero-carousel__next { right: var(--spacing-2); }

/* Dots */
.hero-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: var(--spacing-1) 0;
}

.hero-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--color-overlay-light-2);
	cursor: pointer;
	padding: 0;
	transition: background var(--transition-base) var(--transition-ease);
}

.hero-carousel__dot.is-active {
	background: var(--color-on-primary);
}

.hero-match__empty {
	padding: var(--spacing-4);
	text-align: center;
	color: var(--color-overlay-light-6);
}

/* ==========================================================================
   Skeleton loaders
   ========================================================================== */

@keyframes skeleton-shimmer {
	0% { background-position: -200px 0; }
	100% { background-position: calc(200px + 100%) 0; }
}

.skeleton-line {
	height: 14px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--color-overlay-light) 0%, var(--color-overlay-light-2) 50%, var(--color-overlay-light) 100%);
	background-size: 200px 100%;
	animation: skeleton-shimmer 1.5s infinite;
	width: 60%;
	margin: 4px auto;
}

.skeleton-line--sm { width: 30%; height: 10px; }
.skeleton-line--lg { width: 40%; height: 24px; }

.skeleton-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(90deg, var(--color-overlay-light) 0%, var(--color-overlay-light-2) 50%, var(--color-overlay-light) 100%);
	background-size: 200px 100%;
	animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2);
}

.match-row--skeleton {
	padding: var(--spacing-2);
	border-bottom: 1px solid var(--color-surface-alt);
}

.hero-match__slide--skeleton {
	gap: var(--spacing-2);
}

/* Pulse animation for live badge */
@keyframes pulse-bg {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* ==========================================================================
   Tabs — score-specific extensions
   ========================================================================== */

.tabs--scores {
	flex-wrap: wrap;
	align-items: center;
}

.tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9999px;
	background: var(--color-danger);
	color: var(--color-on-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	margin-left: 4px;
	vertical-align: middle;
}

.tabs__refresh {
	margin-left: auto;
	padding: 0 var(--spacing-2);
	font-size: 0.75rem;
	color: var(--color-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   Match group — league header with colored left bar
   ========================================================================== */

.match-group__league-bar {
	display: block;
	width: 4px;
	height: 20px;
	border-radius: 2px;
	flex-shrink: 0;
}

.match-group__live-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 8px;
	border-radius: 9999px;
	background: var(--color-success-bg);
	color: var(--color-success-dark);
	font-size: 0.6875rem;
	font-weight: 700;
	margin-left: var(--spacing-1);
}

.match-group__count {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* ==========================================================================
   Date separator row
   ========================================================================== */

.match-date-separator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px var(--spacing-3);
	background: var(--color-surface);
	border-top: 2px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	position: sticky;
	top: 0;
	z-index: 1;
}

.match-date-separator__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
	flex-shrink: 0;
}

/* ==========================================================================
   Column headers row
   ========================================================================== */

.match-col-headers {
	display: grid;
	grid-template-columns: 52px 52px 1fr 80px 1fr 52px;
	align-items: center;
	padding: 4px var(--spacing-2);
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--color-surface-alt);
	border-bottom: 1px solid var(--color-border);
}

.match-col-headers__home { text-align: right; padding-right: var(--spacing-1); }
.match-col-headers__score { text-align: center; }
.match-col-headers__away { text-align: left; padding-left: var(--spacing-1); }
.match-col-headers__ht { text-align: right; }

/* ==========================================================================
   Match row — 6-column grid layout (aligned with headers)
   ========================================================================== */

.match-row {
	display: grid;
	grid-template-columns: 52px 52px 1fr 80px 1fr 52px;
	align-items: center;
	padding: var(--spacing-1) var(--spacing-2);
	text-decoration: none;
	color: inherit;
	transition: background var(--transition-base) var(--transition-ease);
	border-bottom: 1px solid var(--color-surface-alt);
}

.match-row:hover { background: var(--color-surface-alt); }

.match-row__time {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	white-space: nowrap;
	text-align: center;
}

.match-row__tt {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-text-muted);
	white-space: nowrap;
	text-align: center;
}

.match-row__tt.is-live {
	color: var(--color-warning);
}

.match-row__content {
	display: contents;
}

.match-row__team {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	font-weight: 600;
	width: auto;
	min-width: 0;
	overflow: hidden;
}

.match-row__team span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.match-row__team span:first-child {
	min-width: 18px;
	flex-shrink: 0;
}

/* Home team right-aligned */
.match-row__team:not(.match-row__team--away) {
	justify-content: flex-end;
	text-align: right;
	padding-right: 6px;
}

.match-row__team--away {
	justify-content: flex-start;
	text-align: left;
	padding-left: 6px;
}

.match-row__score {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 3px 10px;
	background: var(--color-surface-alt);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
}

.match-row__score span { font-size: 0.875rem; font-weight: 800; }
.match-row__score .sep { color: var(--color-text-light); font-weight: 400; }

.match-row__score--live {
	background: var(--color-primary-light);
}

.match-row__score--live span { color: var(--color-primary); }

.match-row__ht {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	text-align: right;
	white-space: nowrap;
	padding-right: var(--spacing-1);
}