/* Make Select2 play nicely inside Bootstrap 5 input groups */
.input-group .select2-container,
.select2-container {
  flex: 1 1 auto;
  width: 100% !important; /* ensure full width */
  min-width: 0;           /* allow shrinking without wrapping */
}

/* Match form-control height/padding */
.select2-container .select2-selection--single {
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bs-border-color, #d9dee3);
  border-radius: 0.375rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
}

/* Multi-select alignment */
.select2-container .select2-selection--multiple {
  min-height: calc(2.25rem + 2px);
  border: 1px solid var(--bs-border-color, #d9dee3);
  border-radius: 0.375rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}

/* Make sure dropdown overlays cards/containers */
.select2-container--open { z-index: 2000; }

/* Dropdown panel width follows control when inside input-group */
.input-group .select2-container .select2-dropdown { width: 100% !important; }