/* Critical fixes for Select2 in Bootstrap modals */

/* Make sure modals have proper z-index (below select2 containers) */
.modal {
  z-index: 1050 !important;
}

/* Lower backdrop so it doesn't block select2 dropdown */
.modal-backdrop {
  z-index: 1040 !important;
}

/* Ensure select2 containers appear above the modal */
.select2-container--open {
  z-index: 2060 !important;
}

/* Select2 dropdown should be highest z-index element */
.select2-dropdown {
  z-index: 2065 !important;
}

/* Fix the search box inside dropdown - make it fully accessible */
.select2-search {
  z-index: 2070 !important;
}

.select2-search--dropdown .select2-search__field {
  width: 100% !important;
  padding: 8px !important;
  display: block !important;
}

/* Fix select2 height to match bootstrap form controls */
.select2-container .select2-selection--single {
  height: 38px !important;
  padding-top: 4px;
  border-radius: 4px !important;
}

/* Fix for the dropdown arrow position */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}

/* Fix for the text inside select */
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 12px !important;
  line-height: 30px !important;
}

/* Fix border color to match bootstrap inputs */
.select2-container--default .select2-selection--single {
  border: 1px solid #ced4da !important;
}

/* Fix cursor on the select element */
.select2-selection {
  cursor: pointer !important;
}

/* Add a focus state that matches bootstrap */
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #80bdff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Fix position of the dropdown when inside a modal */
.modal .select2-container--open .select2-dropdown {
  top: 100% !important;
}

/* Ensure full width in modals */
.modal .select2-container {
  width: 100% !important;
}

/* Fix select2 in input groups */
.input-group .select2-container--default {
  flex: 1 1 auto;
  width: 1% !important;
}