/*
 * Реестр выплат: рабочее место на ноутбуке.
 *
 * Три колонки, как у диспетчерских: слева то, что относится ко всей
 * компании, в середине список, справа одна выбранная строка целиком. Список
 * шириной во весь экран заставлял бы возить глаза от имени до действия
 * через полтора метра пустоты.
 *
 * Плотность здесь осмысленная: строка высотой 44 точки, потому что двести
 * выплат за день, это пять экранов вместо двенадцати, а в реестре ищут
 * глазами, а не прокруткой.
 */

html,
body {
  height: 100%;
  overflow: hidden;
}

.ops {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-2);
}

/* ── Шапка ── */
.ops-top {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.ops-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
/* Плитка марки чернилами, а не акцентом: зелёный квадрат с белой буквой в
   углу финансового реестра читается чужим банком, а нажать он ничего не
   предлагает. Акцент в шапке носит одна кнопка «Выплатить». */
.ops-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-s);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
.ops-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ops-sum {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  text-align: right;
  line-height: 1.25;
}

/* ── Раскладка ── */
.ops-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  gap: 1px;
  flex: 1;
  min-height: 0;
  background: var(--line);
}
.ops-side,
.ops-main,
.ops-detail {
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-2);
}
.ops-side,
.ops-detail {
  padding: var(--s-4);
}
.ops-detail {
  background: var(--bg);
}

.panel {
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-m);
  background: var(--bg);
}
.panel-h {
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 700;
}
.panel-note {
  margin-top: var(--s-3);
  font-size: var(--t-cap);
  line-height: 1.4;
  color: var(--ink-2);
}

/* ── Критерии ── */
.crit {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-2);
}
.crit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
}
.crit-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-cap);
}
/* Сеткой, а не flex: у длинной подписи «Средний доход выше 25 000 ₽» перенос
   ставил значение на первую строку, и число оказывалось посреди подписи. */
.crit-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--ink-2);
}
/* Совпавший критерий отмечен и цветом, и полужирным: один цвет сообщение не
   донесёт, а это основание для решения, а не оттенок. */
