/*
 * Select2 theme aligned with the Bootstrap form controls of the app.
 * Design goal: forgiving hit areas. The whole field opens the dropdown,
 * options and chip remove buttons meet the 44px touch target guideline.
 */

.select2-container {
    --s2-bg: var(--bs-body-bg, #fff);
    --s2-border: var(--bs-border-color, #dee2e6);
    --s2-border-hover: #adb5bd;
    --s2-focus: var(--bs-primary, #2c3e50);
    --s2-focus-ring: rgba(44, 62, 80, .15);
    --s2-muted: #6c757d;
    --s2-radius: var(--bs-border-radius, .375rem);
    --s2-chip-bg: #eef1f4;
    --s2-chip-border: #d7dde3;
    --s2-min-height: 46px;
    --s2-option-height: 44px;
}

.select2.select2-container {
    display: block;
    width: 100% !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
}

/* Field ---------------------------------------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--s2-min-height);
    height: auto;
    margin: 0;
    /* caret matches the native .form-select one: same icon, size and offset */
    padding: .3rem 2.25rem .3rem .75rem;
    background-color: var(--s2-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius);
    cursor: pointer;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--s2-border-hover);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--s2-focus);
    box-shadow: 0 0 0 .2rem var(--s2-focus-ring);
    outline: none;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e");
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--bs-secondary-bg, #e9ecef);
    cursor: not-allowed;
}

/* Single value --------------------------------------------------------- */

.select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    line-height: 1.5;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--s2-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

/* Keeps the label from running under the clear button when there is one. */
.select2-container--default .select2-selection--single:has(.select2-selection__clear) {
    padding-right: 4rem;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--s2-muted);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover,
.select2-container--default .select2-selection--single .select2-selection__clear:focus-visible {
    background-color: rgba(231, 76, 60, .12);
    color: var(--bs-danger, #e74c3c);
    outline: none;
}

/* Multiple values ------------------------------------------------------ */

/* The chip list and the search box are siblings inside the field, so the list
   only takes the room its chips need and the search keeps the rest. */
.select2-container--default .select2-selection--multiple {
    flex-wrap: wrap;
    gap: .35rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    flex: 0 1 auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--s2-muted);
    margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    min-height: 32px;
    margin: 0;
    padding: .1rem .7rem .1rem .1rem;
    background-color: var(--s2-chip-bg);
    border: 1px solid var(--s2-chip-border);
    border-radius: 999px;
    color: var(--s2-focus);
    font-size: .875rem;
    line-height: 1.3;
    cursor: default;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--s2-muted);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color .12s ease-in-out, color .12s ease-in-out;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus-visible {
    background-color: var(--bs-danger, #e74c3c);
    color: #fff;
    outline: none;
}

/* The inline search fills the remaining room so clicks on the empty part
   of the field land on a real input instead of dead space. */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: flex;
    flex: 1 1 4rem;
    margin: 0;
}

/* The search box is a textarea in select2 4.1, it needs to behave as one line. */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 4rem;
    height: var(--s2-search-height, 30px);
    min-height: var(--s2-search-height, 30px);
    margin: 0;
    padding: 0 .25rem;
    background: transparent;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    line-height: var(--s2-search-height, 30px);
    resize: none;
    overflow: hidden;
    outline: none;
}

.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--s2-muted);
}

/* Once there are chips and the field is idle the search box would wrap onto a
   line of its own, so it collapses until the field is used. */
.select2-container--default:not(.select2-container--open):not(.select2-container--focus)
.select2-selection--multiple:has(.select2-selection__choice) .select2-search--inline {
    flex: 0 0 auto;
    min-width: 0;
}

.select2-container--default:not(.select2-container--open):not(.select2-container--focus)
.select2-selection--multiple:has(.select2-selection__choice) .select2-search--inline .select2-search__field {
    width: 0 !important;
    min-width: 0;
    height: 0;
    min-height: 0;
    padding: 0;
}

/* Dropdown ------------------------------------------------------------- */

/* select2 gives the list the exact width of the field, so one sitting in a
   narrow cell would open a list too small to read. It keeps a floor without
   ever growing past the viewport. */
