/* Комбобокс выбора товара (см. static/crm/product_combo.js).
   Поле выглядит как соседние инпуты строки корзины; всё своеобразие —
   в выпадающем списке. */

/* Обёртка забирает классы исходного поля ради места в раскладке, но не должна
   унаследовать его рамку и высоту — иначе вокруг инпута вторая рамка.
   !important здесь по делу: перебиваем произвольные классы вызывающей формы. */
.combo {
  position: relative; display: block; box-sizing: border-box;
  border: 0 !important; padding: 0 !important; background: none !important;
  height: auto !important; box-shadow: none !important;
}
.goods-row--edit > .combo, .goods-add > .combo { flex: 1; min-width: 0; }

/* Нативный select остаётся в форме и уходит на сервер, но с глаз убран.
   Не display:none — часть браузеров тогда не отдаёт значение при submit.
   Селектор с потомком, чтобы перебить width/height классов поля. */
.combo > .combo__native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.combo > .combo__input { width: 100%; }
.combo > .combo__input::placeholder { color: var(--crm-text-muted, #616b78); }

.combo__list {
  position: absolute; z-index: 50; top: calc(100% + 2px); left: 0;
  min-width: 100%; max-width: 460px; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: var(--crm-surface, #e9f1f9);
  border: 1px solid var(--crm-border, #bed2e4);
  border-radius: var(--crm-radius, 8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.combo__row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 9px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--crm-text, #333b44);
}
.combo__row--active { background: var(--crm-primary-light, #d3e9f8); }
.combo__row:hover { background: var(--crm-primary-light, #d3e9f8); }

.combo__name { flex: 1; }
.combo__name mark {
  background: transparent; color: var(--crm-primary, #2067b0); font-weight: 700;
}
.combo__hint {
  flex: none; font-size: 12px; color: var(--crm-text-muted, #616b78); white-space: nowrap;
}

.combo__none {
  padding: 7px 9px; font-size: 12.5px; color: var(--crm-text-muted, #616b78);
}