/* wishlin.css — 營運台「中秋」視覺語言（單一事實源）
 *
 * 來源：b2b_quote/templates/quote.html（中秋企業大宗訂購試算）＋ cs_console/templates/home.html
 * 業主 2026-07-26 指示：營運台畫面風格統一到中秋報價試算那一套。
 *
 * 用法：各頁 <link rel="stylesheet" href="/static/wishlin.css"> 後，
 *      頁內 <style> 只留版面（grid/寬度），顏色與字體一律用下面的變數，不再寫死色碼。
 */

:root {
  /* 色 — 營運台（對內）色票
   * ★業主 2026-07-26 定調：**對外才用官網配色，對內不是**。
   *   本檔服務的是內部營運台，所以刻意「同家族但不同套」：
   *   底色偏暖、字色走暖灰(非官網的中性灰)，避免同仁把內部頁誤認成官網對客頁。
   *   請勿再去 www.1866.com.tw 取樣後覆蓋這裡（2026-07-26 已誤做過一次）。 */
  --bg:        #f8f6ed;   /* 頁面底 */
  --card:      #fffdf8;   /* 卡片底 */
  --card-hi:   #fff;      /* 卡片 hover / 強調底 */
  --line:      #ece2d0;   /* 分隔線・邊框 */
  --line-soft: #f0e9dc;
  --ink:       #4a3f36;   /* 內文（暖灰） */
  --ink-strong:#3f342c;   /* 標題 */
  --soft:      #9a8b7d;   /* 次要說明 */
  --faint:     #b3a795;   /* 頁尾・極次要 */
  --brand:     #e7825b;   /* 主色（磚橘） */
  --brand-deep:#d06f4a;   /* 主色按下 */
  --brand-tint:#c08a63;   /* 副標・英文字 */
  --wash:      #f1ede0;   /* 表頭・淡底塊 */

  /* 狀態色 — 已調成與米色系相合，不用原本的螢光藍綠 */
  --good: #5c8a5e;
  --warn: #b7791f;
  --bad:  #b4574a;
  --ai:   #8a6fa8;

  --good-bg: #eaf2e6;
  --warn-bg: #f9efd9;
  --bad-bg:  #f8e7e3;

  /* 結構 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --radius:      10px;
  --radius-sm:   8px;
  --radius-pill: 99px;

  /* 字 — 內文用黑體(表格數字好讀)、標題用明體(品牌感) */
  --font-sans:  "Noto Sans TC", -apple-system, "PingFang TC", "Heiti TC", sans-serif; /* Windows 沒有 PingFang，靠載進來的 Noto */
  --font-serif: "Noto Serif TC", "Songti TC", serif;

  --shadow-1: 0 1px 3px rgba(90,70,50,.07);
  --shadow-2: 0 6px 16px rgba(90,70,50,.12);
}

/* ── 基底 ───────────────────────────────── */
.wl { background: var(--bg); color: var(--ink); font-family: var(--font-sans); }
.wl h1, .wl h2, .wl h3 { font-family: var(--font-serif); color: var(--ink-strong); letter-spacing: .08em; }

/* ── 頁首（各頁共用的細長版，首頁另有自己的大版頭） ── */
.wl-head {
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 16px 20px; display: flex; align-items: center; gap: var(--space-3);
}
.wl-head .mark {
  font-family: var(--font-serif); font-weight: 700; font-size: 16px;
  letter-spacing: .16em; color: var(--ink-strong); text-decoration: none;
}
.wl-head .sub { font-size: 11.5px; color: var(--soft); letter-spacing: .1em; }
.wl-head .spacer { margin-left: auto; }
.wl-head a.home { color: var(--soft); text-decoration: none; font-size: 13px; }
.wl-head a.home:hover { color: var(--brand); }

/* 頁面標題帶橘色短線（沿用首頁 .sec h2 的手法） */
.wl-title {
  font-family: var(--font-serif); font-size: 17px; font-weight: 600;
  color: var(--ink-strong); letter-spacing: .09em;
  margin: 0 0 15px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line); position: relative;
}
.wl-title::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 34px; height: 2px; background: var(--brand);
}

