/* ==========================================================================
   ClinicOS Shared UI Components — cos-*
   CLINICOS-COMPONENT-LIBRARY-V1

   正式元件樣式表。由 index.html 與 design-system.html 共同載入，
   是 11 個共用元件的唯一定義來源（Single Source of Truth）。

   命名規範：Block .cos-<block> / Element __<element> / Modifier --<modifier>
            / State .is-<state>（由 JS 切換）

   Token 政策：不新增任何 Token。所有數值一律引用 public/design-tokens.css
            既有的 --cos-* 變數。

   相依：public/design-tokens.css（必須先載入）

   注意：本檔只定義 .cos-* 選擇器，不含任何元素選擇器，
        因此加入既有頁面不會影響任何現有樣式。
   ========================================================================== */

/* --- .cos-table 的補充 Modifier ---------------------------------------------
   .cos-table 本體定義在 public/style.css（既有 10 個 Block 之一）。
   本檔載入順序在其後，於此擴充固定佈局變體：欄寬由呼叫端以百分比指定時使用，
   避免內容把欄位撐開。不改動 .cos-table 本體。 */
.cos-table--fixed{table-layout:fixed}

/* --- 共用 Utility：Skeleton（載入骨架，非元件） -----------------------------
   11 個元件的 .is-loading 狀態共用同一個骨架表現，避免每個元件各寫一套。 */
.cos-skeleton{
  display:block;border-radius:var(--cos-radius-sm);
  background:var(--cos-surface-muted);
  border:1px solid var(--cos-border);
  animation:cos-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes cos-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .cos-skeleton{animation:none}
}


/* ==========================================================================
   1. KPI
   ========================================================================== */
.cos-kpi-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--cos-space-md);
  margin:0 0 var(--cos-space-xl);
}
.cos-kpi{
  display:flex;flex-direction:column;gap:var(--cos-space-xs);min-width:0;
  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-lg);
}
.cos-kpi__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin:0 0 var(--cos-space-xs);
  color:var(--cos-text-subtle);
}
.cos-kpi__icon svg{width:20px;height:20px;display:block}
/* Element：icon ＋ label 同一列（CLINICOS-V4-DAILY-DASHBOARD-UIUX-FIX 二）。
   純加法 —— 只有標記上真的包了 .cos-kpi__head 的卡片才會套用；.cos-kpi__icon 與
   .cos-kpi__label 本體完全未改，既有把 icon 直接放在 .cos-kpi 底下（icon 自成一列）
   的其他頁面 KPI 一個都不受影響。垂直置中由 align-items:center 負責，數值與輔助
   說明仍是 .cos-kpi 這層 column flex 的下兩列，卡片不會因此變高。 */
.cos-kpi__head{
  display:flex;align-items:center;gap:var(--cos-space-xs);min-width:0;
}
.cos-kpi__head .cos-kpi__icon{margin:0;flex:0 0 auto}
.cos-kpi__head .cos-kpi__label{min-width:0}
.cos-kpi__label{
  font-size:var(--cos-fs-label);font-weight:var(--cos-fw-label);
  line-height:var(--cos-lh-label);color:var(--cos-text-subtle);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cos-kpi__value{
  display:flex;align-items:baseline;gap:4px;min-width:0;
  font-size:var(--cos-fs-page-title);font-weight:var(--cos-fw-page-title);
  line-height:var(--cos-lh-page-title);color:var(--cos-text);
}
.cos-kpi__unit{
  font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);
  color:var(--cos-text-subtle);
}
.cos-kpi__delta{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);
  color:var(--cos-text-subtle);
}
.cos-kpi__delta--up{color:var(--cos-success)}
.cos-kpi__delta--down{color:var(--cos-danger)}
.cos-kpi__note{
  font-size:var(--cos-fs-small);font-weight:400;
  line-height:var(--cos-lh-small);color:var(--cos-text-muted);
}

/* Modifier：可下鑽 */
.cos-kpi--linked{
  cursor:pointer;
  transition:border-color var(--cos-transition),box-shadow var(--cos-transition);
}
.cos-kpi--linked:hover{
  border-color:var(--cos-accent-soft-border);
  box-shadow:var(--cos-shadow-md);
}
.cos-kpi--linked:focus-visible{outline:2px solid var(--cos-accent);outline-offset:2px}

/* Modifier：資料源不可用（降級，不隱藏整張卡） */
.cos-kpi--placeholder{background:var(--cos-surface-muted);box-shadow:none}
.cos-kpi--placeholder .cos-kpi__value{color:var(--cos-text-muted)}

/* State：Loading */
.cos-kpi.is-loading .cos-kpi__value{min-height:35px}
.cos-kpi.is-loading .cos-kpi__value .cos-skeleton{width:96px;height:28px}
.cos-kpi.is-loading .cos-kpi__note .cos-skeleton{width:120px;height:12px}

