/* ========================================================= */
/*   ALLIANCE DRAWER STYLING                                 */
/* ========================================================= */

.alliance-drawer-content {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.alliance-drawer-header {
	padding: 20px 24px;
	border-bottom: 1px solid #E5E7EB;
}

	.alliance-drawer-header.alliance-private {
		background: linear-gradient(to bottom, #F2E9FF 0%, #FAFAFA 100%);
		border-bottom-color: #D6C3FF;
	}

	.alliance-drawer-header.alliance-majority {
		background: linear-gradient(to bottom, #FFEAD5 0%, #FAFAFA 100%);
		border-bottom-color: #FFC999;
	}

.alliance-drawer-title {
	margin: 0 0 6px 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: #111827;
}

.alliance-drawer-subtitle {
	margin: 0;
	font-size: 0.9rem;
	color: #6b7280;
	font-weight: 500;
}

.alliance-drawer-body {
	padding: 24px;
	flex: 1;
	overflow-y: auto;
	background: #FFFFFF; /* Explicitly set white background */
}

/* Head of the Snake Section */
.alliance-drawer-hos-section {
	margin-bottom: 28px;
	background: #F9FAFB;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 12px;
}

.alliance-hos-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	margin-bottom: 10px;
}

.alliance-hos-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #FFFFFF;
	border: 2px solid #77DD77;
	box-shadow: 0 0 0 2px rgba(119, 221, 119, 0.15);
	text-decoration: none;
	color: #111827;
	transition: all 0.15s ease;
}

	.alliance-hos-chip:hover {
		background: #F0FDF4;
		box-shadow: 0 0 0 3px rgba(119, 221, 119, 0.25);
		transform: translateY(-1px);
	}

	.alliance-hos-chip .coach-avatar,
	.alliance-hos-chip .coach-initials {
		width: 36px;
		height: 36px;
		font-size: 15px;
	}

	.alliance-hos-chip .coach-name {
		font-weight: 600;
		font-size: 1rem;
	}

/* Members Section */
.alliance-drawer-members-section {
	margin-top: 20px;
	background: #F9FAFB;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 12px;
}

.alliance-members-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	margin-bottom: 12px;
}

.alliance-members-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.alliance-member-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 12px;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	text-decoration: none;
	color: #111827;
	transition: all 0.12s ease;
}

	.alliance-member-chip:hover {
		background: #F9FAFB;
		border-color: #77DD77;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		transform: translateY(-1px);
	}

	.alliance-member-chip .coach-avatar,
	.alliance-member-chip .coach-initials {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	.alliance-member-chip .coach-name {
		font-weight: 600;
		font-size: 0.9rem;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

/* Mobile responsive */
@media (max-width: 640px) {
	.alliance-drawer-header {
		padding: 16px 20px;
	}

	.alliance-drawer-title {
		font-size: 1.25rem;
	}

	.alliance-drawer-subtitle {
		font-size: 0.85rem;
	}

	.alliance-drawer-body {
		padding: 20px;
	}

	.alliance-members-grid {
		grid-template-columns: 1fr;
	}

	.alliance-hos-chip {
		width: 100%;
		justify-content: flex-start;
	}
}

/* Ensure coach chips in alliance drawer use consistent styling */
.alliance-drawer-content .coach-avatar {
	display: none;
}

.alliance-drawer-content .coach-avatar,
.alliance-drawer-content .coach-initials {
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #77DD77;
	box-shadow: 0 0 0 1px rgba(119, 221, 119, 0.25);
	background: #fff;
	overflow: hidden;
	object-fit: cover;
	font-weight: 700;
	line-height: 1;
}

.alliance-drawer-content .coach-initials {
	background: #e5f6e5;
	color: #14532d;
}

/* ========================================================= */
/*   Type-specific tinted sections (purple/orange)          */
/* ========================================================= */

/* Purple tint for private alliances */
.alliance-drawer-content.alliance-private .alliance-drawer-hos-section,
.alliance-drawer-content.alliance-private .alliance-drawer-members-section {
	background: #F3EEFF;
	border-color: #D6C3FF;
}

.alliance-drawer-content.alliance-private .alliance-hos-label,
.alliance-drawer-content.alliance-private .alliance-members-label {
	color: #374151;
}

/* Orange tint for majority alliances */
.alliance-drawer-content.alliance-majority .alliance-drawer-hos-section,
.alliance-drawer-content.alliance-majority .alliance-drawer-members-section {
	background: #FFF3E7;
	border-color: #FFC999;
}

.alliance-drawer-content.alliance-majority .alliance-hos-label,
.alliance-drawer-content.alliance-majority .alliance-members-label {
	color: #374151;
}