/* ══════════════════════════════════════════════════════════════════════════════
AWE theme.css — 全站樣式單一源（UX2 切片 1）
══════════════════════════════════════════════════════════════════════════════
來源：design-demo.php ／ design-demo-pending.php 的 394 行共用 CSS（兩檔逐字相同，
R3 定稿＝標準答案）＋ 待入倉專屬層中屬於「全站共用元件」的部分，抽成本檔。
自本檔起：
① Token 層（--awe-*）＝所有數值只在 §1 出現一次；
② 元件層只准 var()，不准再寫字面值；
③ _layout.php／login.php／兩頁 demo／styleguide.php 全部吃這一份，禁第二份 copy。
樣式看板（living styleguide）＝ styleguide.php，吃真 token＋真元件、所見即真相。
解掉的盤點 ID（AWE-design-sweep-r1.md）：
DS-01 02 03 04 05 06 07 08 11 19 29 45 47 48 49 57 59 70 78 80 89 92（T 類 22 條）
DS-D1 D2 D3 D4（token 缺階）＋ DS-D8（CSS 重複兩份）
拍板③（2026-08-11 papalu）：統計帶可點性規則入 token 層 → 見 §7「可點 vs 不可點」。
══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
§1 C 層 — AWE Theme Tokens（單一張表）
══════════════════════════════════════════════════════════════════════════════ */
:root{
/* ── 1.1 字型棧（DS-02；zh-Hant 優先。Tabler 預設的 Inter 不含中文，會 fallback 到系統雜牌字） */
--awe-font-sans: system-ui, -apple-system, "Segoe UI", "PingFang TC", "Noto Sans TC",
"Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
--awe-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Noto Sans Mono", monospace;
/* ── 1.2 字階表（size / line-height / weight）─ 後台密度，但層次要拉得開 */
--awe-fs-display: 26px; --awe-lh-display: 32px; --awe-fw-display: 600; /* 統計卡數值 */
--awe-fs-title: 20px; --awe-lh-title: 28px; --awe-fw-title: 600; /* 頁標題 */
--awe-fs-section: 15px; --awe-lh-section: 22px; --awe-fw-section: 600; /* 區塊／卡片標題 */
--awe-fs-body: 14px; --awe-lh-body: 22px; --awe-fw-body: 400; /* 內文／表格內容 */
--awe-fs-label: 13px; --awe-lh-label: 20px; --awe-fw-label: 600; /* 表頭／表單標籤 */
--awe-fs-caption: 12px; --awe-lh-caption: 18px; --awe-fw-caption: 500; /* 註記／pretitle */
/* DS-D1：徽章階。原本 11px/16px 以字面值散在 8 個元件（badge-cat／badge-flag／badge-state／
badge-day／rc-fact dt／wh-card small／cell-code／cell-sub），token 表最小卻只到 caption 12px。 */
--awe-fs-badge: 11px; --awe-lh-badge: 16px; --awe-fw-badge: 500;
/* 最小階：表頭單位小字（件）與倉別快捷鍵角標。比徽章再小一階，只承載附註不承載資訊主體。 */
--awe-fs-micro: 10px; --awe-lh-micro: 13px;
/* DS-D4：統計數值的兩個離階尺寸收進字階表。
display-lg＝該頁主角（看板的「可售」）；display-sm＝次級分段帶（各倉存量）。 */
--awe-fs-display-lg: 30px; --awe-lh-display-lg: 36px;
--awe-fs-display-sm: 20px; --awe-lh-display-sm: 26px;
/* 動作前要對的數字（入倉 modal 的排程／已入倉／剩餘三 tile） */
--awe-fs-fact: 18px; --awe-lh-fact: 24px;
/* DS-D3：分段帶專用行高。原本 line-height:18px 字面重複在 band-cap／section-label／
section-hint／day-sep 四處。 */
--awe-lh-band: 18px;
/* ── 1.3 色票（品牌紅紀律：每頁一顆主 CTA ＋ active 態；其餘中性；danger 分離） */
--awe-brand: #E51D52;
--awe-brand-ink: #C21543;
--awe-brand-soft: rgba(229, 29, 82, .08);
--awe-brand-line: rgba(229, 29, 82, .32);
--awe-brand-tint: rgba(229, 29, 82, .14); /* 選中態的圖示底 */
--awe-danger: #D63939; /* 破壞性動作／負庫存專用，與品牌紅分工 */
--awe-danger-soft: rgba(214, 57, 57, .07);
--awe-danger-tint: rgba(214, 57, 57, .12);
--awe-danger-line: rgba(214, 57, 57, .28);
--awe-warn: #B26A00; /* partial／琥珀語意 */
--awe-warn-soft: rgba(247, 168, 37, .14);
--awe-warn-line: rgba(247, 168, 37, .4);
--awe-ok: #2A7F4F; /* done／綠語意 */
--awe-ok-soft: rgba(47, 179, 68, .12);
--awe-ok-line: rgba(47, 179, 68, .35);
--awe-ok-dot: #2FB344; /* 資料時效綠點 */
--awe-ink-1: #182433; /* 主文 */
--awe-ink-2: #667382; /* 次文／表頭 */
--awe-ink-3: #A0AAB5; /* 弱化：零值、佔位 */
--awe-line: #E7EAEF;
--awe-surface: #FFFFFF;
--awe-surface-2: #F7F9FC;
--awe-canvas: #F3F5F9; /* DS-03 */
/* ── 1.4 圓角節奏（DS-04／DS-05） */
--awe-radius-card: 10px;
--awe-radius-control: 6px;
--awe-radius-sm: 4px; /* 控件內的內層元素（seg-tab 內軌、縮圖框） */
--awe-radius-xs: 3px; /* 角標（倉別快捷鍵） */
--awe-radius-pill: 999px;
/* ── 1.5 陰影兩階（1＝靜置卡片；2＝浮起／選單／hover） */
--awe-shadow-1: 0 1px 2px rgba(24, 36, 51, .04), 0 1px 3px rgba(24, 36, 51, .05);
--awe-shadow-2: 0 6px 16px rgba(24, 36, 51, .09), 0 2px 6px rgba(24, 36, 51, .04);
/* sticky 動作列的「往上浮」陰影：與 shadow-2 同族但方向朝上（DS-78） */
--awe-shadow-up: 0 -6px 16px rgba(24, 36, 51, .07), 0 -2px 6px rgba(24, 36, 51, .04);
/* ── 1.6 密度（後台工作介面：舒適但不鬆散）
後台的「舒適」不等於「鬆」——螢幕高度是有限資源，上方每多留 40px，表格就少看兩列。
這一組值是「一屏能看到多少列」與「不擁擠」之間的取捨點。 */
--awe-row-h: 38px; /* 表格資料列高（含 1px 底線）＝「一屏看得到幾列」的唯一旋鈕 */
--awe-row-y: .3125rem; /* 表格列上下最小內距（內容換行時的呼吸；單行列高由 --awe-row-h 定） */
--awe-cell-x: .625rem; /* 表格欄左右內距 */
--awe-card-pad: 1.25rem; /* 卡片內距（＝表格貼卡緣的第一／最後一欄內距） */
--awe-seg-y: .5rem; /* 統計帶分段上下內距 */
--awe-seg-h: 5rem; /* 統計帶分段最小高（80px）＝可點／不可點段共用的同一格線，
拍板⑥：分段高度不准隨「有沒有圖示／是不是 band-sm」浮動 */
--awe-gap: 1rem; /* 區塊間距 */
--awe-page-y: .625rem; /* 頁面上下呼吸 */
/* ── 1.7 控件高度
control-h ＝ 篩選列所有控件（搜尋框／下拉／switch）共用同一個高度
control-h-sm ＝ DS-D2：緊湊控件（seg-tab／chip／列操作鈕）。原本 28px 字面重複三處，
同時也是 WCAG 2.5.8 觸擊目標的本站取值。 */
--awe-control-h: 38px;
--awe-control-h-sm: 28px;
--awe-control-h-lg: 46px; /* modal 主數量欄（DS-47） */
/* ── 1.8 圖示（inline SVG data URI；不引第三個外部依賴）
下拉 chevron 與側欄／使用者選單同一支 Tabler chevron-down（DS-19），色走 ink-3。 */
--awe-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A0AAB5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
/* 可點分段的右上小箭頭（拍板③）。用 mask 上色，故顏色跟著 currentColor 走。 */
--awe-icon-arrow-ur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7l-10 10'/%3E%3Cpath d='M8 7l9 0l0 9'/%3E%3C/svg%3E");
}
/* ── 1.9 相容別名 ────────────────────────────────────────────────────────────
`--tctf` / `--tctf-soft` 是舊 _layout.php 定義的品牌色變數，正式頁仍有 inline style
直接引用（例：balances.php 的合計卡 border-color:var(--tctf)）。本片不動 markup，
故保留別名並指回 token，等它們的 markup 在後續切片退場後再刪。 */
:root{
--tctf: var(--awe-brand);
--tctf-soft: var(--awe-brand-soft);
}
/* ══════════════════════════════════════════════════════════════════════════════
§2 C → A 橋接層：把 token 灌回 Tabler 自己的變數名（DS-01）
══════════════════════════════════════════════════════════════════════════════
這是「A＋C」的接點——Tabler 全套元件（btn / card / table / dropdown / form…）
不用逐一貼補丁就會自動說我們的設計語言。 */
:root{
--tblr-font-sans-serif: var(--awe-font-sans);
--tblr-font-monospace: var(--awe-font-mono);
--tblr-body-font-size: var(--awe-fs-body);
--tblr-body-line-height: var(--awe-lh-body);
--tblr-body-color: var(--awe-ink-1);
--tblr-secondary: var(--awe-ink-2);
--tblr-font-size-h2: var(--awe-fs-title);
--tblr-line-height-h2: var(--awe-lh-title);
--tblr-primary: var(--awe-brand);
--tblr-primary-rgb: 229, 29, 82;
--tblr-primary-darken: #C21543;
--tblr-primary-lt: #FDEAEF;
--tblr-primary-lt-rgb: 253, 234, 239;
--tblr-link-color: var(--awe-brand);
--tblr-link-color-rgb: 229, 29, 82;
--tblr-link-hover-color: var(--awe-brand-ink);
--tblr-link-hover-color-rgb: 194, 21, 67;
--tblr-border-radius: var(--awe-radius-control);
/* DS-05 續｜Tabler 的 -sm／-lg 尺寸修飾詞不是讀 --tblr-border-radius，而是各自的
--tblr-border-radius-sm(2px)／-lg。`.form-control-sm`／`.btn-sm` 因此仍是 2px 直角感，
只覆蓋主 token 修不到（實測 .form-control 仍取回 2px）。控件圓角是一個節奏，
不因為控件變小就換一種，故三顆一起指回 --awe-radius-control。 */
--tblr-border-radius-sm: var(--awe-radius-control);
--tblr-border-radius-lg: var(--awe-radius-control);
--tblr-border-color: var(--awe-line);
--tblr-border-color-translucent: var(--awe-line);
--tblr-card-border-radius: var(--awe-radius-card);
--tblr-card-box-shadow: var(--awe-shadow-1);
--tblr-bg-surface: var(--awe-surface);
--tblr-bg-surface-secondary: var(--awe-surface-2);
--tblr-page-padding-y: var(--awe-page-y);
}
/* DS-19｜下拉 chevron 換成與側欄／使用者選單同一支圖（色走 ink-3）。
陷阱：Tabler 把 --tblr-form-select-bg-img 直接宣告在 `.form-select{}` 規則裡，
而不是在 :root。元素自己身上的 custom property 一定贏過從 :root 繼承下來的那份，
所以只改 :root 完全沒效果（實測仍取回 Tabler 的 viewBox 0 0 16 16 原圖）。
要在同一層（.form-select）覆蓋，靠後載入的順序取勝。 */
.form-select{ --tblr-form-select-bg-img: var(--awe-icon-chevron-down); }
body{ background: var(--awe-canvas); }
/* Tabler 把表單 focus 的 border-color 硬寫成 Tabler 藍（不走 token），光暈卻讀 primary-rgb
-> 聚焦會變「藍框＋紅光暈」。邊框拉回同一顆 primary，focus 只剩一個色相。 */
.form-control:focus,.form-select:focus,.form-check-input:focus{
border-color: rgba(var(--tblr-primary-rgb), .5);
}
/* P2-19 配套：篩選頁籤／分組 chip／盤差原因 chip 一律走 outline-secondary + .active。
Tabler 的 .btn 基底把 --tblr-btn-active-border-color 綁在 --tblr-primary 上，token 換成
品牌紅之後「選取中」會多出一圈紅框（看起來像警示）-> 拉回 secondary，紅色仍然稀缺。 */
.btn-outline-secondary.active{ --tblr-btn-active-border-color: var(--tblr-secondary); }
/* ── 拍板④（2026-08-11 papalu 眼驗）｜文字連結全站不用底線（含 hover）─────────
修訂 DS-29：原規格是「表內連結 ink-1，hover 轉品牌紅＋加底線」。眼驗結論是底線本身
就是噪音——一屏 40 列，滑鼠掃過去每一列都閃一條線，而且分頁 segmented 這種「看起來
是控件、實作是 」的元件被畫上底線後直接讀成壞掉。新規則：**hover 只變色，不加
底線**；可點性靠色彩、hover 換底、游標與（統計帶的）箭頭去講，不靠底線。
為什麼要寫在這裡：Tabler(Bootstrap reboot) 有 `a:hover{text-decoration:underline}`
(0,1,1)，比 `.seg-tab{text-decoration:none}`(0,1,0) 高一階 → 元件層自己寫 none 擋不住，
一定要在同層（`a:hover`）用後載入順序取勝。`.breadcrumb a:hover`(0,2,1) 與
`.btn-link:hover`(0,2,0) 比 `a:hover` 高一階，各自點名，否則會單獨漏網。
（Tabler 全庫掃過只有這四條會畫底線，第五條 `abbr[title]` 不是連結、刻意保留。） */
a,a:hover,a:focus,
.breadcrumb a:hover,
.btn-link:hover,.btn-link:focus-visible{ text-decoration: none; }
/* ══════════════════════════════════════════════════════════════════════════════
§3 A 層 — 側欄（DS-11）
══════════════════════════════════════════════════════════════════════════════ */
.navbar-vertical{ background: var(--awe-surface); border-right: 1px solid var(--awe-line); }
.navbar-brand-image{ height: 2.4rem; }
.navbar-vertical .navbar-brand{ padding: .875rem 1rem !important; justify-content: flex-start !important; }
/* 品牌文案＝拍板名「TCTF 進銷存系統」，沿用 _layout.php 的兩行排法（TCTF ／ 進銷存系統）。 */
.sb-brand-text{ font-size: var(--awe-fs-section); line-height: 1.2; font-weight: var(--awe-fw-section);
color: var(--awe-ink-1); }
.sb-brand-text .sb-brand-line{ display: block; }
.navbar-vertical .navbar-nav{ padding: .25rem .625rem .5rem; gap: 2px; }
.navbar-vertical .navbar-nav .nav-link{
position: relative;
border-radius: var(--awe-radius-control);
font-size: var(--awe-fs-body); line-height: var(--awe-lh-body); color: var(--awe-ink-2);
transition: background-color .12s ease, color .12s ease;
}
.navbar-vertical .navbar-nav .nav-link:hover{ background: var(--awe-surface-2); color: var(--awe-ink-1); }
.navbar-vertical .navbar-nav .nav-link.active{
background: var(--awe-brand-soft); color: var(--awe-brand); font-weight: 600;
}
/* DS-11｜active 的左側品牌色指示條：稀缺的紅只用在「你在這裡」與主 CTA */
.navbar-vertical .navbar-nav .nav-link.active::before{
content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
width: 3px; border-radius: 0 3px 3px 0; background: var(--awe-brand);
}
.navbar-vertical .navbar-nav .nav-link .nav-link-icon{ color: inherit; opacity: .85; }
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon{ opacity: 1; }
/* Tabler 有一條「橫向 navbar 圖示鈕角標」規則（position:absolute）會誤套到直立側欄，
把 badge 抽離文流釘在右上角。收回 flex 流、靠 margin-left:auto 收在同一列右端。 */
.navbar-vertical .navbar-nav .nav-link > .badge{
position: static; transform: none; flex: none; margin-left: auto;
font-size: var(--awe-fs-badge); font-weight: 600;
}
.badge.bg-tctf,.badge.bg-tctf-solid{ background: var(--awe-brand); color: #fff; }
.badge.badge-frozen{ background: transparent; color: var(--awe-ink-2); border: 1px solid var(--awe-line);
font-weight: 500; }
/* ══════════════════════════════════════════════════════════════════════════════
§4 資料時效狀態 ＋ 使用者選單 ＋ 下拉
══════════════════════════════════════════════════════════════════════════════ */
.awe-stamp{ display: inline-flex; align-items: center; gap: .5rem;
font-size: var(--awe-fs-caption); line-height: var(--awe-lh-caption); color: var(--awe-ink-2); }
.awe-stamp .status-dot{ --tblr-status-color: var(--awe-ok-dot); }
.awe-user{ display: flex; align-items: center; gap: .5rem; padding: .25rem .375rem;
border-radius: var(--awe-radius-control); }
.awe-user:hover{ background: var(--awe-surface-2); }
.awe-user .avatar{ background: var(--awe-brand); color: #fff; font-weight: 600; }
.awe-user-name{ font-size: var(--awe-fs-body); line-height: 1.15; font-weight: 600; color: var(--awe-ink-1); }
.awe-user-role{ font-size: var(--awe-fs-caption); line-height: 1.3; color: var(--awe-ink-2); margin-top: 2px; }
.awe-user .icon-chevron{ width: 1rem; height: 1rem; color: var(--awe-ink-3); }
.dropdown-menu{ box-shadow: var(--awe-shadow-2); border-color: var(--awe-line);
border-radius: var(--awe-radius-control); }
/* Tabler 的 .dropdown-header 寫死 text-transform:uppercase → 帳號名與中文角色都被大寫掉
（papalu（管理者）會變成 PAPALU（管理者））。帳號大小寫是資料，不該被樣式改寫。 */
.dropdown-header{ text-transform: none; letter-spacing: 0; font-size: var(--awe-fs-caption);
color: var(--awe-ink-2); }
.dropdown-item{ font-size: var(--awe-fs-body); display: flex; align-items: center; gap: .5rem; }
.dropdown-item .icon{ width: 1rem; height: 1rem; color: var(--awe-ink-2); }
/* ══════════════════════════════════════════════════════════════════════════════
§5 page-header
══════════════════════════════════════════════════════════════════════════════ */
.page-pretitle{ font-size: var(--awe-fs-caption); line-height: var(--awe-lh-caption);
font-weight: var(--awe-fw-caption); letter-spacing: .06em; color: var(--awe-ink-3);
text-transform: none; margin-bottom: 2px; }
.page-title{ font-size: var(--awe-fs-title); line-height: var(--awe-lh-title);
font-weight: var(--awe-fw-title); color: var(--awe-ink-1); letter-spacing: -.01em; }
.page-subtitle{ font-size: var(--awe-fs-caption); line-height: var(--awe-lh-caption);
color: var(--awe-ink-2); margin-top: .25rem; }
.page-header .btn{ border-radius: var(--awe-radius-control); }
.page-header .btn-primary{ box-shadow: 0 1px 2px rgba(229, 29, 82, .28); }
/* page-header 右側收納區：資料時效 → 動作鈕 → （分隔）使用者選單，同一列由左而右。
排序照「這批資料多新 → 我要對它做什麼 → 我是誰」的閱讀順序；帳號依慣例收在最右。 */
.ph-utility{ display: flex; align-items: center; justify-content: flex-end;
gap: .75rem; flex-wrap: wrap; }
.ph-sep{ width: 1px; align-self: stretch; margin: .25rem 0; background: var(--awe-line); }
/* ══════════════════════════════════════════════════════════════════════════════
§6 卡片與區塊標題（DS-04／DS-57／DS-70／DS-80）
══════════════════════════════════════════════════════════════════════════════ */
.card{ border-radius: var(--awe-radius-card); border: 1px solid var(--awe-line);
box-shadow: var(--awe-shadow-1); background: var(--awe-surface); }
/* DS-57／DS-80｜Tabler 的 .card-title 是 16px/500 ＝ 與內文同權重、層級講不清楚。
DS-70｜Tabler 的 .h5/h5 是 .75rem(12px) ＝ 比 14px 內文還小，層級倒置（import 的
「近期匯入批次」實測 12px）。兩者一起拉回同一階 section 15px/600。 */
.card-title,.h5,h5{
font-size: var(--awe-fs-section); line-height: var(--awe-lh-section);
font-weight: var(--awe-fw-section); color: var(--awe-ink-1);
}
.card-header .card-title{ margin: 0; }
.section-label{ font-size: var(--awe-fs-label); line-height: var(--awe-lh-label);
font-weight: var(--awe-fw-label); color: var(--awe-ink-2); display: flex; align-items: center; gap: .375rem; }
.section-label .icon{ width: 1rem; height: 1rem; color: var(--awe-ink-3); }
.section-hint{ font-size: var(--awe-fs-caption); color: var(--awe-ink-3); }
/* ══════════════════════════════════════════════════════════════════════════════
§7 統計帶（KPI band）
══════════════════════════════════════════════════════════════════════════════
兩條帶：帶 1＝總量（品項數／可售／在手總量／負庫存），帶 2＝各倉存量。
刻意做成「一張卡內以分隔線切段」，而不是 N 張等寬小卡：
等寬小卡讓 7 個數字視覺同權重（現行版的主要問題），分段帶才有主從。 */
.band{ overflow: hidden; }
/* ── 拍板⑥（2026-08-11 papalu 眼驗）｜分段高度是一條格線，不是內容算出來的副產品 ──
問題：可點段（有 .stat-ico 32px）算出來 80px、不可點段（band-sm、無圖示）算出來 63px，
兩張帶並排時高度差 17px，讀起來像其中一張沒做完。而且窄寬度下可點段內容一換行就
竄到 116px，落差更大。可點性應該只由「箭頭／hover」講（拍板③），高度不該一起變成
第二個訊號——那會讓人以為高度也有意義。
解法：min-height 鎖在同一顆 token，內容用 flex 垂直置中撐在格線裡；內容變高時仍可
自然長高（min-height 是地板不是天花板），但地板全站同一條。 */
.seg{ position: relative; padding: var(--awe-seg-y) var(--awe-card-pad);
min-height: var(--awe-seg-h);
display: flex; flex-direction: column; justify-content: center;
border-right: 1px solid var(--awe-line); border-bottom: 1px solid var(--awe-line); }
/* 兩層階梯（總量／各倉）收進同一張卡，用一條分隔線分層而不是分成兩張卡。 */
.band-cap{ display: flex; align-items: baseline; gap: .5rem; line-height: var(--awe-lh-band);
padding: .125rem var(--awe-card-pad); background: var(--awe-surface-2);
border-top: 1px solid var(--awe-line); border-bottom: 1px solid var(--awe-line); }
.band-cap .section-label{ font-size: var(--awe-fs-caption); line-height: var(--awe-lh-band); }
.band-cap .section-label .icon{ width: .875rem; height: .875rem; }
.band-cap .section-hint{ line-height: var(--awe-lh-band); }
.stat-label{ font-size: var(--awe-fs-caption); line-height: var(--awe-lh-caption);
font-weight: var(--awe-fw-caption); letter-spacing: .04em; color: var(--awe-ink-2); }
/* 拍板⑦（2026-08-11 papalu 眼驗）｜數值與單位是一個詞，不准被拆行。
症狀：分段一窄（實測 1200px 下 col-4＝150px）就把「1,284 件」的「件」擠到第二行，
看起來像多了一列空資料，也把同一排分段的高度一起撐開。
為什麼是 word-break:keep-all 而不是 white-space:nowrap：
斷點發生在「數字→漢字」這個 UAX#14 的隱性換行機會上，keep-all 正是用來關掉它的；
nowrap 則是把**整串**的換行機會全關掉——複合數值（demo-pending 的
「19筆 ／10-500（件）」）在 375px 下就會直接溢出分隔線（實測溢出 41px）。
keep-all 只黏住「數值＋單位」這個詞，兩個詞之間的空白仍可換行 → 窄寬度優雅換行、
每個詞自身永不拆開。實測 375／576／768／992／1200／1440 六檔皆 0 溢出且單位不離行。 */
.stat-value{ font-size: var(--awe-fs-display); line-height: var(--awe-lh-display);
font-weight: var(--awe-fw-display); color: var(--awe-ink-1);
font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: .125rem;
word-break: keep-all; }
.band-sm .stat-value{ font-size: var(--awe-fs-display-sm); line-height: var(--awe-lh-display-sm); }
.stat-unit{ font-size: var(--awe-fs-caption); font-weight: 500; color: var(--awe-ink-3); margin-left: .25rem; }
.stat-ico{ width: 2rem; height: 2rem; border-radius: var(--awe-radius-control);
display: inline-flex; align-items: center; justify-content: center;
background: var(--awe-surface-2); color: var(--awe-ink-2); flex: none; }
.stat-ico .icon{ width: 1.125rem; height: 1.125rem; }
/* 「可售」＝這頁的主角，靠字級與品牌色圖示拉出主從，不靠放大卡片（FN3 定案 2 起；
一頁只給一顆 .stat-primary——兩顆並排就等於沒有主角） */
.stat-primary .stat-ico{ background: var(--awe-brand-soft); color: var(--awe-brand); }
.stat-primary .stat-value{ font-size: var(--awe-fs-display-lg); line-height: var(--awe-lh-display-lg); }
.stat-danger{ background: var(--awe-danger-soft); }
.stat-danger .stat-label,.stat-danger .stat-value{ color: var(--awe-danger); }
.stat-danger .stat-ico{ background: var(--awe-danger-tint); color: var(--awe-danger); }
/* ── 拍板③（2026-08-11 papalu）｜統計帶可點性規則入 token 層 ─────────────────
問題（DS-D6）：demo-bal 的首段是可點下鑽、demo-pending 的首段是死 seg，版位與外觀
完全相同、行為卻不同，使用者無從分辨。
規則：
①「可點」＝ .stat-drill：有 hover 態（換底）＋ 右上一顆小箭頭（affordance 常駐、
低調 ink-3；hover／選中才轉品牌色）。選中用品牌色 inset ring，不是填滿——
飽和紅留給 CTA。
② 「不可點」＝ 純 .seg：無 hover 態、無箭頭、游標不變。
兩者的差別因此是「有沒有那顆箭頭」這一個可以一眼看到的訊號，而不是要靠試點。 */
.stat-drill{ position: relative; cursor: pointer;
transition: background-color .14s ease, box-shadow .14s ease; }
.stat-drill::after{
content: ""; position: absolute; top: .5rem; right: .5rem;
width: .875rem; height: .875rem; background-color: var(--awe-ink-3);
-webkit-mask-image: var(--awe-icon-arrow-ur); mask-image: var(--awe-icon-arrow-ur);
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
opacity: .55; transition: opacity .14s ease, background-color .14s ease;
pointer-events: none;
}
.stat-drill:hover{ background: var(--awe-surface-2); }
.stat-drill:hover::after{ opacity: 1; background-color: var(--awe-brand); }
.stat-drill:focus-visible{ outline: none; box-shadow: inset 0 0 0 2px var(--awe-brand); }
.stat-drill.on{ background: var(--awe-brand-soft); box-shadow: inset 0 0 0 1px var(--awe-brand); }
.stat-drill.on::after{ opacity: 1; background-color: var(--awe-brand); }
.stat-drill.on .stat-label{ color: var(--awe-brand); }
.stat-drill.on .stat-ico{ background: var(--awe-brand-tint); color: var(--awe-brand); }
.stat-danger.stat-drill.on{ background: var(--awe-danger-tint); box-shadow: inset 0 0 0 1px var(--awe-danger); }
.stat-danger.stat-drill::after{ background-color: var(--awe-danger); }
.stat-danger.stat-drill:hover::after,
.stat-danger.stat-drill.on::after{ background-color: var(--awe-danger); }
/* 負庫存卡（正式頁 balances 的 .card-neg）：與 .stat-danger 同一組語意，走 token 不寫死色 */
.card-neg{ border: 1px solid var(--awe-danger); background: var(--awe-danger-soft); }
/* ══════════════════════════════════════════════════════════════════════════════
§8 全 0 空狀態引導
══════════════════════════════════════════════════════════════════════════════
語氣是「下一步怎麼做」而不是警告：中性底、中性字，兩個出口做成連結。 */
.zero-hint{ display: flex; gap: .75rem; align-items: flex-start;
padding: .875rem var(--awe-card-pad); border: 1px solid var(--awe-line);
border-radius: var(--awe-radius-card); background: var(--awe-surface);
box-shadow: var(--awe-shadow-1); }
.zero-hint > .icon{ width: 1.25rem; height: 1.25rem; flex: none; color: var(--awe-ink-3); margin-top: 1px; }
.zero-hint-title{ font-size: var(--awe-fs-label); line-height: var(--awe-lh-label);
font-weight: var(--awe-fw-label); color: var(--awe-ink-1); }
.zero-hint-body{ font-size: var(--awe-fs-caption); line-height: var(--awe-lh-caption);
color: var(--awe-ink-2); margin-top: .125rem; }
.zero-hint-body a{ color: var(--awe-brand); text-decoration: none; font-weight: 600; }
/* 拍板④：hover 只加深顏色，不加底線（見 §2 全站規則） */
.zero-hint-body a:hover{ color: var(--awe-brand-ink); text-decoration: none; }
/* ══════════════════════════════════════════════════════════════════════════════
§9 篩選列（filter bar）與控件（DS-05／DS-19）
══════════════════════════════════════════════════════════════════════════════
一條有節奏的列：所有控件共用 --awe-control-h 同高、同圓角、同 focus 態、同間距，
垂直置中對齊成一條線。篩選列是每天要碰幾十次的工作面，控件長得不齊會一直被讀成
「這頁沒做完」。 */
/* ── 拍板 A（2026-08-12 papalu 准）｜`.toolbar` 負外距歸零：全站 +7px 幾何缺陷的根治 ──
症狀：`_layout.php::filter_bar()` 產出的 `.toolbar` 與 Tabler core 自帶的
`.toolbar{ margin: 0 -.5rem }` **class 撞名**；本節原本只覆寫 padding／flex，margin 沒收，
於是 Tabler 的 -8px 一直贏 → 篩選列外緣比所在 `.card` 左右各寬出 7px（-8 ＋ 卡片 1px 邊框）。
底色透明時肉眼看不出來，但幾何是錯的；切片 5 給 chipbar 上灰底才把同一個根因顯影
（BLOCK-5-1，當時只治了 .tabbar／.chipbar 兩條、本體列為待拍板）。
⚠ 兩頁 demo 的 filter bar 自己也帶 `.toolbar`，一樣是 +7 —— 這一條同時修正標準答案本身
（design bar 位移，前後值記錄於 AWE-slice6a-implement-report.md §2）。 */
.toolbar{ margin-left: 0; margin-right: 0;
padding: .375rem var(--awe-card-pad); border-bottom: 1px solid var(--awe-line);
display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar .form-control,.toolbar .form-select{
height: var(--awe-control-h); min-height: var(--awe-control-h);
font-size: var(--awe-fs-body); line-height: 1.25;
border-radius: var(--awe-radius-control); border: 1px solid var(--awe-line);
background-color: var(--awe-surface); color: var(--awe-ink-1);
box-shadow: none; transition: border-color .12s ease, box-shadow .12s ease; }
.toolbar .form-control::placeholder{ color: var(--awe-ink-3); }
.toolbar .form-control:hover,.toolbar .form-select:hover{ border-color: var(--awe-ink-3); }
.toolbar .form-control:focus,.toolbar .form-select:focus{
border-color: var(--awe-brand); box-shadow: 0 0 0 3px var(--awe-brand-soft); }
/* 搜尋框：左放大鏡、右清除鈕（有字才出現）。padding 預留兩側圖示位，字不會壓到圖示上。
min-width:0 / width:100% 是給 WebKit 的：input 有自帶的 intrinsic 寬度，
不歸零的話 Safari 的 flex item 不肯縮到 flex-basis，篩選列會被撐爆換行。 */
.filter-search{ position: relative; flex: 0 0 260px; max-width: 260px; min-width: 0; }
.filter-search .form-control{ width: 100%; min-width: 0; }
.filter-search .form-control{ padding-left: 2.125rem; padding-right: 2.125rem; }
.filter-search .input-icon-addon{ width: 2.125rem; height: var(--awe-control-h);
color: var(--awe-ink-3); pointer-events: none; }
.filter-search .input-icon-addon .icon{ width: 1rem; height: 1rem; }
.filter-clear{ position: absolute; right: .3125rem; top: 50%; transform: translateY(-50%);
width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: transparent;
border-radius: var(--awe-radius-pill); color: var(--awe-ink-3); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; }
.filter-clear .icon{ width: .875rem; height: .875rem; }
.filter-clear:hover{ background: var(--awe-surface-2); color: var(--awe-ink-1); }
.filter-clear:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--awe-brand-line); }
/* DS-19｜類別下拉：關掉原生外觀，chevron 換成與側欄／使用者選單同一支圖（顏色走 ink-3）。
全站層的替換已由 §2 覆蓋 --tblr-form-select-bg-img 完成；這裡只再收一次位置與內距。 */
.filter-select{ flex: 0 0 168px; max-width: 168px; min-width: 0; }
.filter-select .form-select{ width: 100%; min-width: 0; }
.toolbar .form-select{ appearance: none; -webkit-appearance: none; padding: 0 2rem 0 .75rem;
background-image: var(--awe-icon-chevron-down);
background-repeat: no-repeat; background-position: right .625rem center; background-size: 16px 16px; }
.toolbar .form-control{ padding-top: 0; padding-bottom: 0; }
/* UX2 切片 3｜同列的按鈕收進「緊湊控件」那一階（--awe-control-h-sm 28px），不是 38px。
兩件事各自成立：
① DS-17 講的是**表單控件**（搜尋框／下拉）要 38px，按鈕不在其中；
② 兩階並存本來就是標準答案——demo 的 `.tabbar` 就是 seg-tabs(28px) 與
filter-search(38px) 同一列靠中線對齊，不是硬拉成同一高。
現況 btn-sm 量到 **20px**，比 28px 那一階還矮、不屬於任何一階，這才是要收的缺口。
字級與左右內距都留在原本 btn-sm 的值（12px／.5rem），只有高度升到 28px。
（pending 兩組 btn-group、products 的「類別管理」、product_edit 的分組鈕都在此列；
它們的**形**分別由切片 5／6b（seg-tabs＋chip）與切片 7（DS-39 位置）處理。） */
.toolbar .btn{ height: var(--awe-control-h-sm); min-height: var(--awe-control-h-sm);
display: inline-flex; align-items: center; justify-content: center;
font-size: var(--awe-fs-caption); padding: 0 .5rem; }
/* UX2 切片 3 fix-r1｜⚠ 按鈕群**不得驅動整頁捲軸**（BLOCK-1 的根治）。
`.btn-group` 是 nowrap 的 inline-flex，min-content 寬＝所有鈕相加，放在窄容器裡不會縮、
只會把 document.scrollWidth 一路撐出去。product_edit 的「異動紀錄」分頁在 col-lg-4 窄欄
（992px 下內寬僅 221px），7 顆分組鈕**基準就已經 256px、放不下**（基準本身 992 溢出 32px）；
升到 28px 階後 312px，把溢出帶擴大到整個 992～1200px 窄欄帶。
幾何上「調字級／內距」只能挪動失效的門檻、不能消除它——7 顆鈕在 221px 裡怎麼算都排不完。
所以改成允許換行：群一旦放不下就往下折，寬度永遠 ≤ 容器，整頁溢出結構性歸零
（連基準既有的 21～32px 一併收掉），且不必藏任何一顆鈕（優於水平捲動的隱藏內容）。
換行後的形＝「被折行的一條緞帶」：群的頭尾收圓角、相鄰鈕維持共邊直角（Bootstrap 的
-1px 共邊在圓角下會露出缺口，所以內部維持直角才乾淨），列間留 2px 讓折行看得出來。 */
.toolbar .btn-group{ flex-wrap: wrap; row-gap: 2px; }
.toolbar .btn-group .btn{ border-radius: 0; }
.toolbar .btn-group > :first-child,
.toolbar .btn-group > :first-child .btn{ border-start-start-radius: var(--awe-radius-control);
border-end-start-radius: var(--awe-radius-control); }
.toolbar .btn-group > :last-child,
.toolbar .btn-group > :last-child .btn{ border-start-end-radius: var(--awe-radius-control);
border-end-end-radius: var(--awe-radius-control); }
/* 卡片內嵌用的篩選列（product_edit 的「異動紀錄」分頁）：同一條 .toolbar 的節奏，
但沒有卡片邊界可以貼，所以收掉左右內距與下緣線，免得在分頁內容裡多畫一條假邊界。 */
.toolbar-flush{ padding-left: 0; padding-right: 0; border-bottom: 0; }
/* 「只看有現貨」switch：撐到同高才與左邊兩個控件對得齊；整塊可點。 */
.filter-switch{ display: inline-flex; align-items: center; gap: .5rem;
height: var(--awe-control-h); margin: 0; padding: 0 .375rem 0 0;
font-size: var(--awe-fs-body); color: var(--awe-ink-1); cursor: pointer; }
.filter-switch .form-check-input{ float: none; margin: 0; flex: none; cursor: pointer; }
.filter-switch .form-check-input:checked{ background-color: var(--awe-brand); border-color: var(--awe-brand); }
.filter-switch .form-check-input:focus{ box-shadow: 0 0 0 3px var(--awe-brand-soft); }
.filter-switch .form-check-label{ cursor: pointer; }
/* chip 類（共 N 筆／負庫存 N）不撐滿控件高，但用同一條中線對齊 */
.toolbar .count-pill,.toolbar .neg-pill{ align-self: center; }
/* 負庫存計數徽章：N>0 才出現、點一下＝只看負庫存品項。 */
.neg-pill{ display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
font-size: var(--awe-fs-caption); line-height: var(--awe-lh-caption); font-weight: 600;
color: var(--awe-danger); background: var(--awe-danger-soft);
border: 1px solid var(--awe-danger-line); border-radius: var(--awe-radius-pill);
padding: .125rem .5rem; transition: background-color .14s ease, color .14s ease; }
.neg-pill .icon{ width: .875rem; height: .875rem; }
.neg-pill:hover{ background: var(--awe-danger-tint); }
.neg-pill:focus-visible{ outline: none; box-shadow: 0 0 0 2px rgba(214, 57, 57, .35); }
.neg-pill.on{ background: var(--awe-danger); border-color: var(--awe-danger); color: #fff; }
.count-pill{ font-size: var(--awe-fs-caption); font-weight: 600; color: var(--awe-ink-2);
background: var(--awe-surface-2); border: 1px solid var(--awe-line);
border-radius: var(--awe-radius-pill); padding: .125rem .5rem; }
.scope-note{ display: flex; gap: .375rem; align-items: flex-start;
padding: .5rem var(--awe-card-pad); border-bottom: 1px solid var(--awe-line);
background: var(--awe-brand-soft); color: var(--awe-ink-1);
font-size: var(--awe-fs-caption); line-height: var(--awe-lh-caption); }
.scope-note .icon{ width: 1rem; height: 1rem; flex: none; color: var(--awe-brand); margin-top: 1px; }
/* ══════════════════════════════════════════════════════════════════════════════
§10 表格（DS-06／DS-07／DS-08／DS-29／DS-45）
══════════════════════════════════════════════════════════════════════════════ */
/* 表格內捲吃滿「剩餘視高」：真正的高度由頁尾 fitTable() 每次量測後寫成 inline max-height。
這裡只是 JS 未跑前的保底值。 */
.table-sticky{ max-height: calc(100vh - 20rem); min-height: 15rem; overflow: auto; }
.table{ --tblr-table-bg: var(--awe-surface); margin-bottom: 0; }
/* DS-07｜表頭 surface-2 底：sticky 時與資料列同色就看不出表頭黏住。
sticky 定位只掛在真的有捲動容器的 .table-sticky 上（頁面本身捲動時把表頭釘在視窗頂端
會蓋住內容）——外觀（底色／字階／內距）則全站表頭一致。 */
.table thead th{
background: var(--awe-surface-2);
text-transform: none; /* 專有名詞（Pinkoi 倉）不該被大寫掉 */
font-size: var(--awe-fs-caption); line-height: var(--awe-lh-caption);
font-weight: var(--awe-fw-label); letter-spacing: .03em; color: var(--awe-ink-2);
padding: .375rem var(--awe-cell-x); white-space: nowrap;
border-bottom: 1px solid var(--awe-line);
}
.table-sticky thead th{ position: sticky; top: 0; z-index: 3; }
/* 數量欄表頭做成兩行：倉名（主）＋（件）（單位小字）。 */
.table thead th .th-txt{ display: inline-block; vertical-align: middle; }
.th-main{ display: block; }
.th-unit{ display: block; font-size: var(--awe-fs-micro); line-height: var(--awe-lh-micro);
font-weight: 500; color: var(--awe-ink-3); letter-spacing: 0; }
/* DS-06｜列高與欄內距走 token 而不是各處硬寫：td 的 height 在表格模型裡是「最小高度」，
所以單行列＝--awe-row-h、內容換行的列仍會自己長高（padding 保留呼吸）。 */
.table tbody td{ padding: var(--awe-row-y) var(--awe-cell-x);
height: var(--awe-row-h);
font-size: var(--awe-fs-body); line-height: var(--awe-lh-body); vertical-align: middle;
border-bottom-color: var(--awe-line); }
.table tbody tr:hover > td{ background: var(--awe-surface-2); }
.table tfoot td{ position: sticky; bottom: 0; z-index: 3; background: var(--awe-surface-2);
font-size: var(--awe-fs-body); font-weight: 700; color: var(--awe-ink-1);
padding: .4375rem var(--awe-cell-x); box-shadow: inset 0 1px 0 var(--awe-line); }
/* DS-06 續｜card-table 的首／末欄要與卡片內容左右緣對齊。Tabler 把它寫死成 1.25rem，
拉回 token 之後「卡緣 20px｜中間各欄 10px｜卡緣 20px」＝左右對稱、且與卡片內距同源。 */
.card-table tr td:first-child,.card-table tr th:first-child{ padding-left: var(--awe-card-pad); }
.card-table tr td:last-child,.card-table tr th:last-child{ padding-right: var(--awe-card-pad); }
.tnum,.table .text-end{ font-variant-numeric: tabular-nums; }
.cell-code{ font-family: var(--awe-font-mono); font-size: var(--awe-fs-badge);
color: var(--awe-ink-2); letter-spacing: -.01em; }
/* DS-29（2026-08-11 拍板④修訂）｜表內品名連結：Tabler 讓 直接吃 --tblr-link-color
＝ 品牌紅，一屏 40 列品名就是 40 次飽和紅，主 CTA 完全淹沒。表格儲存格裡的連結一律
ink-1，hover 才轉品牌色。
⚠ 修訂點：原規格 hover 是「轉品牌色＋底線」，眼驗後**底線全數收掉**——40 列掃過去
每列閃一條線是純噪音，且 .cell-qty 早就因為「底線干擾等寬數字掃視」單獨破例了，
代表這條規則本來就站不住。現在三者統一：hover 只換色。
排除 .btn／.dropdown-item／.badge：那些是動作元件，各有自己的色彩語彙。 */
.table td a:not(.btn):not(.dropdown-item):not(.badge){
color: var(--awe-ink-1); text-decoration: none; }
.table td a:not(.btn):not(.dropdown-item):not(.badge):hover{
color: var(--awe-brand); text-decoration: none; }
.cell-name{ font-weight: 500; color: var(--awe-ink-1); text-decoration: none; }
.cell-name:hover{ color: var(--awe-brand); text-decoration: none; }
/* 數量下鑽連結：同上，轉色不加底線 */
.table td a.cell-qty,.cell-qty{ color: var(--awe-ink-1); text-decoration: none; }
.table td a.cell-qty:hover,.cell-qty:hover{ color: var(--awe-brand); text-decoration: none; }
.is-zero{ color: var(--awe-ink-3); } /* 零值退到背景，非零數字才跳出來 */
.col-total{ border-left: 1px solid var(--awe-line); }
td.col-total{ font-weight: 700; }
.cell-note{ font-size: var(--awe-fs-caption); color: var(--awe-ink-2); }
.cell-sub{ font-family: var(--awe-font-mono); font-size: var(--awe-fs-badge); color: var(--awe-ink-3); }
td.neg,.neg{ color: var(--awe-danger); font-weight: 700; }
tr.neg-row > td{ background: var(--awe-danger-soft); }
tr.neg-row:hover > td{ background: rgba(214, 57, 57, .11); }
/* DS-08｜排序圖示降噪：未排序欄的雙箭頭平時不出現（8～12 個欄頭同時掛雙箭頭＝一整排
視覺噪音），hover／鍵盤聚焦該欄才淡入；正在排序的欄由 erp.js 換成單向箭頭（↑／↓），
並把表頭字色加深到主文色——「哪一欄在排序」用顏色與方向兩個訊號一起講。 */
th.th-sort{ cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s ease; }
th.th-sort:hover{ color: var(--awe-brand); }
th.th-sort .sort-ind{ opacity: 0; margin-left: .15rem; vertical-align: middle;
transition: opacity .12s ease; }
th.th-sort .sort-ind .icon{ width: .875rem; height: .875rem; }
th.th-sort:hover .sort-ind,
th.th-sort:focus-visible .sort-ind{ opacity: .5; }
th.th-sort[aria-sort="ascending"],
th.th-sort[aria-sort="descending"]{ color: var(--awe-ink-1); }
th.th-sort[aria-sort="ascending"] .sort-ind,
th.th-sort[aria-sort="descending"] .sort-ind{ opacity: 1; color: var(--awe-brand); }
/* 回程錨點高亮：儲存後回列表，「剛存的是這筆」看得見 */
tr.row-hl > td{ animation: row-hl 2s ease-out; }
@keyframes row-hl{ 0%,60%{ background: var(--awe-brand-soft); } 100%{ background: transparent; } }
/* DS-45｜日期分組標頭：一條細帶，不是一列假資料。
⚠ 選擇器刻意寫到 `.table tbody tr.day-sep > td`：分組列自己也是 tbody 裡的 td，
若只寫 `.day-sep > td`(0,1,1) 會輸給上面的 `.table tbody td`(0,1,2)，字級被拉回 body 14px
——宣告寫了卻不生效（demo 原稿即有此隱性衝突，抽單一源時一併修掉）。 */
.table tbody tr.day-sep > td{ background: var(--awe-surface-2); color: var(--awe-ink-2);
font-size: var(--awe-fs-caption); line-height: var(--awe-lh-band); font-weight: var(--awe-fw-label);
letter-spacing: .04em; padding: .1875rem var(--awe-cell-x) !important;
border-bottom: 1px solid var(--awe-line); }
.day-sep:hover > td{ background: var(--awe-surface-2); }
.day-sep .pg-n{ font-weight: 500; color: var(--awe-ink-3); margin-left: .25rem; }
/* 異動紀錄分頁：右欄窄，表格允許橫捲、不換行 */
.mv-table{ font-size: var(--awe-fs-caption); }
.mv-table td,.mv-table th{ padding: .25rem .3rem; vertical-align: top; }
.mv-table .badge{ font-size: var(--awe-fs-micro); }
/* ══════════════════════════════════════════════════════════════════════════════
§11 兩層篩選語彙：segmented（資料範圍）／chip（附加條件）
══════════════════════════════════════════════════════════════════════════════
拍板②（2026-08-11 papalu）：分頁語彙全站統一走 segmented（.seg-tabs），nav-tabs 退場。
兩層要一眼分得出來，靠三件事同時成立：
① 形狀不同：分頁是一條連在一起的軌道（單選、必有一個選中）；chip 是各自獨立的膠囊
② 位置不同：分頁貼在卡頂（跟著卡片的身分走）；chip 在下面一層
③ 底色不同：分頁那層是白色卡面；chip 那層退到次面色，讀起來就是「附加條件」 */
.tabbar{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
padding: .5rem var(--awe-card-pad); border-bottom: 1px solid var(--awe-line); }
.seg-tabs{ display: inline-flex; gap: 2px; padding: 3px; background: var(--awe-surface-2);
border: 1px solid var(--awe-line); border-radius: var(--awe-radius-control); }
.seg-tab{ display: inline-flex; align-items: center; height: var(--awe-control-h-sm); padding: 0 .75rem;
border-radius: var(--awe-radius-sm); font-size: var(--awe-fs-body); line-height: 1; color: var(--awe-ink-2);
text-decoration: none; white-space: nowrap;
transition: background-color .12s ease, color .12s ease; }
.seg-tab:hover{ color: var(--awe-ink-1); }
.seg-tab.active{ background: var(--awe-surface); color: var(--awe-brand); font-weight: 600;
box-shadow: var(--awe-shadow-1); }
.seg-tab:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--awe-brand-line); }
.chipbar{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
padding: .375rem var(--awe-card-pad); background: var(--awe-surface-2);
border-bottom: 1px solid var(--awe-line); }
/* 維度名：chip 是「到貨日」這一條軸上的取值，把軸名寫出來比三顆孤立的按鈕好讀 */
.chip-dim{ font-size: var(--awe-fs-caption); font-weight: var(--awe-fw-label);
color: var(--awe-ink-2); letter-spacing: .04em; margin-right: .125rem; }
.chip{ display: inline-flex; align-items: center; gap: .25rem; height: var(--awe-control-h-sm);
padding: 0 .75rem;
border: 1px solid var(--awe-line); border-radius: var(--awe-radius-pill);
background: var(--awe-surface); color: var(--awe-ink-2);
font-size: var(--awe-fs-caption); font-weight: 600; line-height: 1; cursor: pointer;
transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.chip:hover{ border-color: var(--awe-ink-3); color: var(--awe-ink-1); }
.chip:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--awe-brand-soft); }
.chip.on{ background: var(--awe-brand-soft); border-color: var(--awe-brand); color: var(--awe-brand); }
.chip.on .chip-x{ opacity: 1; }
.chip-x{ opacity: 0; width: .75rem; height: .75rem; margin-left: .125rem; }
.chip-x .icon{ width: .75rem; height: .75rem; }
/* 逾期那顆用 danger 家族（與品牌紅分工：它講的是「出事了」不是「你在這裡」） */
.chip[data-when="overdue"].on{ background: var(--awe-danger-soft); border-color: var(--awe-danger);
color: var(--awe-danger); }
.chip-reset{ border: 0; background: transparent; color: var(--awe-ink-3);
font-size: var(--awe-fs-caption); cursor: pointer; padding: 0 .25rem; }
/* 拍板④：hover 只換色，不加底線 */
.chip-reset:hover{ color: var(--awe-brand); text-decoration: none; }
.chipbar .count-pill{ margin-left: auto; }
/* 舊式快篩 chip（正式頁 markup 尚未換形前的過渡；切片 5／6b 收掉） */
.chip-on{ box-shadow: inset 0 0 0 2px var(--awe-brand); }
/* 可點的彙總徽章：形式仍是 toolbar 徽章，只多了「按得下去」 */
.badge-filter{ cursor: pointer; border: 1px solid transparent; }
.badge-filter:hover{ border-color: var(--awe-brand); }
.badge-filter.on{ outline: 2px solid var(--awe-brand); outline-offset: 1px; font-weight: 700; }
/* ══════════════════════════════════════════════════════════════════════════════
§12 徽章（DS-D1 全部吃 badge 字階）
══════════════════════════════════════════════════════════════════════════════
徽章高度鎖在列的行高之內：inline-block 若比行高高，會把整列的 line box 撐起來
（每列多長 7px，一屏就少掉快兩列）。line-height + vertical-align 把它壓回同一條線上。 */
.badge-cat{ display: inline-block; white-space: nowrap; vertical-align: middle;
font-size: var(--awe-fs-badge); line-height: var(--awe-lh-badge); font-weight: var(--awe-fw-badge);
color: var(--awe-ink-2);
background: var(--awe-surface-2); border: 1px solid var(--awe-line);
border-radius: var(--awe-radius-pill); padding: 0 .5rem; }
.badge-flag{ font-size: var(--awe-fs-badge); line-height: var(--awe-lh-badge);
font-weight: var(--awe-fw-badge); vertical-align: middle;
border-radius: var(--awe-radius-pill); padding: 0 .4375rem; }
/* 狀態徽章：四個狀態四種語意，不共用同一顆灰 */
.badge-state{ display: inline-block; white-space: nowrap; vertical-align: middle;
font-size: var(--awe-fs-badge); line-height: var(--awe-lh-badge); font-weight: 600; padding: 0 .5rem;
border-radius: var(--awe-radius-pill); border: 1px solid transparent; }
.state-pending{ color: var(--awe-ink-2); background: var(--awe-surface-2); border-color: var(--awe-line); }
.state-partial{ color: var(--awe-warn); background: var(--awe-warn-soft); border-color: var(--awe-warn-line); }
.state-done{ color: var(--awe-ok); background: var(--awe-ok-soft); border-color: var(--awe-ok-line); }
.state-cancelled{ color: var(--awe-ink-3); background: transparent; border-color: var(--awe-line);
text-decoration: line-through; }
.badge-day{ display: inline-block; vertical-align: middle; font-size: var(--awe-fs-badge);
line-height: var(--awe-lh-badge);
font-weight: 600; padding: 0 .4375rem; border-radius: var(--awe-radius-pill); }
.badge-overdue{ color: var(--awe-danger); background: var(--awe-danger-soft);
border: 1px solid rgba(214, 57, 57, .3); }
.badge-today{ color: var(--awe-brand); background: var(--awe-brand-soft);
border: 1px solid var(--awe-brand-line); }
/* 缺圖用灰框占位表達，不再是 40 列 100% 的橘色徽章（V-07） */
.thumb-none{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
border: 1px dashed var(--awe-line); border-radius: var(--awe-radius-sm); color: var(--awe-ink-2);
background: var(--awe-surface-2); }
/* ══════════════════════════════════════════════════════════════════════════════
§13 列操作（DS-D2 走 control-h-sm）
══════════════════════════════════════════════════════════════════════════════
一顆主動作＋一個溢位選單；WCAG 2.5.8 觸擊目標 ≥24px（本站取 28px），
破壞性動作與主動作拉開 ≥16px。
── 拍板⑤（2026-08-11 papalu 眼驗）｜動作鈕在儲存格內置中 ──────────────────
原本動作欄跟著數字欄一起 text-end 靠右，於是「入倉／編輯／更正」這一排鈕會黏在
表格最右緣、右邊只剩卡片內距那幾 px，而左邊留一大片空白——看起來像是被擠出去的，
不像一個有自己欄寬的欄位。動作鈕不是數字，沒有「小數點對齊」的理由要靠右。
⚠ 正式頁 markup 不動（那些 td 身上的 .text-end 留著），所以置中要在樣式層用
:has() 把「內容只有動作控件」的儲存格挑出來覆蓋掉 text-align：
① td > .row-actions → pending／design-demo-pending／styleguide
② td > .btn 且該 btn 是唯一子元素 → products（編輯）／stock_in・adjust（更正）
②的 :only-child 是防呆：混了文字或數字的儲存格不會被誤抓進來。
⚠ 必須 !important：markup 上的 .text-end 是 Bootstrap 工具類、本身就帶 !important，
非 !important 的規則不論選擇器多重都贏不了它（實測 computed 仍是 right）。
等後續切片把那些 .text-end 從動作欄 markup 拿掉，這裡的 !important 可一併退場。
同時把動作格的左右內距補成對稱：DS-06 讓末欄 padding-right = card-pad(20px)、
其餘欄 10px，動作欄若沿用就會「內容置中但看起來偏左 5px」——置中要對得起眼睛。
（尚未涵蓋：categories.php 的「刪除」在