/* 全系統統一的找人選單(Tom Select)樣式;色票取自 docs/design-system.md */
.clm-us-dropdown .option { padding: 8px 12px; }
.clm-us-option .clm-us-name { font-size: 14px; font-weight: 600; color: #1A1A2E; }
.clm-us-option .clm-us-name i { color: #7B7B7B; margin-right: 2px; }
.clm-us-option .clm-us-sub { font-size: 13px; color: #1A1A2E; margin-top: 2px; }
.clm-us-muted { color: #7B7B7B; }
.clm-us-badge { display: inline-block; font-size: 12px; line-height: 1; padding: 3px 8px; border-radius: 999px; background: #EBEBEB; color: #555555; margin-left: 4px; vertical-align: middle; }
.ts-dropdown.clm-us-dropdown .option.active, .ts-dropdown.clm-us-dropdown .option:hover { background: #EAECFF; color: #1A1A2E; }
.ts-dropdown.clm-us-dropdown .option.active .clm-us-name, .ts-dropdown.clm-us-dropdown .option.active .clm-us-sub { color: #1A1A2E; }
.ts-dropdown.clm-us-dropdown .option.active .clm-us-muted { color: #7B7B7B; }
.ts-dropdown.clm-us-dropdown .option.active .clm-us-name i { color: #2F3DFF; }
/* 選定後的顯示:姓名是焦點,部門退為次要並截斷,避免長字串把姓名推掉。
   TomSelect 會把 render.item 的最外層元素直接當成 .item 並套 flex row,要改直向才會分成兩行 */
.ts-control .item.clm-us-item { min-width: 0; width: 100%; flex-direction: column; align-items: flex-start; text-align: left; }
.clm-us-item .clm-us-item-name { display: block; align-self: flex-start; font-weight: 600; color: #1A1A2E; }
.clm-us-item .clm-us-item-sub { display: block; align-self: flex-start; font-size: 13px; color: #555555; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }