/**
 * Oly Poker Team Table - Frontend Styles
 *
 * @package Oly_Poker_Team_Table
 * @since 1.0.0
 */

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */
.oly-poker-team-table {
	--color-navy-5: #09214c;
	--color-navy-4: #254fae;
	--color-grey-100: #292935;
	--color-grey-200: #3b3b54;
	--color-grey-300: #535374;
	--color-grey-500: #8a8ab2;
	--color-white: #ffffff;
	--color-text-light: #f9f9f9;

	--font-heading: 'Bebas Neue Pro', 'Bebas Neue', sans-serif;
	--font-body: 'Montserrat', sans-serif;

	--spacing-xs: 4px;
	--spacing-sm: 6px;
	--spacing-md: 8px;
	--spacing-lg: 12px;
	--spacing-xl: 14px;
	--spacing-2xl: 24px;
	--spacing-3xl: 32px;

	--radius-sm: 4px;
	--radius-md: 8px;
}

/* ========================================
   Main Container
   ======================================== */
.oly-poker-team-table {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3xl);
	font-family: var(--font-body);
}

/* ========================================
   Container
   ======================================== */
.oly-poker-team-table__container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

/* ========================================
   Search Box
   ======================================== */
.oly-poker-team-table__search {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	background-color: var(--color-grey-100);
	border-radius: var(--radius-md);
	padding: 9px var(--spacing-xl);
	height: 40px;
	box-sizing: border-box;
}

.oly-poker-team-table__search-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.oly-poker-team-table__search-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-white);
}

.oly-poker-team-table__search-input::placeholder {
	color: var(--color-grey-500);
}

/* ========================================
   Table Container
   ======================================== */
.oly-poker-team-table__table-container {
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* ========================================
   Header Row
   ======================================== */
.oly-poker-team-table__header {
	display: flex;
	align-items: center;
	gap: var(--spacing-2xl);
	background-color: var(--color-white);
	padding: var(--spacing-xs) 11px var(--spacing-xs) var(--spacing-xs);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.oly-poker-team-table__header-col {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-navy-5);
}

/* ========================================
   Column Widths
   ======================================== */
.oly-poker-team-table__col--rank {
	width: 25px;
	text-align: left;
}

.oly-poker-team-table__col--name {
	width: 250px;
	flex-shrink: 0;
}

.oly-poker-team-table__col--score {
	width: 60px;
	text-align: left;
}

.oly-poker-team-table__col--payout {
	width: 80px;
	text-align: left;
}

.oly-poker-team-table__col--players {
	flex: 1;
	text-align: right;
}

/* ========================================
   Teams List
   ======================================== */
.oly-poker-team-table__teams {
	display: flex;
	flex-direction: column;
	max-height: 252px; /* Approximately 7 rows * 36px + some buffer for expanded content */
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-grey-300) var(--color-grey-200);
}

/* Webkit scrollbar styling */
.oly-poker-team-table__teams::-webkit-scrollbar {
	width: 10px;
}

.oly-poker-team-table__teams::-webkit-scrollbar-track {
	background: var(--color-grey-200);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.oly-poker-team-table__teams::-webkit-scrollbar-thumb {
	background: var(--color-grey-300);
	border-radius: var(--radius-sm);
}

/* ========================================
   Team Wrapper
   ======================================== */
.oly-poker-team-table__team-wrapper {
	display: flex;
	flex-direction: column;
}

.oly-poker-team-table__team-wrapper:last-child .oly-poker-team-table__team-row {
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.oly-poker-team-table__team-wrapper:last-child .oly-poker-team-table__team-row.is-expanded {
	border-radius: 0;
}

.oly-poker-team-table__team-wrapper:last-child .oly-poker-team-table__players-submenu {
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ========================================
   Team Row
   ======================================== */
.oly-poker-team-table__team-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-2xl);
	padding: var(--spacing-sm) var(--spacing-xs);
	position: relative;
	min-height: 36px;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.oly-poker-team-table__team-row:hover {
	filter: brightness(1.1);
}

.oly-poker-team-table__team-row--odd {
	background-color: var(--color-navy-5);
}

.oly-poker-team-table__team-row--even {
	background-color: var(--color-navy-4);
}

.oly-poker-team-table__team-col {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-white);
}

/* ========================================
   Toggle Button
   ======================================== */
.oly-poker-team-table__toggle-btn {
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}

.oly-poker-team-table__arrow-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.oly-poker-team-table__toggle-btn[aria-expanded="true"] .oly-poker-team-table__arrow-icon {
	transform: rotate(180deg);
}

/* ========================================
   Players Submenu
   ======================================== */
.oly-poker-team-table__players-submenu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--color-grey-100);
	padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) var(--spacing-xs);
}

.oly-poker-team-table__players-submenu[hidden] {
	display: none;
}

.oly-poker-team-table__players-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2px var(--spacing-xs);
}

.oly-poker-team-table__players-header-col {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-white);
}

.oly-poker-team-table__players-divider {
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
	margin: var(--spacing-xs) 0;
}

.oly-poker-team-table__player-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2px var(--spacing-xs);
}

.oly-poker-team-table__player-col {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-white);
}

.oly-poker-team-table__players-col--name {
	flex: 1;
}

.oly-poker-team-table__players-col--score {
	text-align: right;
	font-size: 11px;
}

/* ========================================
   Top Bar (Search + Prizepool)
   ======================================== */
.oly-poker-team-table__top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
}

.oly-poker-team-table__search {
	flex: 1;
}

.oly-poker-team-table__prizepool {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: #173476;
	border-radius: var(--radius-md);
	padding: 8px 16px;
	height: 40px;
	box-sizing: border-box;
	color: var(--color-white);
	white-space: nowrap;
}

.oly-poker-team-table__prizepool-icon {
	display: flex;
	align-items: center;
}

.oly-poker-team-table__prizepool-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--color-white);
}

.oly-poker-team-table__prizepool-value {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-white);
	margin-left: auto;
	padding-left: 12px;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 768px) {
	.oly-poker-team-table__top-bar {
		flex-direction: column-reverse;
		gap: var(--spacing-md);
	}

	.oly-poker-team-table__prizepool {
		width: 100%;
		justify-content: space-between;
	}

	.oly-poker-team-table__col--name {
		width: 150px;
	}

	.oly-poker-team-table__col--payout {
		display: none;
	}

	.oly-poker-team-table__header-col.oly-poker-team-table__col--payout {
		display: none;
	}

	.oly-poker-team-table__search {
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 480px) {

	.oly-poker-team-table__col--name {
		width: 120px;
	}

	.oly-poker-team-table__col--score {
		width: 50px;
	}

	.oly-poker-team-table__header,
	.oly-poker-team-table__team-row {
		gap: var(--spacing-lg);
	}
}