/* База транзакций: панель фильтров, панель действий, две таблицы.
 *
 * Перенос из прототипа, блок `isTable`. Объявления дословные. Наведение
 * и выделение строки прототип держал в состоянии (`r.rowBg`), здесь это
 * делает CSS — вид тот же, а перерисовка таблицы на каждое движение
 * мыши отпадает.
 *
 * Сверх прототипа здесь только согласованные дополнения: постраничность
 * и сортировка (Q35), галочка «показать удалённые» и пункт «Удалена» в
 * фильтре по статусу (Раунд 6).
 */

/* Экран проверки разложен так же: в макете это тот же табличный экран,
   что и база. Общий селектор, а не копия правил: две копии разошлись бы
   при первой же правке отступов. */
.tx,
.search {
  flex: 1;
  min-width: 0;
  display: flex;
  min-height: 0;
}

/* --- Панель фильтров ---------------------------------------------------- */

.filters {
  width: 272px;
  flex: none;
  background: #fff;
  border-right: 1px solid #e3e7ec;
  overflow-y: auto;
}

.filters__block {
  padding: 14px;
  border-bottom: 1px solid #eef1f4;
}

.filters__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
}

.filters__title {
  font: 600 11px 'IBM Plex Sans';
}

.filters__counter {
  font: 400 10px 'IBM Plex Mono', monospace;
  color: #8b939d;
}

.filters__uids {
  width: 100%;
  height: 96px;
  resize: none;
  border: 1px solid #dfe4e9;
  border-radius: 7px;
  padding: 8px 8px;
  font: 400 9.5px/1.75 'IBM Plex Mono', monospace;
  letter-spacing: -0.01em;
  color: #141a21;
  background: #fbfcfd;
  outline: none;
}

.filters__uids:focus {
  border-color: #1f4fd8;
  background: #fff;
}

.filters__uids-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.filters__hint {
  font-size: 10px;
  color: #8b939d;
}

.filters__link {
  border: 0;
  background: none;
  cursor: pointer;
  font: 400 10.5px 'IBM Plex Sans';
  color: #1f4fd8;
  padding: 0;
}

