/* Combobox — WowVendor DS. Все значения — токены из shared/token-index.md.
   Оси Figma component set (3771:81225): Variant (Default / Image / Image Grouped)
   × Interaction (Default / Hover / Active&Focus / Disabled) × Status (Default /
   Error, только у Variant=Default) × Filled (True / False). Тем нет (Dark Mode
   в этом сете отсутствует).

   Combobox = searchable Select: поле-«поиск» с вводимым текстом. Анатомия как у
   select (Label / поле 44px / hint), но:
   - лидирующая иконка: Variant=Default — search (20px, gray-400); Variant=Image /
     Image Grouped — круглый аватар выбранного пункта (20px), и ТОЛЬКО при
     Filled=True (в пустом поле у Image-вариантов лид-иконки нет);
   - в Active&Focus поле показывает каретку (combobox набирается с клавиатуры):
     пустое → каретка перед placeholder, заполненное → после value;
   - при Filled=True появляется clear-иконка (circle-cross 16px, gray-200) перед
     chevron; в Disabled её нет (как и «*»/tooltip);
   - выпадающий список переиспользует dropdown-item: Default — простой текст,
     Image — аватар+текст, Image Grouped — заголовки «Group title» + аватар-пункты.

   Рамка поля — inset box-shadow (приём проекта: не меняет габарит 44px, 2px-рамка
   фокуса не «раздувает» высоту, hint не смещается). Тень «Shadow XS» (0 1px 2px)
   из Figma в token-index отсутствует — подставлен --shadow-4 (как в select/tooltip;
   при alpha 0.04 разница неразличима). */

.combobox {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 320px;
  font-family: var(--font-family-base);
}

/* ── Label ─────────────────────────────────────────────── */
.combobox__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.combobox__label-text { color: var(--color-gray-900); }
.combobox__req        { color: var(--color-negative-500); }
.combobox__optional   { color: var(--color-gray-300); }

/* Триггер подсказки у лейбла — circle-help 16px (gray-200) в 20×20-обёртке
   (padding 2px). Popover в этом сете не показан → берётся сам значок. */
.combobox__tooltip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--color-gray-200);
}
.combobox__tooltip svg { display: block; width: 16px; height: 16px; }

/* ── Field ─────────────────────────────────────────────── */
.combobox__field {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
  overflow: hidden;
  cursor: pointer;
}

/* Лидирующая иконка поиска (Variant=Default) */
.combobox__lead {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.combobox__lead svg { display: block; width: 20px; height: 20px; }

/* Лидирующий аватар (Variant=Image / Image Grouped при Filled=True) */
.combobox__lead-avatar {
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 200px;
  object-fit: cover;
}

/* Ведомый контент: placeholder ИЛИ value (+ каретка в фокусе) */
.combobox__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.combobox__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.combobox__value       { color: var(--color-gray-800); white-space: nowrap; }

/* Каретка — тонкая вертикальная черта (combobox набирается). В статичной витрине
   показана только у Active&Focus: пустое поле → перед placeholder, заполненное →
   после value. В Figma это глиф «|» Inter 14px gray-800 в 1px-контейнере. */
.combobox__caret {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--color-gray-800);
}

/* Clear-иконка (circle-cross 16px, gray-200) — при Filled=True (не в Disabled) */
.combobox__clear {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-200);
}
.combobox__clear svg { display: block; width: 16px; height: 16px; }

/* Трейлинг-стрелка (arrow-down / arrow-up при раскрытии) */
.combobox__chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.combobox__chevron svg { display: block; width: 20px; height: 20px; }

/* ── Hint / message ────────────────────────────────────── */
.combobox__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.combobox__hint--error { color: var(--color-negative-500); }

/* ── Interaction (рамка) ───────────────────────────────── */
.combobox--hover .combobox__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.combobox--focus .combobox__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

/* Status=Error: default → negative-500, hover → negative-600 (темнее),
   focus → negative-500 2px. */
.combobox--status-error .combobox__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.combobox--status-error.combobox--hover .combobox__field { box-shadow: inset 0 0 0 1px var(--color-negative-600), var(--shadow-4); }
.combobox--status-error.combobox--focus .combobox__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

