/* =====================================================
   SELECT2 STANDARD FOR SNEAT (Bootstrap 5)
   ===================================================== */

/* 1. Container phải theo box model của Bootstrap */
.select2-container {
  width: 100% !important;
  box-sizing: border-box;
}

/* 2. Single select - chiều cao, màu theo theme */
.select2-container--default .select2-selection--single {
  height: var(--bs-input-height, 40px);
  min-height: var(--bs-input-height, 40px);
  padding: 0 var(--bs-input-padding-x, 0.875rem);
  display: flex;
  align-items: center;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

  /* 3. Text trong select */
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
    padding: 0;
    line-height: normal;
    color: inherit;
  }

  /* 4. Arrow */
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
    height: var(--bs-input-height, 40px);
  }

/* 5. Focus / Open giống input Sneat */
.select2-container--default.select2-container--open
.select2-selection--single {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}

/* =====================================================
   DROPDOWN
   ===================================================== */

.select2-dropdown {
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-sm);
}

/* Option */
.select2-container--default .select2-results__option {
  padding: 0.5rem 0.875rem;
  color: var(--bs-body-color);
}

/* Hover */
.select2-container--default
.select2-results__option--highlighted {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-body-color);
}

/* Selected */
.select2-container--default
.select2-results__option--selected {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
  color: var(--bs-body-color);
}

/* Search box trong dropdown */
.select2-container--default
.select2-search--dropdown
.select2-search__field {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}