/* Дашборд: bento-раскладка главной, графики, полосы тарифов.

   Файл подключается только на главной, но остаётся в документе после
   ухода с неё, поэтому уточнения общих классов (.seg, .card-header,
   .bar-row) заперты внутри .dash-page. Значения берутся только из токенов
   admin.css — своих цветов, радиусов и таймингов у раздела нет.

   Раскладка, KPI-плашки и пустые состояния переехали в общий слой
   (ui.css: .bento, .stats-grid, .stat, .empty), поэтому здесь остались
   только правила самой главной. */

/* ===================== ВЕРТИКАЛЬ СТРАНИЦЫ ===================== */

/* Блоки главной идут одной вертикалью с тем же шагом, что и колонки
   внутри .bento — иначе ряды сетки и промежутки между ними спорят. */
.dash-page > * + *{ margin-top:16px }

/* Курс — число, поэтому моноширинные цифры: иначе строка дёргается
   при каждом пересчёте. */
.course_currency{ font-variant-numeric:tabular-nums }

/* ===================== ПЕРЕКЛЮЧАТЕЛИ ===================== */

/* Пять периодов подряд в одну строку помещаются не всегда, а .seg
   в общем слое не переносится. */
.dash-page .seg{ flex-wrap:wrap; max-width:100% }

/* Отдачи на нажатие у сегмента в общем слое нет — без неё клик по
   переключателю ощущается как промах. */
.dash-page .seg__item{
  transition:color var(--fast), background var(--fast), transform var(--fast);
}
.dash-page .seg__item:active{ transform:scale(.98) }

/* ===================== ПОКАЗАТЕЛИ ===================== */

/* Обёртка нужна ради оговорки в title: StatCard её не принимает, а
   терять пояснение, откуда взялось число, нельзя. */
.stat-hold{ display:flex }
.stat-hold > .stat{ flex:1 }

/* ===================== ГРУППЫ ПОКАЗАТЕЛЕЙ ===================== */

.dash-block{ margin-top:18px }
.dash-block__title{
  font:13px/1 Roboto-Medium, Arial, sans-serif;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 10px 2px;
}

/* Ровно четыре в ряд и одинаковая высота: grid-auto-rows:1fr выравнивает
   карточки, у которых подпись перенеслась на две строки. */
.dash-block__grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:1fr;
}
.dash-block__grid .stat-hold{ display:flex }
.dash-block__grid .stat-hold > .stat{ flex:1 }

@media (max-width:1100px){ .dash-block__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:560px){ .dash-block__grid{ grid-template-columns:1fr } }

/* ===================== КАРТОЧКИ ===================== */

.dash-page .card-header .title-with-icon{
  display:flex; align-items:center; gap:9px; min-width:0;
}
.dash-page .card-header .title-with-icon i{ color:var(--accent); opacity:.85; font-size:15px }

/* Метрика и период графика — одной полосой под шапкой: раньше метрики
   стояли над графиком, а периоды под ним, и два переключателя одного
   графика оказывались в разных концах карточки. */
.dash-chart__bar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; padding:16px 18px 0;
}

/* Высота бублика фиксирована: она же задана константой в RevenueChart,
   иначе аспект из системы и размер SVG расходятся. */
.chart-square{ height:200px; width:100% }

/* Карточки одного ряда тянутся по самой высокой. Тело растягиваем, иначе
   график, легенда и кнопка «Перейти к тарифам» повисают посреди пустоты. */
.dash-chart,
.dash-donut,
.dash-tarifs{ display:flex; flex-direction:column }
.dash-chart > .pad,
.dash-donut > .pad,
.dash-tarifs > .pad{ flex:1 }
.dash-chart > .pad{ padding-top:14px }
/* Бублик и легенда в две колонки: в столбик бублик раздувал карточку
   на всю высоту соседней, а под легендой оставалась пустота. */
.dash-donut-body{ display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:center }
@media (max-width:900px){ .dash-donut-body{ grid-template-columns:1fr } }
/* Пустое состояние занимает обе строки: иначе оно липнет к верху карточки,
   а под ним остаётся пустая полоса от ряда легенды. */
.dash-donut-body .empty{ grid-column:1 / -1 }
.dash-tarifs-link{ display:block }