/* State：Error */
.cos-kpi.is-error{border-color:var(--cos-danger-border);background:var(--cos-danger-bg)}
.cos-kpi.is-error .cos-kpi__value{color:var(--cos-danger)}
.cos-kpi.is-error .cos-kpi__note{color:var(--cos-danger)}

/* State：Disabled（指標停用／無權限） */
.cos-kpi.is-disabled{opacity:.55;background:var(--cos-surface-muted);box-shadow:none}
.cos-kpi.is-disabled .cos-kpi__value{color:var(--cos-text-muted)}

@media(max-width:900px){
  .cos-kpi-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--cos-space-sm)}
  .cos-kpi{padding:var(--cos-space-md)}
  .cos-kpi__value{font-size:var(--cos-fs-section-title)}
}


/* ==========================================================================
   2. EMPTY STATE
   ========================================================================== */
.cos-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--cos-space-sm);text-align:center;
  min-height:240px;padding:var(--cos-space-xl) var(--cos-space-lg);
}
.cos-empty__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin:0 0 var(--cos-space-xs);
  border-radius:var(--cos-radius-pill);
  background:var(--cos-surface-muted);
  border:1px solid var(--cos-border);
  color:var(--cos-text-muted);
}
.cos-empty__icon svg{width:24px;height:24px;display:block}
.cos-empty__title{
  margin:0;font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);
  line-height:var(--cos-lh-card-title);color:var(--cos-text);
}
.cos-empty__description{
  margin:0;max-width:420px;
  font-size:var(--cos-fs-small);font-weight:400;
  line-height:var(--cos-lh-small);color:var(--cos-text-subtle);
}
.cos-empty__actions{
  display:flex;gap:var(--cos-space-sm);flex-wrap:wrap;justify-content:center;
  margin-top:var(--cos-space-sm);
}

/* Modifier：行內型（表格列、下拉、小容器） */
.cos-empty--inline{
  min-height:0;padding:var(--cos-space-md);
  flex-direction:row;gap:var(--cos-space-xs);
  font-size:var(--cos-fs-small);color:var(--cos-text-muted);
}
.cos-empty--inline .cos-empty__icon{display:none}
.cos-empty--inline .cos-empty__title{
  font-size:var(--cos-fs-small);font-weight:400;color:var(--cos-text-muted);
}

/* Modifier：四種語境（僅語意標記，供 QA 與 JS 對應；視覺差異只在 icon 色） */
.cos-empty--unqueried .cos-empty__icon{color:var(--cos-text-muted)}
.cos-empty--nodata   .cos-empty__icon{color:var(--cos-text-subtle)}
.cos-empty--noaccess .cos-empty__icon{background:var(--cos-warning-bg);border-color:var(--cos-border-strong);color:var(--cos-text)}
.cos-empty--nocreate .cos-empty__icon{background:var(--cos-accent-soft);border-color:var(--cos-accent-soft-border);color:var(--cos-accent)}

/* State：Error（載入失敗，非空狀態，但共用版型） */
.cos-empty.is-error .cos-empty__icon{
  background:var(--cos-danger-bg);border-color:var(--cos-danger-border);color:var(--cos-danger);
}
.cos-empty.is-error .cos-empty__title{color:var(--cos-danger)}

/* State：Loading（載入中一律不顯示空狀態文案） */
.cos-empty.is-loading .cos-empty__title,
.cos-empty.is-loading .cos-empty__description,
.cos-empty.is-loading .cos-empty__actions{display:none}
.cos-empty.is-loading .cos-empty__icon{border-style:dashed;animation:cos-skeleton-pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .cos-empty.is-loading .cos-empty__icon{animation:none}
}

@media(max-width:900px){
  .cos-empty{min-height:200px;padding:var(--cos-space-lg) var(--cos-space-md)}
  .cos-empty__actions{width:100%;flex-direction:column}
  .cos-empty__actions .cos-btn{width:100%}
}


/* ==========================================================================
   3. BADGE
   ========================================================================== */
.cos-badge{
  display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 10px;
  border-radius:var(--cos-radius-sm);
  border:1px solid transparent;
  font-size:var(--cos-fs-badge);font-weight:var(--cos-fw-badge);
  line-height:var(--cos-lh-badge);
  white-space:nowrap;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;
}
.cos-badge__dot{
  flex:0 0 6px;width:6px;height:6px;border-radius:var(--cos-radius-pill);
  background:currentColor;
}
.cos-badge__icon{flex:0 0 14px;width:14px;height:14px}
.cos-badge__icon svg{width:14px;height:14px;display:block}

