/* ============================================================================================================================
	rm-select.css - the drop-down lists (assets/js/ui/rm-select.js on Tom Select 2.6.2, Step 3a, 5 Oct 2026; bootstrap-select before).
	Loaded after Tom Select's Bootstrap 5 stylesheet (assets/vendor/tom-select-2.6.2/css/tom-select.bootstrap5.min.css) and gives
	the lists the look bootstrap-select had on this site (measured from it): a dark field (#333, light border, white text, the
	caret at the right, 38 px high, 220 px wide unless data-width says otherwise), a dark list with a shadow and light-grey rows,
	the chosen/keyboard row a little lighter, a pressed row in the accent colour, dividers, a tick at the chosen row of show-tick
	lists. Colours from the brand tokens (assets/tokens/rm-brand-tokens.css); never Bootstrap's blue.
============================================================================================================================ */

select.selectpicker:not(.tomselected) { display: none !important; }		/* (until the list is started, as bootstrap-select hid it) */

.rm-select {
	--rm-select-bg: var(--rm-dark);
	--rm-select-bg-hover: var(--rm-dark-hover);
	--rm-select-border: var(--rm-light);
	--rm-select-text: var(--rm-white);
	--rm-select-row: var(--rm-grey-dd);
	--rm-select-row-active: var(--rm-lighter);
	--rm-select-row-active-bg: var(--rm-white-10);
	--rm-select-divider: var(--rm-white-10);
	--rm-select-focus: 0 0 0 .2rem rgba(248, 249, 250, 0.5);		/* (the light ring of the dark fields; the accent ring on light backgrounds, below) */

	position: relative;
	display: inline-block;
	width: 220px;
	max-width: 100%;
	vertical-align: middle;
	font-family: var(--rm-font-family);
}
.rm-select > select { position: absolute; }		/* (Tom Select hides it; it stays inside, as with bootstrap-select) */

/* ---- the field ---- */
.rm-select > .rm-select__control {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	min-height: var(--rm-control-height);
	padding: 6px 32px 6px 12px !important;
	overflow: hidden;
	color: var(--rm-select-text) !important;
	background: var(--rm-select-bg) !important;
	border: var(--rm-border-width) solid var(--rm-select-border) !important;
	border-radius: var(--rm-radius);
	box-shadow: none;
	font-size: var(--rm-font-size-body);
	line-height: 24px;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--rm-duration-normal);
}
.rm-select > .rm-select__control:hover { background: var(--rm-select-bg-hover) !important; }
.rm-select.focus > .rm-select__control,
.rm-select > .rm-select__control:focus-visible { outline: none; box-shadow: var(--rm-select-focus) !important; }
/* the caret (Bootstrap's dropdown caret, 2 px further right as bootstrap-select 1.12 had it) */
.rm-select > .rm-select__control::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -1px;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	pointer-events: none;
}
.rm-select > .rm-select__control > .rm-select__item,
.rm-select > .rm-select__control > .rm-select__placeholder {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	background: none;
	cursor: inherit;
}
.rm-select__placeholder[hidden] { display: none !important; }
/* everything inside the closed list shows the list's hand: the preset list's chosen row has elements of its own (its name, its icons -
   rm-dialog-jobsettings.js BuildListOption), which showed the text cursor (owner, 18 Oct 2026) */
.rm-select > .rm-select__control * { cursor: inherit !important; }
/* (the real cause: Tom Select shows the text cursor on a focused list - .ts-wrapper.single.input-active .ts-control { cursor: text }.
   The first focus of Job Settings is its first field, the Job Presets list, so only that list showed it. Ours keep the hand) */
.rm-select.ts-wrapper.single.input-active > .rm-select__control { cursor: pointer; }
.rm-select.ts-wrapper.single.input-active.disabled > .rm-select__control { cursor: default; }
.rm-select.multi > .rm-select__control > .rm-select__item { display: none; }		/* (multiple: one summary line, as bootstrap-select) */
/* the closed field of a preset/server list (BuildListOption): the name as wide as the field allows, its edit/delete icons at the field's
   right edge - J-09 (13 Oct 2026): rm-components.css .icon-align-* float right, which does nothing here; the icons sat right after the
   name in the middle of the field (a tap there opened Rename/Delete instead of the list) and the name was cut at ~100 px */
