/*
 * Makes Select2 widgets line up with the project's Bootstrap 5 form controls.
 * Paired with static/js/global_select2.js.
 */

/* Match .form-control / .form-select height so mixed rows stay aligned. */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Django renders width on the original select; the widget replaces it. */
.select2-container {
    max-width: 100%;
}

/* Crispy/Bootstrap grids give the field its width - never let Select2 win. */
.form-group .select2-container,
.input-group .select2-container {
    width: 100% !important;
}

/* Carry server-side validation styling onto the visible widget. */
.select2-container--bootstrap-5 .select2-selection.is-invalid,
select.is-invalid + .select2-container--bootstrap-5 .select2-selection {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

/* Inside a table cell (formset rows) the widget must not force the column wide. */
td > .select2-container,
th > .select2-container {
    min-width: 120px;
}

/* Above Bootstrap modals (1055) so dropdowns are not clipped. */
.select2-container--open {
    z-index: 1060;
}