/* 春和茶水攤 營運後台 ─ 三欄式：左選單／中內容／右詳細資訊 */
:root {
  /* 中性色：暖白紙感 */
  --bg: #f3f1ea; --surface: #ffffff; --surface-2: #faf8f3; --ink: #1e2a25; --muted: #6b7570; --line: #e6e2d8;
  /* 主色：茶綠；輔色：奶茶琥珀、天藍、紫、玫瑰、薄荷 */
  --primary: #2f6b57; --primary-dark: #1d4a3d; --primary-soft: #e3f0ea;
  --amber: #c27a23; --amber-soft: #fbefdc;
  --sky: #2f7db5; --sky-soft: #e2eff9;
  --violet: #6b58c0; --violet-soft: #ece8fa;
  --rose: #c8486a; --rose-soft: #fbe5ec;
  --mint: #23957a; --mint-soft: #ddf3ec;
  --ok: #23875f; --ok-soft: #e1f3ea; --warn: #9a6200; --warn-soft: #fdf2d9; --danger: #b8334f; --danger-soft: #fbe4ea;
  --radius: 14px; --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(30, 42, 37, .05), 0 6px 20px rgba(30, 42, 37, .06);
  /* 左欄選單 */
  --side-bg: linear-gradient(175deg, #163a30 0%, #1f4c40 55%, #27594a 100%);
  --side-ink: #dcebe4; --side-strong: #ffffff; --side-muted: #8dbcaa; --side-icon: #9fd0bd;
  --side-hover: rgba(255,255,255,.08); --side-active: rgba(255,255,255,.14); --side-accent: #f0b75f; --side-accent-icon: #f6c97f;
  --side-line: rgba(255,255,255,.12); --avatar-bg: #cfe9de; --avatar-ink: #1d4a3d;
  /* 其他表面 */
  --row-hover: #fbf7ee; --track: #eeebe3; --glass: rgba(250,248,243,.92); --field: #ffffff; --chip-off: #ececec; --chip-off-ink: #666;
  --heading-font: inherit;
  /* 圖表配色（依序使用） */
  --chart-palette: #2f6b57,#c27a23,#2f7db5,#6b58c0,#c8486a,#23957a,#e0a458,#5b8fd1,#9a7fd9,#e27d97,#7fb89e,#8c6d3f;
  --side-w: 236px; --detail-w: 348px;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55; }
a { color: var(--primary); }
h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: .01em; font-family: var(--heading-font); }
h2 { font-size: 16px; margin: 0 0 12px; }
.muted { color: var(--muted); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── 三欄版面 ───────── */
/* 三欄各自獨立捲動：整頁不捲，左選單、中內容、右明細各捲各的，互不連動 */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--detail-w); height: 100vh; height: 100dvh; overflow: hidden; }
.main { padding: 26px 30px 56px; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; }

/* 左欄 */
.sidebar { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--side-ink);
  background: var(--side-bg); }
.brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 14px; }
.brand-logo { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: .05em; color: var(--side-strong); font-family: var(--heading-font); }
.brand-sub { font-size: 12px; color: var(--side-muted); }
.nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 12px; }
/* 每個分類一個有框線的區塊；分類標題加大、加粗、左邊色條，一眼分得出段落 */
.sidebar { border-right: 1px solid var(--side-line); box-shadow: inset -1px 0 0 rgba(255,255,255,.04); }
.nav-section { margin: 10px 0 0; padding: 4px 6px 6px; border: 1px solid var(--side-line); border-radius: 12px;
  background: rgba(255,255,255,.035); }
.nav-group { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: var(--side-strong); padding: 9px 8px 7px; margin-bottom: 4px; border-bottom: 1px dashed var(--side-line); }
.nav-group::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--side-accent); flex: none; }
.nav a { display: flex; align-items: center; gap: 10px; color: var(--side-ink); text-decoration: none; padding: 8px 10px; border-radius: 10px;
  font-size: 14px; position: relative; transition: background .15s, color .15s; }
.nav a .icon { color: var(--side-icon); }
.nav a:hover { background: var(--side-hover); color: var(--side-strong); }
.nav a.active { background: var(--side-active); color: var(--side-strong); font-weight: 600; }
.nav a.active::before { content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--side-accent); }
.nav a.active .icon { color: var(--side-accent-icon); }
.install-app { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px dashed var(--side-line); background: transparent; color: var(--side-ink); font: inherit; font-size: 13px; cursor: pointer; }
.install-app:hover { background: var(--side-hover); }
.install-app[hidden] { display: none; }
.me { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--side-line); font-size: 13px; }
.me-text { flex: 1; min-width: 0; line-height: 1.35; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--avatar-ink); background: var(--avatar-bg); flex: none; }
.role { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 99px; margin-top: 2px; }
.role-owner { background: #f6d9a8; color: #6b4210; } .role-sysadmin { background: #d9d2fb; color: #3c2d86; }
.role-manager { background: #cde6f7; color: #1d5482; } .role-staff { background: #e5e5e5; color: #444; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.icon-btn:hover { background: rgba(127,127,127,.15); }
.menu-toggle { display: none; margin-left: auto; color: var(--side-strong); }

/* 右欄 */
.detail { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-2); border-left: 1px solid var(--line); }
.detail-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  background: var(--glass); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.detail-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--primary-dark); }
.detail-close { color: var(--muted); }
.detail-body { padding: 16px 18px 40px; }
.detail-loading { color: var(--muted); padding: 30px 0; text-align: center; }
.detail-scrim { display: none; }

/* ───────── 中欄元件 ───────── */
.topbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px; min-width: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* 外送：自送／Uber Eats／foodpanda */
.grid > .card { margin-bottom: 0; }

