/* ==========================================================================
   Bootstrap 5.3 → Industrial Swiss bridge
   --------------------------------------------------------------------------
   Bootstrap-компоненты несут СКОМПИЛИРОВАННЫЕ значения в своих переменных
   (.btn-primary { --bs-btn-bg: #0d6efd }), поэтому :root --bs-primary их
   не красит. Этот файл переопределяет переменные покомпонентно.
   Роли — из static/marketing/tokens.css (docs/DESIGN_SYSTEM.md).
   Подключается после Bootstrap и tokens.css, до base.css.
   ========================================================================== */

/* ---------- Глобальные переменные ---------- */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-font-monospace:   var(--font-mono);

  --bs-body-bg:          var(--bg-sunken);
  --bs-body-color:       var(--text);
  /* Роль, а не ступень: --n-950 прибит к почти-чёрному в обеих темах (это
     чернила на охре), поэтому как «самый контрастный текст» он не годится. */
  --bs-emphasis-color:   var(--text);
  --bs-secondary-color:  var(--text-muted);
  --bs-tertiary-color:   var(--text-faint);
  --bs-secondary-bg:     var(--n-50);
  --bs-tertiary-bg:      var(--n-25);
  --bs-heading-color:    var(--text);

  --bs-border-color:     var(--border);
  --bs-border-radius:    var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-lg);
  --bs-border-radius-xxl: var(--r-lg);

  --bs-primary:      var(--p-500);
  --bs-primary-rgb:  31, 80, 117;
  --bs-success:      var(--ok);
  --bs-success-rgb:  31, 122, 76;
  --bs-warning:      var(--warn);
  --bs-warning-rgb:  224, 164, 0;
  --bs-danger:       var(--stop);
  --bs-danger-rgb:   168, 36, 24;
  --bs-info:         var(--info);
  --bs-info-rgb:     31, 80, 117;

  /* Ссылка — бренд БУКВАМИ, не заливкой (см. --brand-ink в tokens.css) */
  --bs-link-color:           var(--brand-ink);
  --bs-link-color-rgb:       31, 80, 117;
  --bs-link-hover-color:     var(--p-600);
  --bs-link-hover-color-rgb: 23, 64, 95;

  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
}

/* Subtle-палитра утилит (bg-*-subtle / text-*-emphasis: alert-подобные блоки) */
:root {
  --bs-primary-bg-subtle: var(--p-50);
  --bs-primary-border-subtle: var(--p-200);
  --bs-primary-text-emphasis: var(--brand-ink);
  --bs-success-bg-subtle: var(--ok-bg);
  --bs-success-text-emphasis: var(--ok-ink);
  --bs-warning-bg-subtle: var(--warn-bg);
  --bs-warning-text-emphasis: var(--warn-ink);
  --bs-danger-bg-subtle: var(--stop-bg);
  --bs-danger-text-emphasis: var(--stop-ink);
  --bs-info-bg-subtle: var(--info-bg);
  --bs-info-text-emphasis: var(--info-ink);
  --bs-secondary-bg-subtle: var(--n-50);
  --bs-light-bg-subtle: var(--n-25);
}

