/* ==========================================================================
   ClinicOS V4 — Layout System
   CLINICOS-V4-FOUNDATION-PHASE1

   L3 之下、Component 之上的版面層。負責三件事：
     1) 頁面區域（Page Region）的垂直堆疊順序與間距
     2) 每頁唯一性約束的視覺保險
     3) 全站統一的響應式斷點

   相依：design-tokens.css（必須先載入）→ cos-components.css → 本檔
   政策：不新增 Token；只定義版面，不定義任何視覺原子。

   ⚠ 斷點政策
   V3 現況有 12 個不同斷點（900/760/640/1024/1200/1100/1000/1199/980/1366/
   1280/1180）。V4 一律只用下列 4 個，其中 900px 為唯一「強制」斷點。
   既有模組的舊斷點在該模組遷移時才收斂，本檔不覆寫它們。
   ========================================================================== */


/* ==========================================================================
   1. 斷點常數（僅供文件對照；CSS 無法把 media query 條件變數化）
   --------------------------------------------------------------------------
     xl  >= 1440px   完整版面
     lg  1200-1439   KPI 收為 4 欄
     md  900-1199    分欄改堆疊
     sm  <= 900px    ★ 強制斷點：Header 直排／KPI 降級／Tabs 橫捲／表格進捲動容器
     xs  <= 600px    KPI 單欄
   ========================================================================== */


/* ==========================================================================
   2. Page Region — 頁面垂直堆疊
   --------------------------------------------------------------------------
   .cos-page-shell 已在 cos-components.css 定義為透明容器（border:0;padding:0）。
   這裡只補「子區塊之間的節奏」，讓每個 Page Type 不必各自寫 margin。
   使用 :where() 保持 0 specificity，任何模組特化都能無痛覆寫。
   ========================================================================== */

.cos-page-shell{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* 區塊之間的統一節奏。個別元件自帶的 margin 仍然有效（specificity 較高），
   這裡只處理「元件沒有自帶 margin」的情形，避免區塊黏在一起。 */
.cos-page-shell > :where(*){ flex:0 0 auto; min-width:0; }

/* Content 區（Table Card / Card 群）吃掉剩餘空間，讓 Footer 能貼底。 */
.cos-page-shell > :where(.cos-page-content){ flex:1 1 auto; min-height:0; }


/* ==========================================================================
   3. 區塊順序保險
   --------------------------------------------------------------------------
   Layout System 規定的順序是：
     Breadcrumb → Header → Steps → Toolbar/Filter → KPI → Chart → Content → Footer
   CSS 無法「強制」DOM 順序，但可以用 order 讓錯置的 DOM 仍呈現正確順序，
   作為遷移期間的保險；正確的做法仍是把 DOM 寫對。
   只在明確標記 .cos-page-shell--ordered 時啟用，預設不介入。
   ========================================================================== */

.cos-page-shell--ordered > .cos-breadcrumb        { order:1 }
.cos-page-shell--ordered > .cos-page-header       { order:2 }
.cos-page-shell--ordered > .cos-entity-header     { order:2 }
.cos-page-shell--ordered > .cos-steps             { order:3 }
.cos-page-shell--ordered > .cos-toolbar           { order:4 }
.cos-page-shell--ordered > .cos-kpi-row           { order:5 }
.cos-page-shell--ordered > .cos-page-content      { order:7 }
.cos-page-shell--ordered > .cos-page-footer       { order:8 }


/* ==========================================================================
   4. Page Footer（Sticky）— Workspace / Wizard 專用
   --------------------------------------------------------------------------
   規範：主要提交動作「只能」在這裡，頁面中段不得再出現提交按鈕。
   ========================================================================== */

.cos-page-footer{
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--cos-space-md);
  flex-wrap:wrap;
  padding:var(--cos-space-md) var(--cos-space-lg);
  background:var(--cos-surface);
  border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-md);
  box-shadow:var(--cos-shadow-md);
  margin-top:var(--cos-space-md);
}
.cos-page-footer__status{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);color:var(--cos-text);
}
.cos-page-footer__status-sub{
  font-size:var(--cos-fs-small);font-weight:400;color:var(--cos-text-subtle);
}
.cos-page-footer__actions{
  display:flex;align-items:center;gap:var(--cos-space-sm);flex-wrap:wrap;
}


/* ==========================================================================
   5. Page Content — Content 區的通用容器
   ========================================================================== */

.cos-page-content{
  display:flex;
  flex-direction:column;
  gap:var(--cos-space-md);
  min-width:0;
}

/* 左右分欄（例如今日銷售｜今日耗療）。≤900px 自動堆疊。 */
.cos-page-content--split{
  flex-direction:row;
  align-items:stretch;
}
.cos-page-content--split > *{ flex:1 1 50%; min-width:0; }


/* ==========================================================================
   6. 溢位規則
   --------------------------------------------------------------------------
   L1 頁面本體任何寬度都不得水平溢位
   L2 寬內容必須在自己的 overflow-x:auto 容器內捲動
   L3 位於捲動容器內的元素超出視窗不算溢位
   ========================================================================== */

/* 寬內容的標準捲動容器。表格、圖表、寬 Tab 列一律包在這裡面。 */
.cos-scroll-x{
  overflow-x:auto;
  min-width:0;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}


/* ==========================================================================
   7. 響應式 —— sm（≤900px）唯一強制斷點
   ========================================================================== */

@media(max-width:900px){
  .cos-page-content--split{ flex-direction:column }
  .cos-page-content--split > *{ flex:1 1 auto; width:100% }

  .cos-page-footer{
    flex-direction:column-reverse;
    align-items:stretch;
  }
  .cos-page-footer__actions{ width:100% }
  .cos-page-footer__actions .cos-btn{ flex:1 1 auto }
}

@media(max-width:600px){
  .cos-page-shell{ gap:var(--cos-space-sm) }
  .cos-page-footer{ padding:var(--cos-space-sm) var(--cos-space-md) }
}