/* Блоки итогов. Их несколько: «Всего» плюс блок на каждую валюту. */
.totals {
  padding: 9px 10px;
  background: #f7f9fb;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Полоса итогов под таблицей — так велит таблица согласованных
 * дополнений Фазы 7 («Блоки итогов … | Под таблицей | всем»). В
 * прототипе они стояли в панели фильтров; вид блока оттуда и перенесён,
 * поменялось место. Блоки идут в ряд, чтобы не съедать высоту таблицы,
 * и прокручиваются вбок, когда валют много. */
.totals-bar {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 9px 16px;
  background: #fff;
  border-top: 1px solid #e3e7ec;
  overflow-x: auto;
}

.totals-bar .totals {
  flex: none;
  min-width: 210px;
}

.totals__caption {
  font: 500 10px 'IBM Plex Sans';
  color: #5c6673;
  margin-bottom: 2px;
}

/* ADR 006: «Всего» — контрольная сумма для сверки с Excel, а не
 * финансовый итог. Валюты в ней не пересчитаны, и сказать это надо
 * прямо: иначе человек сложит евро с иенами и не заметит. */
.totals__note {
  font-size: 9.5px;
  color: #a2a9b3;
  margin-bottom: 4px;
}

.totals__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.totals__label {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  color: #8b939d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.totals__value {
  flex: none;
  font: 500 11px 'IBM Plex Mono', monospace;
  color: #141a21;
}

.filters__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.filters__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filters__group-title {
  font: 500 9.5px 'IBM Plex Sans';
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a2a9b3;
  margin-bottom: 6px;
}

.filters__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filters__label {
  font-size: 10px;
  color: #8b939d;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filters__select {
  width: 100%;
  height: 29px;
  border: 1px solid #dfe4e9;
  border-radius: 6px;
  padding: 0 6px;
  font: 400 11.5px 'IBM Plex Sans';
  background: #fbfcfd;
  outline: none;
  color: #141a21;
}

.filters__input {
  width: 100%;
  height: 29px;
  border: 1px solid #dfe4e9;
  border-radius: 6px;
  padding: 0 9px;
  font: 400 11.5px 'IBM Plex Sans';
  outline: none;
  background: #fbfcfd;
  color: #141a21;
}

.filters__input:focus,
.filters__money:focus,
.filters__date:focus {
  border-color: #1f4fd8;
  background: #fff;
}

.filters__range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filters__money {
  width: 100%;
  min-width: 0;
  height: 29px;
  border: 1px solid #dfe4e9;
  border-radius: 6px;
  padding: 0 8px;
  font: 400 11px 'IBM Plex Mono', monospace;
  outline: none;
  background: #fbfcfd;
  color: #141a21;
}

.filters__dash {
  flex: none;
  color: #c3c9d1;
}

.filters__date {
  width: 100%;
  height: 29px;
  border: 1px solid #dfe4e9;
  border-radius: 6px;
  padding: 0 8px;
  font: 400 11px 'IBM Plex Mono', monospace;
  outline: none;
  background: #fbfcfd;
  color: #141a21;
}

.filters__dates {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}

.filters__apply {
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 7px;
  background: #1f4fd8;
  color: #fff;
  font: 500 12.5px 'IBM Plex Sans';
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.filters__apply:hover {
  background: #1a45bd;
}

.filters__note {
  font-size: 10px;
  color: #a2a9b3;
  text-align: center;
  margin-top: -4px;
}

/* Галочка «показать удалённые» — согласованное дополнение, Раунд 6.
 * Видна только администратору. */
.filters__check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #5c6673;
  cursor: pointer;
}

.filters__check input {
  width: 13px;
  height: 13px;
  accent-color: #1f4fd8;
  cursor: pointer;
}

/* --- Рабочая область ---------------------------------------------------- */

.tx__main,
.search__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.toolbar {
  min-height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e3e7ec;
}

.toolbar__title {
  font-weight: 600;
  font-size: 12.5px;
  flex: none;
}

.toolbar__count {
  font: 400 11px 'IBM Plex Mono', monospace;
  color: #8b939d;
  flex: none;
}

.toolbar__views {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: #f2f4f7;
  border-radius: 7px;
  flex: none;
  margin-left: 6px;
}

.toolbar__view {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font: 500 11px 'IBM Plex Sans';
  background: transparent;
  color: #5c6673;
}

.toolbar__view[aria-pressed='true'] {
  background: #fff;
  color: #141a21;
}

.toolbar__dirty {
  flex: none;
  font-size: 10.5px;
  color: #96580c;
  background: #fbf1e1;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.toolbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  /* Переносим, а не сжимаем и не выпускаем за край. На экране проверки
     кнопок стало три, и на узком окне «Сохранить изменения» уезжала за
     правую границу: нажать её мышью было нельзя вовсе, хотя она видна в
     разметке и активна. */
  flex-wrap: wrap;
  justify-content: flex-end;
}

.toolbar__action {
  height: 29px;
  padding: 0 12px;
  border: 1px solid #1f4fd8;
  border-radius: 7px;
  background: #fff;
  color: #1f4fd8;
  font: 500 11.5px 'IBM Plex Sans';
  cursor: pointer;
  white-space: nowrap;
}

.toolbar__action[disabled] {
  border-color: #eef1f4;
  color: #b9c1cb;
  cursor: default;
}

/* --- Полоса массовой правки --------------------------------------------- */

.bulk {
  flex: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 8px 16px;
  background: #f3f7fe;
  border-bottom: 1px solid #dbe6fb;
}

.bulk__count {
  font: 600 11.5px 'IBM Plex Sans';
  color: #1f4fd8;
}

.bulk__label {
  font-size: 11px;
  color: #5c6673;
}

.bulk__select,
.bulk__input {
  height: 28px;
  border: 1px solid #cfdcfa;
  border-radius: 6px;
  background: #fff;
  color: #141a21;
  font: 400 11.5px 'IBM Plex Sans';
  padding: 0 7px;
  outline: none;
}

.bulk__input {
  width: 180px;
  padding: 0 8px;
}

.bulk__input--money,
.bulk__input--date {
  font: 400 11.5px 'IBM Plex Mono', monospace;
}

/* Отказ вместо поля суммы при смешанных валютах. */
.bulk__blocked {
  font-size: 11px;
  color: #a4302a;
  background: #fbeceb;
  padding: 4px 9px;
  border-radius: 6px;
}

.bulk__apply[disabled] {
  background: #b9c1cb;
  cursor: default;
}

.bulk__apply {
  height: 28px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: #1f4fd8;
  color: #fff;
  font: 500 11.5px 'IBM Plex Sans';
  cursor: pointer;
}

.bulk__clear {
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #5c6673;
  font: 400 11.5px 'IBM Plex Sans';
  cursor: pointer;
}

.bulk__clear:hover {
  color: #141a21;
}

/* --- Пустые состояния --------------------------------------------------- */

.state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f4f6f8;
}

.state__title {
  font-weight: 500;
  font-size: 12.5px;
  color: #5c6673;
}

.state__hint {
  font-size: 11px;
  color: #8b939d;
}

.state__spinner {
  width: 26px;
  height: 26px;
  border: 2px solid #dfe4e9;
  border-top-color: #1f4fd8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 8px;
}

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

.grid-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.grid {
  display: grid;
  align-items: center;
  width: max-content;
  min-width: 100%;

  /* Ширина столбца с галочкой — одна на оба вида.
     Была записана в каждом виде своим числом: 44px в одном, 30px в
     другом, — и во втором галочка с отступами (13 + 7) за свою колонку
     не влезала, а столбец статуса начинался поверх неё. Держать эту
     ширину в двух местах значит ждать, когда её поправят в одном. */
  --grid-select: 44px;
}

/* Поля провайдера: галочка, статус и 18 столбцов. */
.grid--core {
  grid-template-columns: var(--grid-select) 118px repeat(18, fit-content(340px));
}

