@charset "UTF-8";
/* ============================================================================
WEBGENE 內部系統 — 共用色票
----------------------------------------------------------------------------
版本 1.0
對象 出勤系統 attend.webgene.tw ／ 財務會計系統 accountant.webgene.tw
用途 兩個站唯一共用的檔案。定義顏色，不定義版面。
兩站各自保留自己的 HTML、元件與排版，只有「顏色的意思」一致。
載入 ⚠️ 會計站必須放在 app.css 之「後」（本檔原本寫「之前」是錯的）。
本檔末段的「會計站接線」是在 :root 重新宣告 --bg-primary 等變數，
與 app.css:5 的 :root 同 specificity，誰在後面誰生效。
放前面 → app.css 覆蓋回去 → 整套樣式靜默失效，且沒有任何錯誤訊息。
← 先
← 後
← 最後
維護 要調色只改這一支，兩個站一起變。
----------------------------------------------------------------------------
顏色的意思（兩站一致）
橘 需要你處理 ＋ 品牌識別
藍 可以點的東西 （連結、主要按鈕、選取狀態）
紫 參照資訊 （請假、關聯資料）
灰 已完成、不需要動作
紅 破壞性動作，且只在 hover／確認時出現
綠 不使用
----------------------------------------------------------------------------
對比說明
品牌橘 #e35a28 當文字時，在白底上只有 3.65:1，未達 WCAG AA 的 4.5:1。
因此純色只用於「圖形」（logo、指示條、圓點、外框），
文字一律使用 --wg-brand-ink（淺色模式 #b0431b＝5.73:1，深色模式 #f07a4d＝6.80:1）。
同理，主要按鈕的底色使用 --wg-accent-ink，文字用 --wg-on-accent。
========================================================================== */
:root{
color-scheme:light; /* 第一階段鎖淺色 */
/* ---- 表面 ---- */
--wg-ground:#eff2f6; /* 頁面底 */
--wg-card:#ffffff; /* 卡片、表格底 */
--wg-card-2:#f6f8fb; /* 次級表面：表頭、統計方塊 */
--wg-stripe:#f1f4f9; /* 表格斑馬紋 */
--wg-rail:#0c1e38; /* 深色側欄（會計站用；兩種主題下都是深色） */
--wg-rail-soft:#e5eaf1; /* 淺色側欄（出勤站用） */
/* ---- 文字 ---- */
--wg-ink:#101725; /* 主要文字 */
--wg-ink-soft:#465065; /* 次要文字、表格內容 */
--wg-faint:#8791a3; /* 標籤、已完成狀態 */
/* ---- 線 ---- */
--wg-line:#dbe1ea;
--wg-line-soft:#e8edf3;
/* ---- 橘：品牌識別 ＋ 需要處理 ---- */
--wg-brand:#e35a28; /* 只用於圖形，不可當文字 */
--wg-brand-ink:#b0431b; /* 橘色文字 */
--wg-brand-bg:#fceee7; /* 需處理的列／卡片底色 */
/* ---- 藍：互動 ---- */
--wg-accent:#5f7ea3; /* 圖形：時間軸、圖示 */
--wg-accent-ink:#41648b; /* 連結文字、主要按鈕底色 */
--wg-accent-bg:#e9eff6; /* 待審核類標籤底色 */
--wg-on-accent:#ffffff; /* 主要按鈕上的文字色 */
/* ---- 紫：參照資訊 ---- */
--wg-plum:#6f5f93;
--wg-plum-bg:#eeebf5;
/* ---- 紅：破壞性動作 ---- */
--wg-danger:#c62828;
/* ---- 其他 ---- */
--wg-shadow:0 1px 2px rgba(16,23,37,.05), 0 12px 32px -20px rgba(16,23,37,.45);
--wg-radius:8px;
/* ---- 字體 ---- */
/* 系統字體優先，不載入 webfont：內部系統不該為了字型多一次外部請求。
會計站目前從 Google Fonts 載 Noto Sans TC，可以改成這個堆疊。 */
--wg-font:"PingFang TC","Noto Sans TC","Microsoft JhengHei",
"Helvetica Neue",Helvetica,Arial,sans-serif;
/* 數字用等寬，中文會自動落回上面的 CJK 字體 */
--wg-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace,
"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
/* ============================ 深色模式 ==================================== */
/* ⚠️ 第一階段停用（2026-08-26）。app.css 有 81 處寫死顏色，以下 surface 尚未補深色：
.topbar / .sidebar-toggle / .card-header / .toast / .page-btn / .filter-bar / .ss-panel，
且 .form-control{background:#fff}(0,1,0) 勝過 theme.css 的 input,select,textarea(0,0,1)。
另 @media print 的 body{color:black} 會被覆蓋 → 深色下列印會是近乎空白的紙。
補完上述再把下面整段解除註解即可。使用者已確認不需要 LIGHT/DARK/AUTO 手動切換鈕。
@media (prefers-color-scheme: dark){
:root{
--wg-ground:#0e1216;
--wg-card:#161b22;
--wg-card-2:#1c222b;
--wg-stripe:#191f27;
--wg-rail:#0a141f;
--wg-rail-soft:#141a21;
--wg-ink:#e4e9f0;
--wg-ink-soft:#a8b2c1;
--wg-faint:#6d7789;
--wg-line:#282f39;
--wg-line-soft:#20262e;
--wg-brand:#e35a28; (* 圖形用，深淺兩色模式相同 *)
--wg-brand-ink:#f07a4d;
--wg-brand-bg:#2a1710;
--wg-accent:#7ca2c8;
--wg-accent-ink:#9dbde0;
--wg-accent-bg:#18222d;
--wg-on-accent:#0e1216; (* 深色模式的主要按鈕是淺底深字 *)
--wg-plum:#a294c6;
--wg-plum-bg:#1f1c2c;
--wg-danger:#e05252;
--wg-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.9);
}
:root{color-scheme:dark}
}
*/
/* ============================================================================
會計站接線
----------------------------------------------------------------------------
accountant.webgene.tw 已經有自己的一套 CSS 變數。不必改任何元件或版面，
只要把下面這段貼進 app.css 的最前面（或直接沿用本檔），把值指過來即可。
原本的變數名稱一個都不用動。
========================================================================== */
:root{
--bg-primary: var(--wg-ground);
--bg-secondary: var(--wg-card);
--bg-tertiary: var(--wg-card-2);
--border: var(--wg-line);
--text-primary: var(--wg-ink);
--text-secondary: var(--wg-ink-soft);
--text-muted: var(--wg-faint);
--accent: var(--wg-accent-ink);
--accent-hover: var(--wg-accent);
--accent-light: var(--wg-accent-bg);
--sidebar-bg: var(--wg-rail);
--sidebar-bg2: #142d52;
--sidebar-text: #cbd5e1;
--sidebar-muted: #64748b;
--sidebar-border: rgba(255,255,255,.07);
--sidebar-active: rgba(227,90,40,.16); /* 原為白色半透明，改成品牌橘 */
--gold: var(--wg-brand); /* 側欄選取標記由金色改為品牌橘 */
--sky: var(--wg-accent);
--danger: var(--wg-danger);
--warning: var(--wg-brand-ink); /* 待處理＝橘，與出勤站一致 */
/* ⚠️ 刻意不重新對應 --success。原案把它指向灰色，理由是「結案改灰框」，
但 app.css:334 是 .btn-success{background:var(--success)}，而三支詳情頁的
「主管審核 / 老闆審核 / 會計確認」都是 class="btn btn-success"
→ 會把全站最重要的那顆按鈕變成灰色（看起來像 disabled）。
「結案」改灰框已由 theme.css 的 .badge-done 直接處理，不需要動這個變數。 */
}
/* 側欄永遠是深色表面，所以選取狀態的橘固定用深底專用的亮版，不隨主題切換 */
.sidebar .nav-item.active,
.railnav a.on{
background:rgba(227,90,40,.16);
color:#f07a4d;
box-shadow:inset 2px 0 0 var(--wg-brand);
}
/* ============================================================================
出勤站接線
----------------------------------------------------------------------------
webgene-attend-theme.css 直接使用上面的 --wg-* 變數，不需要額外對應。
只要確認載入順序：本檔在 attend-theme.css 之前。
========================================================================== */