/* ---------- Кнопки ---------- */
.btn {
  --bs-btn-border-radius: var(--r-md);
  --bs-btn-focus-box-shadow: var(--sh-focus);
  transition: color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
/* Нажатие утапливается, не пружинит (§8.5) */
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--p-500);
  --bs-btn-border-color: var(--p-500);
  --bs-btn-hover-bg: var(--p-600);
  --bs-btn-hover-border-color: var(--p-600);
  --bs-btn-active-bg: var(--p-700);
  --bs-btn-active-border-color: var(--p-700);
  --bs-btn-disabled-bg: var(--p-300);
  --bs-btn-disabled-border-color: var(--p-300);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-ink);
  --bs-btn-border-color: var(--p-300);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--p-500);
  --bs-btn-hover-border-color: var(--p-500);
  --bs-btn-active-bg: var(--p-600);
  --bs-btn-active-border-color: var(--p-600);
  --bs-btn-disabled-color: var(--p-300);
  --bs-btn-disabled-border-color: var(--p-200);
}
.btn-secondary {
  --bs-btn-bg: var(--n-600);
  --bs-btn-border-color: var(--n-600);
  --bs-btn-hover-bg: var(--n-700);
  --bs-btn-hover-border-color: var(--n-700);
  --bs-btn-active-bg: var(--n-800);
  --bs-btn-active-border-color: var(--n-800);
}
.btn-outline-secondary {
  --bs-btn-color: var(--n-600);
  --bs-btn-border-color: var(--n-300);
  --bs-btn-hover-color: var(--n-800);
  --bs-btn-hover-bg: var(--n-50);
  --bs-btn-hover-border-color: var(--n-400);
  --bs-btn-active-color: var(--n-900);
  --bs-btn-active-bg: var(--n-100);
  --bs-btn-active-border-color: var(--n-400);
}
.btn-success {
  --bs-btn-bg: var(--ok);
  --bs-btn-border-color: var(--ok);
  --bs-btn-hover-bg: var(--ok-ink);
  --bs-btn-hover-border-color: var(--ok-ink);
  --bs-btn-active-bg: var(--ok-ink);
  --bs-btn-active-border-color: var(--ok-ink);
}
.btn-danger {
  --bs-btn-bg: var(--stop);
  --bs-btn-border-color: var(--stop);
  --bs-btn-hover-bg: var(--stop-ink);
  --bs-btn-hover-border-color: var(--stop-ink);
  --bs-btn-active-bg: var(--stop-ink);
  --bs-btn-active-border-color: var(--stop-ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--stop);
  --bs-btn-border-color: var(--stop);
  --bs-btn-hover-bg: var(--stop);
  --bs-btn-hover-border-color: var(--stop);
  --bs-btn-active-bg: var(--stop-ink);
  --bs-btn-active-border-color: var(--stop-ink);
}
/* Текст сигнальной кнопки на светлом — только -ink (§8.8): сам --warn на белом ~2.2:1 */
.btn-outline-success {
  --bs-btn-color: var(--ok-ink);
  --bs-btn-border-color: var(--ok);
  --bs-btn-hover-bg: var(--ok);
  --bs-btn-hover-border-color: var(--ok);
  --bs-btn-active-bg: var(--ok-ink);
  --bs-btn-active-border-color: var(--ok-ink);
}
.btn-outline-warning {
  --bs-btn-color: var(--warn-ink);
  --bs-btn-border-color: var(--warn);
  --bs-btn-hover-color: var(--ink-on-accent);
  --bs-btn-hover-bg: var(--warn);
  --bs-btn-hover-border-color: var(--warn);
  --bs-btn-active-color: var(--ink-on-accent);
  --bs-btn-active-bg: var(--warn);
  --bs-btn-active-border-color: var(--warn-ink);
}
.btn-outline-info {
  --bs-btn-color: var(--info-ink);
  --bs-btn-border-color: var(--p-300);
  --bs-btn-hover-bg: var(--info);
  --bs-btn-hover-border-color: var(--info);
  --bs-btn-active-bg: var(--info-ink);
  --bs-btn-active-border-color: var(--info-ink);
}
.btn-warning {
  --bs-btn-color: var(--ink-on-accent);
  --bs-btn-bg: var(--warn);
  --bs-btn-border-color: var(--warn);
  --bs-btn-hover-color: var(--ink-on-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--warn) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--warn) 88%, black);
}
.btn-link { --bs-btn-color: var(--brand-ink); --bs-btn-hover-color: var(--p-600); }

/* ---------- Бейджи: пилюля запрещена (§8.14) ---------- */
.badge {
  --bs-badge-border-radius: var(--r-sm);
  font-weight: 600;
}
/* Мостовой запрет: класс уходит из разметки в Phase 4, тогда снять правило */
.badge.rounded-pill { border-radius: var(--r-sm) !important; }

/* ---------- Алерты: подложка + -ink текст + сигнальная полоса (§8.3, §8.8) -- */
.alert { --bs-alert-border-radius: var(--r-sm); }
.alert-success,
.alert-warning,
.alert-danger,
.alert-info {
  --bs-alert-border-color: transparent;
  border-left: 4px solid;
  --bs-alert-link-color: inherit;
}
.alert-success { --bs-alert-bg: var(--ok-bg);   --bs-alert-color: var(--ok-ink);   border-left-color: var(--ok); }
.alert-warning { --bs-alert-bg: var(--warn-bg); --bs-alert-color: var(--warn-ink); border-left-color: var(--warn); }
.alert-danger  { --bs-alert-bg: var(--stop-bg); --bs-alert-color: var(--stop-ink); border-left-color: var(--stop); }
.alert-info    { --bs-alert-bg: var(--info-bg); --bs-alert-color: var(--info-ink); border-left-color: var(--info); }

/* Жёлтая плашка требует тёмных чернил в ОБЕИХ темах: белый на --warn даёт
   2.1:1. Bootstrap этого не знает — .bg-warning ink не трогает (баг был и в
   светлой, не только в тёмной). §8.8 */
.bg-warning { color: var(--ink-on-accent); }

