/* clients.css — точкові стилі, специфічні для екрана "Клієнти", яких
   немає в main.css. Розміри/кольори/шрифти беруться з токенів main.css
   (--fs-*, --accent, --muted, --line...) — тут лише те, чого бракує:
   поведінка, не значення. */

/* Бейдж статусу клієнта в картці списку — дублює статус, який і так
   видно в повній картці (select), тому на вузькому екрані ховаємо. */
@media (max-width: 600px) {
  .cl-status-badge { display: none; }
}

/* 4 плашки статистики в картці клієнта (.qs/.qs-label/.qs-val — ті самі
   класи, що й на головному екрані) — але тут потрібна ІНША поведінка:
   .quick-stats на головному екрані — горизонтальний скрол в один рядок,
   тут — 2 колонки на вузькому екрані, що розгортаються в один рядок на
   ширшому (той самий 768px-брейкпоінт, що вже скрізь у main.css для
   переходу mobile→desktop). Тому окремий клас, а не переозначення
   .quick-stats (це зламало б головний екран). */
.cl-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .cl-stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.cl-stat-grid .qs { min-width: 0; text-align: center; }
.cl-stat-grid .qs-val { font-size: var(--fs-16); }