.select2-container .select2-dropdown {
    margin-top: .25rem;
    min-width: min(14rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    background-color: #fff;
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
    overflow: hidden;
}

.select2-container .select2-dropdown--above {
    margin-top: -.25rem;
}

/* Only the detached container that holds the dropdown is raised. The field
   keeps its own stacking order, otherwise it would cover its floating label. */
.select2-container--default.select2-container--open:not(.select2) {
    z-index: 5000;
}

.select2-container .select2-dropdown .select2-search {
    padding: .5rem;
    border-bottom: 1px solid #f1f3f5;
}

.select2-container .select2-dropdown .select2-search .select2-search__field {
    width: 100%;
    min-height: 40px;
    padding: .5rem .75rem !important;
    border: 1px solid var(--s2-border) !important;
    border-radius: var(--s2-radius);
    font-size: 1rem;
    outline: none !important;
}

.select2-container .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--s2-focus) !important;
    box-shadow: 0 0 0 .2rem var(--s2-focus-ring);
}

.select2-container .select2-dropdown .select2-results {
    padding: 0;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 20rem;
}

/* Long unbroken labels (imeis, plates) would be clipped by the dropdown
   instead of wrapping onto a second line. */
.select2-container--default .select2-results__option {
    display: flex;
    align-items: center;
    min-height: var(--s2-option-height);
    padding: .5rem .85rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.select2-container--default .select2-results__option + .select2-results__option {
    border-top: 1px solid #f1f3f5;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--s2-focus);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--s2-chip-bg);
    color: var(--s2-focus);
    font-weight: 600;
}

.select2-container--default .select2-results__option--selectable {
    cursor: pointer;
}

.select2-container--default .select2-results__message,
.select2-container--default .select2-results__option.loading-results {
    color: var(--s2-muted);
    font-size: .9rem;
}

/* Input groups ----------------------------------------------------------
   select2 renders a full width block, which would push an appended button to a
   line of its own. Inside an input group it has to behave as the .form-select
   it replaces and share the row with its neighbours. */

.input-group > .select2.select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

/* select2 nests its box in two wrappers, so the visible field has to be told
   to fill the height of the row instead of keeping its own min-height. */
.input-group > .select2.select2-container,
.input-group > .select2-container .selection {
    display: flex;
}

.input-group > .select2-container .selection {
    flex: 1 1 auto;
    min-width: 0;
}

.input-group > .select2-container .select2-selection--single,
.input-group > .select2-container .select2-selection--multiple {
    width: 100%;
}

/* The icon button keeps the group at the height of the field and takes the
   whole appended box as its hit area. */
.input-group > .input-group-text:has(> .loading-btn) {
    padding: 0;
}

.input-group > .input-group-text > .loading-btn {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 .75rem;
    line-height: 1;
}

.input-group > .input-group-text > .loading-btn .material-icons {
    font-size: 22px;
}

.input-group > .select2-container:not(:last-child) .select2-selection--single,
.input-group > .select2-container:not(:last-child) .select2-selection--multiple {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Same as Bootstrap does for a focused control: the ring goes over the
   adjacent button instead of under it. */
.input-group > .select2-container--focus,
.input-group > .select2-container--open {
    z-index: 5;
}

/* Floating labels -------------------------------------------------------
   select2 hides the original select and renders its own box next to it, so the
   label has to stay raised the way Bootstrap does it for .form-select. */

.form-floating > .select2.select2-container {
    --s2-min-height: calc(3.5rem + calc(var(--bs-border-width, 1px) * 2));
    --s2-search-height: 26px;
}

.form-floating > .select2-container ~ label {
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-floating > .select2-container .select2-selection--single,
.form-floating > .select2-container .select2-selection--multiple {
    padding-top: 1.5rem;
    padding-bottom: .35rem;
    /* same spot the native select puts it, pinned so it does not drift down
       once the chips wrap onto a second line */
    background-position: right .75rem top 1.375rem;
}

/* No vertical padding here: the remove button already sets the chip height and
   the field has to stay at the same 58px as its neighbours. */
.form-floating > .select2-container .select2-selection--multiple .select2-selection__choice {
    min-height: 26px;
    padding: 0 .7rem 0 0;
    font-size: .8125rem;
}

.form-floating > .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    width: 24px;
    height: 24px;
}

.form-floating > .select2-container .select2-selection--single .select2-selection__clear {
    top: auto;
    bottom: .45rem;
    transform: none;
}

/* Touch devices: bigger targets and 16px inputs so iOS does not zoom in. */
@media (pointer: coarse) {
    .select2-container {
        --s2-min-height: 52px;
        --s2-option-height: 50px;
    }

    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
    .select2-container .select2-dropdown .select2-search .select2-search__field {
        font-size: 16px;
    }

    .select2-container--default .select2-results > .select2-results__options {
        max-height: 55vh;
    }
}