/* =============================================================================
   BanketPro · Motion layer
   Тонкие анимации/transitions для CRM. Подключается последним в base.html,
   чтобы перекрыть отсутствующие transitions в более ранних CSS.
   Принципы:
   - Только transform/opacity (GPU-cheap, no layout thrash)
   - Длительность 120-240ms (var(--dur-fast|med))
   - Easing — var(--ease-out) для входа, var(--ease-inout) для смены состояний
   - Все анимации отключаются через @media (prefers-reduced-motion: reduce)
   ============================================================================= */

/* ─── Кнопки — нажатие, лёгкий «отклик» ──────────────────────────────────── */
.bp-btn { transition: background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out),
                      color var(--dur-fast) var(--ease-out),
                      transform var(--dur-fast) var(--ease-out),
                      box-shadow var(--dur-fast) var(--ease-out); }
.bp-btn:active { transform: scale(0.97); }
.bp-btn:disabled, .bp-btn[aria-disabled="true"] { transform: none; }

/* ─── Шевроны / стрелки в триггерах — плавный поворот ───────────────────── */
[aria-expanded] > svg,
.bp-nav__group-toggle .bp-nav__group-chev > svg,
.bp-faq__q svg,
.bp-org-switcher__btn > svg:last-child {
  transition: transform var(--dur-fast) var(--ease-out);
}
[aria-expanded="true"] > svg:not(.bp-nav__group-chev *),
.bp-org-switcher__btn[aria-expanded="true"] > svg:last-child {
  transform: rotate(180deg);
}

/* ─── Чек-бокс — анимация «галочки» (для bp-checkbox / native input) ────── */
input[type="checkbox"] { transition: background-color var(--dur-fast) var(--ease-out),
                                     border-color var(--dur-fast) var(--ease-out); }
input[type="checkbox"]:checked { animation: bp-checkbox-pop 220ms var(--ease-out); }
@keyframes bp-checkbox-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ─── Status pills / chips — плавный кроссфейд при смене статуса ────────── */
.bp-status, .bp-chip, .bp-pill, .bp-badge {
  transition: background-color var(--dur-med) var(--ease-inout),
              color var(--dur-med) var(--ease-inout),
              border-color var(--dur-med) var(--ease-inout);
}

/* ─── Sidebar nav-item — slide-in активного индикатора (3px рейл слева) ── */
.bp-nav__item { transition: background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out); }
.bp-sidebar--v2 .bp-nav__item.is-active::before {
  animation: bp-rail-slide 240ms var(--ease-out) both;
  transform-origin: center;
}
@keyframes bp-rail-slide {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ─── Sidebar group collapse — реальный height transition через grid ───── */
.bp-sidebar--v2 .bp-nav__group-items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}
.bp-sidebar--v2 .bp-nav__group.is-collapsed .bp-nav__group-items,
.bp-sidebar--v2 .bp-nav__group[aria-expanded="false"] .bp-nav__group-items {
  grid-template-rows: 0fr;
}
.bp-sidebar--v2 .bp-nav__group-items > * { overflow: hidden; }

/* ─── Page entry stagger (только для CRM-шелла) ────────────────────────── */
body.bp-has-shell .bp-page__head {
  animation: bp-page-fade-up 360ms var(--ease-out) both;
}
body.bp-has-shell .bp-page__head + * .bp-card,
body.bp-has-shell .bp-page__head + .bp-card,
body.bp-has-shell main .bp-grid-4 > * {
  animation: bp-page-fade-up 420ms var(--ease-out) both;
  animation-delay: 80ms;
}
body.bp-has-shell main .bp-grid-4 > *:nth-child(1) { animation-delay: 60ms; }
body.bp-has-shell main .bp-grid-4 > *:nth-child(2) { animation-delay: 110ms; }
body.bp-has-shell main .bp-grid-4 > *:nth-child(3) { animation-delay: 160ms; }
body.bp-has-shell main .bp-grid-4 > *:nth-child(4) { animation-delay: 210ms; }

