/*
  THESIS: a back-office ledger, not a SaaS admin template — the table row is
  the unit of work, not the card.
  OWN-WORLD: warm paper ground, hairline rule grid, ink-blue for action,
  ledger red/green reserved strictly for error/approved states, tabular
  monospace for money and ИИН so columns of digits actually line up.
  STORY: operator scans dense rows of payouts, approves or excludes each one,
  and always sees which action is reversible and which is not.
  FIRST VIEWPORT: header with tab navigation, then a full-width ledger table;
  primary action always top-right of its section, destructive actions always
  visually separated from safe ones.
  FORM: grounded direction #3 (ledger book), assigned by concept-seed key
  9c9956e7 (mode: operate, index 3).
  FINISH: unreviewed and undocumented is unfinished; this build ends with the
  finish review, the verdict, and DESIGN.md.
*/

:root {
  --color-paper: #faf7f0;
  --color-surface: #ffffff;
  --color-ink: #1e1c18;
  --color-ink-muted: #75695a;
  --color-line: #e2dac8;
  --color-line-strong: #c9bc9e;
  --color-accent: #26415c;
  --color-on-accent: #fff;
  --color-accent-hover: #1a2e42;
  --color-accent-tint: #e9eef3;
  --color-success: #14762f; /* WCAG: 4.45:1 на --color-success-tint у исходного #15803d
    не дотягивал до порога 4.5:1 для обычного текста (см. .success/.result-panel) — этот
    оттенок даёт 5.09:1, визуально почти неотличимо от исходного. */
  --color-success-tint: #e9f4ee;
  --color-error: #b91c1c;
  --color-error-tint: #fbeceb;
  --color-warn: #92660a;
  --color-warn-tint: #fdf3e0;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(30, 28, 24, 0.08), 0 1px 1px rgba(30, 28, 24, 0.04);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-paper);
  margin: 0;
}

main {
  width: 100%;
  padding: var(--space-6) var(--space-6) var(--space-8);
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-4);
}

h1 { font-size: 1.25rem; }
h2 { font-size: 1.15rem; margin-top: var(--space-2); }
h3 { font-size: 1rem; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-top: var(--space-8); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent-hover); }

/* -- Header / navigation ------------------------------------------------ */

header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Логотип — в собственном «боксе»: своя область слева, отделённая
   вертикальной линией от разделов, а не просто картинка над навигацией
   двумя разными строками. */
header h1 {
  margin: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-6) var(--space-3) 0;
  border-right: 1px solid var(--color-line);
}

.logo {
  display: block;
  height: 40px; /* было 32px */
  width: auto;
}

/* Только главное меню шапки: подменю (.sub-nav) и пагинатор (.pager) — тоже
   <nav>, и без привязки к header активный пункт подменю заливался синим
   поверх синего же текста. */
header nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  /* на узком экране пункты не переносятся, а меню прокручивается вбок */
  min-width: 0;
  overflow-x: auto;
}

/* Рабочие разделы — сразу за логотипом; справка и настройки — отдельной
   группой у правого края, перед блоком пользователя, и приглушённее:
   к ним обращаются редко, глаз не должен цепляться за них в работе. */
.nav-work, .nav-service {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-service {
  margin-left: auto;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-line);
}
header nav .nav-service a { font-size: 0.85rem; padding: var(--space-2) var(--space-3); }
header nav .nav-service a.active {
  color: var(--color-ink);
  background: var(--color-paper);
}
header nav .nav-service a.active:hover { background: var(--color-paper); }

header nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  color: var(--color-ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

header nav a:hover { color: var(--color-ink); background: var(--color-paper); }

/* Заливка, а не только подчёркивание — активный раздел должен считываться
   с одного взгляда, а не только по чуть более тёмному цвету текста. */
header nav a.active {
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-weight: 600;
}
header nav a.active:hover { background: var(--color-accent-hover); }

/* Организация, пользователь и «Выйти» — у правого края, отделены линией
   так же, как логотип слева */
.header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-line);
  align-self: stretch;
}
.header-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.header-user .org-name { font-size: 0.9rem; font-weight: 600; color: var(--color-ink); }
.header-user .user-name { font-size: 0.8rem; color: var(--color-ink-muted); }
.logout-link {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  color: var(--color-ink-muted);
  text-decoration: none;
  font-size: 0.85rem;
}
.logout-link:hover { color: var(--color-ink); border-color: var(--color-ink-muted); }

/* -- Sub-navigation (раздел «Справочники»: переключение между справочниками
   в один клик, без возврата на страницу-указатель) ------------------------ */

.sub-nav {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.sub-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  margin-bottom: -1px;
  color: var(--color-ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sub-nav a:hover { color: var(--color-ink); }

.sub-nav a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

.reference-list {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.reference-item {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.reference-item:last-child { border-bottom: none; }

.reference-item a {
  font-size: 1rem;
  font-weight: 600;
}

.reference-item p {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-muted);
}

/* -- Forms --------------------------------------------------------------- */

form { margin: 0 0 var(--space-4); }

/* Пустые формы, вынесенные из <tr> и связанные с полями через form="...":
   без сброса отступа каждая добавляла бы к странице пустую полосу. */
.row-forms, .row-forms form { margin: 0; }

label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
select {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  min-height: 2.5rem;
}

input[type="number"] {
  max-width: 8rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  /* Спиннеры +/- перекрывают цифры в узких ячейках таблиц и не несут
     смысловой нагрузки — убираем во всех браузерах. */
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="checkbox"] {
  /* 1.5rem = 24px — минимум тач-таргета WCAG 2.2 SC 2.5.8; было 1.1rem
     (17.6px), в таблицах "Проверка"/"Обработка" эти чекбоксы кликаются
     многократно при массовых действиях — размер должен быть точным. */
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--color-accent);
}

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.upload-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.upload-bar label { margin-bottom: 0; }
.upload-bar select { min-width: 14rem; }

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}
.pagination label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 0; }
.pagination select { display: inline-block; width: auto; min-height: 2rem; padding: var(--space-1) var(--space-2); }
.pagination-nav a { margin-left: var(--space-3); }

.review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.review-toolbar .row-actions { flex-wrap: wrap; }

/* Без карточного оформления (рамка/фон/паддинг) и с лейблами в строку —
   раньше форма была отдельным, самостоятельным блоком на всю ширину, и
   блочные лейблы ("Поиск" над полем) там не мешали. В общем ряду с
   плоскими кнопками тулбара такая карточка другой высоты, прижатая к
   нижнему краю, давала "лесенку" вместо ровной линии. */
.review-filters, .processing-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.review-filters label, .processing-filters label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  white-space: nowrap;
}
.review-filters input[type="text"], .processing-filters input[type="text"] { min-width: 14rem; }

.review-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Зазор больше, чем внутри каждой группы (--space-2 у .review-categories/
     .review-chips ниже) — по закону близости смысловая дистанция (вкладки
     переключают вид, чипы — статус-факты о файле) должна быть видна и
     тогда, когда на узком экране группы переносятся друг под друга, а не
     только пока их разносит justify-content на широком. */
  gap: var(--space-6);
  margin-bottom: var(--space-3);
}
.review-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--color-accent-tint);
  color: var(--color-accent);
}
.chip-error { background: var(--color-error-tint); color: var(--color-error); }
.chip-warn { background: var(--color-warn-tint); color: var(--color-warn); }
.chip-info { background: var(--color-accent-tint); color: var(--color-accent); }
/* Панель массовых действий — существует в DOM всегда (htmx включает её в
   каждый ответ #review-panel), но визуально появляется только когда
   реально что-то выбрано (см. .is-visible, включается JS в review.html) —
   пустое «Выбрано: 0» не должно постоянно занимать высоту. */
.bulk-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* visibility, а не только max-height/opacity: без него кнопки внутри
     остаются в Tab-порядке, пока панель визуально скрыта — клавиатурный
     пользователь может провалиться фокусом в невидимые элементы. Задержка
     0.18s на скрытие — переход к visibility:hidden только после того, как
     затухание по opacity уже завершилось; на появление задержки нет. */
  visibility: hidden;
  transition: max-height 0.18s ease, opacity 0.18s ease, margin 0.18s ease,
             visibility 0s linear 0.18s;
}
.bulk-panel.is-visible {
  max-height: 4rem;
  opacity: 1;
  visibility: visible;
  margin-bottom: var(--space-3);
  transition: max-height 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}
.bulk-panel-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
}
.bulk-panel-inner #bulk-selected-count { font-weight: 600; color: var(--color-accent); }
.bulk-panel-inner button[type="button"] {
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
}

/* «Выбраны все N на странице — выбрать все M по фильтру?» — тот же приём
   Gmail-style, что и bulk-panel выше: в DOM всегда, видим только когда
   реально есть что предложить (JS переключает .is-visible, см. review.html). */
