/**
 * Starshot Dashboard Styles
 * Matching Figma design precisely
 */

:root {
	--dark-blue: #1C3E81;
	--primary-blue: #024AD8;
	--secondary-blue: #024AD8;
	--light-blue: #93C5FD;
	--dark-navy: #0F172A;
	--card-bg: #FFFFFF;
	--background: #F8FAFC;
	--text-primary: #1E293B;
	--text-secondary: #64748B;
	--border-light: #E2E8F0;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
}

.w-full {
	width: 100%;
}

.flex {
	display: flex;
}

.flex-grow {
	flex-grow: 1;
}

.flex-column {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.align-center {
	align-content: center;
}

.justify-around {
	justify-content: space-around;
}

.justify-evenly {
	justify-content: space-evenly;
}

.text-white {
	color: #fff !important;
}

.brand-dark-blue-bg {
	background-color: var(--dark-blue) !important;
}

.brand-blue-bg {
	background-color: var(--primary-blue) !important;
}

.win-underline {
	display: flex;
	border: 1px #fff dashed;
	align-self: end;
	margin-top: -4px;
	position: relative;
}

/* Dashboard Container */
#starshot-dashboard,
#starshot-personal-dashboard {
	background: var(--background);
	padding: 24px;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--text-primary);
	max-width: 1440px;
	margin: 0 auto;
}

/* Header Banner */
.dashboard-header-banner {
	background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-blue) 100%);
	border-radius: var(--radius-lg);
	padding: 48px 32px;
	margin-bottom: 32px;
	position: relative;
	overflow: hidden;
}

.dashboard-header-banner::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 60%;
	height: 200%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.dashboard-header-banner::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 40%;
	height: 150%;
	background: radial-gradient(circle, rgba(147, 197, 253, 0.08) 0%, transparent 60%);
	pointer-events: none;
}

.dashboard-header-content {
	position: relative;
	z-index: 1;
}

.dashboard-logo {
	font-size: 20px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 8px;
	letter-spacing: 2px;
}

.dashboard-title {
	font-size: 40px;
	font-weight: 700;
	color: white;
	margin: 0;
}

/* Tab Navigation */
.dashboard-tabs-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	gap: 24px;
}

.dashboard-tabs {
	display: flex;
	gap: 12px;
	background: transparent;
}

.tab-button {
	padding: 12px 24px;
	border: 2px solid var(--border-light);
	background: transparent;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	cursor: pointer;
	transition: all 0.2s;
	font-family: inherit;
}

.tab-button.active {
	background: var(--secondary-blue);
	color: white;
	border-color: var(--secondary-blue);
}

.tab-button:hover:not(.active) {
	border-color: var(--secondary-blue);
	color: var(--secondary-blue);
}

/* Year Selector */
.year-selector {
	padding: 12px 24px;
	padding-right: 44px;
	border: 2px solid var(--border-light);
	background: transparent;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	cursor: pointer;
	transition: all 0.2s;
	font-family: inherit;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	width: auto;
	max-width: 125px;
	flex-shrink: 0;
}

.year-selector:hover {
	border-color: var(--secondary-blue);
	color: var(--secondary-blue);
}

.year-selector:focus {
	outline: none;
	border-color: var(--secondary-blue);
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Quarter selector shares the year-selector pill styling but needs a fixed width so the
   label ("Overview", "Quarter 1"–"Quarter 4") never truncates or resizes on change. */
.quarter-selector {
	width: 160px;
	max-width: none;
}

/* Team Filters */
.dashboard-filters {
	display: flex;
	gap: 16px;
	align-items: center;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filter-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
}

/* Filter selects share the .year-selector pill styling (rounded border + custom caret)
   so every control in the header row reads as one set. */
.filter-select {
	padding: 12px 12px;
	padding-right: 33px;
	border: 2px solid var(--border-light);
	border-radius: 50px;
	background: transparent;
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.2s;
	min-width: 140px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.filter-select:hover {
	border-color: var(--secondary-blue);
	color: var(--secondary-blue);
}

.filter-select:focus {
	outline: none;
	border-color: var(--secondary-blue);
	box-shadow: 0 0 0 3px rgba(2, 74, 216, 0.1);
}

/* Section Headers */
.section-header {
	margin: 40px 0 24px 0;
}

.section-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 4px 0;
}

.section-title-lg {
	font-size: 24px;
}

.section-title-xl {
	font-size: 36px;
}

/* Summary Metrics */
.summary-metrics,
.metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.summary-metrics {
	grid-template-columns: repeat(3, 1fr);
}

/* Performance Metrics Grid - 3 columns */
.performance-metrics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

/* Personal Dashboard Metrics Grid */
.personal-metrics-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr) 2fr;
	gap: 16px;
	margin-bottom: 24px;
}

