/**
 * Team Assignment Grid Styles
 * 
 * Page-specific layout for team assignment interface.
 * Contains only structural layout - all components are in separate files.
 * 
 * Dependencies:
 *   - variables.css
 *   - components/badge.css
 *   - components/button.css
 *   - components/form.css
 *   - components/player-card.css
 *   - components/validation-banner.css
 */

/* ========================================
   Team Assignment Section Container
   ======================================== */

.team-assignment-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-bg-primary);
	padding: clamp(10px, 1.5vh, 20px);
	border-radius: clamp(6px, 1vh, 8px);
	box-shadow: var(--shadow-base);
	min-height: 0;
}

.team-assignment-section h2 {
	margin-top: 0;
	margin-bottom: clamp(10px, 1.5vh, 20px);
	color: var(--color-bg-dark);
	font-size: clamp(1.1rem, 2.2vh, 1.5rem);
	flex-shrink: 0;
}

/* ========================================
   Team Assignment Grid
   ======================================== */

.team-assignment-grid {
	display: flex;
	gap: clamp(10px, 1.5vh, 20px);
	flex: 1;
	overflow: hidden;
	min-height: 0;
	transition: flex var(--duration-slow) var(--easing-standard);
}

/* ========================================
   Team Columns (Red/Blue/Both)
   ======================================== */

.team-column {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--border-width-thick) solid var(--color-border-dark);
	border-radius: clamp(6px, 1vh, 8px);
	padding: clamp(8px, 1.2vh, 15px);
	background: var(--color-bg-tertiary);
	transition: 
		flex var(--duration-slow) var(--easing-standard),
		opacity var(--duration-slow) var(--easing-standard),
		transform var(--duration-slow) var(--easing-standard),
		padding var(--duration-slow) var(--easing-standard),
		border-width var(--duration-slow) var(--easing-standard);
	transform-origin: center;
}

/* Initial hidden state for Both column - prevents flash on load */
.team-column.both-column.hidden-initial {
	flex: 0 0 0% !important;
	opacity: 0 !important;
	transform: scale(0.95) !important;
	padding: 0 !important;
	border-width: 0 !important;
	pointer-events: none;
}

.team-column.red-column {
	border-color: var(--color-team-red-dark);
	background: linear-gradient(to bottom, var(--color-team-red-light) 0%, var(--color-bg-tertiary) clamp(60px, 10vh, 100px));
}

.team-column.blue-column {
	border-color: var(--color-team-blue-dark);
	background: linear-gradient(to bottom, var(--color-team-blue-light) 0%, var(--color-bg-tertiary) clamp(60px, 10vh, 100px));
}

.team-column.both-column {
	border-color: var(--color-team-both);
	background: linear-gradient(to bottom, var(--color-team-both-light) 0%, var(--color-bg-tertiary) clamp(60px, 10vh, 100px));
}

/* ========================================
   Team Headers
   ======================================== */

.team-header {
	margin: 0 0 clamp(8px, 1.2vh, 15px) 0;
	padding-bottom: clamp(6px, 1vh, 10px);
	border-bottom: var(--border-width-thick) solid currentColor;
	font-size: clamp(1rem, 2vh, 1.3rem);
	font-weight: var(--font-weight-bold);
	text-align: center;
	flex-shrink: 0;
}

.team-header.team-red {
	color: var(--color-team-red-dark);
}

.team-header.team-blue {
	color: var(--color-team-blue-dark);
}

.team-header.team-both {
	color: var(--color-team-both);
}

/* ========================================
   Player Container
   ======================================== */

.player-container {
	flex: 1;
	background: var(--color-bg-primary);
	border-radius: clamp(4px, 0.8vh, 6px);
	padding: clamp(6px, 1vh, 10px);
	border: var(--border-width) solid var(--color-border-light);
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
}

.player-container:empty::before {
	content: "No players assigned";
	display: block;
	text-align: center;
	color: var(--color-text-muted);
	font-style: italic;
	padding: clamp(10px, 1.5vh, 20px) 0;
	font-size: clamp(0.75rem, 1.4vh, 0.85rem);
}

/* ========================================
   Spectator Section (Board Team)
   ======================================== */

.spectator-section {
	margin-top: clamp(10px, 1.5vh, 20px);
	padding: clamp(10px, 1.5vh, 15px);
	background: var(--color-bg-tertiary);
	border: var(--border-width-thick) solid var(--color-team-board);
	border-radius: clamp(6px, 1vh, 8px);
	flex-shrink: 0;
	transition:
		opacity var(--duration-slow) var(--easing-standard),
		transform var(--duration-slow) var(--easing-standard),
		height var(--duration-slow) var(--easing-standard),
		padding var(--duration-slow) var(--easing-standard),
		border-width var(--duration-slow) var(--easing-standard);
	transform-origin: center;
	height: auto;
	overflow: hidden;
}

.spectator-section.section-appearing {
	opacity: 0;
	transform: scale(0.95);
	height: 0;
	padding: 0;
	border-width: 0;
}

.spectator-section.section-disappearing {
	opacity: 0;
	transform: scale(0.95);
	height: 0;
	padding: 0;
	border-width: 0;
}

