/* Выбор нескольких клиентов: круги у строк и полоса над списком.

   Вынесено из client.css, когда тот перерос двести строк: обычная
   строка и строка в режиме выбора — разные состояния одного списка,
   и правила у них тоже разные.

   Круг слева, строка чуть правее, выбранная подсвечена. Всё как
   в переписке на телефоне: там этот приём знают все, и придумывать
   ему замену — значит учить человека заново. */

.client__pick {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  margin-left: var(--sp-4);
  border: 2px solid var(--line);
  border-radius: 50%;
  color: var(--on-accent);
  animation: pick-in var(--fast) var(--ease);
}

.client__pick.is-on {
  background: var(--accent);
  border-color: var(--accent);
}

.client__pick .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
  stroke-width: 3;
}

/* В режиме выбора строка не ведёт в карточку, а выбирается — и ссылка
   внутри неё нажатий не ловит. Иначе одно движение делало бы два дела
   сразу. */
.client-line--picking .client { pointer-events: none; }
.client-line--picking { cursor: pointer; }

.client-line--picking .client { padding-left: var(--sp-3); }

.client-line.is-picked {
  background: var(--surface-2);
  border-color: var(--accent-dim);
}

@keyframes pick-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

/* Полоса выбора: крестик слева, счёт посередине, удаление справа —
   в том порядке, в каком о них думают. Держится под полкой поиска,
   на её же фоне: обе — верх экрана, а не части списка. */
.pickbar {
  position: sticky;
  top: calc(var(--sp-12) + var(--sp-6));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 calc(var(--sp-4) * -1) var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  box-shadow: 0 6px 14px var(--shelf-shadow);
}

.pickbar__off {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}

.pickbar__count {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Удаление красное и словом: в этой полосе оно единственное дело,
   и промахнуться мимо него нельзя. */
.pickbar__drop {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.pickbar__drop[disabled] {
  opacity: .4;
  cursor: default;
}

.pickbar__drop .icon,
.pickbar__off .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}