/* ---------- Текстовые утилиты сигналов: текст — только -ink (§8.3) ---------- */
.text-success { color: var(--ok-ink) !important; }
.text-warning { color: var(--warn-ink) !important; }
.text-danger  { color: var(--stop-ink) !important; }
.text-info    { color: var(--info-ink) !important; }

/* ---------- Таблицы: без зебры, волосяная линия (§8.10) ---------- */
.table {
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--surface-alt);
  --bs-table-hover-color: var(--text);
}
.table > :not(caption) > * > * { border-bottom-color: var(--border-faint); }
.table > thead > tr > th { border-bottom-color: var(--border-strong); }

/* ---------- Формы: двойное кольцо фокуса (§5) ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--p-400);
  box-shadow: var(--sh-focus);
}
.form-check-input:checked {
  background-color: var(--p-500);
  border-color: var(--p-500);
}

/* ---------- Карточки: линия и фон, не тень (§8.4) ---------- */
.card {
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--r-md);
  --bs-card-inner-border-radius: calc(var(--r-md) - 1px);
  --bs-card-cap-bg: var(--surface-alt);
  --bs-card-bg: var(--surface);
}
/* Утилиты теней на карточках — гасим до волосяной линии
   (bootstrap .shadow* сами с !important) */
.card.shadow, .card.shadow-sm { box-shadow: var(--sh-hair) !important; }

/* ---------- Над полосой: modal, dropdown, offcanvas, popover ---------- */
.modal-content {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--sh-pop);
}
.dropdown-menu {
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-hover-bg: var(--bg-sunken);
  --bs-dropdown-link-active-bg: var(--p-500);
  box-shadow: var(--sh-pop);
}
.popover { --bs-popover-border-radius: var(--r-md); --bs-popover-border-color: var(--border); box-shadow: var(--sh-pop); }
.toast { --bs-toast-border-radius: var(--r-md); --bs-toast-border-color: var(--border); box-shadow: var(--sh-pop); }
.toast-container { z-index: var(--bs-toast-zindex, 1090); }
/* Тосты сообщений: та же схема, что у алертов — подложка + -ink текст + засечка (§8.3, §8.8).
   Засечка сверху, а не слева (§1.1): тост центрирован, левого поля у него нет. */
.toast-success,
.toast-warning,
.toast-danger,
.toast-info { --bs-toast-border-color: transparent; border-top: 4px solid; }
.toast-success { --bs-toast-bg: var(--ok-bg);   --bs-toast-color: var(--ok-ink);   border-top-color: var(--ok); }
.toast-warning { --bs-toast-bg: var(--warn-bg); --bs-toast-color: var(--warn-ink); border-top-color: var(--warn); }
.toast-danger  { --bs-toast-bg: var(--stop-bg); --bs-toast-color: var(--stop-ink); border-top-color: var(--stop); }
.toast-info    { --bs-toast-bg: var(--info-bg); --bs-toast-color: var(--info-ink); border-top-color: var(--info); }
.toast-container .toast {
  --bs-toast-max-width: min(560px, calc(100vw - var(--s-5)));
  --bs-toast-font-size: var(--t-lead);
  min-width: min(400px, calc(100vw - var(--s-5)));
  font-weight: 600;
}
.toast-container .toast-body { padding: var(--s-5); }
.toast.fade { transition: opacity var(--d-base) var(--e-out); }

/* ---------- Навигация ---------- */
.nav-tabs {
  --bs-nav-tabs-border-radius: var(--r-sm);
  --bs-nav-tabs-link-active-color: var(--brand-ink);
  --bs-nav-link-color: var(--text-muted);
  --bs-nav-link-hover-color: var(--text);
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--r-sm);
  --bs-nav-pills-link-active-bg: var(--p-500);
  --bs-nav-link-color: var(--text-muted);
}
.pagination {
  --bs-pagination-color: var(--brand-ink);
  --bs-pagination-hover-color: var(--p-600);
  --bs-pagination-focus-color: var(--p-600);
  --bs-pagination-focus-box-shadow: var(--sh-focus);
  --bs-pagination-active-bg: var(--p-500);
  --bs-pagination-active-border-color: var(--p-500);
  --bs-pagination-border-color: var(--border);
}

/* ---------- Прогресс ---------- */
.progress {
  --bs-progress-bar-bg: var(--p-500);
  --bs-progress-border-radius: var(--r-xs);
}

/* ---------- Списки ---------- */
.list-group {
  --bs-list-group-border-color: var(--border-faint);
  --bs-list-group-border-radius: var(--r-md);
  --bs-list-group-active-bg: var(--p-500);
  --bs-list-group-active-border-color: var(--p-500);
  --bs-list-group-action-hover-bg: var(--surface-alt);
}

