/* ============================================================================
   客戶管理 › 批次作業（CLINICOS-V4-CUSTOMER-BATCH-OPS）
   兩頁共用的三欄版面。只有版面：所有控制項一律沿用既有 V4 Design System
   （.cos-card / .cos-btn / .cos-field / .cos-table / .cos-empty / .cos-dialog），
   本檔不定義任何新的色彩，顏色一律取自 design-tokens.css 既有變數。
   ============================================================================ */

/* 六.1 三欄：左右為主要區域，中間操作欄較窄。
   六.2 左右兩欄以 align-items:stretch（grid 預設）等高。 */
.batchops-grid-v1{
  display:grid;
  grid-template-columns:minmax(0,1fr) 168px minmax(0,1fr);
  gap:var(--cos-space-md,16px);
  align-items:stretch;
}
/* height:100% ＋ margin:0 是「左右兩欄等高」的關鍵：.cos-card 帶著既有的
   margin:0 0 24px，grid 的 stretch 拉的是 margin box，兩欄的 border box 因此會差一個 margin
   而看起來不等高。這裡只在批次作業的 grid 內把該 margin 歸零（欄距改由 grid gap 負責），
   並讓卡片明確填滿整列。.cos-card 本體未動，其他頁面的卡片間距不受影響。 */
.batchops-grid-v1 > .cos-card{margin:0}
.batchops-col-v1{display:flex;flex-direction:column;min-width:0;height:100%}
/* .cos-card__body 預設不是 flex，這裡讓清單區成為唯一的彈性/捲動區（六.3）。 */
.batchops-col-body-v1{display:flex;flex-direction:column;gap:var(--cos-space-md,16px);flex:1 1 auto;min-height:0}

