/* ==========================================================================
   Дашборд «План-факт» — оформление виджетов и графиков.

   Только классы с префиксом dash-. Цвета и размеры берутся из переменных
   темы макета (site/assets/styles.css): --surface, --surface-2, --surface-3,
   --line, --line-soft, --ink, --ink-2, --ink-3, --brand, --accent,
   --ok, --warn, --err, --r.
   ========================================================================== */

/* каркас экрана */
.dash-root{display:grid;gap:14px}
/* на ноутбуке два графика в ряд не помещаются — подписи в полосах обрезаются */
@media (max-width:1500px){.dash-root .g2{grid-template-columns:minmax(0,1fr)}}

/* ряд виджетов: план, факт, объёмы, освоение */
.dash-kpis{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1500px){.dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.dash-kpis{grid-template-columns:1fr}}

/* фильтры: внутри карточки отступы и рамка макета не нужны */
.dash-filters{padding:0;background:transparent;border-bottom:0;gap:16px;align-items:flex-end}
.dash-filters .vstack{gap:4px}
.dash-filters .vstack>span{
  font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px;
}

/* список полос */
.dash-bars{display:grid;gap:10px}

/* строка графика: подпись, числа и две полосы (план, факт) */
.dash-bar-row{
  display:grid;gap:4px;padding:8px 10px;border:1px solid var(--line-soft);
  border-radius:var(--r);background:var(--surface-2);
}
.dash-bar-row.is-active{border-color:var(--accent);background:var(--surface)}
.dash-bar-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dash-bar-title{
  font-size:12.5px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-bar-title .mono{font-weight:500;color:var(--ink-3);margin-right:4px}
.dash-bar-nums{font-size:11.5px;color:var(--ink-2);white-space:nowrap;text-align:right}

/* полоса */
.dash-bar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.dash-bar-fill{display:block;height:100%;border-radius:4px;background:var(--brand);min-width:0}
.dash-bar-plan{background:var(--brand)}
.dash-bar-fact{background:var(--accent)}
.dash-bar-fill.is-ok{background:var(--ok)}
.dash-bar-fill.is-warn{background:var(--warn)}
.dash-bar-fill.is-err{background:var(--err)}
/* «нет данных» — пустая штрихованная полоса вместо нуля */
.dash-bar-empty{
  background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 4px,
    var(--surface-2) 4px,var(--surface-2) 8px);
}

/* Расхождение освоения (сумма и объём) и оговорка о плане периода.
   Базовые отступы наследуются от .hint — здесь только цвет и вес. */
.hint.dash-delta{color:var(--ink-2)}
.hint.dash-delta.is-big{color:var(--warn);font-weight:600}
.hint.dash-period-note{color:var(--ink-3)}