/* =============================================================================
   BanketPro · polish.css — финальные улучшения: палитра поиска, складные группы
   сайдбара, drawer-фильтры, страница Billing, мелкие tweaks.
   ============================================================================= */

/* ═══════════ COMMAND PALETTE — продакшн ═══════════════════════════════ */
.bp-cmdk { width: 640px !important; max-width: 94vw; padding-bottom: 0; display: flex; flex-direction: column; }
.bp-cmdk__input { padding: 14px 16px !important; gap: 12px !important; }
.bp-cmdk__input input { font-size: 15px; }
.bp-cmdk__clear {
  border: none; background: var(--bg-subtle); width: 20px; height: 20px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-muted);
}
.bp-cmdk__clear:hover { background: var(--bg-hover); color: var(--fg); }

.bp-cmdk__body { max-height: 56vh; padding: 8px !important; }

.bp-cmdk__group {
  font-size: 10px !important; font-weight: 600; letter-spacing: 0.1em;
  color: color-mix(in oklab, var(--fg-subtle) 100%, transparent);
  padding: 12px 10px 4px !important;
  display: flex; align-items: center; justify-content: space-between;
}
.bp-cmdk__group-clear {
  border: none; background: transparent; color: var(--fg-subtle); font-size: 10px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px; letter-spacing: 0;
  text-transform: none; font-weight: 500;
}
.bp-cmdk__group-clear:hover { background: var(--bg-hover); color: var(--fg); }

.bp-cmdk__item {
  display: grid !important;
  grid-template-columns: 28px 1fr auto;
  gap: 10px !important;
  padding: 8px 10px !important;
  align-items: center;
  font-size: 13.5px;
  position: relative;
}
.bp-cmdk__item span { flex: initial !important; }
.bp-cmdk__item.is-active { background: var(--bg-hover); }
.bp-cmdk__item.is-active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--accent); border-radius: 2px;
}
.bp-cmdk__item-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--bg-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
}
.bp-cmdk__item.is-active .bp-cmdk__item-icon {
  background: var(--accent-soft); color: var(--accent);
}
.bp-cmdk__item-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bp-cmdk__item-label { font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-cmdk__item-meta { font-size: 12px; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-cmdk__mark {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent-press);
  border-radius: 2px; padding: 0 1px;
  font-weight: 600;
}
.bp-cmdk__item-recent {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--fg-subtle);
  padding: 2px 6px; border-radius: 999px;
  background: var(--bg-subtle);
  font-weight: 500;
}

.bp-cmdk__empty {
  padding: 48px 20px !important;
  display: flex; flex-direction: column; align-items: center;
  color: var(--fg-subtle);
}

.bp-cmdk__foot {
  display: flex; gap: 14px; align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: 11px; color: var(--fg-muted);
}
.bp-cmdk__foot span { display: inline-flex; align-items: center; gap: 6px; }
.bp-cmdk__foot .bp-kbd {
  font-size: 10px; padding: 1px 5px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 3px;
  min-width: 14px; text-align: center;
}

/* ═══════════ HIDE KEYBOARD SHORTCUTS (visual) ═════════════════════════════
   Убираем визуально все индикаторы горячих клавиш — они не нужны конечному
   пользователю прототипа. Сами хоткеи в коде остаются (работают), но
   пользователь их не видит.
   ════════════════════════════════════════════════════════════════════════ */
/* Скрываем все hotkey-бейджи КРОМЕ топбар-поиска: прототип требует видимый «Ctrl K». */
.bp-kbd:not(.bp-topbar-search__kbd) { display: none !important; }

/* ═══════════ SIDEBAR — стиль прототипа (компактная версия для no-scroll) ══
   Все размеры близки к прототипу banketpro4, чуть ужаты так, чтобы 12 пунктов
   + 3 группы влезали без скролла на ≤780px viewport. Активный фон / left-rail
   / tinted-icon — точно как в прототипе через --nav-group-tint. */

/* Внешний контейнер */
.bp-sidebar--v2 { padding: 8px 8px 8px !important; gap: 2px !important; }
.bp-sidebar--v2 .bp-sidebar__top { padding: 2px 4px 8px !important; }

/* Org switcher и поиск — в стиле прототипа */
.bp-sidebar--v2 .bp-org-switcher { margin: 0 2px 6px !important; }
.bp-sidebar--v2 .bp-org-switcher__btn { padding: 7px 10px !important; border-radius: 9px !important; }

