/* ============================================
   ECHO B2B Admin Console — Charts
   ============================================ */
.chart-container { position: relative; width: 100%; }
.chart-container canvas { width: 100% !important; }
.chart-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-3); }
.chart-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-gray-800); }
.chart-subtitle { font-size: var(--font-size-xs); color: var(--color-gray-400); margin-top: 2px; }
.chart-legend { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-gray-600); }
.legend-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }
.legend-line { width: 20px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.svg-chart { width: 100%; overflow: visible; }
.svg-chart .grid-line { stroke: var(--color-gray-100); stroke-width: 1; }
.svg-chart .axis-label { font-size: 11px; fill: var(--color-gray-400); font-family: var(--font-family-base); }
.svg-chart .data-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.svg-chart .data-area { opacity: 0.08; }
.svg-chart .data-point { r: 4; stroke-width: 2; stroke: #fff; cursor: pointer; transition: r 0.15s ease; }
.svg-chart .data-point:hover { r: 6; }
.svg-chart .target-line { stroke-dasharray: 6 4; stroke-width: 1.5; opacity: 0.5; }
.sparkline { display: inline-block; vertical-align: middle; }
.donut-chart { display: flex; align-items: center; gap: var(--space-4); }
.donut-legend { display: flex; flex-direction: column; gap: var(--space-2); }
.donut-legend-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--font-size-sm); }
.donut-legend-label { display: flex; align-items: center; gap: var(--space-2); color: var(--color-gray-600); }
.donut-legend-dot { width: 10px; height: 10px; border-radius: var(--radius-full); }
.donut-legend-value { font-weight: var(--font-weight-semibold); color: var(--color-gray-800); }
canvas { letter-spacing: normal; }