/* KPI 卡：色調 tone-* */
.kpi { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; }
.kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.kpi-icon .icon { width: 22px; height: 22px; }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi { container-type: inline-size; }
.kpi > div:last-child { min-width: 0; }
/* 數字依卡片寬度縮放，三欄式右欄打開時「$163,405」也不會被切掉 */
.kpi .value { font-size: clamp(18px, 14cqi, 27px); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.kpi .sub { font-size: 12px; color: var(--muted); }
.kpi > * { position: relative; z-index: 1; }
.kpi::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 86px; height: 86px; border-radius: 50%; opacity: .45; z-index: 0; }
.tone-green .kpi-icon, .tone-green::after { background: var(--primary-soft); color: var(--primary); }
.tone-amber .kpi-icon, .tone-amber::after { background: var(--amber-soft); color: var(--amber); }
.tone-sky .kpi-icon, .tone-sky::after { background: var(--sky-soft); color: var(--sky); }
.tone-violet .kpi-icon, .tone-violet::after { background: var(--violet-soft); color: var(--violet); }
.tone-rose .kpi-icon, .tone-rose::after { background: var(--rose-soft); color: var(--rose); }
.tone-mint .kpi-icon, .tone-mint::after { background: var(--mint-soft); color: var(--mint); }
/* 舊版 KPI（沒有圖示）也有色條 */
.grid-4 > .kpi:not([class*="tone-"]) { border-top: 3px solid var(--primary); }
.grid-4 > .kpi:not([class*="tone-"]):nth-child(2) { border-top-color: var(--amber); }
.grid-4 > .kpi:not([class*="tone-"]):nth-child(3) { border-top-color: var(--sky); }
.grid-4 > .kpi:not([class*="tone-"]):nth-child(4) { border-top-color: var(--violet); }