/* Transform-only — контент НИКОГДА не прячется за opacity. Урок прототипа:
   старт с opacity:0 давал «пустой экран» в окно animation-delay и при
   server-навигации (клик по фильтру/сортировке = полная перезагрузка →
   каскад повторялся и читался как «прыжок»). Лёгкий подъём 6px без opacity
   читается как мягкое «оседание»: контент виден сразу, нет вспышки. */
@keyframes bp-page-fade-up {
  from { transform: translateY(6px); }
  to   { transform: translateY(0); }
}

/* ─── Hover-lift для интерактивных карточек ────────────────────────────── */
.bp-event-row, .bp-day-row, .bp-compact-list a, .bp-card[data-href] {
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.bp-event-row:hover, .bp-day-row:hover, .bp-compact-list a:hover {
  transform: translateX(2px);
}
.bp-card[data-href]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* ─── Tabs — sliding underline через ::after ───────────────────────────── */
.bp-tabs { position: relative; }
.bp-tab, .bp-tabs a, .bp-tabs button {
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
}
.bp-tab.is-active::after,
.bp-tabs a.is-active::after,
.bp-tabs button.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  animation: bp-tab-underline 220ms var(--ease-out);
}
@keyframes bp-tab-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Auto-dismiss alerts CSS removed in 50d075d — функция перенесена в .bp-toast
   (см. components.css:.is-leaving). Этот раздел зарезервирован. */

/* ─── Top progress bar (NProgress-style для server-rendered навигации) ─── */
.bp-progress-top {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--accent);
  width: 0;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 8px var(--accent);
  transition: width 300ms var(--ease-out), opacity 200ms var(--ease-in);
}
.bp-progress-top.is-visible { opacity: 1; }
.bp-progress-top.is-done    { opacity: 0; }

/* ─── Kanban-карточки (board view событий) — lift on hover ─────────────── */
.bp-board-card,
[data-board-card],
.bp-card--draggable {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.bp-board-card:hover,
[data-board-card]:hover,
.bp-card--draggable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.08);
}

/* ─── Универсальный focus-visible (a11y) — заметнее, чем default ───────── */
.bp-app :focus-visible,
.bp-public :focus-visible,
body.bp-has-shell :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-offset var(--dur-fast) var(--ease-out);
}

/* ─── KPI count-up — поддержка через будущий JS ────────────────────────── */
[data-bp-countup] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* =============================================================================
   КОМПОНЕНТЫ — НОВЫЕ
   ============================================================================= */

/* ─── Bulk-actions bar (floating bottom) ───────────────────────────────── */
.bp-bulk-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 100;
  background: var(--fg);
  color: var(--bg-elev);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 15, 15, 0.22), 0 0 0 1px rgba(255,255,255,0.06) inset;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
  max-width: calc(100vw - 32px);
}
.bp-bulk-bar:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.bp-bulk-bar[hidden] { display: block !important; }  /* keep in flow for animation */
.bp-bulk-bar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 14px;
  flex-wrap: wrap;
}
.bp-bulk-bar__count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.bp-bulk-bar__count b { color: var(--bg-elev); font-weight: 700; }
.bp-bulk-bar__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,0.10);
  border: 0;
  color: var(--bg-elev);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.bp-bulk-bar__clear:hover { background: rgba(255,255,255,0.18); }
.bp-bulk-bar__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bp-bulk-bar__actions .bp-btn {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  color: var(--bg-elev);
}
.bp-bulk-bar__actions .bp-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.24);
}
.bp-bulk-bar__actions .bp-btn--danger {
  background: var(--danger);
  border-color: var(--danger);
}
.bp-bulk-bar__actions .bp-btn--danger:hover {
  background: var(--danger-strong);
  border-color: var(--danger-strong);
}

/* Highlight selected rows */
tr.is-bulk-selected,
.is-bulk-selected {
  background: color-mix(in oklab, var(--accent-soft) 60%, transparent) !important;
}
tr.is-bulk-selected td { position: relative; }