/* 語意色（封閉集合，共 6 種） */
.cos-badge--neutral{background:var(--cos-surface-muted);color:var(--cos-text-subtle);border-color:var(--cos-border)}
.cos-badge--accent {background:var(--cos-accent-soft);color:var(--cos-accent);border-color:var(--cos-accent-soft-border)}
.cos-badge--success{background:var(--cos-success-bg);color:var(--cos-success);border-color:var(--cos-success-border)}
.cos-badge--warning{background:var(--cos-warning-bg);color:var(--cos-text);border-color:var(--cos-border-strong)}
.cos-badge--danger {background:var(--cos-danger-bg);color:var(--cos-danger);border-color:var(--cos-danger-border)}
.cos-badge--outline{background:transparent;color:var(--cos-text-subtle);border-color:var(--cos-border-strong)}

/* Modifier：純數字計數 */
.cos-badge--count{
  min-width:22px;height:22px;padding:0 7px;
  border-radius:var(--cos-radius-pill);
  justify-content:center;
}

/* State：Loading */
.cos-badge.is-loading{border-color:transparent;background:transparent;padding:0;width:64px}
.cos-badge.is-loading .cos-skeleton{width:64px;height:26px;border-radius:var(--cos-radius-sm)}

/* State：Disabled */
.cos-badge.is-disabled{opacity:.45}

/* State：Error（標籤資料讀取失敗） */
.cos-badge.is-error{background:var(--cos-danger-bg);color:var(--cos-danger);border-color:var(--cos-danger-border)}

@media(max-width:900px){
  .cos-badge{max-width:120px}
}


/* ==========================================================================
   4. STATUS
   ========================================================================== */
.cos-status{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;
  border-radius:var(--cos-radius-pill);
  border:1px solid transparent;
  font-size:var(--cos-fs-badge);font-weight:var(--cos-fw-badge);
  line-height:var(--cos-lh-badge);white-space:nowrap;
}
.cos-status__dot{
  flex:0 0 8px;width:8px;height:8px;border-radius:var(--cos-radius-pill);
  background:currentColor;
}
.cos-status__time{
  font-size:var(--cos-fs-small);font-weight:400;
  color:var(--cos-text-muted);margin-left:2px;
}

/* 狀態語意（封閉集合，共 6 種） */
.cos-status--draft  {background:var(--cos-surface-muted);color:var(--cos-text-subtle);border-color:var(--cos-border)}
.cos-status--pending{background:var(--cos-warning-bg);color:var(--cos-text);border-color:var(--cos-border-strong)}
.cos-status--active {background:var(--cos-accent-soft);color:var(--cos-accent);border-color:var(--cos-accent-soft-border)}
.cos-status--done   {background:var(--cos-success-bg);color:var(--cos-success);border-color:var(--cos-success-border)}
.cos-status--failed {background:var(--cos-danger-bg);color:var(--cos-danger);border-color:var(--cos-danger-border)}
.cos-status--locked {background:var(--cos-surface-muted);color:var(--cos-text-muted);border-color:var(--cos-border-strong)}

/* Modifier：行內型（Workspace Footer 用，無外框） */
.cos-status--inline{
  height:auto;padding:0;background:transparent;border-color:transparent;
  font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);
}

/* State：Loading */
.cos-status.is-loading{background:transparent;border-color:transparent;padding:0;width:88px}
.cos-status.is-loading .cos-skeleton{width:88px;height:28px;border-radius:var(--cos-radius-pill)}

/* State：Disabled（該列已鎖定，所有動作同步停用） */
.cos-status.is-disabled{opacity:.5}

/* State：Error */
.cos-status.is-error{background:var(--cos-danger-bg);color:var(--cos-danger);border-color:var(--cos-danger-border)}


/* ==========================================================================
   5. PAGINATION
   ========================================================================== */
.cos-pagination{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--cos-space-md);
  padding-top:var(--cos-space-md);margin-top:var(--cos-space-md);
  border-top:1px solid var(--cos-border);
}
.cos-pagination__info{
  font-size:var(--cos-fs-small);font-weight:400;color:var(--cos-text-subtle);
}
.cos-pagination__size{display:flex;align-items:center;gap:var(--cos-space-sm)}
.cos-pagination__size .cos-field__control{
  height:36px;min-width:120px;font-size:var(--cos-fs-small);
}
.cos-pagination__size-label{
  font-size:var(--cos-fs-small);font-weight:400;color:var(--cos-text-subtle);
}
.cos-pagination__nav{display:flex;align-items:center;gap:4px}
.cos-pagination__pages{display:flex;align-items:center;gap:4px}
.cos-pagination__page{
  min-width:32px;height:32px;padding:0 8px;
  border-radius:var(--cos-radius-sm);
  border:1px solid transparent;background:transparent;
  color:var(--cos-text-subtle);
  font:inherit;font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color var(--cos-transition-fast),color var(--cos-transition-fast);
}
.cos-pagination__page:hover:not(:disabled):not(.is-active){
  background:var(--cos-surface-muted);color:var(--cos-text);
}
.cos-pagination__page.is-active{
  background:var(--cos-accent);color:#fff;border-color:var(--cos-accent);cursor:default;
}
.cos-pagination__page:disabled{color:var(--cos-text-muted);cursor:default}
.cos-pagination__ellipsis{
  min-width:24px;text-align:center;color:var(--cos-text-muted);
  font-size:var(--cos-fs-small);user-select:none;
}

