/* ==========================================================================
   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; }
}
.bulk-bar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary-hover);
  cursor: pointer;
}
.bulk-bar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }