/* Блок «Данные и аналитика» в админке. Графики — инлайновый SVG/CSS без библиотек,
   как и radar.js в остальном проекте. */

.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.chart-grid h4{margin:0 0 .7rem;font-size:.86rem;color:var(--muted);font-weight:500}

/* горизонтальные полосы: метка — полоса — значение */
.bars{display:flex;flex-direction:column;gap:.5rem}
.bar-row{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;align-items:center;gap:.6rem;
  font-size:.83rem}
.bar-row .lab{color:var(--text);overflow:hidden;text-overflow:ellipsis}
.bar-track{display:block;background:var(--hair);border-radius:999px;height:16px;overflow:hidden}
/* display:block обязателен: .bar-fill — это <span>, у inline-элемента width/height
   игнорируются и полоса схлопывается в 0×0 */
.bar-fill{display:block;height:100%;border-radius:999px;background:var(--accent);min-width:2px;
  transition:width .35s ease}
.bar-row .val{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8rem}

/* палитра градаций O1 — нейтральная шкала «самостоятельно → не выполнено».
   Это порядковая шкала результата, а не оценка «хорошо/плохо» по этапам. */
.bar-fill.g1{background:var(--g)}
.bar-fill.g2{background:var(--y)}
.bar-fill.g3{background:var(--o)}
.bar-fill.g4{background:var(--r)}
.bar-fill.neutral{background:var(--w)}

/* сгруппированные срезы PRE/POST */
.stage-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.stage-col h4{margin:0 0 .3rem;font-size:.86rem}
.stage-col .sub{font-size:.76rem;color:var(--muted);margin:0 0 .7rem}

/* столбцы гистограммы */
.hist{display:flex;align-items:flex-end;gap:.35rem;height:150px;padding-top:.5rem}
.hist-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.3rem;
  height:100%}
.hist-bar{width:100%;background:var(--accent);border-radius:6px 6px 0 0;min-height:2px;
  transition:height .35s ease}
.hist-lab{font-size:.68rem;color:var(--muted);white-space:nowrap}
.hist-val{font-size:.7rem;color:var(--text);font-variant-numeric:tabular-nums}

.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin-top:.7rem}
.legend span{display:flex;align-items:center;gap:.35rem}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px}

@media(max-width:700px){
  .bar-row{grid-template-columns:minmax(72px,38%) 1fr auto;font-size:.78rem}
  .hist{height:120px}
}