/* ── Disabled ──────────────────────────────────────────── */
.combobox--disabled .combobox__field {
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
  background: var(--color-gray-25);
  cursor: not-allowed;
}
.combobox--disabled .combobox__label-text,
.combobox--disabled .combobox__optional,
.combobox--disabled .combobox__tooltip,
.combobox--disabled .combobox__lead,
.combobox--disabled .combobox__placeholder,
.combobox--disabled .combobox__value,
.combobox--disabled .combobox__chevron,
.combobox--disabled .combobox__hint {
  color: var(--color-gray-100);
}
.combobox--disabled .combobox__lead-avatar { opacity: 0.4; }

/* ── Выпадающий список (Active & Focus) ────────────────────
   Dropdown List: абсолютно, по внешней 2px-рамке поля (left/right -2px), под
   полем (top 46px = 44 + 2px рамки). Нужен overflow-visible у поля. */
.combobox--focus .combobox__field { overflow: visible; }

.combobox__menu {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 46px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-50);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-4);
  /* Восемь пунктов — и дальше прокрутка. Иначе длинный список (в трекере сезона
     их 362) растягивается на всю страницу и перекрывает содержимое под собой.
     Высота считается из тех же величин, из которых сложен сам пункт: строка
     Body/16 плюс вертикальные поля .di--m, восемь раз, плюс поля меню. */
  max-height: calc(
    8 * (var(--text-body-16-line-height) + var(--spacing-8) * 2) + var(--spacing-4) * 2
  );
  overflow-y: auto;
  overscroll-behavior: contain;   /* дно списка не прокручивает страницу дальше */
  cursor: default;
}
/* Пункт — переиспользованный dropdown-item (.di .di--m) на всю ширину списка. */
.combobox__menu .di { width: 100%; }

/* Заголовок группы (Variant=Image Grouped) — просто текст gray-600, без фона/hover. */
.combobox__group {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-4);
  color: var(--color-gray-600);
}

/* Декоративный скролл-бар справа (в статике; указывает, что пунктов больше). */
.combobox__scrollbar {
  position: absolute;
  top: var(--spacing-8);
  right: 3px;
  bottom: var(--spacing-8);
  width: 4px;
}
.combobox__scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 75%;
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
}

/* ── Живой интерактив (.combobox--live) — вне пиксельной сверки ──
   Реальный <input> с фильтрацией (автокомплит): ввод сужает список, выбор
   подставляет значение и закрывает, clear очищает. */
.combobox--live .combobox__input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--color-gray-800);
  font-family: inherit;
}
.combobox--live .combobox__input::placeholder { color: var(--color-gray-300); opacity: 1; }

.combobox--live .combobox__menu { display: none; }
.combobox--live.combobox--open .combobox__menu { display: flex; }
.combobox--live.combobox--open .combobox__field { overflow: visible; }
.combobox--live .combobox__field:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4);
}
/* Live-ошибка (ввод без совпадений): красная рамка держится и в фокусе
   (перебивает accent-рамку фокуса за счёт большей специфичности). */
.combobox--live.combobox--status-error .combobox__field,
.combobox--live.combobox--status-error .combobox__field:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4);
}
/* clear спрятан, пока поле пустое (тогглится в JS классом .combobox--filled) */
.combobox--live .combobox__clear { cursor: pointer; }
.combobox--live:not(.combobox--filled) .combobox__clear { display: none; }
/* аватар-лид у Image-демо показывается только когда что-то выбрано */
.combobox--live .combobox__lead-avatar { display: none; }
.combobox--live.combobox--filled .combobox__lead-avatar { display: block; }

/* Пункт скрыт фильтром / пустой заголовок группы */
.combobox--live .di[hidden],
.combobox--live .combobox__group[hidden] { display: none; }

/* Подсветка активного пункта при навигации стрелками */
.combobox--live .di--active { background: var(--color-gray-25); }
.combobox--live .di--live .di__check { display: none; }
.combobox--live .di--live.di--selected .di__check { display: block; }