.select-all-banner {
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}
.select-all-banner.is-visible { display: flex; }
.select-all-banner button {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.select-all-banner.is-active { background: var(--color-accent); color: var(--color-on-accent); }
.select-all-banner.is-active button { display: none; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.pager button {
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.pager button:disabled { opacity: 0.45; cursor: default; }
.pager-status { color: var(--color-ink-muted); font-size: 0.9rem; }

/* Индикатор живого поиска — без него на файле 1000+ строк фильтрация не
   мгновенная, а никакого визуального подтверждения, что запрос ушёл, не
   было. .htmx-indicator/.htmx-request — стандартные классы htmx
   (config.includeIndicatorStyles уже переключает opacity 0/1 сам). */
#review-search-indicator { margin-left: var(--space-2); color: var(--color-ink-muted); }
#review-panel.htmx-request .table-wrap { opacity: 0.5; transition: opacity 0.15s ease; }
#processing-search-indicator { margin-left: var(--space-2); color: var(--color-ink-muted); }
#processing-panel.htmx-request .table-wrap { opacity: 0.5; transition: opacity 0.15s ease; }

/* Легенда — иконка-подсказка вместо отдельной строки: 0 высоты в покое,
   расшифровка всплывает по наведению/фокусу (доступно и с клавиатуры). */
.legend-trigger { position: relative; display: inline-flex; }
.legend-trigger > button {
  /* 1.75rem (28px) уже проходит минимум WCAG 2.2 SC 2.5.8 (24px), но 2rem
     (32px) удобнее для точного клика/тапа — соседних мелких элементов
     рядом нет, есть куда расти без ущерба плотности ряда. */
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink-muted);
  font-size: 0.8rem;
}
.legend-trigger > button:hover,
.legend-trigger > button:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.legend-popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.legend-trigger:hover .legend-popover,
.legend-trigger:focus-within .legend-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Вкладки категорий — segmented control, не ряд обычных кнопок: общий трек
   с одной рамкой/фоном, активная вкладка выделена подложкой внутри трека
   (а не акцентной заливкой — акцент на этом экране остаётся только за
   Primary-кнопкой «Сформировать итог», иначе два разных смысла — «текущий
   фильтр» и «главное действие» — конкурируют за один и тот же цветовой
   сигнал). Это отличает "переключить вид" от "выполнить действие"
   визуально, а не только по расположению. */
.review-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) + 2px);
}
.seg {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  min-height: 2rem;
}
.seg.active {
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

fieldset {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
  background: var(--color-surface);
}

fieldset table input[type="number"] { max-width: none; width: 6rem; }
fieldset table th, fieldset table td { padding: var(--space-2) var(--space-3); }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0 var(--space-4);
  align-items: start;
}
.settings-grid-full { grid-column: 1 / -1; }

legend {
  padding: 0 var(--space-2);
  font-weight: 600;
  color: var(--color-ink);
}

/* -- Buttons --------------------------------------------------------------- */

button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  /* Тот же горизонтальный шаг (--space-3), что и у input/select ниже —
     раньше кнопка была на 4px "просторнее" поля при одинаковой высоте
     (обе 2.5rem), что при кнопке и инпуте в одном ряду читалось как
     нестыковка масштаба, а не общая система. */
  padding: var(--space-2) var(--space-3);
  min-height: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

button[type="submit"],
button.primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
button[type="submit"]:hover,
button.primary:hover { background: var(--color-accent-hover); }

button.btn-danger {
  background: var(--color-surface);
  color: var(--color-error);
  border-color: var(--color-line-strong);
}
button.btn-danger:hover {
  background: var(--color-error-tint);
  border-color: var(--color-error);
}

button.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-line-strong);
}
button.btn-secondary:hover {
  background: var(--color-paper);
  border-color: var(--color-ink-muted);
}

.row-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* «Ещё» — редкие действия («Перепроверить», «Выгрузить») спрятаны за один
   клик, чтобы не конкурировать по видимости с Primary («Сформировать
   итог») — используются в разы реже, не должны занимать ту же кликабельную
   зону (закон Фиттса/Миллера: скрывать редкое, а не показывать всё разом). */
.toolbar-more { position: relative; }
.toolbar-more > summary {
  list-style: none;
  display: inline-flex;
}
.toolbar-more > summary::-webkit-details-marker { display: none; }
.toolbar-more-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
  gap: var(--space-1);
}
.toolbar-more-menu button,
.toolbar-more-menu a {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-ink);
  text-decoration: none;
  background: transparent;
  border: none;
  min-height: auto;
  font-weight: 400;
}
.toolbar-more-menu button:hover,
.toolbar-more-menu a:hover { background: var(--color-paper); }

.inline-form { display: inline; margin: 0; }

/* -- Tables --------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* Проверка — самая широкая таблица в приложении (13 колонок): бьётся
   через боковые отступы main, чтобы отдать под колонки максимум ширины
   окна вместо горизонтального скролла. Тот же приём негативных отступов,
   что и у .review-summary ниже. */