/* ==========================================================================
   Тёмная тема — только то, что не вытекло из ролей
   ========================================================================== */
[data-theme="dark"] {
  /* Тройки для rgba()-утилит (.bg-*, .text-bg-*, .border-opacity-*):
     скомпилированы числами, ролью их не подменить — поэтому дублируют
     тёмные ступени и обязаны совпадать с ними побайтово. Расходились:
     здесь стоял предыдущий подход (#2F6E9B, #D8402F — тот самый «индикатор
     пожарной панели», снятый в токенах), и .bg-danger/.bg-success красились
     мимо палитры. */
  --bs-primary-rgb:  42, 115, 196;   /* --p-500   #2A73C4 */
  --bs-success-rgb:  62, 169, 124;   /* --ok      #3EA97C */
  --bs-warning-rgb:  216, 169, 69;   /* --warn    #D8A945 */
  --bs-danger-rgb:   199, 69, 53;    /* --stop    #C74535 */
  --bs-info-rgb:     42, 115, 196;
  --bs-link-color-rgb:       134, 185, 240;  /* --brand-ink #86B9F0 */
  --bs-link-hover-color-rgb: 55, 133, 218;   /* --p-600     #3785DA */
}

/* Утилиты .bg-light / .text-dark / .table-light — «светлый» и «тёмный» здесь
   не роли, а зашитые в Bootstrap значения (#f8f9fa / #212529). В шаблонах их
   195 + 38 + 16 штук: переписывать разметку дороже, чем перекрасить источник.
   --bs-white-rgb НЕ трогаем: .text-white живёт на цветных заливках и обязан
   остаться белым в обеих темах. */
[data-theme="dark"] {
  /* #222724 здесь было СВЕТЛОЙ ступенью --n-800 (графит с зеленцой): 195
     блоков .bg-light уходили в оливу поверх холодных карточек. */
  --bs-light-rgb: 49, 58, 71;   /* = тёмный --surface-alt #313A47 */
  /* Тройки хватает утилитам, но не шаблонам, которые пишут var(--bs-light)
     напрямую (.permission-group-header в hr/position/position_detail.html):
     там оставался #f8f9fa — белая плашка со светлым текстом.
     --bs-dark НЕ трогаем: он ещё стоит в утилитах .bg-dark/.text-bg-dark. */
  --bs-light: #313A47;
}
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-theme="dark"] .text-dark { color: var(--text) !important; }
/* .text-bg-light запекает color:#000 !important, а --bs-light-rgb выше стал
   тёмной ступенью: чёрные чернила на #242A34 — 1.3:1, число исчезает
   (счётчик активного склада в /inventory/materials/). */
[data-theme="dark"] .text-bg-light { color: var(--text) !important; }
/* …но на СИГНАЛЬНОЙ заливке .text-dark значит «тёмные чернила на цветной
   плашке», а не «сильный текст»: заливка тему не меняет — и чернила тоже. */
[data-theme="dark"] .bg-warning.text-dark,
[data-theme="dark"] .bg-success.text-dark,
[data-theme="dark"] .bg-danger.text-dark,
[data-theme="dark"] .bg-info.text-dark,
[data-theme="dark"] .bg-primary.text-dark { color: var(--ink-on-accent) !important; }
[data-theme="dark"] .table-light {
  --bs-table-color: var(--text);
  --bs-table-bg: var(--surface-alt);
  --bs-table-border-color: var(--border);
}

/* Зелёный поднят по светлоте (иначе тонет на графите) → белый на нём даёт
   3.4:1. Кнопка получает тёмные чернила, как .btn-warning в обеих темах. */