.crit-list li.is-hit {
  color: var(--bad);
  font-weight: 600;
}
.crit-list b {
  font-variant-numeric: tabular-nums;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
/*
 * Чип, это заливка без обводки со скруглением, а не пилюля с рамкой. Так
 * сделаны фильтры у Альфы, Ozon, t2 и Авито: обводка у каждого чипа рисует
 * поверх содержимого сетку клеток, а выбранный чип и без неё виден заливкой.
 * Выбранный чёрный, как у Авито и по правилу сайта: включённое чёрным.
 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 30px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-s);
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
}
.chip--ic {
  padding: 0 var(--s-2);
  color: var(--ink-2);
}
.chip.is-on {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.chip span {
  margin-left: var(--s-1);
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ── Таблица ── */
/*
 * Колонки посчитаны под ширину, которая есть, а не под желаемую.
 *
 * Сначала имя стояло как minmax(0, 1.6fr), и колонка честно сжалась в ноль:
 * фиксированные колонки вместе с зазорами и полями требовали 864 точки, а
 * середина на ноутбуке даёт 890. Имён в реестре не стало видно вовсе.
 * Поэтому у имени есть нижняя граница, а остальные колонки урезаны до
 * ширины своего содержимого.
 */
.table-head,
.trow {
  display: grid;
  grid-template-columns: minmax(160px, 1.6fr) 104px 150px 48px 48px 124px 28px;
  gap: var(--s-2);
  align-items: center;
  padding: 0 var(--s-4);
}
/*
 * Шапка тише содержимого: без заливки, без линии под собой, мелким серым.
 * Так сделана единственная настоящая таблица среди изученных, «Обмен валюты»
 * у Альфы. Линия и серая плашка под шапкой рисовали сетку клеток поверх
 * данных, и таблица читалась как бланк.
 */
.table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 34px;
  background: var(--bg-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ta-r {
  text-align: right;
}
.table {
  display: flex;
  flex-direction: column;
}
/*
 * Разделитель начинается от текста, а не от края: так он отделяет строки, не
 * дочерчивая рамку вокруг таблицы. Приём с той же таблицы Альфы.
 */
.trow {
  position: relative;
  height: 44px;
  border: 0;
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.trow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--s-4);
  right: var(--s-4);
  height: 1px;
  background: var(--line-2);
}
.trow:last-child::after {
  display: none;
}
.trow:hover {
  background: var(--bg-2);
}
/*
 * Выбранная строка: подложка и грань слева.
 *
 * Подложка отличается от строки под курсором всего на 1.16, а при
 * дейтеранопии почти не отличается вовсе. Тоном выделение не удержать,
 * поэтому его держит грань в два пикселя: она даёт 5.48 к подложке и 6.79 к
 * белым соседям.
 */
.trow.is-on {
  background: var(--act-soft);
  box-shadow: inset 2px 0 0 var(--act);
}
.trow-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.trow-name b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
/* Суммы обычным начертанием: в таблице полужирным выделяют то, что нужно
   найти глазом, а если полужирным всё, не выделено ничто. Полужирным
   осталось имя. */
.trow-sum {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Состояние: значок, а слово только у статуса НПД. См. пояснение в ops.js. */
.trow-st {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: var(--t-cap);
  color: var(--ink-2);
}
.trow-st-t {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.st {
  display: grid;
  place-items: center;
  flex: none;
}
.st--warn {
  color: var(--warn);
}
.st--bad {
  color: var(--bad);
}
/*
 * Тихое состояние приглушено: «в порядке» не должно спорить за внимание с
 * тем, что требует действия. Но не светлее --ink-2: контур толщиной 1,6 на
 * --ink-3 давал 2.43 к белой строке, а нетекстовой графике нужно 3. Стало
 * 4.42.
 */
.st.is-quiet {
  color: var(--ink-2);
}
/* Стрелка чернилами: на белой строке 10.29, на выбранной 8.31. Цветом
   кнопки было бы 6.79 и 5.48 — проходит, но зачем, если это текстовый по
   весу элемент. */
.trow-go {
  display: grid;
  place-items: center;
  color: var(--act-deep);
}
.trow-mon {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
/*
 * Близость к лимиту показана полосой под суммой дохода: число «2 303 600 из
 * 2 400 000» в строке реестра не прочитать, а расстояние до края видно.
 *
 * Полоса шириной 64, а не во всю ячейку: растянутая, она читалась отдельной
 * колонкой и уезжала под стрелку в конце строки.
 */
.mini {
  display: block;
  width: 64px;
  height: 3px;
  margin: 3px 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--fill);
  overflow: hidden;
}
/* Полоса «в норме» серая, а не зелёная: см. пояснение к цвету в
   ../payout/tokens.css. Цветной она становится, только когда лимит требует
   действия. */
.mini i {
  display: block;
  height: 100%;
  background: var(--ink-2);
}
.mini--warn i {
  background: var(--warn);
}
.mini--bad i {
  background: var(--bad);
}

/* ── Выбранная строка ── */
.d-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.d-name {
  font-size: var(--t-lg);
  font-weight: 700;
}
.d-block {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-2);
}
.d-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  font-size: var(--t-sm);
}
.d-row span {
  color: var(--ink-2);
}
.d-row b {
  font-variant-numeric: tabular-nums;
}
.d-warn {
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-s);
  background: var(--bad-soft);
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--bad);
}
.d-acts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.d-empty {
  padding: var(--s-8) 0;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* Стрелка в конце строки вместо надписи «запросить чек»: надпись повторяла
   то, что уже сказано значком состояния, и съедала колонку. */

/* Значение критерия не переносится: «31 200 ₽» с рублём на второй строке
   читается как два разных числа. Переносится подпись, у неё это безобидно. */
.crit-list b {
  white-space: nowrap;
}

/*
 * Узкий ноутбук: 1280 вместо 1512.
 *
 * Семь колонок требуют около семисот точек, а середина при боковых панелях
 * 280 и 340 даёт шестьсот шестьдесят: колонка дохода уезжала под правую
 * панель. Скрываем её, а не сжимаем: доход за месяц, это справка, и она
 * целиком есть в правой панели у выбранной строки. Решение принимают по
 * сумме, статусу, чеку и акту, и они остаются.
 */
@media (max-width: 1439px) {
  .ops-body {
    grid-template-columns: 260px minmax(0, 1fr) 320px;
  }
  .table-head,
  .trow {
    grid-template-columns: minmax(150px, 1.6fr) 104px 150px 48px 48px 28px;
  }
  .table-head span:nth-child(6),
  .trow-mon {
    display: none;
  }
}