.spectator-header {
	margin: 0 0 clamp(8px, 1.2vh, 12px) 0;
	color: var(--color-team-board);
	font-size: clamp(0.9rem, 1.8vh, 1.1rem);
	font-weight: var(--font-weight-bold);
	text-align: center;
}

/* Board team player container - horizontal in landscape, vertical in portrait */
.spectator-section .player-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: clamp(6px, 1vh, 10px);
	align-items: flex-start;
	max-height: clamp(150px, 25vh, 250px);
	overflow-y: auto;
	overflow-x: hidden;
}

.spectator-section .player-container:empty::before {
	content: "No spectators";
	width: 100%;
}

/* Board team player cards - adjust for horizontal layout */
.spectator-section .player-card {
	flex: 0 0 auto;
	min-width: clamp(180px, 25%, 250px);
	max-width: clamp(250px, 30%, 350px);
	margin: 0;
}

/* Player card styles moved to components/player-card.css */

/* ========================================
   Start Game Controls
   ======================================== */

/* Start Game Controls Container - Asymmetric flex layout for true centering */
#start-game-controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(8px, 1.5vh, 16px);
	margin-top: clamp(15px, 2vh, 30px);
	width: 100%;
	flex-shrink: 0;
}

/* Validation banner styles moved to components/validation-banner.css */
/* Banner is rendered first in DOM - order:1 */
.validation-banner {
	order: 1;
}

/* Left spacer - grows MORE to compensate for banner width and center button */
#start-game-controls::before {
	content: '';
	flex-grow: 0.75; /* Higher grow rate to push button toward center */
	flex-shrink: 1; /* Can shrink when space is tight */
	flex-basis: 0;
	min-width: 0;
	order: 2;
}

/* Start Game button - fixed size, pushed by asymmetric spacers */
#start-game {
	margin: 0;
	padding: clamp(10px, 1.5vh, 15px) clamp(20px, 3vh, 40px);
	font-size: clamp(1rem, 1.8vh, 1.2rem);
	font-weight: var(--font-weight-bold);
	min-width: clamp(150px, 25vw, 220px);
	flex-shrink: 0; /* Never shrinks */
	flex-grow: 0; /* Never grows */
	transition: all var(--duration-medium) var(--easing-standard);
	order: 3;
}

/* Right spacer - grows LESS to allow left spacer to compensate for banner */
#start-game-controls::after {
	content: '';
	flex-grow: 1; /* Lower grow rate - balances left spacer */
	flex-shrink: 1; /* Can shrink when space is tight */
	flex-basis: 0;
	min-width: 0;
	order: 4;
}

#start-game:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background-color: var(--color-bg-secondary);
	color: var(--color-text-muted);
}

#start-game:disabled:hover {
	background-color: var(--color-bg-secondary);
	transform: none;
}

/* ========================================
   Responsive - Mobile Portrait
   ======================================== */

@media (max-width: 600px) {
	/* Stack teams vertically on narrow screens (phones in portrait) */
	.team-assignment-grid {
		flex-direction: column;
		gap: clamp(8px, 1.2vh, 15px);
	}

	/* Teams adjust size based on content - empty teams shrink, populated teams expand */
	.team-column {
		flex: 1 1 auto; /* Changed from 0% to auto - size based on content */
		width: 100%;
		min-height: clamp(80px, 12vh, 120px); /* Smaller min-height for empty teams */
	}

	/* Keep the Both column's hidden state working in vertical layout */
	.team-column.both-column.hidden-initial {
		flex: 0 0 0%;
		min-height: 0;
	}

	.team-assignment-section {
		padding: clamp(8px, 1.2vh, 15px);
	}

	/* Smaller team names to save vertical space */
	.team-header {
		font-size: clamp(0.8rem, 1.5vh, 0.95rem);
		margin: 0 0 clamp(6px, 1vh, 10px) 0;
		padding-bottom: clamp(4px, 0.8vh, 8px);
	}

	/* Compact empty state message */
	.player-container:empty::before {
		padding: clamp(6px, 1vh, 10px) 0;
		font-size: clamp(0.7rem, 1.3vh, 0.8rem);
	}

	/* Adjust start button for very narrow screens */
	#start-game {
		min-width: clamp(110px, 30vw, 160px);
		padding: clamp(8px, 1.2vh, 12px) clamp(14px, 2vh, 24px);
		font-size: clamp(0.85rem, 1.5vh, 1rem);
	}

	#start-game-controls {
		gap: clamp(6px, 1vh, 10px);
	}

	/* Board team - switch to vertical layout in portrait */
	.spectator-section .player-container {
		flex-direction: column;
		gap: clamp(4px, 0.8vh, 8px);
	}

	.spectator-section .player-card {
		min-width: auto;
		max-width: 100%;
		margin: 0;
	}
}

/* ========================================
   Responsive - Short Height
   ======================================== */

@media (max-height: 600px) {
	.team-assignment-section {
		padding: clamp(6px, 1vh, 12px);
	}
	
	.team-assignment-section h2 {
		margin-bottom: clamp(6px, 1vh, 12px);
		font-size: clamp(1rem, 1.8vh, 1.2rem);
	}
	
	.team-assignment-grid {
		gap: clamp(6px, 1vh, 12px);
	}
	
	.team-column {
		padding: clamp(6px, 1vh, 10px);
	}
}