/* Bulk checkbox column — компактнее */
.bp-th--bulk, .bp-td--bulk {
  width: 38px;
  padding-left: 14px !important;
  padding-right: 4px !important;
}
.bp-th--bulk input[type="checkbox"],
.bp-td--bulk input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
}

/* Mobile: bar становится full-width внизу */
@media (max-width: 640px) {
  .bp-bulk-bar {
    left: 8px;
    right: 8px;
    transform: translateY(8px);
    max-width: none;
  }
  .bp-bulk-bar:not([hidden]) { transform: translateY(0); }
}

/* Клиренс над мобильным таб-баром: базовый bottom:16px садил bulk-bar поверх
   фиксированного нижнего таб-бара (shell mobile ≤780px). Поднимаем его на
   высоту бара + safe-area. */
@media (max-width: 780px) {
  .bp-bulk-bar { bottom: var(--bottom-fixed-clearance); }
}

/* ─── Pagination — bp-* styled (X–Y из Z + nav) ────────────────────────── */
.bp-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0;
  font-size: 13px;
  color: var(--fg-muted);
}
.bp-pagination__info b { color: var(--fg); font-weight: 600; }
.bp-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bp-pagination__btn,
.bp-pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.bp-pagination__btn:hover,
.bp-pagination__num:not(.is-active):hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.bp-pagination__num.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  cursor: default;
}
.bp-pagination__btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.bp-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--fg-subtle);
  user-select: none;
}

/* ─── Universal status_chip (template tag) ─────────────────────────────── */
.bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  background: var(--bg-subtle);
  color: var(--fg);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.bp-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 14%, transparent);
}
.bp-chip__label { font-variant-numeric: tabular-nums; }

.bp-chip--accent {
  background: color-mix(in oklab, var(--accent) 8%, var(--bg-elev));
  color: var(--accent-press);
  border-color: color-mix(in oklab, var(--accent) 20%, var(--border));
}
.bp-chip--ok {
  background: var(--ok-soft);
  color: var(--ok-strong);
  border-color: color-mix(in oklab, var(--ok) 22%, var(--border));
}
.bp-chip--warn {
  background: var(--warn-soft);
  color: var(--warn-strong);
  border-color: color-mix(in oklab, var(--warn) 22%, var(--border));
}
.bp-chip--info {
  background: var(--info-soft);
  color: var(--info-strong);
  border-color: color-mix(in oklab, var(--info) 22%, var(--border));
}
.bp-chip--danger {
  background: var(--danger-soft);
  color: var(--danger-strong);
  border-color: color-mix(in oklab, var(--danger) 22%, var(--border));
}
.bp-chip--neutral {
  background: var(--bg-subtle);
  color: var(--fg-muted);
}

.bp-chip--sm { padding: 1px 8px 1px 6px; font-size: 11px; }
.bp-chip--sm .bp-chip__dot { width: 5px; height: 5px; }

/* Subtle pulse on accent chip — communicates "active" event */
.bp-chip--accent .bp-chip__dot {
  animation: bp-chip-pulse 2.4s ease-in-out infinite;
}
@keyframes bp-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 22%, transparent); }
}

/* ─── Sparkline для KPI-карточек ───────────────────────────────────────── */
.bp-metric__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  min-height: 22px;
}
.bp-spark {
  width: 60px;
  height: 20px;
  flex-shrink: 0;
  overflow: visible;
  opacity: 0;
  animation: bp-spark-fade 600ms 200ms var(--ease-out) both;
}
.bp-spark polyline {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: bp-spark-draw 900ms 250ms var(--ease-out) both;
}
@keyframes bp-spark-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bp-spark-draw {
  to { stroke-dashoffset: 0; }
}

