/* ── Экран-каталог (`admin/catalog.html`) ────────────────────────────────
   Раздел из нескольких строк-правил: прайс операций, пакеты токенов, уровни
   партнёра. Таблица только читается — правка идёт кнопкой «Изменить» в строке
   и диалогом (решение владельца, 2026-08-16): полей ввода здесь нет.

   Строка — сетка колонок значений, кнопка в конце и полоса фактов под ними во
   всю ширину. Факты отдельной строкой, а не колонкой: они длинные («сейчас
   1 200 токенов за 500 ₽ — 0,42 ₽ за токен»), и колонка под них отобрала бы
   ширину у значений, ради которых экран открыт. Ширины колонок задаёт
   модификатор (`--prices`/`--packages`/`--tiers`): число колонок разное. */

/* Таблица занимает всю ширину экрана — как списки разделов (решение
   владельца): предел ширины здесь заводили и сняли. Свободное место забирает
   колонка имени, а не пустая дорожка справа, — см. раскладки внизу файла. */
.adm-cat { display: flex; flex-direction: column; gap: var(--sp-gutter); }
.adm-cat__card { overflow: hidden; }

/* Полоса замечаний по разделу целиком — над таблицей: это условие, при
   котором её значения читаются иначе (операция без строки прайса, лестница
   уровней без начального порога). Янтарь — «требует решения», по общей оси
   панели. */
.adm-cat__notice { display: flex; align-items: baseline; gap: var(--sp-item);
  padding: var(--sp-row) var(--sp-gutter); border-radius: var(--radius-card);
  font-size: var(--fs-body); line-height: 1.5; color: var(--text2);
  background: var(--panel); border: 1px solid var(--border); text-wrap: pretty; }
.adm-cat__notice-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted3); }
.adm-cat__notice--warn { border-color: rgba(241, 163, 59, .25);
  background: rgba(241, 163, 59, .05); }
.adm-cat__notice--warn .adm-cat__notice-dot { background: var(--warn); }

/* Шапка таблицы — тем же отступом и тоном, что и шапка блока в панели.
   Подписи выровнены по ВЕРХУ и занимают ровно одну строку: пояснение второй
   строкой делало шапку разновысокой, и подписи соседних колонок вставали на
   разные уровни — глазами это читается как дрожь. Единица измерения стоит в
   самой ячейке, в шапке её нет. */
.adm-cat__head { display: grid; gap: var(--sp-block); align-items: start;
  padding: var(--sp-row) var(--sp-gutter); background: var(--sunken);
  border-bottom: 1px solid var(--line); }
.adm-cat__col { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* Подпись числовой колонки стоит над своим значением, а значения выровнены
   вправо: подпись слева читалась бы как заголовок соседней. */
.adm-cat__col--right { text-align: right; }

.adm-cat__row { display: grid; gap: var(--sp-block); align-items: center;
  padding: var(--sp-block) var(--sp-gutter); border-bottom: 1px solid var(--rowline);
  transition: background .14s ease; }
.adm-cat__row:last-of-type { border-bottom: 0; }
.adm-cat__row:hover { background: var(--hover); }

.adm-cat__lead { min-width: 0; }
.adm-cat__name { font-size: var(--fs-row); font-weight: 500; color: var(--text);
  text-wrap: pretty; }
.adm-cat__ident { display: flex; align-items: baseline; gap: var(--sp-item);
  margin-top: var(--sp-tight); font-size: var(--fs-hint); }
.adm-cat__key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-hint); color: var(--muted4); }
.adm-cat__open { color: var(--muted3); border-bottom: 1px dotted var(--faint); }
.adm-cat__open:hover { color: var(--text); }

/* Ячейка значения: число крупнее подписи и с табличными цифрами — колонки
   соседних строк обязаны сравниваться взглядом по вертикали. */
.adm-cat__cell { min-width: 0; display: flex; align-items: baseline;
  gap: var(--sp-tight); }
.adm-cat__cell--value, .adm-cat__cell--state { justify-content: flex-end; }
.adm-cat__value { font-size: var(--fs-row); font-weight: 500; color: var(--text);
  font-variant-numeric: tabular-nums; }
.adm-cat__unit { font-size: var(--fs-hint); color: var(--muted3); white-space: nowrap; }
/* Подпись колонки внутри ячейки — только для узкого экрана, где шапка
   таблицы уезжает (см. медиазапрос внизу файла). */
.adm-cat__cell::before { content: attr(data-label); display: none; width: 100%;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted4); }

/* Кнопка правки — в конце строки, одна на строку: правят по одной записи и
   осознанно, поэтому жест ровно один. */
.adm-cat__act { display: flex; justify-content: flex-end; }

/* Факты о сохранённом состоянии строки: во всю ширину, приглушённо. */
.adm-cat__note { grid-column: 1 / -1; margin-top: calc(var(--sp-snug) * -1);
  font-size: var(--fs-hint); line-height: 1.5; color: var(--muted3); text-wrap: pretty; }
.adm-cat__note--warn { color: var(--warn); }

.adm-cat__empty { padding: var(--sp-page) var(--sp-gutter); text-align: center; }
.adm-cat__empty-title { font-size: var(--fs-head); font-weight: 600; }
.adm-cat__empty-hint { margin-top: var(--sp-item); font-size: var(--fs-row);
  color: var(--muted2); text-wrap: pretty; }

/* ── Раскладки колонок ───────────────────────────────────────────────────
   Первая дорожка — имя строки, дальше по одной на ячейку, последняя — кнопка.
   Свободное место забирает имя: числовые дорожки фиксированы (колонки
   соседних строк обязаны стоять по одной вертикали), а дорожка кнопки — тоже,
   и именно числом, а не `auto`: шапка и строки — два разных грида с одним
   объявлением, и `auto` дал бы им разную ширину (в шапке ячейка пустая), от
   чего разъехались бы все колонки левее. */
.adm-cat--prices .adm-cat__head,
.adm-cat--prices .adm-cat__row {
  grid-template-columns: minmax(220px, 1fr) 120px 150px 90px 130px 100px; }
.adm-cat--packages .adm-cat__head,
.adm-cat--packages .adm-cat__row {
  grid-template-columns: minmax(200px, 1fr) 110px 110px 130px 90px 120px 100px; }
.adm-cat--tiers .adm-cat__head,
.adm-cat--tiers .adm-cat__row {
  grid-template-columns: minmax(220px, 1fr) 160px 120px 100px; }

/* Узкий экран: дорожки под числа дальше не ужимаются, поэтому строка
   раскладывается в две — имя во всю ширину, значения плиткой со своими
   подписями (шапка таблицы при этом не нужна и уезжает). */
@media (max-width: 1180px) {
  .adm-cat__head { display: none; }
  .adm-cat--prices .adm-cat__row,
  .adm-cat--packages .adm-cat__row,
  .adm-cat--tiers .adm-cat__row {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .adm-cat__lead { grid-column: 1 / -1; }
  .adm-cat__cell { flex-wrap: wrap; justify-content: flex-start; }
  .adm-cat__cell::before { display: block; margin-bottom: var(--sp-tight); }
  .adm-cat__act { grid-column: 1 / -1; justify-content: flex-start; }
  .adm-cat__note { margin-top: 0; }
}