/* Utility-классы: фиксированные размеры аватаров/фото, часто
   используемые комбинации стилей. Заменяют inline `style="..."`
   из шаблонов (C3 audit) — лучшая maintainability + меньше HTML. */

/* ── Аватары / иконки (квадратные блоки) ────────────────── */
.avatar-sm { width: 44px; height: 44px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 64px; height: 64px; }

/* ── Фото-превью ─────────────────────────────────────────── */
.photo-sm { width: 64px; height: 64px; }
.photo-md { width: 96px; height: 96px; }
.photo-lg { width: 120px; height: 120px; }

/* ── Контейнер для Chart.js (responsive высота) ─────────── */
.chart-container {
  position: relative;
  height: 240px;
}

/* ── Whitespace в pre-блоках (логи, JSON) ───────────────── */
.ws-pre-wrap { white-space: pre-wrap; }

/* ── Фиксированные ширины колонок таблиц ────────────────── */
.w-60 { width: 60px; }
.w-70 { width: 70px; }
.w-80 { width: 80px; }
.w-90 { width: 90px; }
.w-100 { width: 100px; }
.w-140 { width: 140px; }
.w-160 { width: 160px; }
.w-200 { width: 200px; }
.w-280 { width: 280px; }

/* ── Maxwidth для длинных заголовков ────────────────────── */
.maxw-360 { max-width: 360px; }