/* ==========================================================================
   select2 4.1 under AdminLTE 3

   AdminLTE 3.2 styles select2's default theme for the 4.0 markup. select2 4.1
   changed the multi-select markup, so several of AdminLTE's rules miss and
   others land on the wrong element:

   - the inline search is a <textarea> in a <span> AFTER the <ul>, not an
     <input> in the <ul>'s last <li>. AdminLTE's border:0 for it is keyed on
     `.select2-selection__rendered .select2-search--inline`, so only its 1px
     border rule matches: an inner box round the placeholder;
   - the <ul> is now `display: inline`. AdminLTE's horizontal padding on it puts
     an empty 12px box ahead of the search, which then wraps to a second line
     (a 53px field where 4.0 drew 38px);
   - the chip's remove control is an absolutely positioned <button> before a
     `__display` span. AdminLTE's chip padding squeezes the label under it
     ("×Label") and its float:right on the button does nothing.

   This sheet puts back 4.0's rendering: one 38px row, the placeholder level
   with a .form-control's text, blue chips reading "Label ×". It loads straight
   after adminlte.min.css (layouts/_siteStyles.blade.php) and wins on source
   order at equal specificity, so page stylesheets after it still override it.
   Only the default theme is touched; the bootstrap-5 theme is built for 4.1.
   ========================================================================== */

/* The <ul> is inline now, so it would take a centred table cell's alignment;
   4.0's was a full-width block. The bottom padding matches the chips' top
   margin, so a wrapped last row clears the border. */
.select2-container--default .select2-selection--multiple {
    padding: 0 .375rem .31rem;
    text-align: start;
}

/* 4.0 floated the clear-all inside the padded <ul>; 4.1 pins it to the edge. */
.select2-container--default .select2-selection--multiple.select2-selection--clearable {
    padding-right: calc(25px + .375rem);
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-right: calc(10px + .375rem);
}

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

/* Top-aligned, as 4.0's floats were: bottom-aligned chips drop whenever the
   search field is the taller thing on the line. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: .31rem 5px 0 0;
    padding: 0 10px;
    vertical-align: top;
}

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

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: inherit;
    line-height: inherit;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: transparent;
    color: var(--rf-white);
}

/* 4.0's <input> was one line tall in the page's font; 4.1 fixes the
   textarea at 20px in sans-serif and bottom-aligns it. */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 1.5em;
    height: 1lh;
    margin: 6px 0 0;
    border: 0;
    font-family: inherit;
    vertical-align: top;
}

/* An empty field shows its placeholder where a .form-control puts its text.
   Padding, not margin: select2 sizes the field to width:100% inline. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered:empty + .select2-search--inline .select2-search__field {
    padding-left: .375rem;
}

/* .form-control-sm selects: AdminLTE pulled 4.0's <ul> up .1rem and padded it .25rem. */
select.form-control-sm ~ .select2-container--default .select2-selection--multiple {
    padding: 0 .25rem .21rem;
}

select.form-control-sm ~ .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    margin: 0;
    padding: 0;
}

select.form-control-sm ~ .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: .21rem;
}

select.form-control-sm ~ .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: calc(6px - .1rem);
}

select.form-control-sm ~ .select2-container--default .select2-selection--multiple .select2-selection__rendered:empty + .select2-search--inline .select2-search__field {
    padding-left: .25rem;
}