/* Select2 custom styling to match Bootstrap form elements */

/* Match the container to Bootstrap's form-control */
.select2-container--default .select2-selection--single {
    height: 40px !important;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da !important;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* Style the dropdown to match Bootstrap's dropdown styling */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #0d6efd;
}

/* Make the dropdown input match Bootstrap styling */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

/* Fix vertical alignment of the text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-top: 0.1rem;
    color: #212529;
    padding-left: 0%;
}

/* Position the dropdown arrow correctly */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

/* Fix dropdown z-index to ensure it appears above other elements */
.select2-container--open .select2-dropdown {
    z-index: 9999;
}

/* Style for when the dropdown has focus */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #86b7fe !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Style for disabled Select2 fields */
.select2-container--disabled .select2-selection,
.select2-container--disabled .select2-selection--single {
    border: 1px solid transparent !important;
    background-color: var(--ultra-light-blue) !important;
    box-shadow: none !important;
    pointer-events: all !important;
    opacity: 1;
}

/* Ensure the Select2 text color in disabled state matches other disabled inputs */
.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: #161718 !important; /* Bootstrap's text-muted color */
}

/* Remove dropdown arrow from disabled Select2 */
.select2-container--disabled .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

/* Override any hover effects on disabled Select2 */
.select2-container--disabled:hover .select2-selection--single {
    border: 1px solid transparent !important;
    background-color: var(--ultra-light-blue) !important;
}

/* Remove the 'remove all items' icon from Select2 */
.select2-container--default .select2-selection__clear {
    display: none !important;
}

/* Make sure the selection span respects the width */

.select2-results__option:has(.select2-existing-member-badge) {
    cursor: not-allowed !important;
    opacity: 0.6;
}

.select2-existing-member-badge {
    font-size: 0.75rem;
    background-color: #6c757d;
    color: white;
    padding: 2px 8px;
    border-radius: 1rem;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}

/* Style for the option containing the badge */
.select2-results__option .select2-existing-member-badge {
    float: right;
    margin-right: 8px;
}

/* Style for optgroup labels (dimension groups in system_unit) */
.select2-container--default .select2-results__group,
.select2-results__group {
    font-weight: 700 !important;
    color: var(--flexup-dark-blue) !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
}

/* Add some spacing for options within optgroups */
.select2-container--default .select2-results__option[role="group"] .select2-results__option,
.select2-results__option[role="group"] .select2-results__option {
    padding-left: 24px !important;
}

/* Fix positioning for system-unit-select2 in all contexts */
.system-unit-select2 + .select2-container--bootstrap-5 .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.system-unit-select2 + .select2-container--bootstrap-5 .select2-selection__rendered {
    padding-right: 35px !important;  /* Reduced padding since no clear button */
    flex: 1 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.system-unit-select2 + .select2-container--bootstrap-5 .select2-selection__arrow {
    position: absolute !important;
    right: 10px !important;
    margin: 0 !important;
}