/* State：Loading */
.cos-pagination.is-loading .cos-pagination__info .cos-skeleton{width:140px;height:14px}
.cos-pagination.is-loading .cos-pagination__nav{opacity:.4;pointer-events:none}

/* State：Disabled（總筆數為 0 或僅一頁時，整組停用） */
.cos-pagination.is-disabled{opacity:.5;pointer-events:none}

/* State：Error（總筆數取得失敗） */
.cos-pagination.is-error .cos-pagination__info{color:var(--cos-danger)}

@media(max-width:900px){
  .cos-pagination{flex-direction:column;align-items:stretch;gap:var(--cos-space-sm)}
  .cos-pagination__nav{justify-content:center}
  .cos-pagination__size{justify-content:space-between}
  .cos-pagination__pages{display:none}   /* 窄螢幕只保留上一頁／下一頁 */
}


/* ==========================================================================
   6. TABS
   ========================================================================== */
.cos-tabs{
  display:flex;align-items:stretch;gap:var(--cos-space-xs);
  border-bottom:1px solid var(--cos-border);
  margin:0 0 var(--cos-space-lg);
  /* Tab 列是固定高度的頁面 chrome，不是可伸縮的填充物。當 .cos-tabs 本身是某個
     flex column（例如 Detail Page 的主面板）的 flex item 時，預設的 flex-shrink:1
     會在高度吃緊時把整條 Tab 列壓扁到近乎 0px，項目仍在 DOM 卻看不見。 */
  flex:0 0 auto;
}
.cos-tabs__item{
  display:inline-flex;align-items:center;gap:var(--cos-space-sm);
  padding:0 var(--cos-space-md);height:44px;
  border:0;border-bottom:2px solid transparent;
  background:transparent;color:var(--cos-text-subtle);
  font:inherit;font-size:var(--cos-fs-label);font-weight:var(--cos-fw-label);
  cursor:pointer;white-space:nowrap;
  transition:color var(--cos-transition-fast),border-color var(--cos-transition-fast);
}
.cos-tabs__item:hover:not(:disabled):not(.is-active){
  color:var(--cos-text);border-bottom-color:var(--cos-border-strong);
}
.cos-tabs__item.is-active{
  color:var(--cos-accent);border-bottom-color:var(--cos-accent);
}
.cos-tabs__item:disabled{color:var(--cos-text-muted);cursor:not-allowed}
.cos-tabs__item:focus-visible{outline:2px solid var(--cos-accent);outline-offset:-2px}
.cos-tabs__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cos-tabs__panel{min-width:0}
.cos-tabs__panel[hidden]{display:none}

/* Modifier：膠囊型（次級切換） */
.cos-tabs--pill{border-bottom:0;gap:var(--cos-space-sm)}
.cos-tabs--pill .cos-tabs__item{
  height:36px;border:1px solid var(--cos-border);
  border-radius:var(--cos-radius-pill);
  font-size:var(--cos-fs-small);
}
.cos-tabs--pill .cos-tabs__item.is-active{
  background:var(--cos-accent);color:#fff;border-color:var(--cos-accent);
}

/* Modifier：可橫向捲動（窄螢幕，不換行） */
.cos-tabs--scroll{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.cos-tabs--scroll .cos-tabs__item{flex:0 0 auto}

/* State：Loading */
.cos-tabs.is-loading .cos-tabs__item{pointer-events:none}
.cos-tabs.is-loading .cos-tabs__label .cos-skeleton{width:56px;height:14px}

/* State：Error（某個 Tab 的內容載入失敗） */
.cos-tabs__item.is-error{color:var(--cos-danger)}
.cos-tabs__item.is-error.is-active{border-bottom-color:var(--cos-danger)}

@media(max-width:900px){
  .cos-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  .cos-tabs__item{flex:0 0 auto;padding:0 var(--cos-space-sm)}
}


/* ==========================================================================
   7. ENTITY HEADER
   ========================================================================== */
.cos-entity-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--cos-space-lg);flex-wrap:wrap;
  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-lg);
  margin:0 0 var(--cos-space-md);
}
.cos-entity-header__identity{
  display:flex;align-items:flex-start;gap:var(--cos-space-md);min-width:0;
}
.cos-entity-header__avatar{
  flex:0 0 56px;width:56px;height:56px;
  border-radius:var(--cos-radius-pill);
  background:var(--cos-accent-soft);
  border:1px solid var(--cos-accent-soft-border);
  color:var(--cos-accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--cos-fs-section-title);font-weight:var(--cos-fw-section-title);
}
.cos-entity-header__name-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.cos-entity-header__name-row{display:flex;align-items:center;gap:var(--cos-space-sm);flex-wrap:wrap}
.cos-entity-header__name{
  margin:0;font-size:var(--cos-fs-page-title);font-weight:var(--cos-fw-page-title);
  line-height:var(--cos-lh-page-title);color:var(--cos-text);
}
.cos-entity-header__code{
  font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);
  color:var(--cos-text-muted);
}
.cos-entity-header__badges{display:flex;gap:6px;flex-wrap:wrap}
.cos-entity-header__meta{
  display:flex;flex-wrap:wrap;gap:var(--cos-space-md) var(--cos-space-xl);
  padding-top:var(--cos-space-xs);
}
.cos-entity-header__meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.cos-entity-header__meta-label{
  font-size:var(--cos-fs-small);font-weight:400;color:var(--cos-text-muted);
}
.cos-entity-header__meta-value{
  font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);color:var(--cos-text);
}
.cos-entity-header__actions{
  display:flex;align-items:center;gap:var(--cos-space-sm);flex-wrap:wrap;flex:none;
}
.cos-entity-header__switch{flex:none}