/* Nav: вертикаль, без скролла (компромисс между прототипом и ограниченной высотой). */
.bp-sidebar--v2 .bp-nav {
  gap: 2px !important;
  padding: 2px 2px 4px !important;
  overflow: hidden !important;
  min-height: 0;
  flex: 1 1 0;
}
.bp-sidebar--v2 .bp-nav__group { gap: 0; }
/* audit/production-readiness: 4px → 12px между секциями (Работа/База/Управление),
   чтобы они визуально разделялись, а не сливались в один длинный список. */
.bp-sidebar--v2 .bp-nav__group + .bp-nav__group { margin-top: 12px; }

/* Group label — стиль прототипа (10px uppercase + 4px-точка перед текстом).
   audit/production-readiness: bottom padding 2px → 6px, чтобы label «РАБОТА» не
   прижимался к первой ссылке группы. */
.bp-sidebar--v2 .bp-nav__group-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  padding: 6px 10px 6px !important;
  color: color-mix(in oklab, var(--fg-subtle) 85%, transparent);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}

/* Item — комфортнее, чем «компактно» (audit/production-readiness):
   - padding 4px → 7px вертикально (text/icon не упираются в hover-rounded-rect);
   - min-height 30px → 34px (тач-target лучше + воздух вокруг иконки);
   - gap между иконкой и текстом 11px — оставляем (хорошо читается). */
.bp-sidebar--v2 .bp-nav__item {
  padding: 7px 10px !important;
  gap: 11px !important;
  font-size: 13px !important;
  font-weight: 500;
  border-radius: 8px;
  position: relative;
  color: color-mix(in oklab, var(--fg-muted) 95%, var(--fg) 5%);
  min-height: 34px;
  transition: background 160ms ease, color 140ms ease, box-shadow 200ms ease;
}
.bp-sidebar--v2 .bp-nav__icon-wrap {
  width: 22px !important; height: 22px !important; border-radius: 6px !important;
  color: color-mix(in oklab, var(--fg-subtle) 90%, transparent);
  background: transparent;
  transition: background 160ms ease, color 140ms ease, transform 160ms ease, box-shadow 200ms ease;
}

/* Hover — мягкий, иконка подкрашивается в цвет группы */
.bp-sidebar--v2 .bp-nav__item:hover {
  background: color-mix(in oklab, var(--bg-hover) 70%, transparent);
  color: var(--fg);
}
.bp-sidebar--v2 .bp-nav__item:hover .bp-nav__icon-wrap {
  color: var(--nav-group-tint);
  background: color-mix(in oklab, var(--nav-group-tint) 12%, transparent);
}

/* ── Активный пункт: мягкая карточка + 3px рейл слева в цвет группы ── */
.bp-sidebar--v2 .bp-nav__item.is-active {
  background: linear-gradient(180deg,
    var(--bg-elev),
    color-mix(in oklab, var(--bg-elev) 94%, var(--nav-group-tint) 6%));
  color: var(--fg);
  font-weight: 600;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--border) 90%, var(--nav-group-tint) 12%),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 10px -6px color-mix(in oklab, var(--nav-group-tint) 32%, transparent);
}
.bp-sidebar--v2 .bp-nav__item.is-active::before {
  content: '';
  position: absolute;
  left: -3px; top: 7px; bottom: 7px;
  width: 3px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--nav-group-tint) 100%, white 15%),
    var(--nav-group-tint));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px color-mix(in oklab, var(--nav-group-tint) 55%, transparent);
}
.bp-sidebar--v2 .bp-nav__item.is-active .bp-nav__icon-wrap {
  color: var(--nav-group-tint);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--nav-group-tint) 20%, transparent),
    color-mix(in oklab, var(--nav-group-tint) 14%, transparent));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--nav-group-tint) 26%, transparent),
    0 1px 2px color-mix(in oklab, var(--nav-group-tint) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3);
}

/* Бейджи — обычные / в активном состоянии — в цвете группы */
.bp-sidebar--v2 .bp-nav__badge {
  min-width: 20px; height: 19px; padding: 0 6px;
  font-size: 11px; font-weight: 600; border-radius: 999px;
  background: color-mix(in oklab, var(--bg-subtle) 80%, transparent);
  border-color: color-mix(in oklab, var(--border) 70%, transparent);
  color: var(--fg-muted);
}
.bp-sidebar--v2 .bp-nav__item.is-active .bp-nav__badge {
  background: var(--nav-group-tint); color: #fff; border-color: transparent;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--nav-group-tint) 35%, transparent);
}

