/* ============================================================
   新系統的共用外框：頂列、上排分頁、功能區（像 Excel、Word 上面那一排）。
   每一頁都載這一份；頁面自己的樣式另外寫在自己的檔案。
   ============================================================ */
/* 配色：每個人自己選（頂列的調色盤），套在 <html data-theme="…">。沒選＝:root 這一組（藍灰）。
   頁面只准用這些變數上色，不准寫死色碼——寫死的地方換配色時不會跟著變。
   ⚠️ 配色清單在 src/pos/index.ts 的 POS_THEMES，加減配色兩邊一起動。
   漲跌一律用 --up／--down 那四個（台灣慣例：增加／超前／達標＝紅，減少／落後／不足＝綠），
   「成功、已儲存」那種狀態色另外定，不要拿來表示跌 */
:root {
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --ink: #1c2430;
  --muted: #687385;
  --line: #dde3ea;
  --primary: #3d5a80;
  --on-primary: #ffffff;
  --p-soft: #e4eaf3;
  --p-ink: #2c4766;
  --up: #d23c3c;
  --up-soft: #fbe5e3;
  --down: #2f8a5f;
  --down-soft: #e3f2ea;
  /* 狀態色：成功／正常／在線用 --ok，失敗／錯誤用 --bad。跟漲跌色分開，同一個顏色不扛兩種意思 */
  --ok: #2f8a5f;
  --ok-soft: #e3f2ea;
  --bad: #c0392b;
  --bad-soft: #fbe9e6;
  /* 提醒色：還沒填、缺項、要注意這裡。不是錯誤，也不是漲跌 */
  --warn: #9a5b13;
  --warn-soft: #fdf1e1;
  --shadow: 0 1px 4px rgba(20, 35, 60, .07);
}
:root[data-theme="navy"] {
  --bg: #f1f3f7;
  --ink: #141c2b;
  --muted: #5f6b80;
  --line: #d9dfe9;
  --primary: #1f3a68;
  --p-soft: #dfe6f2;
  --p-ink: #1a3260;
  --shadow: 0 1px 4px rgba(15, 30, 60, .08);
}
:root[data-theme="graphite"] {
  --bg: #f4f4f5;
  --ink: #18191c;
  --muted: #6b6f76;
  --line: #e1e2e5;
  --primary: #3f4650;
  --p-soft: #e7e8eb;
  --p-ink: #2b3038;
  --shadow: 0 1px 4px rgba(0, 0, 0, .07);
}
:root[data-theme="teal"] {
  --bg: #f1f5f6;
  --ink: #16242a;
  --muted: #5e7078;
  --line: #d8e3e6;
  --primary: #2f6f7e;
  --p-soft: #dcecef;
  --p-ink: #235663;
  --shadow: 0 1px 4px rgba(15, 50, 60, .07);
}
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #14181e;
  --surface: #1c222b;
  --ink: #e6eaf0;
  --muted: #98a2b3;
  --line: #2c3440;
  --primary: #6c9bd2;
  --on-primary: #0f141a;
  --p-soft: #23324a;
  --p-ink: #9cc0ea;
  --up: #ff6b5a;
  --up-soft: #4a2622;
  --down: #4cc38a;
  --down-soft: #1d3a2d;
  --ok: #4cc38a;
  --ok-soft: #1d3a2d;
  --bad: #ff7b6b;
  --bad-soft: #3d2320;
  --warn: #f0b35a;
  --warn-soft: #3a2c17;
  --shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
