/* Shared form and table-filter selects, in both reading directions. */
:is(.content-wrapper, .modal) :is(select.form-control, select.custom-select) {
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-inline: .82rem 2.4rem !important;
    text-align: start;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
[dir="rtl"] :is(.content-wrapper, .modal) :is(select.form-control, select.custom-select) {
    background-position: 18px 50%, 12px 50%;
}
[dir="ltr"] :is(.content-wrapper, .modal) :is(select.form-control, select.custom-select) {
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
}
:is(.content-wrapper, .modal) select[multiple]:not(.select2-hidden-accessible) {
    height: auto !important;
    min-height: 6rem;
    background-image: none !important;
    padding-inline: .82rem !important;
    white-space: normal;
}
.content-wrapper #toolbar { max-width: 100% !important; }
.content-wrapper #toolbar .form-group.select-field-adaptive {
    flex: 0 1 var(--select-field-width, 15rem) !important;
    width: var(--select-field-width, 15rem) !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
:is(.content-wrapper, .modal) select.select-text-sized:not(.select2-hidden-accessible),
:is(.content-wrapper, .modal) .select2-container.select-text-sized-container {
    width: var(--select-text-width, 10rem) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-grow: 0;
}
.content-wrapper #toolbar .form-group.select-field-adaptive label {
    position: static !important;
    transform: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5 !important;
}
:is(.content-wrapper, .modal) .select2-container {
    min-inline-size: 0;
    max-inline-size: 100%;
}
:is(.content-wrapper, .modal) .select2-container .select2-selection--single {
    height: 2.55rem !important;
    min-height: 2.55rem !important;
    max-height: 2.55rem !important;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
}
:is(.content-wrapper, .modal) .select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-block: .48rem !important;
    padding-inline: .82rem 2.4rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal;
    line-height: 1.5 !important;
    text-align: start;
}
:is(.content-wrapper, .modal) .select2-container .select2-selection--single .select2-selection__arrow {
    inset-inline-start: auto !important;
    inset-inline-end: .45rem !important;
    top: 50% !important;
    transform: translateY(-50%);
}
:is(.content-wrapper, .modal) .select2-container .select2-selection--single .select2-selection__clear {
    position: relative;
    float: inline-end;
    margin-inline: .35rem 0;
}
:is(.content-wrapper, .modal) .select2-container .select2-selection--multiple .select2-selection__choice {
    max-inline-size: calc(100% - .5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.select2-container .select2-dropdown { max-width: calc(100vw - 24px); }
.select2-container .select2-results__option { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
@media (max-width: 575.98px) {
    .content-wrapper #toolbar .form-group.select-field-adaptive {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Keep Select2 arrows and text apart in both reading directions. */
html[dir="rtl"] :is(.content-wrapper, .modal) .select2-container .select2-selection--single .select2-selection__arrow {
    left: .55rem !important;
    right: auto !important;
}
html[dir="ltr"] :is(.content-wrapper, .modal) .select2-container .select2-selection--single .select2-selection__arrow {
    right: .55rem !important;
    left: auto !important;
}
html[dir="rtl"] :is(.content-wrapper, .modal) .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: .82rem !important;
    padding-left: 2.5rem !important;
}
html[dir="ltr"] :is(.content-wrapper, .modal) .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: .82rem !important;
    padding-right: 2.5rem !important;
}
.syllabus-page .section-create-form .form-group > label { display: block; }
.syllabus-page .section-create-form .form-group > .select2-container { width: 100% !important; }
.bulk-student-data-page #create-form .form-group > label:not(.form-check-label) { display: block; }
.bulk-student-data-page #create-form .form-group > .select2-container { width: 100% !important; }
.bulk-staff-page .create-staff-form .form-group > label:not(.form-check-label) { display: block; }
.bulk-staff-page .create-staff-form .form-group > .select2-container { width: 100% !important; }
/* Expense category controls follow the width and label layout of other fields. */
.expense-page #create-form .form-group > label, .expense-page #editModal .form-group > label { display: block; }
.expense-page :is(#create-form, #editModal) select[data-select-full-width],
.expense-page :is(#create-form, #editModal) select[data-select-full-width] + .select2-container { width: 100% !important; max-width: 100%; }
.payroll-page .payroll-month-row { align-items: flex-end; }
.payroll-page .payroll-month-row .form-group > label { display: block; }
.payroll-page .payroll-month-row select[data-select-full-width],
.payroll-page .payroll-month-row select[data-select-full-width] + .select2-container { width: 100% !important; max-width: 100%; }
@media (max-width: 767.98px) { .payroll-page .payroll-month-action .btn { width: 100%; } }
.vehicles-page :is(#create-form, #editModal) .form-group > label { display: block; }
.vehicles-page :is(#create-form, #editModal) select[data-select-full-width],
.vehicles-page :is(#create-form, #editModal) select[data-select-full-width] + .select2-container { width: 100% !important; max-width: 100%; }
/* Keep transport form selectors aligned with their labels and field columns. */
:is(.vehicles-page, .transport-route-page, .route-vehicle-page, .driver-helper-page) form .form-group:has(> select.form-control) > label { display: block; }
:is(.vehicles-page, .transport-route-page, .route-vehicle-page, .driver-helper-page) form .form-group > select.form-control,
:is(.vehicles-page, .transport-route-page, .route-vehicle-page, .driver-helper-page) form .form-group > select.form-control + .select2-container { width: 100% !important; max-width: 100% !important; min-width: 0; }