/* select2_restyle.css

	Site-wide restyle of the select2 widget, emitted by
	application.new_system.render_select2_init() straight after the select2
	bootstrap theme, so every audience that uses select2 gets it (admin, ATS,
	hub, candidate) - the select2 twin of css/jquery_ui_datepicker.css, and it
	matches that file's tokens (border #dee2e6, #0d6efd accent, #e7f1ff soft,
	#f1f3f5 hover) and its chevron-drawn-in-CSS approach.

	The project runs TWO select2 versions - v4 (request.require.SELECT2 = 4) and
	the legacy v3.5.2 (request.require.SELECT2 = true, still the more common one
	across the ATS) - which have completely different DOM, so this file restyles
	BOTH: the "--- select2 v4 ---" block below, then the "--- select2 v3 ---" one.

	Deliberately does NOT set a height - it leaves the vendor height alone so the
	widgets stay aligned with the plain inputs beside them (a page that wants a
	taller control, e.g. reports.cfm, sets its own height with a more specific rule).
*/

/* ============================ select2 v4 ============================ */

/* single-select box - rounder corners + a cleaner border than the bootstrap theme */
.select2-container--default .select2-selection--single {
	border: 1px solid #dee2e6;
	border-radius: 8px;
	transition: border-color .15s, box-shadow .15s;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #212529;
}

/* focus / open - Bootstrap-blue ring, matching the datepicker's active day */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: #0d6efd;
	box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

/* swap select2's default down-triangle for a clean chevron - same shape as the
	datepicker's prev/next arrows (a rotated square with two borders) */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: none;
	width: 8px;
	height: 8px;
	margin-left: -6px;
	margin-top: -6px;
	border-right: 2px solid #6c757d;
	border-bottom: 2px solid #6c757d;
	transform: rotate(45deg);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	margin-top: -2px;
	transform: rotate(-135deg);
}

/* the dropdown panel */
.select2-dropdown {
	border: 1px solid #dee2e6;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	overflow: hidden;
}

.select2-container--default .select2-results__option {
	padding: 8px 12px;
	color: #212529;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #f1f3f5;
	color: #212529;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background: #e7f1ff;
	color: #0d6efd;
	font-weight: 600;
}

.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
	background: #e7f1ff;
	color: #0d6efd;
}

/* the search box inside the dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 6px 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: #0d6efd;
	outline: none;
	box-shadow: 0 0 0 3px rgba(13,110,253,.12);
}

/* multi-selects get the same rounding, and the chips pick up the soft accent */
.select2-container--default .select2-selection--multiple {
	border: 1px solid #dee2e6;
	border-radius: 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: #e7f1ff;
	border: 1px solid #cfe2ff;
	border-radius: 6px;
	color: #0d6efd;
}


/* ============================ select2 v3 ============================ */
/* legacy 3.5.2 DOM (.select2-choice / .select2-arrow / .select2-drop). The
	base theme draws a grey gradient arrow box with a sprite triangle - we strip
	that and draw the same CSS chevron as the v4 block and the datepicker. */

/* the container itself is just a wrapper - when it carries .form-control (v3
	copies the select's class onto it) the bootstrap/BS input border doubles up
	with the .select2-choice border below, so strip it: the choice is the box */
.select2-container.form-control,
.form-control.select2-container {
	border: none;
	background: none;
	box-shadow: none;
}

.select2-container .select2-choice {
	border: 1px solid #dee2e6;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}

.select2-container.select2-container-active .select2-choice,
.select2-container.select2-dropdown-open .select2-choice {
	border-color: #0d6efd;
	box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

/* strip the grey gradient arrow box; flex-centre a clean chevron in it */
.select2-container .select2-choice .select2-arrow {
	background: none;
	background-image: none;
	border: none;
	border-left: none;
	top: 0;
	bottom: 0;
	width: auto;
	padding-right: 14px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* the triangle sprite -> a clean chevron (rotated square, two borders) */
.select2-container .select2-choice .select2-arrow b {
	position: static;
	background: none !important;
	border: none;
	width: 8px;
	height: 8px;
	margin: -3px 0 0 0;
	border-right: 2px solid #6c757d;
	border-bottom: 2px solid #6c757d;
	transform: rotate(45deg);
}

.select2-container.select2-dropdown-open .select2-choice .select2-arrow b {
	margin: 2px 0 0 0;
	transform: rotate(-135deg);
}

/* dropdown panel + options */
.select2-drop {
	border: 1px solid #dee2e6;
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.select2-drop.select2-drop-above {
	border-top: 1px solid #dee2e6;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
}

.select2-results .select2-result-label {
	padding: 8px 12px;
	color: #212529;
}

.select2-results .select2-highlighted {
	background: #0d6efd;
	color: #fff;
}

.select2-results .select2-highlighted .select2-result-label {
	color: #fff;
}

.select2-search input {
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 6px 24px 6px 10px;
}