/* Select2 4.x / Bootstrap 5 and bootstrap-multiselect 2.x.
   Same 36px (small 32px) contract as forms.css. Neutral selection and focus.
   Keep plugin positioning, hidden native selects and event targets intact. */
.select2-container.select2-container--bootstrap-5 {
  --mkp-select-height: var(--mkp-control-height);
  min-width: 0;
  max-width: 100%;
  font-family: var(--mkp-font);
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
}

/* Only the selection wrapper gets fluid width; the detached dropdown keeps
   the width and coordinates measured by Select2. Important beats inline px
   widths measured while a modal/tab or a grid editor was hidden. */
select + .select2-container.select2-container--bootstrap-5 {
  width: 100% !important;
}

.select2-container.select2-container--bootstrap-5 .select2-selection {
  min-height: var(--mkp-select-height);
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius);
  background-color: var(--mkp-surface);
  color: var(--mkp-foreground);
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
  box-shadow: var(--mkp-shadow);
}

.select2-container.select2-container--bootstrap-5 .select2-selection--single {
  height: var(--mkp-select-height);
  padding: calc((var(--mkp-select-height) - 22px) / 2) 2.25rem calc((var(--mkp-select-height) - 22px) / 2) .75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}

.select2-container.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--mkp-foreground);
  line-height: 1.25rem;
}

.select2-container.select2-container--bootstrap-5 .select2-selection__placeholder,
.select2-container.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
  color: var(--mkp-muted-foreground);
  line-height: 1.25rem;
}

.select2-container.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--mkp-ring-color);
  box-shadow: var(--mkp-ring);
}

/* A single select transfers focus to the popup search. Do not leave a second
   ring on its trigger. Keyboard focus on the trigger itself stays visible,
   including selects configured without a search field. */
.select2-container.select2-container--bootstrap-5.select2-container--open:is(.select2-container--above, .select2-container--below) .select2-selection--single:where(:not(:focus-visible)) {
  border-color: var(--mkp-border);
  box-shadow: var(--mkp-shadow);
}

/* Keep the control rounded in either opening direction, including pages
   that load the vendor theme again after this stylesheet. */
.select2-container.select2-container--bootstrap-5.select2-container--open:is(.select2-container--above, .select2-container--below) .select2-selection {
  border-width: 1px;
  border-radius: var(--mkp-radius);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown:is(.select2-dropdown--above, .select2-dropdown--below) {
  padding: .25rem;
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius);
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  font-size: var(--mkp-font-size);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown--below { margin-top: 4px; }
.select2-container.select2-container--bootstrap-5 .select2-dropdown--above { margin-top: -4px; }
/* Only the root list scrolls; nested option groups keep their natural height.
   Leave room for the search and trigger on short screens and at zoom. */
.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results > .select2-results__options {
  max-height: min(15rem, 40vh);
  overscroll-behavior-y: contain;
}
.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-search--dropdown {
  position: relative;
  margin: -.25rem -.25rem .25rem;
  padding: .25rem .5rem;
  border-bottom: 1px solid var(--mkp-border);
}
.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-search--dropdown::before {
  content: "";
  position: absolute;
  top: .8125rem;
  left: .75rem;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.75' cy='6.75' r='4.25' fill='none' stroke='%2371717a' stroke-width='1.5'/%3E%3Cpath d='m10 10 3.5 3.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  height: var(--mkp-control-height-sm);
  min-height: var(--mkp-control-height-sm);
  padding: .375rem .5rem .375rem 1.75rem;
  border: 0;
  border-radius: 0;
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  font: inherit;
  line-height: 1.25rem;
  box-shadow: none;
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
  outline: 0;
  box-shadow: none;
}
/* The popup border identifies search focus without nesting another box
   inside the combobox. The trigger retains its own keyboard focus ring. */
.select2-container.select2-container--bootstrap-5 .select2-dropdown:focus-within {
  border-color: var(--mkp-ring-color);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
  position: relative;
  min-height: var(--mkp-control-height-sm);
  padding: .375rem 1.75rem .375rem .5rem;
  border-radius: var(--mkp-radius-sm);
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
  overflow-wrap: anywhere;
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option:is([aria-selected="true"], .select2-results__option--selected) {
  background: var(--mkp-muted);
  color: var(--mkp-foreground);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background: var(--mkp-muted);
  color: var(--mkp-foreground);
}

.select2-container.select2-container--bootstrap-5 .select2-results__option:is([aria-selected="true"], .select2-results__option--selected)::after {
  content: "";
  position: absolute;
  right: .625rem;
  top: .625rem;
  width: .375rem;
  height: .625rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option:is([aria-disabled="true"], .select2-results__option--disabled, .select2-results__message) {
  color: var(--mkp-muted-foreground);
}
.select2-container.select2-container--bootstrap-5 .select2-results__option[aria-disabled="true"] { cursor: not-allowed; }
.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] { padding: 0; }
.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__group {
  padding: .5rem;
  color: var(--mkp-muted-foreground);
  font-size: .75rem;
  font-weight: 500;
}

/* Flex supports both 4.0's search inside the list and 4.1's sibling textarea.
   Long tags wrap instead of widening a grid column or hiding their remove. */
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  height: auto;
  padding: .1875rem .375rem;
}
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: contents;
}
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  gap: .25rem;
  max-width: 100%;
  min-height: 1.75rem;
  margin: 0;
  padding: 0 .375rem 0 .125rem;
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius-sm);
  background: var(--mkp-muted);
  color: var(--mkp-foreground);
  font-size: .8125rem;
  line-height: 1.25rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.select2-container.select2-container--bootstrap-5 .select2-selection__choice__display { min-width: 0; }
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  position: static;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border-radius: 4px;
  cursor: pointer;
  background-size: .625rem;
  font-size: 0;
}
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:is(:hover, :focus) {
  background-color: var(--mkp-selection);
  outline: 1px solid var(--mkp-ring-color);
}
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
  flex: 1 1 5rem;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: 1.75rem;
  margin: 0;
}
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
  /* Select2's inline width is measured before our flex layout. Fill the
     available search slot so placeholders and typed tags remain readable. */
  min-width: 100%;
  max-width: 100%;
  height: 1.75rem;
  margin: 0;
  padding: .25rem;
  border: 0;
  color: var(--mkp-foreground);
  font: inherit;
  line-height: 1.25rem;
  box-shadow: none;
  outline: 0;
}
.select2-container.select2-container--bootstrap-5 .select2-search__field::placeholder { color: var(--mkp-muted-foreground); opacity: 1; }
.select2-container.select2-container--bootstrap-5 .select2-selection--single:has(.select2-selection__clear) { padding-right: 3.75rem; }
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple:has(.select2-selection__clear) { padding-right: 2.25rem; }
.select2-container.select2-container--bootstrap-5 .select2-selection .select2-selection__clear {
  width: 1.75rem;
  height: 1.75rem;
  right: 1.875rem;
  margin: 0;
  border-radius: var(--mkp-radius-sm);
  font-size: 0;
}
.select2-container.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear { right: .25rem; }
.select2-container.select2-container--bootstrap-5 .select2-selection .select2-selection__clear:is(:hover, :focus) {
  background-color: var(--mkp-muted);
  outline: 1px solid var(--mkp-ring-color);
}

.select2-container.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
  border-color: var(--mkp-border);
  background-color: var(--mkp-muted);
  color: var(--mkp-muted-foreground);
  box-shadow: none;
  cursor: not-allowed;
}
.select2-container.select2-container--bootstrap-5.select2-container--disabled .select2-selection .select2-selection__rendered,
.select2-container.select2-container--bootstrap-5.select2-container--disabled .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: var(--mkp-muted-foreground);
}

/* MVC unobtrusive validation changes the hidden native select. */
select:is(.input-validation-error, .is-invalid, [aria-invalid="true"]) + .select2-container.select2-container--bootstrap-5 .select2-selection:is(.select2-selection--single, .select2-selection--multiple),
.was-validated select:invalid + .select2-container.select2-container--bootstrap-5 .select2-selection:is(.select2-selection--single, .select2-selection--multiple) {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
}
select:is(.input-validation-error, .is-invalid, [aria-invalid="true"]) + .select2-container.select2-container--bootstrap-5:is(.select2-container--focus, .select2-container--open) .select2-selection:is(.select2-selection--single, .select2-selection--multiple),
.was-validated select:invalid + .select2-container.select2-container--bootstrap-5:is(.select2-container--focus, .select2-container--open) .select2-selection:is(.select2-selection--single, .select2-selection--multiple) {
  border: 1px solid var(--bs-form-invalid-border-color, #dc3545);
  box-shadow: 0 0 0 3px rgb(220 53 69 / 20%);
}

/* Bootstrap-multiselect retains native checkboxes and its selection summary. */
.multiselect-native-select {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.multiselect-native-select > .btn-group { width: 100%; min-width: 0; }
.multiselect-native-select .multiselect.dropdown-toggle {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: var(--mkp-control-height);
  padding: .4375rem 2.25rem .4375rem .75rem;
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius);
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  font: inherit;
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
  text-align: left;
  box-shadow: var(--mkp-shadow);
}
.multiselect-native-select .multiselect.dropdown-toggle::after {
  content: "";
  display: block;
  position: absolute;
  right: .875rem;
  top: calc(50% - 4px);
  width: .4375rem;
  height: .4375rem;
  margin: 0;
  border: solid var(--mkp-icon);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
/* The summary must not push adjacent filters or cover the chevron. The full
   selection remains available in the dropdown and the plugin's title. */
.multiselect-native-select .multiselect-selected-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiselect-native-select .multiselect.dropdown-toggle:focus-visible {
  outline: 0;
  border-color: var(--mkp-ring-color);
  box-shadow: var(--mkp-ring);
}
.multiselect-native-select .multiselect.dropdown-toggle:where(:focus:not(:focus-visible)) {
  outline: 0;
  border-color: var(--mkp-border);
  box-shadow: var(--mkp-shadow);
}
.multiselect-native-select .multiselect.dropdown-toggle:disabled {
  background: var(--mkp-muted);
  color: var(--mkp-muted-foreground);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}
.multiselect-native-select .multiselect-container {
  /* Narrow filter columns must not force short category names onto two lines.
     Keep the trigger fluid, give its popup room for checkboxes and group indents,
     and let Popper own placement. Long names still wrap within the viewport. */
  width: max(100%, 16rem);
  min-width: 100%;
  max-width: calc(100vw - 2rem);
  max-height: min(20rem, 50vh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: .25rem;
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius);
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  font-size: var(--mkp-font-size);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
}
/* Scrollable dialogs have less room below their filters than the viewport.
   Match Select2's list cap so the popup scrolls without pushing the dialog.
   The plugin writes maxHeight inline, so this scoped cap must override it. */
.modal-dialog-scrollable .multiselect-native-select .multiselect-container {
  max-height: min(15rem, 40vh) !important;
}
.multiselect-native-select .multiselect-container .multiselect-filter {
  position: sticky;
  top: -.25rem;
  z-index: 1;
  margin: -.25rem -.25rem .25rem;
  padding: .25rem .5rem;
  border-bottom: 1px solid var(--mkp-border);
  background: var(--mkp-surface);
  color: var(--mkp-icon);
}
/* Some views supply the Bootstrap p-2 utility in the filter template. */
.multiselect-native-select .multiselect-container .multiselect-filter.p-2 { padding: .25rem .5rem !important; }
/* Support both the vendor's icon template and the input-only template used
   by product filters. Neither needs a negative margin to align the search. */
.multiselect-native-select .multiselect-container .multiselect-filter::before {
  content: "";
  position: absolute;
  top: .8125rem;
  left: .75rem;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.75' cy='6.75' r='4.25' fill='none' stroke='%2371717a' stroke-width='1.5'/%3E%3Cpath d='m10 10 3.5 3.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.multiselect-native-select .multiselect-container .multiselect-filter > .fa-search { display: none; }
.multiselect-native-select .multiselect-container .multiselect-filter > input:is(.multiselect-search, .form-control) {
  min-width: 0;
  min-height: var(--mkp-control-height-sm);
  height: var(--mkp-control-height-sm);
  margin: 0;
  padding: .375rem .5rem .375rem 1.75rem;
  border: 0;
  border-radius: 0;
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  box-shadow: none;
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
}
.multiselect-native-select .multiselect-container .multiselect-filter > input:is(.multiselect-search, .form-control):focus {
  outline: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.multiselect-native-select .multiselect-container:focus-within {
  border-color: var(--mkp-ring-color);
}
.multiselect-container :is(.multiselect-option, .multiselect-group, .multiselect-all) {
  min-height: var(--mkp-control-height-sm);
  padding: .375rem .5rem;
  border-radius: var(--mkp-radius-sm);
  color: var(--mkp-foreground);
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Vendor hover uses !important; match it only for option surfaces. */
.multiselect-container :is(.multiselect-option, .multiselect-group, .multiselect-all):is(:hover, :focus) {
  background-color: var(--mkp-muted) !important;
  color: var(--mkp-foreground);
}
.multiselect-native-select .multiselect-container :is(.multiselect-option, .multiselect-group, .multiselect-all):is(.active, :active) {
  background-color: var(--mkp-muted);
  color: var(--mkp-foreground);
}
.multiselect-container :is(.multiselect-option, .multiselect-group, .multiselect-all) .form-check {
  margin: 0;
  min-height: 1.25rem;
  padding: 0 0 0 1.5rem;
}
.multiselect-container :is(.multiselect-option, .multiselect-group, .multiselect-all):focus-visible {
  outline: 1px solid var(--mkp-ring-color);
  outline-offset: -1px;
}
.multiselect-container .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.multiselect-container .form-check-input:focus { border-color: var(--mkp-ring-color); box-shadow: var(--mkp-ring); }
.multiselect-container .multiselect-option.disabled { color: var(--mkp-muted-foreground); }
.multiselect-native-select:has(> select:is(.input-validation-error, .is-invalid, [aria-invalid="true"])) .multiselect.dropdown-toggle,
.was-validated .multiselect-native-select:has(> select:invalid) .multiselect.dropdown-toggle { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.multiselect-native-select:has(> select:is(.input-validation-error, .is-invalid, [aria-invalid="true"])) .multiselect.dropdown-toggle:is(:focus, .show),
.was-validated .multiselect-native-select:has(> select:invalid) .multiselect.dropdown-toggle:is(:focus, .show) { box-shadow: 0 0 0 3px rgb(220 53 69 / 20%); }

/* Size/group overrides follow open-state rules so connected edges stay flat. */
select:is(.form-select-sm, .form-control-sm) + .select2-container.select2-container--bootstrap-5,
.input-group-sm > .select2-container.select2-container--bootstrap-5 { --mkp-select-height: var(--mkp-control-height-sm); }
select:is(.form-select-sm, .form-control-sm) + .select2-container.select2-container--bootstrap-5 .select2-selection--multiple,
.input-group-sm > .select2-container.select2-container--bootstrap-5 .select2-selection--multiple { padding-block: .0625rem; }
.input-group > .select2-container.select2-container--bootstrap-5,
.input-group > .multiselect-native-select { flex: 1 1 0%; width: 1% !important; min-width: 0; }
.input-group > .select2-container.select2-container--bootstrap-5 .selection { display: block; width: 100%; }
.input-group > .select2-container.select2-container--bootstrap-5:not(:last-child) .select2-selection { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :is(.btn, .input-group-text, .input-group-prepend) ~ .select2-container.select2-container--bootstrap-5 .select2-selection { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .multiselect-native-select:not(:last-child) .multiselect.dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :is(.btn, .input-group-text) ~ .multiselect-native-select .multiselect.dropdown-toggle { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :is(.select2-container, .multiselect-native-select):focus-within { z-index: 3; }
.input-group-sm > .multiselect-native-select .multiselect.dropdown-toggle {
  min-height: var(--mkp-control-height-sm);
  height: var(--mkp-control-height-sm);
  padding-block: .3125rem;
}
/* Legacy modal filter rows have no vertical gutter when col-md stacks.
   Limit this to rows containing our controls; preserve the horizontal grid. */
@media (max-width: 767.98px) {
  .modal .row:has(> .col-md > :is(.select2-container, .multiselect-native-select)) {
    row-gap: .75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .select2-container.select2-container--bootstrap-5 .select2-selection,
  .select2-container.select2-container--bootstrap-5 .select2-search__field { transition: none; }
}