/* ==========================================================================
   QDing SaaS UI layer（2026-09-26）
   只作用在 <body data-ui="saas"> 的頁面；載入順序須在各站既有主題之後。
   設計原則：中性色為主、單一主色（近黑）、細邊框取代陰影、6–12px 圓角、
   Inter + Noto Sans TC、資訊密度優先（清單列而非大卡片）、狀態色低飽和。
   ========================================================================== */
:root {
  --q-font: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --q-bg: #F6F7F9;
  --q-surface: #FFFFFF;
  --q-surface-2: #F9FAFB;
  --q-ink: #0F172A;
  --q-ink-2: #334155;
  --q-muted: #64748B;
  --q-subtle: #94A3B8;
  --q-line: #E5E7EB;
  --q-line-strong: #D1D5DB;
  --q-primary: #111827;
  --q-primary-hover: #1F2937;
  --q-accent: #2563EB;
  --q-success: #047857; --q-success-soft: #ECFDF5;
  --q-warn: #B45309;    --q-warn-soft: #FFFBEB;
  --q-danger: #B91C1C;  --q-danger-soft: #FEF2F2;
  --q-info: #1D4ED8;    --q-info-soft: #EFF6FF;
  --q-r-sm: 6px; --q-r: 8px; --q-r-lg: 12px;
  --q-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --q-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --q-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
}