/* Modifier：未選定 Entity */
.cos-entity-header--empty{
  justify-content:center;background:var(--cos-surface-muted);box-shadow:none;
  border-style:dashed;
}

/* State：捲動時收合（__meta 隱藏，__actions 保留） */
.cos-entity-header.is-condensed{padding:var(--cos-space-md) var(--cos-space-lg)}
.cos-entity-header.is-condensed .cos-entity-header__meta,
.cos-entity-header.is-condensed .cos-entity-header__avatar{display:none}
.cos-entity-header.is-condensed .cos-entity-header__name{font-size:var(--cos-fs-card-title)}

/* State：Loading */
.cos-entity-header.is-loading .cos-entity-header__name .cos-skeleton{width:160px;height:28px}
.cos-entity-header.is-loading .cos-entity-header__code .cos-skeleton{width:90px;height:14px}
.cos-entity-header.is-loading .cos-entity-header__meta-value .cos-skeleton{width:80px;height:16px}
.cos-entity-header.is-loading .cos-entity-header__actions{opacity:.4;pointer-events:none}

/* State：Error（Entity 讀取失敗） */
.cos-entity-header.is-error{border-color:var(--cos-danger-border);background:var(--cos-danger-bg)}
.cos-entity-header.is-error .cos-entity-header__avatar{
  background:var(--cos-surface);border-color:var(--cos-danger-border);color:var(--cos-danger);
}

/* State：Disabled（Entity 已停用／封存，唯讀） */
.cos-entity-header.is-disabled .cos-entity-header__actions{opacity:.45;pointer-events:none}

@media(max-width:900px){
  .cos-entity-header{flex-direction:column;align-items:stretch;padding:var(--cos-space-md)}
  .cos-entity-header__name{font-size:var(--cos-fs-section-title)}
  .cos-entity-header__meta{gap:var(--cos-space-sm) var(--cos-space-lg)}
  .cos-entity-header__actions{width:100%}
  .cos-entity-header__actions .cos-btn{flex:1 1 auto}
}


/* ==========================================================================
   8. DRAWER
   ========================================================================== */
.cos-drawer__backdrop{
  position:absolute;inset:0;
  background:rgba(16,24,40,.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--cos-transition);
}
.cos-drawer__backdrop.is-open{opacity:1;pointer-events:auto}

.cos-drawer{
  position:absolute;top:0;right:0;bottom:0;
  width:640px;max-width:100%;
  display:flex;flex-direction:column;
  background:var(--cos-surface);
  border-left:1px solid var(--cos-border);
  box-shadow:var(--cos-shadow-lift);
  transform:translateX(100%);
  transition:transform var(--cos-transition);
  pointer-events:none;
}
.cos-drawer.is-open{transform:translateX(0);pointer-events:auto}

/* 寬度（封閉集合，共 4 級）

   --full 於 W2（報表中心）新增，依 Architecture Freeze §3 五項條件核准（裁決點 R8）：
     1. 實作證據：報表中心的 Drill Down（產品銷售分析／交易明細／耗療明細／來源明細）
        表格為 8–11 欄，實測在 1440px 視窗需要 1224px 才不擠壓。
     2. 為何現有集合無法解決：sm 480／md 640／lg 840 三級最大者仍比需求少 46%，
        任何 Modifier 組合都無法在不橫向捲動的前提下容納 11 欄。
     3. 對已完成模組的影響：每日工作台與客戶中心皆未使用 Drawer，零影響。
     4. 已取得專案負責人核准（R8）。
     5. 本註解即為變更理由紀錄。
   語意：--full 專用於「資料表下鑽」，不得用於表單或確認類 Drawer。 */