.personal-metrics-grid .metric-card:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1;
}

.personal-metrics-grid .metric-card:nth-child(2) {
	grid-column: 3 / 5;
	grid-row: 1;
}

.personal-metrics-grid .metric-card:nth-child(3) {
	grid-column: 5 / 7;
	grid-row: 1;
}

.personal-metrics-grid .metric-card:nth-child(4) {
	grid-column: 1 / 4;
	grid-row: 2;
}

.personal-metrics-grid .metric-card:nth-child(5) {
	grid-column: 4 / 7;
	grid-row: 2;
}

.personal-metrics-grid .validation-chart-card {
	grid-column: 7;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.personal-metrics-grid .validation-chart-card .chart-container-md {
	flex: 1;
	min-height: 0;
	height: auto;
}

.metric-card {
	background: var(--card-bg);
	border-radius: 12px;
	padding: 20px;
	box-shadow: var(--shadow-sm);
	border: 2px solid var(--secondary-blue);
	transition: transform 0.2s, box-shadow 0.2s;
	text-align: center;
	overflow: hidden;
}

.metric-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.metric-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.metric-value {
	font-size: 32px;
	font-weight: 700;
	color: var(--secondary-blue);
	line-height: 1;
	margin: 8px 0;
}

.metric-change {
	font-size: 12px;
	color: var(--text-secondary);
}

.metric-change.positive {
	color: #10B981;
}

.metric-change.negative {
	color: #EF4444;
}

.metric-detail {
	font-size: 14px;
	color: var(--text-primary);
	line-height: 1.6;
}

.metric-detail div {
	margin-bottom: 4px;
}

.metric-detail div:last-child {
	margin-bottom: 0;
}

.chart-metric {
	grid-column: span 2;
}

/* Time Metric Cards - Specific styling for My Progress by Stage */
.time-metric-card {
	text-align: center;
	padding: 24px 20px;
}

.time-metric-card .metric-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	text-transform: none;
	margin-bottom: 16px;
	letter-spacing: normal;
}

.time-metric-card .metric-value {
	font-size: 64px;
	font-weight: 700;
	color: var(--secondary-blue);
	line-height: 1;
	margin: 16px 0 8px 0;
}

.metric-unit {
	font-size: 16px;
	font-weight: 500;
	color: var(--secondary-blue);
	margin-top: 8px;
}

/* Performance Metric Cards */
.performance-metric-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 150px;
}

.performance-metric-card .metric-label {
	text-align: center;
	margin-bottom: 16px;
}

.performance-metric-card .metric-value {
	text-align: center;
}

/* Demo Status Grid */
.demo-status-grid {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin-top: 16px;
}

.demo-status-item {
	text-align: center;
}

.demo-status-item .metric-value {
	font-size: 48px;
	font-weight: 700;
	color: var(--secondary-blue);
	line-height: 1;
	margin-bottom: 8px;
}

.demo-status-item .metric-unit {
	font-size: 14px;
	font-weight: 500;
	color: var(--secondary-blue);
	margin-top: 8px;
}

/* Chart Cards */
.chart-card {
	background: var(--card-bg);
	border-radius: 12px;
	padding: 20px 20px 48px;
	box-shadow: var(--shadow-sm);
	border: 2px solid var(--secondary-blue);
	margin-bottom: 24px;
	overflow: hidden;
}

.chart-card-header {
	margin-top: 12px;
	margin-bottom: 6px;
}

.chart-card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 4px 0;
}

