@charset "UTF-8";
/* ============================================================================
WebGene 財務會計系統 — 設計調整層
----------------------------------------------------------------------------
交回日期 2026-09-01
基準版本 2026-09-01 design-kit 快照
六件事：
1. 統計卡：拿掉裝飾圖示、金額不再被截斷、尺寸回到原型的 19.2px
2. 「待你審核」等面板：把 auto-fit 的門檻放大到表格真正需要的寬度
3. 字體對齊原型（行高、表頭等寬字、數字等寬）
4. 金額欄位：寬螢幕下欄位被平均攤開、數字浮在中間；表頭也沒跟著右對齊
7. 全站健檢：對比、鍵盤焦點、控制項高度（量測結果，不是感覺）
5. 側欄：拿掉八個選單圖示與外發光，品牌方塊換回字母 W（原型是純文字側欄）
6. 登入頁：品牌區與卡片合成一張、拿掉多餘的問候語、字級與系統內一致
9/01 版已經把原型的主體做進去了，方向我看過覺得對，其餘沒有動。
========================================================================== */
/* ============================================================================
1. 統計卡：拿掉圖示、金額不截字、尺寸對齊原型
----------------------------------------------------------------------------
問題（1152px，內容區 848px）：
.stat-grid 是寫死的 repeat(4, 200px)。卡片 200px，扣掉內距與「圖示的 56px」，
數字只剩 94px，但「NT$ 2,757,410」需要 119px → 觸發 ellipsis。
財務系統的儀表板第一眼就是金額，這是不能截的東西。
關鍵在那 56px。圖示是裝飾、不帶資訊，把它拿掉問題就從根上消失了 ——
不需要縮字、不需要降成兩欄、不需要任何權宜之計。
========================================================================== */
/* --- (a) 拿掉統計卡的裝飾圖示 --- */
/* 那是一個灰方塊配一個灰圖示，不帶任何資訊 —— 原型裡沒有這個東西。
而且它每張卡吃掉 56px（44px 方塊 + 12px 間距），正是金額被截斷的主因之一。
拿掉之後每張卡多出 56px 給數字，四格一排就放得下了。 */
.stat-card .stat-icon{ display:none; }
/* --- (b) 欄數自動，四格維持一排 --- */
/* 圖示拿掉後：848px ÷ 4 = 200px/卡，扣 32px 內距剩 168px，
金額 19.2px 等寬需要 ~124px。168 > 124，四格一排安全。
所以不需要在小筆電上降成 2×2 —— 那是圖示還在時的權宜之計。 */
.stat-grid{
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
/* --- (c) 金額尺寸回到原型的 19.2px --- */
/* 上一版我加了 clamp() 當作防截字的保險，但在 1152px 下 1.55vw 只有 17.9px，
結果比原型小、也比原本的 18.4px 小。空間夠了就不需要那條保險。 */
.stat-card .stat-info .value{
font-size:19.2px;
overflow:visible;
text-overflow:clip;
}
/* ============================================================================
2. 「待你審核」等面板：讓欄數自己適應，而不是寫死
----------------------------------------------------------------------------
這一節我改過兩次，兩次都錯，過程留著。
原始問題：三個面板並排時每個只有 ~410px，第一欄「名稱」被壓到 56px，
中文一個字一行往下折。
第一次的錯做法：`grid-template-columns:1fr !important`，全部壓成一欄。
但工程 9/01 已經把這幾個 grid 寫成 auto-fit + minmax —— 它本來就會自己
判斷放得下幾欄。我那條規則等於把一個好的響應式版面整個關掉，
1990px 的螢幕上本來該三欄的東西全變一欄。
真正的問題不是欄數，是**門檻值設太小**。
========================================================================== */
/* 門檻值怎麼算的：
待你審核面板 minmax(360px) → 1280px 的內容區可排三欄，每欄 416px。
但面板裡的表格光是 申請人130 + 金額90 +
申請日85 + 查看50 + 內距，就吃掉 390px，
「名稱」只剩 26px → 中文一個字一行。
最近發票/支出 minmax(440px) → 同樣的問題，而且那兩張表有七、八欄。
所以正確的修法是**把門檻提高到表格真正需要的寬度**，其餘交還給 auto-fit：
540px → 824px(1152螢幕) 一欄 1136px 兩欄 1734px(1990螢幕) 三欄 ✓
720px → 兩張多欄表格並排時，每張至少有 720px 才不會折行
門檻要包一層 min(540px,100%)：純粹寫 minmax(540px,1fr) 的話，
容器比 540 窄時軌道不會縮，手機上整個版面會橫向溢出（實測 390px → 734px）。
min() 讓它在窄容器下退回 100%。
欄數變回會自己適應，而且每一欄都夠寬。
（這裡仍然需要 !important，因為 grid 寫在 style 屬性裡；
如果工程把它改成 class，我這兩條就可以拿掉。） */
/* 待你審核：三張小面板 */
.content-area div[style*="minmax(360px"]{
grid-template-columns:repeat(auto-fit,minmax(min(540px,100%),1fr)) !important;
}
/* 員工版「等待審核 / 我的申請記錄」 */
.content-area div[style*="minmax(300px"]{
grid-template-columns:repeat(auto-fit,minmax(min(540px,100%),1fr)) !important;
}
/* 最近發票 ＋ 最近支出 並排（每張七～八欄，需要更寬） */
.content-area div[style*="minmax(440px"]{
grid-template-columns:repeat(auto-fit,minmax(min(720px,100%),1fr)) !important;
}
/* 面板並排的時候格子會變窄，這時候欄位的優先順序要換：
「名稱」是這張表存在的理由，申請人只是附註。
所以窄的時候讓申請人折行、名稱保住最小寬度 —— 反過來的話
會變成「品牌形象網站建置尾款」被壓成五行、旁邊的人名卻好端端一行。 */
/* 只針對「待你審核」那三張小面板（360/300 那兩個 grid），
最近發票／支出那組（440）格子夠寬，申請人維持一行不折。
width:auto 是保險：萬一之後有人把寬度限制加回這一欄，
只放寬 white-space 而不還原寬度的話，它會縮到 min-content，
反而折得更兇（實測「[WebGene] Yvette莊妍綺」變三行）。兩個要一起改。 */
.content-area div[style*="minmax(360px"] td[data-label="申請人"],
.content-area div[style*="minmax(300px"] td[data-label="申請人"]{
white-space:normal;
width:auto;
}
.content-area div[style*="minmax("] td.primary,
.content-area div[style*="minmax("] td[data-label="客戶"],
.content-area div[style*="minmax("] td[data-label="廠商"]{
min-width:150px;
}
/* 三欄並排時（1990px 這種寬螢幕），每格 567px 裡有 86px 是儲存格左右內距。
把小面板的內距從 14px 收到 9px，省下來的 40px 剛好夠申請人排成一行。
app.css 在 1152–1279px 也用了同樣的手法（10px），這裡是同一個做法用在
「格子變窄」而不是「螢幕變窄」的情況。 */
.content-area div[style*="minmax(360px"] td,
.content-area div[style*="minmax(360px"] th,
.content-area div[style*="minmax(300px"] td,
.content-area div[style*="minmax(300px"] th{
padding-left:9px;
padding-right:9px;
}
/* ============================================================================
3. 字體：對齊原型
----------------------------------------------------------------------------
先講結論：**字級其實已經很接近了**，儲存格 13px、表頭 11px、按鈕 13px，
跟原型差不到 0.5px。感覺不一樣的是另外三件事：
(a) line-height 全站都是 normal（≈1.2）。原型是 1.65–1.7。
中文字身高，1.2 會擠。這是「看起來不一樣」的最大單一原因，
而且它只影響高度，不影響寬度 —— 對 824px 的限制完全安全。
(b) 表頭用的是中文字體。原型用等寬字 + 字距，做出「資料表」的感覺。
等寬字比較寬，所以字級同步從 11px 降到 10px，實測後整張表反而
比原來窄 2px（見下方註記）。
(c) 統計卡的數字用中文字體。金額應該等寬對齊 —— 這個系統整頁都是錢，
數字對不齊就沒辦法上下比較。
字體「種類」沒有改：原型當初載的是 Google Fonts 的 Noto Sans TC，
但你們已經刻意移掉 webfont 改吃系統字體堆疊，那個決定是對的
（內部系統不該為了字型多一次外部請求）。PingFang TC 在 Mac 上就是
思源黑體的同族，Windows 落到微軟正黑，視覺差異很小。維持現狀。
========================================================================== */
/* --- (a) 行高：全站鬆開 --- */
body{ line-height:1.7; }
.table-wrapper td{ line-height:1.65; }
.table-wrapper td.primary{ line-height:1.45; }
.card-header, .topbar h1{ line-height:1.35; }
/* --- (b) 表頭改等寬字，字級同步降一階 --- */
/* 註：mono 比 CJK sans 寬，所以第一版我把 11px 降到 10px 當作配套。
健檢時發現 10px 的中文表頭已經到「看得到但讀得吃力」的程度（見第 7 節），
所以改回 11px，改用縮字距（.1em → .04em）來換寬度。
實測 1152px：九欄的發票列表原本會溢出 7px，字距收掉之後剛好放得下。 */
.table-wrapper th{
font-family:var(--wg-mono);
font-size:11px;
font-weight:500;
letter-spacing:.04em;
}
/* --- (c) 所有數字等寬對齊 --- */
.stat-card .stat-info .value{
font-family:var(--wg-mono);
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum";
letter-spacing:0;
}
/* 日期欄也一起，日期是數字不是文字 */
.table-wrapper td:last-child,
.table-wrapper td.cell-date{
font-variant-numeric:tabular-nums;
}
/* ============================================================================
4. 金額欄位：寬螢幕跑版 ＋ 表頭沒對齊
----------------------------------------------------------------------------
實測結果：
列表頁（雜項／收入／支出） th 是 .money.sortable → 已經右對齊 ✓
儀表板的六張表 th 沒有 .money class → 靠左，但數字靠右 ✗
所以標題「含稅金額」停在欄位左邊、數字排在右邊，中間空一大段 ——
看起來像沒對齊，因為它確實沒對齊。
★ 最乾淨的修法在你們那邊：儀表板那六張表的 | 補上 money class，
跟列表頁一樣。一個字，之後所有表格自動一致。
下面這段是在那之前的補丁。它不寫死欄位順序 —— 用 :has() 檢查
「這張表的第 n 欄儲存格是不是 .money」，是的話才把第 n 個 th 右對齊。
欄位順序會因為角色不同而變（員工看不到「申請人」欄），所以不能寫死索引。
工程補上 class 之後，這一整段可以刪掉。
========================================================================== */
/* --- (a) 寬螢幕：限制「哪一欄可以長大」，而不是收窄整個頁面 --- */
/* 表格是 table-layout:auto。寬螢幕多出來的空間會被平均分給每一欄，
金額欄被撐成 180px 而數字只佔 55px，浮在欄位右邊 —— 那就是跑版的樣子。
這一段我改了三次，把過程留著，免得之後有人again 走回頭路：
第一次 .content-area{max-width:1280px}
表格對了，但 1990px 的螢幕右半邊整片空白。（「響應式壞了」）
第二次 .table-wrapper td.primary{width:100%}
頁面撐滿了，但第一欄把空間全吃走，儀表板「最近發票申請」的
客戶欄被壓成 68px，「匯豐汽車股份有限公司」一個字一行。
第三次 金額 / 進度 / 付款 / 日期 / 動作 給 width:1%（＝只要自己需要的寬度）。
這樣所有多出來的空間都被「申請事由」一欄吃掉：1990px 下它變成
1100px 寬，而內容只有「雜支」兩個字 —— 中間空一大坨。
把問題從「攤太開」換成「集中在一欄」，還是沒解決。
第四次（現在）
不再指定誰吃掉多餘空間，讓瀏覽器按各欄內容的比例分配 ——
也就是 table-layout:auto 的預設行為，等比放大。
那當初為什麼會覺得「金額跑版」？因為儀表板那幾張表的 |
沒有 money class，標題靠左、數字靠右，中間裂開一段。
那是**對齊**的問題，不是**寬度**的問題。下面 (b) 段把表頭補成
右對齊之後，等比分配就沒有副作用了：欄位一起變寬，
數字始終貼著自己欄位的右緣，標題就在數字正上方。
留下 white-space:nowrap 是為了確保這些欄位不會折行
（日期、金額、按鈕折行永遠是錯的），但不再限制它們的寬度。 */
@media (min-width: 769px){
/* 固定長度的欄位：不折行，但不限制寬度 ——
寬度交給瀏覽器按內容比例分配（等比），不要讓任何一欄獨吞多餘空間。 */
.table-wrapper td.money, .table-wrapper th.money,
.table-wrapper td.stage,
.table-wrapper td.cell-action,
.table-wrapper td.cell-date,
.table-wrapper td[data-label="申請日"],
.table-wrapper td[data-label="申請日期"],
.table-wrapper td[data-label="建立日期"],
.table-wrapper td[data-label="日期"],
.table-wrapper td[data-label="付款"]{
white-space:nowrap;
}
}
/* 申請人欄另外處理：它是這幾欄裡最長的（「[WebGene] Sanzo柯智騰」14 個字元），
在 1152px 綁 nowrap 會讓整張表撐破 824px 的容器（實測發票列表 +71px）。
所以只在 1400px 以上才鎖成一行 —— 那時候寬度綽綽有餘。
工程把 [WebGene] 前綴拿掉之後（見文末），這條就可以放寬到 769px。 */
@media (min-width: 1400px){
.table-wrapper td[data-label="申請人"]{ white-space:nowrap; }
}
/* --- (b) 表頭跟著數字右對齊 --- */
table:has(tbody tr td:nth-child(2).money) thead th:nth-child(2),
table:has(tbody tr td:nth-child(3).money) thead th:nth-child(3),
table:has(tbody tr td:nth-child(4).money) thead th:nth-child(4),
table:has(tbody tr td:nth-child(5).money) thead th:nth-child(5),
table:has(tbody tr td:nth-child(6).money) thead th:nth-child(6),
table:has(tbody tr td:nth-child(7).money) thead th:nth-child(7),
table:has(tbody tr td:nth-child(8).money) thead th:nth-child(8),
table:has(tbody tr td:nth-child(9).money) thead th:nth-child(9){
text-align:right;
}
/* ============================================================================
5. 側欄：拿掉圖示與光暈
----------------------------------------------------------------------------
原型的側欄是純文字的。這裡有兩個東西是原型沒有的：
(a) 品牌方塊的橘色外發光
box-shadow: 0 2px 8px rgba(227,90,40,.35) —— 全站唯一一處外發光。
整套系統的規則是「橘色 = 需要你處理」，logo 一直發光等於讓一個
不需要動作的東西持續發訊號。而且它是介面裡唯一有光暈的元素，
孤立起來會像沒清乾淨的舊樣式。方塊本身（36px、圓角 10px、
四格圖示）保留 —— 那個圖示登入頁也在用，兩個入口一致。
(b) 八個選單圖示
每個項目一個 16px 圖示。這個側欄只有 8 個項目、分成三組、
文字標籤都很短且明確（發票申請 / 支出申請 / 雜項申請…），
圖示沒有增加辨識速度，只是多了八個要看的東西。
目前所在頁面靠左緣的橘線和底色標示，那個訊號比圖示強得多。
圖示拿掉後文字會往左靠，所以左內距補回 10px，讓文字仍然對齊
分組標題（業務申請 / 主資料 / 系統）的縮排。
========================================================================== */
/* (a) 品牌方塊：拿掉光暈，內容換回字母 W */
/* 原型的側欄方塊裡是字母 W，不是四格點陣圖示。
點陣圖示是通用的「儀表板」符號，跟 WebGene 沒有關係；
一個字母才是這家公司的記號。方塊尺寸維持 36px（配兩行字比較平衡）。 */
.sidebar-logo .logo-box{
box-shadow:none;
font-family:var(--wg-font);
}
.sidebar-logo .logo-box svg{ display:none; }
.sidebar-logo .logo-box::after{
content:"W";
color:#fff;
font-size:16px;
font-weight:700;
line-height:1;
}
/* (b) 選單圖示：拿掉，文字補回縮排 */
.sidebar .nav-item svg{ display:none; }
.sidebar .nav-item{ padding-left:22px; }
/* 「登出」是動作不是導覽，它的圖示留著 —— 那是側欄底部唯一的按鈕，
有一個圖示幫助它跟上面的清單區分開。 */
/* ============================================================================
6. 登入頁
----------------------------------------------------------------------------
對照原型後有四個差異，其中三個純 CSS 可以解，第四個要改一行文字。
(a) 品牌區浮在卡片外面
原型是「方塊＋系統名＋公司名」都在卡片裡，頂端那條橘線罩著整組。
DOM 上 .logo-area 和 .card 是兩個並排的區塊，CSS 搬不動 DOM ——
但可以讓它們「長得像同一張卡」：上半段給 .logo-area、下半段給 .card，
中間那條邊界拿掉。視覺結果跟原型一樣。
(b) 「歡迎回來」
一天登入八次的內部系統不需要問候語，那個位置應該給系統名稱。
品牌區併進卡片之後，系統名稱本來就在上面了，這一行變成純重複。
(c) 登入頁基準字級是 16px，系統內是 14px
同一套系統兩個基準，登入頁的字看起來大一號。統一成 14px。
(d) © 2025 → 2026
這是文字內容，CSS 改不了（硬用 ::before 蓋掉會變成年份寫死在樣式表裡，
明年更糟）。請工程直接改 login.html 那一行。
========================================================================== */
/* (c) 基準字級與系統內一致 */
.login-wrapper{ font-size:14px; }
/* (e) 品牌方塊跟側欄用同一個記號 —— 字母 W
我當初兩份原型不一致：側欄放 W、登入頁放一個「財務」意象的圖示。
現在回頭看，登入頁那個是我臨時想的，不是你們的記號。
一家公司在兩個入口應該用同一個標記，所以兩邊都統一成 W。 */
.login-wrapper .logo-icon{
font-family:var(--wg-font);
display:flex;
align-items:center;
justify-content:center;
}
.login-wrapper .logo-icon svg{ display:none; }
.login-wrapper .logo-icon::after{
content:"W";
color:#fff;
font-size:20px;
font-weight:700;
line-height:1;
}
/* (a) 品牌區＋卡片＝一張卡 */
.login-wrapper .logo-area{
width:100%;
max-width:352px;
margin:0 auto;
padding:28px 28px 4px;
background:var(--wg-card);
border:1px solid var(--wg-line);
border-top:3px solid var(--wg-brand); /* 全頁唯一飽和的一筆 */
border-bottom:0;
border-radius:var(--wg-radius) var(--wg-radius) 0 0;
box-shadow:var(--wg-shadow);
}
.login-wrapper .card{
margin-top:0;
border-top:0;
border-radius:0 0 var(--wg-radius) var(--wg-radius);
padding-top:18px;
}
/* 品牌區內的字級：對齊原型 */
.login-wrapper .logo-area h1{ font-size:1.18rem; line-height:1.35; }
.login-wrapper .logo-area > p{ font-size:.76rem; color:var(--wg-faint); margin-top:3px; }
/* (b) 拿掉問候語，說明文字降成一句小字 */
.login-wrapper .card > h2{ display:none; }
.login-wrapper .card .subtitle{
font-size:.78rem;
color:var(--wg-faint);
line-height:1.7;
margin-bottom:16px;
}
/* Google 按鈕：字級對齊原型 */
.login-wrapper .btn-google{ font-size:.88rem; }
/* 功能清單 */
.login-wrapper .info-item{ font-size:.79rem; line-height:1.6; }
.login-wrapper .footer-text{ font-size:.7rem; }
/* ============================================================================
7. 全站健檢：對比、鍵盤焦點、控制項高度
----------------------------------------------------------------------------
把整個 kit 用程式量過一遍（六個寬度 × 九頁，逐一計算每個文字節點與它實際
背景的 WCAG 對比值），下面是量出來、而不是看出來的問題。都不需要動 HTML。
========================================================================== */
/* --- (a) --wg-faint 太淺，全站最普遍的一個問題 --- */
/* 實測 #8791a3 在白底上只有 3.18，AA 小字要 4.5。
它不是只用在一兩個地方：表頭、每一列的第二行灰字（「網路基因 · 辦公用品」）、
麵包屑、統計卡的說明、「結案」標籤、搜尋框的提示文字 —— 全部都是它。
也就是說系統裡所有的「次要資訊」現在都在及格線以下。
改成 #636e83：白底 5.14 / 頁面底色 4.57 / 斑馬紋 4.66 / 橘色待辦列 4.53，
四種背景全部過關，而且明度只降一階，視覺層次（主要 vs 次要）沒有變。
★ 這是 token 層的問題，正確的位置是 webgene-tokens.css。
我在這裡覆蓋是因為那個檔不歸我改。請把新值同步回 tokens 檔，
出勤系統吃的是同一個 token，那邊也一樣受惠。 */
:root{
--wg-faint:#636e83;
}
/* --- (b) 側欄的次要文字對比只有 2.9 --- */
/* 「會計管理系統」「主管」「業務申請 / 主資料 / 系統」用的是 app.css 的
--sidebar-muted:#64748b。在側欄漸層上半段是 3.51、下半段只有 2.89。
分組標題又只有 10px，實際上是看不清楚的。
#94a3b8 → 上半 6.51 / 下半 5.36，兩端都過。
用它自己的變數覆蓋，不動任何選擇器。 */
.sidebar{
--sidebar-muted:#94a3b8;
}
/* 分組標題（.nav-label）10px 對中文太小，補回 11px。側欄是固定寬度，
這個調整完全不影響內容區的 824px 限制。 */
.sidebar .nav-label{ font-size:11px; }
/* --- (b2) 使用者頭像不該是橘色 --- */
/* 這是我自己違反了自己訂的規則：橘色 = 需要你處理。
頭像不需要任何動作，它只是「你是誰」。而且白字配 #e35a28 對比 3.65，
一樣不及格。改成鋼藍（白字 6.14 過關），側欄裡的橘就只剩三個地方：
品牌方塊、目前所在頁面、待辦數字 —— 全部都是「品牌」或「要你動」。 */
.sidebar .user-avatar,
.sidebar .user-avatar-placeholder{
background:var(--wg-accent-ink);
background-image:none;
color:#fff;
}
/* --- (c) 側欄紅點數字：白字配 #e35a28 只有 3.65 --- */
/* 那是「你有幾件事沒處理」，是側欄裡資訊密度最高的一個元素，卻是對比最低的。
底色換成 --wg-brand-ink 那一階（#b0431b），白字 5.73 過關；
在深藍側欄上仍然是同一個橘色家族，看起來沒有變。字級 10→11px。 */
.sidebar .nav-badge{
background:#b0431b;
font-size:11px;
}
/* --- (d) 鍵盤焦點：整個系統沒有任何可見的焦點框 --- */
/* app.css 的 .search-input input 寫了 outline:none，其他按鈕則是瀏覽器
預設被 reset 掉。用鍵盤 Tab 走一遍，完全看不出游標在哪裡。
財務系統有大量純鍵盤操作的輸入流程（審核 → Tab → 送出），這一條要補。
用 :focus-visible 而不是 :focus —— 滑鼠點擊不會跳框，只有鍵盤操作才顯示。 */
.content-area a:focus-visible,
.content-area button:focus-visible,
.content-area input:focus-visible,
.content-area select:focus-visible,
.content-area textarea:focus-visible,
.sidebar a:focus-visible,
.topbar button:focus-visible,
.topbar a:focus-visible{
outline:2px solid var(--wg-accent-ink);
outline-offset:2px;
border-radius:4px;
}
/* 搜尋框 focus 時的光暈是寫死的 rgba(37,99,235,.1) —— 那是改版前的靛藍，
整套系統唯一殘留的舊主色。換成鋼藍。 */
.search-input input:focus{
border-color:var(--wg-accent-ink);
box-shadow:0 0 0 3px rgba(65,100,139,.14);
}
/* --- (e) 篩選列：搜尋框 33px、下拉選單 40px，兩個並排卻不等高 --- */
/* 差 7px，看起來像沒對齊。統一成 38px（比 40 省一點高度，
599px 的畫面每一列都要省）。 */
.filter-bar .search-input input,
.filter-bar select{
height:38px;
}
/* --- (f) 手機漢堡鈕的顏色沒設定過，吃到瀏覽器預設黑 --- */
.sidebar-toggle{ color:var(--wg-ink); }
/* --- (g) 表單裡的金額欄位：等寬、右對齊 --- */
/* 列表上的金額全部是等寬右對齊，唯獨輸入的時候變成靠左的中文字體。
同一個數字在同一個系統裡應該長一樣，而且金額靠右才好核對位數。 */
.form-control[type="number"],
input[name="PayAmount"],
input[name="Amount"],
input[name="TotalAmount"]{
font-family:var(--wg-mono);
font-variant-numeric:tabular-nums;
text-align:right;
}
/* --- (h) 登入頁說明文字：限寬，避免最後一行只剩三個字 --- */
.login-wrapper .card .subtitle{
max-width:23em;
margin-left:auto;
margin-right:auto;
}
/* ============================================================================
8. 給工程的回覆（README 最後那六個問題）
----------------------------------------------------------------------------
1. 收入／支出列表要不要比照併欄？
不要（9/02 更新：原本回答「要，但先不做」，現在是明確不做）。
我把併欄後的樣子做成對照圖給設計端看過，評估後決定維持九欄：
併欄雖然讓每一欄變寬，但「發票開立公司」和「專案」降成第二行灰字之後，
在核帳的情境下反而比較難掃。這兩欄對會計是主要欄位，不是附註。
所以九欄維持，只做申請人前綴的字串清理（見文末第 2 項）。
2. 儀表板要不要加「待審核金額」？
不要。你們 8/04 從 6 格縮到 3 格的理由是對的，現在 4 格在 1152px
已經在截字（見上面第 1 節）。加第 5 格會讓同樣的問題更嚴重。
「待你審核」給筆數就夠了 —— 那是一個「要不要現在處理」的判斷，
不是金額判斷；金額點進去就看得到。
3. 手機版「次要欄位收進展開」要不要做？
不要。你的判斷是對的：599px 已經一屏五六筆，多一層互動是負擔。
第三行那句灰字保持現在這樣。
4. 儀表板「待你審核」三面板合成一張清單？
要，但需要你們動 app.js。這一版我先用 CSS 讓它一欄堆疊（第 2 節），
至少解決中文直排。真正合成一張清單的規格：
・一張表，欄位＝類別 / 事由 / 申請人 / 金額 / 申請日 / 動作
・類別用現在的灰色外框標籤（發票 / 支出 / 雜項）
・沒有待辦時，整個區塊用一句「目前沒有待處理項目。」帶過，
不要三個空盒子
這一項的價值最高，因為它是登入後第一眼。
5. 深色模式？
先不要開。你列的理由（app.css 還有 81 處寫死色、@media print 會變空白紙）
完全成立 —— 支出單和勞報單要印出來給人簽，印壞比沒有深色模式嚴重得多。
等寫死色補完、列印樣式獨立出來之後再談。
6. LIGHT / DARK / AUTO 切換鈕要不要？
不要。原型第 1 頁那三顆是我做給你們看的展示工具，不是產品功能。
跟著系統設定走就好，少一個要維護的狀態。
----------------------------------------------------------------------------
另外回應你們列的兩個規範漏洞：
・「hover 才轉紅」在觸控裝置不成立 —— 你說得對，那條規則等於沒寫。
刪除鈕請改成：平時就是中性外框（不要行內 style），
真正的紅色只出現在「確認刪除」那個對話框的主要按鈕上。
這樣觸控和滑鼠的行為一致，紅色也回到它該在的位置：不可逆的那一下。
・原型沒畫詳情頁 —— 確實，那是我漏的。詳情頁是實際按下審核的地方，
比列表更重要。style-guide 你補的那一節我看過，方向對。
----------------------------------------------------------------------------
需要你們動 HTML / JS 的兩件事（CSS 做不到）：
1. 登入頁頁尾年份
preview/login.html 與正式站的登入頁
© 2025 WebGene Information Co., Ltd.
→ © 2026 WebGene Information Co., Ltd.
2. 申請人欄位的「[WebGene] 」前綴請在畫面上拿掉
★ 這是設計端 9/02 拍板的唯一一項資料呈現變更。
資料是 API 給的（PmUserName: '[WebGene] Ivy張琬萍'），CSS 沒有辦法
砍掉文字節點的一段字，所以要在 app.js 的渲染處理掉。
建議做法（一個共用函式，三張列表 ＋ 儀表板 ＋ 詳情頁都套）：
const stripOrg = s => (s || '').replace(/^\s*\[[^\]]+\]\s*/, '');
然後把 r.PmUserName / r.request_user / r.pm_user 換成 stripOrg(...)。
用正則而不是寫死 '[WebGene] '，是因為資料裡已經有沒帶前綴的
'Mouse施俊宇'，而且之後若有別家公司的名字也會被正確處理。
只動顯示，不要動資料庫、不要動搜尋比對的來源字串
（搜尋框仍然應該搜得到 WebGene，只是不顯示）。
效果（1152px 的 824px 內容區，實測同一批資料）：
現況 儲存格最多 4 行、平均 2.33 行、列高 111px
拿掉後 儲存格最多 3 行、平均 1.95 行、列高 89px
----------------------------------------------------------------------------
設計端 9/02 已決定、不要做的事（不用再等規格）：
・不併欄。發票／支出列表維持九欄，版型不動。
（我提過比照雜項併成七欄，設計端評估後不採用。）
・公司名稱一律完整顯示，不做任何縮寫或降階。
「匯豐汽車股份有限公司」就是完整這樣顯示，字級、顏色跟其他欄位一致。
我原本提議把「股份有限公司」變小灰字，這一項取消 ——
財務系統的公司全名有法定意義，不應該為了版面被弱化。
（原本要請你們包的 不需要了，
對應的 CSS 我也已經從這個檔案裡刪掉。）
所以九欄在 1152px 仍然會折行，那是已知且被接受的狀態，不是 bug。
要再進一步只剩併欄一途，那已經明確不做了。
========================================================================== */
|