/* User-trigger в футере (как в прототипе) */
.bp-sidebar--v2 .bp-sidebar__user { padding: 8px 10px !important; margin: 4px 2px 0 !important; gap: 10px; border-radius: 8px; }

/* ── Свёрнутый сайдбар (rail-режим) — иконки только ──
   audit/production-readiness:
   1) bp-sidebar__top меняем на column-layout — логотип (38×38) над toggle,
      они больше не жмутся друг к другу в narrow 56px.
   2) Active state упрощаем — убираем ring-shadow и backgroun-gradient на
      35×42 item (выглядело как «контактная карточка» вокруг 28px иконки);
      оставляем только цветной tint самой icon-wrap + 3px рейл слева, который
      теперь не уезжает за край сайдбара. */
.bp-sidebar--v2.is-collapsed .bp-sidebar__top {
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 4px 12px !important;
}
.bp-sidebar--v2.is-collapsed .bp-sidebar__collapse {
  width: 28px; height: 28px; padding: 4px !important;
}
.bp-sidebar--v2.is-collapsed .bp-nav__item { padding: 7px !important; border-radius: 10px; justify-content: center; }
.bp-sidebar--v2.is-collapsed .bp-nav__icon-wrap { width: 28px !important; height: 28px !important; }
.bp-sidebar--v2.is-collapsed .bp-nav__item.is-active {
  background: transparent !important;
  box-shadow: none !important;
}
.bp-sidebar--v2.is-collapsed .bp-nav__item.is-active::before {
  left: 0; top: 10px; bottom: 10px;
}
.bp-sidebar--v2.is-collapsed .bp-nav__group + .bp-nav__group {
  border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  padding-top: 8px; margin-top: 4px;
}
.bp-sidebar--v2.is-collapsed .bp-nav__label,
.bp-sidebar--v2.is-collapsed .bp-nav__badge,
.bp-sidebar--v2.is-collapsed .bp-nav__dot,
.bp-sidebar--v2.is-collapsed .bp-nav__group-label,
.bp-sidebar--v2.is-collapsed .bp-nav__group-chev,
.bp-sidebar--v2.is-collapsed .bp-sidebar__user-meta,
.bp-sidebar--v2.is-collapsed .bp-sidebar__user-chev { display: none !important; }
/* audit/production-readiness: всю toggle-кнопку секции прячем в rail-режиме —
   обрезанные «РАБ», «БАЗ», «УПР» (overflow visible поверх width:0 label)
   выглядели как баг. Группы разделяет hairline-border на .bp-nav__group +
   .bp-nav__group, этого достаточно. */
.bp-sidebar--v2.is-collapsed .bp-nav__group-toggle { display: none !important; }
.bp-sidebar--v2.is-collapsed .bp-org-switcher__btn { padding: 6px !important; justify-content: center; }
.bp-sidebar--v2.is-collapsed .bp-org-switcher__meta,
.bp-sidebar--v2.is-collapsed .bp-org-switcher__btn svg.feather-chevron-down { display: none; }

/* ═══════════ SIDEBAR — Collapsible groups (Работа/База/Управление) ════ */
.bp-sidebar--v2 .bp-nav__group-toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  /* audit/production-readiness: 4px 10px 2px → 8px 10px 6px — label теперь
     не прижимается ни к ссылке ниже, ни к ссылке предыдущей секции сверху. */
  padding: 8px 10px 6px;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit;
  border-radius: 6px;
  text-align: left;
  transition: background 120ms ease;
}
.bp-sidebar--v2 .bp-nav__group-toggle:hover {
  background: color-mix(in oklab, var(--bg-hover) 50%, transparent);
}
/* Label-span внутри кнопки — переопределяем padding (toggle уже даёт его) */
.bp-sidebar--v2 .bp-nav__group-toggle .bp-nav__group-label {
  padding: 0 !important; gap: 6px; flex: 1; display: flex; align-items: center;
}
.bp-sidebar--v2 .bp-nav__group-chev {
  display: inline-flex; transition: transform 180ms ease;
  opacity: 0.6;
}
.bp-sidebar--v2 .bp-nav__group.is-collapsed .bp-nav__group-chev { transform: rotate(-90deg); }
.bp-sidebar--v2 .bp-nav__group-count {
  margin-left: auto; font-size: 10px; font-weight: 500;
  color: var(--fg-subtle); letter-spacing: 0;
  opacity: 0; transition: opacity 160ms ease;
}
.bp-sidebar--v2 .bp-nav__group.is-collapsed .bp-nav__group-count { opacity: 1; }
.bp-sidebar--v2 .bp-nav__group-items {
  /* audit/production-readiness: gap 2px → 3px — между ссылками в секции
     чуть больше воздуха, не выглядят слипшимися. */
  display: flex; flex-direction: column; gap: 3px;
  overflow: hidden;
  transition: max-height 240ms ease, opacity 200ms ease;
}
.bp-sidebar--v2 .bp-nav__group.is-collapsed .bp-nav__group-items {
  max-height: 0; opacity: 0;
}

