/**
 * Zogby Charts Library CSS
 *
 * Shared styles for the SVG/CSS charts rendered by inc/charts.php.
 * Per-instance parametric values (bar height, fill opacity, fill width)
 * are passed via CSS custom properties or inline style attributes.
 */

/* Horizontal bar chart */
.zg-hbar-wrap { --zg-hbar-height: 1.75rem; }
.zg-hbar-track {
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	height: var(--zg-hbar-height);
	margin-bottom: 0.25rem;
}
.zg-hbar-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.4s ease;
}
.zg-hbar-row { margin-bottom: 0.75rem; }
.zg-hbar-label {
	font-size: 0.875rem;
	margin-bottom: 0.2rem;
	display: flex;
	justify-content: space-between;
}

/* Radar / spider chart */
.zg-radar-grid { fill: none; stroke: #d1d5db; stroke-width: 1; }
.zg-radar-axis { stroke: #d1d5db; stroke-width: 1; }
.zg-radar-poly { fill: var(--zg-accent); stroke: var(--zg-accent); stroke-width: 2; }
.zg-radar-dot { fill: var(--zg-accent); }
.zg-radar-label {
	font-size: 12px;
	fill: #374151;
	text-anchor: middle;
	dominant-baseline: middle;
}

/* Comparison dots / lollipop chart */
.zg-dot-label { font-size: 13px; fill: #374151; dominant-baseline: middle; }
.zg-dot-line { stroke: #e5e7eb; stroke-width: 2; }
.zg-dot-circle { fill: var(--zg-accent); }
.zg-dot-val { font-size: 11px; fill: #6b7280; dominant-baseline: middle; }
.zg-dot-axis { stroke: #d1d5db; stroke-width: 1; }
.zg-dot-axis-label { font-size: 10px; fill: #9ca3af; text-anchor: middle; }

/* Funnel / pyramid chart */
.zg-funnel-label {
	font-size: 13px;
	fill: #fff;
	text-anchor: middle;
	dominant-baseline: middle;
	font-weight: 600;
}
.zg-funnel-val {
	font-size: 11px;
	fill: rgba(255, 255, 255, 0.85);
	text-anchor: middle;
	dominant-baseline: middle;
}

/* Gauge chart */
.zg-gauge-track { fill: none; stroke: #e5e7eb; stroke-linecap: round; }
.zg-gauge-fill { fill: none; stroke: var(--zg-accent); stroke-linecap: round; }
.zg-gauge-value {
	font-size: 40px;
	font-weight: 700;
	fill: #111827;
	text-anchor: middle;
}
.zg-gauge-label { font-size: 14px; fill: #6b7280; text-anchor: middle; }
.zg-gauge-minmax { font-size: 11px; fill: #9ca3af; }

/* Pie / donut legend (previously inline on wrap + items) */
.zg-pie-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
}
.zg-pie-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.zg-pie-legend-swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.zg-pie-legend-pct { color: #6b7280; }