/* ==========================================================================
   ClinicOS V4 — Page Type
   CLINICOS-V4-FOUNDATION-PHASE1

   L3 層：6 種頁面骨架，規範 Section 的排列契約。

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

   用法：在 <section class="page"> 上加對應的 Page Type class，例如
         <section id="dashboard" class="page cos-page-shell cos-pt-dashboard">

   ── 型別互斥 ────────────────────────────────────────────────────────
   一頁只能有一個 Page Type。同時符合兩型代表職責過載，應拆頁。
   判定優先序：Wizard > Workspace > Detail > Report > Management > Dashboard
   ────────────────────────────────────────────────────────────────────

   ⚠ 本檔只做兩件事：
     (a) 提供該型別的版面節奏
     (b) 以「開發期可見的紅框警告」標示違反契約的結構
   不做任何顏色、字級、圓角等視覺定義——那是 Component 的職責。
   ========================================================================== */


/* ==========================================================================
   共同：所有 Page Type 的基礎
   ========================================================================== */

[class*="cos-pt-"]{
  display:flex;
  flex-direction:column;
  gap:var(--cos-space-lg);
  min-width:0;
}

@media(max-width:900px){
  [class*="cos-pt-"]{ gap:var(--cos-space-md) }
}


/* ==========================================================================
   1. Dashboard Page
   --------------------------------------------------------------------------
   定義：唯讀的狀態呈現頁，回答「現在怎麼樣？」
   結構：Breadcrumb(2段) → Page Header → KPI(必備 4-6) → Chart(≤2) → Content
   禁止：Footer／Tabs／Steps／Pagination／三段 Breadcrumb
   例外（決策 A1）：允許列級操作與單一區塊編輯，仍禁止整頁提交
   適用：16 頁
   ========================================================================== */

.cos-pt-dashboard > .cos-page-content{ gap:var(--cos-space-md) }

/* 契約檢查（開發期可見）：Dashboard 不得出現這四種元件 */
.cos-pt-dashboard .cos-page-footer,
.cos-pt-dashboard > .cos-tabs,
.cos-pt-dashboard .cos-steps,
.cos-pt-dashboard .cos-pagination{
  outline:2px dashed var(--cos-danger);
  outline-offset:2px;
}


/* ==========================================================================
   2. Workspace Page
   --------------------------------------------------------------------------
   定義：建立或處理一筆單據／作業，頁面存在未提交的暫存狀態
   結構：Breadcrumb(3段) → Page Header → Toolbar(選) → 編號 Work Area(必備)
         → Result(選) → Sticky Footer(必備)
   禁止：KPI／Tabs 作為主要結構／分頁／提交按鈕出現在頁面中段
   適用：25 頁
   ========================================================================== */

.cos-pt-workspace{ padding-bottom:var(--cos-space-sm) }

/* Work Area 的編號卡片彼此貼近，與 Result／Footer 拉開距離 */
.cos-pt-workspace > .cos-section-workarea{ gap:var(--cos-space-md) }

.cos-pt-workspace .cos-kpi-row,
.cos-pt-workspace > .cos-tabs,
.cos-pt-workspace .cos-pagination{
  outline:2px dashed var(--cos-danger);
  outline-offset:2px;
}


/* ==========================================================================
   3. Management Page
   --------------------------------------------------------------------------
   定義：主檔或清單的維護頁，對多筆同型資料做 CRUD／啟停
   結構：Breadcrumb → Page Header(含新增) → Toolbar(必備) → Table Card(必備)
         → Pagination(>50筆必備)；單筆詳情走 Drawer
   禁止：KPI／Sticky Footer／編號卡片／單筆詳情另開 Layer-4 頁面
   適用：52 頁（最大宗）
   ========================================================================== */

.cos-pt-management > .cos-section-list{ flex:1 1 auto; min-height:0 }

.cos-pt-management .cos-kpi-row,
.cos-pt-management .cos-page-footer,
.cos-pt-management .cos-section-workarea{
  outline:2px dashed var(--cos-danger);
  outline-offset:2px;
}