[data-theme="dark"] .btn-success {
  --bs-btn-color: var(--ink-on-accent);
  --bs-btn-hover-color: var(--ink-on-accent);
  --bs-btn-active-color: var(--ink-on-accent);
}
/* То же и по той же причине для плашек: белый на светлом зелёном — 2.9:1. */
[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .text-bg-success { color: var(--ink-on-accent) !important; }

/* Bootstrap рисует стрелку селекта и крестик закрытия тёмными SVG в data-uri.
   Переменной их не перекрасить — за это отвечает штатный data-bs-theme,
   его ставит static/js/theme.js вместе с data-theme. */

/* ==========================================================================
   TomSelect — тёмная тема
   --------------------------------------------------------------------------
   Сборка tom-select.bootstrap5 запекает color:#343a40 в .ts-control,
   .ts-control input и .ts-dropdown: на тёмных плоскостях это графит по
   графиту (~1.6:1). Наведение читалось только потому, что .active берёт
   --bs-body-color. Фон/границы там уже на --bs-* и темнеют сами — красим
   только запечённые числа. Раньше это лечили инлайном в семи формах
   (--bs-dark + #e9ecef, мимо палитры и мимо дропдауна) — блоки сняты.
   ========================================================================== */
[data-theme="dark"] .ts-control,
[data-theme="dark"] .ts-control input,
[data-theme="dark"] .ts-dropdown {
  color: var(--text);
}

[data-theme="dark"] .ts-control input::placeholder { color: var(--text-faint); }

/* Чипсы мультиселекта: #efefef/#343a40 — светлая плашка посреди тёмного поля. */
[data-theme="dark"] .ts-wrapper.multi .ts-control > div {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left-color: var(--border);
}
[data-theme="dark"] .ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .ts-dropdown .optgroup-header { color: var(--text-muted); }
[data-theme="dark"] .ts-dropdown .active { background-color: var(--surface-alt); }
[data-theme="dark"] .ts-dropdown .create { color: var(--text-muted); }

/* Каретка — svg в data-uri со stroke #343a40: на тёмном поле её не видно. */
[data-theme="dark"] .ts-wrapper:not(.form-control, .form-select).single .ts-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23E8EBF0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Liquid glass — только для тёмной темы и только для «висящих» слоёв
   --------------------------------------------------------------------------
   Правило и его обоснование — в static/marketing/tokens.css, блок «Стекло».
   Здесь только применение. Два предохранителя обязательны:

   · @supports — без backdrop-filter подложка с альфой даёт ПРОЗРАЧНУЮ панель
     поверх текста. Поэтому стекло включается только там, где оно есть, а
     базой остаётся непрозрачный --surface.
   · prefers-reduced-transparency — системная настройка для тех, кому
     полупрозрачность мешает читать. Гасим до непрозрачного.

   Предохранитель по прозрачности стоит НА СНЯТИЕ (`reduce`), а не на выдачу
   (`no-preference`): фича молодая, и там, где браузер её не знает, запрос
   `no-preference` не матчится вовсе — стекло тихо исчезло бы у всех.
   ========================================================================== */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-theme="dark"] .dropdown-menu,
  [data-theme="dark"] .popover,
  [data-theme="dark"] .toast,
  [data-theme="dark"] .offcanvas,
  [data-theme="dark"] .modal-content {
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: transparent;
    box-shadow: var(--sh-glass);
  }

  /* Модалка глубже: под ней читают форму, а не любуются фоном. */
  [data-theme="dark"] .modal-content { background-color: var(--glass-bg-deep); }

  /* Затемнение под модалкой тоже стекло, иначе слой выглядит наклеенным. */
  [data-theme="dark"] .modal-backdrop.show {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: .45;
  }

  /* Sticky-шапка мобильного топбара: единственный «висящий» элемент шасси. */
  [data-theme="dark"] .topbar {
    background-color: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  /* Плавающая кнопка поддержки — тоже над полосой. */
  [data-theme="dark"] .support-fab { box-shadow: var(--sh-glass); }

  /* Сигнальные тосты стеклом не красим: подложка --*-bg несёт смысл (§8.3),
     и разбавлять её фоном страницы — терять сигнал. */
  [data-theme="dark"] .toast-success,
  [data-theme="dark"] .toast-warning,
  [data-theme="dark"] .toast-danger,
  [data-theme="dark"] .toast-info {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Кому полупрозрачность мешает читать — возвращаем непрозрачные плоскости. */
  @media (prefers-reduced-transparency: reduce) {
    [data-theme="dark"] .dropdown-menu,
    [data-theme="dark"] .popover,
    [data-theme="dark"] .toast,
    [data-theme="dark"] .offcanvas,
    [data-theme="dark"] .modal-content,
    [data-theme="dark"] .topbar {
      background-color: var(--surface) !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      border-color: var(--border);
      box-shadow: var(--sh-pop);
    }
    [data-theme="dark"] .modal-backdrop.show {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      opacity: .6;
    }
  }
}

/* ── Инлайн-валидация: подсветка обёрток кастомных селектов ──────────────
   Настоящий control спрятан, рисует себя обёртка — класс .is-invalid на неё
   вешает js/form-validate.js, покрасить её нужно здесь. */
.ts-wrapper.is-invalid,
.is-invalid + .select2-container .select2-selection {
  /* !important: tom-select приходит с CDN после нашего CSS. */
  border-color: var(--bs-form-invalid-border-color, #dc3545) !important;
}