/* Реестр счетов (K2, Р-44) в виде CRM v2 (docs/design-crm-v2.md, разделы 4,
 * 6 и 9): фильтр — панель с радиусом 10 в полях страницы, таблица по
 * образцу «Договоров» (двухстрочные ячейки, на телефоне — карточки),
 * подвал с итогами и массовыми действиями. Только токены из tokens.css. */

/* --- Фильтр: белая панель над таблицей; прокручивается вместе со страницей
 *     (поля даёт .app-scroll) --- */

.invoices-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

.invoices-filter fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

/* Поля фильтра переносятся на следующую строку, а не уходят за правый
 * край. Основы ширин — по содержимому: три поля даты с подписями «или» и
 * «—», два у срока, поля выбора — от 180 до 320 px */
.invoices-filter__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

.invoices-filter__issued {
  flex: 2 1 440px;
}

.invoices-filter__due {
  flex: 1.3 1 290px;
}

.invoices-filter__select {
  flex: 1 1 180px;
  max-width: 320px;
}

.invoices-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.invoices-filter__group legend {
  margin-bottom: var(--space-1-5);
}

/* На узкой ширине поля дат переносятся внутри группы, а не сжимаются */
.invoices-filter__group .field__row {
  flex-wrap: wrap;
}

.invoices-filter__group .field__input {
  flex: 1 1 0;
  width: auto;
  /* «ДД.ММ.ГГГГ» с иконкой календаря не обрезается */
  min-width: 9.6em;
}

.invoices-filter__month {
  max-width: 160px;
}

.invoices-filter__or {
  font-size: var(--font-size-secondary);
  color: var(--text-muted);
}

.invoices-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-3-5);
  border-top: 1px solid var(--border-soft);
}

.invoices-filter__checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
}

.invoices-filter__checks legend {
  width: 100%;
  margin-bottom: var(--space-1-5);
}

.invoices-filter__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.invoices-filter__check input {
  margin: 0;
  accent-color: var(--accent);
}

.invoices-filter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

/* --- Таблица --- */

/* Обёртка контроллера отметок не ломает flex-цепочку app-main → app-scroll */
.invoices-registry {
  display: contents;
}

/* Таблица под фильтром — в потоке страницы: поля даёт .app-scroll, отступа
 * под липкую панель не нужно (панель вне прокрутки) */
.invoices-registry__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.invoices-registry__body .table-scroll {
  padding: 0;
}

.invoices-registry__body .empty-state {
  padding: var(--space-12) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

.invoices-registry__number .cell__sub {
  white-space: nowrap;
}

.invoices-registry__number .table__link {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.invoices-registry__number .table__link:hover {
  color: var(--accent);
}

/* Стороны и объекты переносятся, а не режутся: ИНН под названием должен
 * читаться целиком */
.invoices-registry__party {
  min-width: 130px;
  max-width: 220px;
}

/* Длинные заголовки колонок переносятся: колонка — по ширине содержимого */
.table th.invoices-registry__head-wrap {
  min-width: 96px;
  white-space: normal;
}

.invoices-registry__name {
  font-weight: 500;
}

.invoices-registry__objects {
  min-width: 130px;
  max-width: 220px;
}

.invoices-registry__due {
  white-space: nowrap;
}

.invoices-registry__meta {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

/* Бейдж, «№ 3/2026» и дата не рвутся посередине */
.invoices-registry__state .badge,
.invoices-registry__meta a,
.invoices-registry__meta .num {
  white-space: nowrap;
}

.invoices-registry__void {
  color: var(--text-muted);
}

.invoices-registry__overdue {
  color: var(--danger);
  font-weight: 600;
}

/* --- Страницы реестра: кнопки 32 с радиусом 8 --- */

.invoices-pages {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.invoices-pages__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height-sm);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--font-size-secondary);
  color: var(--text-secondary);
  text-decoration: none;
}

.invoices-pages__item:hover {
  background: var(--surface-subtle);
  color: var(--text);
}

.invoices-pages__gap {
  align-self: center;
  padding: 0 var(--space-0-5);
  color: var(--text-muted);
}

.invoices-pages__item--active {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
  font-weight: 600;
}

/* --- Подвал: итоги и массовые действия --- */

.invoices-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  max-width: 720px;
}

.invoices-totals__hint {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

.invoices-bulk {
  align-items: center;
}

.invoices-bulk__scope {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  border: none;
}

/* --- Телефон: фильтр в одну колонку, поля во всю ширину; карточки
 *     реестра — ui.css (.table--cards) --- */
@media (max-width: 767px) {
  .invoices-filter {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .invoices-filter__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .invoices-filter__issued,
  .invoices-filter__due,
  .invoices-filter__select {
    flex: none;
    max-width: none;
  }

  .invoices-filter__month {
    max-width: none;
  }

  /* Даты: «с — по» в одну строку, месяц и «или» — строкой выше */
  .invoices-filter__group .field__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-2);
  }

  .invoices-filter__group .field__input {
    min-width: 0;
  }

  .invoices-filter__month,
  .invoices-filter__or {
    grid-column: 1 / -1;
  }

  .invoices-filter__checks {
    gap: 0 var(--space-4);
  }

  .invoices-filter__actions {
    flex-basis: 100%;
    margin-left: 0;
  }

  .invoices-filter__actions > .btn {
    flex: 1 1 auto;
  }

  .invoices-registry__body {
    margin-top: var(--space-4);
  }

  /* Карточка: номер и дата — заголовок, бейдж состояния — справа; подписи
   * состояния (корректировка, отправлен) — под бейджем, вправо */
  .table.table--cards tbody td.invoices-registry__state {
    text-align: right;
  }

  .table.table--cards tbody td.invoices-registry__party,
  .table.table--cards tbody td.invoices-registry__objects {
    min-width: 0;
    max-width: none;
  }

  .invoices-bulk__scope {
    flex-basis: 100%;
  }

  /* Итоги с определениями и три кнопки заняли бы треть экрана липкой
   * панелью — на телефоне подвал встаёт в конец списка */
  .invoices-registry > .action-bar {
    position: static;
  }
}

/* Касание: строка флажка фильтра — зона нажатия 44 */
@media (pointer: coarse) {
  .invoices-filter__check {
    min-height: var(--touch-target);
  }
}