:root[data-theme="coral"] {
  --bg: #fff7f3;
  --ink: #2a1d18;
  --muted: #85726a;
  --line: #f0e0d8;
  --primary: #f2683c;
  --p-soft: #fde7de;
  --p-ink: #c4461d;
  --up: #d9502a;
  --up-soft: #fde7de;
  --down: #368469;
  --down-soft: #e6f2ec;
  --shadow: 0 1px 4px rgba(160, 70, 30, .06);
}
:root {
  /* 間距尺度跟營運中心同一組：標籤↔內容、卡內元素、卡內區塊、頁面大段落 */
  --gap-tight: 8px;
  --gap-inner: 14px;
  --gap-block: 18px;
  --gap-section: 30px;
  font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.6; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
/* hidden 屬性一律真的藏起來：元素自己的 display（grid、flex）會蓋過瀏覽器內建的 [hidden] */
[hidden] { display: none !important; }
.pos-ic { width: 18px; height: 18px; flex: none; }
.pos-ic-lg { width: 26px; height: 26px; }

/* 頂列 */
.pos-top { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.pos-logo { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pos-logo-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: var(--on-primary); font-size: 13px; letter-spacing: .04em; flex: none; }
.pos-logo-mark.has-img { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.pos-logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.pos-logo-name { overflow: hidden; text-overflow: ellipsis; }
.pos-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pos-me { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.pos-me-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--p-soft); color: var(--p-ink); font-weight: 700; flex: none; }
.pos-me-role { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; }
button.pos-me { min-height: 40px; padding: 2px 8px 2px 2px; border: 1px solid transparent; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; }
button.pos-me:hover, button.pos-me[aria-expanded="true"] { border-color: var(--line); background: var(--surface); }
/* 姓名選單：帳號設定、人事資料卡、切換身份（外框借配色選單的） */
.pos-acct-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: inherit; font-size: 14px; text-align: left; text-decoration: none; white-space: nowrap; }
.pos-acct-option:hover { background: var(--p-soft); }
.pos-acct-option small { display: block; color: var(--muted); font-size: 11px; }
.pos-logout, .pos-theme-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.pos-logout:hover, .pos-theme-btn:hover, .pos-theme-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--p-ink); }

