/**
 * system/combobox — кастомный select-with-search.
 * Стили нейтральные: триггер по высоте/радиусу совпадает с .ap_input,
 * но не привязан к admin_products — компонент переиспользуемый.
 */

.cmb {
	position: relative;
	display: block;
	min-width: 0;
}

/* ---------- Триггер (то, что видно в свернутом виде) ---------- */

.cmb_trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	min-height: 38px;
	background: #fff;
	border: 1px solid #d6d6d6;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
	font-size: 14px;
	line-height: 1.3;
}

.cmb_trigger:hover {
	border-color: #b5b5b5;
}

.cmb.is-open > .cmb_trigger,
.cmb_trigger:focus,
.cmb_trigger:focus-visible {
	outline: none;
	border-color: #6c8cff;
	box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.18);
}

.cmb_value {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cmb_value.is-placeholder {
	color: #9b9b9b;
}

.cmb_arrow {
	display: inline-flex;
	align-items: center;
	color: #888;
	transition: transform 0.15s ease;
	flex: 0 0 auto;
}

.cmb.is-open .cmb_arrow {
	transform: rotate(180deg);
}

/* ---------- Dropdown ----------
   ВАЖНО: в runtime dropdown позиционируется через position: fixed
   (координаты считаются в script.js → positionDropdown). Fixed привязан
   к вьюпорту и игнорирует overflow: hidden/auto у любых предков —
   это единственный надёжный способ показывать выпадашку из-под модалок,
   карточек и скролл-контейнеров. Значения top/left/width/bottom ставятся
   инлайном из JS и побеждают CSS за счёт specificity inline > stylesheet.

   CSS-дефолты ниже оставлены на случай, если скрипт ещё не успел
   отработать (первый кадр рендера), чтобы элемент не «летел» в 0,0. */
.cmb_dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 1000;
	background: #fff;
	border: 1px solid #d6d6d6;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	max-height: 320px;
	overflow: hidden;
	animation: cmb-fade-in 0.12s ease;
}

.cmb.is-up .cmb_dropdown {
	transform-origin: bottom center;
}

@keyframes cmb-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Поиск ---------- */

.cmb_search_wrap {
	flex: 0 0 auto;
	padding: 8px;
	border-bottom: 1px solid #efefef;
	background: #fafafa;
}

.cmb_search {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	border: 1px solid #d6d6d6;
	border-radius: 6px;
	font-size: 13px;
	outline: none;
	background: #fff;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cmb_search:focus {
	border-color: #6c8cff;
	box-shadow: 0 0 0 2px rgba(108, 140, 255, 0.18);
}

/* ---------- Список ---------- */

.cmb_list {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
}

.cmb_opt {
	padding: 7px 12px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.3;
	transition: background-color 0.06s ease;
}

.cmb_opt.is-active {
	background: #f0f4ff;
}

.cmb_opt.is-selected {
	font-weight: 600;
	color: #1a3aaa;
}

.cmb_opt mark {
	background: rgba(108, 140, 255, 0.22);
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}

/* ---------- Empty / Create ---------- */

.cmb_empty {
	padding: 14px 12px;
	text-align: center;
	color: #9b9b9b;
	font-size: 13px;
	font-style: italic;
}

.cmb_create {
	padding: 9px 12px;
	border-top: 1px solid #efefef;
	background: #fafffa;
	cursor: pointer;
	font-size: 13px;
	color: #2f7a2f;
	display: flex;
	align-items: baseline;
	gap: 6px;
	transition: background-color 0.1s ease;
}

.cmb_create:hover {
	background: #ecfae6;
}

.cmb_create_prefix {
	font-weight: 600;
}

.cmb_create_label {
	font-style: italic;
}