.cos-drawer--sm{width:480px}
.cos-drawer--md{width:640px}
.cos-drawer--lg{width:840px}
.cos-drawer--full{width:min(1400px,85vw)}
@media(max-width:900px){
  .cos-drawer--full{width:92vw}
  .cos-drawer--sm{width:min(480px,92vw)}
}

.cos-drawer__header{
  display:flex;align-items:flex-start;gap:var(--cos-space-sm);
  padding:var(--cos-space-lg);
  border-bottom:1px solid var(--cos-border);
  flex:none;
}
.cos-drawer__heading{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.cos-drawer__title{
  margin:0;font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);
  line-height:var(--cos-lh-card-title);color:var(--cos-text);
}
.cos-drawer__subtitle{
  margin:0;font-size:var(--cos-fs-small);font-weight:400;color:var(--cos-text-subtle);
}
.cos-drawer__pin,.cos-drawer__close{flex:none}
.cos-drawer__pin.is-active{background:var(--cos-accent-soft);color:var(--cos-accent)}
.cos-drawer__tabs{padding:0 var(--cos-space-lg);flex:none}
.cos-drawer__tabs .cos-tabs{margin-bottom:0}
.cos-drawer__body{
  flex:1;min-height:0;overflow-y:auto;
  padding:var(--cos-space-lg);
}
.cos-drawer__footer{
  display:flex;align-items:center;justify-content:flex-end;
  gap:var(--cos-space-sm);flex-wrap:wrap;
  padding:var(--cos-space-md) var(--cos-space-lg);
  border-top:1px solid var(--cos-border);
  background:var(--cos-surface);
  flex:none;
}

/* State：Loading（內容載入中） */
.cos-drawer.is-loading .cos-drawer__body>*{display:none}
.cos-drawer.is-loading .cos-drawer__body::before{
  content:"";display:block;height:16px;margin:0 0 var(--cos-space-md);
  border-radius:var(--cos-radius-sm);
  background:var(--cos-surface-muted);border:1px solid var(--cos-border);
  animation:cos-skeleton-pulse 1.4s ease-in-out infinite;
}
.cos-drawer.is-loading .cos-drawer__body::after{
  content:"";display:block;height:120px;
  border-radius:var(--cos-radius-sm);
  background:var(--cos-surface-muted);border:1px solid var(--cos-border);
  animation:cos-skeleton-pulse 1.4s ease-in-out infinite;
}
.cos-drawer.is-loading .cos-drawer__footer{opacity:.4;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .cos-drawer.is-loading .cos-drawer__body::before,
  .cos-drawer.is-loading .cos-drawer__body::after{animation:none}
}

/* State：Error */
.cos-drawer.is-error .cos-drawer__header{
  background:var(--cos-danger-bg);border-bottom-color:var(--cos-danger-border);
}
.cos-drawer.is-error .cos-drawer__title{color:var(--cos-danger)}

/* State：Disabled（唯讀模式） */
.cos-drawer.is-disabled .cos-drawer__body{opacity:.6;pointer-events:none}
.cos-drawer.is-disabled .cos-drawer__footer .cos-btn--primary{display:none}

/* 第 2 層（上限）：寬度窄一級，backdrop 加深 */
.cos-drawer--layer2{box-shadow:var(--cos-shadow-lift)}
.cos-drawer__backdrop--layer2{background:rgba(16,24,40,.6)}

@media(max-width:900px){
  .cos-drawer,.cos-drawer--sm,.cos-drawer--md,.cos-drawer--lg{width:100%}
  .cos-drawer__footer{flex-direction:column-reverse;align-items:stretch}
  .cos-drawer__footer .cos-btn{width:100%}
}


/* ==========================================================================
   9. DIALOG
   ========================================================================== */
.cos-dialog__backdrop{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--cos-space-lg);
  background:rgba(16,24,40,.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--cos-transition-fast);
}
.cos-dialog__backdrop.is-open{opacity:1;pointer-events:auto}

.cos-dialog{
  width:640px;max-width:100%;max-height:100%;
  display:flex;flex-direction:column;
  background:var(--cos-surface);
  border-radius:var(--cos-radius-lg);
  box-shadow:var(--cos-shadow-lift);
  transform:scale(.97);
  transition:transform var(--cos-transition-fast);
}
.cos-dialog__backdrop.is-open .cos-dialog{transform:scale(1)}

/* 寬度（封閉集合，共 3 種） */
.cos-dialog--confirm{width:400px}
.cos-dialog--form{width:640px}
.cos-dialog--wide{width:840px}

