/* ═══════════════════════════════════════════════════════════
   報價系統自己的樣式（SA 2026-09-20：兩邊看起來要是同一家公司）
   ═══════════════════════════════════════════════════════════
   ⚠ 色票、字體、按鈕、卡片、藥丸、表格底色一律來自 `erp-base.css`
     （＝ERP 的 css/style.css 複本，唯一真相在 ERP repo，build 時自動同步）。
     這一檔只做兩件事：
       ① 把報價系統沿用的變數名接到 ERP 的 token（--panel→--card…），
          這樣既有 HTML 不必逐處改寫，顏色卻已經統一。
       ② 補 ERP 沒有的東西：頂部分頁列、四層檢視、報價明細表、列印版。
   ⛔ 不要在這裡重新定義 .btn／.card／.pill／.tag 的**外觀**——
     那是共用元件，改了兩邊就又分岔了。要調整請去 ERP 的 style.css。
   ⚠ ERP 那份是手機 App 取向，`input,select,textarea` 是**全域**大尺寸
     （padding 9~10px）。報價系統是密集表格，直接吃會把每一列撐高一倍，
     所以下面把**表格內與 label.f 內**的輸入框縮回原本尺寸。 */
:root{
  /* ① 舊變數名 → ERP token（值都不再自己寫） */
  --panel:var(--card);
  --line:var(--border);
  --brand:var(--sage);
  --brand-d:var(--sage2);
  --muted:var(--ink2);
  --danger:var(--red);
  --ok:var(--sage);
}
/* body 字級：ERP 沒有全域 font-size，報價系統的表格需要 14px 基準 */
body{font-size:14px}

/* ⚠ ERP 是「一欄一列」的手機表單，所以 `label` 是 block、`input/select` 是 width:100%。
   報價系統是橫排工具列與密集表格，直接吃會讓每個下拉框撐滿一整行。
   這裡把**沒有包在 .grid／label.f／表格裡**的表單元件收回自動寬度。 */
label{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:400;color:var(--ink2)}
header select,header input,.row>select,.row>input,.row>label select,.row>label input,
main>section select:not([multiple]),main>section input{width:auto}
.grid label,.card>.grid label.f{display:flex}
label.f{display:flex;flex-direction:column;align-items:stretch;gap:3px;font-weight:400}
label.f input,label.f select,label.f textarea{width:100%}

/* ── 頂欄：改成與 ERP 一致的白底木色標題（原本是深綠色塊）────── */
header{background:var(--card);color:var(--ink);border-bottom:1px solid var(--border);
  padding:10px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
header h1{font-family:"Noto Serif TC",serif;font-size:17px;margin:0;font-weight:700;letter-spacing:.06em}
header .ver{font-size:11px;color:var(--ink2);letter-spacing:1px}
header .sp{flex:1}
header select,header button{background:var(--bg);color:var(--ink);border:1px solid var(--border);
  border-radius:8px;padding:5px 10px;font-size:13px;cursor:pointer}
header select:hover,header button:hover{background:#EFE9DD}

/* ── 分頁列：木色底線取代綠色塊，與 ERP 的 .fBtn 同一個語彙 ──── */
nav{display:flex;gap:2px;background:var(--card);border-bottom:1px solid var(--border);
  padding:0 12px;flex-wrap:wrap}
nav button{background:transparent;border:none;color:var(--ink2);padding:10px 14px;font-size:14px;
  cursor:pointer;border-bottom:3px solid transparent;font-family:inherit}
nav button.on{color:var(--wood);border-bottom-color:var(--wood);font-weight:700}
nav .navHome{display:flex;align-items:center;color:var(--wood);font-weight:700;
  padding:10px 14px 10px 0;margin-right:6px;border-right:1px solid var(--border);
  font-size:14px;text-decoration:none;cursor:pointer}
nav .navHome:hover{color:var(--wood2)}

main{padding:14px;max-width:1280px;margin:0 auto}
section.tab{display:none}
section.tab.on{display:block}

/* ── 表格（ERP 沒有這麼密集的表，這裡是報價系統專有）────────── */
table{width:100%;border-collapse:collapse;font-size:13px}
td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
td input.num{text-align:right}
tr.click{cursor:pointer}
tr.click:hover{background:var(--bg)}
/* ⚠ 把全域的大尺寸輸入框縮回表格用——不縮的話一列會高兩倍 */
td input,td select,td textarea{width:100%;min-width:56px;padding:4px 6px;border:1px solid var(--border);
  border-radius:5px;font-size:13px;background:var(--card)}
label.f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink2)}
label.f input,label.f select,label.f textarea{padding:6px 8px;border:1px solid var(--border);
  border-radius:6px;font-size:13.5px;color:var(--ink);width:100%;background:var(--card)}

