:root {
  /* 取自罐頭本身：鐵罐的鋼藍灰，配蛋糕的奶油黃 */
  --ink:      #14201f;   /* 帶綠的深墨，比純黑柔和 */
  --ink-60:   #5c6b69;
  --ink-40:   #8b9896;
  --paper:    #f6f7f4;
  --card:     #ffffff;
  --steel:    #2e4a52;   /* 主結構色 */
  --steel-dk: #1d3138;
  --butter:   #e8b33c;   /* 主要動作 */
  --butter-dk:#b8860c;
  --berry:    #a8324a;   /* 逾期、缺貨 */
  --berry-bg: #fdf0f2;
  --moss:     #4a7c59;   /* 正常、足夠 */
  --moss-bg:  #eff5f0;
  --line:     #dfe3df;
  --line-dk:  #c4cac6;

  --r:   6px;
  --r-lg: 10px;
  --shadow: 0 1px 2px rgba(20, 32, 31, .06);
}

* { box-sizing: border-box; }

/* hidden 屬性一律真的藏起來。否則任何設了 display: flex / grid 的元素
   加上 hidden 還是會顯示（例如報表的自選日期列、出貨時的收款欄）。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 數字等寬，掃視數量時不會跳動 */
.num, td.num, .kpi, .qty { font-variant-numeric: tabular-nums; }

button, input, select, textarea { font: inherit; color: inherit; }

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

/* 列印時只印內容，不印選單 */
@media print {
  .side { display: none; }
  .shell { display: block; height: auto; overflow: visible; background: none; }
  .main { padding: 0; height: auto; overflow: visible; }
  .btn, .r-presets, .r-custom { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- 登入 */

/* 登入頁：深色底至少佔滿整個畫面，登入框在正中間。
   不能用 min-height: 100%：外層 #app 沒有高度，100% 只會等於內容高度，
   大螢幕上下半截會露出淺色底。 */
.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--steel-dk);
}

.login-box {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 36px 32px 32px;
}

.login-box h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.login-box p {
  margin: 0 0 28px;
  color: var(--ink-60);
  font-size: 14px;
}

/* ---------------------------------------------------------------- 框架 */

/* minmax(0, 1fr)：讓內容欄可以比表格窄，表格在自己的 .wrap 裡橫向捲動，
   而不是把整頁撐寬（手機上會整頁左右晃）。 */
/* 電腦與橫向平板：左側選單與右側內容「各自捲動」。
   整個框架固定為一個畫面高，選單永遠完整在左邊，
   內容區有自己的捲軸，頁面再長也不會把選單帶走或留下空白。 */
.shell {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;           /* 手機瀏覽器網址列收合時的實際高度 */
  overflow: hidden;
  background: var(--paper);
}

/* 側欄固定在畫面上，內容再長也不會捲走，也不會在短頁面只畫一半 */
.side {
  background: var(--steel-dk);
  color: #dfe7e6;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  overflow: hidden;
}

.brand {
  padding: 0 8px 24px;
}

.brand b {
  display: block;
  font-size: 17px;
  color: #fff;
  font-weight: 700;
}

.brand span {
  font-size: 12px;
  color: #8ba3a6;
}

/* 選單項目多、螢幕矮的時候，只有中間的選單自己捲，
   上面的店名和下面的「改密碼／登出」永遠看得到 */
.side nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* 導覽分組。11 個項目平鋪掃不動，按使用情境分成三組：
   每天都用的、庫存相關的、偶爾才改的設定。 */
.nav-group {
  font-size: 11px;
  letter-spacing: .08em;
  color: #6b8487;
  padding: 14px 12px 4px;
}

.nav-group:first-child { padding-top: 0; }

.side button {
  background: none;
  border: 0;
  border-radius: var(--r);
  color: #b9cbcb;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 15px;
}