.chart-card-title-lg {
	font-size: 24px;
}

/* Chart Grids */
.charts-grid-1-5 {
	display: grid;
	grid-template-columns: 1.3fr 3fr;
	gap: 16px;
	margin-bottom: 24px;
}
.charts-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.charts-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

/* Chart Container Heights */
.chart-container-xs {
	min-height: 150px;
	height: 150px;
	position: relative;
	display: block;
}

.chart-container-sm {
	min-height: 330px;
	height: 330px;
	position: relative;
	display: block;
}

.chart-container-md {
	min-height: 360px;
	height: 360px;
	position: relative;
	display: block;
}

.chart-container-lg {
	min-height: 400px;
	height: 400px;
	position: relative;
	display: block;
}

/* Funnel Specific Styles */
#funnel-visual {
	padding: 20px 0;
}

.funnel-visual {
	max-width: 600px;
	margin: 0 auto;
	position: relative;
}

.funnel-stage {
	position: relative;
	margin-bottom: 12px;
}

.funnel-bar {
	background: linear-gradient(90deg, var(--secondary-blue), var(--light-blue));
	border-radius: var(--radius-sm);
	padding: 16px 20px;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: transform 0.2s;
	margin: 0 auto;
	position: relative;
}

.funnel-bar:hover {
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.funnel-stage-label {
	font-size: 14px;
	font-weight: 500;
}

.funnel-stage-value {
	font-size: 20px;
	font-weight: 700;
}

.funnel-stage-percentage {
	position: absolute;
	right: -50px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 600;
}

/* KPI Cards */
.kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.kpi-card {
	background: var(--card-bg);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	border: 2px solid var(--secondary-blue);
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.kpi-title {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
	min-height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kpi-values {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 8px;
}

.kpi-value-group {
	text-align: center;
}

.kpi-number {
	font-size: 28px;
	font-weight: 700;
	color: var(--secondary-blue);
	display: block;
	margin-bottom: 4px;
}

.kpi-label {
	font-size: 10px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Win Rate Cards */
.win-rate-column {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.win-rate-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.win-rate-chart-grid {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-bottom: 24px;
}

#team-win-rate-metrics {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

.win-rate-cards-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.win-rate-cards-row:has(.win-rate-card:only-child) {
	grid-template-columns: 1fr;
}

.win-rate-card {
	background: var(--card-bg);
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	border: 2px solid var(--secondary-blue);
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
}

.win-rate-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.win-rate-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 16px;
}

.win-rate-percentage {
	font-size: 48px;
	font-weight: 700;
	color: var(--secondary-blue);
	margin-bottom: 16px;
	line-height: 1;
}

.win-rate-details {
	display: flex;
	justify-content: center;
	gap: 16px;
	font-size: 13px;
	color: var(--text-secondary);
}

/* Placeholder for empty sections */
.dashboard-placeholder {
	padding: 60px 20px;
	text-align: center;
	color: var(--text-secondary);
	background: var(--card-bg);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.dashboard-placeholder p {
	margin: 0;
	font-size: 14px;
}

/* Hide sections by default except overview */
.dashboard-section-content {
	display: none;
}

#overview-section {
	display: block;
}

/* Chart specific overrides */
#active-users-chart,
#acquisition-chart,
#incumbent-chart,
#approved-nominations-chart,
#wins-sector-chart,
#trend-analysis-chart,
#na-user-chart,
#aging-metrics-chart,
#active-users-monthly,
#usage-frequency-chart,
#segmented-data-chart,
#validation-status-chart,
#leaderboard-chart,
#targets-actuals-chart,
#progress-stage-chart,
#personal-funnel-chart,
#demo-volume-chart,
#nominations-time-chart,
#wins-time-chart,
#submitted-approved-chart {
	width: 100%;
	height: 100%;
}

/* Increase height for charts with legends below x-axis */
#active-users-monthly,
#usage-frequency-chart,
#segmented-data-chart {
	min-height: 330px;
	height: 330px;
}

/* Loading State */
.chart-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--text-secondary);
	font-size: 14px;
}

.chart-loading::after {
	content: 'Loading chart data...';
}

