/*
 * Select2 "bootstrap-5" theme override — brings select2 in line with the
 * Atlaskit-derived design system already applied to .form-control/.form-select
 * and the checkbox component (see resources/sass/shared/_tokens.scss and
 * _overrides.scss, and the select.tsx reference those were mapped from).
 *
 * Loaded LAST, after select2-bootstrap-5-theme.min.css, by
 * resources/views/helpers/forms/fields/select2.blade.php (Front + Auth only —
 * Admin uses its own, separately-themed select2 field/filter partials under
 * resources/views/admin/panel/{fields,filters}/select2*.blade.php and never
 * includes this file).
 *
 * Values here are literal copies of the SCSS tokens below (this file is a
 * plain CSS asset, not compiled by Mix, so it can't reference SCSS variables
 * directly) — keep them in sync if those tokens ever change:
 *   $input-color              #292a2e
 *   $input-border-color       #8c8f97
 *   $input-focus-border-color #4688ec
 *   $input-focus-box-shadow   inset 0 0 0 1px #4688ec
 *   $primary                  #1868db
 *   $danger                   #e2483d
 *   hover background          #f8f8f8  (.form-control:hover, checkbox:hover)
 *   checkbox radius           3px      (--ds-radius-small)
 */

/* === Trigger (closed state) === */
.select2-container--bootstrap-5 .select2-selection {
	color: #292a2e;
	border-color: #8c8f97;
	border-radius: .375rem;
	box-shadow: none;
	/* The vendored theme hardcodes 1rem (16px), which doesn't inherit the
	   site's 14px ($font-size-base) base like every other .form-control does -
	   most visible on the tagging field, where a 16px "chip" (padding + line-height
	   both scale off font-size) makes the whole control noticeably taller than
	   the 38px every other input is tuned to, reading as extra empty space. */
	font-size: .875rem;
	/* The vendored theme's own min-height formula (calc(1.5em + .75rem + 2px))
	   is a Bootstrap-stock approximation that doesn't match this site's actual
	   input-height formula (resources/sass/shared/_tokens.scss - md: 36px, from
	   $input-btn-padding-y: 6.5px) - it computes 35px for the single select and,
	   combined with the multi-select's own extra chip-row layout, 38px for the
	   tagging field. Force the real 36px directly so every select2 - single or
	   tagging - matches every plain .form-control on the page exactly, not an
	   approximation of it. min-height (not height) so the tagging field can
	   still grow taller once chips wrap to a second line. */
	min-height: 36px;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
	color: #292a2e;
	/* text-align is inherited — a select2 sitting inside a right/center-aligned
	   ancestor (e.g. a `.text-end` toolbar) would otherwise show its selected-value
	   text shifted the same way. `start` (not `left`) stays RTL-safe. */
	text-align: start;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
	color: #6b6e76;
}

.select2-container--bootstrap-5:not(.select2-container--disabled):not(.select2-container--focus):not(.select2-container--open) .select2-selection:hover {
	background-color: #f8f8f8;
}

/* === Trigger (focused / open state) — same crisp inset ring as .form-control/.form-select === */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
	border-color: #4688ec;
	box-shadow: inset 0 0 0 1px #4688ec;
}

/* === Trigger (disabled state) === */
.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
	color: #6b6e76;
	background-color: #f1f2f4;
	border-color: #dcdfe4;
}

/* === Validation states — same crisp inset-ring technique as .form-control.is-invalid
   (resources/sass/shared/_overrides.scss), and for the same reason: the ring should
   read as "bold-bordered" right away, not only once the field is focused/open. This
   used to be border-color-only unless ALSO :focus/:open - the one case a select2
   field's ring didn't match a plain <input>'s, since .form-control.is-invalid was
   fixed to always show its ring but this rule wasn't updated to match. === */