/* 配色選單：頂列調色盤按下去的那一小塊。色塊是各配色的預覽，所以色碼刻意寫死 */
.pos-theme { position: relative; }
.pos-theme-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: grid; gap: 2px; min-width: 176px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
.pos-theme-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 14px; text-align: left; white-space: nowrap; }
.pos-theme-option:hover { background: var(--p-soft); }
.pos-theme-head { padding: 6px 10px 2px; color: var(--muted); font-size: 11px; font-weight: 700; }
.pos-theme-head + .pos-theme-option { margin-top: 0; }
.pos-theme-option ~ .pos-theme-head { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.pos-theme-option.is-current { color: var(--p-ink); font-weight: 700; }
.pos-theme-option .pos-ic { margin-left: auto; }
.pos-theme-swatch { width: 20px; height: 20px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; flex: none; }
.pos-theme-swatch[data-swatch="slate"] { background: linear-gradient(135deg, #3d5a80 50%, #f3f5f8 50%); }
.pos-theme-swatch[data-swatch="navy"] { background: linear-gradient(135deg, #1f3a68 50%, #f1f3f7 50%); }
.pos-theme-swatch[data-swatch="graphite"] { background: linear-gradient(135deg, #3f4650 50%, #f4f4f5 50%); }
.pos-theme-swatch[data-swatch="teal"] { background: linear-gradient(135deg, #2f6f7e 50%, #f1f5f6 50%); }
.pos-theme-swatch[data-swatch="night"] { background: linear-gradient(135deg, #6c9bd2 50%, #14181e 50%); }
.pos-theme-swatch[data-swatch="coral"] { background: linear-gradient(135deg, #f2683c 50%, #fff7f3 50%); }

/* 系統通知（頂端的鈴鐺）：數字疊在鈴鐺右上角，清單沿用下拉選單 */
.pos-bell { position: relative; }
.pos-bell-count { position: absolute; top: -6px; right: -6px; margin-left: 0; }
.pos-bell-menu { width: min(340px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; }
.pos-bell-item { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
a.pos-bell-item:hover { background: var(--p-soft); }
.pos-bell-item b { font-size: 13.5px; line-height: 1.4; }
.pos-bell-item span { color: var(--muted); font-size: 12.5px; line-height: 1.5; white-space: pre-line; }
.pos-bell-item small { color: var(--muted); font-size: 11px; }
.pos-bell-item.is-unread b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--bad); vertical-align: 2px; }
.pos-bell-empty { margin: 0; padding: 8px 10px 10px; color: var(--muted); font-size: 13px; }

/* 上排分頁：放不下就左右滑 */
.pos-tabs { display: flex; gap: 2px; padding: 6px 16px 0; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pos-tabs::-webkit-scrollbar { display: none; }
.pos-tab { flex: none; margin-bottom: -1px; padding: 7px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: none; color: var(--muted); font-size: 14px; white-space: nowrap; }
.pos-tab:hover { color: var(--p-ink); }
.pos-tab.is-current { background: var(--surface); border-color: var(--line); color: var(--p-ink); font-weight: 700; }

/* 功能區：一個分頁底下分好組的大按鈕，組名在下面 */
.pos-ribbon { display: flex; align-items: stretch; min-height: 104px; padding: 8px 10px 4px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: thin; }
.pos-group { display: flex; flex-direction: column; flex: none; padding: 0 10px; border-right: 1px solid var(--line); }
.pos-group:last-child { border-right: 0; }
.pos-group-items { display: flex; flex: 1; align-items: flex-start; gap: 4px; }
.pos-group-label { padding-top: 2px; color: var(--muted); font-size: 11px; text-align: center; white-space: nowrap; }
.pos-big { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 76px; padding: 8px 8px 6px; border-radius: 8px; font-size: 12.5px; text-align: center; text-decoration: none; white-space: nowrap; }
.pos-big .pos-ic-lg { color: var(--p-ink); }
.pos-big:hover, .pos-big.is-current { background: var(--p-soft); }
/* 還沒做的功能：淡一點，點了到「還在做」那一頁 */
.pos-big.is-planned { color: var(--muted); }
.pos-big.is-planned .pos-ic-lg { color: var(--muted); opacity: .6; }
/* 模組還沒訂閱：淡掉、右上角一個鎖頭，點了到〈訂閱方案〉 */
.pos-big.is-locked { color: var(--muted); }
.pos-big.is-locked .pos-ic-lg { color: var(--muted); opacity: .45; }
/* 連回營運中心的功能：右上角一個小箭頭 */
.pos-big-mark { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; color: var(--muted); }
/* 功能區的紅點（要處理的件數）：數字本體是共用的 .pos-count */
.pos-big .pos-count { position: absolute; top: 2px; right: 8px; margin-left: 0; }
.pos-tab .pos-count { margin-left: 5px; vertical-align: 1px; }
.pos-tab[draggable="true"] { cursor: grab; }
.pos-tab.is-dragging { opacity: .45; }
/* 〈常用〉最後面那顆「編輯常用」：虛線框，跟功能按鈕分得出來 */
.pos-big-edit { border: 1px dashed var(--line); background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.pos-big-edit .pos-ic-lg { color: var(--muted); }

/* 編輯常用的視窗 */
.pos-fav-sec { display: grid; gap: var(--gap-tight); }
.pos-fav-sec h3 { margin: 0; font-size: 15px; }
.pos-fav-list { display: grid; gap: 6px; }
.pos-fav-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pos-fav-name { flex: 1; min-width: 0; font-size: 14px; }
.pos-fav-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.pos-fav-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--p-ink); }
.pos-fav-btn:disabled { opacity: .35; cursor: default; }
.pos-fav-group { display: grid; gap: 6px; }
.pos-fav-group b { font-size: 13px; color: var(--muted); }
.pos-fav-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-fav-pick { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13.5px; white-space: nowrap; }
.pos-fav-pick:hover { border-color: var(--primary); background: var(--p-soft); }
.pos-fav-pick .pos-ic { width: 14px; height: 14px; color: var(--p-ink); }
.pos-fav-empty, .pos-fav-note { margin: 0; color: var(--muted); font-size: 13px; }
.pos-fav-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--p-ink); font-size: 13px; text-decoration: underline; cursor: pointer; }
.pos-fav-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inner); padding-top: var(--gap-tight); border-top: 1px solid var(--line); }

/* 內容區 */
.pos-main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--gap-section); max-width: 1280px; margin: 0 auto; padding: 26px; }
.pos-main > * { margin-top: 0; margin-bottom: 0; }
.pos-heading h1 { margin: 0; font-size: 24px; line-height: 1.35; }
.pos-heading p { margin: 4px 0 0; color: var(--muted); }
.pos-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 26px; }
.pos-foot { max-width: 1280px; margin: 0 auto; padding: 0 26px 26px; color: var(--muted); font-size: 12px; }

/* 首頁：全部功能一覽 */
.pos-legend { display: flex; flex-wrap: wrap; gap: var(--gap-tight) var(--gap-inner); color: var(--muted); font-size: 13px; }
.pos-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pos-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pos-swatch.is-page { background: var(--primary); }
.pos-swatch.is-planned { background: var(--line); }
.pos-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap-block); }
.pos-overview-card { display: grid; align-content: start; gap: var(--gap-inner); }
.pos-overview-card h2 { margin: 0; font-size: 17px; }
.pos-overview-group { display: grid; gap: 6px; }
.pos-overview-group h3 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.pos-overview-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 8px; font-size: 13px; text-decoration: none; white-space: nowrap; }
.pos-chip.is-page { background: var(--primary); color: var(--on-primary); }
.pos-chip.is-planned { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.pos-chip.is-locked { background: var(--bg); color: var(--muted); border: 1px dashed var(--line); }
.pos-chip:hover { filter: brightness(.97); }

/* 還在做的佔位頁 */
.pos-soon { display: grid; justify-items: start; gap: var(--gap-inner); }
.pos-soon h1 { margin: 0; font-size: 22px; }
.pos-soon p { margin: 0; color: var(--muted); }

/* 頁尾：版本與系統工具（public-pos/sys.js） */
.pos-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-tight); padding-top: var(--gap-inner); border-top: 1px solid var(--line); }
.pos-foot-btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; white-space: nowrap; }
.pos-foot-btn:hover { border-color: var(--primary); color: var(--p-ink); }
a.pos-foot-btn { text-decoration: none; }
.pos-foot-btn.is-loading { opacity: .6; cursor: progress; }
.pos-foot-notice { margin: var(--gap-tight) 0 0; color: var(--bad); text-align: center; }

/* 視窗：頁尾工具共用。點旁邊灰色區域就關（sys.js 的 openDialog） */
.pos-dialog { width: min(640px, calc(100% - 28px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .22); }
.pos-dialog.is-wide { width: min(980px, calc(100% - 28px)); }
.pos-dialog::backdrop { background: rgba(15, 20, 30, .45); }
.pos-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-inner); padding: 22px 26px 0; }
.pos-dialog-head h2 { margin: 2px 0 0; font-size: 19px; }
.pos-eyebrow { margin: 0; color: var(--p-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.pos-dialog-close { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); flex: none; }
.pos-dialog-close:hover { border-color: var(--primary); color: var(--p-ink); }
.pos-dialog-hint { margin: 6px 26px 0; color: var(--muted); font-size: 12.5px; }
.pos-dialog-body { display: grid; gap: var(--gap-inner); padding: var(--gap-inner) 26px 26px; }
.pos-dialog-body > * { margin-top: 0; margin-bottom: 0; }
.pos-empty { padding: 24px; color: var(--muted); text-align: center; }
.pos-none { color: var(--muted); }

/* 紀錄表：寬的一律包 .pos-table-wrap，自己左右捲；表頭黏在上面 */
.pos-table-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.pos-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pos-table th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; background: var(--primary); color: var(--on-primary); font-size: 11.5px; text-align: left; white-space: nowrap; }
.pos-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pos-table tr:last-child td { border-bottom: 0; }
.pos-table td small { display: block; color: var(--muted); font-size: 11px; }
.pos-table td strong { display: block; }
.pos-log-table tr.is-fail td { background: var(--bad-soft); }
.pos-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pos-badge.is-ok { background: var(--ok-soft); color: var(--ok); }
.pos-badge.is-bad { background: var(--bad-soft); color: var(--bad); }
.pos-badge.is-warn { background: var(--p-soft); color: var(--p-ink); }