/* Две плашки в строку: названия платформ короткие, в один столбец
   легенда растягивает карточку. */
.hwid-pill{ flex:1 1 100% }
.dash-donut .tab-result-total-type{
  border-radius:var(--radius-sm); padding:9px 12px;
  font-variant-numeric:tabular-nums;
  transition:background var(--fast), border-color var(--fast);
}
.dash-donut .tab-result-total-type:hover{
  background:var(--surface-hover); border-color:var(--border-strong);
}

/* Полоса тарифа: подпись тянется, счётчик и процент — фиксированные.
   Раньше количество стояло внутри подписи, и у длинных названий вроде
   «Classic · 30 дн. (бонусный)» его срезало многоточием вместе с текстом.
   Правило привязано к карточке: полосы .bar-row есть и в других разделах,
   а этот файл после ухода со страницы остаётся в документе. */
/* Базовая .bar-row — грид из трёх колонок; здесь колонки уже, чтобы в
   узкую карточку дашборда влезли и подпись, и счётчик, и процент. */
.dash-tarifs .bar-row--tariff{
  gap:12px;
  grid-template-columns:minmax(0, 1fr) 96px 42px;
}

.dash-tarifs .bar-row--tariff .bar-label{
  min-width:0;
  display:flex; align-items:baseline; gap:8px;
  white-space:normal; overflow:visible;
}
.dash-tarifs .bar-name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Не сжимается и не обрезается никогда — ради него всё и переделано. */
.dash-tarifs .bar-count{
  flex:none; color:var(--accent-hover); font-size:13px;
  font-variant-numeric:tabular-nums;
}
@media (max-width:1400px){
  .dash-tarifs .bar-row--tariff{ grid-template-columns:minmax(0, 1fr) 70px 42px }
}

/* ===================== ГРАФИКИ ===================== */

/* Chart.js в проект не тянем, оба графика рисуются в SVG вручную. Цвета
   заданы здесь, а не атрибутами fill/stroke: в презентационном атрибуте
   var() поддержан не везде, в таблице стилей — везде. */
.chart-grid{ stroke:var(--border) }
.chart-axis{ fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums }
.chart-line{ fill:none; stroke:var(--accent); stroke-width:2.5 }
.chart-area-from{ stop-color:var(--accent); stop-opacity:.28 }
.chart-area-to{ stop-color:var(--accent); stop-opacity:0 }
.chart-dot{ fill:var(--accent) }
.chart-dot--today{ fill:var(--good) }
.chart-cursor{ stroke:var(--border-strong) }
.chart-hit{ cursor:crosshair }

/* Разделитель между секторами — цвет поверхности карточки, чтобы
   выглядел как зазор, а не как обводка. */
.donut-slice{
  stroke:var(--surface); stroke-width:2; cursor:pointer;
  transition:opacity var(--fast);
}
/* Сектор кликабельный и уже готов к анимации прозрачности, но самого
   :hover не было — курсор менялся, а сектор никак не отзывался. */
.donut-slice:hover{ opacity:.82 }

.chart-tip{
  position:absolute; transform:translate(-50%, -100%); pointer-events:none;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-xs); box-shadow:var(--shadow-soft);
  padding:8px 11px; font-size:12.5px; line-height:1.4; color:var(--text);
  white-space:nowrap; z-index:3; font-variant-numeric:tabular-nums;
}
.chart-tip-title{ color:var(--muted); margin-bottom:3px }

@media (max-width:680px){
  .hwid-pill{ flex:1 1 100% }
  .dash-chart__bar{ padding:14px 14px 0 }
}

/* Два переключателя в шапке карточки тарифов: на узком экране переносятся
   под заголовок, а не наезжают на него. */
.dash-tarifs__switches{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
/* Подпись под шапкой: какой период показан и от какого числа проценты. */
.dash-tarifs__period{
  margin:0 0 12px; color:var(--text-dim); font-size:12px; line-height:1.4;
}
.dash-tarifs__period b{ color:var(--text); font-variant-numeric:tabular-nums }
@media (max-width:900px){
  .dash-page .dash-tarifs .card-header{ flex-wrap:wrap }
  .dash-tarifs__switches{ width:100% }
}