/* ced-charts.css — Premium chart styling for ced-charts.js
   Depends on Ced design tokens (--bg-*, --tx-*, --f-*, --sh-*, --r-*).
   Chart palette: --ch-1 through --ch-12.
   Glass tooltip, synced crosshair, legend toggle, minimal ink grid. */

/* ── CHART PALETTE ───────────────────────────────────────── */
:root {
	--ch-1: #3b82f6;
	--ch-2: #ef4444;
	--ch-3: #22c55e;
	--ch-4: #f59e0b;
	--ch-5: #8b5cf6;
	--ch-6: #ec4899;
	--ch-7: #06b6d4;
	--ch-8: #f97316;
	--ch-9: #14b8a6;
	--ch-10: #a855f7;
	--ch-11: #6366f1;
	--ch-12: #84cc16;

	--ch-grid: var(--tx-3, rgba(255, 255, 255, 0.08));
	--ch-axis: var(--tx-1, rgba(255, 255, 255, 0.75));
	--ch-tip-bg: var(--bg-1, rgba(9, 8, 13, 0.82));
	--ch-tip-bdr: var(--tx-3, rgba(255, 255, 255, 0.1));
}

/* Koligo theme — warm gold palette, navy grid */
[data-theme="koligo"] {
	--ch-1: #c4a265;
	--ch-2: #ef6b4a;
	--ch-3: #2db88a;
	--ch-4: #4a8ff0;
	--ch-5: #dbb97a;
	--ch-6: #e0607e;
	--ch-7: #3ac9c1;
	--ch-8: #f0a830;
	--ch-9: #6b9f5b;
	--ch-10: #a87be0;
	--ch-11: #5b8dd9;
	--ch-12: #d4c26a;

	--ch-grid: var(--tx-3, rgba(196, 162, 101, 0.08));
	--ch-axis: var(--tx-1, rgba(255, 255, 255, 0.75));
	--ch-tip-bg: var(--bg-1, rgba(6, 13, 26, 0.85));
	--ch-tip-bdr: var(--tx-3, rgba(196, 162, 101, 0.12));
}

/* Cream surface — dark chart ink on light background */
[data-surface="cream"] {
	--ch-1: #8c6430;
	--ch-2: #c44a2e;
	--ch-3: #1a8a5a;
	--ch-4: #2d6bc4;
	--ch-5: #a07038;
	--ch-6: #b8405a;
	--ch-7: #1a8a8a;
	--ch-8: #c47820;
	--ch-9: #4a7a3a;
	--ch-10: #7a50b8;
	--ch-11: #3a60b8;
	--ch-12: #8a9a30;

	--ch-grid: rgba(26, 21, 16, 0.12);
	--ch-axis: rgba(26, 21, 16, 0.92);
	--ch-tip-bg: rgba(26, 21, 16, 0.92);
	--ch-tip-bdr: rgba(196, 162, 101, 0.15);
}

/* Cream tooltip — light text on dark tooltip bg (scoped so cream legend/axis stay dark on cream) */
[data-surface="cream"] .ax-tip {
	--tx-0: rgba(255, 255, 255, 0.96);
	--tx-1: rgba(255, 255, 255, 0.86);
	--tx-2: rgba(255, 255, 255, 0.66);
}

/* ── CONTAINER ───────────────────────────────────────────── */
.ax {
	position: relative;
	width: 100%;
}
.ax svg {
	display: block;
}
.ax-wrap {
	position: relative;
	width: 100%;
}

/* ── RANGE SELECTOR ─────────────────────────────────────── */
.ax-range {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0 0 10px;
}
.ax-range-presets {
	display: flex;
	gap: 2px;
	border: 1px solid var(--ch-grid);
	border-radius: 8px;
	padding: 2px;
}
.ax-range-btn {
	background: none;
	border: none;
	padding: 4px 12px;
	border-radius: 6px;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	color: var(--ch-axis);
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}
.ax-range-btn:hover {
	background: var(--ch-grid);
}
.ax-range-btn.active {
	background: #c4a265;
	color: #0a0d1a;
}
.ax-range-custom {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}
.ax-range-sep {
	color: var(--ch-axis);
	font-size: 0.75rem;
}
.ax-range-input {
	background: transparent;
	border: 1px solid var(--ch-grid);
	border-radius: 6px;
	padding: 3px 8px;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	color: var(--ch-axis);
	outline: none;
	transition: border-color 0.15s;
}
.ax-range-input:focus {
	border-color: var(--ch-axis);
}
.ax-range-input::-webkit-calendar-picker-indicator {
	filter: invert(0.5);
}

