/* Select2 theme overrides for HAMI POS */

.select2-container { width: 100% !important; }

/* Single select */
.select2-container--default .select2-selection--single {
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--surface-bg);
  font-size: .9rem;
  color: var(--text-color);
  transition: border-color .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  color: var(--text-color);
  padding-left: .75rem;
  padding-right: 2rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px;
  right: .75rem;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  --fa: "\f078";
  content: var(--fa);
  font-family: 'Font Awesome 7 Pro';
  font-weight: 300;
  font-size: .8rem;
  line-height: 1;
  color: #b57407;
  display: inline-block;
  transition: transform .2s ease;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
  transform: rotate(180deg);
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #b57407;
}

/* Placeholder
   Select2 draws its placeholder as its own element, so the
   .form-control::placeholder rule in bootstrap-overrides.css cannot reach it.
   The library colours only the single-select one (#999) and gives the multiple
   one nothing at all, so there it inherits the box's own text colour and reads
   as a chosen value rather than as a hint. Both are restated here from the box
   they sit in, so a placeholder matches the inputs beside it: Poppins at the
   box's .9rem, and the same muted grey their ::placeholder uses. */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: var(--text-muted-color);
}

/* Multiple select */
.select2-container--default .select2-selection--multiple {
  min-height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--surface-bg);
  font-size: .9rem;
}
.select2-container--default .select2-selection--multiple:hover,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #b57407;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary-soft);
  border: 1px solid #b57407;
  color: #b57407;
  border-radius: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right: 1px solid #b57407;
  color: #b57407;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background-color: #b57407;
  color: #fff;
}

/* Invalid state
   Select2 hides the <select> and draws its own box, so Bootstrap's is-invalid
   on the element itself paints nothing: POS.syncSelect2Invalid() copies the
   class onto the container and these rules give that box the red border the
   rest of the form uses. site.css has the same rule for the public forms, but
   the admin layout does not load that file. */
.select2-container.is-invalid .select2-selection--single,
.select2-container.is-invalid .select2-selection--multiple {
  border-color: var(--bs-danger);
}
.select2-container.is-invalid.select2-container--focus .select2-selection--single,
.select2-container.is-invalid.select2-container--focus .select2-selection--multiple {
  border-color: var(--bs-danger);
}

/* Dropdown */
.select2-container--default .select2-dropdown {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: var(--float-shadow);
  font-size: .9rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: none;
  outline: none;
  background-color: var(--surface-bg);
  color: var(--text-color);
  border-radius: 4px;
  font-size: .9rem;
  box-shadow: none;
  padding: .375rem .75rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:hover,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border: 1px solid #b57407;
  outline: none;
  box-shadow: none;
}

/* Options */
.select2-container--default .select2-results__option {
  padding: .4rem .75rem;
  color: var(--text-color);
}
.select2-container--default .select2-results__option--disabled { color: var(--text-muted-color); }
.select2-container--default .select2-results__option--selected {
  background-color: #b57407;
  color: #fff;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #b57407;
  color: #fff;
}
.select2-container--default .select2-results__group { color: var(--text-muted-color); }