/* Pinned current — мини-навигация между разделами */
.bp-sidebar--v2 .bp-nav__item-hot {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--fg-subtle);
  font-weight: 500;
  padding: 1px 5px; border-radius: 4px;
  background: color-mix(in oklab, var(--bg-subtle) 60%, transparent);
}

/* ═══════════ EVENT DETAIL — кнопка публичной страницы ═════════════════ */
.bp-public-link-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent-soft) 40%, var(--bg-elev)),
    var(--bg-elev));
  border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
  border-radius: var(--radius-md);
}
.bp-public-link-card__icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bp-public-link-card__body { flex: 1; min-width: 0; }
.bp-public-link-card__title { font-weight: 600; font-size: 13px; }
.bp-public-link-card__sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.bp-public-link-card__url {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; margin-top: 2px;
}

/* ═══════════ FILTERS DRAWER (для событий и не только) ════════════════ */
.bp-filter-pop {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 340px; max-width: 92vw;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  z-index: 200;
  overflow: hidden;
  animation: bp-fade-in 140ms var(--ease-out, ease-out);
}
.bp-filter-pop__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.bp-filter-pop__title { font-weight: 600; font-size: 13px; }
.bp-filter-pop__body { padding: 4px 14px 14px; max-height: 60vh; overflow-y: auto; }
.bp-filter-pop__group { padding: 10px 0; border-top: 1px solid var(--border); }
.bp-filter-pop__group:first-child { border-top: none; }
.bp-filter-pop__group-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-subtle);
  margin-bottom: 8px;
}
.bp-filter-pop__opts { display: flex; flex-direction: column; gap: 4px; }
.bp-filter-pop__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 13px;
  border: none; background: transparent; width: 100%;
  text-align: left; font-family: inherit;
  color: var(--fg);
}
.bp-filter-pop__opt:hover { background: var(--bg-hover); }
.bp-filter-pop__opt-check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elev);
  color: transparent;
  flex-shrink: 0;
}
.bp-filter-pop__opt.is-active .bp-filter-pop__opt-check {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.bp-filter-pop__opt-count {
  margin-left: auto; color: var(--fg-subtle); font-size: 11px;
}
.bp-filter-pop__range {
  display: flex; gap: 8px;
}
.bp-filter-pop__range input {
  flex: 1; min-width: 0;
}
.bp-filter-pop__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

/* Badge on filter button */
.bp-filter-btn-wrap { position: relative; display: inline-flex; }
.bp-filter-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 600;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-elev);
}

/* Active filter chips row under toolbar */
.bp-active-filters {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 0 10px;
}
.bp-active-filters__label { font-size: 12px; color: var(--fg-subtle); font-weight: 500; }
.bp-active-filter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-press);
  font-size: 12px; font-weight: 500;
  border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
}
.bp-active-filter button {
  border: none; background: transparent; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  color: var(--accent-press);
  opacity: 0.7;
}
.bp-active-filter button:hover { opacity: 1; background: color-mix(in oklab, var(--accent) 15%, transparent); }

/* AUDIT A-12/A-20: ~108 строк дефиниций .bp-billing-* удалены — не использовались
   в templates/billing/. Если billing UI понадобится в будущем — стиль легко
   восстанавливается из git history (commit предыдущей версии этого файла). */

/* ═══════════ MISC POLISH ═══════════════════════════════════════════════ */
/* Input spacing: fix cramped fields in forms */
.bp-input, .bp-select, .bp-textarea {
  line-height: 1.4;
}
.bp-form__row { gap: 12px; }