/* ─── Filter reset button slide-in ─────────────────────────────────────── */
.bp-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  background: color-mix(in oklab, var(--accent) 6%, var(--bg-elev));
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  animation: bp-filter-reset-in 240ms var(--ease-out) both;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.bp-filter-reset:hover {
  background: color-mix(in oklab, var(--accent) 14%, var(--bg-elev));
  border-color: var(--accent);
}
@keyframes bp-filter-reset-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Empty state — лёгкая floating-анимация иконки ────────────────────── */
.bp-empty__icon,
.bp-empty-state__icon,
[class*="empty"] > svg:first-child {
  animation: bp-empty-float 4.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes bp-empty-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ─── Sortable table headers ───────────────────────────────────────────── */
.bp-th--sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.bp-th--sortable::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: -1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'><path d='M3 4l2-2 2 2'/><path d='M3 6l2 2 2-2'/></svg>");
  background-size: 10px;
  background-repeat: no-repeat;
  opacity: 0.4;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bp-th--sortable:hover { color: var(--accent); }
.bp-th--sortable:hover::after { opacity: 0.8; }
.bp-th--sortable.is-asc::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round'><path d='M3 6l2-2 2 2'/></svg>");
  opacity: 1;
  color: var(--accent);
}
.bp-th--sortable.is-desc::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round'><path d='M3 4l2 2 2-2'/></svg>");
  opacity: 1;
  color: var(--accent);
}

/* =============================================================================
   ИСПРАВЛЕНИЯ ВИЗУАЛЬНЫХ ДЕФЕКТОВ (по результатам аудита)
   ============================================================================= */

/* Sidebar active rail clipping fix — left:-3px обрезался overflow-x:hidden */
.bp-sidebar--v2 .bp-nav__item.is-active::before {
  left: 0 !important;
  border-radius: 0 3px 3px 0;
}

/* (dead .bp-search-trigger gap-fix удалён — поиск теперь в топбаре .bp-topbar-search) */

/* Унификация page sub margin-top — последнее правило выигрывало с 4px (слишком тесно) */
.bp-page__head .bp-page__sub { margin-top: 6px; }

