/* Центр управления альфой: жалобы, обжалования, люди, объявления, журнал, роли.
 *
 * Отдельный файл, а не строки в app.css: всё здесь относится к одному разделу,
 * который видит один человек из ста, и держать его оформление вперемешку с
 * лентой значило бы править его случайно.
 *
 * Токенами и ничем иным: ни одного своего цвета. Здесь принимают решения о
 * людях, и экран обязан читаться одинаково в тёмной теме, в светлой и на
 * телефоне в солнечный день.
 *
 * Телефон — первый, а не «тоже поддерживается». Очередь разбирают между делом,
 * с телефона в руке; на компьютере ей просторнее, и это единственная разница.
 */

/* ── Полка разделов ───────────────────────────────────────────────────────── */

/* Прокручивается вбок и не режет содержимое: разделов шесть, и на 320 точках
 * они не помещаются никаким шрифтом. Полоса прокрутки убрана — её место
 * дороже, чем подсказка, которую всё равно видно по обрезанной кнопке. */
.adm-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.adm-tabs::-webkit-scrollbar { display: none; }

/* Счётчик у раздела: сколько работы там ждёт.
 *
 * Цифрой, а не точкой: «есть что-то» и «есть семнадцать» — разные новости, и
 * первая не помогает решить, куда идти сначала. */
.adm-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 8px; margin-left: 4px;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-soft-ink);
  font-size: var(--fs-xs); font-weight: 600;
}
.chip.active .adm-count { background: var(--accentText); color: var(--accent); }

/* ── Отборы очереди ───────────────────────────────────────────────────────── */

.adm-filters { display: grid; gap: var(--s2); margin: var(--s3) 0; }

/* Два списка рядом на просторе и один под другим на телефоне: выпадающий
 * список в половину экрана нажимается пальцем, в четверть — нет. */
.adm-selects { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .adm-selects { grid-template-columns: 1fr 1fr; }
}
.adm-selects .field { min-height: var(--tap-touch); }

/* Поиск людей: поле тянется, кнопка не сжимается ниже пальца. */
.adm-search { display: flex; gap: var(--s2); align-items: center; margin: var(--s3) 0; }
.adm-search .field { flex: 1; min-width: 0; min-height: var(--tap-touch); }
.adm-search .btn { flex: none; }

/* ── Строка работы ────────────────────────────────────────────────────────── */

/* Значок сверху, а не по центру: строка бывает в десять строк текста, и
 * посередине такой строки значок висит в пустоте. */
.adm-row {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.adm-row:last-child { border-bottom: 0; }
.adm-row > .ic { flex: none; margin-top: 2px; color: var(--muted); }
.adm-row b { display: block; font-weight: 600; line-height: 1.35; }
.adm-row p { margin: 4px 0 0; line-height: var(--lh); overflow-wrap: anywhere; }
.adm-row .small { font-size: var(--fs-sm); }
.adm-row .muted { color: var(--muted); }
.adm-row .grow { min-width: 0; }
.adm-row > .avatar { flex: none; }

/* Срочная жалоба помечена и полосой, и словом внутри: цвет здесь подсказка, а
 * не сообщение — читают слово. */
.adm-row.urgent { border-left: 3px solid var(--bad); padding-left: var(--s3); }
.adm-row.gone { opacity: .6; }

/* ── Метки ────────────────────────────────────────────────────────────────── */

/* Переносятся, а не жмутся: на 320 точках четыре метки в строку либо режутся,
 * либо выдавливают карточку вбок вместе со всей страницей. */
.adm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s2); }
.adm-tags .chip {
  min-height: 26px; padding: 0 12px;
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}

/* ── Выписка из того, на что жалуются ─────────────────────────────────────── */

/* Именно выпиской, а не живой карточкой: карточка в очереди перетянула бы на
 * себя действия ленты, и модератор нечаянно отвечал бы вместо решения. */
.adm-quote {
  margin-top: var(--s2);
  padding: var(--s3);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Кто автор: имя нажимается и ведёт в карточку, метки рядом. */
.adm-whose {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s2);
}

/* Кто взял жалобу. Своей строкой, а не значком в углу: очередь, в которой не
 * видно, кто её разбирает, разбирается либо всеми сразу, либо никем. */
.adm-assign {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
}

/* ── Действия ─────────────────────────────────────────────────────────────── */

/* Кнопки переносятся и держат высоту пальца: строка из четырёх кнопок на
 * телефоне иначе превращается в четыре половинки. */
.adm-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.adm-actions .btn { min-height: var(--tap-touch); }
.btn.danger { color: var(--bad); }

/* ── Выбор меры ───────────────────────────────────────────────────────────── */

/* Список, а не выпадающий: у каждой меры под именем стоит объяснение
 * последствий, и человек обязан прочитать его **до** нажатия, а не узнать
 * после. Выпадающий список объяснения не показывает. */
.adm-choice { display: grid; gap: var(--s2); }
.adm-pick {
  text-align: left;
  min-height: var(--tap-touch);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.adm-pick:hover { border-color: var(--line-strong); }
.adm-pick.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}
.adm-pick b { font-weight: 600; }

/* Срок: подпись над полем, а не подсказкой внутри — подсказка исчезает, как
 * только начинают набирать, и «7» без слова «суток» читается как что угодно. */
.adm-days { display: grid; gap: 8px; margin-top: var(--s3); }
.adm-days label { font-size: var(--fs-sm); color: var(--muted); }
.adm-days .field { min-height: var(--tap-touch); }

.adm-check {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--tap-touch);
  cursor: pointer;
}

/* ── Карточка человека ────────────────────────────────────────────────────── */

.adm-card { display: grid; gap: var(--s2); }
.adm-card .card-title { margin-top: var(--s4); }

/* ── Состояние цепочки журнала ────────────────────────────────────────────── */

/* Первой строкой, а не примечанием внизу: журнал, чья целостность под
 * вопросом, — это первое, что надо знать, открыв журнал. */
.adm-chain {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3);
  margin-bottom: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.adm-chain.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.adm-chain.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }

.adm-bad { color: var(--bad); }

/* ── Полоса объявлений над лентой ─────────────────────────────────────────── */

/* Её видит каждый, а не только модерация: это то, что владелец сказал всем,
 * кто пробует альфу. Стоит первой строкой ленты — сказанное «сегодня в шесть
 * выключим сервер» человек должен увидеть до того, как начал листать.
 *
 * Крестик обязателен: полоса, которую нельзя убрать, через день перестаёт
 * читаться, а вместе с ней перестаёт читаться и следующая. */
.adm-notes { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.adm-note {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
}
.adm-note.warn { border-left-color: var(--warn); }
.adm-note > .ic { flex: none; margin-top: 2px; color: var(--muted); }
.adm-note.warn > .ic { color: var(--warn); }
.adm-note b { display: block; font-weight: 600; line-height: 1.35; }
.adm-note p { margin: 4px 0 0; line-height: var(--lh); overflow-wrap: anywhere; }
.adm-note .grow { min-width: 0; }
.adm-note .icon-btn { flex: none; }