/* ═══════════════════════════════════════════════════════════════════════════════
   ECharts Global Styles — Open-Meteo Weather

   Shared CSS for all ECharts chart instances across the application.
   Provides consistent theming, tooltip styling, and responsive behavior
   that integrates with the application's design system (Tailwind + shadcn).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Chart Wrapper ────────────────────────────────────────────────────────── */

.echart-wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* ─── Chart Container (legacy class support) ───────────────────────────────── */

.echarts-container {
	width: 100%;
	height: 100%;
	min-height: 300px;
}

/* Ensure canvas background is always transparent so our page bg shows through */
.echart-wrapper canvas,
.echarts-container canvas {
	background: transparent !important;
}

/* ─── Tooltip Styling ──────────────────────────────────────────────────────── */

/* Override ECharts' default tooltip to match the application's popover design */
.echarts-tooltip {
	background: hsl(var(--popover)) !important;
	border: 1px solid hsl(var(--border)) !important;
	border-radius: var(--radius, 0.5rem) !important;
	box-shadow:
		0 4px 6px -1px rgb(0 0 0 / 0.1),
		0 2px 4px -2px rgb(0 0 0 / 0.05) !important;
	padding: 0.625rem 0.75rem !important;
	font-size: 0.8125rem !important;
	line-height: 1.4 !important;
	max-width: min(90vw, 480px) !important;
	pointer-events: none;
}

.echarts-tooltip-content {
	color: hsl(var(--popover-foreground)) !important;
}

/* Tooltip marker dots — make them slightly larger and rounded */
.echarts-tooltip .echarts-tooltip-marker,
.echarts-tooltip span[style*="border-radius"] {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.25rem;
}

/* ─── Loading Mask ─────────────────────────────────────────────────────────── */

.echarts-loading-mask {
	background: hsl(var(--background) / 0.8) !important;
}

/* ─── Light Mode Adjustments ───────────────────────────────────────────────── */

[data-theme='light'] .echart-wrapper,
[data-theme='light'] .echarts-container,
:root:not(.dark):not([data-theme='dark']) .echart-wrapper,
:root:not(.dark):not([data-theme='dark']) .echarts-container {
	color: hsl(var(--foreground));
}

[data-theme='light'] .echarts-tooltip,
:root:not(.dark):not([data-theme='dark']) .echarts-tooltip {
	color: hsl(var(--popover-foreground)) !important;
}

/* ─── Dark Mode Adjustments ────────────────────────────────────────────────── */

.dark .echart-wrapper,
[data-theme='dark'] .echart-wrapper,
.dark .echarts-container,
[data-theme='dark'] .echarts-container {
	color: hsl(var(--foreground));
}

.dark .echarts-tooltip,
[data-theme='dark'] .echarts-tooltip {
	color: hsl(var(--popover-foreground)) !important;
	box-shadow:
		0 4px 6px -1px rgb(0 0 0 / 0.3),
		0 2px 4px -2px rgb(0 0 0 / 0.15) !important;
}

/* ─── Toolbox Icon Overrides ───────────────────────────────────────────────── */

/* Make sure the toolbox icons are visually subtle until hovered */
.echart-wrapper [class*="toolbox"],
.echarts-container [class*="toolbox"] {
	opacity: 0.6;
	transition: opacity 150ms ease;
}

.echart-wrapper:hover [class*="toolbox"],
.echarts-container:hover [class*="toolbox"] {
	opacity: 1;
}

/* ─── Chart Spacing ────────────────────────────────────────────────────────── */

/* Add consistent vertical spacing between stacked chart instances */
.chart-content .echart-wrapper + .echart-wrapper {
	margin-top: 0.5rem;
}

/* ─── Responsive Sizing ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.echarts-container {
		min-height: 240px;
	}

	/* Slightly smaller tooltips on mobile */
	.echarts-tooltip {
		font-size: 0.75rem !important;
		padding: 0.5rem 0.625rem !important;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.echarts-container {
		min-height: 280px;
	}
}

/* ─── Print Styles ─────────────────────────────────────────────────────────── */

@media print {
	.echart-wrapper,
	.echarts-container {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Hide interactive elements when printing */
	.echart-wrapper [class*="toolbox"],
	.echarts-container [class*="toolbox"],
	.chart-toolbar {
		display: none !important;
	}
}

/* ─── Accessibility ────────────────────────────────────────────────────────── */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.echart-wrapper *,
	.echarts-container * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}