.side button:hover { background: rgba(255,255,255,.06); color: #fff; }

.side button.on {
  background: var(--butter);
  color: var(--steel-dk);
  font-weight: 500;
}

.side .who .role {
  display: block;
  font-size: 12px;
  color: #6b8487;
}

.side .who {
  flex: none;
  margin-top: 8px;
  padding: 16px 12px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: #8ba3a6;
}

.side .who button {
  padding: 6px 0;
  color: #b9cbcb;
  text-decoration: underline;
  font-size: 13px;
}

/* 內容區是自己的捲動區。內容最寬 1180px，多出來的寬度留在右邊，
   捲軸則貼在視窗最右側（不會出現在畫面中間）。 */
.main {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px max(32px, calc(100% - 1180px - 32px)) 64px 32px;
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------- 標題列 */

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.head .sub { color: var(--ink-60); font-size: 14px; }

/* 出貨提醒的主角：今日數字 */
.kpi-bar {
  background: var(--steel);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin-bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
}

.kpi {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.kpi-bar .unit { font-size: 15px; color: #b9cbcb; margin-left: 4px; }
.kpi-bar .gap { flex: 1; }

.kpi-bar .flag {
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.12);
}

.kpi-bar .flag.bad { background: var(--berry); }
.kpi-bar .flag.warn { background: var(--butter); color: var(--steel-dk); }

/* ---------------------------------------------------------------- 區塊 */

.block { margin-bottom: 32px; }

.block > h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-60);
}

.block > h3 b { color: var(--ink); font-weight: 700; }

/* 出貨單列。逾期用左側邊條標示，不把整張卡染紅 */
.order-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 12px 18px;
  align-items: center;
  box-shadow: var(--shadow);
}

/* 取餐時間放在卡片最左邊、字最大：今天的單照時間一張一張做 */
.order-row .when-col {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--steel);
  align-self: start;
  padding-top: 2px;
}

.order-row .when-col .d { display: block; font-size: 12px; font-weight: 500; color: var(--ink-60); white-space: nowrap; }
.order-row .when-col .none { font-size: 13px; font-weight: 500; color: var(--ink-40); }

.order-row.late {
  border-left: 4px solid var(--berry);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

.order-row .who-line {
  font-size: 17px;
  font-weight: 500;
}

.order-row .meta {
  color: var(--ink-60);
  font-size: 13px;
  margin-top: 2px;
}

.order-row .items {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qty {
  border: 1px solid var(--line-dk);
  border-radius: var(--r);
  padding: 3px 10px;
  font-size: 14px;
  background: var(--paper);
}

.qty.short {
  border-color: var(--berry);
  background: var(--berry-bg);
  color: var(--berry);
}

/* 需現做：不是錯誤，是現做產品的日常，所以用提醒色而不是警示紅 */
.qty.make {
  border-color: #ecd398;
  background: #fdf7e8;
  color: #7a5a06;
}

.qty small { font-size: 12px; }
.warn-text { color: var(--butter-dk); }

.order-row .side-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.late-tag {
  color: var(--berry);
  font-weight: 500;
  font-size: 13px;
}

/* ---------------------------------------------------------------- 表格 */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-60);
  padding: 11px 14px;
  background: #f0f2ef;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbf9; }

td.num, th.num { text-align: right; }

.wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- 標記 */

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 13px;
  border: 1px solid var(--line-dk);
  background: var(--paper);
  white-space: nowrap;
}