.is-valid + .select2-container--bootstrap-5 .select2-selection,
.was-validated select:valid + .select2-container--bootstrap-5 .select2-selection {
	border-color: #198754;
	box-shadow: inset 0 0 0 1px #198754;
}
.is-invalid + .select2-container--bootstrap-5 .select2-selection,
.was-validated select:invalid + .select2-container--bootstrap-5 .select2-selection {
	border-color: #e2483d;
	box-shadow: inset 0 0 0 1px #e2483d;
}

/* === Dropdown panel === */
.select2-container--bootstrap-5 .select2-dropdown {
	color: #292a2e;
	border-color: #8c8f97;
	border-radius: .375rem;
	box-shadow: 0 8px 12px rgba(9, 30, 66, .15), 0 0 1px rgba(9, 30, 66, .31);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
	color: #292a2e;
	border-color: #8c8f97;
	border-radius: .375rem;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
	border-color: #4688ec;
	box-shadow: inset 0 0 0 1px #4688ec;
}

/* === Options: default / group label / disabled === */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message {
	color: #6b6e76;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__group {
	color: #6b6e76;
	font-weight: 600;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"] {
	color: #a8acb3;
}

/* === Options: highlighted (hover / keyboard nav) — same neutral hover as .form-control === */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
	color: #292a2e;
	background-color: #f8f8f8;
}

/* === Options: selected — brand-subtle fill + left accent bar, matching the reference component === */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
	color: #1868db;
	background-color: #e9f2ff;
	box-shadow: inset 2px 0 0 #1868db;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected.select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
	color: #1868db;
	background-color: #dbe9fc;
	box-shadow: inset 2px 0 0 #1868db;
}

/* === Multi-select "chips" === */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	color: #292a2e;
	background-color: #f8f8f8;
	border-color: #8c8f97;
	border-radius: 3px;
	/* The vendored theme sets font-size directly on this element (1rem) -
	   the .select2-selection font-size fix above only affects it through
	   inheritance, which a directly-set value on the element itself always
	   wins over regardless of that ancestor rule's specificity. Override it
	   here, on the same element, to actually take effect. */
	font-size: .875rem;
}
/* The vendored theme's .select2-selection__rendered (the chips row) always
   reserves a 28px min-height, and the search box always renders as its own
   block row underneath (both by design, so chips can wrap under an
   already-typed search term) - together they make even an EMPTY tagging
   field noticeably taller than every other input on the form (~66px vs
   ~35px), reading as extra blank space above the placeholder. Collapsing
   the chips row's reserved height when there are no chips yet removes that
   without touching the (correct, by-design) wrap-under-chips behavior once
   tags exist. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered:empty {
	min-height: 0;
}
/* Same root-rem-vs-local-font-size mismatch as the chip above, on the inline
   search box: the vendored theme hardcodes height:1.5rem (24px, off the
   16px ROOT font-size, unaffected by the .select2-selection font-size fix
   above since rem never scales with a local font-size change) instead of
   1.5em (21px at this field's actual 14px). That extra 3px is exactly what
   was still pushing the tagging field 2px past the container's own 36px
   min-height (content + 12px padding + 2px border = 38, not 36). */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
	height: 1.5em;
	/* A <textarea> (what select2 uses here, not an <input>) doesn't get the
	   same line-height half-leading vertical-centering browsers give inline
	   text/<input> - its content anchors to the top of its box regardless of
	   line-height, so even though this box's geometry is now pixel-identical
	   to the single-select's placeholder box, the glyphs themselves render
	   visibly higher. Nudge down to compensate - textarea-specific, not
	   something line-height/height alone can fix. */
	padding-top: 2px;
}
/* Same fix, one level up: the theme ALSO hardcodes height:1.5rem on the
   wrapping <span class="select2-search--inline"> itself (a second, separate
   rule from the .select2-search__field one above) - override both or the
   span's own 24px still pads the container past 36px even once the field
   inside it is correctly sized. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
	height: 1.5em;
}