/* Итог по всем продажам клиента: сколько продано, во что обошлось
   и сколько заработано.

   Отдельно от sale.css по длине: там одна продажа и заработок
   в форме, здесь — всё сразу. */

/* Стоит над списком и отличается от карточки продажи подложкой,
   а не размером: это тот же набор строк, только про всё сразу,
   и одинаковый вид помогает читать его так же быстро. */
.tally {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.tally__title {
  font-size: var(--fs-md);
  font-weight: 700;
}

.tally__part {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tally__part + .tally__part {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

/* Подпись валюты появляется, только когда валют больше одной:
   у единственной она и так стоит в каждой сумме. */
.tally__whose {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-faint);
}

.tally__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.tally__name {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.tally__value {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Заработок — то, ради чего смотрят на весь блок: он и назван
   последним, и выделен цветом, тем же, что в карточке продажи. */
.tally__row--gain .tally__value {
  color: var(--ok);
  font-size: var(--fs-lg);
}

/* Внутри колонки раздела расстояние задаёт сама колонка (`.plain`
   и её gap). Общее правило каркаса добавляло сверху второй отступ,
   и между итогом и первой продажей выходил двойной воздух. */
.plain > .tally + .sales { margin-top: 0; }

/* Место под круглой кнопкой — то же, что в списке клиентов: без него
   последняя продажа прячется под ней, и человек не понимает, что
   список кончился. */
.screen--businessClientLog .plain {
  padding-bottom: calc(var(--sp-14) + var(--sp-4));
}