/* ---------- Base ---------- */
[data-ui="saas"] {
  font-family: var(--q-font) !important;
  background: var(--q-bg) !important;
  color: var(--q-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}
[data-ui="saas"]::before, [data-ui="saas"]::after { content: none !important; display: none !important; }
[data-ui="saas"] :is(h1, h2, h3) { font-weight: 600 !important; letter-spacing: 0; color: var(--q-ink); }
[data-ui="saas"] :is(.font-bold, b, strong) { font-weight: 600 !important; }
[data-ui="saas"] :focus-visible { outline: 2px solid var(--q-accent) !important; outline-offset: 2px; }
/* Tailwind 大圓角一律收斂 */
[data-ui="saas"] :is(.rounded-3xl, .rounded-2xl) { border-radius: var(--q-r-lg) !important; }
[data-ui="saas"] .rounded-xl { border-radius: var(--q-r) !important; }
/* 行內漸層與彩色光暈一律改為實色主色、無陰影 */
[data-ui="saas"] [style*="linear-gradient"] { background: var(--q-primary) !important; box-shadow: none !important; }

/* ---------- Components（新頁面直接使用） ---------- */
[data-ui="saas"] .q-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border-radius: var(--q-r); border: 1px solid var(--q-line-strong); background: var(--q-surface); color: var(--q-ink);
  font: 500 14px/1 var(--q-font); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
[data-ui="saas"] .q-btn:hover { background: var(--q-surface-2); }
[data-ui="saas"] .q-btn--primary { background: var(--q-primary); border-color: var(--q-primary); color: #fff; }
[data-ui="saas"] .q-btn--primary:hover { background: var(--q-primary-hover); }
[data-ui="saas"] .q-btn--block { width: 100%; min-height: 48px; font-size: 15px; }
[data-ui="saas"] .q-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ==========================================================================
   QMenu 顧客點餐頁  body[data-qmenu-surface="customer"]
   ========================================================================== */
[data-ui="saas"][data-qmenu-surface="customer"] .topbar {
  background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid var(--q-line) !important;
  box-shadow: none !important; backdrop-filter: saturate(180%) blur(8px);
}
[data-ui="saas"][data-qmenu-surface="customer"] .topbar > div:first-child { padding: 10px 16px !important; gap: 10px !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #shop-logo {
  width: 36px !important; height: 36px !important; border-radius: var(--q-r) !important; overflow: hidden;
  background: transparent !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] #shop-logo img { width: 36px; height: 36px; object-fit: contain; display: block; }
[data-ui="saas"][data-qmenu-surface="customer"] .option-btn .opt-adj { color: var(--q-muted); }
[data-ui="saas"][data-qmenu-surface="customer"] .option-btn.selected .opt-adj { color: rgba(255, 255, 255, .75); }
[data-ui="saas"][data-qmenu-surface="customer"] #shop-name { font-size: 16px !important; font-weight: 600 !important; color: var(--q-ink) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #shop-desc { font-size: 12px !important; color: var(--q-muted) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .topbar a[href="pick.html"] {
  height: 32px !important; border-radius: var(--q-r) !important; background: var(--q-surface) !important;
  border: 1px solid var(--q-line) !important; color: var(--q-ink-2) !important; font-weight: 500 !important; padding: 0 10px !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] .topbar button[onclick="toggleCart()"] {
  width: 36px !important; height: 36px !important; border-radius: var(--q-r) !important;
  background: var(--q-surface) !important; border: 1px solid var(--q-line) !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] .topbar button[onclick="toggleCart()"] svg { width: 18px; height: 18px; stroke: var(--q-ink); }
[data-ui="saas"][data-qmenu-surface="customer"] .cart-badge {
  background: var(--q-primary) !important; top: -6px !important; right: -6px !important;
  min-width: 18px !important; height: 18px !important; line-height: 18px !important; font-size: 11px !important; font-weight: 600 !important;
  border: 2px solid #fff; box-sizing: content-box;
}

/* 分類：底線分頁 */
[data-ui="saas"][data-qmenu-surface="customer"] .cat-strip {
  display: flex; gap: 20px !important; padding: 0 16px !important; overflow-x: auto; scrollbar-width: none;
  border-top: 0 !important; background: transparent !important; box-shadow: none !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] .cat-strip::-webkit-scrollbar { display: none; }
[data-ui="saas"][data-qmenu-surface="customer"] .cat-chip {
  flex-shrink: 0; height: 42px !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  box-shadow: none !important; color: var(--q-muted) !important; font: 500 14px/40px var(--q-font) !important; white-space: nowrap;
}
[data-ui="saas"][data-qmenu-surface="customer"] .cat-chip.active { color: var(--q-ink) !important; border-bottom-color: var(--q-ink) !important; font-weight: 600 !important; }

/* 品項：清單列，圖片在右 */
[data-ui="saas"][data-qmenu-surface="customer"] #menu-container { padding: 4px 0 120px !important; background: transparent !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #menu-container > div { margin: 0 0 8px !important; background: var(--q-surface); border-top: 1px solid var(--q-line); border-bottom: 1px solid var(--q-line); }
[data-ui="saas"][data-qmenu-surface="customer"] #menu-container h2 {
  font-size: 15px !important; font-weight: 600 !important; color: var(--q-ink) !important; margin: 0 !important; padding: 16px 16px 4px !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] #menu-container .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0 !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .item-card {
  flex-direction: row-reverse; align-items: center !important; gap: 12px;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--q-line) !important;
  border-radius: 0 !important; box-shadow: none !important; margin: 0 16px; padding: 14px 0; transform: none !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] .item-card:last-child { border-bottom: 0 !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .item-card:active { background: var(--q-surface-2) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .item-card > .flex-1 { padding: 0 !important; align-self: stretch; }
[data-ui="saas"][data-qmenu-surface="customer"] .item-img,
[data-ui="saas"][data-qmenu-surface="customer"] .item-img-placeholder {
  width: 80px !important; min-width: 80px !important; height: 80px !important; border-radius: var(--q-r) !important;
  background: var(--q-surface-2) !important; border: 1px solid var(--q-line);
}
[data-ui="saas"][data-qmenu-surface="customer"] .item-img-placeholder svg { width: 24px; height: 24px; stroke: var(--q-subtle); }
[data-ui="saas"][data-qmenu-surface="customer"] .item-card h3 { font-size: 15px !important; font-weight: 600 !important; color: var(--q-ink) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .item-card p { font-size: 13px !important; color: var(--q-muted) !important; margin-top: 2px !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .item-card .item-price { font: 600 15px/1 var(--q-font) !important; color: var(--q-ink) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .add-circle {
  width: 32px !important; height: 32px !important; border-radius: var(--q-r) !important;
  background: var(--q-surface) !important; border: 1px solid var(--q-line-strong) !important; box-shadow: none !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] .add-circle svg { stroke: var(--q-ink) !important; width: 16px; height: 16px; }

/* 購物車側欄、彈窗 */
[data-ui="saas"][data-qmenu-surface="customer"] #cart-sidebar { border-radius: 0 !important; box-shadow: var(--q-shadow-lg) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #cart-sidebar h2 { font-size: 17px !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #cart-total,
[data-ui="saas"][data-qmenu-surface="customer"] #modal-item-price { color: var(--q-ink) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] :is(#options-modal, #order-success-modal) > div { border-radius: var(--q-r-lg) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .option-btn { border-radius: var(--q-r) !important; border-color: var(--q-line-strong) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .option-btn.selected { background: var(--q-primary) !important; border-color: var(--q-primary) !important; color: #fff !important; box-shadow: none !important; }
[data-ui="saas"][data-qmenu-surface="customer"] button[onclick="changeQuantity(1)"],
[data-ui="saas"][data-qmenu-surface="customer"] button[onclick="changeQuantity(-1)"] {
  border-radius: var(--q-r) !important; background: var(--q-surface) !important; border: 1px solid var(--q-line-strong) !important; color: var(--q-ink) !important;
}
/* 下單成功：中性白底、綠色勾勾 */
[data-ui="saas"][data-qmenu-surface="customer"] #order-success-modal [style*="linear-gradient"]:first-child {
  background: var(--q-surface) !important; color: var(--q-ink) !important; border-bottom: 1px solid var(--q-line); padding-bottom: 20px !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] #order-success-modal [style*="linear-gradient"]:first-child > div {
  background: var(--q-success-soft) !important;
}
[data-ui="saas"][data-qmenu-surface="customer"] #order-success-modal [style*="linear-gradient"]:first-child svg { stroke: var(--q-success) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #success-order-amount { color: var(--q-ink) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #queue-info { background: var(--q-surface-2) !important; border: 1px solid var(--q-line) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #queue-info :is(.text-blue-800, .text-blue-600, .text-orange-500, .text-purple-600) { color: var(--q-ink) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #queue-info svg { stroke: var(--q-muted) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #view-ticket-btn { background: var(--q-primary) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #customer-complete-btn { background: var(--q-success) !important; }

/* 語音按鈕：次要、低調 */
[data-ui="saas"][data-qmenu-surface="customer"] #voice-fab {
  width: 48px !important; height: 48px !important; right: 16px !important; bottom: 24px !important;
  background: var(--q-surface) !important; border: 1px solid var(--q-line-strong) !important; box-shadow: var(--q-shadow) !important;
  transition: bottom .2s;
}
[data-ui="saas"][data-qmenu-surface="customer"] #voice-fab svg { stroke: var(--q-ink) !important; width: 20px; height: 20px; }
[data-ui="saas"][data-qmenu-surface="customer"] #voice-fab.rec { background: var(--q-danger) !important; border-color: var(--q-danger) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #voice-fab.rec svg { stroke: #fff !important; }
[data-ui="saas"][data-qmenu-surface="customer"] .pulse-ring { right: 16px !important; bottom: 24px !important; width: 48px !important; height: 48px !important; }
[data-ui="saas"][data-qmenu-surface="customer"].has-cart-bar #voice-fab,
[data-ui="saas"][data-qmenu-surface="customer"].has-cart-bar .pulse-ring { bottom: 88px !important; }

/* 底部購物車列 */
.q-cartbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: none; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border: 0; border-radius: var(--q-r-lg);
  background: var(--q-primary); color: #fff; font: 600 15px/1 var(--q-font); box-shadow: var(--q-shadow-lg); cursor: pointer; }
.has-cart-bar .q-cartbar { display: flex; }
.q-cartbar__count { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); font-size: 13px; line-height: 24px; text-align: center; }
.q-cartbar__label { flex: 1; text-align: left; }
.q-cartbar__total { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   QueueMe 店家入口（登入／首頁） body[data-surface="merchant-portal"]
   ========================================================================== */
[data-ui="saas"][data-surface="merchant-portal"] .topbar { background: var(--q-surface) !important; border-bottom: 1px solid var(--q-line) !important; box-shadow: none !important; }
[data-ui="saas"][data-surface="merchant-portal"] main.wrap { max-width: 960px; padding: 0 16px 48px !important; box-sizing: border-box; }
[data-ui="saas"][data-surface="merchant-portal"] .login {
  box-sizing: border-box; width: 100% !important; max-width: 400px !important; margin: 48px auto 0 !important; padding: 28px 24px !important;
  background: var(--q-surface) !important; border: 1px solid var(--q-line) !important; border-radius: var(--q-r-lg) !important; box-shadow: var(--q-shadow-sm) !important;
  overflow: hidden;
}
[data-ui="saas"][data-surface="merchant-portal"] .login h1 { font-size: 22px !important; margin: 0 0 6px !important; }
[data-ui="saas"][data-surface="merchant-portal"] .login > p { font-size: 14px !important; color: var(--q-muted) !important; margin: 0 0 20px !important; line-height: 1.6; }
[data-ui="saas"][data-surface="merchant-portal"] .login > p b { color: var(--q-ink-2); font-weight: 500 !important; }
[data-ui="saas"][data-surface="merchant-portal"] .field label { font-size: 13px !important; font-weight: 500 !important; color: var(--q-ink-2) !important; }
[data-ui="saas"][data-surface="merchant-portal"] .field input {
  height: 44px !important; border-radius: var(--q-r) !important; border: 1px solid var(--q-line-strong) !important; font-size: 15px !important; width: 100%; box-sizing: border-box;
}
[data-ui="saas"][data-surface="merchant-portal"] .field input:focus { outline: none !important; border-color: var(--q-ink) !important; box-shadow: 0 0 0 3px rgba(15, 23, 42, .08) !important; }
[data-ui="saas"][data-surface="merchant-portal"] .btn { border-radius: var(--q-r) !important; font-weight: 500 !important; box-shadow: none !important; }
[data-ui="saas"][data-surface="merchant-portal"] .btn-primary { background: var(--q-primary) !important; border-color: var(--q-primary) !important; color: #fff !important; }
[data-ui="saas"][data-surface="merchant-portal"] .btn-primary:hover { background: var(--q-primary-hover) !important; }
[data-ui="saas"][data-surface="merchant-portal"] .btn-ghost { background: var(--q-surface) !important; border: 1px solid var(--q-line-strong) !important; color: var(--q-ink) !important; }
[data-ui="saas"][data-surface="merchant-portal"] .muted-link { font-size: 13px !important; color: var(--q-muted) !important; margin-top: 16px !important; }
[data-ui="saas"][data-surface="merchant-portal"] .muted-link a { color: var(--q-ink) !important; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
[data-ui="saas"][data-surface="merchant-portal"] .home .hi { font-size: 22px !important; font-weight: 600 !important; margin-top: 28px !important; }
[data-ui="saas"][data-surface="merchant-portal"] .home .sub { color: var(--q-muted) !important; font-size: 14px !important; }
[data-ui="saas"][data-surface="merchant-portal"] .sect { margin-top: 28px !important; }
[data-ui="saas"][data-surface="merchant-portal"] .sect-h h2 { font-size: 13px !important; font-weight: 600 !important; color: var(--q-muted) !important; text-transform: none; letter-spacing: .02em; margin: 0 0 10px !important; }
[data-ui="saas"][data-surface="merchant-portal"] .card {
  border-radius: var(--q-r-lg) !important; border: 1px solid var(--q-line) !important; box-shadow: none !important; padding: 16px !important; gap: 12px !important;
}
[data-ui="saas"][data-surface="merchant-portal"] .card .nm { font-size: 16px !important; font-weight: 600 !important; }
[data-ui="saas"][data-surface="merchant-portal"] .card .st { font-size: 13px !important; color: var(--q-muted) !important; }
[data-ui="saas"][data-surface="merchant-portal"] .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 12px !important; }
[data-ui="saas"][data-surface="merchant-portal"] .err { border-radius: var(--q-r) !important; font-size: 13px !important; }
[data-ui="saas"][data-surface="merchant-portal"] .empty { border-radius: var(--q-r-lg) !important; font-size: 14px; }
@media (max-width: 480px) {
  [data-ui="saas"][data-surface="merchant-portal"] .login { margin-top: 24px !important; padding: 24px 20px !important; }
}

/* 購物車清單：價格改黑字、刪除鈕中性化 */
[data-ui="saas"][data-qmenu-surface="customer"] #cart-items [style*="color:var(--orange)"] { color: var(--q-ink) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #cart-items button[onclick^="removeFromCart"] { background: var(--q-surface) !important; border: 1px solid var(--q-line); border-radius: var(--q-r) !important; }
[data-ui="saas"][data-qmenu-surface="customer"] #cart-items button[onclick^="removeFromCart"] svg { stroke: var(--q-muted) !important; }