/**
 * Таблица.
 *
 * Стили навешены на класс .tbl, а не на тег table: иначе они молча
 * перекрасят любой GridView в админке.
 */

.tblwrap {
  overflow-x: auto;
  /* Без явного предела блок иногда не клипует широкую таблицу
     внутри себя, а сам растягивается под неё — тогда «прокрутка
     внутри карточки» превращается в прокрутку всей страницы.
     max-width привязан к границе родителя всегда, а не зависит
     от того, дошёл ли до него min-width: 0 по цепочке грид/флекс-
     контейнеров выше. */
  max-width: 100%;
  min-width: 0;
  /* Скролл-контейнер обрезает абсолютно позиционированных потомков,
     только если он сам их containing block. Иначе .visually-hidden
     в заголовке крайней колонки встаёт у правого края широкой
     таблицы и растягивает всю страницу. */
  position: relative;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
}

.tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  vertical-align: middle;
}

.tbl tr:last-child td,
.tbl tbody tr:last-child th {
  border-bottom: 0;
}

.tbl tbody tr:hover {
  background: var(--surface2);
}

.tbl .c {
  text-align: center;
}

.tbl .r {
  text-align: right;
}

/* Сумма с рублём — одно целое: на узком экране строка сжималась,
   и знак валюты переносился под число (счета, история операций). */
.tbl .r.mono {
  white-space: nowrap;
}

/* Сортировка по клику на заголовок (ТЗ 9.9). */
.tbl--sortable th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.tbl--sortable th[data-sort]:hover {
  color: var(--tx2);
}

.tbl--sortable th .arrow {
  opacity: .4;
  font-size: 9px;
  margin-left: 3px;
}

.tbl--sortable th[aria-sort]:not([aria-sort="none"]) .arrow {
  opacity: 1;
  color: var(--acc);
}

/* Суммы. Приход — акцентом, расход — обычным моноширинным. */
.amt-plus {
  color: var(--acc);
  font-family: var(--mono);
  font-weight: 600;
  white-space: nowrap;
}

.amt-minus {
  font-family: var(--mono);
  white-space: nowrap;
}