/**
 * Overview Screen Styles - Redesigned
 *
 * Dashboard landing page with elegant layout and refined visuals.
 */

.overview {
	max-width: var(--container-xl);
	height: 100%;
	animation: fade-in var(--duration-base) var(--ease-out-expo);
}

/* ========================================
   LOADING STATE
   ======================================== */

.overview__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	gap: var(--space-6);
}

.overview__spinner {
	width: 48px;
	height: 48px;
	border: 4px solid var(--color-gray-300);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: overview-spin 0.8s linear infinite;
}

@keyframes overview-spin {
	to {
		transform: rotate(360deg);
	}
}

.overview__loading p {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
	margin: 0;
}

/* ========================================
   STATS SECTION
   ======================================== */

.overview__stats-section {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	margin-bottom: var(--space-6);
	box-shadow: var(--shadow-sm);
	animation: slide-up var(--duration-base) var(--ease-out-expo);
}

.overview__stats-pills {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	flex-wrap: wrap;
}

.overview__stat-pill {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-full);
	min-width: 120px;
	transition: all var(--duration-base) var(--ease-out-expo);
	box-shadow: var(--shadow-xs);
}

.overview__stat-pill:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.overview__stat-number {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-none);
}

.overview__stat-label {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	opacity: 0.9;
}

.overview__stat-pill--indexed {
	background: var(--color-success-bg);
	color: var(--color-success-dark);
}

.overview__stat-pill--queued {
	background: var(--color-info-bg);
	color: var(--color-info-dark);
}

.overview__stat-pill--failed {
	background: var(--color-error-bg);
	color: var(--color-error-dark);
}

.overview__last-synced {
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-light);
}

.overview__last-synced-label {
	font-weight: var(--weight-medium);
	margin-right: var(--space-2);
}

.overview__last-synced-value {
	font-weight: var(--weight-semibold);
	color: var(--color-text-primary);
}

/* ========================================
   PLATFORM IFRAME CONTAINER
   ======================================== */

.overview__platform {
	height: 100%;
	min-height: 600px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--color-border);
	animation: scale-in var(--duration-base) var(--ease-out-expo) 0.1s both;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.overview__stats-section {
		padding: var(--space-6);
	}

	.overview__stats-pills {
		gap: var(--space-3);
	}

	.overview__stat-pill {
		min-width: 100px;
		padding: var(--space-3) var(--space-6);
	}

	.overview__stat-number {
		font-size: var(--text-2xl);
	}

	.overview__stat-label {
		font-size: var(--text-xs);
	}

	.overview__last-synced {
		font-size: var(--text-sm);
	}

	.overview__platform {
		min-height: 400px;
		border-radius: var(--radius-lg);
	}
}