/* 版本紀錄：每一版一列，編號與日期在上、摘要在下 */
.pos-ver-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; max-height: 64vh; overflow: auto; }
.pos-ver-row { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.pos-ver-row:last-child { border-bottom: 0; }
.pos-ver-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pos-ver-meta strong { color: var(--p-ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.pos-ver-meta code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font: 600 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pos-ver-meta time { color: var(--muted); font-size: 11px; }
.pos-ver-current { padding: 1px 8px; border-radius: 999px; background: var(--p-soft); color: var(--p-ink); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.pos-ver-row p { margin: 6px 0 0; font-size: 13px; }

/* 使用者足跡：前三欄訂寬、姓名不斷行，內容吃剩下的寬度 */
.pos-al-table th:nth-child(1), .pos-al-table td:nth-child(1) { width: 100px; }
.pos-al-table th:nth-child(2), .pos-al-table td:nth-child(2) { width: 172px; }
.pos-al-table td:nth-child(2) strong { white-space: nowrap; }
.pos-al-table th:nth-child(3), .pos-al-table td:nth-child(3) { width: 112px; }
.pos-al-table th:nth-child(4), .pos-al-table td:nth-child(4) { min-width: 220px; }
.pos-al-action { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pos-al-action.is-entry { background: var(--p-soft); color: var(--p-ink); }
/* 自動抓取跟真人做的事分開上色：操作者與動作兩欄同色，一眼跳得過去 */
.pos-al-action.is-auto { background: var(--line); color: var(--ink); }
.pos-al-table strong.pos-al-auto { color: var(--muted); }
.pos-al-table td.pos-al-detail { color: var(--muted); font-size: 12px; line-height: 1.55; word-break: break-word; }
.pos-al-table tr.pos-al-group td { background: var(--bg); }
.pos-al-table tr.pos-al-child td { background: var(--bg); opacity: .85; }
.pos-al-expand { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.pos-al-expand i { margin-left: 6px; color: var(--p-ink); font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.pos-al-expand:hover i { text-decoration: underline; }
/* 要人處理的事：收折著也看得見，所以不能只是灰字 */
.pos-al-todo { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--up); border-radius: 0 8px 8px 0; background: var(--up-soft); }
.pos-al-todo > b { display: block; color: var(--up); font-size: 12px; }
.pos-al-todo > span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.pos-al-note { margin-top: 4px; color: var(--muted); font-size: 11.5px; }
/* 業績回報的增減：增加＝--up、減少＝--down，括號附原值 → 新值 */
.pos-al-change { display: inline-flex; align-items: baseline; gap: 5px; margin: 2px 5px 2px 0; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pos-al-change.is-up { background: var(--up-soft); color: var(--up); }
.pos-al-change.is-down { background: var(--down-soft); color: var(--down); }
.pos-al-change b { font-variant-numeric: tabular-nums; }
.pos-al-change small { color: inherit; font-size: 10px; font-weight: 600; opacity: .72; }
.pos-al-date { display: inline-block; margin-right: 7px; color: var(--ink); font-size: 11px; font-weight: 700; }
.pos-al-first { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--p-soft); color: var(--p-ink); font-size: 10px; font-weight: 700; white-space: nowrap; }
/* 自動抓取狀態列：點一下展開那幾輪的詳細紀錄 */
.pos-fetch-strip { justify-self: start; padding: 5px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 12px; text-align: left; }
.pos-fetch-strip b { font-weight: 700; }
.pos-fetch-strip b.is-running { color: var(--p-ink); }
.pos-fetch-strip b.is-idle { color: var(--ok); }
.pos-fetch-strip b.is-down { color: var(--bad); }
.pos-fetch-strip i { color: var(--p-ink); font-style: normal; font-weight: 700; }
.pos-fetch-strip:hover { border-color: var(--primary); }
.pos-fetch-strip.is-open i::after { content: "（收合）"; }
.pos-fetch-panel { max-height: 42vh; }

/* 按鈕與表單：視窗與之後各頁共用 */
.pos-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pos-btn:hover { filter: brightness(1.06); }
.pos-btn:disabled { opacity: .55; cursor: not-allowed; }
.pos-btn.is-light { min-height: 34px; padding: 0 12px; border-color: var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; }
.pos-btn.is-light:hover { border-color: var(--primary); color: var(--p-ink); filter: none; }
.pos-btn.is-danger { border-color: var(--bad); background: var(--bad); color: #ffffff; }
.pos-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight); }
.pos-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap-inner); }
.pos-field { display: grid; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--muted); }
/* min-width: 0：輸入框本身有一個預設寬度，不歸零的話窄畫面（手機）會撐出卡片外 */
.pos-field select, .pos-field input { min-width: 0; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
.pos-field select:focus, .pos-field input:focus { outline: 2px solid var(--p-soft); border-color: var(--primary); }
.pos-restore-form { display: grid; gap: var(--gap-inner); }
.pos-num { text-align: right; font-variant-numeric: tabular-nums; }
.pos-muted { color: var(--muted); }
.pos-bad-text { display: block; margin: 0; color: var(--bad); font-size: 12px; }
.pos-ic-sm { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }

/* 視窗裡的段落與提示框 */
.pos-sec { display: grid; gap: var(--gap-tight); }
.pos-sec > * { margin-top: 0; margin-bottom: 0; }
.pos-sec h3 { font-size: 14px; }
.pos-sec-hint { color: var(--muted); font-size: 12px; }
.pos-total { margin: 0; font-size: 14px; }
.pos-total b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pos-total small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
/* 要人做決定的那一塊給底色，跟上面的數字分開 */
.pos-decide { display: grid; gap: var(--gap-tight); padding: 14px 16px; border-radius: 10px; background: var(--p-soft); color: var(--ink); font-size: 13px; }
.pos-decide > * { margin: 0; }
.pos-danger { display: grid; gap: 6px; padding: 14px 16px; border-left: 3px solid var(--bad); border-radius: 0 10px 10px 0; background: var(--bad-soft); font-size: 13px; }
.pos-danger > * { margin: 0; }
.pos-ok-box { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 600; }
.pos-note-box { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg); font-size: 12.5px; line-height: 1.75; }
.pos-mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; opacity: .85; }

/* 空間監控：存放區表的細項縮排、整列淡一階；不從這裡刪的那一列（品牌 Logo）再調淡 */
.pos-st-table td, .pos-st-table th { padding: 7px 10px; }
.pos-st-table tr.pos-st-sub > td { background: var(--bg); color: var(--muted); font-size: 12.5px; }
.pos-st-table tr.pos-st-sub td:first-child { padding-left: 26px; }
.pos-st-table tr.pos-st-sub.is-locked td:first-child { opacity: .75; }
/* 每日新增容量圖。長條一律直角，.pos-sd-bar 不加圓角 */
.pos-sd-chart svg { display: block; width: 100%; height: auto; }
.pos-sd-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.pos-sd-bar { fill: var(--primary); pointer-events: none; }
.pos-sd-bar.is-oneoff { fill: var(--muted); opacity: .45; }
.pos-sd-bar.is-active { fill: var(--p-ink); }
.pos-sd-ma { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.pos-sd-grid { stroke: var(--line); stroke-width: 1; }
.pos-sd-axis { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.pos-sd-tick { fill: var(--muted); font-size: 11px; }
.pos-sd-clip { fill: var(--muted); font-size: 10.5px; font-weight: 700; pointer-events: none; }
.pos-sd-caption { min-height: 1.6em; color: var(--ink); font-size: 12.5px; }
.pos-sd-lead { font-size: 12.5px; }
.pos-sd-lead b { font-variant-numeric: tabular-nums; }
.pos-sd-legend { color: var(--muted); font-size: 11.5px; }
.pos-sd-key { display: inline-block; width: 12px; height: 9px; margin: 0 5px 0 14px; vertical-align: middle; }
.pos-sd-key:first-child { margin-left: 0; }
.pos-sd-key.is-bar { background: var(--primary); }
.pos-sd-key.is-ma { height: 3px; background: var(--ink); }
.pos-sd-key.is-oneoff { background: var(--muted); opacity: .45; }
/* 備份紀錄：除了「結果」都不換行（全是固定短字，折行只會讓整列錯位） */
.pos-bk-table th, .pos-bk-table td { white-space: nowrap; }
.pos-bk-table td:nth-child(2) { white-space: normal; }

/* 視窗內的小分頁與數字徽章 */
.pos-subtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-subtab { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.pos-subtab:hover { border-color: var(--primary); color: var(--p-ink); }
.pos-subtab.is-current { border-color: var(--primary); background: var(--p-soft); color: var(--p-ink); font-weight: 700; }
.pos-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #ffffff; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.pos-btn.is-light.is-bad { color: var(--bad); }
.pos-btn.is-light.is-bad:hover { border-color: var(--bad); }

/* 系統問題回報：一列只有類型＋主題＋狀態，點列展開全文、對話與按鈕 */
.pos-si-table tr.pos-si-row { cursor: pointer; }
.pos-si-table tr.pos-si-row:hover td, .pos-si-table tr.pos-si-row.is-open td, .pos-si-table tr.pos-si-detail td { background: var(--bg); }
.pos-si-table tr.pos-si-row.is-open td { border-bottom: 0; }
.pos-si-kind { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--p-soft); color: var(--p-ink); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.pos-si-topic { font-weight: 700; }
.pos-si-state { font-weight: 700; }
.pos-si-state.is-pending { color: var(--ink); }
.pos-si-state.is-approved, .pos-si-state.is-confirm { color: var(--p-ink); }
/* 紅字在這張表專指「負責人要回覆」 */
.pos-si-state.is-question { color: var(--bad); }
.pos-si-state.is-fixed { color: var(--ok); }
.pos-si-state.is-rejected { color: var(--muted); }
.pos-si-report strong { display: block; }
.pos-si-thread { display: grid; gap: 8px; margin-top: 10px; }
.pos-si-msg { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pos-si-msg.is-ai { background: var(--p-soft); }
.pos-si-msg.is-owner, .pos-si-msg.is-admin { border-color: var(--line); }
.pos-si-msg p { margin: 2px 0 0; font-size: 13px; line-height: 1.6; white-space: pre-line; }
.pos-si-review { display: grid; gap: 8px; min-width: 240px; margin-top: 10px; }
.pos-si-review textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }

/* AI 查詢紀錄：一列一次提問，點列展開每一步 */
.pos-mcp-table tr.pos-mcp-row { cursor: pointer; }
.pos-mcp-table tr.pos-mcp-row:hover td, .pos-mcp-table tr.pos-mcp-row.is-open td, .pos-mcp-table tr.pos-mcp-detail td { background: var(--bg); }
.pos-mcp-table tr.pos-mcp-row.is-fail td:last-child { color: var(--bad); }
.pos-mcp-steps { display: grid; gap: 8px; }
.pos-mcp-step { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pos-mcp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pos-mcp-head time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pos-mcp-title { color: var(--p-ink); font-weight: 700; }
.pos-mcp-rows { color: var(--muted); font-size: 11.5px; }
.pos-mcp-args { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; line-height: 1.6; }
.pos-mcp-args b { margin-right: 4px; color: var(--muted); font-weight: 600; }
.pos-mcp-sql { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--bg); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.pos-mcp-fail { color: var(--bad); font-size: 11.5px; }

/* ---------- 各頁共用的元件（public-pos/kit.js 與各頁的畫面） ---------- */
/* 頁面卡片：標題列＋身體。表格直接放在身體裡，外面包 .pos-table-wrap 自己左右捲 */
.pos-stack { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--gap-block); }
.pos-stack > * { margin-top: 0; margin-bottom: 0; }
.pos-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.pos-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--gap-tight) var(--gap-inner); padding: 22px 26px 0; }
.pos-panel-head h2 { margin: 0; font-size: 17px; line-height: 1.4; }
.pos-panel-head p { margin: 4px 0 0; max-width: 760px; color: var(--muted); font-size: 13px; }
.pos-panel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight); }
.pos-panel-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-inner); padding: var(--gap-inner) 26px 26px; }
.pos-panel-body > * { margin-top: 0; margin-bottom: 0; }
.pos-panel-body .pos-table-wrap { max-height: none; }
.pos-heading-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap-inner); }