/* Role switcher trigger — position fixed bottom right; ensure above stage */
.bp-role-switcher-trigger {
  position: fixed; bottom: 14px; right: 14px; z-index: 9999;
  padding: 6px 10px 6px 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px; font-weight: 500;
  color: var(--fg);
  transition: box-shadow 160ms ease;
}
.bp-role-switcher-trigger:hover { box-shadow: var(--shadow-pop); }

/* Role switcher panel positioning */
.bp-role-switcher {
  position: fixed; bottom: 58px; right: 14px; z-index: 9999;
  width: 320px; max-width: calc(100vw - 28px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: bp-fade-in 140ms var(--ease-out, ease-out);
}

/* .bp-sidebar overflow-x убран — дублировал shell.css (overflow:hidden) и
   production-fixes.css (overflow-x:hidden !important). */

/* ═══════════ DICTIONARIES PANE — редактор справочников ═════════════════ */
.bp-dict {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  min-height: 480px;
}
.bp-dict__nav {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: start;
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.bp-dict__nav-title {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--fg-subtle); text-transform: uppercase;
  padding: 8px 10px 4px;
}
.bp-dict__nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: transparent; border: none;
  border-radius: calc(var(--radius) - 2px);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.bp-dict__nav-item:hover { background: var(--bg-hover); color: var(--fg); }
.bp-dict__nav-item.is-active {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: var(--fw-semi);
}
.bp-dict__nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-dict__nav-count {
  background: var(--bg-subtle);
  color: var(--fg-subtle);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: var(--fw-medium);
}
.bp-dict__nav-item.is-active .bp-dict__nav-count {
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
}

.bp-dict__pane {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bp-dict__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.bp-dict__title { font-size: 18px; font-weight: var(--fw-semi); color: var(--fg); }
.bp-dict__hint  { font-size: 13px; color: var(--fg-muted); margin-top: 2px; }

.bp-dict__add {
  display: flex; gap: 8px; align-items: center;
  padding: 12px; background: var(--bg-subtle);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.bp-dict__add .bp-input { flex: 1 1 200px; min-width: 0; }

.bp-dict__colors { display: inline-flex; gap: 4px; }
.bp-dict__color {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent;
  cursor: pointer; padding: 0;
  background: var(--bg-subtle);
}
.bp-dict__color.is-active { border-color: var(--fg); transform: scale(1.1); }
.bp-dict__color--neutral { background: var(--border); }
.bp-dict__color--info    { background: color-mix(in oklab, #3b82f6 40%, transparent); }
.bp-dict__color--ok      { background: color-mix(in oklab, #10b981 40%, transparent); }
.bp-dict__color--warn    { background: color-mix(in oklab, #f59e0b 40%, transparent); }
.bp-dict__color--danger  { background: color-mix(in oklab, #ef4444 40%, transparent); }
.bp-dict__color--accent  { background: color-mix(in oklab, var(--accent) 40%, transparent); }
.bp-dict__colors--sm .bp-dict__color { width: 16px; height: 16px; border-radius: 4px; border-width: 1px; }

.bp-dict__items {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 520px; overflow-y: auto;
}
.bp-dict__empty {
  padding: 40px 16px; text-align: center; color: var(--fg-subtle);
  background: var(--bg-subtle); border-radius: var(--radius);
}
.bp-dict__row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px;
  border-radius: calc(var(--radius) - 2px);
  transition: background 120ms;
}
.bp-dict__row:hover { background: var(--bg-hover); }
.bp-dict__row-color { min-width: 160px; }
.bp-dict__row-label {
  flex: 1; text-align: left; min-width: 0;
  background: transparent; border: none;
  padding: 6px 8px; border-radius: 4px;
  font-family: inherit; font-size: var(--fs-sm); color: var(--fg);
  cursor: text;
}
.bp-dict__row-label:hover { background: var(--bg-subtle); }
.bp-dict__row-input { flex: 1; min-width: 0; }
.bp-dict__row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

@media (max-width: 860px) {
  .bp-dict { grid-template-columns: 1fr; }
  .bp-dict__nav { position: static; max-height: 280px; }
}

/* ═══════════ QUICK CREATE (топбар) ═════════════════════════════════════ */
.bp-quick-create { position: relative; display: inline-block; }
.bp-quick-create #bp-quick-create-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  z-index: 70;
}
.bp-quick-create #bp-quick-create-menu[hidden] { display: none; }
@media (max-width: 640px) {
  .bp-quick-create__label { display: none; }
}

/* ═══════════ UTILITY HELPERS — порт из прототипа index.html ═════════════ */
/* Прототип определял эти утилиты inline в <style> главного html — здесь в едином месте, чтобы шаблоны Django могли их использовать без копий. */
.hstack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-stack, .stack { display: flex; flex-direction: column; gap: 10px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ═══════════ PROFILE PAGE ══════════════════════════════════════════════ */
.bp-profile { display: flex; flex-direction: column; gap: 14px; }

/* Hero — расширенные отступы и мягкая фон-карточка (повторяет prototype) */
.bp-profile-hero { padding: 22px 24px; gap: 22px; }
.bp-profile-hero__avatar img.bp-avatar { display: block; }
@media (max-width: 720px) {
  .bp-profile-hero { padding: 18px; gap: 14px; }
  .bp-profile-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* Tabs — увеличенный воздух между и подложка для активного, чтобы не слипались */
.bp-profile .bp-tabs { gap: 4px; margin-top: 4px; margin-bottom: 6px; padding: 0 2px; }
.bp-profile .bp-tab { padding: 12px 18px; line-height: 1.2; }

/* Форма — увеличенные межстрочные интервалы и ровная сетка пар */
.bp-profile .bp-form { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.bp-profile .bp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .bp-profile .bp-form__row { grid-template-columns: 1fr; } }

.bp-profile .bp-field__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.bp-profile .bp-field__hint  { font-size: 12px; color: var(--fg-subtle); margin-top: 6px; line-height: 1.4; }

/* Информация об аккаунте — равномерная сетка ключ/значение */
.bp-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; font-size: 13px; }
.bp-info-grid__label { font-size: 11px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 540px) { .bp-info-grid { grid-template-columns: 1fr; } }

/* Канальная карточка — переключатели в строке с описанием */
.bp-channel-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; background: var(--bg-subtle); border-radius: var(--radius-md);
  cursor: pointer;
}
.bp-channel-row:hover { background: var(--bg-hover); }
.bp-channel-row > div:first-child { min-width: 0; line-height: 1.45; }

/* Матрица уведомлений — выровненные центры колонок и понятные интервалы */
.bp-notify-matrix th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-subtle); padding: 10px 12px; }
.bp-notify-matrix td { padding: 12px; vertical-align: middle; }
.bp-notify-matrix tbody tr:nth-child(even) { background: color-mix(in oklab, var(--bg-subtle) 40%, transparent); }
.bp-notify-matrix .bp-switch { margin: 0 auto; display: block; }

/* Сессии — иконка устройства слева как в prototype */
.bp-session-row { gap: 14px; line-height: 1.45; }
.bp-session-row__icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--bg-subtle); color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ═══════════ MAIN TABS · GLOBAL SPACING ═════════════════════════════════
   Базовые правила, чтобы блоки не слипались между собой и текст внутри
   карточек не скакал по высоте строки. Применяется ко всем главным
   вкладкам (Обзор, События, Клиенты, Меню, Склад, Задачи и пр.).

   Цели:
   • межстрочный интервал минимум 1.4 для всего читаемого текста;
   • вертикальный ритм между блоками (карточками, таблицами) ≥ 12 px;
   • в формах — gap ≥ 14 px и ровные строки полей (1fr 1fr).
   ════════════════════════════════════════════════════════════════════════ */

/* Заголовки и текст внутри карточек — единая высота строки и нормальный
   ритм между подзаголовком и описанием. */
.bp-card__title { line-height: 1.35; }
.bp-card__sub, .bp-page__sub { line-height: 1.5; }

/* Page header — заголовок и подзаголовок не должны слипаться.
   Базовый margin-top: 6px у .bp-page__sub слишком тесный — раздвигаем до 8px.
   Line-height заголовка не трогаем (1.15 из components.css), иначе пустота
   внутри line-box визуально увеличивает межстрочный зазор. */
.bp-page__sub { margin-top: 8px; }

/* ═══════════ ORG SWITCHER MENU (sidebar) ════════════════════════════════
   Выпадающий список организаций пользователя — стиль прототипа. */
.bp-org-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  z-index: 100;
  overflow: hidden;
  animation: bp-fade-in 140ms var(--ease-out, ease-out);
}
.bp-org-menu[hidden] { display: none; }
.bp-org-menu__head {
  padding: 10px 12px 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-subtle);
}
.bp-org-menu__list { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.bp-org-menu__form { margin: 0; }
.bp-org-menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none; cursor: pointer;
  border-radius: 6px;
  text-align: left; font-family: inherit; font-size: 13px;
  color: var(--fg); text-decoration: none;
  transition: background 120ms ease;
}
.bp-org-menu__item:hover { background: var(--bg-hover); }
.bp-org-menu__item.is-current {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: 500;
}
.bp-org-menu__item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bp-org-menu__item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-org-menu__item-sub { font-size: 11px; color: var(--fg-muted); }
.bp-org-menu__check { color: var(--accent); flex-shrink: 0; }
.bp-org-menu__sep { height: 1px; background: var(--border); margin: 4px 8px; }
.bp-org-menu__empty { padding: 12px; font-size: 12px; color: var(--fg-subtle); text-align: center; }

/* Radio-card (модалка «Пригласить в команду») — выделение активной роли. */
.bp-radio-card { transition: border-color 120ms, background 120ms; }
.bp-radio-card:hover { background: var(--bg-hover); }
.bp-radio-card:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, var(--bg-elev));
}
.bp-radio-card input[type="radio"] { accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* Метрики — модификаторы дельт `.is-positive` / `.is-negative`
   (используются на /stats/ как и в прототипе ScreenFinance). */
.bp-metric__delta { font-size: 12px; font-weight: 500; color: var(--fg-subtle); }
.bp-metric__delta.is-positive { color: var(--ok); }
.bp-metric__delta.is-negative { color: var(--danger); }

/* Контент главных вкладок не должен прилипать к сайдбару.
   .page-shell — общий wrapper в base.html (вокруг всего content),
   у которого по дефолту нет горизонтальных отступов. Добавляем ровные 24px
   слева/справа и 20px сверху, как в топбаре. На узких экранах — поджимаем. */
.bp-main-scroll .page-shell { padding: 20px 24px 24px; }
@media (max-width: 780px) {
  .bp-main-scroll .page-shell { padding: 16px 14px 20px; }
}

/* Карточки в дашборде — заголовок и описание под ним такой же ритм. */
.bp-card__head .bp-card__sub,
.bp-card__head + .bp-card__sub { margin-top: 6px; }

/* Карточки в стопке — гарантированный gap между ними */
.bp-stack, .stack { gap: 12px; }

/* Сетка KPI и метрик — больше воздуха при широком экране */
.bp-grid-4 { gap: 14px; }
@media (max-width: 980px) { .bp-grid-4 { gap: 12px; } }

/* Tables — нормальные межстрочные интервалы в ячейках */
.bp-table th, .bp-table td { line-height: 1.45; }

/* Toolbar и фильтры — гарантируем gap между чипами и кнопками */
.bp-toolbar { row-gap: 10px; column-gap: 10px; align-items: center; flex-wrap: wrap; }
.bp-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Формы — единый ритм между полями (если шаблон использует bp-form) */
.bp-form { display: flex; flex-direction: column; gap: 14px; }
.bp-form__section + .bp-form__section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.bp-form__row { display: grid; gap: 12px; align-items: start; }
.bp-form__row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .bp-form__row { grid-template-columns: 1fr !important; } }

/* Field — единая ширина и ритм label/hint/error */
.bp-field { display: flex; flex-direction: column; }
.bp-field__label { line-height: 1.3; }
.bp-field__hint, .bp-field__error { line-height: 1.45; }

/* Бейджи и чипы — стабильная высота строки */
.bp-chip { line-height: 1.2; }

/* Page subtitle / description — чтобы тонкий 13px-текст читался */
.bp-page__sub, .bp-muted { line-height: 1.5; }

/* line-height для inputs/select/textarea задан выше (см. .bp-input строкой ~450);
   дубль убран. min-height textarea приведён к 80px — единому значению (components.css
   / polish-pro.css), иначе тут было «мёртвое» 72px, перекрытое по порядку загрузки. */
.bp-textarea { padding-top: 8px; padding-bottom: 8px; min-height: 80px; }

/* Карточки в дашборде/гриде — оставляем существующий padding 16px,
   но добавляем дыхание между подряд идущими блоками внутри body. */
.bp-card__body > p + p,
.bp-card__body > div + div.bp-muted { margin-top: 8px; }