/* CLINICOS-V4-CUSTOMER-BASIC-INFORMATION-REPORT-001
 *
 * 報表中心 › 客戶報表 › 客戶基本資料表 的版面。
 * 完全沿用既有報表工具列的做法與設計 token（比照 medical-receipt.css 的 .mr-report-*），
 * 不引入新的顏色、圓角或間距數值，也不改任何既有 class。
 */

.cust-basic-toolbar-v1 {
  display: flex;
  flex-direction: column;
  gap: var(--cos-space-sm);
  padding: var(--cos-space-md);
  margin-bottom: var(--cos-space-md);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-radius-sm);
  background: var(--cos-surface);
}

.cust-basic-row-v1 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cos-space-sm) var(--cos-space-md);
}

.cust-basic-more-v1 {
  display: flex;
  flex-direction: column;
  gap: var(--cos-space-sm);
  padding-top: var(--cos-space-sm);
  border-top: 1px dashed var(--cos-border);
}

.cust-basic-more-v1.hidden { display: none; }

.cust-basic-field-v1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cust-basic-field-v1 > span {
  font-size: var(--cos-fs-small);
  color: var(--cos-text-muted);
}

.cust-basic-field-v1 .cos-field__control {
  width: 168px;
  max-width: 100%;
}

/* 關鍵字欄位吃掉第一列剩下的寬度；窄欄（年齡）只放兩三位數。 */
.cust-basic-field--grow-v1 { flex: 1 1 260px; }
.cust-basic-field--grow-v1 .cos-field__control { width: 100%; }
.cust-basic-field--narrow-v1 .cos-field__control { width: 84px; }

.cust-basic-tags-v1 { height: auto; }

.cust-basic-actions-v1,
.cust-basic-quick-v1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cos-space-xs);
}

.cust-basic-actions-v1 { margin-left: auto; }

.cust-basic-summary-v1 {
  padding: 0 0 var(--cos-space-sm);
  font-size: var(--cos-fs-body);
  color: var(--cos-text-muted);
}

.cust-basic-applied-v1 {
  padding: 0 0 var(--cos-space-sm);
  margin-bottom: var(--cos-space-sm);
  border-bottom: 1px solid var(--cos-border);
  font-size: var(--cos-fs-small);
}

.cust-basic-pager-v1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cos-space-sm);
  padding-top: var(--cos-space-md);
}

/* ---------------------------------------------------------------- 欄位設定（Column Visibility V1）
 * 沿用本報表「更多篩選」的展開／收合外觀（同一組 border/radius/間距 token），
 * 不引入新的 popover 元件。
 */
.cust-basic-colpanel-v1 {
  display: flex;
  flex-direction: column;
  gap: var(--cos-space-sm);
  padding-top: var(--cos-space-sm);
  border-top: 1px dashed var(--cos-border);
  /* 本面板是 .cust-basic-toolbar-v1（column flex）的子項。flex item 預設 min-width:auto
     會被底下 nowrap 的單列內容撐開，導致整頁變寬而不是讓選項列自己捲動 —— 因此必須歸零。 */
  min-width: 0;
}

.cust-basic-colpanel-v1.hidden { display: none; }

/* 標題在左、「恢復預設／關閉」在右，獨立於下方的選項列 ——
   因此按鈕不會跟著欄位選項一起被捲走。 */
.cust-basic-colpanel-head-v1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cos-space-sm);
  min-width: 0;
}

.cust-basic-colpanel-title-v1 {
  font-size: var(--cos-fs-small);
  color: var(--cos-text-muted);
}

.cust-basic-colpanel-actions-v1 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cos-space-xs);
}

/* 15 個選項固定排成【單一橫列】，寬度不足時由這一列自己左右捲動。
   刻意不用 grid／不換行：欄位順序＝報表欄位順序，排成一列時使用者掃一眼就能對應表頭。
   overflow-y:hidden 避免只差一兩個 px 就冒出垂直捲軸。 */
.cust-basic-collist-v1 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--cos-space-md);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* 同上：不歸零 min-width 的話，撐開的是整個頁面而不是這一列 */
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  /* 捲動時上下留一點空間給捲軸，避免蓋住 checkbox */
  padding-bottom: 2px;
}

/* 每個選項自己不縮不換行 —— 收縮會讓「最近來診日」這種長標籤被壓成兩行 */
.cust-basic-col-item-v1 {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: var(--cos-fs-small);
}

/* checkbox 本身也不要被 flex 壓縮 */
.cust-basic-col-item-v1 > input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

/* 固定欄位：checkbox disabled + checked，並以標籤明確標示 */
.cust-basic-col-fixed-v1 {
  flex: 0 0 auto;
  font-style: normal;
  font-size: calc(var(--cos-fs-small) - 1px);
  color: var(--cos-text-muted);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-radius-sm);
  padding: 0 4px;
}

/* ---------------------------------------------------------------- 表格可讀性
 * 欄位設定之後仍要能水平捲動：不強迫所有顯示欄位擠進容器寬度。
 */
.cust-basic-tablewrap-v1 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cust-basic-table-v1 {
  min-width: 720px;
}

/* 短欄位不換行 —— 避免日期被折成每行 4–5 個字元這種極端狀況 */
.cust-basic-table-v1 .cust-basic-col-chart-v1,
.cust-basic-table-v1 .cust-basic-col-name-v1,
.cust-basic-table-v1 .cust-basic-col-gender-v1,
.cust-basic-table-v1 .cust-basic-col-age-v1,
.cust-basic-table-v1 .cust-basic-col-phone-v1,
.cust-basic-table-v1 .cust-basic-col-landlinePhone-v1,
.cust-basic-table-v1 .cust-basic-col-birth-v1,
.cust-basic-table-v1 .cust-basic-col-createdAt-v1,
.cust-basic-table-v1 .cust-basic-col-lastVisitDate-v1 {
  white-space: nowrap;
}

/* 長文字欄位給足最小寬度，顯示時才不會擠成細長條 */
.cust-basic-table-v1 .cust-basic-col-address-v1 { min-width: 180px; }
.cust-basic-table-v1 .cust-basic-col-note-v1 { min-width: 160px; }
.cust-basic-table-v1 .cust-basic-col-tags-v1 { min-width: 110px; }
.cust-basic-table-v1 .cust-basic-col-source-v1,
.cust-basic-table-v1 .cust-basic-col-sourceDetail-v1,
.cust-basic-table-v1 .cust-basic-col-serviceEmployeeName-v1 { min-width: 100px; }