/* ==========================================================================
   Accounts page — bulk selection toolbar (see accounts.html's [data-bulk-toolbar]
   and app.js's updateBulkToolbar/selectAllFiltered/data-bulk-clear). Proportions
   from the reference mockup's own .bulk-bar, re-expressed in this file's tokens.
   ========================================================================== */
/* Плашка живёт в потоке всегда, а видимой становится по is-open. Так её появление
   можно анимировать: display:none переключается мгновенно и толкает список вниз
   рывком, а высота, отступы и прозрачность едут плавно, и список расступается.
   Схлопнутое состояние — нулевая высота и нулевые отступы, поэтому пустая плашка не
   занимает ни одной точки и ничего под собой не сдвигает. */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-radius: 12px;
  background: var(--color-primary-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  overflow: hidden;
  max-height: 0;
  margin-bottom: 0;
  padding-block: 0;
  padding-inline: 0.65rem;
  opacity: 0;
  border-width: 0;
  transform: translateY(-4px);
  transition:
    max-height 220ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
    margin-bottom 220ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
    padding-block 220ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
    opacity 160ms ease,
    transform 220ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.bulk-bar.is-open {
  /* С запасом на перенос кнопок в две строки на узком экране: max-height
     анимируется только от конкретного значения, а auto не анимируется вовсе. */
  max-height: 12rem;
  margin-bottom: 0.75rem;
  padding-block: 0.55rem;
  opacity: 1;
  border-width: 1px;
  transform: none;
}
/* Кому анимация мешает — тому её нет: состояние переключается, движение пропадает. */
@media (prefers-reduced-motion: reduce) {
  .bulk-bar { transition: none; }
}
/* Слева — понятный «Выбрать все» с чекбоксом (раньше чекбокс стоял без подписи, и
   было непонятно, что он делает) и пилюля «Выбрано N». Чекбокс показывает три
   состояния: пусто / часть (чёрточка) / все. */
.bulk-bar-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}
.bulk-bar-left input { width: 17px; height: 17px; accent-color: var(--color-primary); cursor: pointer; }
.bulk-bar-all { color: var(--color-primary-hover); }
.bulk-bar-selected {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.2rem 0.15rem 0.6rem; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted);
}
/* Число выбранного — пилюлей, а не частью фразы: глаз ищет в этой плашке именно
   его, и на фоне ряда кнопок обычный текст в 0.72rem терялся. */
.bulk-bar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bulk-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
/* Кнопки действий — ровные пилюли одного роста: главное действие (роль) залито,
   остальные — на поверхности с тонкой рамкой, «Снять выбор» — призрачная. Значки
   чуть меньше текста — они подсказка, а не картинка. */
.bulk-act {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 34px; padding: 0 0.85rem; border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: 600; line-height: 1;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: background .12s ease, border-color .12s ease, transform .1s ease, box-shadow .12s ease;
}
.bulk-act:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); background: var(--color-surface-muted); }
.bulk-act:active { transform: translateY(1px); }
.bulk-act.is-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.bulk-act.is-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.bulk-act.is-ghost { background: transparent; border-color: transparent; color: var(--color-text-muted); }
.bulk-act.is-ghost:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.bulk-bar-actions .btn .icon { width: 0.9rem; height: 0.9rem; flex: none; }
/* «Снять выбор» — выход из режима, а не восьмое действие над аккаунтами: отделён
   чертой и звучит тише остальных, чтобы не перетягивать внимание на себя (раньше
   он был единственной залитой кнопкой в ряду и читался как главное действие). */
.bulk-bar-sep {
  width: 1px;
  align-self: stretch;
  margin-inline: 0.25rem;
  background: color-mix(in srgb, var(--color-primary) 26%, transparent);
}