/* Mở rộng cột Groups trên danh sách */
.user-list {
    --cell-width-large: 450px !important; /* Bạn có thể tăng lên 500px, 600px hoặc lớn hơn cho vừa mắt */
}

/* (Tùy chọn) Mở rộng luôn cái khung thả xuống (dropdown) khi bạn bấm vào cây bút để sửa */
.multiselect, 
.multiselect__content-wrapper {
    min-width: 500px !important;
}

/* 1. Cho phép khung chứa Group tự động giãn chiều cao và các tag bẻ dòng */
.user-list .multiselect, 
.user-list .multiselect__tags {
    height: auto !important;
    min-height: 44px !important; /* Giữ chiều cao tối thiểu để không bị móp */
    white-space: normal !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
}

/* 2. Tạo khoảng cách nhẹ trên/dưới cho các tag để khi rớt xuống dòng không bị dính vào nhau */
.user-list .multiselect__tag {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* 3. Phá vỡ giới hạn chiều cao cố định của hàng (row) và ô (cell) đang edit */
.user-list tr.user-list__row, 
.user-list td.row__cell {
    height: auto !important;
    white-space: normal !important;
}

/* 1. Xóa bỏ lệnh cấm bẻ dòng (no-wrap) của Nextcloud và ép khung bẻ dòng */
#body-settings .v-select.select--no-wrap .vs__selected-options,
#body-settings .v-select.vs--multiple .vs__dropdown-toggle {
    flex-wrap: wrap !important;
    overflow: visible !important; /* Tắt thanh cuộn */
    height: auto !important;
    min-height: 40px !important;
}

/* 2. Tinh chỉnh các cục Group (tags) để rớt xuống không bị dính vào nhau */
#body-settings .v-select .vs__selected {
    margin: 4px 4px 4px 0 !important;
    display: inline-flex !important;
    white-space: normal !important; /* Cho phép chữ dài tự xuống dòng nếu cần */
    height: auto !important;
    line-height: 1.5 !important;
}

/* 3. Chỉnh lại ô nhập chữ (Search input) để không làm vỡ khung */
#body-settings .v-select .vs__search {
    width: auto !important;
    min-width: 50px !important;
    flex-grow: 1 !important;
    margin-top: 4px !important;
}

/* 4. Mở khóa chiều cao của hàng trong bảng để hàng phình ra theo Group */
#body-settings table.user-list tr.user-list__row, 
#body-settings table.user-list td.row__cell,
#body-settings table.user-list .row__cell--large {
    height: auto !important;
    min-height: 55px !important;
    white-space: normal !important;
}