/* ===========================================================
   TABLO — стили SVG-чартов  ·  tablo-charts.css  v1.1
   Требует: tokens.css  (использует var(--…) токены)
   Принцип: НЕЙТРАЛЬНЫЙ ХРОМ — ЦВЕТНЫЕ ДАННЫЕ.
   Хром осей/сетки/подписей — нейтраль. Цвет приходит инлайном на данных.
   Парные классы к window.Tablo (tablo-charts.js).
   =========================================================== */

/* — контейнер — */
.chart{width:100%;position:relative;overflow:visible}
.chart svg{display:block;width:100%;height:auto;overflow:visible}

/* — оси и сетка (нейтральный хром) — */
.chart-grid{stroke:var(--border-2)}
.chart-axis{stroke:var(--border)}
.chart-axislbl{
  font-family:var(--font-mono);font-size:10px;
  fill:var(--ink-4);font-variant-numeric:tabular-nums
}
.chart-catlbl{
  font-family:var(--font);font-size:10.5px;fill:var(--ink-4)
}

/* — линии / зоны — */
.chart-line{vector-effect:non-scaling-stroke}
.chart-area{stroke:none}
.chart-dot{cursor:default}
.chart-dot:hover{r:4.2}

/* — бары — */
.chart-bar{shape-rendering:geometricPrecision;cursor:default;transition:filter .12s}
.chart-bar:hover{filter:brightness(.94)}

/* — donut / pie — */
.chart-arc{cursor:default;transition:filter .12s}
.chart-arc:hover{filter:brightness(.95)}
.chart-center-val{
  font-family:var(--font-mono);font-size:19px;font-weight:600;
  fill:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums
}
.chart-center-lbl{font-family:var(--font);font-size:10.5px;fill:var(--ink-4)}

/* — gauge — */
.chart-gauge-track{stroke:none}
.chart-gauge-fill{stroke:none}

/* — воронка — */
.chart-funnel-bar{cursor:default;transition:filter .12s}
.chart-funnel-bar:hover{filter:brightness(.95)}
.chart-funnel-lbl{
  font-family:var(--font);font-size:11px;font-weight:500;fill:#fff;
  paint-order:stroke;pointer-events:none
}
.chart-funnel-conv{
  font-family:var(--font-mono);font-size:10px;fill:var(--ink-4);
  font-variant-numeric:tabular-nums
}

/* — heatmap — */
.chart-hm-cell{cursor:default;transition:filter .12s}
.chart-hm-cell:hover{filter:brightness(.92)}
.chart-hm-lbl{font-family:var(--font);font-size:9.5px;fill:var(--ink-4)}

/* — bullet — */
.chart-bullet-range{shape-rendering:crispEdges}
.chart-bullet-bar{cursor:default}
.chart-bullet-target{shape-rendering:crispEdges}

/* — progress — */
.chart-progress-track{}
.chart-progress-fill{cursor:default}

/* — trend (KPI-комбо) — */
.chart-trend{display:flex;flex-direction:column;gap:6px;width:100%}
.chart-trend-main{display:flex;align-items:baseline;gap:9px}
.chart-trend-num{
  font-family:var(--font-mono);font-size:24px;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1
}
.chart-trend-delta{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums
}
.chart-trend-delta.up{color:var(--earn)}
.chart-trend-delta.down{color:var(--cold)}
.chart-trend-spark{width:100%}

/* — легенда — */
.chart-legend{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin-top:10px;padding:0 2px
}
.chart-legend-item{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font);font-size:12px;color:var(--ink-3);font-weight:500
}
.chart-legend-item i{
  width:9px;height:9px;border-radius:3px;flex-shrink:0;display:inline-block
}

/* — пустое состояние — */
.chart-empty{
  display:flex;align-items:center;justify-content:center;
  min-height:80px;width:100%;
  font-family:var(--font);font-size:12.5px;color:var(--ink-4);
  border:1px dashed var(--border);border-radius:var(--r-card);
  background:var(--bg);padding:18px;text-align:center
}

/* — тултип (опц. div-режим; по умолчанию используется нативный <title>) — */
.chart-tip{
  position:absolute;z-index:20;pointer-events:none;white-space:nowrap;
  background:var(--ink);color:#fff;
  font-family:var(--font);font-size:11.5px;
  padding:6px 10px;border-radius:7px;box-shadow:var(--shadow-md);
  opacity:0;transition:opacity .12s
}
.chart-tip.show{opacity:1}
.chart-tip b{font-weight:700;display:block;margin-bottom:2px}

/* — reduced-motion: глушим переходы данных — */
@media(prefers-reduced-motion:reduce){
  .chart-bar,.chart-arc,.chart-funnel-bar,.chart-hm-cell,
  .chart-dot,.chart-progress-fill,.chart-bullet-bar,.chart-tip{transition:none}
}

/* === ADVANCED — слой пункта управления (v1.2) === */
.chart-band{pointer-events:none}
.chart-refline,.chart-marker{pointer-events:none}
.chart-anom{filter:drop-shadow(0 0 2px var(--cold))}
@keyframes tablo-anom-pulse{0%,100%{r:4.5}50%{r:6}}
@media (prefers-reduced-motion:no-preference){.chart-anom{animation:tablo-anom-pulse 1.6s ease-in-out infinite}}
/* сортируемые таблицы */
.th-sortable{user-select:none;position:relative;white-space:nowrap}
.th-sortable:hover{color:var(--ink)}
.th-sortable::after{content:'';opacity:.35;margin-left:5px;font-size:9px}
.th-sortable.sort-asc::after{content:'▲';opacity:.9}
.th-sortable.sort-desc::after{content:'▼';opacity:.9}
/* активный cross-filter */
.filter-active{outline:2px solid var(--leads);outline-offset:1px;border-radius:6px}
/* small multiples */
.tablo-small-multiples{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sm-cell{border:1px solid var(--border-2);border-radius:10px;padding:8px 10px;background:var(--surface)}
.sm-cap{font:600 11px var(--font);color:var(--ink-3);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}