/* ============================================================
   charts.css — слой графиков (Chart.js). Владелец: Вкладка 2.
   Только стили холстов/боксов/обёрток графиков и их состояний.
   Цвета/отступы/радиусы — строго из дизайн-токенов (:root). Без хардкод-хексов.
   ============================================================ */

/* ---------- Базовый бокс графика (canvas + данные + fallback) ---------- */
.ds-chart-box {
  position: relative;
  min-height: var(--chart-h, 260px);
}

.ds-chart-box canvas {
  width: 100% !important;
  height: var(--chart-h, 240px) !important;
  display: block;
}

/* Варианты высоты бокса (адаптив высоты графиков — T237). */
.ds-chart-box.is-xs   { --chart-h: 120px; }
.ds-chart-box.is-sm   { --chart-h: 180px; }
.ds-chart-box.is-lg   { --chart-h: 340px; }
.ds-chart-box.is-xl   { --chart-h: 420px; }

@media (max-width: 720px) {
  .ds-chart-box        { --chart-h: 220px; }
  .ds-chart-box.is-lg,
  .ds-chart-box.is-xl  { --chart-h: 260px; }
}

/* ---------- Единая обёртка .chart-wrap: заголовок · период · действия ---------- */
.chart-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.chart-wrap-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.chart-wrap-title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--txt);
  letter-spacing: .01em;
}

.chart-wrap-period {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.chart-wrap-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Кнопка экспорта PNG (T239/T382). */
.ds-chart-export {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.ds-chart-export:hover {
  color: var(--txt);
  border-color: var(--border-strong);
}
.ds-chart-export:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Легенда (когда нужна HTML-легенда поверх встроенной) ---------- */
.ds-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.ds-chart-legend .lg-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.ds-chart-legend .lg-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--lg-color, var(--chart-1));
  flex: none;
}

/* ---------- Спарклайны (мини-линия в ячейке/метрике — T227/T343) ---------- */
.ds-spark {
  position: relative;
  width: var(--spark-w, 96px);
  height: var(--spark-h, 28px);
  min-height: 0;
  display: inline-block;
  vertical-align: middle;
}
.ds-spark canvas {
  width: 100% !important;
  height: var(--spark-h, 28px) !important;
}
.ds-spark.is-sm { --spark-w: 64px; --spark-h: 22px; }
.ds-spark.is-lg { --spark-w: 140px; --spark-h: 40px; }

/* ---------- Gauge: центральная подпись (T229/T306/T344) ---------- */
.ds-gauge {
  position: relative;
}
.ds-gauge-label {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.ds-gauge-label .g-val {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ds-gauge-label .g-cap {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  color: var(--muted);
}

/* ---------- Donut: центральная подпись (T226/T307) ---------- */
.ds-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ds-donut-center .d-val {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ds-donut-center .d-cap {
  font-size: var(--fs-2xs);
  color: var(--muted);
}

/* ---------- Пустое состояние графика (T235/T386) ---------- */
.ds-chart-empty {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.ds-chart-empty .ds-icon { color: var(--text-subtle); opacity: .7; }
.ds-chart-box.is-empty .ds-chart-empty { display: flex; }
.ds-chart-box.is-empty canvas { visibility: hidden; }

/* ---------- Состояние загрузки графика: скелетон (T236/T387) ---------- */
.ds-chart-skeleton {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: var(--r-md);
  background:
    linear-gradient(90deg,
      var(--skeleton-a) 0%,
      var(--skeleton-b) 50%,
      var(--skeleton-a) 100%);
  background-size: 200% 100%;
  animation: ds-chart-shimmer 1.2s linear infinite;
}
.ds-chart-box.is-loading .ds-chart-skeleton { display: block; }
.ds-chart-box.is-loading canvas { visibility: hidden; }

@keyframes ds-chart-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Fallback-таблица (Chart.js не загрузился — T214) ---------- */
.ds-chart-fallback {
  display: none;
  margin-top: var(--sp-3);
}
.ds-chart-box.is-fallback .ds-chart-fallback { display: block; }
.ds-chart-box.is-fallback canvas { display: none; }

/* Скрытая таблица-данные для доступности (a11y — T238/T391). */
.ds-chart-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Сетка чарт-карточек (страницы аналитики/дашборда) ---------- */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(var(--chart-cols, 2), minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 880px) {
  .chart-grid { grid-template-columns: 1fr; }
}

/* ---------- reduced-motion: гасим shimmer и любые переходы (T388) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ds-chart-skeleton { animation: none; }
  .ds-chart-export { transition: none; }
}

/* ---------- Печать: графики не должны ломать печатную версию (T393) ---------- */
@media print {
  .ds-chart-skeleton,
  .ds-chart-export,
  .chart-wrap-actions { display: none !important; }
  .ds-chart-box canvas { break-inside: avoid; }
  /* На печати показываем таблицу-данные вместо холста. */
  .ds-chart-a11y {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    margin: var(--sp-2) 0 0;
    white-space: normal;
  }
}

/* ============================================================
 * Волна 5 — KPI-карточки руководителя (#46-54), тренд-стрелки (#23),
 * дайджест (#80). Использует существующие токены дизайн-системы.
 * ============================================================ */
.ds-kpi-grid {
  display: grid;
  gap: var(--space-3, 12px);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ds-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3, 14px);
  background: var(--card, #181b22);
  border: 1px solid var(--line, #272b35);
  border-radius: var(--radius, 12px);
  outline-offset: 2px;
}
.ds-kpi-card:focus-visible { outline: 2px solid var(--accent, #60a5fa); }
.ds-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ds-kpi-title { color: var(--muted, #9aa3b2); font-size: .82rem; }
.ds-kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--txt, #e6e8ee); }
.ds-kpi-delta { font-size: .82rem; display: flex; align-items: baseline; gap: 6px; }
.ds-kpi-delta-cap { color: var(--muted, #9aa3b2); font-size: .72rem; }
.ds-kpi-delta.is-good, .ds-trend.is-good { color: var(--ok, #34d399); }
.ds-kpi-delta.is-bad,  .ds-trend.is-bad  { color: var(--bad, #f87171); }
.ds-kpi-delta.is-flat, .ds-trend.is-flat { color: var(--muted, #9aa3b2); }
.ds-kpi-badge {
  font-size: .68rem; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line, #272b35);
}
.ds-kpi-badge.is-ok   { color: var(--ok, #34d399);  border-color: color-mix(in srgb, var(--ok, #34d399) 40%, transparent); }
.ds-kpi-badge.is-risk { color: var(--warn, #fbbf24); border-color: color-mix(in srgb, var(--warn, #fbbf24) 40%, transparent); }
.ds-kpi-badge.is-fail { color: var(--bad, #f87171); border-color: color-mix(in srgb, var(--bad, #f87171) 40%, transparent); }
.ds-kpi-progress {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--surface-4, #222733);
}
.ds-kpi-progress > span { display: block; height: 100%; background: var(--accent, #60a5fa); border-radius: 999px; }
.ds-kpi-spark { height: 32px; }
.ds-kpi-link { font-size: .76rem; color: var(--muted, #9aa3b2); text-decoration: none; margin-top: auto; }
.ds-kpi-link:hover { color: var(--accent, #60a5fa); }
.ds-trend { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.ds-digest { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.ds-digest li { color: var(--txt, #e6e8ee); font-size: .9rem; }
tr.is-risk td { color: var(--bad, #f87171); }
@media print {
  .ds-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .ds-kpi-card { break-inside: avoid; border-color: #ccc; }
}