/* ==========================================================================
   ClinicOS V4 — Section Library
   CLINICOS-V4-FOUNDATION-PHASE1

   L2 層：由 Component 組成的可重用區塊。

   為什麼需要這一層？
   V3 遷移實測（每日工作台、客戶中心）發現：Page Type 規範說「Dashboard 需要
   KPI Row」，但每個模組都得自己拼一次 icon+label+value+note 的組合。Section
   把「反覆出現的元件組合」固化，讓 Page 只做選配，不再重複拼裝。

   相依：design-tokens.css → cos-components.css → cos-layout.css → 本檔

   ── Section 契約（違反即不得合併）─────────────────────────────────────
   SC1 Section 只組裝 Component，不得定義新的視覺原子
   SC2 Section 不得包含業務判斷；資料由呼叫端算好傳入
   SC3 Section 必須提供完整的空／載入／錯誤三態
   SC4 Section 之間不得互相引用
   SC5 新增 Section 需核准；先確認能否用現有 Section 的 Modifier 解決
   ────────────────────────────────────────────────────────────────────

   命名：.cos-section-<name>，Element 用 __，Modifier 用 --，狀態用 .is-
   ========================================================================== */


/* ==========================================================================
   S01  cos-section-header — 頁面標頭
   組成：cos-breadcrumb ＋ cos-page-header ＋ Context Actions
   適用：全部 6 種 Page Type
   ========================================================================== */

.cos-section-header{ display:flex; flex-direction:column; min-width:0 }

/* Breadcrumb 與 Page Header 之間刻意不留大間距——兩者是同一個「你在哪裡」單位。
   .cos-breadcrumb 自帶 margin-bottom:20px，這裡收斂為 12px。 */
.cos-section-header > .cos-breadcrumb{ margin-bottom:var(--cos-space-sm) }

/* 密集版面（固定高度 Shell，如客戶中心）用這個 Modifier 把 margin 完全收掉，
   間距交給外層 flex gap。 */
.cos-section-header--dense > .cos-breadcrumb{ margin-bottom:0 }
.cos-section-header--dense > .cos-page-header{ margin-bottom:var(--cos-space-md) }


/* ==========================================================================
   S02  cos-section-entity — Entity 區
   組成：cos-entity-header ＋ Entity Summary(KPI) ＋ Quick Actions
   適用：Detail
   ========================================================================== */

.cos-section-entity{
  display:flex; flex-direction:column; gap:var(--cos-space-md); min-width:0;
}
.cos-section-entity__quick{
  background:var(--cos-surface);
  border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md);
  box-shadow:var(--cos-shadow-sm);
  padding:var(--cos-space-md) var(--cos-space-lg);
}
.cos-section-entity__quick-title{
  margin:0 0 var(--cos-space-sm);
  font-size:var(--cos-fs-label); font-weight:var(--cos-fw-label); color:var(--cos-text);
}
.cos-section-entity__quick-row{
  display:flex; flex-wrap:wrap; gap:var(--cos-space-sm);
}

@media(max-width:900px){
  .cos-section-entity__quick-row .cos-btn{ flex:1 1 auto }
}


/* ==========================================================================
   S03  cos-section-kpi — KPI 摘要
   組成：cos-kpi-row ＋ 4-6 張 cos-kpi
   適用：Dashboard（必備）／Report（必備）／Detail（必備）
   規範：少於 4 個改用 cos-card；多於 6 個必須分組或移至 Report Page
   ========================================================================== */

.cos-section-kpi{ min-width:0 }
/* 未選定對象時關閉 grid，避免單一空狀態被排成一格 KPI 寬度（V3 客戶中心實測問題）。 */
.cos-section-kpi.is-empty > .cos-kpi-row{ display:block }


/* ==========================================================================
   S04  cos-section-filter — 篩選列
   組成：cos-toolbar ＋ cos-field 群 ＋ 快選 chips ＋「更多條件」摺疊
   適用：Management（必備）／Report（必備）
   ========================================================================== */

.cos-section-filter{ min-width:0 }
.cos-section-filter__chips{
  display:flex; flex-wrap:wrap; gap:var(--cos-space-xs);
  align-items:center;
}
.cos-section-filter__chip{
  height:32px; padding:0 12px;
  border-radius:var(--cos-radius-pill);
  border:1px solid var(--cos-border);
  background:var(--cos-surface);
  color:var(--cos-text-subtle);
  font:inherit; font-size:var(--cos-fs-small); font-weight:var(--cos-fw-small);
  cursor:pointer;
  transition:background-color var(--cos-transition-fast), color var(--cos-transition-fast);
}
.cos-section-filter__chip:hover:not(.is-active){ background:var(--cos-surface-muted); color:var(--cos-text) }
.cos-section-filter__chip.is-active{
  background:var(--cos-accent); color:#fff; border-color:var(--cos-accent);
}
/* 「更多條件」摺疊區 */
.cos-section-filter__more{ width:100%; margin-top:var(--cos-space-sm) }
.cos-section-filter__more[hidden]{ display:none }
.cos-section-filter__more-toggle{
  background:transparent; border:0; padding:0;
  color:var(--cos-accent); font:inherit;
  font-size:var(--cos-fs-small); font-weight:var(--cos-fw-small);
  cursor:pointer;
}

