/* Chart styles (reference data-viz tokens), shared by the CRM and ERP. */
:root { --chart-surface: #fcfcfb; --chart-ink-2: #52514e; --chart-muted: #898781; --chart-grid: #e1e0d9; --chart-axis: #c3c2b7; }
:root[data-theme="dark"] { --chart-surface: #1a1a1d; --chart-ink-2: #c3c2b7; --chart-muted: #8f8e88; --chart-grid: #2c2c2e; --chart-axis: #3d3d40; }
.crm-gl { stroke: var(--chart-grid); }
.crm-gl0 { stroke: var(--chart-axis); }
.crm-ring { stroke: var(--chart-surface); }
.crm-svg { display: block; background: var(--chart-surface); border-radius: 6px; overflow: visible; }
.crm-svg text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.crm-axis { font-size: 11px; fill: var(--chart-muted); font-variant-numeric: tabular-nums; }
.crm-cat { font-size: 12px; fill: var(--chart-ink-2); }
.crm-val { font-size: 11px; fill: var(--chart-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.crm-mark { outline: none; transition: opacity .12s; }
.crm-mark:hover { opacity: .78; }
.crm-mark:focus-visible { opacity: .78; stroke: var(--text); stroke-width: 1.5; }
.crm-tip { position: fixed; z-index: 3000; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); padding: 6px 10px; display: none; max-width: 280px; }
.crm-tip-v { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.crm-tip-l { font-size: 12px; color: var(--text-2); }
.crm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--chart-ink-2); }
.crm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.crm-legend-item i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }