/* Select2 Soft UI Dashboard Theme Customization */

/* Wrapper spacing */
.select2-bootstrap-wrapper {
  width: 100%;
  margin-bottom: 0;
  display: block;
}

/* Main Select2 container */
.select2-bootstrap-wrapper .select2-container--bootstrap-5 {
  width: 100% !important;
  display: block;
}

/* Select2 selection (the visible input) */
.select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection {
  display: flex;
  align-items: stretch;
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease-in-out;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
  color: #3f3f46;
  height: 38px; /* Match Bootstrap form-control height */
  min-height: 38px;
}

.select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection--single {
  height: 38px;
  padding: 0;
}

.select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding: 0.5rem 0.75rem;
  padding-right: 2.5rem;
  line-height: 1.4rem;
  color: #3f3f46;
  display: flex;
  align-items: center;
  min-height: 1.4rem;
}

.select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: #71717a;
  opacity: 0.8;
}

/* Select2 arrow */
.select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.75rem;
  top: 0;
  display: flex;
  align-items: center;
}

.select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
  border-color: #3f3f46 transparent transparent transparent;
  border-width: 5px 4px 0 4px;
  margin-top: 0;
  position: relative;
  top: 0;
}

/* Focus state */
.select2-bootstrap-wrapper .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-bootstrap-wrapper .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: #a1a1aa;
  outline: 0;
  box-shadow: 0 0 0 1px #a1a1aa;
  background-color: #fff;
}

/* Disabled state */
.select2-bootstrap-wrapper .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
  background-color: #e3e3e7;
  border-color: #d2d6da;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Dropdown container */
.select2-dropdown {
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background-color: #fff;
  margin-top: 4px;
}

/* Search box in dropdown */
.select2-search--dropdown {
  padding: 0.5rem;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  width: 100%;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: #a1a1aa;
  box-shadow: 0 0 0 1px #a1a1aa;
}

/* Dropdown results */
.select2-results {
  padding: 0.25rem 0;
}

.select2-results__option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #3f3f46;
  transition: background-color 0.15s ease-in-out;
}

.select2-results__option--highlighted {
  background-color: #f4f4f5;
  color: #3f3f46;
}

.select2-results__option[aria-selected="true"] {
  background-color: #e3e3e7;
  color: #3f3f46;
}

.select2-results__option--selected {
  background-color: #e3e3e7;
  color: #3f3f46;
}

/* Loading indicator */
.select2-results__option--loading {
  color: #71717a;
}

/* No results message */
.select2-results__message {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #71717a;
}

/* Clear button */
.select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
  margin-right: 1.5rem;
  color: #71717a;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 0.25rem;
}

.select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
  color: #3f3f46;
}

/* Match form-control styling when inside form-group */
.form-group .select2-bootstrap-wrapper .select2-container--bootstrap-5 .select2-selection {
  width: 100%;
}

/* Error state (when form field has is-invalid class) */
.select2-bootstrap-wrapper.is-invalid .select2-container--bootstrap-5 .select2-selection,
.select2-bootstrap-wrapper .select2-container--bootstrap-5.is-invalid .select2-selection,
.select2-container--bootstrap-5.is-invalid .select2-selection {
  border-color: #ef4444 !important;
}

.select2-bootstrap-wrapper.is-invalid .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-bootstrap-wrapper .select2-container--bootstrap-5.is-invalid.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.is-invalid.select2-container--focus .select2-selection {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6) !important;
}

/* Error state when select element has is-invalid class */
select.is-invalid + .select2-container--bootstrap-5 .select2-selection {
  border-color: #ef4444 !important;
}

select.is-invalid + .select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6) !important;
}

/* Success state (when form field has is-valid class) */
.select2-bootstrap-wrapper.is-valid .select2-container--bootstrap-5 .select2-selection {
  border-color: #22c55e;
}

.select2-bootstrap-wrapper.is-valid .select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.65);
}

/* Error feedback message styling */
.select2-bootstrap-wrapper + .invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #ef4444;
}