/* amCharts Legend Customization */
.am5-legend {
	margin-top: 16px !important;
}

.am5-legend-item {
	font-size: 12px !important;
}

/* amCharts Tooltip */
.am5-tooltip {
	font-size: 12px !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
	.charts-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.kpi-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.personal-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.personal-metrics-grid .metric-card:nth-child(1),
	.personal-metrics-grid .metric-card:nth-child(2),
	.personal-metrics-grid .metric-card:nth-child(3),
	.personal-metrics-grid .metric-card:nth-child(4),
	.personal-metrics-grid .metric-card:nth-child(5) {
		grid-column: auto;
		grid-row: auto;
	}

	.personal-metrics-grid .validation-chart-card {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 992px) {
	.charts-grid-2 {
		grid-template-columns: 1fr;
	}

	.win-rate-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.summary-metrics,
	.metrics-grid,
	.performance-metrics-grid,
	.personal-metrics-grid,
	.charts-grid-3,
	.kpi-grid {
		grid-template-columns: 1fr;
	}

	.chart-metric {
		grid-column: span 1;
	}

	.personal-metrics-grid .validation-chart-card {
		grid-column: 1;
		grid-row: auto;
	}

	#starshot-dashboard,
	#starshot-personal-dashboard {
		padding: 16px;
	}

	.dashboard-tabs-container {
		flex-direction: column;
		align-items: stretch;
	}

	.dashboard-tabs {
		flex-direction: column;
	}

	.tab-button {
		width: 100%;
	}

	.year-selector {
		width: 100%;
	}

	.dashboard-filters {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.filter-group {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.filter-select {
		width: 100%;
	}

	.dashboard-header-banner {
		padding: 32px 20px;
	}

	.dashboard-title {
		font-size: 32px;
	}

	.metric-value {
		font-size: 28px;
	}

	.win-rate-percentage {
		font-size: 36px;
	}

	.funnel-stage-percentage {
		position: static;
		margin-top: 8px;
		text-align: right;
	}
}

/* Print Styles */
@media print {
	#starshot-dashboard,
	#starshot-personal-dashboard {
		background: white;
	}

	.chart-card {
		page-break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ddd;
	}

	.dashboard-tabs {
		display: none;
	}
}

/* Custom Scrollbar */
#starshot-dashboard::-webkit-scrollbar,
#starshot-personal-dashboard::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

#starshot-dashboard::-webkit-scrollbar-track,
#starshot-personal-dashboard::-webkit-scrollbar-track {
	background: var(--background);
	border-radius: 4px;
}

#starshot-dashboard::-webkit-scrollbar-thumb,
#starshot-personal-dashboard::-webkit-scrollbar-thumb {
	background: var(--border-light);
	border-radius: 4px;
}

#starshot-dashboard::-webkit-scrollbar-thumb:hover,
#starshot-personal-dashboard::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
}

/* Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.chart-card,
.metric-card,
.kpi-card,
.win-rate-card {
	animation: fadeIn 0.3s ease-out;
	animation-fill-mode: both;
}

.chart-card:nth-child(1) { animation-delay: 0.05s; }
.chart-card:nth-child(2) { animation-delay: 0.1s; }
.chart-card:nth-child(3) { animation-delay: 0.15s; }
.chart-card:nth-child(4) { animation-delay: 0.2s; }

/* ========================================
   TEAM DASHBOARD SPECIFIC STYLES
   ======================================== */

#starshot-team-dashboard {
	background: var(--background);
	padding: 24px;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--text-primary);
	max-width: 1440px;
	margin: 0 auto;
}

/* Team Summary Metrics - 5 cards in one row */
#team-summary-metrics .summary-metrics {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

/* Metric value risk styling */
.metric-value-risk {
	color: #EF4444 !important;
}

.metric-subtext {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 4px;
}

