/* ==========================================================================
   士林門市作業平台 — 統一設計系統
   風格：macOS 26 Tahoe「液態玻璃（Liquid Glass）」淺色（依 apple-design 原則）。
   取代舊的 styles.css / layout.css / management.css / apple-design.css /
   auth.css / form-overrides.css。表格密度仍可由 editor.html 透過
   --layout-* 變數調整（layout.js 寫入）。
   ========================================================================== */

:root {
  /* 中性（冷調） */
  --ink: #1c1c1e;
  --body-color: #3a3a3c;
  --muted: #6e6e73;
  --faint: #a1a1a6;
  --canvas: #f2f4f8;
  --surface: #ffffff;
  --line: #e4e4ea;
  --line-strong: #d0d0d8;

  /* 強調：Apple 系統藍 */
  --brand: #0a84ff;
  --brand-strong: #0060df;
  --brand-soft: #e8f1ff;
  --brand-line: #bcdcff;
  --brand-ring: rgba(10, 132, 255, 0.28);

  /* Apple 系統語意色（取文字可讀的深階） */
  --green: #248a3d;
  --green-soft: #e7f7ec;
  --amber: #b15c00;
  --amber-soft: #fff2df;
  --red: #d70015;
  --red-soft: #ffecec;

  /* 液態玻璃材質 */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-blur: blur(20px) saturate(180%);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --scrim: rgba(18, 20, 40, 0.34);

  /* 景深陰影（分層） */
  --shadow-chip: 0 1px 2px rgba(18, 20, 44, 0.06);
  --shadow-card: 0 6px 22px rgba(18, 20, 44, 0.07);
  --shadow-float: 0 30px 80px rgba(18, 20, 44, 0.28);
  --shadow-pop: 0 30px 80px rgba(18, 20, 44, 0.28);

  /* 圓角（Tahoe 偏大圓角） */
  --radius-card: 18px;
  --radius-ctl: 12px;
  --radius-pill: 999px;

  /* 動效曲線：進出場一律 ease-out（起步快，介面才跟手） */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  /* editor.html 可調整的表格密度變數 */
  --layout-cell-x: 12px;
  --layout-cell-y: 13px;
  --layout-head-x: 12px;
  --layout-head-y: 10px;
  --layout-font-size: 14px;
  --layout-radius: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 820px at 10% -10%, #e7f0ff 0%, rgba(231, 240, 255, 0) 58%),
    radial-gradient(1000px 720px at 108% 4%, #eef3ff 0%, rgba(238, 243, 255, 0) 55%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, Inter, "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }

/* ---------- 通用元件 ---------- */

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: var(--radius-ctl);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.button:disabled { opacity: 0.5; cursor: default; }
.button:active:not(:disabled) { transform: scale(0.97); }
.button-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(10, 132, 255, 0.4); }
@media (hover: hover) and (pointer: fine) { .button-primary:hover:not(:disabled) { background: var(--brand-strong); } }
.button-quiet { background: rgba(120, 125, 140, 0.12); color: var(--body-color); }
@media (hover: hover) and (pointer: fine) { .button-quiet:hover:not(:disabled) { background: rgba(120, 125, 140, 0.2); } }
.button-icon { display: inline-flex; }
.button-icon svg { width: 15px; height: 15px; display: block; }

.icon-button {
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
@media (hover: hover) and (pointer: fine) { .icon-button:hover { background: rgba(120, 125, 140, 0.14); color: var(--ink); } }
.icon-button:active { transform: scale(0.94); }

.text-action { border: 0; background: none; color: var(--brand); font-size: 13px; font-weight: 600; padding: 4px 6px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .text-action:hover:not(:disabled) { background: var(--brand-soft); } }
.text-action:disabled { color: var(--muted); opacity: 0.5; cursor: not-allowed; }

input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background: #fff;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2370747f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
textarea { resize: vertical; min-height: 44px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
input::placeholder, textarea::placeholder { color: var(--faint); }

.form-feedback { font-size: 12.5px; margin: 10px 0 0; color: var(--red); }
.form-feedback[data-tone="success"] { color: var(--green); }

/* 一次性提示（toast，玻璃化深底） */
.notice {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 90;
  background: rgba(28, 28, 30, 0.82);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(18, 20, 44, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  animation: notice-in 0.2s var(--ease-out);
  max-width: min(560px, calc(100vw - 40px));
}
@keyframes notice-in { from { opacity: 0; transform: translate(-50%, 8px); } }
/* 從下方進場，也往下方退場（方向一致，視覺上才是同一個東西離開） */
.notice.is-leaving {
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
/* 掛在 dialog 裡時（dialog 有 backdrop-filter，會成為 fixed 的定位基準）改貼在視窗上緣，才不會蓋住按鈕。 */
dialog .notice { position: absolute; top: 14px; bottom: auto; }

/* ---------- 登入驗證畫面 ---------- */

.auth-gate, .auth-login {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 820px at 10% -10%, #e7f0ff 0%, rgba(231, 240, 255, 0) 58%),
    radial-gradient(1000px 720px at 108% 4%, #eef3ff 0%, rgba(238, 243, 255, 0) 55%),
    var(--canvas);
}
.auth-login { z-index: 61; }
.auth-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-width: 440px;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  padding: 44px 48px;
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-edge);
}
.auth-gate-mark { width: 56px; height: 56px; border-radius: 17px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 26px; margin-bottom: 8px; box-shadow: 0 8px 20px rgba(10, 132, 255, 0.34); }
.logo-grid { width: 100%; height: 100%; display: block; fill: currentColor; }
.auth-gate-card h1 { font-size: 20px; letter-spacing: -0.02em; }
.auth-gate-card p { color: var(--muted); font-size: 13.5px; }
.auth-gate-card .button { margin-top: 14px; }
body.is-auth-loading .app-shell { display: none; }

.auth-login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 100%;
  max-width: 400px;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  padding: 40px 40px 36px;
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-edge);
}
.auth-login-card h1 { font-size: 20px; letter-spacing: -0.02em; }
.auth-login-card p { color: var(--muted); font-size: 13.5px; }
.auth-login-form { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 16px; text-align: left; }
.auth-login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.auth-login-form input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; letter-spacing: 0.02em; }
.auth-login-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.auth-login-form .button { width: 100%; justify-content: center; }
.auth-login-form .button-quiet { margin-top: -4px; }
#auth-login-code { text-align: center; font-size: 22px; letter-spacing: 0.4em; }
.auth-login .form-feedback { margin-top: 14px; font-size: 13px; min-height: 1em; }
.auth-login .form-feedback[data-tone="error"] { color: var(--red); }
.auth-login .form-feedback[data-tone="info"], .auth-login .form-feedback[data-tone="success"] { color: var(--muted); }

/* ---------- 應用外殼：側欄＋主區 ---------- */

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  flex: none;
  width: 232px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 1px 0 0 var(--line), inset 0 1px 0 var(--glass-edge);
  padding: 20px 14px 16px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); padding: 2px 6px 0; }
