/* wonder-select - minimal styling for the morph-native select replacement. */

/*
 * Avoid both flashes during enhancement:
 *   1. the native-select FOUC (the raw <select> painting then vanishing), and
 *   2. the empty-gap / pop-in (nothing, then the widget appears).
 *
 * Instead of hiding the unenhanced select, we style it to LOOK like the eventual trigger - same
 * border, padding, caret - so from the very first paint there's a select-shaped control in place
 * (already showing the current value, natively). When wonder-select enhances it, the select moves
 * inside a .ws-host and we hide it there, swapping in the real trigger seamlessly. No blink, no gap,
 * no layout shift. (appearance:none lets us draw our own caret to match the trigger.)
 */
select.ajax-popup-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 24rem;
	border: 1px solid #bbb;
	border-radius: 5px;
	padding: .4rem 1.8rem .4rem .6rem;
	min-height: 1.4rem;
	background-color: #fff;
	/* a down-caret matching .ws-trigger::after, drawn as an inline SVG background */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .65rem center;
	font: inherit;
	cursor: pointer;
	/* Muted while unenhanced: it is effectively a disabled select until JS upgrades it, and the
	   text it shows is usually the no-selection placeholder - which the real trigger renders gray
	   (.ws-placeholder, #999). Matching that avoids a black->gray text pop at the swap. */
	color: #999;
}
/* When a real value IS selected (the no-selection option isn't the chosen one), use normal dark
   text to match the trigger's .ws-value (#222). :has() is supported in all current browsers;
   where it isn't, the muted color above is a harmless fallback for the brief pre-enhance frame. */
select.ajax-popup-button:has(option:checked:not([value="WONoSelectionString"]):not([value=""])) {
	color: #222;
}
/* Once enhanced, the real trigger takes over - hide the now-wrapped native select. */
wonder-select.ws-host select.ajax-popup-button { display: none; }

wonder-select.ws-host {
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 24rem;
	font: inherit;
}

wonder-select .ws-trigger {
	border: 1px solid #bbb;
	border-radius: 5px;
	padding: .4rem 1.8rem .4rem .6rem; /* extra right padding leaves room for the caret */
	min-height: 1.4rem;
	background: #fff;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	align-items: center;
	position: relative;
}
/* The traditional down caret that marks this as a select. */
wonder-select .ws-trigger::after {
	content: "";
	position: absolute;
	right: .7rem;
	top: 50%;
	width: 0;
	height: 0;
	border-left: .3rem solid transparent;
	border-right: .3rem solid transparent;
	border-top: .35rem solid #888;
	transform: translateY(-25%);
	pointer-events: none;
}
/* Focus ring: show the same blue border whenever the trigger has focus (e.g. after a pick, by
   keyboard, or click) - not only while the dropdown is open - so it reads as focused like a native
   select. outline:none because we draw our own ring via border + box-shadow. */
wonder-select .ws-trigger:focus { outline: none; }
wonder-select.ws-open .ws-trigger,
wonder-select .ws-trigger:focus { border-color: #2b6cb0; box-shadow: 0 0 0 2px rgba(43,108,176,.2); }
/* Flip the caret while open. */
wonder-select.ws-open .ws-trigger::after { border-top-color: #2b6cb0; transform: translateY(-75%) rotate(180deg); }
wonder-select .ws-placeholder { color: #999; }
wonder-select .ws-value { color: #222; }

wonder-select .ws-tag {
	background: #e6effa;
	border: 1px solid #b8d4f0;
	border-radius: 4px;
	padding: .05rem .35rem;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .9em;
}
wonder-select .ws-tag-remove {
	border: none; background: none; cursor: pointer; color: #2b6cb0; font-size: 1.1em; line-height: 1; padding: 0;
}

wonder-select .ws-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	margin-top: 2px;
	border: 1px solid #bbb;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	/* Grow to the widest option (at least as wide as the trigger) so long labels are readable on
	   one line; positionDropdown() sets an inline, viewport-aware max-height AND max-width. */
	min-width: 100%;
	width: max-content;
	max-height: 16rem; /* fallback; overridden inline */
	overflow: auto;
}
/* When opened upward (more room above than below), anchor the dropdown to the top of the trigger. */
wonder-select.ws-up .ws-dropdown {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 2px;
	box-shadow: 0 -4px 16px rgba(0,0,0,.12);
}
/* When the list would overflow the right edge, positionDropdown() right-aligns it to the trigger. */
wonder-select.ws-right .ws-dropdown {
	left: auto;
	right: 0;
}
wonder-select .ws-search {
	width: 100%;
	box-sizing: border-box;
	border: none;
	border-bottom: 1px solid #eee;
	padding: .45rem .6rem;
	font: inherit;
	outline: none;
}
wonder-select .ws-options { list-style: none; margin: 0; padding: .25rem 0; }
wonder-select .ws-option { padding: .35rem .7rem; cursor: pointer; white-space: nowrap; }
/* Keyboard highlight (arrow keys / hover). Distinct from the actually-selected option. */
wonder-select .ws-option.ws-active { background: #2b6cb0; color: #fff; }
wonder-select .ws-option.ws-selected { background: #d8e8f8; font-weight: 600; }
wonder-select .ws-option.ws-selected.ws-active { background: #2b6cb0; color: #fff; }
wonder-select .ws-option.ws-disabled { color: #999; cursor: default; }
wonder-select .ws-option.ws-disabled:hover { background: none; }
/* The "clear selection" option (the placeholder, shown only when something is selected). Muted +
   italic so it reads as deselect rather than a real choice; separated from the real options. */
wonder-select .ws-option.ws-clear { color: #999; font-style: italic; border-bottom: 1px solid #eee; }
wonder-select .ws-option.ws-clear.ws-active { color: #fff; }