/* Chart filter select — same pill treatment as the header filters, one size down. */
.chart-filter-select {
	padding: 8px 18px;
	padding-right: 38px;
	border: 2px solid var(--border-light);
	border-radius: 50px;
	background: transparent;
	color: var(--text-primary);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.2s;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.chart-filter-select:hover {
	border-color: var(--secondary-blue);
	color: var(--secondary-blue);
}

.chart-filter-select:focus {
	outline: none;
	border-color: var(--secondary-blue);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.chart-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

/* Wins list container */
.wins-list-container {
	padding: 12px 0;
}

.wins-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wins-list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	background: transparent;
	border-radius: 12px;

	transition: transform 0.2s, box-shadow 0.2s;
}

.wins-list-item:hover {
	transform: translateX(4px);
	box-shadow: var(--shadow-sm);
}

.wish-list-name-icon {
	gap: 0.2em;
}

.wins-list-icon {
	font-size: 24px;
	line-height: 1;
	color: #fff;
}

.wins-list-icon.text-index {
	margin-left: 3px;
}

.wins-list-name {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

.wins-list-count {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	min-width: 75px;
}

/* Average time container */
.avg-time-container {
	padding: 20px 0;
}

.avg-time-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.avg-time-item {
	text-align: center;
	padding: 20px;
	background: var(--background);
	border-radius: 12px;
	border: 2px solid var(--secondary-blue);
}

.avg-time-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
}

.avg-time-value {
	font-size: 48px;
	font-weight: 700;
	color: var(--secondary-blue);
	line-height: 1;
	margin-bottom: 8px;
}

.avg-time-unit {
	font-size: 14px;
	color: var(--text-secondary);
}

/* Conversion rates container */
.conversion-rates-container {
	padding: 20px 0;
}

.conversion-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.conversion-item {
	text-align: center;
	padding: 16px;
	background: var(--background);
	border-radius: 12px;
	border: 2px solid var(--secondary-blue);
}

.conversion-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 8px;
}

.conversion-value {
	font-size: 32px;
	font-weight: 700;
	color: var(--secondary-blue);
	line-height: 1;
}

/* Stage duration container */
.stage-duration-container {
	padding: 20px 0;
}

.stage-duration-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.stage-duration-item {
	text-align: center;
	padding: 16px;
	background: var(--background);
	border-radius: 12px;
	border: 2px solid var(--secondary-blue);
}

.stage-duration-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 8px;
}

.stage-duration-value {
	font-size: 32px;
	font-weight: 700;
	color: var(--secondary-blue);
	line-height: 1;
	margin-bottom: 4px;
}

.stage-duration-unit {
	font-size: 12px;
	color: var(--text-secondary);
}

/* Expandable list on each Team Summary metric card. The + button sits on the
 * bottom border of the card; clicking it shows a scrollable list below the
 * card with the names backing that metric. Override overflow so the button
 * (positioned half-outside the card) and the dropdown list aren't clipped. */
.summary-metrics {
	position: relative;
	z-index: 5;
}