/* Рабочие поля: галочка, статус, UID и 14 столбцов. */
.grid--work {
  grid-template-columns: var(--grid-select) 118px 214px repeat(14, 116px);
}

.grid__head {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 31px;
  padding-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
  border-bottom: 1px solid #e3e7ec;
  font: 500 9.5px 'IBM Plex Sans';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b939d;
  white-space: nowrap;
}

.grid__head--first {
  padding: 0 8px 0 14px;
}

.grid__head--last {
  padding-right: 14px;
}

/* Сортировка (Q35) — согласованное дополнение. Заголовок становится
 * кнопкой; вид его при этом не меняется, добавляется только стрелка. */
.grid__sort {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.grid__sort:hover {
  color: #141a21;
}

.grid__sort[aria-sort] {
  color: #1f4fd8;
}

.grid__arrow {
  font-size: 8px;
  line-height: 1;
}

.grid__cell {
  height: 33px;
  padding-right: 8px;
  border-bottom: 1px solid #f2f4f6;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Интервал — ЧАСТЬЮ сокращения `font`, а не отдельным свойством:
     `font: …` сбрасывает `line-height` в `normal`, сколько бы его ни
     задали строкой выше. Так значения и уехали к верхней кромке. */
  font: 400 10.5px/33px 'IBM Plex Mono', monospace;
  color: #5c6673;
}

.grid__cell--first {
  padding: 0 8px 0 14px;
  display: flex;
  align-items: center;
}

.grid__cell--last {
  padding-right: 14px;
}

.grid__cell--center {
  text-align: center;
}

.grid__cell--right {
  text-align: right;
}

.grid__cell--sans {
  font: 400 11px/33px 'IBM Plex Sans';
}

.grid__cell--amount {
  text-align: right;
  font: 500 11.5px/33px 'IBM Plex Mono', monospace;
  color: #141a21;
}

.grid__cell--mono-small {
  font: 400 9.5px/33px 'IBM Plex Mono', monospace;
  color: #141a21;
  text-align: right;
}

.grid__row:hover > .grid__cell {
  background: #f7f9fc;
}

.grid__row--selected > .grid__cell {
  background: #f3f7fe;
}

.grid__check {
  width: 13px;
  height: 13px;
  accent-color: #1f4fd8;
  cursor: pointer;
}

.grid__uid {
  height: 33px;
  border: 0;
  border-bottom: 1px solid #f2f4f6;
  background: #fff;
  padding: 0 8px 0 0;
  text-align: center;
  cursor: pointer;
  font: 500 9.5px 'IBM Plex Mono', monospace;
  color: #1f4fd8;
  line-height: 33px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid__uid:hover {
  text-decoration: underline;
}

.grid__status-cell {
  height: 33px;
  padding-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f2f4f6;
  background: #fff;
}

.grid__status {
  width: 100%;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 0 6px;
  font: 500 10.5px 'IBM Plex Sans';
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}

/* Удалённую править нельзя: сервер ответит `transaction_reversed`. */
.grid__status[disabled] {
  cursor: default;
}

/* Ячейки рабочей таблицы. */
.wcell {
  min-width: 0;
  padding-right: 8px;
  height: 33px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f2f4f6;
  background: #fff;
}

.wcell__input {
  width: 100%;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 5px;
  text-align: center;
  font: 400 11px 'IBM Plex Sans';
  color: #141a21;
  background: transparent;
  outline: none;
}

.wcell__input--mono {
  font: 400 11px 'IBM Plex Mono', monospace;
}

.wcell__input--date {
  padding: 0 4px;
  font: 400 10.5px 'IBM Plex Mono', monospace;
}

.wcell__input:hover {
  border-color: #e3e7ec;
}

.wcell__input:focus {
  border-color: #1f4fd8;
  background: #fff;
}

/* Правка, ещё не ушедшая на сервер. Своё, сверх прототипа: у прототипа
 * правки уходили сразу и отмечать было нечего. */
.wcell__input--changed {
  border-color: #96580c;
  background: #fdf9f1;
}

/* --- Постраничность (Q35) ------------------------------------------------ */

.pager {
  flex: none;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: #fff;
  border-top: 1px solid #e3e7ec;
}

.pager__info {
  font: 400 10.5px 'IBM Plex Mono', monospace;
  color: #8b939d;
}

.pager__buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pager__button {
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  border: 1px solid #dfe4e9;
  border-radius: 6px;
  background: #fff;
  color: #141a21;
  font: 500 11px 'IBM Plex Sans';
  cursor: pointer;
}

.pager__button:hover:not([disabled]) {
  border-color: #b9c1cb;
}

.pager__button[disabled] {
  color: #b9c1cb;
  border-color: #eef1f4;
  cursor: default;
}

.pager__size {
  height: 26px;
  border: 1px solid #dfe4e9;
  border-radius: 6px;
  background: #fff;
  color: #141a21;
  font: 400 11px 'IBM Plex Sans';
  padding: 0 6px;
  outline: none;
}