.cos-dialog__header{
  display:flex;align-items:flex-start;gap:var(--cos-space-sm);
  padding:var(--cos-space-lg) var(--cos-space-lg) 0;
  flex:none;
}
.cos-dialog__title{
  margin:0;flex:1;min-width:0;
  font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);
  line-height:var(--cos-lh-card-title);color:var(--cos-text);
}
.cos-dialog__close{flex:none}
.cos-dialog__body{
  flex:1;min-height:0;overflow-y:auto;
  padding:var(--cos-space-md) var(--cos-space-lg);
}
.cos-dialog__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0 0 var(--cos-space-md);
  border-radius:var(--cos-radius-pill);
  background:var(--cos-warning-bg);
  border:1px solid var(--cos-border-strong);
  color:var(--cos-text);
}
.cos-dialog__icon svg{width:22px;height:22px;display:block}
.cos-dialog__icon--danger{
  background:var(--cos-danger-bg);border-color:var(--cos-danger-border);color:var(--cos-danger);
}
.cos-dialog__message{
  margin:0 0 var(--cos-space-sm);
  font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);
  line-height:var(--cos-lh-body);color:var(--cos-text);
}
.cos-dialog__detail{
  margin:0;font-size:var(--cos-fs-small);font-weight:400;
  line-height:var(--cos-lh-small);color:var(--cos-text-subtle);
}
.cos-dialog__footer{
  display:flex;align-items:center;justify-content:flex-end;
  gap:var(--cos-space-sm);flex-wrap:wrap;
  padding:var(--cos-space-md) var(--cos-space-lg) var(--cos-space-lg);
  flex:none;
}

/* State：Loading（確認執行中，不可關閉） */
.cos-dialog.is-loading .cos-dialog__close{display:none}
.cos-dialog.is-loading .cos-dialog__footer .cos-btn{pointer-events:none}
.cos-dialog.is-loading .cos-dialog__footer .cos-btn--primary,
.cos-dialog.is-loading .cos-dialog__footer .cos-btn--danger{opacity:.7}

/* State：Error（執行失敗，Dialog 保持開啟並顯示原因） */
.cos-dialog.is-error .cos-dialog__icon{
  background:var(--cos-danger-bg);border-color:var(--cos-danger-border);color:var(--cos-danger);
}
.cos-dialog.is-error .cos-dialog__detail{color:var(--cos-danger)}

/* State：Disabled（高風險確認：需輸入指定文字才啟用） */
.cos-dialog.is-disabled .cos-dialog__footer .cos-btn--danger{
  background:#f8fafc;color:#94a3b8;border-color:#e2e8f0;pointer-events:none;
}

@media(max-width:900px){
  .cos-dialog,.cos-dialog--confirm,.cos-dialog--form,.cos-dialog--wide{width:100%}
  .cos-dialog__footer{flex-direction:column-reverse;align-items:stretch}
  .cos-dialog__footer .cos-btn{width:100%}
}


/* ==========================================================================
   10. STEPS
   ========================================================================== */