/* ==========================================================================
   4. Detail Page
   --------------------------------------------------------------------------
   定義：單一實體的完整檢視頁，頁面繞著單一 Entity ID 組織
   結構：Breadcrumb(2段) → Entity Header(必備) → Entity Summary KPI(必備)
         → Tabs(必備 3-8) → Tab Content
   禁止：與 cos-page-header 並存／Tab 內嵌 Tab／Sticky Footer
   例外（決策 T3）：允許 Entity 級操作
   適用：3 頁
   ========================================================================== */

.cos-pt-detail > .cos-section-entity{ gap:var(--cos-space-md) }

/* Entity Header 與 Page Header 互斥 */
.cos-pt-detail .cos-page-header,
.cos-pt-detail .cos-page-footer{
  outline:2px dashed var(--cos-danger);
  outline-offset:2px;
}
/* Tab 內再嵌主 Tab 樣式（非 pill）= 隱形 Layer 5，禁止 */
.cos-pt-detail .cos-tabs__panel .cos-tabs:not(.cos-tabs--pill),
.cos-pt-detail .cos-page-content .cos-tabs:not(.cos-tabs--pill){
  outline:2px dashed var(--cos-danger);
  outline-offset:2px;
}


/* ==========================================================================
   5. Report Page
   --------------------------------------------------------------------------
   定義：期間統計輸出頁，有期間條件且可列印／匯出
   結構：Breadcrumb(3段) → Page Header(含列印/匯出) → 期間 Filter(必備)
         → Summary KPI(必備) → Chart(≤2) → 含 tfoot 的表格(必備)
   禁止：無期間條件／無合計列／缺列印或匯出／任何寫入操作／下鑽超過 2 層
   適用：15 頁
   ========================================================================== */

.cos-pt-report > .cos-section-report{ flex:1 1 auto; min-height:0 }

.cos-pt-report .cos-page-footer,
.cos-pt-report > .cos-tabs,
.cos-pt-report .cos-steps{
  outline:2px dashed var(--cos-danger);
  outline-offset:2px;
}


/* ==========================================================================
   6. Wizard Page
   --------------------------------------------------------------------------
   定義：多步驟不可跳躍流程，步驟間有前置依賴
   結構：Breadcrumb(3段) → Page Header(含放棄) → Steps(必備 3-6)
         → 單步內容(一次只顯示一步) → Sticky Footer(必備)
   禁止：步驟間無前置依賴／可點 .is-pending／同時顯示多步／KPI
   與 Workspace 的分界：Workspace 的區塊全部同時可見且可自由填寫
   適用：6 頁
   ========================================================================== */

.cos-pt-wizard > .cos-section-steps{ flex:1 1 auto; min-height:0 }

.cos-pt-wizard .cos-kpi-row,
.cos-pt-wizard > .cos-tabs,
.cos-pt-wizard .cos-pagination{
  outline:2px dashed var(--cos-danger);
  outline-offset:2px;
}


/* ==========================================================================
   契約檢查的開關
   --------------------------------------------------------------------------
   上述紅色虛線只在開發期有用，正式環境不該讓使用者看到。
   在 <html> 或 <body> 加上 .cos-contract-off 即可全部關閉。
   遷移期間建議開啟；模組 Freeze 後可關閉。
   ========================================================================== */

.cos-contract-off [class*="cos-pt-"] *{ outline:none !important }


/* ==========================================================================
   每頁唯一性約束（視覺保險）
   --------------------------------------------------------------------------
   下列元素每頁上限 1 個。CSS 無法計數並報錯，但可以把「第 2 個以後」標紅，
   讓問題在開發期就被看見。
   ========================================================================== */

[class*="cos-pt-"] > .cos-breadcrumb    ~ .cos-breadcrumb,
[class*="cos-pt-"] > .cos-page-header   ~ .cos-page-header,
[class*="cos-pt-"] > .cos-entity-header ~ .cos-entity-header,
[class*="cos-pt-"] > .cos-toolbar       ~ .cos-toolbar,
[class*="cos-pt-"] > .cos-kpi-row       ~ .cos-kpi-row,
[class*="cos-pt-"] > .cos-page-footer   ~ .cos-page-footer,
[class*="cos-pt-"] > .cos-steps         ~ .cos-steps{
  outline:2px dashed var(--cos-danger);
  outline-offset:2px;
}