/* (rm-select.js renders the item as <div class="item rm-select__item"><span class="rm-select__item-html">the row's HTML</span></div>) */
.rm-select > .rm-select__control > .rm-select__item > .rm-select__item-html:has(> .option-name) { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; }
.rm-select > .rm-select__control > .rm-select__item .option-name {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rm-select.disabled > .rm-select__control { opacity: 0.65; cursor: default; }
.rm-select.disabled { pointer-events: none; }

/* ---- the open list ---- */
.rm-select > .rm-select__dropdown {
	z-index: var(--rm-z-popup);
	top: 100%;
	bottom: auto;
	width: max-content;
	min-width: 100%;
	max-width: min(90vw, 600px);
	margin: 2px 0 0;
	padding: 8px 0;
	color: var(--rm-select-text);
	background: var(--rm-select-bg) !important;
	border: var(--rm-border-width) solid var(--rm-select-border) !important;
	border-radius: var(--rm-radius);
	box-shadow: var(--rm-shadow-dialog);
	font-size: var(--rm-font-size-page);
	line-height: 21px;
}
.rm-select.rm-select--up > .rm-select__dropdown { top: auto; bottom: 100%; margin: 0 0 2px; }
.rm-select > .rm-select__dropdown > .rm-select__options { max-height: none; overflow-x: auto; overflow-y: auto; scroll-behavior: auto; }
.rm-select .rm-select__option {
	display: flex;
	align-items: center;
	padding: 4px 24px !important;
	color: var(--rm-select-row);
	background: transparent;
	white-space: nowrap;
	opacity: 1;
}
.rm-select .rm-select__option > .rm-select__text { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.rm-select .rm-select__option.active,
.rm-select .rm-select__option.selected { color: var(--rm-select-row-active); background-color: var(--rm-select-row-active-bg); }
.rm-select .rm-select__option[data-selectable]:active { color: var(--rm-white); background-color: var(--rm-accent); }
.rm-select .rm-select__option:not([data-selectable]):not(.rm-select__divider) { opacity: 0.5; cursor: default; }
/* dividers: a line, not a row (Tom Select puts the option classes on the divider element itself) */
.rm-select .rm-select__option.rm-select__divider { height: 0; margin: 8px 0; padding: 0 !important; background: none; border-top: var(--rm-border-width) solid var(--rm-select-divider); cursor: default; }
/* the tick of show-tick lists (our lined-icons check) */
.rm-select .rm-select__check { display: none; margin-left: var(--rm-space-2); font-size: 14px; }
.rm-select.show-tick .rm-select__option.selected .rm-select__check { display: inline-block; }

/* our preset/server rows (rm-dialog-jobsettings.js BuildListOption): the name, then the edit/delete icons at the right */
.rm-select .rm-select__option .option-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* touch screens: the edit/delete icons are targets a finger can hit (at least 28 x 28 px) */
@media (pointer: coarse) {
	.rm-select .rm-select__option [data-list-action] { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; margin-left: 2px; }
}
@media (max-width: 543.98px) {
	.rm-select > .rm-select__dropdown { max-width: 100%; width: 100%; }
	.rm-select .rm-select__option .option-name { white-space: normal; overflow-wrap: anywhere; }
	.rm-select .rm-select__option { white-space: normal; }
}

/* ---- inside the main menu (My Account > Impersonate User): the menu's own rules must not restyle the list ---- */
/* (the flyout is white: the keyboard focus ring in the accent, the light one would not show) */
#primary-menu .rm-select { --rm-select-focus: 0 0 0 .2rem var(--rm-accent-focus); width: 220px; text-align: left; }
#primary-menu .rm-select .rm-select__option,
#primary-menu .rm-select .rm-select__control { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* ---- Windows High Contrast (forced colours drop box-shadows and backgrounds): the keyboard row and the focus in the system's colours ---- */
@media (forced-colors: active) {
	.rm-select .rm-select__option.active { forced-color-adjust: none; color: HighlightText; background-color: Highlight; }
	.rm-select.focus > .rm-select__control,
	.rm-select > .rm-select__control:focus-visible { outline: 2px solid Highlight !important; outline-offset: 1px; }		/* (!important: beats rm-base.css's :focus { outline: none !important }) */
}