/* CommonSelect (custom pill-style) */ .common-select { font-family: inherit; position: relative; /* Base max-width cho các filter compact */ max-width: 320px; width: auto; } .common-select-badge { display: inline-flex; align-items: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 12px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.2); cursor: pointer; gap: 6px; } .common-select-badge:hover { background: rgba(37, 99, 235, 0.12); } /* Đảm bảo tất cả phần tử con trong badge đều pass click lên badge */ .common-select-badge * { pointer-events: none; } .common-select-badge { pointer-events: auto; } .common-select-badge .cs-badge-values { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; } /* Cho phép wrap text (nhiều dòng) chỉ trong task form */ .task-form-container .common-select-badge .cs-badge-values { max-width: none; white-space: normal; } .common-select-dropdown { background: #fff; border: 1px solid #e5e7eb; border-radius: 0; box-shadow: 0 4px 24px rgba(0, 0, 0, .12); } .common-select-option { border-radius: 0 !important; } .common-select-option:hover, .common-select-option.cs-highlighted { background: rgba(0, 0, 0, .06); } /* Pagination per-page selects: - Dropdown is portaled to to avoid being clipped by overflow-hidden cards. - We hide the tag/search/clear input area for this simple 3-option select. */ .cs-pagination-dropdown .cs-input-area { display: none !important; } /* Shell dùng cho các field đa lựa chọn trong form (member-add-task, types, ...) */ .cs-multiselect-shell { display: flex !important; flex-wrap: wrap; align-items: flex-start; width: 100%; min-height: 24px; height: auto !important; border-radius: 4px; } .cs-assignee-display { width: 100%; height: auto !important; min-height: 24px; } .cs-multiselect-shell:hover { background: #ececf0; } .cs-multiselect-shell .common-select { width: 100%; } /* Trong task form: select full-width, không bị giới hạn max-width */ .task-form-container .cs-multiselect-shell .common-select { max-width: none; display: block; } /* Trong task form: buộc common-select container thành block để badge có thể wrap đúng cách (container mặc định là inline-block trong JS, cần override để tránh tràn layout) */ .task-form-container .common-select { display: block !important; width: 100% !important; max-width: none !important; } /* Bỏ giới hạn max-width:120px trên tag label trong task form để tên dài không bị cắt */ .task-form-container .cs-tag-label { max-width: none !important; } /* Trong task form: badge dạng container "mở rộng", cho phép nhiều dòng, không cắt pill */ .task-form-container .common-select-badge { background: transparent; border: none; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; align-items: center; flex-wrap: wrap; height: auto; gap: 4px; } /* ─── Material Symbols icon sizing ─────────────────────────── */ /* Chevron in badge trigger */ .cs-icon-chevron { font-size: 18px; line-height: 1; display: block; opacity: 0.6; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* Clear-all button inside the dropdown search area */ .cs-icon-clear { font-size: 16px; line-height: 1; display: block; opacity: 0.5; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* × button on each selected-value tag chip */ .cs-icon-remove { font-size: 12px; line-height: 1; display: block; opacity: 0.5; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; } /* Checkmark shown next to selected options in the list */ .cs-icon-tick { font-size: 16px; line-height: 1; display: block; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }