/* ==========================================================================
   cfo-page.css — 模組頁共用「浮動視窗」統一層（單一真相來源）
   --------------------------------------------------------------------------
   問題背景：瘦身後各頁的 modal 各自複製 <style>，已漂移成多套：
     .modal-overlay (accounting/cash/inventory/payroll/tax/assets/returns)
     .modal-mask    (securities/treasury)   ← z-index 只有 50，黑底蓋不到頂欄、又靠上
     .eq-modal      (equity)                ← z-index 1200，一樣蓋不到頂欄
   頂欄是 position:fixed; z-index:10001，所以上述 z-index 全都在頂欄之下，
   造成「黑底範圍不一致（蓋不到上面）」＋「位子有的靠上有的置中」。

   本檔只做一件事：把三套 overlay 統一成「置中、黑底蓋過頂欄、內容過長可捲」，
   用 class 選擇器（安全，不碰版面/表單/表格），靠「載入順序在後」勝過各頁 inline。
   載入位置：各頁 <head> 最後（inline <style> 之後、cfo-mobile.css 之前）。

   刻意「不」做的事（避免回歸）：不強制 .modal 卡片寬度、不動 input/select/table/
   .filter 版面（那些是各頁情境相關規則，一旦用高權重覆蓋就會像 #products 下拉被撐爆）。
   ========================================================================== */

/* ── overlay 外層：統一定位、黑底、層級、內捲 ──
   注意：不設 display，保留各頁原本的顯示/隱藏機制
   (.modal-overlay 用 [hidden]；.modal-mask 用 .show；.eq-modal 用 .open) */
.modal-overlay,
.modal-mask,
.eq-modal,
.ov{                                              /* .ov = 進銷存單據鏈(inventory-doc-chain) 的 overlay */
  position:fixed; inset:0;
  align-items:center; justify-content:center;   /* 一律置中 */
  padding:24px; overflow:auto;                    /* 短的置中、超高的整層可捲 */
  background:rgba(16,35,56,.55);                  /* 統一黑底濃度 */
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  z-index:10050;                                  /* 高於 topbar(10001)/app-switcher(10010)，黑底蓋得住頂欄 */
}

/* ── 卡片：置中 + 高度上限 + 自身內捲（永不超出視窗，避免置中裁切） ──
   只鎖定 .modal 卡片本身，不碰指令面板(.lui-cmdk 等非 .modal 的子元素) */
.modal-overlay > .modal,
.modal-mask > .modal,
.ov > .modal{
  margin:auto;
  max-height:calc(100vh - 48px);
  overflow:auto;
  /* 不設 width：寬度仍由各頁/各 modal 的 inline 決定 */
}
/* equity 的 .eq-modal-card 本來就有 margin:auto + max-height + overflow，故不重設 */

/* 動畫（若各頁自己有定義同名 keyframe，這裡只是後備，不影響外觀） */
.modal-overlay > .modal,
.modal-mask > .modal,
.ov > .modal,
.eq-modal > .eq-modal-card{ animation:cfo-mrise .18s ease; }
@keyframes cfo-mrise{ from{transform:translateY(8px);opacity:.6} to{transform:none;opacity:1} }

/* ==========================================================================
   統一設計系統（opt-in：<html class="cfo-ds">）— 單一真相來源
   一次定義色彩 token（含夜間）＋字體＋標頭／標題／按鈕，讓各模組頁一致。
   全部 scope 在 .cfo-ds 之下，逐頁加 class 漸進套用；未加 class 的頁不受影響。
   本檔載入順序在各頁 inline <style> 之後，且選擇器多一層權重，故覆蓋各頁 inline。
   ========================================================================== */
html.cfo-ds{
  --bg:#f4f6f9; --panel:#ffffff; --panel-2:#f8fafc; --ink:#102338; --ink-soft:#334155;
  --muted:#66768a; --line:#e2e8f0; --green:#14b8a6; --green-soft:rgba(20,184,166,.10);
  --gold:#64748b; --danger:#a83f3a; --danger-soft:#fff1f2; --th:#f8fafc; --row-hover:#f7fbfa;
  --border-2:#cfd9e5; --shadow:0 14px 36px rgba(15,23,42,.10);
}
html.cfo-ds[data-cfo-mode="dark"]{
  --bg:#0f141a; --panel:#1a232e; --panel-2:#212c38; --ink:#e8eef5; --ink-soft:#c4cfda;
  --muted:#8aa0b4; --line:#2c3845; --green:#2dd4bf; --green-soft:rgba(45,212,191,.14);
  --gold:#94a3b8; --danger:#e07a82; --danger-soft:rgba(224,122,130,.16); --th:#212c38; --row-hover:#222d39;
  --border-2:#33465a; --shadow:0 6px 22px rgba(0,0,0,.5);
}
html.cfo-ds body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  background:var(--bg); color:var(--ink);
}

/* 統一標頭：標題 ＋ 整條橫跨的底線（非「字下面」的底線）；主要動作靠右、同高一列 */
.cfo-ds .sv-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:0 0 12px; margin:0 0 16px; border-bottom:1px solid var(--line); background:none;
}
.cfo-ds .sv-title{ font-size:18px; font-weight:850; color:var(--ink); padding:0; border:0; margin:0; letter-spacing:0; }
.cfo-ds .sv-desc{ color:var(--muted); font-size:12.5px; line-height:1.6; margin-top:4px; }
.cfo-ds .panel-title{ font-size:18px; font-weight:850; color:var(--ink); }
.cfo-ds .sv-head .actions,
.cfo-ds .panel-head .actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* 統一按鈕：同高、同圓角；主鈕綠底、次鈕描邊 */
.cfo-ds .btn{
  height:34px; min-height:34px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:8px; padding:0 13px; font:inherit; font-size:12.5px; font-weight:750;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.cfo-ds .btn:hover{ border-color:var(--green); color:var(--green); }
.cfo-ds .btn.primary{ background:var(--green); border-color:var(--green); color:#fff; }
html.cfo-ds[data-cfo-mode="dark"] .btn.primary{ color:#06231f; }
.cfo-ds .icon-btn{ width:34px; height:34px; min-height:34px; border:1px solid var(--border-2); border-radius:8px; background:var(--panel); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.cfo-ds .icon-btn:hover{ border-color:var(--green); color:var(--green); }

/* ==========================================================================
   共用「資料夾式」頁籤 — 全站單一來源（不需 opt-in class）
   來源：資金規劃(treasury) 的定存／借款頁籤外觀。圓角上緣＋選中填綠底描綠邊。
   覆蓋頁內兩種頁籤：
     (1) .tabs > .tab      選中吃 .on / .active / aria-selected（退回·預算·資金…）
     (2) .kindtabs .kindtab 選中吃 .active（進銷存單據鏈）
   ★只鎖 div.tabs：側欄二階選單是 <nav class="tabs">（有的頁沒帶 .rail，如
    accounting），用 div.tabs 才能一律排除它，不能只靠 :not(.rail)。子項 .tab-main/
    .tab-sub 也非 .tab。內容頁籤一律是 <div class="tabs">。
   scope 在 .cfo-ds；未套設計系統的獨立頁（budget.html、doc-chain 獨立版）
   於各自 CSS(budget.css / inventory-doc-chain.css) 自帶同款外觀。
   權重：本檔多一層 .cfo-ds 且載入在各頁 CSS 之後，故各頁沿用此處外觀。
   ========================================================================== */
/* (1) .tabs > .tab */
.cfo-ds div.tabs:not(.rail){
  display:flex; gap:6px; flex-wrap:wrap; align-items:flex-end;
  margin:16px 0 0; padding:0; border:0; background:none; overflow:visible;
}
.cfo-ds div.tabs:not(.rail) > .tab{
  font:inherit; font-size:13px; font-weight:700; line-height:1.2;
  border:1px solid var(--line); border-bottom:none;
  background:var(--panel); color:var(--muted);
  border-radius:10px 10px 0 0; padding:9px 18px; margin:0; cursor:pointer;
}
.cfo-ds div.tabs:not(.rail) > .tab:hover{ color:var(--ink); }
.cfo-ds div.tabs:not(.rail) > .tab.on,
.cfo-ds div.tabs:not(.rail) > .tab.active,
.cfo-ds div.tabs:not(.rail) > .tab[aria-selected="true"]{
  color:var(--green); border-color:var(--green); background:var(--green-soft);
}
/* 選中頁籤與下方面板無縫相連（拉平左上角、貼齊） */
.cfo-ds div.tabs:not(.rail) + .card,
.cfo-ds div.tabs:not(.rail) + .block{ margin-top:0; border-top-left-radius:0; }

/* (2) .kindtabs .kindtab（單據鏈；保留分組間距，jump 鈕維持樸素文字鈕） */
.cfo-ds .kindtabs{
  display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;
  margin:12px 0 0; padding:0; border:0; background:none;
}
.cfo-ds .kindtabs .kindgroup{ display:flex; gap:4px; }
.cfo-ds .kindtabs .kindtab{
  font:inherit; font-size:12.5px; font-weight:700; line-height:1.2;
  border:1px solid var(--line); border-bottom:none;
  background:var(--panel); color:var(--muted);
  border-radius:10px 10px 0 0; padding:8px 15px; margin:0; cursor:pointer;
}
.cfo-ds .kindtabs .kindtab:hover:not(:disabled){ color:var(--ink); }
.cfo-ds .kindtabs .kindtab.active{
  color:var(--green); border-color:var(--green); background:var(--green-soft);
}
.cfo-ds .kindtabs .kindtab:disabled{ opacity:.4; cursor:not-allowed; }
.cfo-ds .kindtabs .kindtab.kindjump{
  border-color:transparent; background:none; color:var(--muted); border-radius:8px; font-weight:600;
}
.cfo-ds .kindtabs .kindtab.kindjump:hover{ color:var(--green); }