.tag.bad   { color: var(--berry); border-color: #e8bcc5; background: var(--berry-bg); }
.tag.good  { color: var(--moss);  border-color: #bcd6c3; background: var(--moss-bg); }
.tag.warn  { color: var(--butter-dk); border-color: #ecd398; background: #fdf7e8; }
.tag.solid { background: var(--steel); color: #fff; border-color: var(--steel); }

/* ---------------------------------------------------------------- 按鈕 */

.btn {
  border: 1px solid var(--line-dk);
  background: var(--card);
  border-radius: var(--r);
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover { border-color: var(--ink-40); }

.btn.go {
  background: var(--butter);
  border-color: var(--butter);
  color: #3a2a00;
  font-weight: 500;
}

.btn.go:hover { background: #dca62c; border-color: #dca62c; }

.btn.dark {
  background: var(--steel);
  border-color: var(--steel);
  color: #fff;
}

.btn.dark:hover { background: var(--steel-dk); }

.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-60); }
.btn.quiet:hover { background: #ebeee9; color: var(--ink); }

.btn.danger { color: var(--berry); border-color: #e8bcc5; }
.btn.danger:hover { background: var(--berry-bg); }

.btn.danger-solid { background: var(--berry); border-color: var(--berry); color: #fff; font-weight: 500; }
.btn.danger-solid:hover { background: #8e2a3f; border-color: #8e2a3f; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn.sm { padding: 5px 10px; font-size: 14px; }

.btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 表單 */

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 13px;
  color: var(--ink-60);
  margin-bottom: 5px;
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-dk);
  border-radius: var(--r);
  background: var(--card);
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--steel);
  outline: none;
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 訂單品項列 */
.line-row {
  display: grid;
  grid-template-columns: 1fr 96px 36px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

/* ---------------------------------------------------------------- 對話框 */

.mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 31, .45);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  background: var(--card);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 28px 24px;
  box-shadow: 0 12px 40px rgba(20, 32, 31, .18);
}

/* 有表格的詳情（訂單、客戶、通路價）用寬版，表格欄位才不會被擠成一字一行 */
.modal.wide { max-width: 760px; }

/* 對話框開著時背景不捲動 */
body.modal-open { overflow: hidden; }

.modal h3 { margin: 0 0 18px; font-size: 19px; font-weight: 700; }

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

/* ---------------------------------------------------------------- 其他 */

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r);
  z-index: 60;
  max-width: 400px;
}

.toast.bad { background: var(--berry); }

.empty {
  background: var(--card);
  border: 1px dashed var(--line-dk);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: center;
  color: var(--ink-60);
}

.err {
  background: var(--berry-bg);
  border: 1px solid #e8bcc5;
  color: var(--berry);
  padding: 10px 12px;
  border-radius: var(--r);
  margin-bottom: 14px;
  font-size: 14px;
}

.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filters select { padding: 7px 10px; border: 1px solid var(--line-dk); border-radius: var(--r); background: var(--card); }

.filters .search {
  min-width: 280px;
  padding: 7px 10px;
  border: 1px solid var(--line-dk);
  border-radius: var(--r);
  background: var(--card);
}

/* ---------------------------------------------------------------- 小工具 */

.hint { font-size: 13px; color: var(--ink-60); margin: 0; line-height: 1.7; }
.muted { color: var(--ink-40); }
.nowrap { white-space: nowrap; }
.neg { color: var(--berry); }
.meta { color: var(--ink-60); font-size: 13px; }
.cell-main { font-weight: 500; }
td.act { text-align: right; white-space: nowrap; }

/* 給螢幕閱讀器看、畫面上不顯示的標籤 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 整列可點的表格 */
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #f4f6f2; }
tr.clickable:focus-visible { outline: 2px solid var(--steel); outline-offset: -2px; }

/* 訂單詳情 */
.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 14px;
}

.facts dt { font-size: 12px; color: var(--ink-60); }
.facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.facts dd.big { font-size: 18px; font-weight: 700; color: var(--steel); }

/* 看起來像文字連結的按鈕（例如取餐時間旁邊的「修改」） */
.link-btn {
  border: 0;
  background: none;
  padding: 2px 4px;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--steel);
  text-decoration: underline;
  cursor: pointer;
  vertical-align: middle;
}
.link-btn:hover { color: var(--ink); }

.note-box {
  background: #fdf7e8;
  border: 1px solid #ecd398;
  border-radius: var(--r);
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 14px;
}

.total-line { text-align: right; margin: 0 0 18px; }
.total-line b { font-size: 18px; margin-left: 6px; font-variant-numeric: tabular-nums; }

.action-bar {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.action-bar .push-right { margin-left: auto; }

.sub-h { margin: 0 0 8px; font-size: 14px; color: var(--ink-60); font-weight: 500; }

.timeline { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.timeline li { padding: 4px 0; }
.timeline .when {
  display: inline-block;
  min-width: 92px;
  margin-right: 8px;
  color: var(--ink-60);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

pre.reminder {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

.copy-box {
  width: 100%;
  border: 1px solid var(--line-dk);
  border-radius: var(--r);
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.8;
  resize: vertical;
}

/* ---------------------------------------------------------------- 觸控 */
/* 手指沒有滑鼠準，觸控裝置上把可點擊的目標放大到約 44px */

@media (pointer: coarse) {
  .btn { padding: 11px 18px; }
  .btn.sm { padding: 9px 14px; }
  .side button { padding: 12px 14px; }
  .field input, .field select, .field textarea { padding: 12px 13px; }
  .filters select { padding: 11px 14px; }
  td { padding: 15px 14px; }
  .line-row { grid-template-columns: 1fr 100px 44px; }
}

/* ---------------------------------------------------------------- 平板 */

@media (max-width: 860px) {
  /* 窄螢幕：選單收成頂部一列，整頁一起捲（手機上兩個捲動區很難操作） */
  .shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; overflow: visible; }
  .main { height: auto; overflow: visible; }

  /* 窄螢幕：側欄收成頂部一列，可以左右滑，字不會被擠成直的 */
  .side {
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 20;
    scrollbar-width: none;
  }

  .side::-webkit-scrollbar { display: none; }
  .side button { white-space: nowrap; flex: none; }
  .brand { padding: 0 8px 0 4px; white-space: nowrap; flex: none; }
  .brand span { display: none; }
  .side nav { flex-direction: row; }
  /* 窄螢幕收成橫向列，分組標題藏起來免得佔位 */
  .nav-group { display: none; }
  .side .who { margin-top: 0; border-top: 0; border-left: 1px solid rgba(255,255,255,.1); padding: 0 0 0 14px; white-space: nowrap; }
  .side .who .name { display: none; }
  .side .who { flex: none; margin-top: 0; }
  .side nav { overflow: visible; flex: none; }

  .main { padding: 20px 16px 56px; }
  .order-row { grid-template-columns: 1fr; }
  .order-row .when-col { padding-top: 0; }
  .order-row .side-actions { align-items: stretch; }
  .order-row .side-actions .tag { align-self: flex-start; }
  .kpi { font-size: 34px; }
  .row2 { grid-template-columns: 1fr; }
  .filters .search { min-width: 0; width: 100%; }
}

/* 窄螢幕的表格：欄位不換行，表格在自己的框裡左右滑，
   而不是把每一欄擠到一個字一行 */
@media (max-width: 860px) {
  .wrap { -webkit-overflow-scrolling: touch; }
  .wrap th, .wrap td { white-space: nowrap; }
}

/* 手機上的訂單列表改成卡片：一張單一塊，不用左右滑也看得到全部重點 */
@media (max-width: 560px) {
  .orders-table, .orders-table tbody { display: block; border: 0; background: none; box-shadow: none; }
  .orders-table thead { display: none; }
  .orders-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "no     status"
      "who    who"
      "date   amount"
      "made   made";
    gap: 2px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
  }
  .orders-table td { padding: 0; border: 0; white-space: normal; }
  .orders-table td:nth-child(1) { grid-area: no; }
  .orders-table td:nth-child(2) { grid-area: made; color: var(--ink-40); font-size: 12px; }
  .orders-table td:nth-child(2)::before { content: "建立 "; }
  .orders-table td:nth-child(3) { grid-area: who; }
  .orders-table td:nth-child(4) { grid-area: date; color: var(--ink-60); font-size: 14px; }
  .orders-table td:nth-child(4)::before { content: "取餐 "; }
  .orders-table td:nth-child(5) { display: none; }
  .orders-table td:nth-child(6) { grid-area: amount; font-weight: 500; }
  .orders-table td:nth-child(7) { grid-area: status; text-align: right; }
}

/* 手機：對話框貼底、佔滿寬度，像手機原生的底部面板，手指比較好按 */
@media (max-width: 560px) {
  .mask { padding: 0; place-items: end stretch; }
  .modal, .modal.wide {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .modal-foot .btn { flex: 1; }
  .toast { left: 16px; right: 16px; max-width: none; }
  .head h2 { font-size: 20px; }
  .action-bar .push-right { margin-left: 0; }
}


/* ---------------------------------------------------------------- 統計卡 */
/* 給庫存與進貨頁的頂部摘要用，比一整排 KPI 卡片安靜 */

.stat-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}

.stat-row .item .k {
  font-size: 12px;
  color: var(--ink-60);
  margin-bottom: 2px;
}

.stat-row .item .v {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stat-row .item .v.bad { color: var(--berry); }
.stat-row .item .v.ok { color: var(--moss); }

/* 進貨單明細列 */
.recv-row {
  display: grid;
  grid-template-columns: 1fr 90px 130px 36px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.recv-row .unit {
  font-size: 13px;
  color: var(--ink-60);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .recv-row { grid-template-columns: 1fr 1fr; }
}

/* 摺疊區塊，進貨單看明細用 */
details.fold {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}

details.fold > summary {
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: #fafbf9; }
details.fold[open] > summary { border-bottom: 1px solid var(--line); }
details.fold .body { padding: 14px 18px; }

/* 空狀態裡的主要動作 */
.empty .btn { margin-top: 14px; }

/* ---------------------------------------------------------------- 收款 */

.tag-stack { display: flex; flex-wrap: wrap; gap: 4px; }

.pay-box {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 18px;
  background: #fbfcfa;
}

.pay-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 26px;
}

.pay-sum > div > span { display: block; font-size: 12px; color: var(--ink-60); }
.pay-sum > div > b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pay-sum .due b { color: var(--berry); }
.pay-sum .refund b { color: var(--berry); }
.pay-sum .ok b { color: var(--moss); }
.pay-sum .pay-btns { margin-left: auto; display: flex; gap: 6px; }

.pay-table { margin-top: 12px; box-shadow: none; }
.pay-table td { padding: 8px 12px; }
.pay-table tr.voided td { color: var(--ink-40); text-decoration: line-through; }
.pay-table tr.voided td .meta div { text-decoration: none; }

/* 出貨時同時收款 */
.collect {
  border: 1px solid #ecd398;
  background: #fdf7e8;
  border-radius: var(--r);
  padding: 12px 14px 2px;
}

.check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; }

.order-row .due-line { color: var(--berry); font-size: 13px; font-weight: 500; white-space: nowrap; }
.order-row .meta.paid { color: var(--moss); }

@media (max-width: 560px) {
  .pay-sum .pay-btns { margin-left: 0; width: 100%; }
  .pay-sum .pay-btns .btn { flex: 1; }
}

/* ---------------------------------------------------------------- 報表 */

/* 期間切換：一排分段按鈕 */
.r-presets {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line-dk);
  border-radius: var(--r);
  padding: 3px;
  gap: 2px;
  margin-bottom: 12px;
}

.seg {
  border: 0;
  background: none;
  padding: 7px 16px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-60);
}

.seg:hover { background: #eef1ed; color: var(--ink); }
.seg.on { background: var(--steel); color: #fff; font-weight: 500; }

.r-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.r-custom label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-60); }
.r-custom input { padding: 7px 10px; border: 1px solid var(--line-dk); border-radius: var(--r); background: var(--card); }

/* 四個主要數字 */
.r-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 22px;
}

.r-kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.r-kpi .k { font-size: 13px; color: var(--ink-60); }
.r-kpi b { font-size: 26px; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.r-kpi b small { font-size: 14px; font-weight: 500; color: var(--ink-60); }
.r-kpi .s { font-size: 13px; color: var(--ink-60); }
.r-kpi.strong { background: var(--steel); border-color: var(--steel); color: #fff; }
.r-kpi.strong .k, .r-kpi.strong .s { color: #b9cbcb; }

/* 細項卡片 */
.r-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.r-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}

.r-card h3 { margin: 0 0 8px; font-size: 14px; color: var(--ink-60); font-weight: 500; }

.rlist { list-style: none; margin: 0; padding: 0; }
.rlist li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.rlist li:last-child { border-bottom: 0; }
.rlist li > span:first-child { flex: 1; }
.rlist li > span:not(:first-child) { color: var(--ink-60); font-size: 13px; }
.rempty { margin: 6px 0; font-size: 14px; }
.r-cancel { margin: 0; font-size: 14px; line-height: 1.9; }

/* 目前狀態：可以點過去處理 */
.r-now { margin-bottom: 28px; }
.r-now h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.r-now h3 .muted { font-weight: 400; font-size: 13px; }

.r-now-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.r-now-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--moss);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}

.r-now-item:hover { background: #fafbf9; }
.r-now-item span { font-size: 13px; color: var(--ink-60); }
.r-now-item b { font-size: 22px; font-variant-numeric: tabular-nums; }
.r-now-item small { font-size: 12px; color: var(--ink-60); }
.r-now-item.bad { border-left-color: var(--berry); }
.r-now-item.bad b { color: var(--berry); }
.r-now-item.warn { border-left-color: var(--butter); }

/* 每日明細 */
.r-daily tfoot td { font-weight: 700; border-top: 2px solid var(--line-dk); background: #f6f7f4; }
.r-daily tr.quiet-row td { color: var(--ink-40); }

@media (max-width: 860px) {
  .r-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .r-now-row { grid-template-columns: 1fr; }
  .r-kpi b { font-size: 21px; }
  .r-presets { display: flex; width: 100%; }
  .seg { flex: 1; padding: 8px 6px; }
  /* 手機上藏「新單數」，讓最重要的「實收」不用左右滑就看得到 */
  .r-daily th:nth-child(2), .r-daily td:nth-child(2) { display: none; }
  .r-daily { font-size: 13px; }
  .r-daily th, .r-daily td { padding-left: 6px; padding-right: 6px; }
}

/* ---------------------------------------------------------------- 搜尋、分頁、盤點 */

.orders-table td.created { color: var(--ink-60); font-size: 14px; font-variant-numeric: tabular-nums; }

.filters .date-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-60);
}

.filters .date-range input {
  padding: 6px 8px;
  border: 1px solid var(--line-dk);
  border-radius: var(--r);
  background: var(--card);
}

.check.inline { margin: 0; font-size: 14px; color: var(--ink-60); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--ink-60);
}