.batchops-filters-v1{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--cos-space-sm,12px);
}
.batchops-field-wide-v1{grid-column:1 / -1}
.batchops-required-v1{color:var(--cos-danger,#d92d20);margin-left:2px}

.batchops-actions-v1{display:flex;gap:var(--cos-space-sm,12px);flex-wrap:wrap}
.batchops-actions-end-v1{justify-content:flex-end}

.batchops-listbar-v1{display:flex;align-items:center;gap:var(--cos-space-sm,12px);flex-wrap:wrap}
.batchops-listbar-spacer-v1{flex:1 1 auto}
.batchops-count-v1{font-size:var(--cos-fs-small,13px);font-weight:600;color:var(--cos-text-subtle,#667085)}

/* 六.3 清單過長時只有這個容器捲動，頁面本體不跟著長高。min-height:0 是必要的：
   沒有它，flex 子項的預設 min-height:auto 會讓內容把整欄撐開而不是內部捲動。 */
.batchops-listwrap-v1{
  flex:1 1 auto;min-height:220px;max-height:420px;overflow-y:auto;overflow-x:auto;
  border:1px solid var(--cos-border,#e5e7eb);border-radius:var(--cos-radius-md,12px);
}
.batchops-listwrap-v1 .cos-table{border:0;border-radius:0}
.batchops-listwrap-v1 .cos-table th{position:sticky;top:0;z-index:1}
.batchops-listwrap-v1 .cos-table th,
.batchops-listwrap-v1 .cos-table td{height:auto;padding:8px 12px;font-size:var(--cos-fs-small,13px)}
.batchops-check-col-v1{width:40px;text-align:center}
.batchops-row-tags-v1{display:flex;flex-wrap:wrap;gap:4px}

.batchops-summary-v1{
  font-size:var(--cos-fs-small,13px);color:var(--cos-text-subtle,#667085);
  display:flex;flex-direction:column;gap:4px;
}
.batchops-summary-v1 strong{color:var(--cos-text,#1f2430)}

/* 中欄：垂直置中的操作鍵組，寬度固定較窄。 */
.batchops-move-v1{
  display:flex;flex-direction:column;justify-content:center;gap:var(--cos-space-sm,12px);
  align-self:center;
}
.batchops-move-btn-v1{width:100%;white-space:nowrap}

/* 目標標籤挑選器：沿用 .customer-tag-chip-v3 / .customer-tag-option-v3 的既有外觀，
   這裡只給它一個非絕對定位的容器（客戶基本資料那一套是浮層，欄位內不適用）。 */
.batchops-tagbox-v1{display:flex;flex-wrap:wrap;gap:6px;min-height:38px;align-items:center}
.batchops-tagoptions-v1{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:120px;overflow-y:auto;
  padding:8px;border:1px solid var(--cos-border,#e5e7eb);border-radius:var(--cos-radius-md,12px);
  background:var(--cos-surface-muted,#f7f8fa);
}

/* 確認 Dialog：外觀完全沿用 Design System 的 .cos-dialog / .cos-dialog__backdrop。
   Design System 把 backdrop 定義成 position:absolute（它示範時包在一個定位容器內），
   當成整頁 Modal 用時必須是 fixed 並疊在最上層，因此只覆寫這兩個定位屬性，
   背景色、動畫、內部所有 .cos-dialog__* 樣式一律不動。 */
.batchops-dialog-backdrop-v1{position:fixed;z-index:10050}
.batchops-dialog-list-v1{margin:8px 0 0;padding-left:20px;color:var(--cos-text-subtle,#667085);font-size:var(--cos-fs-small,13px)}
.batchops-dialog-list-v1 li{margin:2px 0}
.batchops-result-v1{display:flex;flex-direction:column;gap:6px;font-size:var(--cos-fs-small,13px)}
.batchops-result-fail-v1{color:var(--cos-danger,#d92d20)}

/* 窄螢幕：三欄改為單欄，中欄的方向鍵改成橫向排列，語意不變。 */
@media(max-width:1279px){
  .batchops-grid-v1{grid-template-columns:minmax(0,1fr)}
  .batchops-move-v1{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .batchops-move-btn-v1{width:auto}
}

/* ==========================================================================================
   CLINICOS-CUSTOMER-BATCH-OPS-UI-UNIFICATION —— 三個批次頁共用的版面收斂。
   三頁都由 createBatchPage(cfg) 產生、共用同一組 class，因此樣式只寫在這裡一份，
   不在各頁複製。沿用既有 --cos-* Token 與 .cos-card / .cos-btn / .cos-empty，
   未新增色票、未使用 gradient／glassmorphism。
   ========================================================================================== */

/* 1) 中欄不再是一條又高又空的長帶：改為貼齊清單頂端的 compact 控制組。
      原本 168px 固定寬 ＋ align-self:center，在長清單時中間會出現大片空白。 */
.batchops-grid-v1{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.batchops-move-v1{
  align-self:start;
  margin-top:96px;                 /* 對齊左右兩欄清單的起始位置，不再垂直置中於整欄 */
  gap:8px;
  min-width:132px;
}
.batchops-move-btn-v1{font-size:var(--cos-fs-small)}

/* 2) Empty State 不再佔用大面積（§F）：改為單行提示，維持 .cos-empty 既有外觀。 */
.batchops-listwrap-v1 .cos-empty{
  padding:var(--cos-space-md,16px) var(--cos-space-sm,12px);
  min-height:0;
}
.batchops-listwrap-v1 .cos-empty__title{margin:0;font-size:var(--cos-fs-body)}
.batchops-listwrap-v1 .cos-empty__description{margin:4px 0 0;font-size:var(--cos-fs-small)}

/* 3) 結果筆數更明顯（§9）：它是使用者判斷「條件對不對」的主要依據。 */
.batchops-count-v1{font-weight:600;color:var(--cos-text)}

/* 4) 清單區給一個合理的最小高度並自行捲動，讓左右兩欄視覺重量接近、
      Primary Action 不必捲到底才看得到（§15）。1366×768 下整頁不需要橫向捲動。 */
.batchops-listwrap-v1{min-height:220px;max-height:min(46vh,420px);overflow-y:auto}

/* 5) 來源頁的「第二層關聯未設定」勾選列：與其它 .cos-field 同一密度。 */
.batchops-checkline-v1{flex-direction:row;align-items:center;gap:8px}
.batchops-checkline-v1 input{width:auto;margin:0}
.batchops-checkline-v1 .cos-field__label{margin:0}

/* ==========================================================================================
   CLINICOS-CUSTOMER-BATCH-OPS-THREE-PAGE-LAYOUT —— 三個批次頁共用的兩段式版面。
   ① 搜尋條件（整寬）→ ② 搜尋結果（~72%）＋ ③ 批次變更設定（~28%）。
   三頁仍是三個獨立 L3 工作頁，只是共用同一份骨架樣式；此處不含任何業務邏輯。
   ========================================================================================== */
.batchops-page-v1{display:flex;flex-direction:column;gap:var(--cos-space-md,16px)}
.batchops-page-v1 > .cos-card,
.batchops-body-v1 > .cos-card{margin:0}

/* ① 搜尋條件：整寬，欄位用 responsive grid，1366 約 4 欄 —— 不再一個欄位佔整排 */
.batchops-filter-card-v1 .batchops-filter-grid-v1{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--cos-space-md,16px);align-items:end;
}
.batchops-filter-card-v1 .batchops-filter-grid-v1 .cos-field{min-width:0}
/* 原本的「佔滿整排」修飾詞在整寬版面下不再需要 */
.batchops-filter-card-v1 .batchops-filter-grid-v1 .batchops-field-wide-v1{grid-column:auto}
.batchops-filter-card-v1 .batchops-actions-v1{margin-top:var(--cos-space-md,16px)}

/* ②＋③ 兩欄：結果區吃主要寬度，設定區固定窄欄 */
.batchops-body-v1{
  display:grid;grid-template-columns:minmax(0,72fr) minmax(300px,28fr);
  gap:var(--cos-space-md,16px);align-items:start;
}
.batchops-result-body-v1{display:flex;flex-direction:column;gap:var(--cos-space-sm,12px)}

/* 小型 Step 標記：不是巨大編號，只是 section title 前的識別 */
.batchops-step-v1{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-right:8px;border-radius:50%;
  background:var(--cos-accent,#1d4ed8);color:#fff;
  font-size:12px;font-weight:700;line-height:1;
}

/* ② 結果表格：吃滿寬度、不橫向捲動；姓名／日期不得直排 */
.batchops-result-card-v1 .batchops-listwrap-v1{
  min-height:0;max-height:min(52vh,520px);overflow-y:auto;overflow-x:hidden;
}
.batchops-result-card-v1 .cos-table{width:100%;table-layout:auto}
/* 表頭不換行；內容儲存格允許換行「但不得在中文詞中間斷開」——
   word-break:keep-all 就是避免「劉／文／傑」被拆成直排的關鍵。
   全部 nowrap 會讓 7 欄的表格撐出橫向捲軸，因此只鎖表頭。 */
.batchops-result-card-v1 .cos-table th{white-space:nowrap}
.batchops-result-card-v1 .cos-table td{word-break:keep-all;overflow-wrap:anywhere}
/* 日期與客戶編號維持單行，避免被拆成兩段不好讀 */
.batchops-result-card-v1 .cos-table td.batchops-nowrap-v1{white-space:nowrap}
/* 姓名／編號／服務人員允許縮但不換行成直排；標籤欄才是唯一可 wrap 的欄 */
.batchops-result-card-v1 .cos-table td .batchops-row-tags-v1{
  display:flex;flex-wrap:wrap;gap:4px;white-space:normal;max-width:260px;
}
.batchops-check-col-v1{width:36px}

/* ③ 批次變更設定：捲搜尋結果時仍看得到已選數量與 Primary */
.batchops-target-card-v1{position:sticky;top:16px}
.batchops-target-body-v1{display:flex;flex-direction:column;gap:var(--cos-space-sm,12px)}
.batchops-target-body-v1 .batchops-filters-v1{display:flex;flex-direction:column;gap:var(--cos-space-md,16px)}
.batchops-selected-v1{
  padding:8px 12px;border-radius:var(--cos-radius-md,8px);
  background:var(--cos-accent-soft,#eff6ff);color:var(--cos-accent,#1d4ed8);
  font-weight:600;font-size:var(--cos-fs-small);
}
/* 兩顆鍵並排而不是上下堆疊：省下約 48px 垂直空間，Primary 仍是視覺重心。 */
.batchops-target-body-v1 .batchops-actions-end-v1{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:flex-end;
}
.batchops-target-body-v1 .batchops-actions-end-v1 .cos-btn--primary{flex:1 1 auto}

/* Responsive：1440/1920 維持兩欄；窄一點時設定欄比例微調；<1100 才上下堆疊 */
@media(max-width:1280px){
  .batchops-filter-card-v1 .batchops-filter-grid-v1{grid-template-columns:repeat(3,minmax(0,1fr))}
  .batchops-body-v1{grid-template-columns:minmax(0,1fr) minmax(260px,32%)}
}
@media(max-width:1100px){
  .batchops-body-v1{grid-template-columns:minmax(0,1fr)}
  .batchops-target-card-v1{position:static}
  .batchops-filter-card-v1 .batchops-filter-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================================
   CLINICOS-CUSTOMER-BATCH-OPS-FINAL-UI-POLISH —— 1366×768 首屏可操作 ＋ Panel 溢位修正。
   全部限縮在 .batchops-* scope，未動 Design System 本體。
   ========================================================================================== */

/* 1) Target 卡片沒有填滿它的 grid track（實測 track 300px、卡片只有 220px），
      因此右欄看起來過窄、select 還撐出 6px 橫向溢位。明確填滿並用 border-box 計寬。 */
.batchops-body-v1 > .batchops-result-card-v1,
.batchops-body-v1 > .batchops-target-card-v1{width:100%;box-sizing:border-box;min-width:0}

/* 2) Target 欄寬：結果區彈性成長，設定區維持穩定操作寬度（大螢幕不再縮成 16%）。 */
.batchops-body-v1{grid-template-columns:minmax(0,1fr) minmax(320px,360px)}

/* 3) Target Panel 不再被拉成整欄高：改為內容高度並貼齊頂端，
      Primary CTA 因此能落在首屏，而不是被推到 y≈850 以下。
      仍保留 sticky（捲動結果時右欄跟著），但加上 viewport 上限與內部捲動，
      避免內容多時反過來遮住畫面。 */
.batchops-body-v1 > .batchops-target-card-v1{
  align-self:start;
  position:sticky;top:16px;
  /* height:auto 是關鍵：卡片原本被算出 height:736px（＝max-height），
     內容其實只有 314px，於是 Primary 被推到 y≈1145。明確交還內容高度後，
     max-height 只在內容真的過長時才生效。 */
  height:auto;
  max-height:calc(100vh - 32px);
  display:flex;flex-direction:column;
}
/* flex:0 1 auto ＋ 不使用 margin-top:auto —— 這兩者原本會把 body 撐滿卡片、
   再把卡片撐到 max-height，反而把 Primary 推得更低（實測 primaryTop 852→1145）。
   改為內容高度，Panel 只有在內容真的超過視窗時才內捲。 */
.batchops-target-body-v1{flex:0 1 auto;min-height:0;overflow-y:auto}
/* Panel 內捲時 Primary 仍固定可見（貼在捲動區底部）。 */
.batchops-target-body-v1 .batchops-actions-end-v1{
  position:sticky;bottom:0;
  padding-top:var(--cos-space-sm,12px);
  background:var(--cos-surface,#fff);
}

/* 4) Panel 內所有控制項不得超出卡片寬度（含 CustomerSourceV1 動態產生的欄位）。 */
.batchops-target-body-v1 select,
.batchops-target-body-v1 input,
.batchops-target-body-v1 button,
.batchops-target-body-v1 .cos-field,
.batchops-target-body-v1 .cos-field__control,
.batchops-target-body-v1 .cust-source-secondary-v1,
.batchops-target-body-v1 .cust-source-secondary-v1 *{
  max-width:100%;box-sizing:border-box;min-width:0;
}

/* 5) ① 搜尋條件稍微收密度，讓 ②③ 整體上移（首屏空間是本輪的主要瓶頸）。
      仍保留可讀間距，不做過度壓縮。 */
.batchops-filter-card-v1 .batchops-filter-grid-v1{gap:var(--cos-space-sm,12px) var(--cos-space-md,16px)}
.batchops-filter-card-v1 .batchops-actions-v1{margin-top:var(--cos-space-sm,12px)}

/* 6) 來源頁：第二層欄位在「全部來源／未設定來源」時是空的 <div>，
      空的 grid cell 會在「客戶來源」與「只顯示第二層關聯未設定」之間留下無意義空欄。
      空容器直接不佔格，讓兩個相關條件視覺相鄰。 */
.batchops-filter-grid-v1 > div:empty{display:none}

/* 7) 結果列密度：標籤欄限制為單列高度，超出的標籤由 JS 收斂成 +N（見 CustomerBatchOpsV1）。
      避免單一客戶的大量標籤把列撐到 80px＋。 */
.batchops-result-card-v1 .batchops-row-tags-v1{
  flex-wrap:nowrap;overflow:hidden;max-width:220px;align-items:center;
}
.batchops-tag-more-v1{
  flex:none;font-size:var(--cos-fs-small);color:var(--cos-text-subtle);white-space:nowrap;
}

/* 8) 首屏空間微調（不做過度壓縮）：
      ① 卡片上下內距與 ③ 的標籤選項清單各收一點，讓 Primary 更接近首屏。 */
/* 註：曾嘗試覆寫 .batchops-filter-card-v1 .cos-card__body 的上下內距，實測反而把
   ① 卡片變高（targetTop 474→506），因此不覆寫，維持 Design System 既有內距。 */
.batchops-target-body-v1 .batchops-tagoptions-v1{max-height:96px}
.batchops-target-body-v1 .batchops-summary-v1{gap:2px}

/* ==========================================================================================
   CLINICOS-CUSTOMER-BATCH-FILTER-AUTO-COLLAPSE —— 搜尋條件收合後的摘要列。
   沿用既有 .cos-card / .cos-btn，未新增 Accordion 元件、未改 Design System。
   ========================================================================================== */
.batchops-filter-card-v1 .cos-card__header{display:flex;align-items:center;gap:var(--cos-space-sm,12px)}
.batchops-filter-toggle-v1{margin-left:auto;flex:none}

/* 展開時不顯示摘要；收合時隱藏完整 Filter，只留單行摘要。 */
.batchops-filter-summary-v1{display:none}
.batchops-filter-card-v1.is-collapsed .cos-card__body{display:none}
.batchops-filter-card-v1.is-collapsed .batchops-filter-summary-v1{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:4px var(--cos-space-md,16px);
  padding:0 var(--cos-space-lg,20px) var(--cos-space-md,16px);
  font-size:var(--cos-fs-small);color:var(--cos-text);
}
.batchops-filter-summary-item-v1{
  min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.batchops-filter-summary-label-v1{color:var(--cos-text-subtle)}