#review-panel .table-wrap {
  margin: 0 calc(var(--space-6) * -1);
  border-left: none;
  border-right: none;
  border-radius: 0;
  /* thead th ниже — position: sticky. Он прилипает к ближайшему
     скролл-контейнеру, а не обязательно к странице: раз overflow-x тут
     auto, спецификация CSS Overflow заставляет и overflow-y вычисляться
     в auto (нельзя「visible」на одной оси и не-visible на другой), так
     что этот div и без max-height уже формально скролл-контейнер — но
     без ограничения высоты у него никогда не возникает реальной
     прокрутки, и sticky из-за этого не прилипает вообще (проверено:
     шапка просто уезжает вместе со страницей). Ограничение высоты даёт
     этому контейнеру собственный вертикальный скролл — так же, как
     закрепление строк устроено в Excel/Google Sheets. */
  max-height: 70vh;
  overflow-y: auto;
}

/* Системный скроллбар не годится как единственная подсказка: с
   Windows-настройкой «автоматически скрывать полосы прокрутки» Chrome
   переключается на overlay-скроллбары, которые игнорируют кастомные
   ::-webkit-scrollbar стили и появляются лишь на долю секунды во время
   самого скролла — оператор их физически не видит. Рисуем свою полосу
   прокрутки (JS в review.html синхронизирует её с table-wrap.scrollLeft),
   которая не зависит от системных/браузерных настроек скроллбара. */
#review-panel .hscroll {
  display: none;
  height: 10px;
  margin: 0 calc(var(--space-6) * -1) var(--space-4);
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  position: relative;
  cursor: pointer;
}
#review-panel .hscroll.is-active { display: block; }
#review-panel .hscroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 2rem;
  background: var(--color-line-strong);
  border-radius: var(--radius);
  cursor: grab;
}
#review-panel .hscroll-thumb:hover,
#review-panel .hscroll-thumb.dragging {
  background: var(--color-ink-muted);
  cursor: grabbing;
}

/* Прилипающая шапка таблицы — при вертикальном скролле длинного списка
   строк подписи колонок остаются видны. */
#review-panel thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* «Подготовленные файлы» — история не чистится автоматически и растёт
   без ограничения (см. поиск/show_exported), поэтому у неё та же
   проблема, что решена выше для «Проверки»: без ограничения высоты и
   прилипающего заголовка колонки уедут при скролле первыми. */
#processing-panel .table-wrap {
  max-height: 60vh;
  overflow-y: auto;
}
#processing-panel thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Закреплённые identity-колонки (чекбокс/№ строки/ФИО) при горизонтальном
   скролле — таблица «Проверка» шире экрана (см. #review-panel .table-wrap
   выше), и без этого оператор, доскроллив до «Решение»/«Инф. CRM», теряет
   из виду, чью строку он редактирует. Тот же паттерн, что «заморозка
   столбцов» в Excel/Google Sheets — не нужно объяснять оператору.
   left считается кумулятивно от ширины предыдущих закреплённых колонок,
   поэтому им нужна фиксированная width, а не auto. */
#review-panel td:nth-child(1), #review-panel th:nth-child(1) { left: 0; }
#review-panel td:nth-child(2), #review-panel th:nth-child(2) { left: 3.5rem; }
#review-panel td:nth-child(3), #review-panel th:nth-child(3) { left: 8rem; }

#review-panel tbody td:nth-child(1),
#review-panel tbody td:nth-child(2),
#review-panel tbody td:nth-child(3) {
  position: sticky;
  z-index: 2;
  /* --row-bg выставляется на <tr> (см. .row-error/.row-warn/.row-third/
     :hover ниже) — без этого закреплённая колонка при скролле оставалась бы
     белой на подсвеченной строке, а подсветка «обрывалась» бы на 4-й
     колонке вместо того, чтобы читаться как свойство всей строки. */
  background: var(--row-bg, var(--color-surface));
}
#review-panel tbody td:nth-child(1) { width: 3.5rem; }
#review-panel tbody td:nth-child(2) { width: 4.5rem; min-width: 4.5rem; }
/* Тень на правой границе закреплённой зоны — видна только когда таблица
   реально проскроллена вбок (иначе неотличима от обычной колонки),
   отмечает границу "заморозки", как в Excel/Google Sheets. */
#review-panel .table-wrap.is-scrolled td:nth-child(3),
#review-panel .table-wrap.is-scrolled th:nth-child(3) {
  box-shadow: 4px 0 6px -4px rgba(30, 28, 24, 0.25);
}

/* Последняя колонка («Инф. CRM») закреплена справа тем же приёмом — кнопки
   CRM-проверки нужны на каждой строке, доскроливать таблицу до правого края
   ради них на файле в 1000+ строк неудобно. tr:not(.row-details) — иначе
   правило задело бы colspan-строку «Все поля» под записью (единственная
   td там одновременно first- и last-child). */