.count-table input.cnt {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--line-dk);
  border-radius: var(--r);
  text-align: right;
}

.count-table .diff.neg { color: var(--berry); font-weight: 700; }
.count-table .diff.pos { color: var(--moss); font-weight: 700; }

@media (max-width: 860px) {
  .filters .date-range { width: 100%; }
  .filters .date-range input { flex: 1; min-width: 0; }
}


/* ---------------------------------------------------------------- 應收帳款 */

.ar-kpis { grid-template-columns: 1fr 1fr 2fr; }
.r-kpi.danger b { color: var(--berry); }
.r-kpi.aging .aging-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.r-kpi.aging .aging-row small { display: block; font-size: 12px; color: var(--ink-60); }
.r-kpi.aging .aging-row b { font-size: 16px; }

.r-presets.compact { margin-bottom: 0; }
.r-presets.compact .seg { padding: 5px 14px; }

.ar-table .m-only { display: none; }
.ar-table tfoot td { font-weight: 700; border-top: 2px solid var(--line-dk); background: #f6f7f4; }

@media (max-width: 860px) {
  .ar-kpis { grid-template-columns: 1fr 1fr; }
  .ar-kpis .r-kpi.aging { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  /* 手機上帳齡已經在上面的卡片看得到，表格只留重點，不用左右滑 */
  .ar-table .aging-col { display: none; }
  .ar-table th:nth-child(2), .ar-table td:nth-child(2),
  .ar-table th:nth-child(3), .ar-table td:nth-child(3) { display: none; }
  .ar-table .m-only { display: block; }
  .ar-table { font-size: 14px; }
  .ar-table th, .ar-table td { padding-left: 8px; padding-right: 8px; }
  .r-kpi.aging .aging-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 自動更新 */

/* 選單上的待確認數字 */
.nav-badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 10px;
  background: var(--berry);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.side button.on .nav-badge { background: var(--steel-dk); }

/* ---------------------------------------------------------------- 效期管理 */
.exp-box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px 4px;
  margin: 0 0 14px;
}
.exp-box .field:first-child { margin-bottom: 10px; }

.pick-box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--card);
}
.pick-head { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pick-sum { font-size: 13px; font-weight: 600; margin-left: auto; }
.pick-sum.ok  { color: var(--moss); }
.pick-sum.bad { color: var(--berry); }
.pick-table input.pick {
  width: 76px; padding: 6px 8px; text-align: right;
  border: 1px solid var(--line-dk); border-radius: var(--r);
}
.pick-table tr.expired td { background: var(--berry-bg); }
.pick-table tr.fresh td { background: var(--moss-bg); }
.pick-warn {
  background: var(--berry-bg);
  color: var(--berry);
  border: 1px solid var(--berry);
  border-radius: var(--r);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-weight: 600;
}
.lot-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.lot-filters select { width: auto; min-width: 160px; }
.lot-legend { display: flex; gap: 6px; font-size: 12px; }
.lot-table tr.row-expired td { background: var(--berry-bg); }

/* ---------------------------------------------------------------- 提醒框與訊息中心 */
.notice-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 360px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  z-index: 45;            /* 在對話框（50）下面，不會擋住正在填的表單 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line-dk);
  border-top: 4px solid var(--butter);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px rgba(20, 32, 31, .22);
  padding: 12px;
}
.notice-stack.collapsed {
  width: auto; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible;
}
.notice-pill {
  border: 0;
  border-radius: 999px;
  background: var(--steel);
  color: #fff;
  padding: 10px 18px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 32, 31, .25);
}
.notice-pill b { color: var(--butter); margin-left: 4px; }
.notice-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.notice-head b { margin-right: auto; }
.linkish {
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  color: var(--steel); text-decoration: underline; font-size: 13px;
}
.notice {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  background: var(--paper);
}
.notice-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.notice-title { font-weight: 700; margin-bottom: 4px; }
.notice-body {
  white-space: pre-line;
  font-size: 13px;
  color: var(--ink-60);
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.notice-btns { display: flex; gap: 8px; justify-content: flex-end; }
.notice-more {
  border: 1px dashed var(--line-dk); background: none; border-radius: var(--r);
  padding: 8px; cursor: pointer; color: var(--ink-60);
}

.inbox-list { display: flex; flex-direction: column; gap: 8px; }
.inbox-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px 16px;
}
.inbox-item.unread { border-left: 4px solid var(--butter); }
.inbox-item.read { opacity: .75; }
.inbox-item .inbox-main { flex: 1; min-width: 0; }
.inbox-item .notice-body { max-height: none; margin-bottom: 0; }
.inbox-item .btns { flex-shrink: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--berry); display: inline-block; }

@media (max-width: 860px) {
  .notice-stack { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 60vh; }
  .notice-stack.collapsed { left: auto; }
  .inbox-item { flex-direction: column; }
  .inbox-item .btns { align-self: flex-end; }
}

/* ---------------------------------------------------------------- 門市結帳（POS）
   給平板用：按鈕至少 56px 高、字大，手指好按。左邊商品、右邊購物車。 */
.pos-head { align-items: flex-end; }
.pos-tabs { margin-bottom: 0; }
.pos-tabs .seg { padding: 10px 18px; font-size: 16px; }

.pos { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.pos-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pos-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 120px;
  padding: 16px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .06s ease;
}
.pos-tile:active { transform: scale(.97); }
.pos-tile.in { border-color: var(--butter); background: #fffaf0; }
.pos-name { font-size: 18px; font-weight: 700; line-height: 1.3; }
.pos-price { font-size: 17px; color: var(--steel); font-weight: 600; margin-top: auto; }
.pos-price small { font-weight: 400; color: var(--ink-60); font-size: 13px; }
.pos-stock { font-size: 12px; color: var(--ink-40); }
.pos-badge {
  position: absolute; top: -8px; right: -8px;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 15px; background: var(--butter); color: var(--ink);
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.pos-cart {
  position: sticky; top: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.pos-cart-head { display: flex; justify-content: space-between; align-items: center; }
.pos-empty { color: var(--ink-40); text-align: center; padding: 20px 0; margin: 0; }
.pos-lines { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.pos-lines li {
  display: grid; grid-template-columns: 1fr auto 84px; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.pos-l-name { display: flex; flex-direction: column; font-weight: 600; }
.pos-l-name small { font-weight: 400; color: var(--ink-60); }
.pos-l-sum { text-align: right; font-variant-numeric: tabular-nums; }
.pos-stepper { display: flex; align-items: center; gap: 6px; }
.pos-stepper button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-dk); background: var(--paper);
  font-size: 20px; cursor: pointer; touch-action: manipulation;
}
.pos-stepper b { min-width: 24px; text-align: center; font-size: 17px; }
.pos-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.pos-total b { font-size: 30px; color: var(--steel-dk); font-variant-numeric: tabular-nums; }

.pos-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pos-methods button {
  min-height: 48px; border-radius: var(--r);
  border: 1px solid var(--line-dk); background: var(--paper);
  font: inherit; font-size: 15px; cursor: pointer; touch-action: manipulation;
}
.pos-methods button.on { background: var(--steel); border-color: var(--steel); color: #fff; font-weight: 600; }

.pos-cash { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.pos-cash label { font-weight: 600; }
.pos-cash input {
  font-size: 22px; padding: 8px 12px; border: 1px solid var(--line-dk);
  border-radius: var(--r); width: 100%; font-variant-numeric: tabular-nums;
}
.pos-quick { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pos-quick button {
  min-height: 44px; border-radius: var(--r); border: 1px solid var(--line-dk);
  background: var(--card); font: inherit; cursor: pointer; touch-action: manipulation;
}
.pos-change { grid-column: 1 / -1; font-size: 18px; min-height: 26px; color: var(--moss); }
.pos-change b { font-size: 24px; }
.pos-change.bad { color: var(--berry); }
.pos-note { margin: 0; }
.pos-who summary { cursor: pointer; color: var(--ink-60); font-size: 14px; }
.pos-who input { margin-top: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-dk); border-radius: var(--r); font: inherit; }
.pos-pay { width: 100%; min-height: 60px; font-size: 20px; font-weight: 700; }

.pos-done { text-align: center; padding: 8px 0 4px; }
.pos-done-total { font-size: 40px; font-weight: 700; color: var(--steel-dk); margin: 8px 0; }
.pos-done-change { font-size: 20px; }
.pos-done-change b { font-size: 30px; color: var(--moss); }
.pos-done-change.ok { color: var(--moss); }

.pos-kpis { grid-template-columns: repeat(2, minmax(0, 260px)); }
.pos-sales tr.voided td { color: var(--ink-40); text-decoration: line-through; }
.pos-sales tr.voided td:last-child { text-decoration: none; }

.pos-close { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.pos-methods-sum { list-style: none; padding: 0; margin: 0 0 10px; }
.pos-methods-sum li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.pos-expect { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.pos-expect b { font-size: 26px; }
.pos-close .pos-change { margin: 8px 0 12px; }

@media (max-width: 1000px) {
  .pos { grid-template-columns: 1fr; }
  .pos-cart { position: static; }
  .pos-close { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pos-tiles { grid-template-columns: repeat(2, 1fr); }
  .pos-tile { min-height: 100px; padding: 12px; }
  .pos-head { flex-direction: column; align-items: flex-start; }
}

/* POS 今日營業總表 */
.pos-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pos-revenue table th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; }
.pos-revenue tr.other-row th, .pos-revenue tr.other-row td { color: var(--ink-60); }
.pos-revenue tr.total-row th, .pos-revenue tr.total-row td {
  border-top: 2px solid var(--line-dk); font-weight: 700; background: var(--paper);
}
.pos-revenue .quiet { color: var(--ink-40); }
.pos-revenue .hint { margin-top: 8px; }
.pos-sub { margin: 18px 0 10px; font-size: 15px; }
@media (max-width: 600px) {
  .pos-kpis { grid-template-columns: 1fr; }
}