.wl-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 18px 46px; }

/* ── 身份導覽列 ─────────────────────────── */
.wl-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wl-nav a {
  text-decoration: none; color: var(--soft); font-size: 13px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card);
}
.wl-nav a:hover { border-color: var(--brand); color: var(--brand); }
.wl-nav a.open { color: var(--brand); border-color: #efd3c2; }
.wl-nav a.current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── 卡片 ───────────────────────────────── */
.wl-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px;
}
a.wl-card { display: block; text-decoration: none; color: inherit; transition: .14s; }
a.wl-card:hover { border-color: var(--brand); background: var(--card-hi); transform: translateY(-1px); }

/* ── 表格 ───────────────────────────────── */
.wl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--card); }
.wl-table th, .wl-table td { border: 1px solid var(--line); padding: 7px 9px; }
.wl-table th { background: var(--wash); font-weight: 600; color: var(--ink-strong); }
.wl-table tr:hover td { background: #fffefa; }

/* ── 表單 ───────────────────────────────── */
.wl input, .wl select, .wl textarea {
  font: inherit; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.wl input:focus, .wl select:focus, .wl textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(231,130,91,.15);
}

/* ── 按鈕 ───────────────────────────────── */
.wl-btn {
  display: inline-block; font: inherit; font-size: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--radius-sm); padding: 8px 18px; text-decoration: none;
}
.wl-btn:hover { border-color: var(--brand); color: var(--brand); }
.wl-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.wl-btn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

/* ── 提示條 ─────────────────────────────── */
.wl-banner { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; border: 1px solid transparent; }
.wl-banner.ok   { background: var(--good-bg); color: var(--good); border-color: #d5e5cf; }
.wl-banner.warn { background: var(--warn-bg); color: var(--warn); border-color: #f0dcb4; }
.wl-banner.bad  { background: var(--bad-bg);  color: var(--bad);  border-color: #eccfc8; }

.wl-tag {
  display: inline-block; background: var(--wash); border: 1px solid var(--line);
  font-size: 12px; padding: 1px 9px; border-radius: var(--radius-pill); color: var(--soft);
}

.wl-foot { text-align: center; color: var(--faint); font-size: 11.5px; margin: 34px 0 0; line-height: 1.7; }
/* ═══════════════════════════════════════════════════════════
   wishlin 營運台 v3 tokens · 2026-08-09 · design → Code
   可直接併入 wishlin.css 的 :root。取代 21_tokens_建議值.css（v1）。
   值＝十二張 v3 範本（五頁型＋門市六分頁＋任務/設定）實測共識值；
   色值正本仍是 DYN-品牌色票，DYN 改值時只改這一檔。
   彈性規則：頁面可在自己的根容器以同名變數覆蓋（scope 覆蓋，
   不改本檔）；試用後要全站調整時改本檔，不改頁面。
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── 底與面 ────────────────────────── */
  --paper: #F8F6ED;   /* 頁底。全站唯一頁底 */
  --sink:  #EEECE3;   /* 凹面。分段控制現用態底、次要面
                         （D 入口用 #E9E5D6，屬頁內覆蓋，允許） */
  --warm:  #F6E4DB;   /* 磚橘極淡底。選取列・批次條・可寫入提示
                         （C/D 用 #F0D9CC，屬頁內覆蓋，允許） */
  --note:  #F1E8C8;   /* 內部註記底（A 客服「客人看不到」）。樣式不得改動 */

  /* ── 文字 ──────────────────────────── */
  --ink:   #2E2C29;   /* 標題・主要 */
  --ink2:  #57544E;   /* 內文 */
  --ink3:  #6B655C;   /* 次要說明（--paper 上 4.5:1 邊界值，再淡不得作文字） */

  /* ── 線（橫線制） ──────────────────── */
  --rule:  #CBB8B0;   /* 章節線・控制項框 */
  --rulel: #DFD5CB;   /* 列分隔 */

  /* ── 品牌 ──────────────────────────── */
  --brand: #E7825B;   /* 磚橘。只做面不做字，一頁 ≤3 處 */
  --brandh:#DE7248;   /* 磚橘 hover（按鈕） */
  --link:  #8E4322;   /* 品牌色文字與連結（深階） */
  --linkh: #75341A;   /* 連結 hover */
  --gold:  #64561D;   /* 麥金深階。西文小標・內部註記左條 */

  /* ── 狀態（記號/3px 條用本色，文字同值即深階） ── */
  --ok:    #4F6242;
  --warn:  #7A5A1E;
  --bad:   #9E3B34;
  --unknown:#A99987;  /* 無法判定。灰不是沒事，是不知道 */

  /* ── 季節/品類（C 戰情室・B 台帳） ── */
  --season:     #7D4021;   /* C：季節深底背板（B 以 #E2DAB6 淡版作標記底） */
  --onseason:   #F8F6ED;
  --onseason2:  #DCCBB8;
  --seasongold: #E2DAB6;

  /* ── 圓角（v3 起用圓角，v1 全直角條款作廢） ── */
  --r-sm: 4px;    /* 勾選框 */
  --r:    6px;    /* 輸入框・分段鈕 */
  --r-md: 7px;    /* chip・按鈕 */
  --r-lg: 8px;    /* 大輸入區・textarea */
  /* 膠囊/開關 14px、圓點 50%，直接寫值 */

  /* ── 字 ────────────────────────────── */
  --fh: 'Noto Serif TC', serif;                                   /* 標題 */
  --fb: 'Noto Sans TC', -apple-system, 'PingFang TC', sans-serif; /* 內文 */
  --fe: 'Barlow Condensed', sans-serif;                           /* 西文大標 */
  --fn: 'Barlow', 'Noto Sans TC', sans-serif;                     /* 數字 */

  /* ── 間距　5 級（沿用 v1，不擴充） ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px;

  /* ── 版面（依頁型取寬） ────────────── */
  --page-max-form:  980px;    /* 門市 商品/結帳/設定/包材 */
  --page-max:       1140px;   /* C 儀表板 */
  --page-max-wide:  1240px;   /* 門市首頁/任務・B 台帳 1200・A 客服 1280 */
  --page-pad:       32px;  --page-pad-md: 24px;  --page-pad-sm: 16px;

  /* ── 斷點（沿用 v1） ───────────────── */
  --bp-desktop: 1200px;
  --bp-tablet:  768px;
}

/* ═══ 基礎規則（框架＝橫線制，違反即退件，見派工鐵則） ═══
   1  無直線、無外框、無斑馬紋。列分隔 1px var(--rulel)、
      章節線 1px var(--rule)。卡片不畫框，靠留白與橫線分段。
   2  填色塊＝會寫入。只讀區不加底。
   3  狀態條 3px 本色；狀態文字用同名深階值（本檔已是深階）。
   4  表格橫捲時首欄 sticky＋不透明底（var(--paper)）。
   5  磚橘只做面：按鈕、開關、34px 短線、勾選現用態。
   ═══════════════════════════════════════════════════════ */

body { background: var(--paper); color: var(--ink); font-family: var(--fb); }

a       { color: var(--link); text-decoration: none; }
a:hover { color: var(--linkh); text-decoration: underline; text-underline-offset: 4px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; }  /* 全站數字一律 */

/* 章節標題：襯線＋底線＋34px 磚橘短線（沿用 wl-title 文法） */
.wl-title {
  font-family: var(--fh); font-weight: 600; color: var(--ink);
  letter-spacing: .06em; border-bottom: 1px solid var(--rule); position: relative;
}
.wl-title::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 34px; height: 2px; background: var(--brand);
}

/* ═══ 每頁型基準字級（root font-size / line-height） ═══
   門市 商品/結帳/設定/任務：14px / 1.8　　登入・首頁：14px / 1.8
   C 儀表板：14.5px / 1.85　D 入口・E 健檢：13.5px / 1.8
   A 客服・B 台帳：13px / 1.75–1.8
   POS/觸控頁控制項一律 ≥44px；列內動作 28px。
   ═══════════════════════════════════════════════════════ */



/* ── 殼的上排工具列（門市／生產共用·2026-09-04）──────────────────────────
   業主 2026-09-04：「ipad 來看要分離一點，不然會按到旁邊的按鈕」。
   病灶不是「不夠大」，是**每一顆的可按範圍只有那兩個字**：12px 的字、彼此只隔 14px，
   手指落點誤差輕鬆就跨到隔壁。三件事一起做才有效：
     ① 每一顆都變成真正的觸控目標（min-height 44px＋左右內距），不再是裸文字；
     ② 顆與顆之間留 10px **真空隙**（padding 之外）——目標貼在一起，變大也一樣會誤按；
     ③ 字級 12 → 14px。
   ★ 容器改 align-items:center：裡面的東西有高度之後，baseline 對齊會讓它們錯位。
   ★ 定義放這裡不是放在 `_store_nav.html`：生產殼也要用，寫在門市那支的話
     生產只會拿到沒有樣式的裸連結（而且是靜靜地）。 */
.navtool{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.navtool>*{margin:0}
.navtool a, .navtool button{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 12px;border-radius:9px;font:400 14px/1 var(--fb);
  color:var(--ink3);text-decoration:none;background:none;border:0;cursor:pointer;
  white-space:nowrap}
.navtool a:hover, .navtool button:hover{background:var(--sink);color:var(--ink);
  text-decoration:none}
.navtool a[data-on="true"]{color:var(--ink);font-weight:600}
/* 「我是誰」：點得下去要看得出來（框起來＋▾），不然它跟旁邊的字長一樣＝沒人會點 */
.navwho{box-shadow:inset 0 0 0 1px var(--rulel);color:var(--ink)!important;font-weight:600}
.navwho:hover{box-shadow:inset 0 0 0 1px var(--rule)}
.navwho[data-none="true"]{color:var(--bad)!important;box-shadow:inset 0 0 0 1px #D8A79F}
.navwho .cv{color:var(--ink3);font-weight:400;padding-left:6px}
@media (max-width:700px){ .navtool{gap:6px} .navtool a, .navtool button{padding:0 8px} }


/* ── 訂單懸浮視窗（上方 bar 的訂單搜尋·2026-09-05）──────────────────────── */
.navtool .osearch{display:inline-flex;align-items:center;gap:0;margin:0}
.navtool .osearch input{width:9.5em;min-height:44px;padding:0 10px;font:400 14px/1 var(--fb);
  border:1px solid var(--rulel);border-radius:9px 0 0 9px;background:#fff;color:var(--ink)}
.navtool .osearch input:focus{outline:none;border-color:var(--brand)}
.navtool .osearch button{min-height:44px;padding:0 10px;border:1px solid var(--rulel);border-left:0;
  border-radius:0 9px 9px 0;background:#fff;cursor:pointer;font-size:15px}
/* ★★ 直欄版面（2026-09-06）：表頭與同批分頁**固定**、只有內容捲。
   原本 dialog 自己也會捲、表頭又是 sticky ⇒ 加了分頁列之後總高超過 dialog，
   **sticky 表頭直接蓋住分頁列**（實測只露出 8px）。兩個捲動容器疊在一起就會這樣，
   改成一個：dialog 不捲，內容區吃剩下的高度。 */
/* ★★ 2026-09-06 業主實測：「訂單」懸浮視窗**每一頁都掛在畫面上、關不掉、重新整理也在**。
   根因就在下面這一行：`<dialog>` 沒有 open 時瀏覽器預設是 display:none，
   但**作者樣式一律贏預設樣式** ⇒ 在基底規則寫 display:flex，等於把它永遠打開。
   而 `.close()` 什麼也不會發生——它從來就不是「開著」的狀態，只是被 CSS 顯示出來。
   ⇒ 基底不給 display（flex-direction／overflow 在 display:none 時無害），只有 [open] 才 flex。 */
.wlpeek{border:0;border-radius:14px;padding:0;width:min(760px,94vw);max-height:88vh;
  background:var(--paper);color:var(--ink);box-shadow:0 18px 60px rgba(60,40,20,.28);
  font:15px/1.7 var(--fb);flex-direction:column;overflow:hidden}
.wlpeek[open]{display:flex}
.pk-hd,.pk-tabs{flex:none}
.wlpeek::backdrop{background:rgba(40,30,20,.35)}
.pk-hd{display:flex;align-items:baseline;gap:10px;padding:14px 16px 10px;border-bottom:2px solid var(--ink);
  background:var(--paper)}
.pk-hd b{font:600 20px/1.2 var(--fn);white-space:nowrap}
.pk-hd span{font-size:13.5px;color:var(--ink3);flex:1 1 auto;min-width:0}
.pk-hd a{white-space:nowrap;font-size:13.5px}
.pk-hd button{border:1px solid var(--rulel);background:#fff;border-radius:8px;min-height:36px;padding:0 10px;cursor:pointer}
.pk-body{padding:10px 16px 16px;overflow:auto;flex:1 1 auto;min-height:0}
/* ★ 業主 2026-09-06：「帳頭、訂購人、內容物是三個重點，用粗體＋分隔線更好閱讀，容易找到重點」 */
.pk-sec{font:700 14.5px/1.5 var(--fb);color:var(--ink);letter-spacing:.06em;
        margin:16px 0 6px;padding-top:11px;border-top:2px solid var(--rule,var(--rulel))}
.pk-sec.first{margin-top:4px;padding-top:0;border-top:0}
.pk-sec.sub{font:600 13px/1.4 var(--fb);color:var(--ink3);margin:9px 0 4px;padding-top:0;border-top:0}
.pk-ln{display:flex;gap:10px;align-items:baseline;padding:3px 0;border-bottom:1px dotted var(--line-soft)}
.pk-ln span{flex:1 1 auto}
.pk-ln.box{font-weight:600;color:var(--ink)}
/* 走生產包裝那幾盒：列出來但看得出不是門市要做的（業主 2026-09-06） */
.pk-ln.prod{color:var(--ink3)}
/* 備註裡指到同批另外幾張單的號碼：點得進去（業主 2026-09-06） */
.pk-ref{font-weight:700;text-decoration:underline dotted;text-underline-offset:3px;padding:2px 1px}
/* 同批訂單分頁（業主 2026-09-06）：同一位客人同時下的幾張單（業主：「同時三張單、三個地點」），在卡上直接切換 */
.pk-tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 16px;
         border-bottom:1px solid var(--rulel);background:var(--warm,#FFFDF6)}
.pk-tabs .pk-tabnote{font-size:12.5px;color:var(--ink3);margin-right:2px}
.pk-tabs a,.pk-tabs b{font:600 13.5px/1 var(--fn);padding:7px 12px;border-radius:16px;
                      border:1px solid var(--rulel);background:#fff;text-decoration:none;min-height:32px;
                      display:inline-flex;align-items:center}
.pk-tabs b.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pk-ln.prod.box{color:var(--ink2)}
.pk-ln.in{padding-left:1em;color:var(--ink2)}
.pk-ln i{font-style:normal;font-size:12px;color:var(--ink3)}
.pk-ln b{font-variant-numeric:tabular-nums;min-width:2.5em;text-align:right}
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.pk-kv{display:flex;gap:8px;align-items:baseline;padding:2px 0;border-bottom:1px dotted var(--line-soft);min-width:0}
.pk-kv.wide{grid-column:1 / -1}
.pk-kv span{flex:0 0 6em;font-size:12.5px;color:var(--ink3)}
.pk-kv b{font-weight:500;color:var(--ink);word-break:break-all}
.pk-dim{color:var(--ink3);font-style:normal}
/* 訂單懸浮視窗的貨態（黑貓 API·2026-09-05）：狀態醒目、時間與「查於」退到次要 */
.pk-kv b.tct{font-weight:700}
/* 宅配編號＝可點（業主 2026-09-06 要「底線」）：點了跳 /ship/status 看黑貓 API 的貨態。
   ★ 明寫 underline 不靠瀏覽器預設——這張卡裡別的連結有被 a{text-decoration:none} 收掉的。 */
.pk-kv .pk-obt{text-decoration:underline;text-underline-offset:2px;color:inherit}
/* ★ 次要連結：營運台自己的貨態頁（走黑貓 API、有歷程）。主連結是黑貓官網，這顆是補的 ⇒ 小一號、不搶眼。 */
.pk-kv .pk-obt2{font-size:11.5px;padding:1px 5px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink2);white-space:nowrap}
.pk-kv .pk-obt:hover{color:var(--brand,#a4471f)}
.pk-kv b.tct.problem,.pk-kv b.tct.return{color:var(--bad)}
.pk-kv b.tct.done{color:var(--good)}
.pk-kv b.tct.none{color:var(--ink3);font-weight:500}
.pk-kv b.tct.unknown{color:#8a5a00}
.pk-kv b.tct i{font-style:normal;font-weight:400;color:var(--ink3);margin-left:6px;font-size:12px}
.pk-kv b.bad{color:var(--bad)}
.pk-tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:2px}
.pk-tbl th{font-weight:500;color:var(--ink3);font-size:12px;text-align:left;padding:3px 4px;border-bottom:1px solid var(--rulel)}
.pk-tbl td{padding:3px 4px;border-bottom:1px dotted var(--line-soft);vertical-align:top}
.pk-tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.pk-tbl .pid{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.pk-tbl tr.box td{font-weight:600;background:#fff}
.pk-tbl tr.dim td{color:var(--ink3)}
@media (max-width:600px){.pk-grid{grid-template-columns:1fr}}
.pk-note{color:var(--ink3);font-size:13.5px;padding:8px 0}
.pk-kind{margin:10px 0 2px;padding:8px 10px;border:1.5px solid var(--brand);border-radius:8px;font-size:14px;line-height:1.6}
.pk-kind b{display:inline-block;background:var(--brand);color:#fff;border-radius:6px;padding:0 8px;margin-right:6px;font-weight:600}
.pk-kind span{color:var(--ink)}
.pk-note.bad{color:var(--bad)}

/* ★★ 官網印單的確認清單（業主 2026-09-08：「預期宅配單很會多列的情況」）。
   一批中秋可以到上百張 ⇒ 清單自己捲，不要把下面的東西推到幾個螢幕外；
   表頭黏住，捲到第 80 張還看得出哪一欄是哪一欄。
   ★ 高度用 vh 不用固定 px：手機跟桌機的可視高度差很多（門市用 iPad 也用手機）。 */
.rowsbox{max-height:56vh}
.rowsbox thead th{position:sticky;top:0;z-index:1;background:var(--paper)}

/* 在這一批裡找（業主 2026-09-08「想知道重要的那幾張有沒有在裡面」） */
.rowfind{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.rowfind input[type=search]{flex:1 1 260px;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:6px}
.rowfind label{font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.meta.warn{color:var(--warn,#b45309);font-weight:700}

/* ★★ 列印／截圖（2026-09-08 補）：`.rowsbox` 的 max-height 會讓印出來**只剩第一個螢幕**，
   其餘整段被切掉。這條線整條的工作就是印東西，門市會把這頁印出來或截圖對單
   ⇒ 列印時把高度限制與內捲拿掉，讓清單整份展開。
   ★ 這是我 2026-09-08 加內捲時自己弄出來的退步，不是原本就有的。
   ★ 同時把「在這批裡找」那一列藏掉：紙上按不了，印出來只是雜訊。 */
@media print{
  .rowsbox{max-height:none;overflow:visible;border:0}
  .rowsbox thead th{position:static}
  .rowfind{display:none}
  .steps a.go{text-decoration:underline}
}

/* ERP 單號同步在訂單編號下方（業主 2026-09-08）＋備註/提醒的子列 */
.erpno{font-size:11.5px;color:var(--ink2);margin-left:14px}   /* 退格：看得出是同一張單的第二組號碼 */

/* 收合／展開：業主 2026-09-08「按鈕不夠清楚」⇒ 做成按鈕的樣子，不是一行小灰字 */
.rowstoggle{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:700;
  background:var(--card,#fff);margin-bottom:8px;list-style:none;user-select:none}
.rowstoggle::-webkit-details-marker{display:none}
.rowstoggle .tri{border:5px solid transparent;border-top-color:currentColor;
  margin-top:4px;transition:transform .12s}
details:not([open])>.rowstoggle .tri{transform:rotate(-90deg);margin-top:0}
details:not([open])>.rowstoggle .lbl::after{content:'（已收合）';font-weight:400;color:var(--ink2)}
details[open]>.rowstoggle .lbl{}

/* ★★ 桌機不要橫向捲（業主 2026-09-08）。
   病灶：ship_plan.html 的 `table{min-width:940px}` 是**九欄時代**訂的，
   欄位砍到四欄之後那個下限就是唯一把表撐寬、逼出橫捲的東西
   （實測 900px 寬時清單橫捲 150px、768px 時 282px）。
   ⇒ 只解掉清單與「逾期未出」這兩張的下限，不動別張表（大宗那張自己帶 min-width，
     它是真的需要寬）。
   ★ 訂單編號不換行：17 碼被折成兩段，人會看錯、也複製不順。其餘欄位正常換行。 */
.rowsbox table,.err .tblwrap table{min-width:0}
.rowsbox td,.rowsbox th{white-space:normal}
.rowsbox td.no{white-space:nowrap}
.rowsbox .erpno{white-space:nowrap}
tr.subrow>td{padding-top:0;border-top:0;font-size:12.5px;color:var(--ink2)}
tr.subrow{border-top:0}

/* 查宅配貨態那一列（業主 2026-09-08：印單頁要查得到、結果用懸浮視窗） */
.trackbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px;
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff)}
.trackbar input[type=search]{flex:1 1 300px;min-width:0;padding:6px 10px;
  border:1px solid var(--line);border-radius:6px}
.hist{margin:8px 0 0;padding-left:20px;font-size:12.5px;color:var(--ink2);line-height:1.7}

/* 標題列：標題 + 查宅配輸入欄（業主 2026-09-08：查貨態跟在印哪一種單無關 ⇒ 頁級不進分頁） */
.pagehd{display:flex;gap:36px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
/* ★ 業主 2026-09-08：「留點空白，讓分頁標題像是標題」——標題與查詢框擠在一起時，
   標題看起來像那個查詢框的 label，不像頁標題。用 auto margin 把查詢框推到右邊。 */
.pagehd h1{margin:0;white-space:nowrap}
.pagehd .trackbar{margin-left:auto}
.pagehd .trackbar{flex:1 1 300px;min-width:0;margin:0}
/* ★ 窄螢幕：標題列在 375~434px 會撐爆整頁（實測橫滾 59px）⇒ 縮間距、讓輸入框可以縮到 0。
   ★ 這一列是**每一頁都有**的頁首，它一歪就是七頁一起歪。 */
@media (max-width:560px){
  .pagehd{gap:10px}
  .pagehd .trackbar{flex:1 1 100%}
  .pagehd .trackbar input[type=search]{flex:1 1 120px}
}

/* 懸浮視窗的貨態色票：跟查單頁同一組，免得同一件事兩個畫面長不一樣 */
.pk-kv b.st{padding:2px 8px;border-radius:10px;font-size:12.5px}
.pk-kv b.st.transit{background:#e7f0ff;color:#1d4ed8}
.pk-kv b.st.done{background:#e8f5e9;color:#2e7d32}
.pk-kv b.st.return,.pk-kv b.st.problem{background:#fdecec;color:#b42318}
.pk-kv b.st.unknown{background:#fff4e0;color:#8a5a00;border:1px solid #f0d9a8}