#review-panel tbody tr:not(.row-details) td:last-child,
#review-panel thead th:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--row-bg, var(--color-surface));
}
#review-panel thead th:last-child { z-index: 3; background: var(--color-paper); }
#review-panel .table-wrap.is-scrolled tbody tr:not(.row-details) td:last-child {
  box-shadow: -4px 0 6px -4px rgba(30, 28, 24, 0.25);
}

#review-panel thead th:nth-child(1),
#review-panel thead th:nth-child(2),
#review-panel thead th:nth-child(3) {
  /* top/z-index уже даёт правило выше (шапка целиком) — здесь только left,
     чтобы угловые ячейки прилипали одновременно к верху и к левому краю. */
  background: var(--color-paper);
}

table { border-collapse: collapse; width: 100%; }

caption {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  border-bottom: 1px solid var(--color-line);
}

th, td {
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
}

th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--color-paper);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--color-paper); }
#review-panel tbody tr:hover { --row-bg: var(--color-paper); }

td form { margin: 0; }
td select { max-width: 11rem; min-height: 2.25rem; }

td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ФИО/ИИН/Телефон правятся прямо в таблице — узкие поля по ширине
   колонки обрезали бы длинные значения (ФИО, особенно составные). */
#review-panel input[name="fio"] { min-width: 12rem; max-width: none; }
#review-panel input[name="iin"] { min-width: 8rem; max-width: none; }
#review-panel input[name="phone"] { min-width: 8rem; max-width: none; }
#review-panel input[name="income"] { min-width: 7rem; }

#review-panel td:has(button[type="button"]) button[type="button"] {
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  font-size: 0.8rem;
  min-height: 2rem;
  padding: var(--space-1) var(--space-2);
}

/* -- Status text ----------------------------------------------------------- */

.status-ok { color: var(--color-success); }
.status-error { color: var(--color-error); }
.status-warn { color: var(--color-warn); }

.error {
  color: var(--color-error);
  background: var(--color-error-tint);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.success {
  color: var(--color-success);
  background: var(--color-success-tint);
  border: 1px solid var(--color-success);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.update-banner {
  color: var(--color-warn);
  background: var(--color-warn-tint);
  border-bottom: 1px solid var(--color-warn);
  padding: var(--space-3) var(--space-6);
  text-align: center;
}
.update-banner a { color: var(--color-warn); text-decoration: underline; }

.result-panel {
  background: var(--color-success-tint);
  border: 1px solid var(--color-success);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
}
.result-panel p:last-child, .result-panel ul:last-child { margin-bottom: 0; }

.log-block {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.log-block summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--color-ink-muted);
}
.status-history {
  /* Ограничивает ширину самого disclosure-виджета — на таблицах без
     table-layout: fixed (см. .statuses-table) раскрытие иначе меняет
     intrinsic-ширину ячейки «История» и перекраивает соседние колонки. */
  max-width: 22rem;
}
.status-history summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-accent);
  white-space: nowrap;
}
.status-history ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}
.status-history li { overflow-wrap: break-word; }

.extra-fields { margin: 0; }
.extra-fields summary { font-size: 0.8rem; }
.extra-fields-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  font-size: 0.8rem;
}
.extra-fields-list dt { font-weight: 600; color: var(--color-ink-muted); white-space: nowrap; }
.extra-fields-list dd { margin: 0; font-family: var(--font-mono); overflow-wrap: break-word; }
.extra-fields-list dd input[type="text"] {
  max-width: none;
  min-height: auto;
  margin-top: 0;
  padding: 1px var(--space-1);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  border-color: var(--color-line);
}
.field-edited-badge {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 0.7rem;
  font-family: var(--font-sans);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.extra-fields-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3);
}
.extra-fields-add input[type="text"] {
  max-width: 12rem;
  min-height: auto;
  margin-top: 0;
  padding: var(--space-1) var(--space-2);
  font-size: 0.8rem;
}
.field-error {
  margin: var(--space-1) 0 0;
  color: var(--color-error);
  font-size: 0.75rem;
}

.fio-cell { overflow-wrap: break-word; }

/* table-layout: auto пересчитывает ширины ВСЕХ столбцов при раскрытии
   истории (длинный текст в ячейке «История» меняет её intrinsic-ширину) —
   колонка ФИО «прыгала» при каждом клике на другую строку. Фиксированные
   ширины делают колонки независимыми от содержимого раскрытых ячеек. */
.statuses-table { table-layout: fixed; }
.statuses-table th:nth-child(1), .statuses-table td:nth-child(1) { width: 2.5rem; }
.statuses-table th:nth-child(2), .statuses-table td:nth-child(2) { width: 16rem; }
.statuses-table th:nth-child(3), .statuses-table td:nth-child(3) { width: 9rem; }
.statuses-table th:nth-child(4), .statuses-table td:nth-child(4) { width: 10rem; }
.statuses-table th:nth-child(5), .statuses-table td:nth-child(5) { width: 6rem; }
.statuses-table th:nth-child(6), .statuses-table td:nth-child(6) { width: 5rem; }
.statuses-table th:nth-child(7), .statuses-table td:nth-child(7) { width: 14rem; }
.statuses-table th:nth-child(8), .statuses-table td:nth-child(8) { width: auto; }

.log-block pre {
  margin: 0;
  padding: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  white-space: pre-wrap;
  max-height: 20rem;
  overflow-y: auto;
}
.log-error { color: var(--color-error); }
.log-warn { color: var(--color-warn); }
.error-text { color: var(--color-error); }

tr.row-error td { background: var(--color-error-tint); }
tr.row-warn td { background: var(--color-warn-tint); }
tr.row-third td { background: var(--color-accent-tint); }
tr.row-error { --row-bg: var(--color-error-tint); }
tr.row-warn { --row-bg: var(--color-warn-tint); }
tr.row-third { --row-bg: var(--color-accent-tint); }

/* Полоса статуса на первой закреплённой колонке — не зависит от фона строки,
   поэтому остаётся видна и при наведении (:hover ниже подменяет --row-bg на
   paper, из-за чего сам цветной фон на мгновение пропадает — раньше на
   странице с 1000+ строками единственный ориентир статуса при сканировании
   списка мышью гас именно там, где взгляд на нём и останавливался). */
tr.row-error td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--color-warn); }
tr.row-third td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }

/* Мягкая зебра для строк без статусной подсветки — заполняет визуальный
   разрыв между цветными строками, не соперничая с ними за внимание. */
#review-panel tbody tr:nth-child(even):not(.row-error):not(.row-warn):not(.row-third):not(.row-details) {
  --row-bg: color-mix(in srgb, var(--color-surface) 96%, var(--color-ink));
}

.review-summary {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: var(--space-4) calc(var(--space-6) * -1) 0;
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line-strong);
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.review-summary p { margin: 0; }

.legend-error { color: var(--color-error); }
.legend-warn { color: var(--color-warn); }
.legend-third { color: var(--color-accent); }
.legend-ok { color: var(--color-success); }

/* -- Login page -------------------------------------------------------- */

.login-page main {
  min-height: calc(100vh - 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.login-card {
  width: 100%;
  max-width: 22rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6);
}

.login-card h2 { margin-bottom: var(--space-6); }
.login-card form { margin: 0; }
.login-card input { max-width: none; }
.login-card button[type="submit"] { width: 100%; margin-top: var(--space-2); }

/* -- Utility ----------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; }
}

/* -- Dialogs --------------------------------------------------------- */

dialog {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  max-width: 28rem;
}
dialog::backdrop { background: rgba(30, 28, 24, 0.4); }
dialog#crm-check-dialog { max-width: 34rem; }
/* Реквизиты банка (IBAN, номер карты, БИК, ISO-таймстемп "обновлено") —
   значения длиннее, чем в диалоге налогового статуса выше, и на Full HD
   обрезались/съезжали за пределы узкого дефолтного диалога (28rem). */
dialog#crm-requisites-check-dialog { max-width: 42rem; }
/* Расшифровка АВР — таблица из девяти колонок (_crm_avr_fields.html): окно
   почти во всю ширину экрана, длинный список прокручивается внутри окна. */
dialog#crm-avr-dialog {
  width: min(72rem, calc(100vw - 2rem));
  max-width: none;
  max-height: 90vh;
  overflow: auto;
}
dialog#crm-avr-dialog .avr-table { width: 100%; }
dialog#crm-avr-dialog .avr-table td.num { white-space: nowrap; }
dialog h3 { margin-top: 0; }
/* «Закрыть» в окнах CRM идёт сразу после таблицы/полей — отделяем отступом */
dialog > button:last-child { margin-top: var(--space-4); }

.crm-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-4);
}
.crm-fields dt { color: var(--color-ink-muted); font-size: 0.9rem; }
.crm-fields dd { margin: 0; overflow-wrap: anywhere; }

/* Групповая проверка АВР (_crm_avr_batch.html) */
.avr-batch-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.avr-batch-form textarea {
  display: block;
  width: 100%;
  max-width: 40rem;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
}
.avr-batch-actions { display: flex; gap: var(--space-3); }