.brand-mark { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; box-shadow: 0 6px 16px rgba(10, 132, 255, 0.3); }
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; font-size: 15.5px; letter-spacing: -0.02em; }
.brand-copy small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.primary-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 22px; flex: 1; min-height: 0; overflow-y: auto; }
.nav-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--faint); padding: 0 10px; margin: 4px 0 5px; }
.nav-group-label + .nav-item ~ .nav-group-label,
.nav-item + .nav-group-label { margin-top: 18px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--body-color);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
@media (hover: hover) and (pointer: fine) { .nav-item:hover { background: rgba(120, 125, 140, 0.12); } }
.nav-item:active { transform: scale(0.985); }
.nav-item.is-active { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(10, 132, 255, 0.28); }
.nav-icon { display: inline-flex; flex: none; color: inherit; opacity: 0.85; }
.nav-item.is-active .nav-icon { opacity: 1; }
.nav-icon svg { width: 19px; height: 19px; display: block; }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item b { font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--muted); background: rgba(120, 125, 140, 0.14); padding: 4px 7px; border-radius: var(--radius-pill); }
.nav-item.is-active b { background: rgba(255, 255, 255, 0.24); color: #fff; }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.access-identity { display: flex; flex-direction: column; gap: 1px; padding: 0 6px; min-width: 0; }
.access-email { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-identity { font-size: 11.5px; color: var(--muted); }
.operator-field { display: grid; gap: 6px; margin: 4px 0 8px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.operator-field select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font: inherit; }
.operator-inline { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.operator-inline > span { flex: none; white-space: nowrap; }
.operator-inline select { flex: none; width: auto; min-width: 170px; padding: 8px 30px 8px 11px; border: 1px solid #e6c07a; border-radius: 10px; background-color: #fff; color: var(--ink); font-size: 13px; }
.modal-footer .operator-inline { margin-right: auto; }
.sms-fields .operator-inline { margin-top: 4px; }
.operator-inline select.is-set { border-color: var(--line); }
.sidebar-links { display: flex; align-items: center; gap: 8px; padding: 0 4px; }

/* EPB 連線燈號：門市靠它判斷「現在建單能不能自動帶入」，所以放在側欄底部長駐 */
.epb-status { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 0; border-radius: var(--radius-pill); background: rgba(120, 125, 140, 0.1); color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .epb-status:hover { background: rgba(120, 125, 140, 0.18); } }
.epb-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(120, 125, 140, 0.15); }
.epb-status[data-state="online"] { color: var(--green); background: var(--green-soft); }
.epb-status[data-state="offline"] { color: var(--red); background: rgba(255, 59, 48, 0.12); }
.epb-status[data-state="checking"] { color: var(--amber); background: var(--amber-soft); }
.epb-status[data-state="checking"] .epb-status-dot { animation: epb-pulse 1s ease-in-out infinite; }
@keyframes epb-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .epb-status[data-state="checking"] .epb-status-dot { animation: none; } }
.manager-access {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 10px;
  padding: 7px 10px;
  transition: background 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { .manager-access:hover { background: #d7e8ff; } }
.access-logout { flex: 1; text-align: center; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(120, 125, 140, 0.12); border-radius: 10px; padding: 7px 10px; transition: background 0.15s ease, color 0.15s ease; }
@media (hover: hover) and (pointer: fine) { .access-logout:hover { background: rgba(120, 125, 140, 0.2); color: var(--ink); } }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 30px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 0 var(--line), inset 0 1px 0 var(--glass-edge);
}
.search {
  flex: 0 1 380px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--muted);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.search-icon { display: inline-flex; flex: none; }
.search-icon svg { width: 16px; height: 16px; }
.search input { border: 0 !important; box-shadow: none !important; background: transparent; padding: 0; width: 100%; font-size: 13.5px; }
.search input:focus-visible { outline: none; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.store-switcher { width: auto; height: 38px; padding: 0 32px 0 12px; font-size: 13px; font-weight: 600; border-color: var(--line); background-color: rgba(255, 255, 255, 0.7); }
body.admin-shell #new-case { display: none; }

.main-stage { width: 100%; max-width: 1760px; margin: 0 auto; padding: 26px 30px 48px; }

/* 桌機採 app shell：整頁不捲，只有案件表格內部捲動。
   表頭的 position: sticky 需要一個有高度上限的捲動容器才會觸發；
   在整頁捲動的版型下，捲動容器（.table-scroll）永遠等於內容高度，sticky 形同虛設。 */
@media (min-width: 721px) {
  .app-shell { height: 100dvh; overflow: hidden; }
  .app-main { min-height: 0; }
  .main-stage { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
  /* flex: 0 1 auto → 案件少時卡片貼合內容，多到裝不下才收縮並由 .table-scroll 內捲 */
  .table-card { flex: 0 1 auto; min-height: 260px; display: flex; flex-direction: column; }
  .table-scroll { flex: 1; min-height: 0; }
}

/* ---------- 頁面標頭與提示 ---------- */

.scope-alert {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--amber-soft);
  border: 1px solid #f0dfb4;
  color: var(--amber);
  border-radius: 14px;
  padding: 11px 16px;
  font-size: 13px;
  margin-bottom: 18px;
}
.scope-alert strong { font-weight: 700; }
.email-settings-load-alert {
  background: var(--red-soft);
  border-color: rgba(214, 55, 70, 0.22);
  color: var(--red);
}

.page-intro { margin-bottom: 20px; }
.page-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-heading h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.page-count { font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(120, 125, 140, 0.13); border-radius: var(--radius-pill); padding: 4px 10px; }
.page-hint { margin-top: 5px; font-size: 13px; color: var(--muted); }
/* 只在調撥頁出現，靠右擺避免和標題／筆數擠在一起。 */
.refresh-receipts { margin-left: auto; }

/* ---------- 總覽統計 ---------- */

.overview-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.summary-card {
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 15px 18px;
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-edge);
}
.summary-card small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.summary-card strong { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* 調撥檢視：五張統計卡兼作篩選鈕 */
.overview-strip.is-clickable { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.overview-strip.is-clickable .summary-card { cursor: pointer; text-align: left; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
/* 統計卡兼作篩選鈕：hover 不位移，五張並排時滑過整列才不會抖 */
@media (hover: hover) and (pointer: fine) { .overview-strip.is-clickable .summary-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-card), 0 6px 18px rgba(18, 20, 44, 0.08); } }
.overview-strip.is-clickable .summary-card:active { transform: scale(0.99); }
.overview-strip.is-clickable .summary-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.summary-card.is-active { border-color: var(--brand); box-shadow: var(--shadow-card), 0 0 0 2px var(--brand-ring); }
.summary-today strong { color: var(--amber); }
.summary-overdue strong { color: var(--red); }
.summary-unnotified strong { color: var(--amber); }
.summary-expiring strong { color: var(--amber); }
.summary-stale strong { color: var(--red); }

/* 篩選晶片列 */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-chip {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--glass-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
@media (hover: hover) and (pointer: fine) { .filter-chip:hover { border-color: rgba(0, 0, 0, 0.25); color: var(--ink); } }
.filter-chip:active { transform: scale(0.97); }
.filter-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.filter-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 「已刪除案件」分頁：與月份分頁明顯區隔，避免誤點 */
.chip-deleted { margin-left: auto; color: var(--red); border-color: rgba(0, 0, 0, 0.12); }
.chip-deleted.is-active { background: var(--red); border-color: var(--red); color: #fff; }
@media (hover: hover) and (pointer: fine) { .chip-deleted:hover { color: var(--red); border-color: var(--red); } .chip-deleted.is-active:hover { color: #fff; } }

/* 已刪除案件列：淡化呈現，只留還原動作 */
.deleted-row > td { color: var(--muted); }
.deleted-row .product-title { color: var(--muted); }
.restore-case { padding: 4px 12px; font-size: 13px; }

/* 保留期限徽章 */
.hold-chip { display: inline-flex; flex-direction: column; line-height: 1.25; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hold-chip small { font-size: 11px; font-weight: 500; opacity: 0.85; }
.hold-ok { color: var(--muted); }
.hold-soon { color: var(--amber); }
.hold-today { color: var(--amber); font-weight: 700; }
.hold-overdue { color: var(--red); font-weight: 700; }

/* 逾期未到貨異常：紅底提醒＋日期紅字＋徽章 */
.case-row.is-stale { background: var(--red-soft); }
.case-row.is-stale .date-copy { color: var(--red); font-weight: 700; }
/* ERP 已收貨、等人員回來按確認到貨。優先於逾期紅底：貨已經到了，
   再用紅底喊「未到貨」是錯的（逾期徽章仍保留，不丟掉拖很久的脈絡）。 */
.case-row.is-erp-received { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.case-row.is-erp-received .date-copy { color: var(--brand-strong); font-weight: 700; }
.stale-badge { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--red); background: #fff; border: 1px solid var(--red); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

/* ---------- 案件表格 ---------- */

/* 內容本體用實色：玻璃材質只留給浮在內容之上的層（側欄／頂欄／彈窗），
   表格再疊一層 blur 只會讓文字失銳又吃效能。 */
.table-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--layout-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.table-scroll { overflow: auto; }
.case-table { width: 100%; border-collapse: collapse; font-size: var(--layout-font-size); font-variant-numeric: tabular-nums; }
.case-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--layout-head-y) var(--layout-head-x);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  background: #fafbfd;
  border-bottom: 1px solid var(--line);
}
.case-table td {
  padding: var(--layout-cell-y) var(--layout-cell-x);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}
.case-table tbody tr:last-child td { border-bottom: 0; }
/* 別台電腦剛改過的案件：套用同步結果後短暫點亮，人才會注意到這列動過 */
.case-row.is-synced td { background: rgba(10, 132, 255, 0.14); transition: background 0.6s ease; }
.case-row { cursor: pointer; transition: background 0.12s ease; }
@media (hover: hover) and (pointer: fine) { .case-row:hover td { background: rgba(10, 132, 255, 0.05); } }
.case-row.is-expanded td { background: rgba(10, 132, 255, 0.08); border-bottom-color: transparent; }
.case-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.date-copy { color: var(--muted); font-size: 0.93em; }
.store-name { font-weight: 600; }
.case-number { font-family: var(--font-mono); font-size: 0.9em; color: var(--body-color); }
.sku { font-family: var(--font-mono); font-size: 0.86em; color: var(--muted); }
.qty { text-align: center; font-weight: 700; }
.owner { font-weight: 500; }
.product-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.product-title { font-weight: 600; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.product-sub { font-size: 0.85em; color: var(--muted); margin-top: 2px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.multi-item-badge { flex: none; font-size: 11px; font-weight: 600; color: var(--amber); background: var(--amber-soft); border-radius: var(--radius-pill); padding: 3px 8px; }

.reason { display: inline-block; font-size: 0.86em; font-weight: 600; color: var(--brand); background: var(--brand-soft); border-radius: var(--radius-pill); padding: 4px 10px; }
.reason.stock { color: var(--green); background: var(--green-soft); }
.pay-status { display: inline-block; font-size: 0.86em; font-weight: 600; border-radius: var(--radius-pill); padding: 4px 10px; }
.pay-status.paid { color: var(--green); background: var(--green-soft); }
.pay-status.partial { color: var(--amber); background: var(--amber-soft); }
.pay-status.unpaid { color: var(--red); background: var(--red-soft); }
/* 聯繫狀況是整列唯一可點的狀態格（點了開聯繫紀錄），所以做成按鈕但外觀比照 .pay-status 色票。
   綠＝已通知（與 .pay-status.paid 同一套「已完成」語意），紅＝到貨了還沒通知到，灰＝到貨前的正常狀態。 */
.contact-status { display: inline-block; font: inherit; font-size: 0.86em; font-weight: 600; border: 0; border-radius: var(--radius-pill); padding: 4px 10px; cursor: pointer; }
.contact-status:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.contact-status.done { color: var(--green); background: var(--green-soft); }
.contact-status.urgent { color: var(--red); background: var(--red-soft); }
.contact-status.idle { color: var(--muted); background: var(--canvas); }
.plain-status { color: var(--muted); }
.plain-status.is-done { color: var(--green); font-weight: 600; }
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  color: #fff;
  font-size: 12px;
}
.check.is-done { background: var(--green); border-color: var(--green); }

.case-type-badge { display: inline-block; font-size: 0.86em; font-weight: 600; border-radius: var(--radius-pill); padding: 4px 10px; }
.case-type-mint { color: var(--green); background: var(--green-soft); }
.case-type-violet { color: var(--brand); background: var(--brand-soft); }
.case-type-amber { color: var(--amber); background: var(--amber-soft); }

.send-transfer-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 9px;
  padding: 5px 9px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.12s ease;
}
@media (hover: hover) and (pointer: fine) { .send-transfer-email:hover:not(:disabled) { background: #d7e8ff; } }
.send-transfer-email:active:not(:disabled) { transform: scale(0.97); }
.send-transfer-email:disabled { opacity: 0.45; cursor: default; }
.email-action-mark { font-size: 12px; }
.email-action-primary { display: inline-flex; align-items: center; gap: 5px; }
.send-transfer-email.is-sent { background: var(--green-soft); border-color: transparent; color: var(--green); }
.send-transfer-email .email-action-resend { display: none; }
@media (hover: hover) and (pointer: fine) { .send-transfer-email.is-sent:hover .email-action-primary { display: none; } }
@media (hover: hover) and (pointer: fine) { .send-transfer-email.is-sent:hover .email-action-resend { display: inline; } }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 64px 24px; text-align: center; }
.empty-state strong { font-size: 15px; }
.empty-state span { font-size: 13px; color: var(--muted); }

/* ---------- 案件詳情（列內展開＋抽屜共用） ---------- */

.detail-row td { background: rgba(10, 132, 255, 0.05); white-space: normal; }
.detail-inline { padding: 2px 6px 10px; }

.detail-shell { min-width: 0; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 12px 2px 14px; }
/* 頂部分三層：識別列 → 顧客卡 → 次要資訊。收貨人員／到貨日期／保留期限不放這裡，
   它們在下方到貨區已經各出現一次。 */
.detail-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; }
.detail-case-number { font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
/* 與聯繫紀錄視窗的 .contact-customer-card 同一套規格：講的是同一位顧客，看起來要像同一個東西 */
.detail-party { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(110px, 0.7fr) minmax(100px, 0.6fr); gap: 12px; padding: 13px 16px; border: 1px solid var(--brand-line); border-radius: 16px; background: var(--brand-soft); }
/* 只選標籤那顆 span：付款狀態用的是 .pay-status 色票，被 display:block 吃掉會撐滿整格 */
.detail-party > div > span:first-child { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.detail-party strong { display: block; font-size: 16px; letter-spacing: -0.015em; }
.detail-party-customer { font-variant-numeric: tabular-nums; }
.detail-secondary { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--body-color); }
.detail-secondary small { font-size: 11.5px; color: var(--muted); }
.fact { display: flex; flex-direction: column; gap: 3px; }
.fact-label { font-size: 11.5px; color: var(--muted); }
.fact-value { font-size: 13.5px; font-weight: 600; }
.fact-value.mono { font-family: var(--font-mono); font-size: 12.5px; }
.detail-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.detail-status select { width: auto; padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.detail-status-label { font-size: 12px; color: var(--muted); }
.detail-status .button { padding: 8px 13px; font-size: 12.5px; }
.detail-delete { color: var(--red); background: var(--red-soft); }
@media (hover: hover) and (pointer: fine) { .detail-delete:hover:not(:disabled) { background: #ffdcdc; } }
/* 刪除獨立在最下方，與日常作業按鈕隔開，要捲到底才碰得到 */
.detail-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.detail-danger strong { display: block; font-size: 13px; }
.detail-danger small { font-size: 12px; color: var(--muted); }
.arrival-done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arrival-badge { font-size: 12.5px; font-weight: 700; color: var(--green); background: var(--green-soft); border-radius: var(--radius-pill); padding: 6px 12px; }
.arrival-done small { font-size: 12px; color: var(--muted); }
.arrival-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imessage-notify { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imessage-notify select { width: auto; padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.arrival-notified { font-size: 12px; font-weight: 600; color: var(--green); }
.hold-until-field { display: flex; align-items: center; gap: 8px; flex-basis: 100%; margin-top: 2px; }
.hold-until-field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.hold-until-field input { width: auto; padding: 6px 10px; font-size: 13px; }
.hold-until-field.is-readonly span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.hold-until-field.is-readonly strong { font-size: 13px; }
.hold-until-field.is-readonly small { color: var(--muted); }
.arrival-notify-warn { font-size: 12px; color: var(--muted); }

.detail-remark { display: flex; gap: 10px; align-items: flex-start; background: var(--amber-soft); border-radius: 14px; padding: 11px 14px; margin: 0 2px 12px; }
.detail-remark-tag { flex: none; font-size: 11.5px; font-weight: 700; color: var(--amber); border: 1px solid #ecd9a8; border-radius: var(--radius-pill); padding: 2px 9px; }
.detail-remark p { font-size: 13px; color: var(--body-color); }

.detail-section { border-top: 1px dashed var(--line-strong); padding: 14px 2px; }
.detail-section h3 { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.detail-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.detail-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.item-info { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.item-info strong { font-size: 13.5px; }
.detail-items .item-qty { flex: none; font-size: 13px; color: var(--body-color); }

.timeline { display: flex; flex-direction: column; margin-bottom: 12px; }
.timeline-item { position: relative; padding: 0 0 14px 22px; }
.timeline-item:last-child { padding-bottom: 2px; }
.timeline-item::before { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.timeline-item::after { content: ""; position: absolute; left: 8px; top: 17px; bottom: 0; width: 1.5px; background: var(--line); }
.timeline-item:last-child::after { display: none; }
.timeline-item.create::before { background: var(--brand); }
.timeline-item.close::before { background: var(--green); }
.timeline-item.email::before, .timeline-item.reply::before { background: #4a7fd6; }
.timeline-item.contact::before { background: var(--brand); }
.timeline-item.sms::before, .timeline-item.sms-unlocked::before { background: var(--green); }
.timeline-item.sms-warning::before { background: #d8a12c; }
.timeline-item.sms-failed::before { background: var(--red); }
.timeline-item strong { display: block; font-size: 13px; font-weight: 600; }
.timeline-item small { font-size: 11.5px; color: var(--muted); }

/* 備註留言板：獨立於案件軌跡，一眼看完所有交接留言 */
.note-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.note-board-head h3 { margin-bottom: 0; }
.note-board-head small { font-size: 11.5px; font-weight: 600; color: var(--muted); background: rgba(120, 125, 140, 0.13); border-radius: var(--radius-pill); padding: 3px 10px; }
.note-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 320px; overflow-y: auto; }
.note-card { border: 1px solid var(--line); border-left: 3px solid var(--brand-line); border-radius: 12px; padding: 10px 13px; background: #fff; }
.note-card p { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.note-card footer { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.note-card footer strong { font-weight: 700; color: var(--body-color); }
.note-empty { font-size: 12.5px; color: var(--muted); background: rgba(120, 125, 140, 0.08); border-radius: 12px; padding: 12px 14px; }

.detail-note { display: flex; gap: 8px; align-items: stretch; }
.detail-note textarea { flex: 1; min-height: 42px; }
.detail-note .button { align-self: flex-end; }

/* ---------- 簡訊發送狀態（audit） ---------- */

.sms-audit-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.sms-audit-title h3 { margin-bottom: 0; }
.sms-audit-title small { font-size: 11.5px; color: var(--muted); }
.sms-audit-list { display: flex; flex-direction: column; gap: 10px; }
.sms-audit-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; }
.sms-audit-card[data-tone="accepted"] { border-color: #c9e6d7; background: #f5fbf8; }
.sms-audit-card[data-tone="pending"], .sms-audit-card[data-tone="uncertain"], .sms-audit-card[data-tone="partial"] { border-color: #edd9a8; background: #fdf9ef; }
.sms-audit-card[data-tone="failed"] { border-color: #eecfce; background: #fdf5f4; }
.sms-status-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.sms-status-badge { font-size: 13px; font-weight: 700; }
.sms-audit-card[data-tone="accepted"] .sms-status-badge { color: var(--green); }
.sms-audit-card[data-tone="pending"] .sms-status-badge,
.sms-audit-card[data-tone="uncertain"] .sms-status-badge,
.sms-audit-card[data-tone="partial"] .sms-status-badge { color: var(--amber); }
.sms-audit-card[data-tone="failed"] .sms-status-badge { color: var(--red); }
.sms-status-line time, .sms-status-dest { font-size: 12px; color: var(--muted); }
.sms-audit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sms-audit-status { font-size: 13px; font-weight: 700; }
.sms-audit-card[data-tone="accepted"] .sms-audit-status { color: var(--green); }
.sms-audit-card[data-tone="pending"] .sms-audit-status,
.sms-audit-card[data-tone="uncertain"] .sms-audit-status,
.sms-audit-card[data-tone="partial"] .sms-audit-status { color: var(--amber); }
.sms-audit-card[data-tone="failed"] .sms-audit-status { color: var(--red); }
.sms-audit-head time { font-size: 12px; color: var(--muted); }
.sms-audit-description { font-size: 12.5px; color: var(--body-color); margin-top: 3px; }
.sms-audit-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-top: 7px; }
.sms-audit-batch { font-family: var(--font-mono); font-size: 11.5px; }
.sms-audit-message { font-size: 12.5px; color: var(--red); margin-top: 7px; }
.sms-audit-resolution { margin-top: 9px; font-size: 12.5px; }
.sms-audit-resolution strong { display: block; }
.sms-audit-resolution span { color: var(--muted); font-size: 12px; }
.sms-audit-case-warning { font-size: 12px; color: var(--amber); margin-top: 7px; }
.sms-audit-blocked { font-size: 12px; color: var(--muted); margin-top: 9px; }
.sms-audit-controls { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--line-strong); }
.sms-audit-controls label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sms-audit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sms-audit-sent { background: var(--green); color: #fff; font-size: 12.5px; padding: 8px 13px; }
@media (hover: hover) and (pointer: fine) { .sms-audit-sent:hover:not(:disabled) { background: #1f7838; } }
.sms-audit-unsent { background: var(--red-soft); color: var(--red); font-size: 12.5px; padding: 8px 13px; }
@media (hover: hover) and (pointer: fine) { .sms-audit-unsent:hover:not(:disabled) { background: #ffdcdc; } }
.sms-audit-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  font-size: 13px;
  color: var(--muted);
}
.sms-audit-empty.is-error { color: var(--red); border-color: #eecfce; }
.sms-audit-pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--brand); animation: audit-pulse 1.1s ease-in-out infinite; }
@keyframes audit-pulse { 50% { opacity: 0.25; } }
.notify-customer[aria-disabled="true"] { opacity: 0.5; }

/* ---------- 設定頁 ---------- */

.settings-panel { display: flex; flex-direction: column; gap: 18px; }
#settings-manager-content {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
#settings-manager-content > .settings-section-nav {
  grid-column: 1;
  grid-row: 1 / span 20;
}
#settings-manager-content > [data-settings-section] { grid-column: 2; }
#employee-manager-content,
#sms-template-manager-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.settings-panel.store-settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
}
.settings-panel.store-settings-layout > .settings-intro { grid-column: 1 / -1; }
.settings-panel.store-settings-layout > .store-settings-nav { grid-column: 1; }
.settings-panel.store-settings-layout > #employee-manager-content,
.settings-panel.store-settings-layout > #sms-template-manager-content { grid-column: 2; }
.store-directory, .user-directory, .sms-template-editor { min-width: 0; }
.settings-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.settings-intro { display: flex; justify-content: space-between; align-items: center; gap: 18px; background: var(--surface); }
.settings-intro h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 5px 0 5px; }
.settings-intro p { font-size: 13px; color: var(--muted); }
.settings-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: 0 8px 18px rgba(10, 132, 255, 0.3); }
body.admin-shell .settings-icon { background: var(--ink); box-shadow: 0 8px 18px rgba(18, 20, 44, 0.24); }
.settings-section-nav {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.settings-section-nav > p {
  margin: 2px 8px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
}
.settings-section-nav button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--body-color);
  text-align: left;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.settings-section-nav button span { font-size: 13px; font-weight: 700; }
.settings-section-nav button small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.settings-section-nav button small[data-tone="warning"] { color: var(--amber); }
.settings-section-nav button.is-active,
.settings-section-nav button[aria-current="page"] {
  color: var(--brand-strong);
  background: var(--brand-soft);
}
.settings-section-nav button.is-active small,
.settings-section-nav button[aria-current="page"] small { color: var(--brand-strong); }
.settings-section-nav button.is-active small[data-tone="warning"],
.settings-section-nav button[aria-current="page"] small[data-tone="warning"] { color: var(--amber); }
.settings-section-nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.settings-section-nav button:active { transform: scale(0.985); }
.settings-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 15px; }
.settings-card-head h3 { font-size: 16px; font-weight: 700; margin: 4px 0 4px; letter-spacing: -0.02em; }
.settings-card-head p { font-size: 12.5px; color: var(--muted); }
.settings-card-head small { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(120, 125, 140, 0.13); border-radius: var(--radius-pill); padding: 5px 11px; }
.access-shield, .sms-provider-mark { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.sms-template-badge, .employee-store-badge { flex: none; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border-radius: var(--radius-pill); padding: 6px 13px; }

.user-access-form { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(170px, 1fr) auto; gap: 12px; align-items: end; }
.user-access-form label, .store-form label, .employee-form label, .sms-config-form label, .sms-template-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  min-width: 0;
}
.store-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.store-form .button { grid-column: 1 / -1; justify-self: end; }
.employee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.employee-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }

.settings-table-wrap { overflow-x: auto; }
.settings-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.settings-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.settings-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.settings-table tbody tr:last-child td { border-bottom: 0; }
.settings-table td small { color: var(--muted); font-size: 11.5px; }

.store-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.store-actions button, .store-actions a, .copy-store-url {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.7);
  color: var(--body-color);
  font-size: 12px;
  font-weight: 600;
  border-radius: 9px;
  padding: 5px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { .store-actions button:hover, .store-actions a:hover, .copy-store-url:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } }
.store-actions .delete-store { color: var(--red); }
@media (hover: hover) and (pointer: fine) { .store-actions .delete-store:hover { border-color: var(--red); background: var(--red-soft); color: var(--red); } }
.store-url { display: flex; align-items: center; gap: 8px; max-width: 330px; }
.store-url span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.copy-store-url { flex: none; }
.admin-lock { font-size: 12px; color: var(--muted); }
.user-edit-input {
  width: 100%;
  min-width: 150px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
  color: var(--body-color);
}
.user-edit-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.user-edit-row td { background: var(--brand-soft); }
.user-role { display: inline-block; font-size: 12px; font-weight: 600; color: var(--body-color); background: rgba(120, 125, 140, 0.14); border-radius: var(--radius-pill); padding: 4px 10px; }
.user-role.admin { color: var(--brand); background: var(--brand-soft); }
.account-status { font-size: 12.5px; font-weight: 600; color: var(--green); }
.account-status.inactive { color: var(--faint); }

/* 多支登入門號：預設收合成一顆「N 支門號」，點開才展開清單 */
.phone-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .phone-toggle:hover { border-color: var(--line-strong); } }
.phone-toggle-caret { font-size: 9px; color: var(--muted); }
.phone-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.phone-list li { font-size: 13px; color: var(--muted); }
.phone-editor { display: grid; gap: 6px; }
.phone-edit-row { display: flex; align-items: center; gap: 6px; }
.phone-edit-row .user-edit-input { flex: 1; min-width: 0; }
.phone-remove { flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .phone-remove:hover { border-color: var(--red); color: var(--red); } }
.phone-add { justify-self: start; padding: 4px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; background: none; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .phone-add:hover { color: var(--brand); border-color: var(--brand); } }
.employee-empty { text-align: center; color: var(--muted); padding: 22px 10px !important; }

.import-card p { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.import-card h3 { font-size: 16px; font-weight: 700; margin: 4px 0 0; }
.import-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.file-picker { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.7); border-radius: var(--radius-ctl); padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
@media (hover: hover) and (pointer: fine) { .file-picker:hover { border-color: var(--brand); color: var(--brand); } }
#import-summary { font-size: 12.5px; color: var(--muted); flex: 1; }
#import-summary.import-ready { color: var(--green); font-weight: 600; }

.sms-provider-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.sms-config-status { flex: none; font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); padding: 5px 12px; }
.sms-config-status[data-state="ready"] { color: var(--green); background: var(--green-soft); }
.sms-config-status[data-state="missing"] { color: var(--amber); background: var(--amber-soft); }
.sms-config-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sms-config-hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.sms-config-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sms-config-actions .form-feedback { margin: 0; }

/* Google 試算表備份卡：狀態列與按鈕沿用簡訊設定卡的視覺，維持設定頁一致 */
.sheet-backup-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.sheet-backup-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sheet-backup-actions .form-feedback { margin: 0; }

.sms-variable-picker { background: rgba(120, 125, 140, 0.08); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.sms-variable-hint { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.sms-variable-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.sms-variable-chip {
  display: grid; gap: 1px; justify-items: flex-start; text-align: left;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { .sms-variable-chip:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); } }
.sms-variable-chip:active { transform: none; }
.sms-variable-chip strong { font-size: 12.5px; font-weight: 700; }
.sms-variable-chip span { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.sms-variable-note { font-size: 12px; color: var(--muted); line-height: 1.7; }
.sms-template-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.sms-template-count { justify-self: end; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sms-template-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sms-template-actions .form-feedback { margin: 0; }

/* ---------- 對話框：新增/編輯案件 ---------- */

dialog { border: 0; padding: 0; color: inherit; }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.modal {
  margin: auto;
  width: min(780px, calc(100vw - 36px));
  max-height: calc(100dvh - 48px);
  border-radius: 22px;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-float), inset 0 1px 0 var(--glass-edge);
  /* 捲動交給內層，外框只負責圓角；否則捲軸會長在圓角裡把右上/右下切成直角。 */
  overflow: clip;
  /* display 必須綁在 [open]：作者樣式會蓋掉 UA 的 dialog:not([open]) { display: none }。 */
  display: none;
  flex-direction: column;
}
.modal[open] { display: flex; }
/* flex-basis 一定要留 auto：dialog 是 height: fit-content，WebKit（Safari）算外框高度時
   會拿 flex-basis 當內容高，寫 flex: 1（basis 0）整個視窗就被壓成只剩 padding 的一條。 */
.modal > form, .modal > .confirm-shell, .modal > .detail-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal form { padding: 24px 26px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.modal-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; margin-top: 3px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 14px; }
.form-grid > label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.note-field { grid-column: 1 / -1; }

/* 自動帶入欄位鎖定：鎖住的格子要一眼看得出「不是壞掉，是這裡不用填」 */
.transfer-lock-hint { grid-column: 1 / -1; margin: -2px 0 2px; font-size: 12px; color: var(--muted); }
.transfer-lock-hint[data-state="offline"] { color: var(--amber); font-weight: 600; }
.transfer-lock-hint:empty { display: none; }
.transfer-doc-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.transfer-doc-field > label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.transfer-doc-lookup { min-height: 42px; padding: 10px 14px; }
.transfer-mode-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: -7px 0 4px; }
.transfer-mode-actions[hidden] { display: none; }
.transfer-mode-actions .text-action { color: var(--brand); }
.transfer-mode-actions #transfer-retry-action { color: var(--amber); }
/* 選擇器要湊到比第 139 行那條 input:not(...):not(...):not(...) 更高的權重，否則灰底吃不到 */
.form-grid input:not([type="radio"]):not([type="checkbox"]):disabled,
.form-grid select:disabled,
.item-row input:not([type="radio"]):not([type="checkbox"]):disabled { background: rgba(120, 125, 140, 0.1); color: var(--muted); cursor: not-allowed; }
.item-row .remove-item:disabled { opacity: 0.35; cursor: not-allowed; }

.case-type-picker { grid-column: 1 / -1; border: 0; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.case-type-picker legend { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 8px; }
.type-choice-input { position: absolute; opacity: 0; pointer-events: none; }
.type-choice { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; min-width: 0; background: rgba(255, 255, 255, 0.5); transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease; }
.type-choice:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .type-choice:hover { border-color: var(--line-strong); } }
.type-choice-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(120, 125, 140, 0.12); display: grid; place-items: center; font-size: 16px; }
.type-choice strong { display: block; font-size: 13.5px; }
.type-choice small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.type-choice-input:checked + .type-choice { border-color: var(--brand); background: var(--brand-soft); }
.type-choice-input:checked + .type-choice .type-choice-icon { background: #fff; color: var(--brand); }
.type-choice-input:focus-visible + .type-choice { outline: 2px solid var(--brand); outline-offset: 2px; }
.type-choice-input:disabled + .type-choice { opacity: 0.55; cursor: default; }
.type-choice-input:disabled:checked + .type-choice { opacity: 1; }

.seg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.seg-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 3px; background: rgba(120, 125, 140, 0.14); border-radius: 11px; padding: 3px; align-self: flex-start; max-width: 100%; }
.seg-input { position: absolute; opacity: 0; pointer-events: none; }
.seg-option { padding: 6px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease; }
.seg-option:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .seg-option:hover { color: var(--ink); } }
.seg-input:checked + .seg-option { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20, 22, 44, 0.12); }
/* 用 outline 而非 box-shadow：checked 狀態的浮起陰影才不會被焦點環蓋掉 */
.seg-input:focus-visible + .seg-option { outline: 2px solid var(--brand); outline-offset: 2px; }

.items-editor { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.items-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.items-heading p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.item-row { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) 74px 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.item-row .item-qty { text-align: center; }
.item-stock-toggle { grid-column: 1 / -1; display: none; align-items: center; gap: 7px; margin: -2px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.item-stock-toggle input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.items-editor.show-item-stock .item-stock-toggle { display: flex; }
.detail-items .item-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.detail-items .item-tag.order { background: var(--brand-soft); color: var(--brand-strong); }
.detail-items .item-tag.stock { background: var(--green-soft, #e7f8f3); color: var(--green, #2f8968); }
.remove-item { width: 34px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 18px; transition: background 0.15s ease, color 0.15s ease; }
@media (hover: hover) and (pointer: fine) { .remove-item:hover { background: var(--red-soft); color: var(--red); } }

.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- 案件詳情：置中最上層視窗（與新增案件同一套 .modal） ---------- */

.detail-modal { width: min(840px, calc(100vw - 36px)); }
.detail-modal-body { padding: 22px 26px 26px; }
/* 關閉鈕固定在視窗右上角，不再與動作按鈕同排。
   定位基準刻意留給 dialog 本身（不是捲動容器），內容往下捲時關閉鈕才不會跟著捲走。 */
.detail-modal-body #close-detail { position: absolute; top: 16px; right: 18px; z-index: 3; }
/* 事實區與操作列上下分層；操作按鈕靠左整齊排列（避免已到貨時右對齊換行雜亂） */
.detail-modal .detail-head { flex-direction: column; align-items: stretch; gap: 14px; padding-right: 44px; }
.detail-modal .detail-status { justify-content: flex-start; }

/* ---------- 站內確認視窗（取代 window.confirm） ---------- */

.confirm-modal { width: min(440px, calc(100vw - 32px)); }
.confirm-shell { padding: 24px 26px; }
.confirm-modal .modal-head { margin-bottom: 12px; }
.confirm-message { font-size: 14px; line-height: 1.6; color: var(--body-color); margin: 0; white-space: pre-wrap; }
.confirm-modal .button-danger { background: var(--red); color: #fff; box-shadow: 0 1px 3px rgba(215, 0, 21, 0.32); }
@media (hover: hover) and (pointer: fine) { .confirm-modal .button-danger:hover:not(:disabled) { filter: brightness(0.94); } }

/* ---------- 客訂電話聯繫紀錄 ---------- */

.contact-modal { width: min(680px, calc(100vw - 36px)); }
.contact-customer-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(150px, 0.7fr);
  gap: 12px;
  padding: 13px 17px;
  margin-bottom: 12px;
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  background: var(--brand-soft);
}
.contact-customer-card span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.contact-customer-card strong { display: block; font-size: 17px; letter-spacing: -0.015em; }
.contact-phone-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 5px; }
.contact-phone-line a { color: var(--brand-strong); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.contact-phone-line a[aria-disabled="true"] { color: var(--muted); pointer-events: none; }
.contact-copy { border: 0; border-radius: var(--radius-pill); padding: 5px 10px; background: #fff; color: var(--brand-strong); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: transform 0.14s var(--ease-out), background 0.14s ease; }
@media (hover: hover) and (pointer: fine) { .contact-copy:hover:not(:disabled) { background: rgba(255, 255, 255, 0.7); } }
.contact-copy:active:not(:disabled) { transform: scale(0.97); }
.contact-copy:disabled { opacity: 0.45; cursor: default; }
.contact-order-person { align-self: center; padding-left: 14px; border-left: 1px solid var(--brand-line); }
.contact-products, .contact-entry { padding: 12px 1px; border-top: 1px dashed var(--line-strong); }
.contact-products { border-top: 0; padding-top: 0; }
.contact-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.contact-section-head h3 { font-size: 13px; font-weight: 700; }
.contact-section-head small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.contact-products ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.contact-products li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; background: #fff; }
.contact-products li div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.contact-products li strong { font-size: 13px; }
.contact-products li b { flex: none; font-size: 12.5px; }
.contact-products .contact-products-empty { justify-content: flex-start; color: var(--muted); font-size: 12.5px; background: rgba(120, 125, 140, 0.06); }
.contact-result-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; border: 0; padding: 0; margin: 0 0 12px; }
.contact-result-picker legend { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.contact-result-input { position: absolute; opacity: 0; pointer-events: none; }
.contact-result-picker label { display: grid; place-items: center; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--body-color); font-size: 12.5px; font-weight: 650; text-align: center; cursor: pointer; transition: transform 0.14s var(--ease-out), border-color 0.14s ease, background 0.14s ease, color 0.14s ease; }
@media (hover: hover) and (pointer: fine) { .contact-result-picker label:hover { border-color: var(--brand-line); } }
.contact-result-picker label:active { transform: scale(0.97); }
.contact-result-input:checked + label { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.contact-result-input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.contact-note-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.contact-note-field textarea { min-height: 58px; }
.contact-operator { margin-top: 10px; }
.contact-operator select { width: min(260px, 100%); }
.contact-feedback { margin-top: 9px; font-size: 12.5px; color: var(--red); }
.contact-feedback[data-tone="success"] { color: var(--green); }
/* 完整聯繫歷史看案件軌跡；這裡只留一行「之前打過沒」讓撥號當下不必關窗。 */
.contact-recent { font-variant-numeric: tabular-nums; }

/* ---------- 抽屜：案件詳情 ---------- */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  height: 100dvh;
  max-height: 100dvh;
  width: min(640px, 94vw);
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: -20px 0 60px rgba(18, 20, 44, 0.24);
}
.drawer #detail-content { height: 100%; overflow-y: auto; padding: 22px 26px 30px; }
/* 詳情開著時別台改了這張單：只在底部貼一條提示，絕不動內容（會毀掉簡訊／電訪進行中的狀態） */
.sync-banner { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 26px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(10, 132, 255, 0.92); }
.drawer .detail-items li { background: rgba(255, 255, 255, 0.72); }

/* ---------- 簡訊確認視窗 ---------- */

.sms-modal { width: min(560px, calc(100vw - 36px)); }
.sms-notify-copy { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.sms-recipient-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: rgba(120, 125, 140, 0.09); border-radius: 14px; padding: 13px 16px; margin-bottom: 14px; }
.sms-recipient-card span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.sms-recipient-card strong { font-size: 14px; }
.sms-message-field span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.sms-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 7px; font-variant-numeric: tabular-nums; }
.sms-meta.is-invalid { color: var(--red); font-weight: 600; }
.sms-feedback { font-size: 12.5px; margin-top: 10px; color: var(--muted); }
.sms-feedback[data-tone="error"] { color: var(--red); }
.sms-feedback[data-tone="warning"] { color: var(--amber); }

/* ---------- 動效與材質化（apple-design §1、§4、§12） ---------- */

/* 進場 220ms、退場 150ms（系統回應要比使用者猶豫快）。
   用 transition + allow-discrete 而非 keyframes：keyframes 沒有退場，且連開連關會從頭重播。 */
dialog {
  opacity: 0;
  transition:
    opacity 0.15s var(--ease-out),
    transform 0.15s var(--ease-out),
    overlay 0.15s allow-discrete,
    display 0.15s allow-discrete;
}
.modal { transform: scale(0.96); }
.drawer { transform: translateX(24px); }
dialog[open] { opacity: 1; transform: none; transition-duration: 0.22s; }
@starting-style {
  dialog[open] { opacity: 0; }
  .modal[open] { transform: scale(0.96); }
  .drawer[open] { transform: translateX(24px); }
}

dialog::backdrop {
  opacity: 0;
  transition: opacity 0.15s ease, overlay 0.15s allow-discrete, display 0.15s allow-discrete;
}
dialog[open]::backdrop { opacity: 1; transition-duration: 0.22s; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }

/* ---------- 響應式 ---------- */

@media (max-width: 1080px) {
  .app-sidebar { width: 76px; padding: 18px 10px 14px; }
  .brand { justify-content: center; padding: 0; }
  .brand-copy, .nav-group-label, .nav-label, .nav-item b, .access-identity, .epb-status-text { display: none; }
  .epb-status { justify-content: center; padding: 6px; }
  .primary-nav { margin-top: 18px; }
  .nav-item { justify-content: center; padding: 0; }
  .sidebar-links { flex-direction: column; gap: 6px; padding: 0; }
  .main-stage { padding: 22px 20px 40px; }
  .app-topbar { padding: 12px 20px; }
}

@media (max-width: 900px) {
  #settings-manager-content,
  .settings-panel.store-settings-layout { grid-template-columns: minmax(0, 1fr); }
  #settings-manager-content > .settings-section-nav,
  #settings-manager-content > [data-settings-section],
  .settings-panel.store-settings-layout > .store-settings-nav,
  .settings-panel.store-settings-layout > #employee-manager-content,
  .settings-panel.store-settings-layout > #sms-template-manager-content {
    grid-column: 1;
    grid-row: auto;
  }
  .settings-section-nav {
    position: static;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: thin;
  }
  .settings-section-nav > p { display: none; }
  .settings-section-nav button { flex: 0 0 auto; width: auto; min-width: 158px; }
  .employee-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--line), inset 0 1px 0 var(--glass-edge);
  }
  .primary-nav { flex-direction: row; margin: 0; overflow-x: auto; flex: 1; }
  .nav-item { width: auto; min-height: 38px; padding: 0 10px; }
  .sidebar-foot { border: 0; margin: 0; padding: 0; flex-direction: row; }
  .app-topbar { position: static; flex-wrap: wrap; padding: 12px 16px; }
  .search { flex: 1 1 100%; }
  .top-actions { width: 100%; justify-content: flex-end; }
  .main-stage { padding: 18px 16px 36px; }
  .overview-strip, .overview-strip.is-clickable { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading h1 { font-size: 19px; }
  .form-grid, .sms-config-form, .store-form { grid-template-columns: 1fr; }
  .case-type-picker { grid-template-columns: 1fr; }
  .employee-form { grid-template-columns: 1fr; }
  .user-access-form { grid-template-columns: 1fr; align-items: stretch; }
  #settings-manager-content, #employee-manager-content, #sms-template-manager-content { grid-template-columns: 1fr; }
  .item-row { grid-template-columns: 110px minmax(0, 1fr) 62px 30px; }
  .drawer { width: 100vw; }
  .settings-intro { flex-direction: column; align-items: flex-start; }
  .contact-customer-card { grid-template-columns: 1fr; }
  .contact-order-person { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--brand-line); }
  .contact-result-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 窄螢幕讓標題與「之前打過沒」各佔一行，標題才不會被擠成兩行 */
  .contact-entry .contact-section-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .contact-products li div { flex-direction: column; gap: 2px; align-items: flex-start; }
  .contact-operator { align-items: stretch; flex-direction: column; }
  .contact-operator select { width: 100%; min-width: 0; }
  .detail-party { grid-template-columns: 1fr; }
  .detail-identity { gap: 10px 18px; }
}

/* ---------- 無障礙降級（apple-design §14） ---------- */

@media (prefers-reduced-motion: reduce) {
  /* 保留淡入淡出（幫助理解狀態變化），移除位移與縮放 */
  .modal, .drawer, .modal[open], .drawer[open] { transform: none; }
  @starting-style { .modal[open], .drawer[open] { transform: none; } }
  .notice { animation: fade-in 0.16s ease; }
  .notice.is-leaving { transform: translateX(-50%); }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .button:active:not(:disabled),
  .icon-button:active,
  .filter-chip:active,
  .seg-option:active,
  .type-choice:active,
  .contact-copy:active:not(:disabled),
  .contact-result-picker label:active,
  .overview-strip.is-clickable .summary-card:active,
  .nav-item:active,
  .settings-section-nav button:active,
  .send-transfer-email:active:not(:disabled) { transform: none; }
  .case-row, .button, .nav-item, .settings-section-nav button { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .app-sidebar, .app-topbar, .modal, .drawer, .summary-card, .settings-card,
  .table-card, .auth-gate-card, .auth-login-card, .notice {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .notice { background: var(--ink) !important; color: #fff; }
  .case-table th { background: #fafbfd !important; backdrop-filter: none !important; }
  dialog::backdrop { backdrop-filter: none !important; }
}

@media (prefers-contrast: more) {
  :root { --line: #b9bcc7; --line-strong: #8b8f9c; --muted: #55585f; }
}

/* ---------- 總公司需求：信件、公版與異常流程 ---------- */

.email-template-editor { grid-column: 1 / -1; }
.email-template-badge { background: #eef0ff; color: #5e5ce6; }
.email-settings-form { display: grid; gap: 18px; margin-top: 18px; }
.email-settings-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(120, 125, 140, 0.045);
}
.email-settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.email-settings-section h4 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.email-settings-section p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.email-recipient-grid,
.email-template-fields,
.reminder-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.recipient-source-panel {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.recipient-source-panel > div:first-child { display: grid; gap: 3px; }
.recipient-source-panel > div:first-child strong { font-size: 12.5px; }
.recipient-source-panel > div:first-child small { color: var(--muted); font-size: 11.5px; }
.recipient-source-list { display: flex; flex-wrap: wrap; gap: 8px; }
.recipient-source-list > span {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-subtle, #f7f8fa);
}
.recipient-source-list strong { color: var(--body-color); font-size: 11.5px; }
.recipient-source-list code { color: var(--muted); font: 10px/1.3 var(--font-mono); }
.email-template-fields label:nth-child(2),
.email-template-fields label:nth-child(3) { grid-column: 1 / -1; }
.email-settings-form label { display: grid; gap: 6px; color: var(--body-color); font-size: 12.5px; font-weight: 650; }
.email-variable-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.email-variable-chips button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  padding: 6px 9px;
  color: var(--body-color);
  font-size: 11.5px;
  font-weight: 600;
}
.email-variable-chips code { color: var(--brand-strong); font-family: var(--font-mono); font-size: 10.5px; }
@media (hover: hover) and (pointer: fine) {
  .email-variable-chips button:hover { border-color: var(--brand); background: var(--brand-soft); }
}
.email-preview {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: #fff;
}
.email-preview > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.email-preview > strong { font-size: 13.5px; }
.email-preview pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  color: var(--body-color);
  font: 12.5px/1.65 -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif;
}
.reminder-settings-card .email-settings-form { margin-top: 0; }
.reminder-settings-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.email-settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.email-settings-actions .form-feedback { margin: 0; }

.hq-overview .summary-warning strong { color: var(--amber); }
.hq-overview .summary-severe strong { color: var(--red); }
[data-home-hq-filter] { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
[data-home-hq-filter]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  [data-home-hq-filter]:hover { border-color: var(--brand-line); box-shadow: var(--shadow-card), 0 6px 18px rgba(18, 20, 44, 0.08); }
}
.hq-row.is-hq-warning td { background: rgba(255, 159, 10, 0.045); }
.hq-row.is-hq-severe td { background: rgba(255, 59, 48, 0.055); }
.hq-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: var(--radius-pill);
  background: rgba(120, 125, 140, 0.11);
  padding: 4px 10px;
  color: var(--body-color);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hq-anomaly-badge {
  display: inline-flex;
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}
.hq-anomaly-badge.warning { background: var(--amber-soft); color: var(--amber); }
.hq-anomaly-badge.severe { background: var(--red-soft); color: var(--red); }
.employee-match-warning { display: block; margin-top: 3px; color: var(--amber); font-size: 10.5px; font-weight: 650; }

.hq-workflow { display: grid; gap: 12px; }
.hq-workflow-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hq-workflow-title h3 { margin-top: 3px; font-size: 15px; }
.hq-workflow-alert {
  display: flex;
  align-items: baseline;
  gap: 9px;
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 12px;
}
.hq-workflow-alert.severe { color: var(--red); background: var(--red-soft); }
/* ERP 比對出來的進貨是「好消息＋待人工核對」，用綠色跟黃／紅的異常提醒區隔開。 */
.hq-workflow-alert.erp-arrival {
  flex-wrap: wrap;
  color: var(--green);
  background: var(--green-soft);
}
.hq-workflow-alert.erp-arrival span { flex: 1 1 260px; }
.hq-workflow-alert.erp-arrival small { flex-basis: 100%; opacity: 0.85; }
/* 調撥的收貨提示。用藍不用綠：這套 UI 裡綠色已經是「已完成」語意
   （.plain-status.is-done／.pay-status.paid／.send-transfer-email.is-sent），
   用綠色會讓人以為這筆處理完了，反而不會回來按「確認到貨」。藍＝有新資訊待處理。 */
.hq-workflow-alert.transfer-receipt {
  flex-wrap: wrap;
  margin-bottom: 14px;
  color: var(--brand-strong);
  background: var(--brand-soft);
}
.hq-workflow-alert.transfer-receipt span { flex: 1 1 260px; }
.erp-arrival-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* 異常提醒卡裡的「系統已進貨」通知公版編輯區 */
.arrival-template-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.arrival-template-head h4 { margin: 0; font-size: 13.5px; }
.arrival-template-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.arrival-template-section textarea { width: 100%; }
.erp-arrival-badge {
  display: inline-flex;
  margin-left: 6px;
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}
.erp-received-badge {
  display: inline-flex;
  margin-left: 6px;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  color: var(--brand-strong);
  background: #fff;
  border: 1px solid var(--brand-line);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.hq-workflow-step {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}
.hq-workflow-step > div > strong:first-child { font-size: 13px; }
.hq-workflow-step .email-actions { margin-top: 2px; }
.hq-reply-actions { display: grid; justify-items: start; gap: 9px; }
.hq-reply-form {
  display: grid;
  width: min(100%, 560px);
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.hq-reply-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.hq-reply-choices legend { width: 100%; margin-bottom: 3px; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.hq-reply-choices label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-subtle, #f7f8fa);
  cursor: pointer;
}
.hq-reply-choices label:has(input:checked) { border-color: rgba(53, 102, 199, 0.45); background: var(--blue-soft); color: var(--blue); }
.hq-reply-choices input { margin: 0; }
.hq-reply-other { display: grid; gap: 5px; width: 100%; margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.hq-reply-other textarea { min-height: 64px; color: var(--body-color); font-weight: 400; }
.hq-reply-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.hq-reply-list { display: grid; gap: 7px; margin-top: 9px; }
.hq-reply-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; border-radius: 10px; background: rgba(120, 125, 140, 0.07); padding: 8px 10px; }
.hq-reply-list article strong { font-size: 12px; }
.hq-reply-list article p { margin: 0; color: var(--body-color); font-size: 12.5px; }
.hq-reply-list article small { color: var(--muted); font-size: 10.5px; }
.hq-arrival-form { margin-top: 9px; }
.hq-arrival-done { display: grid; justify-items: start; gap: 4px; margin-top: 9px; }
.hq-arrival-done small { color: var(--muted); font-size: 11.5px; }
.hq-reminder-events { display: grid; gap: 7px; margin-top: 10px; }
.hq-reminder-events > small { color: var(--muted); font-size: 11.5px; }
.hq-reminder-events.is-error > small { color: var(--red); }
.hq-reminder-events article {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 10px;
  background: #fff;
}
.hq-reminder-events article > div { display: flex; gap: 7px; align-items: center; }
.hq-reminder-events article strong { font-size: 11.5px; }
.hq-reminder-events article span { border-radius: var(--radius-pill); background: rgba(120, 125, 140, 0.11); padding: 2px 7px; color: var(--muted); font-size: 10.5px; font-weight: 650; }
.hq-reminder-events article > small { color: var(--muted); font-size: 10.5px; }
.hq-reminder-events article[data-reminder-tone="failed"] span,
.hq-reminder-events article[data-reminder-tone="uncertain"] span { background: var(--red-soft); color: var(--red); }
.hq-reminder-events article[data-reminder-tone="sent"] span { background: var(--green-soft); color: var(--green); }
.hq-reminder-events .button { padding: 6px 10px; font-size: 11.5px; }

@media (max-width: 900px) {
  .email-recipient-grid,
  .email-template-fields,
  .reminder-settings-grid { grid-template-columns: 1fr; }
  .email-template-fields label:nth-child(2),
  .email-template-fields label:nth-child(3) { grid-column: auto; }
  .hq-reply-choices { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hq-reply-list article { grid-template-columns: 1fr; gap: 2px; }
  .hq-reminder-events article { grid-template-columns: 1fr; }
}

/* ── 客製機：信件預覽視窗 ───────────────────────────────────────── */
.custom-email-preview-modal { max-width: 720px; }
.custom-email-warn { margin: 14px 0 0; border-radius: var(--radius-ctl); background: var(--amber-soft, rgba(245, 176, 65, 0.14)); padding: 10px 14px; color: var(--text); font-size: 12.5px; font-weight: 600; }
.custom-email-headers { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin-top: 16px; font-size: 13px; }
.custom-email-headers .lbl { color: var(--muted); font-weight: 650; }
.custom-email-headers .val { overflow-wrap: anywhere; }
.custom-email-body { margin: 14px 0 0; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: rgba(120, 125, 140, 0.05); padding: 14px 16px; font-family: inherit; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.custom-email-attachments { margin-top: 16px; border-top: 1px dashed var(--line-strong); padding-top: 14px; }
.custom-email-attachment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.custom-email-attachments small { color: var(--muted); font-size: 11.5px; }
.custom-apple-field { display: flex; flex-direction: column; gap: 6px; }
.custom-apple-field .hint { margin: 0; color: var(--muted); font-size: 11.5px; }

/* ── 客製機：訂購單 PDF 與規格卡（只在離畫面宿主裡渲染成圖，不會出現在畫面上）── */
.pdf-stage { position: fixed; left: -10000px; top: 0; width: 760px; background: #fff; pointer-events: none; }
.order-pdf { width: 760px; box-sizing: border-box; background: #fff; color: #000; padding: 26px 30px; font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif; }
.order-pdf-brand { text-align: right; font-weight: 800; font-size: 17px; letter-spacing: 1px; margin-bottom: 8px; }
.order-pdf-box { border: 1.5px solid #000; }
.order-pdf-title { text-align: center; font-weight: 800; font-size: 17px; padding: 7px; border-bottom: 1.5px solid #000; }
.order-pdf-subtitle { text-align: center; font-size: 13px; padding: 6px; border-bottom: 1.5px solid #000; }
.order-pdf-grid { display: grid; grid-template-columns: 1fr 1fr; font-size: 13px; }
.order-pdf-grid > div { padding: 8px 10px; border-bottom: 1px solid #000; }
.order-pdf-grid .order-pdf-left { border-right: 1px solid #000; }
.order-pdf-grid .order-pdf-wide { grid-column: 1 / 3; }
.order-pdf-shot { padding: 10px; text-align: center; border-bottom: 1.5px solid #000; min-height: 60px; }
.order-pdf-shot img { max-width: 100%; display: none; }
.order-pdf-shot span { font-size: 12px; color: #888; }
.order-pdf-confirm { text-align: center; font-weight: 800; font-size: 15px; background: #eee; padding: 7px; border-bottom: 1.5px solid #000; }
.order-pdf-sign { display: grid; grid-template-columns: 1fr 1fr; font-size: 13px; }
.order-pdf-sign > div { padding: 10px; min-height: 80px; }
.order-pdf-sign > div:first-child { border-right: 1px solid #000; }
.order-pdf-terms { font-size: 11px; margin-top: 10px; line-height: 1.8; }
.order-pdf-revision { text-align: right; font-size: 11px; margin-top: 4px; }
.spec-card { width: 680px; box-sizing: border-box; display: flex; gap: 22px; background: #fff; color: #1d1d1f; padding: 26px 28px; font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif; }
.spec-card-image { width: 118px; height: auto; flex-shrink: 0; display: none; }
.spec-card-main { flex: 1; }
.spec-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.spec-card-name { font-size: 18px; font-weight: 600; line-height: 1.35; }
.spec-card-price { font-size: 18px; font-weight: 600; white-space: nowrap; }
.spec-card-list { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.45; margin: 12px 0 0; padding: 0; }
.spec-card-list li::before { content: "•"; color: #86868b; margin-right: 8px; }
.spec-card-subhead { font-size: 12.5px; font-weight: 700; color: #86868b; margin: 16px 0 0; }

/* 多人客訂與品項分類 */
.order-groups-editor { grid-column: 1 / -1; border: 1px solid #dedff4; border-radius: 13px; background: #f8f8ff; padding: 14px; }
.order-groups-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.order-groups-heading p { margin: 4px 0 0; color: #777987; font-size: 12px; }
.order-group-card { background: #fff; border: 1px solid #e3e3ec; border-left: 4px solid var(--purple); border-radius: 11px; padding: 12px; margin-top: 9px; box-shadow: 0 2px 8px rgba(54, 52, 111, .04); }
.order-group-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.order-group-card header > div { display: flex; align-items: center; gap: 8px; }
.order-group-index { background: var(--purple-soft); color: var(--purple); font-size: 11px; font-weight: 800; padding: 4px 7px; border-radius: 999px; }
.order-group-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr; gap: 9px; }
.order-group-grid label { min-width: 0; }
.order-group-grid input, .order-group-grid select { width: 100%; }
.item-stock-toggle { grid-column: 1 / -1; display: none; align-items: center; gap: 7px; margin: -2px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.item-stock-toggle input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.items-editor.show-item-stock .item-stock-toggle { display: flex; }
.group-item-picker { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e3e3ec; display: grid; gap: 6px; }
.group-item-picker > span { color: #686a76; font-size: 11px; font-weight: 750; }
.group-item-picker label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.group-item-picker input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
.group-item-picker small { color: #8a8b94; font-size: 11px; }
.group-item-picker p { margin: 0; color: #8a8b94; font-size: 11.5px; }
/* 常態是一張單一位顧客：只剩一組時收掉群組外框與品項勾選，看起來就是一排普通欄位。 */
.order-groups-editor.is-single { display: flex; flex-direction: column; border: 0; background: transparent; padding: 0; }
.order-groups-editor.is-single .order-groups-heading { order: 2; margin: 8px 0 0; justify-content: flex-end; }
.order-groups-editor.is-single .order-groups-caption { display: none; }
.order-groups-editor.is-single .order-group-card { background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 0; box-shadow: none; }
.order-groups-editor.is-single .order-group-card header, .order-groups-editor.is-single .group-item-picker { display: none; }
.order-groups-editor.is-single.allocation-expanded .group-item-picker { display: grid; }
.items-editor.show-order-allocation .item-stock-toggle { display: none; }
.item-allocation-controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 0 2px 6px; }
.item-allocation-controls[hidden] { display: none; }
.item-allocation-controls > label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.item-allocation-controls .item-stock-qty, .group-item-picker .group-item-qty { width: 78px; min-width: 64px; height: 38px; padding: 6px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.item-allocation-summary { flex-basis: 100%; color: var(--muted); line-height: 1.6; }
.item-allocation-summary.is-invalid { color: var(--red); }
.group-allocation-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: center; padding: 7px 0; }
.group-item-choice { min-width: 0; }
.group-item-choice span { overflow-wrap: anywhere; }
.group-item-quantity { white-space: nowrap; }
.group-item-remaining { grid-column: 1 / -1; padding-left: 22px; }
.group-item-qty[aria-invalid="true"] { border-color: var(--red); }
@media (max-width: 600px) {
  .order-groups-editor .order-group-grid { grid-template-columns: minmax(0, 1fr); }
  .group-allocation-line { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .group-item-picker .group-item-quantity { padding-left: 22px; justify-content: space-between; }
  .group-item-picker .group-item-qty, .item-allocation-controls .item-stock-qty { min-height: 44px; font-size: 16px; }
  .group-item-choice { min-height: 36px; }
}
.detail-order-groups > div { display: grid; gap: 10px; }
.detail-order-group { border: 1px solid #e1e2eb; border-left: 4px solid var(--purple); border-radius: 12px; background: #fbfbff; padding: 12px; }
.detail-order-group header, .detail-order-group footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.detail-order-group header > div { display: flex; align-items: center; gap: 8px; }
.detail-order-group header span:first-child { font-size: 10px; font-weight: 800; color: var(--purple); background: var(--purple-soft); padding: 4px 7px; border-radius: 999px; }
.group-contact-state { font-size: 11px; color: #9a4c47; }
.group-contact-state.done { color: #287b59; }
.detail-order-group-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 0; }
.detail-order-group-facts span { background: #fff; border-radius: 8px; padding: 8px; }
.detail-order-group-facts small { display: block; color: #8a8b94; font-size: 10px; }
.detail-order-group-facts b { display: block; margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
.detail-order-group p { font-size: 12px; color: #666873; margin: 8px 0; }
.detail-order-group footer > span { margin-right: auto; color: #777983; font-size: 11px; }
.detail-order-group footer .button { padding: 8px 10px; font-size: 11px; }

/* 案件列表浮動預覽：便條色條與下一步作業是固定視覺錨點。 */
.case-preview-card { position: fixed; z-index: 40; width: min(440px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 24px)); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-float); padding: 16px 18px 14px 22px; pointer-events: none; color: var(--body-color); }
.case-preview-card[hidden] { display: none; }
.case-preview-rail { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--faint); }
.case-preview-mint { background: var(--green); }
.case-preview-violet { background: var(--brand); }
.case-preview-amber { background: var(--amber); }
.case-preview-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.case-preview-card header span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.case-preview-card header strong { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.case-preview-card header > b { flex: none; font-size: 12px; font-weight: 600; background: var(--brand-soft); color: var(--brand-strong); padding: 5px 10px; border-radius: var(--radius-pill); }
.case-preview-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0; color: var(--muted); font-size: 11.5px; }
.case-preview-items { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.case-preview-items li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.case-preview-items li b { flex: none; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.case-preview-more { display: block; color: var(--muted); font-size: 11.5px; margin-top: 6px; }
.case-preview-scenario, .case-preview-group { display: grid; gap: 5px; margin-top: 11px; padding: 10px 12px; border-radius: var(--radius-ctl); background: var(--canvas); font-size: 12.5px; line-height: 1.45; }
.case-preview-group { border-left: 3px solid var(--brand); }
.case-preview-group strong { color: var(--ink); }
.case-preview-group span, .case-preview-group small, .case-preview-scenario span, .case-preview-scenario small { color: var(--muted); }
.case-preview-card > footer { margin: 13px -4px -1px; padding: 11px 13px; background: var(--ink); color: #fff; border-radius: var(--radius-ctl); }
.case-preview-card > footer small { display: block; color: rgba(255, 255, 255, .66); font-size: 10px; letter-spacing: .08em; font-weight: 700; }
.case-preview-card > footer strong { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; }
@media (hover: none), (pointer: coarse) { .case-preview-card { display: none !important; } }
@media (max-width: 900px) { .order-group-grid { grid-template-columns: 1fr 1fr; } }