.live-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
.live-bar .icon { width: 15px; height: 15px; }
.live-bar.off { color: var(--warn); }
.live-bar a { color: inherit; font-weight: 600; }
/* 手機：即時列縮成一行（只留綠點與台灣時間），不要折成三行 */
@media (max-width: 600px) {
  .live-bar { white-space: nowrap; overflow: hidden; }
  .live-bar.on .live-label, .live-bar.on .live-extra { display: none; }
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e6f; box-shadow: 0 0 0 0 rgba(47,158,111,.5); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 6px rgba(47,158,111,0); } 100% { box-shadow: 0 0 0 0 rgba(47,158,111,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.chart { width: 100%; height: 320px; }
.chart.chart-sm { height: 230px; }
.chart-pair { display: grid; gap: 6px; }
.chart-pair h3 { margin: 4px 0 0; font-size: 14px; color: var(--muted); font-weight: 600; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.chart-head h2 { margin: 0; white-space: nowrap; }  /* 標題不折行；按鈕放不下就換到下一行 */
.crumb { font-size: 13px; color: var(--muted); min-height: 20px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.seg button, .seg a { border: 0; background: transparent; padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--ink); text-decoration: none; font-family: inherit; white-space: nowrap; }
.seg .on { background: var(--primary); color: #fff; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: var(--surface-2); letter-spacing: .02em; }
tbody tr:hover td { background: var(--row-hover); }
tr[data-detail] { cursor: pointer; }
tr[data-detail]:hover td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
tr.selected td { background: var(--amber-soft) !important; }
tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
tr.total td { font-weight: 700; border-top: 2px solid var(--ink); }
tr.sub td { font-weight: 600; background: var(--surface-2); }
td.indent { padding-left: 28px; }
.table-wrap { overflow-x: auto; }
.click-hint { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.click-hint .icon { width: 14px; height: 14px; }

.btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--line); background: var(--field); color: var(--ink); padding: 8px 14px; border-radius: 10px;
  font-size: 14px; cursor: pointer; text-decoration: none; font-family: inherit; transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--primary); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: var(--danger); border-color: #efc3cd; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-link { background: none; border: 0; color: var(--primary); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }

form.inline { display: inline; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
label { font-size: 13px; color: var(--muted); display: block; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=time], input[type=datetime-local], select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); min-width: 0; }
input:focus, select:focus { outline: 3px solid var(--primary-soft); border-color: var(--primary); }
.field { display: flex; flex-direction: column; gap: 4px; }
details summary { cursor: pointer; padding: 6px 0; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--mint-soft); color: var(--mint); white-space: nowrap; }
.badge.off { background: var(--chip-off); color: var(--chip-off-ink); }
.badge.draft { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--sky-soft); color: var(--sky); }
.badge.violet { background: var(--violet-soft); color: var(--violet); }
.alert { padding: 11px 14px; border-radius: 11px; margin-bottom: 14px; font-size: 14px; border: 1px solid transparent; }
.alert.success { background: var(--ok-soft); color: var(--ok); border-color: #c4e6d4; }
.alert.error { background: var(--danger-soft); color: var(--danger); border-color: #f2c7d2; }
.alert.warn { background: var(--warn-soft); color: var(--warn); border-color: #f2dfae; }
.diff-new td { background: #eef8f2; } .diff-up td { background: #fff6e5; } .diff-err td { background: var(--danger-soft); }

/* ───────── 右欄內容（詳細資訊） ───────── */
.dp-hero { padding: 4px 0 14px; }
.dp-hero h3 { font-size: 20px; margin: 0 0 4px; }
.dp-hero .muted { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.dp-stat { border-radius: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); }
.dp-stat .k { font-size: 12px; color: var(--muted); }
.dp-stat .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dp-stat.tone-green { background: var(--primary-soft); border-color: transparent; } .dp-stat.tone-green .v { color: var(--primary-dark); }
.dp-stat.tone-amber { background: var(--amber-soft); border-color: transparent; } .dp-stat.tone-amber .v { color: #8a5413; }
.dp-stat.tone-sky { background: var(--sky-soft); border-color: transparent; } .dp-stat.tone-sky .v { color: #1d5482; }
.dp-stat.tone-violet { background: var(--violet-soft); border-color: transparent; } .dp-stat.tone-violet .v { color: #45369a; }
.dp-stat.tone-rose { background: var(--rose-soft); border-color: transparent; } .dp-stat.tone-rose .v { color: #9b2a48; }
.dp-section { margin: 18px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .08em; display: flex; justify-content: space-between; align-items: center; }
.dp-list { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dp-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.dp-row:last-child { border-bottom: 0; }
.dp-row .muted { font-size: 12px; }
.dp-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; font-size: 14px; }
.dp-alert .icon { margin-top: 2px; }
.dp-alert.warn { background: var(--warn-soft); color: var(--warn); }
.dp-alert.danger { background: var(--danger-soft); color: var(--danger); }
.dp-alert.ok { background: var(--ok-soft); color: var(--ok); }
.dp-alert a { color: inherit; font-weight: 600; }
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar { display: grid; grid-template-columns: 70px 1fr 54px; gap: 8px; align-items: center; font-size: 13px; }
.bar-track { height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: var(--primary); }
.bar:nth-child(5n+2) .bar-fill { background: var(--amber); } .bar:nth-child(5n+3) .bar-fill { background: var(--sky); }
.bar:nth-child(5n+4) .bar-fill { background: var(--violet); } .bar:nth-child(5n+5) .bar-fill { background: var(--rose); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 70px; padding: 6px 2px 0; }
.spark span { flex: 1; background: linear-gradient(180deg, var(--sky), #7fb3da); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.spark span.today { background: linear-gradient(180deg, var(--amber), #e2ab64); }
.spark-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
/* 窄卡片裡的表格（例：儀表板〈分類獲利〉）：名稱不斷行、間距縮小，太窄時表格左右捲動 */
table.compact th, table.compact td { padding: 8px 7px; white-space: nowrap; }
table.compact th { font-size: 12px; }
table.compact td.name { font-weight: 600; }
table.compact .sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.2; }
/* 分段長條＋清單（圖表樣式②） */
.is-segment .chart { display: none; }
.seg-figure { display: grid; gap: 14px; padding: 10px 0 4px; }
.seg-bar { display: flex; gap: 2px; height: 28px; }
.seg-blk { min-width: 0; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; line-height: 28px; padding-left: 8px;
  white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.seg-list { display: grid; gap: 2px; }
.seg-row { display: grid; grid-template-columns: 12px 1fr auto 56px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; text-align: left; }
button.seg-row { cursor: pointer; } button.seg-row:hover { background: var(--row-hover); }
.seg-row i { width: 12px; height: 12px; border-radius: 3px; }
.seg-row .v { font-variant-numeric: tabular-nums; color: var(--muted); }
.seg-row .p { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
/* 今日速覽：每小時杯數（每個小時都有刻度；滑鼠移到哪個時段就顯示那個時段的杯數） */
.hour-chart { display: flex; gap: 3px; height: 104px; padding-top: 26px; }
.hc-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; position: relative; cursor: default; outline: none; }
.hc-bar { display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--sky), color-mix(in srgb, var(--sky) 55%, white)); }
.hc-label { display: block; text-align: center; font-size: 10.5px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hc-col:hover .hc-bar, .hc-col:focus .hc-bar { background: var(--primary); }
.hc-col:hover .hc-label, .hc-col:focus .hc-label { color: var(--ink); font-weight: 700; }
.hc-col::after { content: attr(data-tip); position: absolute; top: -26px; left: 0; white-space: nowrap; z-index: 3; pointer-events: none;
  font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); padding: 2px 8px; border-radius: 6px; opacity: 0; transition: opacity .12s; }
.hc-col.r::after { left: auto; right: 0; }
.hc-col:hover::after, .hc-col:focus::after { opacity: 1; }

/* 三欄捲軸：平常隱藏，滑鼠移到該欄才淡淡出現 */
.nav, .main, .detail { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.nav:hover, .main:hover, .detail:hover { scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
.nav { scrollbar-color: transparent transparent; }
.nav:hover { scrollbar-color: rgba(255,255,255,.28) transparent; }
.nav::-webkit-scrollbar, .main::-webkit-scrollbar, .detail::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-track, .main::-webkit-scrollbar-track, .detail::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb, .detail::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.main:hover::-webkit-scrollbar-thumb, .detail:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
.nav::-webkit-scrollbar-button, .main::-webkit-scrollbar-button, .detail::-webkit-scrollbar-button { display: none; }
.formula { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
.formula .dp-row { padding: 7px 0; }
.formula .dp-row.result { font-weight: 700; border-top: 2px solid var(--ink); }
pre.json { white-space: pre-wrap; word-break: break-all; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; }
.dp-empty { text-align: center; color: var(--muted); padding: 30px 10px; }

/* ───────── 登入 ───────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 15% 15%, #f6dcb0 0, transparent 38%), radial-gradient(circle at 85% 80%, #bfe3d4 0, transparent 42%), var(--bg); }
.login-card { width: 100%; max-width: 370px; background: #fff; border-radius: 18px; box-shadow: 0 10px 40px rgba(30,42,37,.12); padding: 34px 30px; border: 1px solid var(--line); }
.login-card .brand-logo { display: block; margin: 0 auto 10px; width: 76px; height: 76px; filter: drop-shadow(0 6px 12px rgba(29,74,61,.18)); }
.login-card h1 { text-align: center; color: var(--primary-dark); }
.login-card p.sub { text-align: center; color: var(--muted); margin: 0 0 22px; font-size: 13px; }
.login-card .field { margin-bottom: 14px; }
.login-card input { width: 100%; padding: 11px 12px; }
.login-card .btn { width: 100%; justify-content: center; padding: 11px; font-size: 16px; }

/* ───────── 響應式 ───────── */
@media (max-width: 1280px) {
  /* 右欄改為從右側滑出的抽屜 */
  .app { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .detail { position: fixed; right: 0; top: 0; bottom: 0; width: min(var(--detail-w), 92vw); z-index: 30; transform: translateX(105%);
    transition: transform .22s ease; box-shadow: -10px 0 30px rgba(0,0,0,.12); }
  .app.detail-open .detail { transform: none; }
  .app.detail-open .detail-scrim { display: block; position: fixed; inset: 0; background: rgba(20,30,26,.3); z-index: 25; }
}
@media (max-width: 900px) {
  /* 手機：改回整頁捲動 */
  .app { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .main { height: auto; overflow: visible; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .brand { padding: 12px 16px; }
  .sidebar .nav, .sidebar .me { display: none; }
  .sidebar.open .nav, .sidebar.open .me { display: flex; }
  .sidebar.open .nav { display: block; }
  .menu-toggle { display: inline-grid; }
  .main { padding: 16px; }
  .kpi { flex-direction: column; gap: 8px; }
  .kpi .value { font-size: 22px; }
  .detail { width: 100vw; }
}

@media print {
  .app { height: auto; overflow: visible; display: block; }
  .main { height: auto; overflow: visible; }
  .sidebar, .detail, .detail-scrim, .no-print, .topbar form { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  .card { box-shadow: none; border: 0; }
  body { background: #fff; }
}


/* ═════════ 主題（系統設定 → 外觀主題）═════════
   dawn 晨曦金茶園（見最上方 :root）／matcha 抹茶清新／night 夜茶墨金／retro 台式茶行復古／milktea 奶茶粉彩／
   jade 抹茶白玉（目前預設，和 POS 同一套配色） */

/* ② 抹茶清新：大量留白、淺色選單、抹茶綠點綴 */
[data-ui-theme="matcha"] {
  --bg: #f6f8f4; --surface: #ffffff; --surface-2: #fbfcf9; --ink: #2b2f2a; --muted: #6f776d; --line: #e3e9dc;
  --primary: #5f8f34; --primary-dark: #3e6b2a; --primary-soft: #eaf2e0;
  --amber: #c08a2b; --amber-soft: #f8f0dc; --sky: #4a8bb8; --sky-soft: #e5f0f7; --violet: #7c6cc4; --violet-soft: #efedf9;
  --rose: #cc5c78; --rose-soft: #fbe9ee; --mint: #3f9c7f; --mint-soft: #e2f3ec;
  --side-bg: #eef3e8; --side-ink: #3a4436; --side-strong: #24301f; --side-muted: #7f8c78; --side-icon: #6a9a3b;
  --side-hover: rgba(95,143,52,.10); --side-active: #ffffff; --side-accent: #6a9a3b; --side-accent-icon: #5f8f34;
  --side-line: #dde6d4; --avatar-bg: #dbe9cc; --avatar-ink: #3e6b2a;
  --row-hover: #f4f8ef; --track: #edf1e8; --glass: rgba(251,252,249,.92);
  --shadow: 0 1px 2px rgba(43,47,42,.04), 0 4px 14px rgba(43,47,42,.04);
  --chart-palette: #6a9a3b,#c08a2b,#4a8bb8,#7c6cc4,#cc5c78,#3f9c7f,#a8c97f,#e0b45c,#8fb8d6,#b3a8e0,#e69aae,#7fbfa8;
}
[data-ui-theme="matcha"] .nav a.active { box-shadow: 0 1px 3px rgba(43,47,42,.08); }
[data-ui-theme="matcha"] .card { box-shadow: none; }

/* ③ 夜茶墨金：深色模式，晚班不刺眼 */
[data-ui-theme="night"] {
  color-scheme: dark;
  --bg: #101915; --surface: #18241f; --surface-2: #142019; --ink: #e8eee9; --muted: #93a39b; --line: #2a3a33;
  --primary: #4fb38a; --primary-dark: #8fd6b6; --primary-soft: #1d3a2f;
  --amber: #d9a441; --amber-soft: #3a2f1a; --sky: #6fb2e3; --sky-soft: #1b2e3c; --violet: #a796f0; --violet-soft: #2a2540;
  --rose: #e06b86; --rose-soft: #3d2029; --mint: #5cc7a4; --mint-soft: #193a30;
  --ok: #5cc79a; --ok-soft: #173327; --warn: #e3b45a; --warn-soft: #3a2f17; --danger: #ef7d95; --danger-soft: #3d1f27;
  --side-bg: linear-gradient(175deg, #0b120f 0%, #111c17 100%); --side-ink: #c9d6cf; --side-strong: #f4efe2; --side-muted: #7d8f86;
  --side-icon: #8aa99b; --side-hover: rgba(217,164,65,.08); --side-active: rgba(217,164,65,.14); --side-accent: #d9a441; --side-accent-icon: #e8bb63;
  --side-line: #1f2c26; --avatar-bg: #2a3a33; --avatar-ink: #e8bb63;
  --row-hover: #1d2b25; --track: #24332c; --glass: rgba(20,32,25,.92); --field: #142019; --chip-off: #2a3a33; --chip-off-ink: #b8c4bd;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --chart-palette: #4fb38a,#d9a441,#6fb2e3,#a796f0,#e06b86,#5cc7a4,#e8c27a,#9cc8ec,#c3b8f5,#f0a0b2,#8fd6b6,#b9915a;
}
[data-ui-theme="night"] .kpi .value, [data-ui-theme="night"] .dp-stat .v { color: #f1d391; }

/* ④ 台式茶行復古：米紙底、紅磚、靛藍選單、標題用明體 */
[data-ui-theme="retro"] {
  --bg: #f4ebdd; --surface: #fffaf1; --surface-2: #fbf3e6; --ink: #2e2420; --muted: #7a6a5f; --line: #e6d8c3;
  --primary: #b3402e; --primary-dark: #7f2a1e; --primary-soft: #f7e1da;
  --amber: #c98b1f; --amber-soft: #f8ebcf; --sky: #24406b; --sky-soft: #e1e7f1; --violet: #6b4f8c; --violet-soft: #ece4f3;
  --rose: #b3402e; --rose-soft: #f7e1da; --mint: #3f7f6a; --mint-soft: #e0efe9;
  --side-bg: linear-gradient(175deg, #1a2d4b 0%, #1f3557 60%, #26406a 100%); --side-ink: #dfe4ee; --side-strong: #fff8ea;
  --side-muted: #9fb0cc; --side-icon: #c3cee2; --side-accent: #d49a2a; --side-accent-icon: #e8b450;
  --side-line: rgba(255,248,234,.14); --avatar-bg: #f4e3c3; --avatar-ink: #7f2a1e;
  --row-hover: #f8eedd; --track: #eadfcd; --glass: rgba(251,243,230,.94); --field: #fffaf1;
  --heading-font: "Noto Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;
  --radius: 10px; --radius-sm: 6px;
  --chart-palette: #b3402e,#24406b,#d49a2a,#3f7f6a,#6b4f8c,#8a5a3c,#d9735f,#5a77a6,#e6be6a,#74a896,#9a80b8,#b58a6a;
}
[data-ui-theme="retro"] h2 { font-family: var(--heading-font); }
[data-ui-theme="retro"] .card { border-top: 3px solid var(--primary); }

/* ⑤ 奶茶粉彩：奶茶米底、焦糖選單、粉彩底色；文字一律加深，對比 ≥ 4.5:1 */
[data-ui-theme="milktea"] {
  --bg: #f8f1ea; --surface: #ffffff; --surface-2: #fdf8f3; --ink: #2a1d16; --muted: #65503f; --line: #eaddd0;
  --primary: #94592a; --primary-dark: #6b4428; --primary-soft: #f6e8da;
  --amber: #8f6236; --amber-soft: #f7ece1; --sky: #2b6f9e; --sky-soft: #e4f1fa; --violet: #6a50a8; --violet-soft: #f0ebfa;
  --rose: #b0465f; --rose-soft: #fbe8ed; --mint: #287a5d; --mint-soft: #e5f5ee;
  --ok: #287a5d; --ok-soft: #e5f5ee; --warn: #8a5600; --warn-soft: #fbefd8; --danger: #a8364f; --danger-soft: #fbe6ec;
  --side-bg: linear-gradient(175deg, #5e3a21 0%, #6b4428 60%, #774b2b 100%); --side-ink: #fbf1e7; --side-strong: #ffffff;
  --side-muted: #e9d3be; --side-icon: #f6cfd7; --side-hover: rgba(255,255,255,.10); --side-active: rgba(255,255,255,.18);
  --side-accent: #f6cfd7; --side-accent-icon: #ffd9e0; --avatar-bg: #f6cfd7; --avatar-ink: #5e3a21;
  --row-hover: #fcf4ec; --track: #f0e4d8; --glass: rgba(253,248,243,.95);
  --radius: 20px; --radius-sm: 14px;
  --chart-palette: #a0652f,#3f86b8,#c85d78,#7e66b8,#3e9a78,#b8862f,#d08a9c,#7aaed4,#a493d6,#78bfa0,#d9a46c,#8c5a3a;
}
[data-ui-theme="milktea"] .muted, [data-ui-theme="milktea"] .kpi .label, [data-ui-theme="milktea"] .live-bar { font-weight: 500; }
[data-ui-theme="milktea"] .nav a { font-weight: 500; }
[data-ui-theme="milktea"] th { color: var(--muted); }

/* ⑥ 抹茶白玉（目前預設）：和 POS 點餐畫面同一套配色。抹茶漸層選單、米白帶綠底、大圓角柔和陰影；文字對比 ≥ 4.5:1 */
[data-ui-theme="jade"] {
  --bg: #f2f5ec; --surface: #ffffff; --surface-2: #f8faf4; --ink: #1f2a20; --muted: #5c6b58; --line: #e2e9d9;
  --primary: #3f6b42; --primary-dark: #2f4a34; --primary-soft: #eef3e6;
  --amber: #94653a; --amber-soft: #f6eee4; --sky: #2f7487; --sky-soft: #e3f1f4; --violet: #7a5ba6; --violet-soft: #f1ecf8;
  --rose: #b04f66; --rose-soft: #f9e8ec; --mint: #3f7a4f; --mint-soft: #e6f2e7;
  --ok: #3f7a4f; --ok-soft: #e6f2e7; --warn: #7a6810; --warn-soft: #f7f2d6; --danger: #a8364f; --danger-soft: #fbe6ec;
  /* 左選單：底色加深、字改純白加粗、分類標題用奶油金，讓選單字一眼看得清楚 */
  --side-bg: linear-gradient(175deg, #203a26 0%, #2b4a31 55%, #36583a 100%); --side-ink: #ffffff; --side-strong: #ffffff;
  --side-muted: #d6e6cc; --side-icon: #f6dc8c; --side-hover: rgba(255,255,255,.12); --side-active: rgba(255,255,255,.20);
  --side-accent: #f6c85f; --side-accent-icon: #f6dc8c; --side-line: rgba(255,255,255,.18);
  --avatar-bg: #f4e9c8; --avatar-ink: #2f4a34;
  --row-hover: #f4f8ee; --track: #e9efe1; --glass: rgba(248,250,244,.94);
  --radius: 22px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(47,74,52,.04), 0 10px 30px rgba(47,74,52,.08);
  --chart-palette: #4f7a4f,#94653a,#2f7487,#7a5ba6,#b04f66,#7a6810,#8db36f,#c79a6b,#6fa9b8,#a58bc9,#d88a9c,#b9a64a;
}
/* 漸層底：電腦固定在視窗；手機、平板（不支援 fixed 背景）改成跟著整頁延伸，捲到下面不會斷掉 */
@media screen { [data-ui-theme="jade"] body { background: linear-gradient(160deg, #f7f8f1 0%, #e9efe1 100%) fixed; } }
@media screen and (max-width: 900px) { [data-ui-theme="jade"] body { background: #f2f5ec; } }  /* 列印維持白底 */
[data-ui-theme="jade"] .nav a { font-weight: 600; font-size: 15px; letter-spacing: .02em; }
[data-ui-theme="jade"] .nav-group { color: #f6dc8c; font-size: 14px; }
[data-ui-theme="jade"] .nav-section { background: rgba(0,0,0,.12); }
[data-ui-theme="jade"] .nav a.active { background: #f6f1dc; color: #203a26; }
[data-ui-theme="jade"] .nav a.active .icon { color: #3f6b42; }
[data-ui-theme="jade"] .brand-sub { color: #d6e6cc; }
[data-ui-theme="jade"] th { color: var(--muted); }
[data-ui-theme="jade"] .login-wrap { background: radial-gradient(700px 500px at 15% 15%, #f4e9c8 0%, transparent 60%),
  radial-gradient(800px 600px at 85% 85%, #cfe0c3 0%, transparent 60%), linear-gradient(160deg, #f7f8f1, #e9efe1); }
[data-ui-theme="jade"] .login-card { border-radius: 28px; box-shadow: 0 10px 40px rgba(47,74,52,.14); }
[data-ui-theme="jade"] .login-card .btn { border-radius: 99px; }

/* ── 春和細緻（Emil Kowalski 設計 skill＋文字排版修整，老闆選定）：看不見的細節 — 1px 光環邊框＋多層柔和陰影、按下 scale(.97)、ease-out 動態、只動 transform/opacity */
[data-ui-theme="chunhe"]{--bg:#f6f7f4;--surface:#ffffff;--surface-2:#fafbf8;--ink:#18211c;--muted:#59645d;--line:#e6e9e3;
--primary:#3a7d55;--primary-dark:#24553a;--primary-soft:#e8f3ec;--amber:#a46a10;--amber-soft:#fdf3e1;--sky:#2d6d91;--sky-soft:#e7f1f7;--violet:#5f529a;--violet-soft:#efecf8;
--rose:#b0405a;--rose-soft:#fbe9ee;--mint:#2f8158;--mint-soft:#e5f4ec;--ok:#2f8158;--ok-soft:#e5f4ec;--warn:#8d6100;--warn-soft:#fdf3e1;--danger:#b5304a;--danger-soft:#fbe8ec;
--side-bg:#fbfcfa;--side-ink:#3f4a43;--side-strong:#18211c;--side-muted:#7c8780;--side-icon:#7c8780;--side-hover:#f1f4ef;--side-active:#ffffff;--side-accent:#3a7d55;--side-accent-icon:#3a7d55;--side-line:#e6e9e3;
--avatar-bg:linear-gradient(135deg,#f6c97f,#3a7d55);--avatar-ink:#fff;--radius:14px;--radius-sm:10px;
--shadow:0 0 0 1px rgba(24,33,28,.06),0 1px 2px rgba(24,33,28,.04),0 4px 12px -2px rgba(24,33,28,.06);
--chart-palette:#3a7d55,#e0a23c,#2d6d91,#93c19f,#b0405a,#5f529a}
[data-ui-theme="chunhe"] body{background:#f6f7f4;-webkit-font-smoothing:antialiased}
[data-ui-theme="chunhe"] .card{border:0}
[data-ui-theme="chunhe"] h1{font-size:28px;font-weight:700;letter-spacing:-.015em}
[data-ui-theme="chunhe"] .nav-section{border:0;background:transparent}[data-ui-theme="chunhe"] .nav-group::before{display:none}
[data-ui-theme="chunhe"] .nav a.active{box-shadow:0 0 0 1px rgba(24,33,28,.08),0 1px 3px rgba(24,33,28,.08);font-weight:600}
[data-ui-theme="chunhe"] .nav a.active::before{display:none}
[data-ui-theme="chunhe"] .kpi::after{display:none}[data-ui-theme="chunhe"] .kpi-icon{border-radius:10px;box-shadow:inset 0 0 0 1px rgba(24,33,28,.06)}
[data-ui-theme="chunhe"] .btn,[data-ui-theme="chunhe"] .seg button,[data-ui-theme="chunhe"] .seg a{transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 160ms ease-out}
[data-ui-theme="chunhe"] .btn:active,[data-ui-theme="chunhe"] .seg button:active{transform:scale(.97)}
[data-ui-theme="chunhe"] .btn{border-color:transparent;box-shadow:0 0 0 1px rgba(24,33,28,.1),0 1px 2px rgba(24,33,28,.06)}
[data-ui-theme="chunhe"] .btn-primary{background:#3a7d55;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(24,33,28,.15)}
[data-ui-theme="chunhe"] .seg{border:0;box-shadow:0 0 0 1px rgba(24,33,28,.08);border-radius:10px;padding:2px;background:#f1f4ef}
[data-ui-theme="chunhe"] .seg .on{background:#fff;color:#18211c;border-radius:8px;box-shadow:0 1px 3px rgba(24,33,28,.12)}
[data-ui-theme="chunhe"] #cheer{background:linear-gradient(180deg,#fffaf0,#fff)!important;box-shadow:0 0 0 1px rgba(224,162,60,.25),0 4px 14px -4px rgba(224,162,60,.25)!important}
[data-ui-theme="chunhe"] .dp-stat{border:0;box-shadow:0 0 0 1px rgba(24,33,28,.06)}
[data-ui-theme="chunhe"] .hc-bar{background:#3a7d55}
[data-ui-theme="chunhe"] .confirm-dialog{border:0;box-shadow:0 0 0 1px rgba(24,33,28,.08),0 24px 48px -12px rgba(24,33,28,.25)}
@media (prefers-reduced-motion:reduce){[data-ui-theme="chunhe"] *{transition:none!important}}
/* ── 文字排版修整 ── */
[data-ui-theme="chunhe"] body{line-height:1.6;font-feature-settings:"tnum"}
[data-ui-theme="chunhe"] h1{font-size:30px;line-height:1.2;margin-bottom:6px}
[data-ui-theme="chunhe"] h2{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:.01em}
[data-ui-theme="chunhe"] .topbar .muted{font-size:13.5px}
/* 提醒列：一行、置左對齊 */
[data-ui-theme="chunhe"] .alert{font-size:14px;padding:10px 16px;line-height:1.5}
/* 鼓勵卡：標題、內文、今日一句三層 */
[data-ui-theme="chunhe"] #cheer > div > div:last-child > div:first-child{font-size:18px!important;font-weight:700!important;line-height:1.4;margin-bottom:6px!important}
[data-ui-theme="chunhe"] #cheer > div > div:last-child > div:not(:first-child):not(#daily-words){font-size:15px;line-height:1.75;font-weight:400!important}
[data-ui-theme="chunhe"] #cheer #daily-words{margin-top:12px!important;padding-top:10px;border-top:1px solid rgba(160,110,20,.18);font-size:14px!important;color:var(--muted)}
/* 數字卡：圖示和標籤同一行，數字獨佔一行、不擠、不斷行 */
[data-ui-theme="chunhe"] .grid-4 > .kpi{display:grid;grid-template-columns:32px 1fr;column-gap:10px;row-gap:2px;align-items:center;padding:18px 20px}
[data-ui-theme="chunhe"] .grid-4 > .kpi .kpi-icon{width:32px;height:32px;grid-row:1}
[data-ui-theme="chunhe"] .grid-4 > .kpi .kpi-icon .icon{width:18px;height:18px}
[data-ui-theme="chunhe"] .grid-4 > .kpi > div:last-child{display:contents}
[data-ui-theme="chunhe"] .grid-4 > .kpi .label{grid-column:2;grid-row:1;font-size:13.5px;font-weight:600;color:var(--muted)}
[data-ui-theme="chunhe"] .grid-4 > .kpi .value{grid-column:1/-1;font-size:30px;font-weight:750;letter-spacing:-.02em;margin-top:8px;line-height:1.15}
[data-ui-theme="chunhe"] .grid-4 > .kpi .sub{grid-column:1/-1;font-size:13px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 收入卡：算式一行、說明另起一行、結果獨立一行 */
[data-ui-theme="chunhe"] #profit{border-left:0!important}
[data-ui-theme="chunhe"] #profit > div:nth-of-type(2){gap:4px 18px!important;font-size:15px}
[data-ui-theme="chunhe"] #profit > div:nth-of-type(2) .muted{display:none}
[data-ui-theme="chunhe"] #profit > div:nth-of-type(2) > span:last-child{flex-basis:100%;margin-top:8px;font-size:15px;display:flex;align-items:baseline;gap:10px}
[data-ui-theme="chunhe"] #profit > div:nth-of-type(2) > span:last-child strong{font-size:32px!important;letter-spacing:-.02em}
[data-ui-theme="chunhe"] #profit .bar-track{margin:6px 0}
[data-ui-theme="chunhe"] #profit p.muted,[data-ui-theme="chunhe"] #profit div.muted{font-size:12.5px;line-height:1.6}
/* 右欄：區塊標題清楚、提醒文字行距 */
[data-ui-theme="chunhe"] .dp-section{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:18px;letter-spacing:.02em}
[data-ui-theme="chunhe"] .dp-alert{font-size:13.5px;line-height:1.55}
[data-ui-theme="chunhe"] .dp-row{font-size:13.5px;line-height:1.5}
[data-ui-theme="chunhe"] .dp-hero h3{font-size:22px;letter-spacing:.01em}
[data-ui-theme="chunhe"] .grid-4 > .kpi{align-content:start}
[data-ui-theme="chunhe"] .grid-4 > .kpi .sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
[data-ui-theme="chunhe"] #profit > div:nth-of-type(2) > span:last-child{margin-top:2px}
[data-ui-theme="chunhe"] .dp-row{align-items:center;gap:10px}
[data-ui-theme="chunhe"] .dp-row .badge{white-space:nowrap;flex:none;align-self:center}

/* ═════════ 手機、平板 ═════════ */
/* 觸控螢幕：按鈕、切換鈕至少 40px 高，手指好點 */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.btn-sm { min-height: 38px; padding: 6px 12px; }
  .seg a, .seg button { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 14px; font-size: 14px; }
  input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=time],
  input[type=datetime-local], select, textarea { min-height: 44px; font-size: 16px; }  /* 16px：iPhone 點輸入框不會自動放大 */
}
.field { min-width: 0; max-width: 100%; }
.field select, .field input { max-width: 100%; }
/* 手機：表格一列變一張卡片（responsive.js 幫每格加上欄位名稱） */
@media (max-width: 700px) {
  .table-wrap:has(table.stack) { overflow: visible; }
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 10px; }
  table.stack tr:hover td { background: transparent; }
  table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0;
    text-align: right; white-space: normal; min-height: 0; }
  table.stack td + td { border-top: 1px dashed var(--line); }
  table.stack td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; color: var(--muted); font-size: 12.5px; font-weight: 600; }
  table.stack td:not([data-label])::before, table.stack td[data-label=""]::before { content: none; }
  table.stack tr { display: flex; flex-direction: column; }
  table.stack td:first-child { font-size: 16px; font-weight: 700; }
  /* 有指定 card-title 的格子（品名）排到卡片最上面當標題 */
  table.stack td.card-title { order: -1; font-size: 17px; font-weight: 700; justify-content: flex-start; text-align: left; }
  table.stack td.card-title::before { content: none; }
  table.stack td.card-title { border-top: 0; padding-top: 0; }
  table.stack tr:has(td.card-title) td:first-child { border-top: 1px dashed var(--line); }
  table.stack td.card-title + td, table.stack tr:has(td.card-title) td:first-child { font-size: 14px; font-weight: 400; }
  table.stack td:not([data-label]), table.stack td[data-label=""] { justify-content: flex-end; }
  table.stack td.num { text-align: right; }
  table.stack td.stack-full { justify-content: center; }
  table.stack td > form, table.stack td .form-row { justify-content: flex-end; }
  table.stack tr.total { background: var(--primary-soft); }
  /* 頂列：標題下面放篩選與按鈕，按鈕可換行 */
  .topbar { flex-wrap: wrap; }
  .topbar .form-row, .topbar > form { flex-wrap: wrap; }
  h1 { font-size: 21px; }
  .card { padding: 16px; }
}
/* 平板直放：選單收起時內容滿版，卡片兩欄 */
@media (min-width: 701px) and (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ───────── 原料卡片牆（庫存管理、原料與進貨）：上方圖表、中間卡片、點卡片從底部滑出操作面板 ───────── */
.iw-todo { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.iw-todo a, .iw-todo span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); }
.iw-todo .danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.iw-todo .warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.iw-todo .ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.iw-chart { width: 100%; min-height: 200px; }
.iw-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.iw-filter button { min-height: 40px; padding: 6px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.iw-filter button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.iw-group { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .1em; margin: 14px 2px 8px; }
.iw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.iw-card { position: relative; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-left: 6px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  color: var(--ink); font: inherit; touch-action: manipulation; transition: transform .1s, box-shadow .15s; }
.iw-card:hover { box-shadow: var(--shadow); }
.iw-card:active { transform: scale(.98); }
.iw-card[hidden] { display: none; }
.iw-card.s-danger { border-left-color: var(--danger); }
.iw-card.s-warn { border-left-color: var(--warn); }
.iw-card.s-ok { border-left-color: var(--ok); }
.iw-card.s-off { border-left-color: var(--chip-off); }
.iw-name { font-size: 17px; font-weight: 700; line-height: 1.3; display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.iw-big { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.iw-big small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.iw-meter { height: 6px; background: var(--track); border-radius: 99px; overflow: hidden; }
.iw-meter i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.s-danger .iw-meter i { background: var(--danger); } .s-warn .iw-meter i { background: var(--warn); } .s-off .iw-meter i { background: var(--chip-off-ink); }
.iw-sub { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.iw-sub b { color: var(--ink); }
.iw-note { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iw-more { font-size: 12.5px; color: var(--primary); font-weight: 600; cursor: pointer; align-self: flex-start; }
/* 底部滑出面板（<dialog>）：手機、平板都用手指點；寬螢幕置中 */
dialog.sheet { border: 0; padding: 0; margin: auto auto 0; width: min(560px, 100%); max-width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0;
  background: var(--surface); color: var(--ink); box-shadow: 0 -10px 40px rgba(0,0,0,.18); }
dialog.sheet::backdrop { background: rgba(20, 30, 26, .45); }
dialog.sheet[open] { animation: sheet-up .18s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 701px) { dialog.sheet { margin: auto; border-radius: 22px; } }
.sheet-in { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 92dvh; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sheet-head h2 { margin: 0; font-size: 20px; }
.sheet-close { border: 0; background: var(--surface-2); width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--ink); flex: none; }
.sheet-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.sheet-tabs button { min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; }
.sheet-tabs button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.sheet-pane[hidden] { display: none; }
.sheet-pane { display: flex; flex-direction: column; gap: 12px; }
.sheet-pane .field { display: flex; flex-direction: column; gap: 4px; }
.sheet-pane .field input[type=text], .sheet-pane .field select { min-height: 46px; font-size: 16px; }
.sheet .wide { width: 100%; min-height: 52px; font-size: 17px; border-radius: 14px; justify-content: center; }
/* 大顆 ＋／－：−1、−0.5、數字、＋0.5、＋1 */
.stp { display: grid; grid-template-columns: 52px 52px 1fr 52px 52px; gap: 6px; align-items: center; }
.stp.two { grid-template-columns: 56px 1fr 56px; }
.stp button { height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font-size: 18px; font-weight: 700; color: var(--ink);
  cursor: pointer; touch-action: manipulation; padding: 0; }
.stp button:active { transform: scale(.95); background: var(--primary-soft); }
.stp .stp-val { position: relative; }
.stp .stp-val input { width: 100%; height: 52px; text-align: center; font-size: 24px; font-weight: 800; border-radius: 14px; padding: 0 40px 0 10px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield; }
.stp .stp-val input::-webkit-outer-spin-button, .stp .stp-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stp .stp-val span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1px dashed var(--line); background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; touch-action: manipulation; }
.chips button.on, .chips button:active { background: var(--primary-soft); border-color: var(--primary); border-style: solid; }
.sheet-note { font-size: 13px; color: var(--muted); margin: 0; }
/* 進貨購物車：點原料加入，一列一項 */
.cart-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.cart-pick button { min-height: 42px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 14.5px; font-weight: 600;
  color: var(--ink); cursor: pointer; touch-action: manipulation; }
.cart-pick button.in { background: var(--primary-soft); border-color: var(--primary); }
.cart-pick button .q { color: var(--primary); margin-left: 4px; }
.cart-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.cart-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(220px, 1.4fr) 130px 44px; gap: 8px; align-items: center; padding: 10px 12px;
  border: 1.5px solid var(--primary); border-radius: var(--radius-sm); background: var(--primary-soft); }
.cart-row .nm { font-weight: 700; } .cart-row .nm small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.cart-row input[name=amount] { min-height: 46px; font-size: 16px; text-align: right; width: 100%; }
.cart-row .rm { height: 44px; border: 0; border-radius: 12px; background: transparent; font-size: 20px; color: var(--danger); cursor: pointer; }
.cart-empty { padding: 18px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); border-radius: var(--radius-sm); }
.cart-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cart-total { font-weight: 700; font-size: 16px; }
@media (max-width: 700px) {
  .iw-grid { grid-template-columns: 1fr 1fr; }
  .iw-big { font-size: 21px; }
  .cart-row { grid-template-columns: 1fr 44px; }
  .cart-row .stp, .cart-row input[name=amount] { grid-column: 1 / -1; }
  .cart-row .rm { grid-row: 1; grid-column: 2; }
  .stp { grid-template-columns: 46px 46px 1fr 46px 46px; }
}

/* 變更確認視窗（confirm.js）：每次儲存前列出「原本 → 改成」 */
.confirm-dialog { border: 1px solid var(--line); border-radius: var(--radius, 14px); padding: 0; width: min(560px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.confirm-dialog::backdrop { background: rgba(20, 30, 25, .45); }
.confirm-dialog form { padding: 20px 22px; }
.confirm-dialog h2 { margin: 0 0 12px; }
.confirm-dialog .confirm-body { max-height: 55vh; overflow-y: auto; }
.confirm-dialog .confirm-body table { width: 100%; }
.confirm-dialog .confirm-note { background: var(--surface-2); border-left: 4px solid var(--danger, #a8364f); padding: 8px 12px; border-radius: 8px; }
.confirm-dialog .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.hour-chart { gap: 2px; }
.hc-col.off .hc-bar { opacity: .4; }  /* 00–24 時都記錄：非營業時段淡一點 */
.hour-off td { color: var(--muted); }
/* 購買時段熱度表（飲料銷售排名）：00–24 時，顏色越深賣越多 */
table.heat th, table.heat td { padding: 6px 5px; font-size: 12.5px; }
table.heat th.on { color: var(--ink); font-weight: 800; }
table.heat thead th:not(.on) { color: var(--muted); font-weight: 400; }
table.heat td.name { white-space: nowrap; }
table.heat td.lv1 { background: color-mix(in srgb, var(--primary) 14%, transparent); }
table.heat td.lv2 { background: color-mix(in srgb, var(--primary) 30%, transparent); }
table.heat td.lv3 { background: color-mix(in srgb, var(--primary) 50%, transparent); color: #fff; }
table.heat td.lv4 { background: color-mix(in srgb, var(--primary) 75%, transparent); color: #fff; font-weight: 700; }
/* 選單數字（例：外送進行中幾單） */
.nav a .nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--amber, #8f6236); color: #fff;
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.delivery-tile table { margin: 8px 0; }
/* 今日速覽：今日一句（鼓勵老闆） */
.dp-word { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 14px; line-height: 1.6; font-size: 14px;
  background: linear-gradient(135deg, var(--amber-soft, #f7ece1), var(--rose-soft, #fbe8ed)); color: var(--ink); }
.dp-word b { display: block; color: var(--amber, #8f6236); }
/* 確認視窗：每一項「原本（刪除線）→ 改成」 */
.confirm-dialog .chg-row { display: grid; grid-template-columns: 1.3fr 1fr 22px 1fr; gap: 8px; align-items: center; padding: 10px 12px;
  border-radius: 12px; background: var(--surface-2); margin-top: 8px; font-size: 14px; }
.confirm-dialog .chg-old { color: var(--muted); text-decoration: line-through; overflow-wrap: anywhere; }
.confirm-dialog .chg-new { color: var(--primary); font-weight: 800; overflow-wrap: anywhere; }
.confirm-dialog .chg-arrow { color: var(--muted); text-align: center; }
/* 改過還沒儲存的欄位 */
.field-changed { outline: 2px solid var(--primary) !important; outline-offset: 1px; border-radius: 8px; }
/* 今日速覽：每小時杯數，每個小時一欄、可左右拉動，開啟時定格在「現在」 */
.hour-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; cursor: grab; padding: 4px 0 6px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.hour-scroll.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hour-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hour-chart2 { display: flex; gap: 6px; height: 132px; width: max-content; padding: 0 2px; }
.hc2 { width: 30px; flex: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; scroll-snap-align: center; }
.hc2-v { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 16px; min-height: 16px; font-variant-numeric: tabular-nums; }
.hc2-bar { width: 22px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--primary); }
.hc2.off .hc2-bar { opacity: .35; }
.hc2-l { font-size: 11px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 3px; }
.hc2.now { width: 36px; }
.hc2-now { font-size: 11px; font-weight: 700; color: var(--amber); white-space: nowrap; line-height: 16px; }
.hc2.now .hc2-bar { background: var(--amber); min-height: 6px; }
.hc2.now .hc2-l { color: #fff; background: var(--amber); border-radius: 6px; padding: 0 6px; font-weight: 700; white-space: nowrap; }

.sheet-close { display: grid; place-items: center; }
.sheet-tabs button .icon, .inv-status .icon { margin-right: 4px; }