/* Card hover для интерактивных CRM-карточек */
.bp-card[role="link"],
.bp-card[data-href],
.bp-card.is-clickable,
.bp-event-card,
.bp-task-card {
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.bp-card[role="link"]:hover,
.bp-card[data-href]:hover,
.bp-card.is-clickable:hover,
.bp-event-card:hover,
.bp-task-card:hover {
  border-color: color-mix(in oklab, var(--accent) 25%, var(--border));
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

/* Focus-visible на ранее упущенных интерактивных элементах */
.bp-nav__group-toggle:focus-visible,
.bp-modal__close:focus-visible,
.bp-close:focus-visible,
.bp-feedback__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Django errorlist — глобальный сброс default browser-стилей ─────────
   Raw `{{ form.field.errors }}` рендерит `<ul class="errorlist"><li>...</li></ul>`
   с дефолтными буллетами и margin'ом. Это видно в employee_form, hall_form,
   dish_form, event_update_form и др. Удаляем буллеты, обнуляем padding,
   красим в danger-цвет, добавляем мелкий gap между сообщениями.
*/
ul.errorlist {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  font-size: 12px;
  line-height: 1.4;
  color: var(--danger);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
ul.errorlist li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-left: 0 !important;
  list-style: none !important;
}
ul.errorlist li::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  background: var(--danger);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
ul.errorlist.nonfield {
  background: var(--danger-soft);
  border: 1px solid color-mix(in oklab, var(--danger) 25%, var(--border));
  padding: 10px 14px !important;
  border-radius: 8px;
  margin-bottom: 14px !important;
  color: var(--danger-strong);
}
ul.errorlist.nonfield li::before { display: none; }

/* ─── Mismatched action-row button heights (product_form, etc.) ────────── */
.bp-form__actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.bp-form__actions .bp-btn { min-height: 30px; }
.bp-form__actions .bp-btn--sm { min-height: 26px; }
/* Когда в одном ряду Cancel (sm) и Submit (default) — выравниваем к большему */
.bp-form__actions:has(.bp-btn--sm + .bp-btn:not(.bp-btn--sm)) .bp-btn--sm,
.bp-form__actions:has(.bp-btn:not(.bp-btn--sm) + .bp-btn--sm) .bp-btn--sm { min-height: 30px; }

/* ─── Link в alert (например, dedup-warning в client_form) — soft focus ── */
.bp-alert a:focus-visible,
.bp-alert--warn a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-radius: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Inline-ссылки — мягкий focus вместо «жирной рамки» ─────────────────
   Default `:focus-visible { outline: 2px solid + offset 2px }` на inline-ссылках
   («Забыли пароль?», «Регистрация», ссылки в футере и др.) выглядит как
   наклейка-обводка вокруг текста. Заменяем на soft box-shadow ring +
   underline — выглядит как полноценная focus-индикация без визуального
   мусора. */
a:focus-visible:not(.bp-btn):not(.bp-chipbtn):not(.bp-menu__item):not(.bp-nav__item),
.bp-auth__forgot:focus-visible,
.bp-auth__alt-foot a:focus-visible,
.bp-footer__links a:focus-visible,
.bp-pub-nav a:focus-visible,
.bp-pub-footer-rich__col a:focus-visible,
.bp-org-menu__item:focus-visible,
.bp-bell:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* «Забыли пароль?» — мягче padding/margin и hover-фон только при наведении мышью */
.bp-auth__forgot {
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.bp-auth__forgot:focus-visible {
  outline: none !important;
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Иконки внутри input (eye-toggle и т.д.) — внутренний outline без layout shift */
.bp-input__icon-btn:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px !important;
  border-radius: 4px;
}

/* Перформанс: оптимизация анимации .bp-btn--accent::before (transform вместо left) */
.bp-public .bp-btn--accent { contain: paint; }
.bp-public .bp-btn--accent::before {
  transition: transform 0.7s var(--ease-out) !important;
  left: 0 !important;
  transform: translateX(-260%);
}
.bp-public .bp-btn--accent:hover::before {
  transform: translateX(260%) !important;
  left: 0 !important;
}

/* Прогресс-бары — transform: scaleX вместо width для GPU-ускорения */
.bp-progress__fill,
.bp-progress-bar__fill,
[data-bp-progress-fill] {
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
}

/* Auto-dismiss alerts уже определён выше — здесь только повышение специфичности */

/* Контраст: cancelled status был ниже WCAG AA (4.43:1) — усиливаем foreground */
.bp-status--cancelled,
.bp-chip--cancelled {
  color: #4b5563 !important; /* было #6b7280 — теперь ≥4.6:1 на #f3f4f6 */
}

/* ─── Auth-страницы: «оседание» контента при загрузке (одноразовое) ──────
   Большие SaaS (Notion/Linear/Stripe) мягко проявляют карточку входа. Формы
   auth — терминальные (нет внутренней server-навигации, где каскад повторялся
   бы), поэтому короткий fade-up с лёгким stagger безопасен. */
.bp-auth__form-inner > * { animation: bp-auth-rise 460ms var(--ease-out) both; }
.bp-auth__form-inner > *:nth-child(1) { animation-delay: 30ms; }
.bp-auth__form-inner > *:nth-child(2) { animation-delay: 70ms; }
.bp-auth__form-inner > *:nth-child(3) { animation-delay: 110ms; }
.bp-auth__form-inner > *:nth-child(4) { animation-delay: 150ms; }
.bp-auth__form-inner > *:nth-child(n+5) { animation-delay: 180ms; }
@keyframes bp-auth-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Ошибка формы: проявление + короткий «shake» (узнаваемый SaaS-паттерн
   недопустимого ввода). Баннер рендерится сервером при ошибке → страница
   перезагрузилась из-за неё, встряска уместна и привлекает взгляд к причине. */
.bp-auth-error,
.bp-form ul.errorlist.nonfield,
.bp-alert--error {
  animation: bp-err-shake 500ms var(--ease-out) both;
}
@keyframes bp-err-shake {
  0%   { opacity: 0; transform: translateX(0); }
  16%  { opacity: 1; }
  30%  { transform: translateX(-5px); }
  45%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); }
  75%  { transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Уважаем prefers-reduced-motion — критически важно для a11y (WCAG 2.3.3)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .bp-progress-top { display: none; }
}