/* Журнал событий: экран владельца (AUD-1, `REQUIREMENTS.md` п. 76).
   Часть CRM аренды. ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН: последний в группе экранов,
   после 21-desk.css. Только новые классы `.audit-*`: ничего прежнего файл
   не перекрывает.

   Разметку собирает web/js/28-audit.js. Таблицу рисует общий `dataTable()`
   (18-data-table.js) — на телефоне она сама становится карточками, и своих
   правил для этого здесь нет.

   Два правила, от которых зависит остальное:

   1. ЭТО ЭКРАН ЧТЕНИЯ. Ни одной анимации и ни одного набега цифр: журнал
      читают, сверяя даты и суммы. Появление экрана даёт общий переход страниц
      (12-transitions.css), больше ничего не двигается.
   2. Цвет — только токены 01-tokens.css. «Было» приглушено `--mist`, «стало»
      набрано жемчужным: различие в весе и плотности, а не в новом цвете. */

/* ============================================================
   1. Фильтры
   ============================================================ */

/* Четыре списка в один ряд на мониторе и по два в ряд на телефоне. Основа
   дорожки 150px, а не 170: на 390 четыре списка столбиком забирали весь первый
   экран, и до самих событий приходилось листать (`REQUIREMENTS.md` п. 78 —
   меньше лишнего на экране). Кнопки «Показать» нет: смена списка перечитывает
   журнал сразу — это чтение, а не запись.
   POL-6 (13.1): на 390 при 150px в ряд входило только два списка по 155px,
   выбранное значение обрезалось («Сентябрь 202», «Любое действ»); на 360 два
   столбца не помещались вовсе, и все четыре фильтра вставали столбиком.
   128px даёт два столбца на обеих ширинах, значение читается целиком. На
   мониторе, где место есть, auto-fit сам разводит их в четыре широких
   столбца — нижняя граница здесь ни на что не влияет. */
.audit-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ============================================================
   2. Колонка «Было → стало»
   ============================================================ */

.audit-change-cell {
  min-width: 0;
}

/* Одно поле — одна строка: «сумма 4 000 ₽ → 3 000 ₽». Несколько полей стоят
   друг под другом, чтобы стрелки выстроились по вертикали. */
.audit-change {
  display: block;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--soft);
  overflow-wrap: break-word;
}

.audit-change-name {
  color: var(--mist);
}

.audit-change s {
  color: var(--mist);
  text-decoration-color: var(--border-field);
}

.audit-change b {
  color: var(--pearl);
  font-weight: 700;
}

/* ============================================================
   3. Сырые поля события
   ============================================================ */

/* «Подробности» открывают редко и только тогда, когда слов не хватило: сверить
   номер записи с базой. Поэтому это тихая строка, а не вторая таблица. */
.audit-raw {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: 0;
}

.audit-raw > summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  font-size: var(--text-small);
  color: var(--lavender);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .audit-raw > summary:hover {
    color: var(--pearl);
  }
}

@media (pointer: coarse) {
  .audit-raw > summary {
    min-height: var(--tap);
  }
}

.audit-raw dl {
  margin: 4px 0 0;
  display: grid;
  gap: 2px;
}

.audit-raw dl > div {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
  gap: 10px;
  font-size: var(--text-small);
}

.audit-raw dt {
  color: var(--mist);
}

.audit-raw dd {
  margin: 0;
  color: var(--soft);
  overflow-wrap: break-word;
}

/* ============================================================
   4. Таблица журнала: доли колонок
   ============================================================ */

/* Колонки заданы долями, а не содержимым: «Записана денежная операция» рядом с
   длинной фразой события растягивает таблицу за край панели, и на 1280
   появлялась боковая прокрутка (`REQUIREMENTS.md` п. 56 — прокрутки быть не
   должно). На телефоне `dataTable()` раскладывает строку карточкой, и доли
   там ни на что не влияют. */
@media (min-width: 781px) {
  .audit .data-table th:nth-child(1),
  .audit .data-table td:nth-child(1) {
    width: 12%;
  }

  .audit .data-table th:nth-child(2),
  .audit .data-table td:nth-child(2) {
    width: 12%;
  }

  /* «Что сделал» — самая длинная колонка: в ней фраза события целиком. «Было →
     стало» у большинства событий пустует (записали, заселили, назначили), и
     28 % ей ни к чему. */
  .audit .data-table th:nth-child(3),
  .audit .data-table td:nth-child(3) {
    width: 38%;
  }

  .audit .data-table th:nth-child(4),
  .audit .data-table td:nth-child(4) {
    width: 16%;
  }

  .audit .data-table th:nth-child(5),
  .audit .data-table td:nth-child(5) {
    width: 22%;
  }

  /* Фраза события и «было → стало» — свободный текст: он переносится по
     словам, а остальные колонки держат строку. */
  .audit .data-table td {
    white-space: normal;
    vertical-align: top;
  }
}

/* ============================================================
   5. «Показать ещё»
   ============================================================ */

/* Порция — 30 записей (`AUDIT_BATCH` в 28-audit.js), а не весь месяц разом:
   на 390 полная таблица — десятки карточек и десятки тысяч пикселей высоты.
   Кнопка — тот же тихий `.secondary`, что и «Попробовать снова» выше по
   экрану: журнал читают, здесь не место кнопке, которая тянет взгляд на
   себя. На мониторе и мыши это 34px (POL-3, `.page-compact .secondary`,
   18-house.css) — экран уже в этом классе; палец получает полную цель
   касания тем же правилом (`@media (pointer: coarse)` там же, ≥ `--tap`
   44px), отдельного правила для телефона здесь не нужно. */
.audit-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.audit-more .footnote {
  margin: 0;
}

/* ============================================================
   6. Телефон: «Было → стало» во всю ширину карточки
   ============================================================ */

/* `dataTable()` раскладывает ячейку карточки сеткой «подпись | значение»
   (17-mobile-input.css), и подпись забирает 9em. Для «сумма 4 000 ₽ → 3 000 ₽»
   на 390 остаётся полоса в 150px, где рвётся каждая строка. Здесь значение
   занимает всю ширину, а подпись стоит над ним. */
@media (max-width: 780px) {
  .audit .data-table td.audit-change-cell {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit .data-table td.audit-change-cell:before {
    margin-bottom: 2px;
  }
}