/* ── 版面小工具 ───────────────────────────────────────────── */
.grid{display:grid;gap:8px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}.g6{grid-template-columns:repeat(6,1fr)}
.right{text-align:right}
.money{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.st{display:inline-block;padding:2px 10px;border-radius:11px;font-size:12px;font-weight:600;color:#fff}
.sumline{display:flex;justify-content:space-between;padding:4px 2px;font-size:13.5px}
.sumline.big{font-size:16px;font-weight:700;border-top:2px solid var(--border);padding-top:8px;margin-top:4px}
.bonusbox{background:linear-gradient(135deg,var(--sage),var(--sage2));color:#fff;border-radius:var(--radius);padding:14px 16px;margin-top:10px}
.bonusbox .bl{display:flex;justify-content:space-between;padding:3px 0;font-size:13.5px}
.bonusbox .bl b{font-size:15px}
.note{background:#FBF7EE;border:1px solid var(--gold);border-radius:8px;padding:8px 12px;
  font-size:12.5px;color:#6b5b34;margin:8px 0}
.itemhead{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;
  margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.subT{font-size:13px;font-weight:700;color:var(--wood2);margin:12px 0 6px}
.crumb{font-size:13px;margin-bottom:12px;color:var(--ink2)}
.crumb a{color:var(--wood);cursor:pointer;text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}

/* ── 報價系統專有的藥丸變體（.pill 本體用 ERP 的）───────────── */
.pill.e{background:#F6ECDF;color:var(--wood2)}
.pill.gold{background:#F3E7C8;color:#7a5a10}

/* ── 按鈕變體：⛔ 已搬到 ERP 的 css/style.css（SA 2026-10-31）────
   .sec／.warn／.gold／.mini 這四個名字，現在和 ERP 的 .out／.danger／.wood／.sm
   **共用同一條規則**，所以兩邊同一個意思的按鈕長得完全一樣。
   ⛔ 不要在這裡再定義它們一次——這四行以前就在這裡，而 ERP 自己版面上的
     29 個 `btn sec` 其實是靠這幾行在撐，等於 ERP 的按鈕由報價系統決定長相。
   ⚠ 要調整外觀請去 ERP 的 css/style.css（那一份是唯一真相，
     assets/erp-base.css 是它的複本，tests/css_sync_test.html 會盯著不准分岔）。
   ⚠ 這次統一之後的外觀差異（SA 2026-10-31 已知悉）：
     ・`btn warn`（刪除鈕，24 處）：實心紅 → **紅框白底**（對齊 ERP 的 .danger）
     ・`btn sec`：白底 → 透明底（在卡片上看起來一樣，在米色區塊上會透出底色）
     ・`btn mini`：padding 4px → 6px、圓角 7px → 9px（表格列高多 2px） */

/* ── 權限隱藏（acl.js 掛在 body 上）──────────────────────── */
.hideExt .staffOnly{display:none!important}
.hideStaff .adminOnly{display:none!important}
/* 櫃體算式明細（SA 2026-10-31：「櫃體項目清單太細節了，可以做，但是否有權限的人才能看」）。
   那張表每一列都寫著「×18櫃195×折0.31」——**廠商牌價與我們的折數**，等於進價。
   ⚠ 與 adminOnly 分開：主管（ERP role=manager）要看得到，但他進不了「設定」分頁。
     用 adminOnly 的話主管也看不到；用 staffOnly 的話全體員工都看得到。 */
.hideCost .costOnly{display:none!important}

/* ── 列印：只留 #printArea ─────────────────────────────── */
/* ⚠ 版型規則寫在 @media print **外面**（2026-10-29）：量測用的 .measuring 要套到
     **一模一樣**的規則，量出來的高度才等於印出來的高度。寫在 @media print 裡面
     的話螢幕量測吃不到，「超出一點點」就會判斷錯。
     #printArea 平常是 display:none，這些規則在螢幕上不會有任何影響。 */
#printArea{display:none;font-size:12.5px}
#printArea table{width:100%;border-collapse:collapse}
#printArea th,#printArea td{border:1px solid #999;padding:5px 8px}
#printArea h1{font-size:20px;letter-spacing:4px;margin:0 0 2px}
/* 條款逐條不可被切成兩半（SA 2026-10-29 截圖：第 2 條從句子中間斷到下一頁）。
   ⚠ 是逐條 avoid，⛔ 不是整組 avoid——整組放不下時會把**整塊**推到第二頁，更糟。 */
#printArea .clz,#printArea .nobrk{page-break-inside:avoid}
@media print{
  /* ⚠ 明寫版面：printFitScale() 要靠這個數字算「一頁有多高」。改這裡就要改那裡。 */
  @page{size:A4 portrait;margin:10mm}
  body>*{display:none!important}
  #printArea{display:block!important}
}
/* 量測用（螢幕）：要有真實寬度才量得到高度——⛔ display:none 量出來是 0。
   擺到畫面外並 visibility:hidden，使用者不會看到閃一下。
   寬度＝A4 210mm − 左右各 10mm，與上面的 @page margin 對齊。 */
#printArea.measuring{display:block!important;position:fixed;left:-10000px;top:0;
  width:190mm;background:#fff;visibility:hidden}

/* 逐櫃報價明細列（DEC-100）。⚠ 要跟分區列在視覺上分得開，
   否則展開後整張表看起來像一堆同層項目，分不出誰屬於誰。 */
tr.cabrow td{background:#FBFAF8}
tr.cabfold td{background:#F4F2EE;padding-top:5px;padding-bottom:5px}

/* 大項目（分區）列（2026-09-27，SA「頁面的分類排版清楚點」）：粗上框線＋淡底色，
   一眼認出「這是一個大項目的開頭」，跟底下自己的子項、跟上一個大項目都分得開。 */
tr.grpHead td{background:#F7F3EA;border-top:2px solid #D9CDB4;padding-top:7px;padding-bottom:7px}

/* 報價總表（SA 2026-09-24「字不多時表格自適應」）：
   欄寬由內容決定——項次／項目縮到剛好、數字欄固定窄、說明欄吃剩下的寬度；
   輸入框一律撐滿自己的格子，不再各自撐出一大片空白。 */
#qLineTbl{width:100%}
#qLineTbl td>input,#qLineTbl td>select{width:100%;min-width:0;box-sizing:border-box}
#qLineTbl td.money,#qLineTbl td.staffOnly{white-space:nowrap}