/* 全系統統一的人員 / 角色 tag 與關卡子列樣式;色票取自 docs/design-system.md */
.clm-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; font-weight: 400; padding: 5px 12px; border: 1px solid transparent; border-radius: 999px; background: #EBEBEB; color: #555555; white-space: normal; min-height: 28px; vertical-align: middle; box-sizing: border-box; font-family: inherit; }
.clm-tag i { font-size: 13px; line-height: 16px; }
.clm-tag--warn { background: #FFF3CD; color: #7A5A00; }
.clm-tag--muted { background: transparent; color: #7B7B7B; border: 1px dashed #CED4DA; }
.clm-tag .fa-user-circle { color: #7B7B7B; font-size: 13px; }
.clm-tag--editable { border-color: #CED4DA; background: #FFFFFF; color: #1A1A2E; cursor: pointer; }
.clm-tag--editable i { font-size: 11px; color: #2F3DFF; }
.clm-tag--editable:hover:not(:disabled) { border-color: #2F3DFF; }
.clm-tag--editable:disabled { color: #7B7B7B; cursor: not-allowed; }
.clm-tag--editable:disabled i { color: #B0B0B0; }
.clm-tag--warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F2822D; flex: 0 0 auto; }
.clm-tag--done { background: #E8F8D4; color: #3A6B0A; }
.clm-tag--done i { color: #3A6B0A; }
.clm-child { margin: 8px 0 0 8px; padding: 6px 0 2px 12px; border-left: 2px solid #DEE2E6; }
.clm-sub { font-size: 13px; color: #555555; overflow-wrap: anywhere; }
.clm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.clm-tag .clm-sep { color: #9A9A9A; margin: 0 2px; }
.clm-tag s { text-decoration-thickness: 1px; }
.clm-tag--selected { border-color: #2F3DFF; background: #EEF0FF; color: #1A1A2E; }
.clm-tag--selected i { color: #2F3DFF; }
.clm-tag--changing { background: #EEF0FF; border-color: #C5CAFF; color: #1A1A2E; }
.clm-tag--changing i { color: #2F3DFF; }
.clm-bundle input { margin-right: 6px; }
.clm-rows { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.clm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }

/* 移轉視窗的字級只有四層,每層差 2px 以上、字重只用 400 / 600(Windows 中文字型沒有 500):
   1 視窗標題 18/600  2 區塊標題 16/600(這件任務的人、一同更換、接手人、誰→誰)
   3 內容 14/400(人 pill、勾選項、下拉、預覽列)  4 說明 13/400 灰(提示、後果、角色、進度、時間)。
   第 3、4 層只差 1px,靠深色 / 灰色分辨;12px 在中文實測太小。任務名稱是「我在改哪一件」的脈絡,放第 2 層。
   說明一律 #555555:#7B7B7B 在白底對比只有 4.2:1,達不到 WCAG AA。
   AdminLTE 對 label 全域套 700(特異性 0,2,1),這裡用 .modal 前綴拉到 0,3,1 只在本視窗內蓋回去,不動全站 */
.clm-label { font-size: 16px; font-weight: 600; color: #1A1A2E; margin-bottom: 0; }
.modal .js-top-detail label.clm-label { font-weight: 600; }
.clm-headline { font-size: 16px; font-weight: 600; color: #1A1A2E; }
.clm-hint { font-size: 13px; font-weight: 400; color: #555555; }
/* 中文字面率高,長句行高比拉丁字多 0.1em 才不擠(Material 語系規範) */
.clm-note { font-size: 13px; font-weight: 400; color: #555555; line-height: 1.7; }
/* 操作前的不可逆後果提醒,強度取中階(淺紅 banner);色票沿用「已失效 / 已拒絕」badge。
   文字不用 $error-red #FF2F3D 是因為它在白底對比僅 3.67:1,未達 WCAG AA 4.5:1 */
.clm-note--lead { display: block; font-size: 14px; line-height: 1.7; color: #B0000B; background: #FFEBEC; border-radius: 8px; padding: 12px 14px; }
.modal .clm-bundle label { display: block; font-size: 14px; font-weight: 400; color: #1A1A2E; margin: 6px 0; }
.modal .clm-bundle label.is-disabled { color: #555555; }
.modal .clm-bundle label .clm-hint { font-weight: 400; }
.clm-tags--lg { gap: 8px; }
/* 選人是第一個決定:同字級但多留白,看起來是按鈕、又不會跟下方唯讀的預覽 pill 搶字級 */
#editTaskOwnerModal .clm-tags--lg .clm-tag { padding: 8px 14px; min-height: 36px; }
.clm-tag--editable { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; }
.clm-tag--editable:hover:not(:disabled) { box-shadow: 0 2px 6px rgba(47, 61, 255, 0.18); transform: translateY(-1px); }
/* 「哪一件任務」放在第一個步驟正上方,做成一張小名片:與預覽框同一種淺灰底,表示這是唯讀的脈絡不是操作;
   編號是識別碼放說明層,名稱 14/600 比說明重、比 16/600 的區塊標題小,緊接區塊標題時不會變成兩行同級標題 */
/* 脈絡卡:與預覽框同一種淺灰底,全視窗只有這兩張卡,都是唯讀。
   警語是「警告」不是「危險」:動作有預覽、事後可再轉,所以用橘色 icon 承擔語意,文字維持中性色,不整段染紅 */
.clm-context-card { background: #F6F8F9; border-radius: 8px; padding: 12px 16px; }
.clm-context-card .clm-note--lead { background: transparent; border-radius: 0; padding: 12px 0 0;
  border-top: 1px solid #DEE2E6; color: #1A1A2E; }
.clm-context-card .clm-note--lead i { color: #F2822D; }
/* 編號一行、名稱一行:任務名稱是自由輸入的長字串,並排時會把名稱擠成窄欄逐字折行 */
.clm-task-id { margin: 0 0 10px; }
.clm-task-id__ssn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555555; }
.clm-task-id__ssn i { color: #7B7B7B; font-size: 14px; }
.clm-task-id .js-top-task-name { display: block; font-size: 14px; font-weight: 600; color: #1A1A2E; margin-top: 4px;
  overflow-wrap: anywhere; }
.clm-task-id .js-top-task-name:empty { display: none; }

#editTaskOwnerModal .modal-title { font-size: 18px; font-weight: 600; color: #1A1A2E; }
#editTaskOwnerModal .clm-headline { display: block; margin-bottom: 8px; }
#editTaskOwnerModal .modal-body { font-size: 14px; }
#editTaskOwnerModal .ts-control,
#editTaskOwnerModal .ts-dropdown { font-size: 14px; }
/* 接手人是這個視窗唯一的必填輸入,給足高度讓它看起來就是該填的地方 */
#editTaskOwnerModal .ts-control { min-height: 52px; padding-top: 8px; padding-bottom: 8px; border-radius: 6px; }
#editTaskOwnerModal .ts-control .item { max-width: calc(100% - 24px); }
/* .clm-tag / .clm-sub 的 base 是全系統共用值,只在本視窗調成內容層 14 與說明層 12 */
#editTaskOwnerModal .clm-tag { font-size: 14px; line-height: 18px; padding: 5px 12px; min-height: 30px; }
#editTaskOwnerModal .clm-tag i { font-size: 14px; line-height: 18px; }
#editTaskOwnerModal .clm-tag--editable i { font-size: 12px; }
#editTaskOwnerModal .clm-row { min-height: 30px; }
#editTaskOwnerModal .clm-sub { font-size: 13px; color: #555555; }
/* 預覽框裡的關卡標題是該框內的小標,比外層區塊標題低一層 */
#editTaskOwnerModal .clm-child > .clm-sub { font-weight: 600; }

/* 分組只靠留白:區塊內 8px、區塊間 24px。差 3 倍才讀得出是不同群組——
   改版前區塊內 7~14px、區塊間 14~21px 幾乎同寬,所以看不出哪些東西是一組。
   容器也只留預覽框一個:框、底色、分隔線同時出現時無法表達主次,反而讓人覺得「好多框」 */
#editTaskOwnerModal .clm-ctx { margin-bottom: 24px; }
#editTaskOwnerModal .clm-ctx .clm-note--lead { margin: 0; }
#editTaskOwnerModal .clm-context-card .clm-note--lead { margin: 0; }
#editTaskOwnerModal .clm-sec { margin-bottom: 24px; }
#editTaskOwnerModal .clm-sec-head { display: block; margin-bottom: 8px; }
#editTaskOwnerModal .clm-tags { margin-top: 0; }
/* 唯讀的結果預覽用凹陷底色表示「這裡不能改」,不再加框 */
#editTaskOwnerModal .clm-panel { background: #F6F8F9; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
/* 會被刪掉 / 被合併的列:整列淡化加刪除線,後果用紅字點出。
   與「換人」的箭頭列必須一眼分得出來——同一個人不能在一關同時是負責人和會辦,
   較輕的那筆會整列消失,使用者按確認前就要看到 */
#editTaskOwnerModal .clm-tag--strike { color: #555555; text-decoration: line-through; text-decoration-thickness: 1px; }
#editTaskOwnerModal .clm-tag--strike i { color: #B0B0B0; }
#editTaskOwnerModal .clm-outcome { font-size: 13px; font-weight: 600; color: #B0000B; }
/* 不是刪除、只是要再做一次的提醒:用警告色與刪除的紅色分開,避免看成那一列會消失 */
#editTaskOwnerModal .clm-outcome--warn { color: #7A5A00; }
/* 電子簽那列的狀態與小按鈕:要處理的(未取回 / 問不到)用警告色文字,與 .clm-tag--warn 同色;按鈕縮到跟列高一致 */
#editTaskOwnerModal .clm-sub--warn { color: #7A5A00; font-weight: 600; }
#editTaskOwnerModal .clm-btn-inline { padding: 2px 10px; font-size: 13px; line-height: 18px; border-radius: 6px; }
#editTaskOwnerModal .js-esign-state .spinner-border { width: 12px; height: 12px; border-width: 2px; margin-right: 4px; vertical-align: -1px; }
#editTaskOwnerModal .clm-note--gate { color: #7A5A00; margin: -16px 0 24px; }
/* 忙碌遮罩:半透明蓋住所屬容器(整窗或預覽框),擋掉連點;[hidden] 由 Bootstrap 的 display:none 收掉 */
#editTaskOwnerModal .modal-content, #editTaskOwnerModal .clm-panel { position: relative; }
#editTaskOwnerModal .clm-busy { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, .75);
  border-radius: 8px; font-size: 14px; color: #1A1A2E; }

/* 報表清單在 lg 以下縫欄內距:七欄表格在 iPad 直向會多出 20~80px 而橫向捲動,把最右邊的操作欄切掉。
   只看螢幕寬度、不看側欄開合:依側欄狀態切換會讓表格在開合側欄時自己跳動 */
@media (max-width: 991.98px) {
  .clm-table-compact { font-size: 13px; }
  .clm-table-compact th, .clm-table-compact td { padding: 8px; }
}
/* 舊款 iPad / mini 直向(768)七欄還差幾 px,左右內距再縫到 sp-1;576 以下是手機堆疊版,不套 */
@media (min-width: 576px) and (max-width: 799.98px) {
  .clm-table-compact th, .clm-table-compact td { padding-left: 4px; padding-right: 4px; }
}