.cos-steps{
  display:flex;align-items:flex-start;
  margin:0 0 var(--cos-space-xl);
}
.cos-steps__item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex:1 1 0;min-width:0;position:relative;
  padding:0 var(--cos-space-xs);
  background:transparent;border:0;font:inherit;
  color:var(--cos-text-muted);text-align:center;
  cursor:default;
}
.cos-steps__marker{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--cos-radius-pill);
  border:2px solid var(--cos-border-strong);
  background:var(--cos-surface);
  color:var(--cos-text-muted);
  font-size:var(--cos-fs-small);font-weight:700;
  transition:background-color var(--cos-transition),border-color var(--cos-transition);
}
.cos-steps__label{
  font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);
  line-height:var(--cos-lh-small);color:inherit;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.cos-steps__hint{
  font-size:12px;font-weight:400;color:var(--cos-text-muted);
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.cos-steps__connector{
  position:absolute;top:15px;left:calc(50% + 22px);right:calc(-50% + 22px);
  height:2px;background:var(--cos-border);
}
.cos-steps__item:last-child .cos-steps__connector{display:none}

/* States */
.cos-steps__item.is-done{color:var(--cos-text);cursor:pointer}
.cos-steps__item.is-done .cos-steps__marker{
  background:var(--cos-success-bg);border-color:var(--cos-success);color:var(--cos-success);
}
.cos-steps__item.is-done .cos-steps__connector{background:var(--cos-success)}

.cos-steps__item.is-active{color:var(--cos-text)}
.cos-steps__item.is-active .cos-steps__marker{
  background:var(--cos-accent);border-color:var(--cos-accent);color:#fff;
}

.cos-steps__item.is-pending{color:var(--cos-text-muted);cursor:not-allowed}

.cos-steps__item.is-error{color:var(--cos-danger);cursor:pointer}
.cos-steps__item.is-error .cos-steps__marker{
  background:var(--cos-danger-bg);border-color:var(--cos-danger);color:var(--cos-danger);
}

.cos-steps__item:focus-visible{outline:2px solid var(--cos-accent);outline-offset:2px;border-radius:var(--cos-radius-sm)}

/* Modifier：垂直（窄螢幕） */
.cos-steps--vertical{flex-direction:column;align-items:stretch;gap:var(--cos-space-md)}
.cos-steps--vertical .cos-steps__item{
  flex-direction:row;align-items:center;gap:var(--cos-space-sm);text-align:left;
}
.cos-steps--vertical .cos-steps__connector{display:none}
.cos-steps--vertical .cos-steps__label{max-width:none}

/* Modifier：僅序號（Workspace 卡片編號用，不帶順序約束語意） */
.cos-steps--compact{gap:var(--cos-space-sm);margin-bottom:var(--cos-space-md)}
.cos-steps--compact .cos-steps__item{flex:0 0 auto}
.cos-steps--compact .cos-steps__label,
.cos-steps--compact .cos-steps__hint,
.cos-steps--compact .cos-steps__connector{display:none}
.cos-steps--compact .cos-steps__marker{width:26px;height:26px;font-size:12px}

/* State：Loading */
.cos-steps.is-loading .cos-steps__marker{
  background:var(--cos-surface-muted);border-color:var(--cos-border);color:transparent;
  animation:cos-skeleton-pulse 1.4s ease-in-out infinite;
}
.cos-steps.is-loading .cos-steps__label .cos-skeleton{width:60px;height:12px}
@media (prefers-reduced-motion:reduce){
  .cos-steps.is-loading .cos-steps__marker{animation:none}
}

/* State：Disabled（整條流程唯讀，例如已完成的歷史單據） */
.cos-steps.is-disabled{opacity:.55}
.cos-steps.is-disabled .cos-steps__item{cursor:default;pointer-events:none}

@media(max-width:900px){
  .cos-steps:not(.cos-steps--compact){flex-direction:column;align-items:stretch;gap:var(--cos-space-md)}
  .cos-steps:not(.cos-steps--compact) .cos-steps__item{
    flex-direction:row;align-items:center;gap:var(--cos-space-sm);text-align:left;
  }
  .cos-steps:not(.cos-steps--compact) .cos-steps__connector{display:none}
}


/* ==========================================================================
   11. CHART
   ========================================================================== */
.cos-chart{display:flex;flex-direction:column;gap:var(--cos-space-md);min-width:0}
.cos-chart__controls{display:flex;gap:var(--cos-space-sm);flex-wrap:wrap}
.cos-chart__canvas{width:100%;min-width:0}
.cos-chart__canvas svg{width:100%;height:auto;display:block;overflow:visible}
.cos-chart__axis-title{
  font-size:var(--cos-fs-small);font-weight:400;color:var(--cos-text-muted);
}
.cos-chart__legend{
  display:flex;flex-wrap:wrap;gap:var(--cos-space-sm) var(--cos-space-md);
}
.cos-chart__legend-item{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--cos-fs-small);font-weight:400;color:var(--cos-text-subtle);
}
.cos-chart__legend-dot{
  flex:0 0 10px;width:10px;height:10px;border-radius:3px;
}
.cos-chart__legend-value{color:var(--cos-text);font-weight:var(--cos-fw-small)}

/* SVG 內部元素（由 renderer 產生，僅樣式不含資料） */
.cos-chart__grid{stroke:var(--cos-border);stroke-width:1}
.cos-chart__axis{stroke:var(--cos-border-strong);stroke-width:1}
.cos-chart__axis-label{fill:var(--cos-text-muted);font-size:11px}
.cos-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cos-chart__point{stroke:#fff;stroke-width:1.5}
.cos-chart__bar{rx:3}
.cos-chart__hbar-track{fill:var(--cos-surface-muted)}
.cos-chart__hbar-fill{rx:3}
.cos-chart__donut-seg{fill:none;stroke-width:22}
.cos-chart__donut-center{fill:var(--cos-text);font-weight:700}
.cos-chart__donut-sub{fill:var(--cos-text-muted);font-size:11px}

/* State：Loading */
.cos-chart.is-loading .cos-chart__canvas{min-height:220px}
.cos-chart.is-loading .cos-chart__canvas .cos-skeleton{width:100%;height:220px}
.cos-chart.is-loading .cos-chart__legend{opacity:.4}

/* State：Error */
.cos-chart.is-error .cos-chart__canvas{
  border:1px solid var(--cos-danger-border);
  border-radius:var(--cos-radius-md);
  background:var(--cos-danger-bg);
}

/* State：Disabled（資料源停用） */
.cos-chart.is-disabled{opacity:.5}
.cos-chart.is-disabled .cos-chart__controls{pointer-events:none}

@media(max-width:900px){
  .cos-chart.is-loading .cos-chart__canvas .cos-skeleton{height:160px}
  .cos-chart__legend{gap:var(--cos-space-xs) var(--cos-space-sm)}
}