/*
 * Small compatibility layer for the React re-implementations of the jQuery plugins.
 * Everything visual still comes from the original theme stylesheets.
 */

/* Select2 dropdown rendered with position:fixed (escapes overflow clipping inside modals). */
.select2-container--open .select2-dropdown {
    left: 0;
}

/* React datepicker popup uses fixed positioning; keep the original z-index stacking. */
.datepicker.datepicker-dropdown {
    z-index: 100000;
}

/* jQuery Validation added "error" to invalid inputs; keep the same look on the React forms. */
input.error,
select.error,
textarea.error {
    border-color: #d6000a;
}

/* DataTables processing indicator hidden while the GORD loader owns the screen (gord-loader.js). */
html.gord-loader-initializing .dataTables_processing {
    display: none !important;
}

/*
 * custom.css gives every .select2-container z-index 99999999999999 !important. On the closed select box that makes
 * each box a stacking context above every popup (datepicker, other selects' dropdowns). Only the open dropdown
 * (the nested, unclassed .select2-container) needs to float, so the closed box goes back to normal stacking.
 */
.select2.select2-container {
    z-index: auto !important;
}

/* Multi-selects grow with their chosen items (custom.css fixes every select box at 48px). */
.select2-container--default .select2-selection--multiple {
    height: auto !important;
    min-height: 44px !important;
    padding: 4px 12px 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    list-style: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.4;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 0 40px;
    margin-top: 4px;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 4em;
    margin-top: 0 !important;
    height: 28px;
}