/* 存檔狀態小標籤（kit.saveState） */
.pos-save { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pos-save:empty { display: none; }
.pos-save[data-state="saved"] { background: var(--ok-soft); color: var(--ok); }
.pos-save[data-state="failed"] { background: var(--bad-soft); color: var(--bad); }
.pos-save[data-state="dirty"] { background: var(--p-soft); color: var(--p-ink); }

/* 底部提示訊息（kit.toast） */
.pos-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; max-width: min(520px, calc(100vw - 32px)); padding: 11px 18px; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: 14px; line-height: 1.55; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .15s ease, transform .15s ease; }
.pos-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* 問一個值／確認（kit.ask、kit.confirmBox）與臨時密碼 */
.pos-ask { display: grid; gap: var(--gap-inner); }
.pos-ask-note, .pos-confirm-text { margin: 0; font-size: 14px; line-height: 1.7; }
.pos-password { margin: 0; padding: 14px; border-radius: 10px; background: var(--p-soft); color: var(--p-ink); font: 700 28px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .18em; text-align: center; }
/* 臨時密碼視窗裡的登入資料：標題｜內容兩欄 */
.pos-login-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 14px; }
.pos-login-facts span { color: var(--muted); }
.pos-login-facts b { font-weight: 600; word-break: break-all; }
.pos-field textarea { min-height: 88px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; resize: vertical; }
.pos-field textarea:focus { outline: 2px solid var(--p-soft); border-color: var(--primary); }
.pos-field.is-wide { grid-column: 1 / -1; }