/* Подписанные АВР за период (_crm_avr_acts.html) */
.avr-acts-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.avr-acts-hint { color: var(--color-ink-muted); max-width: 60rem; }
.warning {
  color: var(--color-warn);
  background: var(--color-warn-tint);
  border: 1px solid var(--color-warn);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

/* -- Help page (главная / инструкция) ----------------------------------- */

.help-intro { max-width: 44rem; }

.help-steps {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.help-step { display: flex; gap: var(--space-6); align-items: flex-start; }

.help-step-num {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  font-family: var(--font-mono);
}

.help-step-body { flex: 1 1 auto; min-width: 0; max-width: 44rem; }

.help-step-title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

.help-shot {
  margin: var(--space-3) 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.help-shot img { display: block; width: 100%; height: auto; }

.help-caption {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

.help-note {
  max-width: 44rem;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.help-note p:last-child { margin-bottom: 0; }

.help-legend {
  max-width: 44rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-6);
}
.help-legend dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); }
.help-legend dt { font-family: var(--font-mono); font-weight: 600; }
.help-legend dd { margin: 0; color: var(--color-ink-muted); }

/* -- Версии реестра и отметки изменённых полей ---------------------------- */

.version-badge {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--color-warn-tint);
  color: var(--color-warn);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.version-note {
  display: block;
  color: var(--color-ink-muted);
  font-size: 0.75rem;
}
.version-note.status-error { color: var(--color-error); }
.btn-link {
  background: none;
  border: none;
  min-height: 0;
  padding: 0;
  color: var(--color-accent);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.version-banner {
  color: var(--color-ink);
  background: var(--color-warn-tint);
  border: 1px solid var(--color-warn);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
}

/* Правка оператора — синяя рамка, изменение в новой версии файла — оранжевая;
   если поле затронуто и тем, и другим, видны обе (рамка + полоса снизу). */
input.field-operator-edited,
select.field-operator-edited {
  border: 2px solid var(--color-accent);
  background: var(--color-accent-tint);
}
input.field-version-changed,
select.field-version-changed {
  box-shadow: inset 0 -3px 0 var(--color-warn);
  background: var(--color-warn-tint);
}
input.field-operator-edited.field-version-changed {
  background: var(--color-accent-tint);
}
.field-mark {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  white-space: nowrap;
}
.field-mark-operator { color: var(--color-accent); }
.field-mark-version { color: var(--color-warn); }
.field-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2);
}
.field-legend .swatch {
  display: inline-block;
  width: 1.5rem;
  height: 0.9rem;
  vertical-align: middle;
  margin-right: var(--space-1);
  border-radius: 2px;
}
.field-legend .swatch-operator { border: 2px solid var(--color-accent); background: var(--color-accent-tint); }
.field-legend .swatch-version { box-shadow: inset 0 -3px 0 var(--color-warn); background: var(--color-warn-tint); }

/* -- АВР на «Проверке» ------------------------------------------------------ */

.avr-check {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}
.avr-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
}
.avr-badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  font-size: 0.75rem;
  white-space: nowrap;
}
.avr-signed { background: var(--color-success-tint); color: var(--color-success); }
.avr-unsigned { background: var(--color-error-tint); color: var(--color-error); }
.avr-missing { background: var(--color-warn-tint); color: var(--color-warn); }
.avr-unchecked { background: var(--color-paper); color: var(--color-ink-muted); }
tr.avr-counted td { font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent); }
.upload-hint { flex-basis: 100%; }

/* -- Окно «Новая версия» ---------------------------------------------------- */

dialog#new-version-dialog { width: min(34rem, calc(100vw - 2rem)); max-width: none; }
.new-version-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.new-version-form .help-caption { margin: calc(-1 * var(--space-2)) 0 0 var(--space-6); }
.new-version-period {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin: 0;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.dialog-actions .htmx-indicator { margin-right: auto; color: var(--color-ink-muted); }

/* -- «Проверка»: шапка, закреплённые сводка и отборы, компактная таблица ---- */

/* ① Шапка: файл и версия слева, действия справа (главная кнопка — крайняя) */
.review-header {
  /* Выше закреплённой #review-controls (z-index 6): иначе открытое меню
     «Ещё» уходит под полосу сводки */
  position: relative;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-3);
}
.review-header h2 { margin: 0; }
.review-meta { margin: var(--space-1) 0 0; font-size: 0.9rem; color: var(--color-ink-muted); }
.review-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.review-header-actions form { margin: 0; }

/* ② сводка + ③ отборы закреплены сверху; таблица под ними занимает остаток
   экрана (--review-controls-h выставляет ResizeObserver в review.html). */
.review-controls {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 calc(var(--space-6) * -1) var(--space-3);
  padding: var(--space-2) var(--space-6);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}
.review-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
}
.review-controls .review-filters { gap: var(--space-2) var(--space-3); }
.review-controls .review-filters select {
  width: auto;
  max-width: 17rem;
  margin-top: 0;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-2);
}
.review-controls .filter-search { position: relative; }
.review-controls .filter-search .htmx-indicator { position: absolute; right: var(--space-3); }
.review-controls .filter-search input[type="search"] {
  width: 15rem;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
}
#review-panel .table-wrap {
  max-height: max(20rem, calc(100vh - var(--review-controls-h, 7rem) - 5rem));
}