/* ── GRID (horizontal only, minimal ink) ─────────────────── */
.ax-grid line {
	stroke: var(--ch-grid);
	stroke-width: 1;
	stroke-dasharray: 4, 4;
}

/* ── AXES (floating labels, no axis lines) ───────────────── */
.ax-axes text {
	font-family: var(--f-mono);
	font-size: 11.5px;
	font-weight: 500;
	fill: var(--ch-axis);
	letter-spacing: 0.02em;
}

/* ── MARKS (reference lines + bands, behind data) ────────── */
.ax-mark-line {
	stroke-width: 1;
	stroke-dasharray: 6, 3;
	opacity: 0.6;
}
.ax-mark-label {
	font-family: var(--f-mono);
	font-size: 9px;
	fill: var(--ch-axis);
}

/* ── SERIES ──────────────────────────────────────────────── */
.ax-s {
	transition: opacity 0.2s ease;
}
.ax-line {
	vector-effect: non-scaling-stroke;
}
.ax-bar {
	transition: opacity 0.15s ease;
}
.ax-dot {
	transition: opacity 0.15s ease;
}
.ax-wedge {
	stroke: var(--bg-0);
	stroke-width: 2;
}
.ax-pie-label {
	font-family: var(--f-ui);
	font-size: 11px;
	font-weight: 500;
	fill: var(--bg-0);
}

/* ── CROSSHAIR (dashed, subtle) ──────────────────────────── */
.ax-cross {
	stroke: var(--ch-axis);
	stroke-width: 1;
	stroke-dasharray: 4, 3;
	opacity: 0.4;
	pointer-events: none;
}

/* ── TOOLTIP (glass panel, sorted values) ────────────────── */
.ax-tip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background: var(--ch-tip-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--ch-tip-bdr);
	border-radius: var(--r-lg, 12px);
	box-shadow: var(--sh-lg, 0 12px 48px rgba(0, 0, 0, 0.7));
	padding: 10px 14px;
	pointer-events: none;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
	font-family: var(--f-ui);
	min-width: 140px;
}

.ax-tip-time {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	color: var(--tx-2);
	letter-spacing: 0.04em;
	margin-bottom: 6px;
	white-space: nowrap;
}

.ax-tip-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 0.8rem;
	line-height: 1.6;
}

.ax-tip-name {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--tx-1);
	white-space: nowrap;
}

.ax-tip-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	flex-shrink: 0;
}

.ax-tip-val {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--tx-0);
	white-space: nowrap;
}

/* Tooltip multi-column for many series */
.ax-tip-rows {
}
.ax-tip-cols {
	column-count: 2;
	column-gap: 20px;
}
.ax-tip-cols .ax-tip-row {
	break-inside: avoid;
}

/* ── LEGEND (columnar, click to toggle, sorted by value) ── */
.ax-leg {
	column-width: 210px;
	column-gap: 4px;
	padding: 8px 0 0;
}

.ax-leg-item {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
	transition: opacity 0.2s ease;
	font-size: 0.78rem;
	break-inside: avoid;
	height: 22px;
}
.ax-leg-item.off {
	opacity: 0.3;
}
.ax-leg-item.off .ax-leg-dot {
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 2px,
		var(--tx-3) 2px,
		var(--tx-3) 3px
	) !important;
}

.ax-leg-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	flex-shrink: 0;
}

.ax-leg-name {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	color: var(--tx-2);
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ax-leg-val {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: var(--tx-1);
	margin-left: 4px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── HEATMAP ────────────────────────────────────────────── */
.ax-heatmap {
}
.ax-heat-cell {
	transition: opacity 0.15s ease;
}
.ax-heat-cell:hover {
	opacity: 0.8;
	stroke: var(--ch-axis);
	stroke-width: 1.5;
}
.ax-heat-label {
	font-family: var(--f-mono);
	font-size: 11px;
	font-weight: 500;
	pointer-events: none;
}
.ax-heat-x,
.ax-heat-y {
	font-family: var(--f-mono);
	font-size: 11.5px;
	font-weight: 500;
	fill: var(--ch-axis);
}
.ax-heat-legend-label {
	font-family: var(--f-mono);
	font-size: 10px;
	fill: var(--ch-axis);
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ax-tip,
	.ax-s,
	.ax-bar,
	.ax-dot,
	.ax-leg-item {
		transition: none;
	}
}