/* 表格裡的小下拉與日期：比表單欄位矮，一列放得下 */
.pos-mini { min-height: 34px; max-width: 100%; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.pos-mini:focus { outline: 2px solid var(--p-soft); border-color: var(--primary); }
.pos-mini:disabled { background: var(--bg); color: var(--muted); }
.pos-table td.pos-cell-actions { white-space: nowrap; }
.pos-table td.pos-cell-actions .pos-btn + .pos-btn { margin-left: 6px; }

/* 開關（role="switch"）：沒有文字的小膠囊 */
.pos-switch { position: relative; width: 44px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 999px; background: var(--line); transition: background .15s ease; } /* guard-ok 開關本身沒有文字 */
.pos-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.pos-switch[aria-checked="true"] { background: var(--primary); }
.pos-switch[aria-checked="true"]::after { transform: translateX(18px); }
.pos-switch:disabled { opacity: .45; cursor: not-allowed; }

/* 一行短標籤（狀態、身份數） */
.pos-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pos-tag.is-ok { background: var(--ok-soft); color: var(--ok); }
.pos-tag.is-bad { background: var(--bad-soft); color: var(--bad); }
.pos-tag.is-key { background: var(--p-soft); color: var(--p-ink); }
.pos-loading { padding: 18px 0; color: var(--muted); font-size: 13px; }

/* ============================================================
   四種介面：<html data-device> 由 theme-boot.js 在首次排版前偵測裝置後掛上
   （desktop／phone／tablet-portrait／tablet-landscape）。上面是電腦版，
   下面依裝置覆寫，不照視窗寬度分：手機橫拿還是手機的畫面。
   ============================================================ */

/* 手指操作（手機、平板兩種方向）：點的地方至少 44px 高 */
:root[data-device="phone"] .pos-btn,
:root[data-device^="tablet"] .pos-btn,
:root[data-device="phone"] .pos-btn.is-light,
:root[data-device^="tablet"] .pos-btn.is-light,
:root[data-device="phone"] .pos-mini,
:root[data-device^="tablet"] .pos-mini,
:root[data-device="phone"] .pos-subtab,
:root[data-device^="tablet"] .pos-subtab { min-height: 44px; }
:root[data-device="phone"] .pos-tab,
:root[data-device^="tablet"] .pos-tab { min-height: 44px; }
:root[data-device="phone"] .pos-theme-btn,
:root[data-device^="tablet"] .pos-theme-btn,
:root[data-device="phone"] .pos-logout,
:root[data-device^="tablet"] .pos-logout,
:root[data-device="phone"] .pos-dialog-close,
:root[data-device^="tablet"] .pos-dialog-close { width: 44px; height: 44px; }

/* 平板橫放：電腦的排法，按鈕放大 */
:root[data-device="tablet-landscape"] .pos-big { min-width: 84px; padding: 10px 8px 8px; font-size: 13px; }

/* 平板直放：頂列留字，內容區收窄一點 */
:root[data-device="tablet-portrait"] .pos-tabs { padding: 6px 12px 0; }
:root[data-device="tablet-portrait"] .pos-big { min-width: 76px; padding: 10px 6px 8px; font-size: 13px; }
:root[data-device="tablet-portrait"] .pos-main { padding: 20px 18px 24px; }
:root[data-device="tablet-portrait"] .pos-foot { padding: 0 18px 24px; }

/* 手機：頂列收字，分頁與功能區都左右滑，功能區不顯示組名 */
:root[data-device="phone"] .pos-top { height: 54px; padding: 0 12px; gap: 10px; }
/* 手機上鈴鐺不在最右邊，往左展開會超出畫面：改成貼著頂列、左右各留 12px */
:root[data-device="phone"] .pos-bell-menu { position: fixed; top: 58px; left: 12px; right: 12px; width: auto; }
:root[data-device="phone"] .pos-logo-name,
:root[data-device="phone"] .pos-me-text { display: none; }
:root[data-device="phone"] .pos-tabs { padding: 4px 8px 0; }
:root[data-device="phone"] .pos-tab { padding: 0 14px; font-size: 15px; }
:root[data-device="phone"] .pos-ribbon { min-height: 0; padding: 6px 4px; }
:root[data-device="phone"] .pos-group { padding: 0 4px; }
:root[data-device="phone"] .pos-group-label { display: none; }
:root[data-device="phone"] .pos-big { min-width: 72px; padding: 8px 4px 6px; font-size: 12.5px; }
:root[data-device="phone"] .pos-main { padding: 16px 14px 20px; }
:root[data-device="phone"] .pos-card { padding: 18px; }
:root[data-device="phone"] .pos-panel-head { padding: 18px 18px 0; }
:root[data-device="phone"] .pos-panel-body { padding: var(--gap-inner) 18px 18px; }
:root[data-device="phone"] .pos-foot { padding: 0 14px 20px; }
:root[data-device="phone"] .pos-heading h1 { font-size: 21px; }
:root[data-device="phone"] .pos-dialog { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
:root[data-device="phone"] .pos-dialog-head { padding: 18px 18px 0; }
:root[data-device="phone"] .pos-dialog-body { padding: var(--gap-inner) 18px 18px; }

/* 預覽：在電腦上切成別的裝置看（admin 的「畫面」選單）。頁面框成那種裝置的寬度置中 */
:root[data-device-preview] { background: var(--line); }
:root[data-device-preview] body { margin: 0 auto; min-height: 100vh; box-shadow: 0 0 0 1px var(--line), 0 10px 40px rgba(0, 0, 0, .12); }
:root[data-device-preview="phone"] body { max-width: 390px; }
:root[data-device-preview="tablet-portrait"] body { max-width: 820px; }
:root[data-device-preview="tablet-landscape"] body { max-width: 1180px; }
/* 視窗是蓋在整個瀏覽器上的，不受 body 的寬度限制，預覽時另外收窄 */
:root[data-device-preview="phone"] .pos-dialog { max-width: 374px; }
:root[data-device-preview="tablet-portrait"] .pos-dialog { max-width: 792px; }