.summary-metrics .metric-card {
	position: relative;
	overflow: visible;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Expanded card lifts above siblings (and the chart card on the next row)
 * so the dropdown list isn't painted underneath. */
.summary-metrics .metric-card.metric-card-expanded {
	z-index: 9999;
}

.metric-card-expand-btn {
	position: absolute;
	bottom: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--secondary-blue, #2563eb);
	color: #fff;
	border: 2px solid #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	padding: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	transition: background 0.15s ease, transform 0.15s ease;
}

.metric-card-expand-btn:hover {
	background: var(--primary-blue, #1e3a8a);
	transform: translateX(-50%) scale(1.05);
}

.metric-card-expanded .metric-card-expand-btn {
	background: var(--primary-blue, #1e3a8a);
}

/* The + / − glyph is taller than its visual center; nudge up 1px so it sits
 * exactly in the middle of the circle. */
.metric-card-expand-btn-icon {
	display: block;
	line-height: 1;
	transform: translateY(-1px);
}

/* Spinner shown while the names list is being fetched. The icon glyph is
 * visibility:hidden so the button keeps its size, and a CSS-only spinner is
 * drawn via the ::after pseudo-element. */
.metric-card-expand-btn.is-loading {
	cursor: progress;
}

.metric-card-expand-btn.is-loading .metric-card-expand-btn-icon {
	visibility: hidden;
}

.metric-card-expand-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: metric-card-expand-spin 0.7s linear infinite;
}

@keyframes metric-card-expand-spin {
	to {
		transform: rotate(360deg);
	}
}

.metric-card-expand-list {
	position: absolute;
	top: calc(100% + 16px);
	left: 0;
	right: 0;
	max-height: 540px; /* ~15 rows at ~36px each */
	overflow-y: auto;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-light, #e5e7eb);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 9999;
	padding: 6px;
}

.metric-card-expand-item {
	padding: 8px 10px;
	border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.metric-card-expand-item:last-child {
	border-bottom: none;
}

.metric-card-expand-item-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary, #1f2937);
	line-height: 1.3;
}

.metric-card-expand-item-sub {
	font-size: 11px;
	color: var(--text-secondary, #6b7280);
	margin-top: 2px;
}

.metric-card-expand-empty {
	padding: 14px;
	text-align: center;
	color: var(--text-secondary, #6b7280);
	font-size: 13px;
}

/* Win Summary cards (team report port of executive's win summary) */
.win-summary-card {
	color: #fff;
	padding: 24px 32px;
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.win-summary-card-primary {
	background: var(--secondary-blue, #2563eb);
	border-color: var(--secondary-blue, #2563eb);
}

.win-summary-card-secondary {
	background: var(--primary-blue, #1e3a8a);
	border-color: var(--primary-blue, #1e3a8a);
}

.win-summary-card .chart-card-title {
	color: #fff;
}

.win-summary-value {
	font-size: 64px;
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	color: #fff;
	margin-top: 8px;
}

/* Pipeline Summary section (team report port of executive's pipeline summary) */
.pipeline-summary-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 16px;
	align-items: center;
}

.pipeline-summary-stat {
	text-align: center;
}

.pipeline-summary-stat-value {
	font-size: 32px;
	font-weight: 700;
	color: var(--secondary-blue);
	line-height: 1.1;
}

.pipeline-summary-stat-label {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pipeline-summary-mini-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 0 12px 12px;
}

.pipeline-summary-mini-stat {
	background: var(--background-light, #f6f8fb);
	border-radius: 6px;
	padding: 8px 10px;
	text-align: left;
}

.pipeline-summary-mini-stat-label {
	font-size: 11px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.pipeline-summary-mini-stat-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--secondary-blue);
	margin-top: 2px;
}

/* Metric display large */
.metric-display-large {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	padding: 9px;
}

.metric-display-large::before {
	font-size: 64px;
	font-weight: 700;
	color: var(--secondary-blue);
}

.metric-display-value {
	font-size: 64px;
	font-weight: 700;
	color: var(--secondary-blue);
}

/* Win rate change styling */
.win-rate-change {
	font-size: 13px;
	color: var(--text-secondary);
	margin-top: 8px;
}

/* Funnel label and percentage */
.funnel-label {
	font-weight: 500;
}

.funnel-percentage {
	font-size: 14px;
	font-weight: 600;
}

/* Canvas element sizing - removed Chart.js specific rules that conflict with amCharts */

/* Responsive adjustments for team dashboard */
@media (max-width: 1200px) {
	#team-summary-metrics .summary-metrics {
		grid-template-columns: repeat(3, 1fr);
	}

	.conversion-grid,
	.stage-duration-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	#team-summary-metrics .summary-metrics {
		grid-template-columns: 1fr;
	}

	.avg-time-grid,
	.conversion-grid,
	.stage-duration-grid {
		grid-template-columns: 1fr;
	}

	.wins-list-item {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* Team dashboard chart containers */
#nominations-by-rep-chart,
#named-vs-nonnamed-chart,
#acquisition-install-chart,
#approved-nominations-monthly-chart,
#wins-by-rep-chart,
#pipeline-funnel-chart,
#win-rate-account-chart,
#win-rate-competitor-chart,
#demo-win-rate-chart,
#demo-win-velocity-chart,
#submitted-approved-trend-chart,
#wins-trend-chart,
#demo-shipments-chart,
#new-returning-reps-chart,
#competitor-displacement-chart,
#seasonality-chart,
#avg-deal-size-chart,
#revenue-product-mix-chart,
#manager-benchmarking-chart {
	position: relative;
	width: 100% !important;
	height: 100% !important;
}
/* Loading Shimmer Effect */
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

.skeleton {
	background: linear-gradient(
		90deg,
		#f0f0f0 25%,
		#e0e0e0 50%,
		#f0f0f0 75%
	);
	background-size: 1000px 100%;
	animation: shimmer 2s infinite;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.skeleton-text {
	height: 16px;
	margin-bottom: 8px;
}

.skeleton-title {
	height: 24px;
	width: 60%;
	margin-bottom: 12px;
}

.skeleton-metric {
	height: 48px;
	width: 80%;
	margin-bottom: 8px;
}

.skeleton-chart {
	height: 300px;
	width: 100%;
}

/* Loading Card Structures */
.loading-metric-card {
	background: var(--card-bg);
	border: 2px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 24px;
	min-height: 140px;
}

.loading-chart-card {
	background: var(--card-bg);
	border: 2px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 24px;
	min-height: 400px;
}

.loading-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.loading-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

.loading-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

.dashboard-loading {
	position: relative;
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
	width: 100%;
}

.dashboard-loaded {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}

.dashboard-content {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.dashboard-content.loaded {
	opacity: 1;
}

.reports-hidden {
	display: none !important;
}

.loading-section-header {
	margin: 32px 0 16px 0;
}

.loading-chart-card-sm {
	background: var(--card-bg);
	border: 2px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 24px;
	min-height: 300px;
}

.loading-chart-card-md {
	background: var(--card-bg);
	border: 2px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 24px;
	min-height: 400px;
}

.loading-chart-card-lg {
	background: var(--card-bg);
	border: 2px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 24px;
	min-height: 500px;
}

.skeleton-chart-sm {
	height: 250px;
	width: 100%;
}

.skeleton-chart-md {
	height: 350px;
	width: 100%;
}

.skeleton-chart-lg {
	height: 450px;
	width: 100%;
}

/* ============================================
   MONTHLY SUMMARY STYLES
   ============================================ */

.rtc-hidden {
	display: none !important;
}

/* Monthly Metrics Grid - 3 columns, 2 rows */
.monthly-metrics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

@media (max-width: 1200px) {
	.monthly-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.monthly-metrics-grid {
		grid-template-columns: 1fr;
	}
}

/* Monthly Metric Cards */
.monthly-metric-card {
	background: #1e3a8a;
	padding: 24px;
	border-radius: 8px;
	color: white;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-align: center;
}

.monthly-metric-card.blue-dark {
	background: #1e3a8a;
}

.monthly-metric-card.blue {
	background: #2563eb;
}

.monthly-metric-card.blue-light {
	background: #60a5fa;
}

.monthly-metric-card .metric-icon {
	font-size: 24px;
	color: white;
}

.monthly-metric-card .metric-label {
	font-size: 14px;
	font-weight: 500;
	opacity: 0.9;
	color: white;
}

.monthly-metric-card .metric-value {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: white;
}

.monthly-metric-card .metric-main-value {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: white;
}

.monthly-metric-card .metric-percentage {
	font-size: 20px;
	font-weight: 600;
	color: white;
}

.monthly-metric-card .metric-sublabel {
	font-size: 12px;
	opacity: 0.8;
	color: white;
}

/* Split layout for nomination cards */
.monthly-metric-card .metric-numbers-split {
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	width: 100%;
	margin-top: 8px;
}

.monthly-metric-card .metric-left,
.monthly-metric-card .metric-right {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.monthly-metric-card .metric-right {
	align-items: flex-end;
	text-align: right;
}

.monthly-metric-card .metric-number-large {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: white;
}

.monthly-metric-card .metric-text-small {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.8;
	color: white;
}

/* Monthly Win Cards Row */
.win-cards-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

@media (max-width: 768px) {
	.win-cards-row {
		grid-template-columns: 1fr;
	}
}

.monthly-win-card {
	background: #1e3a8a;
	padding: 24px;
	border-radius: 8px;
	color: white;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.monthly-win-card.blue-dark {
	background: #1e3a8a;
}

.monthly-win-card.blue {
	background: #2563eb;
}

.monthly-win-card .win-label {
	font-size: 14px;
	font-weight: 500;
	opacity: 0.9;
	color: white;
}

.monthly-win-card .win-value {
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	color: white;
}

/* Monthly Charts Grids */
.monthly-charts-grid-top {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

@media (max-width: 1200px) {
	.monthly-charts-grid-top {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.monthly-charts-grid-top {
		grid-template-columns: 1fr;
	}
}

.monthly-charts-grid-bottom {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

@media (max-width: 768px) {
	.monthly-charts-grid-bottom {
		grid-template-columns: 1fr;
	}
}

/* Company Logos Section */
.company-logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	padding: 40px 0;
	margin-bottom: 40px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	min-height: 120px;
}

@media (max-width: 768px) {
	.company-logos {
		flex-wrap: wrap;
		gap: 20px;
	}
}

.company-logos img {
	max-height: 60px;
	max-width: 150px;
	object-fit: contain;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.company-logos img:hover {
	opacity: 1;
}

/* ============================================
   PER-COMPONENT LOADING STYLES
   Lazy-loading states for individual dashboard components
   ============================================ */

/* Component loading state. The skeleton is an opaque overlay on top of the card so stale
   content from the previous filter selection is covered while the new request runs. The
   previous content stays in the flow (visibility: hidden) so the card keeps its height and
   the page doesn't jump. On first load there is no previous content, so min-height applies. */
.component-loading {
	position: relative;
	min-height: 150px;
	overflow: hidden;
}

.component-loading > :not(.component-skeleton) {
	visibility: hidden;
}

.component-loading .component-skeleton {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--card-bg, #fff);
	overflow: hidden;
}

.brand-dark-blue-bg .component-loading .component-skeleton {
	background: transparent;
}

/* Summary row skeleton: mirrors the 5 metric cards in #team-summary-metrics */
.skeleton-summary-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	flex: 1;
}

.skeleton-summary-grid .skeleton-metric-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	border: 2px solid var(--border-light);
	border-radius: 12px;
}

.skeleton-summary-grid .skeleton-metric {
	width: 40%;
	margin-bottom: 0;
}

/* Single large number skeleton (Total Pipeline Value, Closed Won Revenue) */
.skeleton-metric-large {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.skeleton-metric-large-value {
	width: 55%;
	height: 56px;
}

@media (max-width: 1200px) {
	.skeleton-summary-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.skeleton-summary-grid {
		grid-template-columns: 1fr;
	}
}

/* Component loaded state with fade-in */
.component-loaded {
	animation: componentFadeIn 0.3s ease-out;
}

@keyframes componentFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Component error state */
.component-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--radius-md);
	min-height: 150px;
}

.component-error-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 150px;
	gap: 12px;
	color: #991b1b;
	padding: 24px;
	text-align: center;
}

.component-error-message .error-icon {
	color: #dc2626;
}

.component-error-message .error-icon svg {
	width: 32px;
	height: 32px;
}

.component-error-message span {
	font-size: 14px;
	font-weight: 500;
}

.retry-btn {
	padding: 8px 20px;
	background: var(--primary-blue);
	color: white;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: background-color 0.2s, transform 0.1s;
}

.retry-btn:hover {
	background: var(--dark-blue);
}

.retry-btn:active {
	transform: scale(0.98);
}

/* Skeleton grids for different component types */
.skeleton-metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.skeleton-performance-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.skeleton-time-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.skeleton-metric-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: var(--card-bg);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

/* Responsive skeleton grids */
@media (max-width: 1200px) {
	.skeleton-metrics-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.skeleton-time-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.skeleton-metrics-grid,
	.skeleton-performance-grid,
	.skeleton-time-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.skeleton-metrics-grid,
	.skeleton-performance-grid,
	.skeleton-time-grid {
		grid-template-columns: 1fr;
	}
}

/* Enhanced skeleton animation */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--border-light) 0%,
		#f1f5f9 50%,
		var(--border-light) 100%
	);
	background-size: 200% 100%;
	animation: skeletonShimmer 1.5s ease-in-out infinite;
	border-radius: var(--radius-sm);
}

@keyframes skeletonShimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}