/*
 * components.css — переиспользуемые «атомы» интерфейса, общие для нескольких
 * страниц сайта (не турнирный/сквадный/ЛК-специфичный layout — тот остаётся
 * в <style> самого шаблона, см. templates/*/*.html {% block extra_head %}).
 *
 * Перед тем как добавлять новый бейдж/чип/пустое-состояние на очередной
 * странице — сначала проверь этот файл: скорее всего похожий вариант уже
 * есть, нужен только модификатор, а не новый класс с нуля.
 */

/* ---------- Badge (статусные плашки/флаги) ---------- */
/* Базовая форма — общая для инлайновых флагов (рядом с именем игрока,
   см. profile.html) и отдельно стоящих статусов сущности (см.
   tournament_list/detail.html) — они отличаются только модификатором формы. */
.badge {
  display: inline-block;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 2px 9px;
}

/* Модификатор формы: крупнее, с отступом снизу и капсом — когда бейдж
   стоит отдельно (например, над заголовком карточки), а не инлайн в тексте. */
.badge-standalone {
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .75rem;
}

/* Цветовые модификаторы — переиспользуются независимо от формы. */
.badge-danger  { background: #e05a5a; color: #fff; }
.badge-success { background: #4caf7d; color: #fff; }
.badge-accent  { background: var(--accent-primary); color: #1a1a1a; }
.badge-info    { background: #5a7d99; color: #fff; font-weight: 400; }
.badge-neutral {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 400;
}

/* ---------- Пустое состояние (маленькая текстовая заметка) ---------- */
/* Не путать с .empty-state в scum.css — тот для больших пустых сеток
   карточек (с иконкой по центру), этот — для короткой строки внутри
   уже существующего блока/списка. */
.empty-note {
  color: var(--text-secondary);
  font-style: italic;
  font-size: .9rem;
}