/* نمودارها: کارت نمودار، لجند، تولتیپ، محور */
.chart-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.chart-card .cc-h { display: flex; align-items: flex-start; gap: var(--s2); }
.chart-card .cc-h h3 { font-size: 15px; }
.chart-card .cc-h .sub { font-size: var(--fs-xs); color: var(--ink-3); }
.chart-card .cc-act { margin-inline-start: auto; display: flex; gap: 4px; }
.chart-card .cc-act button { border: 1px solid transparent; background: transparent; border-radius: 6px; height: 28px; padding: 0 6px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
.chart-card .cc-act button:hover, .chart-card .cc-act button.on { background: var(--bg-sunken); color: var(--ink); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--ink-2); }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.chart-legend .sw.bar { width: 10px; height: 10px; border-radius: 3px; }
.chart-legend .sw.dash { background: none !important; border-top: 2px dashed currentColor; height: 0; }
.chart-box { position: relative; width: 100%; direction: ltr; }
.chart-box svg { display: block; width: 100%; overflow: visible; }
.chart-box text { font-family: var(--font); fill: var(--ink-3); font-size: 11px; }
.chart-box .grid-l { stroke: var(--chart-grid); stroke-width: 1; }
.chart-box .axis-l { stroke: var(--chart-axis); stroke-width: 1; }
.chart-box .xh { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-box .lbl-strong { fill: var(--ink-2); font-weight: 700; }
.chart-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: var(--shadow-float); padding: 8px 10px; font-size: 12px; direction: rtl; min-width: 150px; display: none; }
.chart-tip .tt-h { font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.chart-tip .tt-r { display: flex; align-items: center; gap: 6px; justify-content: space-between; color: var(--ink-2); }
.chart-tip .tt-r b { color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tip .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.chart-table { max-height: 300px; overflow: auto; }
.spark { display: block; }
.spark path { fill: none; stroke: var(--series-1); stroke-width: 1.6; }