/*
 * Argo custom dropdown — desktop-only visual replacement for native
 * <select class="argo-input">. The JS module at assets/js/argo-select.js
 * wraps each native select with a custom trigger + menu on devices
 * where `(pointer: coarse)` is FALSE (i.e. mouse/trackpad).
 *
 * On touch devices the wrapper isn't built — the native select renders
 * with its existing `select.argo-input` styling and tapping it brings
 * up the OS picker (iOS wheel, Android system dropdown) which is the
 * better mobile UX.
 *
 * Visual reference: see the dropdown design provided as preview_3.webp —
 * soft pill trigger (already covered by .argo-input), opened menu with
 * light-purple selected-row highlight, soft elevation shadow, custom
 * scrollbar for long lists.
 *
 * Coordinates with the existing native `select.argo-input` rule in
 * argo-components.css — when the JS wrapper is applied, the native
 * select is visually hidden but kept in the accessibility tree and
 * the DOM for form submission.
 */

/* Wrapper around the native select + custom UI. Position relative so the
 * absolutely-positioned menu can be anchored from here. */
.argo-select {
	position: relative;
	width: 100%;
}

/* Native select visually removed while the JS enhancement is active.
 * Don't use display:none — that breaks form submission, label-for
 * associations, and some screen readers. The clip+absolute trick is
 * the canonical accessible-hidden pattern. */
.argo-select > select.argo-input.argo-select__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	min-height: 0 !important;
}

/* Custom trigger button. Inherits the look of .argo-input so when the
 * JS upgrade runs there is zero visual jump from native-select to
 * custom-trigger — the user can't tell which one rendered. The
 * `select.argo-input` rule in argo-components.css covers the closed
 * pill + chevron; we just need a few extras for button semantics. */
.argo-select__trigger {
	width: 100%;
	padding: 0.8rem 1rem;
	padding-right: 2.65rem;
	min-height: 2.95rem;
	border: 1px solid var(--argo-border-strong);
	border-radius: 0.875rem;
	background: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--argo-ink-900);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	outline: none;
	line-height: 1.25;
}
.argo-select__trigger:hover:not(:disabled) {
	border-color: var(--argo-ink-300, #cbd5e1);
}
.argo-select__trigger:focus,
.argo-select.is-open .argo-select__trigger {
	border-color: var(--argo-brand);
	box-shadow: 0 0 0 3px rgba(25, 22, 109, 0.12);
}
.argo-select__trigger:disabled {
	background: var(--argo-surface-2);
	color: var(--argo-ink-400);
	cursor: not-allowed;
	opacity: 0.75;
}

/* Label inside trigger. Truncate long values so they don't push the
 * chevron off the edge — important for customer/supplier dropdowns
 * where company names can be very long. */
.argo-select__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.argo-select__label--placeholder {
	color: var(--argo-ink-400);
}

/* Chevron icon. CSS-injected SVG (rather than a separate img element)
 * keeps the icon as a single style atom that animates with the parent. */
.argo-select__chevron {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	color: var(--argo-ink-500);
	transition: transform 0.18s ease;
	pointer-events: none;
}
.argo-select.is-open .argo-select__chevron {
	transform: rotate(180deg);
}

/*
 * Dropdown menu.
 *
 * Anchored absolutely inside the wrapper. The JS positioning logic
 * decides whether the menu opens below (default) or above (when there
 * isn't room below — viewport-aware flip) and toggles the
 * .argo-select__menu--above modifier.
 *
 * z-index sits above .argo-card content but below the topbar so a
 * dropdown opened inside a card can't escape over the page chrome.
 */
.argo-select__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--argo-border);
	border-radius: 12px;
	box-shadow:
		0 4px 6px -2px rgba(15, 23, 42, 0.05),
		0 10px 20px -4px rgba(15, 23, 42, 0.10);
	padding: 6px;
	margin: 0;
	list-style: none;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 0.14s ease, transform 0.14s ease;
}
.argo-select.is-open .argo-select__menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* "Flip up" variant when the menu would otherwise overflow the viewport. */
.argo-select__menu--above {
	top: auto;
	bottom: calc(100% + 6px);
	transform: translateY(4px);
}
.argo-select.is-open .argo-select__menu--above {
	transform: translateY(0);
}

/* Menu item. The hover/keyboard-active state and the
 * already-selected state are both communicated with the
 * lavender tint from the reference image. Active gets a
 * slightly stronger tone so keyboard nav is distinguishable
 * from "this option is the current value". */
.argo-select__item {
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 0.92rem;
	color: var(--argo-ink-900);
	cursor: pointer;
	user-select: none;
	transition: background 0.10s ease, color 0.10s ease;
	line-height: 1.35;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.argo-select__item + .argo-select__item {
	margin-top: 2px;
}
.argo-select__item:hover:not([aria-disabled="true"]),
.argo-select__item.is-active {
	background: #f3f0ff; /* light lavender — matches reference image */
}
.argo-select__item[aria-selected="true"] {
	background: #ece9fd; /* slightly stronger lavender for the selected option */
	font-weight: 600;
	color: var(--argo-brand);
}
.argo-select__item[aria-selected="true"].is-active {
	background: #ddd6fe; /* selected + keyboard-active = strongest tint */
}
.argo-select__item[aria-disabled="true"] {
	color: var(--argo-ink-400);
	cursor: not-allowed;
}
.argo-select__item-tick {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--argo-brand);
	visibility: hidden;
}
.argo-select__item[aria-selected="true"] .argo-select__item-tick {
	visibility: visible;
}

/*
 * Custom scrollbar — matches the reference image's slim purple thumb.
 * WebKit syntax for Chrome/Safari/Edge; Firefox uses scrollbar-color.
 * Both fall back to OS default if the engine doesn't recognize them.
 */
.argo-select__menu::-webkit-scrollbar {
	width: 6px;
}
.argo-select__menu::-webkit-scrollbar-track {
	background: transparent;
}
.argo-select__menu::-webkit-scrollbar-thumb {
	background: var(--argo-ink-300, #cbd5e1);
	border-radius: 3px;
}
.argo-select__menu::-webkit-scrollbar-thumb:hover {
	background: var(--argo-brand);
}
.argo-select__menu {
	scrollbar-width: thin;
	scrollbar-color: var(--argo-ink-300, #cbd5e1) transparent;
}

/* When the wrapper is disabled (parent fieldset disabled / data-attribute),
 * propagate the look to the trigger. */
.argo-select[aria-disabled="true"] .argo-select__trigger,
.argo-select fieldset[disabled] .argo-select__trigger {
	background: var(--argo-surface-2);
	color: var(--argo-ink-400);
	cursor: not-allowed;
	opacity: 0.75;
}