@media(max-width:900px){
  .cos-section-filter .cos-toolbar{ padding:var(--cos-space-md) }
  .cos-section-filter .cos-toolbar__filters{ width:100%; gap:var(--cos-space-sm) }
  .cos-section-filter .cos-toolbar__actions{ width:100% }
  .cos-section-filter .cos-toolbar__actions .cos-btn{ flex:1 1 auto }
}


/* ==========================================================================
   S05  cos-section-list — 清單
   組成：cos-table-card ＋ cos-table ＋ cos-empty ＋ cos-pagination
   適用：Management（必備）
   ========================================================================== */

.cos-section-list{ min-width:0 }
/* 表格永遠在自己的捲動容器內（Layout System L2），頁面本體不得因表格而溢位。 */
.cos-section-list__scroll{
  overflow-x:auto; min-width:0; scrollbar-width:thin;
}
.cos-section-list__count{
  font-size:var(--cos-fs-small); font-weight:400; color:var(--cos-text-subtle);
}


/* ==========================================================================
   S06  cos-section-detail-drawer — 單筆詳情
   組成：cos-drawer ＋ cos-tabs ＋ cos-field ＋ Footer
   適用：Management（必備——單筆詳情一律走 Drawer，不另開 Layer-4 頁面）
   ========================================================================== */

.cos-section-detail-drawer{ min-width:0 }
.cos-section-detail-drawer__form{
  display:flex; flex-direction:column; gap:var(--cos-space-md);
}
.cos-section-detail-drawer__form--two{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--cos-space-md);
}
@media(max-width:900px){
  .cos-section-detail-drawer__form--two{ grid-template-columns:1fr }
}


/* ==========================================================================
   S07  cos-section-workarea — 作業區
   組成：編號 cos-card 序列（① ② ③）
   適用：Workspace（必備）
   規範：卡片標題必須含序號；序號是 Workspace 與 Management 的視覺辨識關鍵
   ========================================================================== */

.cos-section-workarea{
  display:flex; flex-direction:column; gap:var(--cos-space-md); min-width:0;
}
.cos-section-workarea__step{ margin-bottom:0 }
.cos-section-workarea__step-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-right:8px;
  border-radius:var(--cos-radius-pill);
  background:var(--cos-accent-soft); color:var(--cos-accent);
  font-size:var(--cos-fs-badge); font-weight:var(--cos-fw-badge);
  flex:0 0 24px;
}


/* ==========================================================================
   S08  cos-section-result — 試算／預覽結果
   適用：Workspace（涉及金額異動時必備）
   規範：必須在提交前呈現，且與提交按鈕在同一視野內
   ========================================================================== */

.cos-section-result{ min-width:0 }
.cos-section-result__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--cos-space-md); padding:8px 0;
  font-size:var(--cos-fs-body);
}
.cos-section-result__row + .cos-section-result__row{
  border-top:1px solid var(--cos-border);
}
.cos-section-result__row--total{
  font-size:var(--cos-fs-card-title); font-weight:var(--cos-fw-card-title);
  border-top:2px solid var(--cos-border-strong);
}
.cos-section-result__label{ color:var(--cos-text-subtle) }
.cos-section-result__value{ color:var(--cos-text); font-variant-numeric:tabular-nums }


/* ==========================================================================
   S09  cos-section-footer — Sticky 動作列
   組成：cos-page-footer ＋ cos-status ＋ 動作群
   適用：Workspace（必備）／Wizard（必備）
   ※ 版面本體定義在 cos-layout.css 的 .cos-page-footer；此處只補語意別名。
   ========================================================================== */

.cos-section-footer{ display:contents }


/* ==========================================================================
   S10  cos-section-steps — 步驟流程
   組成：cos-steps ＋ 單步內容容器
   適用：Wizard（必備）
   規範：一次只顯示一步（這是與 Workspace 的分界）
   ========================================================================== */

.cos-section-steps{
  display:flex; flex-direction:column; gap:var(--cos-space-lg); min-width:0;
}
.cos-section-steps__panel[hidden]{ display:none }


/* ==========================================================================
   S11  cos-section-report — 報表
   組成：期間 Filter ＋ Summary ＋ Chart ＋ tfoot 合計表 ＋ 列印/匯出
   適用：Report（必備）
   規範：期間為必要條件；表格必須有 tfoot 合計列
   ========================================================================== */

.cos-section-report{
  display:flex; flex-direction:column; gap:var(--cos-space-md); min-width:0;
}
.cos-section-report__meta{
  font-size:var(--cos-fs-small); font-weight:400; color:var(--cos-text-subtle);
}
/* 合計列：Report 表格的核心價值，樣式上必須與一般資料列明顯區隔。 */
.cos-section-report .cos-table tfoot td{
  background:var(--cos-surface-muted);
  font-weight:700;
  border-top:2px solid var(--cos-border-strong);
}


/* ==========================================================================
   S12  cos-section-empty-page — 整頁空狀態
   用於：無權限／未啟用／規劃中的整頁狀態
   適用：全部
   ========================================================================== */

.cos-section-empty-page{
  display:flex; align-items:center; justify-content:center;
  min-height:420px;
  background:var(--cos-surface);
  border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md);
  box-shadow:var(--cos-shadow-sm);
}
.cos-section-empty-page > .cos-empty{ min-height:0 }

@media(max-width:900px){
  .cos-section-empty-page{ min-height:320px }
}