/*
   PVlab — переопределения select2 + select2-bootstrap-5-theme.

   Цель: select2-контролы выглядят как часть PVlab-дизайна (glass, тёмная/светлая
   тема, скругления, акценты), а не как bootstrap. Все цвета через CSS-переменные
   из pvlab-glass.css — автоматически работают в обеих темах.

   Что покрыто:
     1. Single-select selection (.select2-selection--single) — фон, рамка, радиус, цвет
     2. Стрелка раскрытия (.select2-selection__arrow) — наш цвет, без bootstrap-фоновой картинки
     3. Кнопка clear (×) — цвет, hover
     4. Dropdown (.select2-dropdown) — наш фон, рамка, тень, радиус
     5. Опции списка (.select2-results__option) — padding, hover, highlighted, selected
     6. Search-input внутри dropdown'а — стиль input'а под нашу тему

   Multi-select (теги) — пока не используется на главных вьюхах, добавим по мере появления.
*/

/* ── Контейнер ─────────────────────────────────────────────────────────── */

.select2-container--bootstrap-5 {
  font-family: inherit;
}

/* ── Single-select selection ──────────────────────────────────────────── */

.select2-container--bootstrap-5 .select2-selection--single {
  height: 38px !important;
  padding: 0 !important;
  background-color: var(--pvlab-input-bg) !important;
  background-image: none !important;
  border: 1px solid var(--pvlab-input-border) !important;
  border-radius: 12px !important;
  color: var(--pvlab-text) !important;
  box-shadow: none !important;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: rgba(61, 182, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(61, 182, 255, 0.18) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  padding: 0 60px 0 14px !important;     /* 30 стрелка + 20 crossбутон + buffer */
  height: 100%;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pvlab-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: var(--pvlab-text-muted) !important;
  opacity: 1;
}

/* ── Стрелка — рисуем сами, чтобы переключалась через [data-theme] ───── */

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 30px !important;
  height: 100% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231a1a23' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E5E7ED' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ── Clear button (×) ─────────────────────────────────────────────────── */

/* «×» очистки выбора — должен быть ЗАМЕТНЫМ (раньше брался --pvlab-text-muted,
   на dark glass почти невидим). Прячем нативный текст через text-indent,
   рисуем свой SVG-крестик через background-image. Чёрный для light, белый
   для dark — два отдельных правила (currentColor через mask-image иногда
   не подхватывался каскадом в Bootstrap-5 теме). */
.select2-container--bootstrap-5 .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection__clear > * {
  /* «съедаем» все способы вывода нативного '×' — text node и inner span. */
  text-indent: -9999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: transparent !important;
  font-size: 0 !important;
}

.select2-container--bootstrap-5 .select2-selection__clear {
  position: absolute !important;
  top: 50% !important;
  right: 36px !important;                 /* левее стрелки (30px) + 6px gap */
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a23' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
  border: none !important;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 160ms ease, background-color 160ms ease;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__clear {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
  opacity: 0.85;
}

.select2-container--bootstrap-5 .select2-selection__clear:hover {
  opacity: 1 !important;
  background-color: rgba(197, 37, 58, 0.18) !important;
}

/* ── Dropdown ─────────────────────────────────────────────────────────── */

.select2-container--bootstrap-5 .select2-dropdown {
  margin-top: 4px;
  background-color: var(--pvlab-surface-bg) !important;
  border: 1px solid var(--pvlab-glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--pvlab-glass-shadow) !important;
  overflow: hidden;
  z-index: var(--pvlab-z-dropdown, 1000);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: #1F2533 !important;       /* чуть светлее карточки, чтобы попап читался */
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Results: список опций ────────────────────────────────────────────── */

.select2-container--bootstrap-5 .select2-results__options {
  padding: 4px;
  max-height: 280px;
}

.select2-container--bootstrap-5 .select2-results__option {
  padding: 8px 12px !important;
  font-size: 14px;
  color: var(--pvlab-text) !important;
  background: transparent !important;
  border-radius: 8px;
  transition: background-color 120ms ease, color 120ms ease;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
  background: var(--pvlab-divider) !important;
  color: var(--pvlab-text) !important;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
  background: var(--pvlab-row-selected) !important;
  color: var(--pvlab-accent-text) !important;
  font-weight: 600;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
  background: var(--pvlab-row-selected) !important;
}

.select2-container--bootstrap-5 .select2-results__option--disabled {
  color: var(--pvlab-text-placeholder) !important;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── Search-field внутри dropdown'а (search-as-you-type) ──────────────── */

.select2-container--bootstrap-5 .select2-search--dropdown {
  padding: 8px;
  background: transparent;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--pvlab-text) !important;
  background: var(--pvlab-input-bg) !important;
  border: 1px solid var(--pvlab-input-border) !important;
  border-radius: 8px !important;
  outline: none !important;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
  background: var(--pvlab-input-bg-focus) !important;
  border-color: rgba(61, 182, 255, 0.55) !important;
}

/* ── «Нет результатов» / «загрузка» ────────────────────────────────── */

.select2-container--bootstrap-5 .select2-results__option--loading,
.select2-container--bootstrap-5 .select2-results__message {
  padding: 12px 16px !important;
  font-size: 13px;
  color: var(--pvlab-text-muted) !important;
  text-align: center;
}

/* ── Invalid (валидация) — красная рамка ──────────────────────────────── */

.select2-container--bootstrap-5.is-invalid .select2-selection,
.was-validated .select2-hidden-accessible:invalid + .select2-container--bootstrap-5 .select2-selection {
  border-color: var(--pvlab-danger) !important;
  box-shadow: 0 0 0 3px rgba(197, 37, 58, 0.18) !important;
}

/* ── Тач-устройства: 44×44 минимум ─────────────────────────────────── */

@media (pointer: coarse) {
  .select2-container--bootstrap-5 .select2-selection--single { height: 44px !important; }
  .select2-container--bootstrap-5 .select2-results__option { min-height: 44px; display: flex; align-items: center; }
}

/* ── Multi-select (chip-список) ──────────────────────────────────────────
   Используется в _CreateForm / _EditForm Users для назначения должностей.
   Каждая выбранная позиция — chip с крестиком-remove. Inline-search-поле
   справа от последнего chip'а.

   ВАЖНО: select2-bootstrap-5-theme добавляет .form-select / .form-control
   КЛАССЫ напрямую на .select2-selection. Bootstrap'овские правила
   .form-select { background-color, border, ... } перебивали наши.
   Двойной селектор `.select2-selection.select2-selection--multiple` (+1
   class к специфичности) гарантированно побеждает. */

.select2-container--bootstrap-5 .select2-selection.select2-selection--multiple {
  min-height: 40px !important;
  padding: 4px 6px !important;
  background-color: var(--pvlab-input-bg) !important;
  background-image: none !important;
  border: 1px solid var(--pvlab-input-border) !important;
  border-radius: 12px !important;
  color: var(--pvlab-text) !important;
  box-shadow: none !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

/* Chip выбранной позиции. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 3px 8px 3px 10px !important;
  background: rgba(61, 167, 243, 0.18) !important;
  border: 1px solid rgba(61, 167, 243, 0.32) !important;
  border-radius: 8px !important;
  color: var(--pvlab-text) !important;
  font-size: 13px;
  line-height: 1.4;
  cursor: default;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background: rgba(110, 192, 247, 0.2) !important;
  border-color: rgba(110, 192, 247, 0.32) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__display {
  padding: 0 !important;
  color: inherit !important;
}

/* Крестик remove на chip'е — рисуем SVG-крестик через background-image
   (нативный '×' прячем через text-indent). Раньше использовали текст-символ
   с цветом-rgba — на dark glass еле виден. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove > * {
  text-indent: -9999px !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a23' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 10px !important;
  border: none !important;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 140ms ease, background-color 140ms ease;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
  opacity: 1 !important;
  background-color: rgba(197, 37, 58, 0.22) !important;
}

/* Inline-search input — без своего фона, прилипает к концу списка. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
  flex: 1 1 auto;
  min-width: 80px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--pvlab-text) !important;
  font-size: 14px;
  font-family: inherit;
  margin: 0 !important;
  padding: 4px !important;
  min-height: 28px;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap-5.select2-container--open  .select2-selection--multiple {
  border-color: rgba(61, 167, 243, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(61, 167, 243, 0.18) !important;
}

/* ── select2 для фильтров над таблицей (.pvlab-select2-filter) ────────────
   Чуть компактнее обычного, без border'а — выглядит как часть toolbar.
   Применяется через data-select2-class="pvlab-select2-filter". */
.select2-container--bootstrap-5.pvlab-select2-filter .select2-selection--single {
  height: 36px !important;
  border-radius: 10px !important;
  background-color: var(--pvlab-input-bg) !important;
  border-color: var(--pvlab-input-border) !important;
}

.select2-container--bootstrap-5.pvlab-select2-filter .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding: 0 28px 0 12px !important;
  font-size: 14px;
}

.select2-container--bootstrap-5.pvlab-select2-filter .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}

/* ── Компактный select2 (pageSize в toolbar таблицы) ──────────────────────
   Применяется через `data-select2-class="pvlab-select2-compact"` на <select>.
   Меньше высота, более скруглён, без поиска и крестика-clear.
   Ширина сжата в ~1.5 раза относительно дефолтного 100% — для 2-3-значных
   чисел этого достаточно (10/25/50/100). */
.select2-container--bootstrap-5.pvlab-select2-compact {
  width: 64px !important;            /* было ~96px по дефолту width:100% */
}

.select2-container--bootstrap-5.pvlab-select2-compact .select2-selection--single {
  height: 32px !important;
  min-width: 0;
  border: none !important;
  border-radius: 14px !important;
  background-color: var(--pvlab-input-bg) !important;
}

.select2-container--bootstrap-5.pvlab-select2-compact .select2-selection--single .select2-selection__rendered {
  padding: 0 18px 0 10px !important;
  font-size: 14px;
  line-height: 32px;
}

.select2-container--bootstrap-5.pvlab-select2-compact .select2-selection--single .select2-selection__arrow {
  width: 18px !important;
}

.select2-container--bootstrap-5.pvlab-select2-compact.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.pvlab-select2-compact.select2-container--open .select2-selection {
  box-shadow: 0 0 0 2px rgba(61, 167, 243, 0.25) !important;
}

/* Тач-устройства: ставим минимум 44px чтобы перекрыть общий ::coarse override
   (тот ставит 44px, наш — должен совпадать, иначе общий выиграет). */
@media (pointer: coarse) {
  .select2-container--bootstrap-5.pvlab-select2-compact .select2-selection--single {
    height: 44px !important;
  }
  .select2-container--bootstrap-5.pvlab-select2-compact .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
  }
}