/* Компонент множественного выбора (dropdown + чекбоксы). */

.multi-select {
    width: 100%;
}

.multi-select-toggle {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Стрелку рисует сам .form-select — каретка .dropdown-toggle не нужна. */
.multi-select-toggle.dropdown-toggle::after {
    display: none;
}

.multi-select-menu {
    min-width: 100%;
    max-height: 20rem;
    overflow-y: auto;
}

.multi-select-menu .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .35rem .75rem;
    cursor: pointer;
}

/* Bootstrap рассчитан на блочную вёрстку .form-check (padding-left: 1.5em),
   куда чекбокс "уезжает" через float:left + margin-left:-1.5em.
   В flex-контейнере флоат игнорируется, а отрицательный маржин
   выталкивает чекбокс за границу меню — сбрасываем. */
.multi-select-menu .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
}

.multi-select-menu .form-check:hover {
    background-color: var(--bs-tertiary-bg);
}

.multi-select-label {
    display: inline-block;
    max-width: calc(100% - 1.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}