/* Цифры АВР в сводке — кнопки отбора «АВР» */
.avr-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: 0.85rem; }
.avr-group-title { color: var(--color-ink-muted); margin-right: var(--space-1); }
button.avr-badge {
  min-height: 0;
  border: 1px solid transparent;
  padding: 0 var(--space-2);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
button.avr-badge.is-active { border-color: currentColor; }
.avr-group .btn-link { margin-left: var(--space-2); font-size: 0.85rem; }
.legend-popover .field-legend { margin: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

/* Компактная таблица: замечания до трёх строк (полный текст — в подсказке),
   проверки CRM — в одну строку */
#review-panel td.issues-cell { min-width: 14rem; max-width: 24rem; }
.issues-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;
}
.crm-actions { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
button.btn-mini {
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  font-size: 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
}
button.btn-mini:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* -- «Что нового» (журнал изменений, app/changelog.py) -------------------- */
.changelog-release { max-width: 44rem; }
.changelog-item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}
.changelog-item p:last-child, .changelog-how { margin-bottom: 0; }
.changelog-title { font-weight: 600; }
.changelog-kind {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  margin-right: var(--space-2);
  vertical-align: 0.1em;
}
.changelog-kind-new { color: var(--color-success); background: var(--color-success-tint); }
.changelog-kind-fix { color: var(--color-accent); background: var(--color-accent-tint); }
.changelog-kind-change { color: var(--color-warn); background: var(--color-warn-tint); }
.changelog-how-label { margin-bottom: var(--space-1); color: var(--color-ink-muted); }
.changelog-how { padding-left: var(--space-6); }
.changelog-how li { margin-bottom: var(--space-1); }
.help-toc { max-width: 44rem; columns: 2; padding-left: var(--space-6); }
@media (max-width: 640px) { .help-toc { columns: 1; } }
.help-messages dl { grid-template-columns: 1fr; gap: 0; }
.help-messages dt { font-family: inherit; margin-top: var(--space-3); }
.help-messages dt:first-child { margin-top: 0; }

/* -- Блок «Сформировать итоговый файл» (_finalize_action.html) ----------- */
.finalize-action { display: flex; align-items: center; }
.finalize-pending {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  max-width: 36rem;
  background: var(--color-warn-tint);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}
.finalize-pending-count { color: var(--color-warn); font-weight: 600; }
.finalize-pending-help { font-size: 0.85rem; color: var(--color-ink-muted); }
.finalize-pending-help summary { cursor: pointer; }
.finalize-pending-help[open] { flex-basis: 100%; }
.finalize-pending-help p { margin: var(--space-2) 0 0; }

/* Узкий экран: меню — отдельной строкой под логотипом во всю ширину,
   прокручивается вбок, а не сжимается и не переносит пункты */
@media (max-width: 640px) {
  header { flex-wrap: wrap; padding: 0 var(--space-4); row-gap: 0; }
  header nav { order: 3; flex: 1 0 100%; padding-bottom: var(--space-2); }
  .header-user { margin-left: auto; }
}

/* -- Выплаты (журнал отправленных выплат) ---------------------------------- */
.payouts-table td { vertical-align: top; }
.payouts-table small { color: var(--color-ink-muted); }
.payout-breakdown { white-space: nowrap; }
.payout-breakdown .chip { padding: 0 var(--space-2); }
.payout-batch-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0;
}
.payout-batch-facts dt { color: var(--color-ink-muted); }
.payout-batch-facts dd { margin: 0; }
.payouts-table td.num { white-space: nowrap; }
.payouts-filters input[type="date"] {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  min-height: 2.5rem;
}

/* Статус ведомости и отметка оплаты (вкладка «Выплаты») */
.payout-status { font-weight: 600; white-space: nowrap; }
.payout-status-paid { color: var(--color-success); }
.payout-status-partially_paid { color: var(--color-warn); }
.payout-status-replaced, .payout-status-cancelled { color: var(--color-ink-muted); font-weight: 400; }
.payout-payment {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.payout-payment h3 { margin-top: 0; }
.payout-payment-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.payout-payment-form label { display: flex; flex-direction: column; gap: var(--space-1); }
.payout-payment-form input[type="text"] { min-width: 18rem; max-width: 100%; }
.payout-unpay { margin-top: var(--space-4); }
.payout-unpay summary { cursor: pointer; color: var(--color-ink-muted); }
.payouts-table tr.payout-rejected td { background: var(--color-error-tint); }
.payout-events { padding-left: var(--space-6); }
.payout-events li { margin-bottom: var(--space-2); }