/* QueueMe 顧客端 SaaS 樣式（2026-09-27）
   只作用在 <body data-ui="saas">，載入順序在 style.css / queueme-qpoint-customer.css 之後；拿掉屬性即回到舊樣式。
   與點餐頁 qding-saas.css 同一套：中性色、單一主色 #111827、細邊框、Inter + Noto Sans TC。 */
body[data-ui="saas"] {
  --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-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;
  margin: 0; background: var(--q-bg) !important; color: var(--q-ink);
  font-family: var(--q-font) !important; -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
body[data-ui="saas"]::before, body[data-ui="saas"]::after { content: none !important; display: none !important; }
body[data-ui="saas"] .container { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: transparent; box-shadow: none; padding: 0; }

/* 頁首：品牌小、店名大 */
body[data-ui="saas"] .q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--q-surface); border-bottom: 1px solid var(--q-line); position: sticky; top: 0; z-index: 10; }
body[data-ui="saas"] .q-brand { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--q-muted); font-size: 13px; }
body[data-ui="saas"] .q-brand img { height: 22px; width: auto; display: block; }
body[data-ui="saas"] .q-link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--q-line-strong); border-radius: 8px; background: var(--q-surface); color: var(--q-ink-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body[data-ui="saas"] .q-link svg { width: 15px; height: 15px; }

body[data-ui="saas"] .content { flex: 1; padding: 16px; display: grid; gap: 12px; align-content: start; }
body[data-ui="saas"] .footer { padding: 20px 16px 28px; text-align: center; color: var(--q-subtle); font-size: 12px; background: none; border: 0; }

/* 卡片 */
body[data-ui="saas"] .card { background: var(--q-surface) !important; border: 1px solid var(--q-line); border-radius: 12px; box-shadow: none !important; padding: 18px; margin: 0; color: var(--q-ink); transform: none !important; }
body[data-ui="saas"] .store-name { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0 0 12px; color: var(--q-ink); }
body[data-ui="saas"] .store-info { display: grid; gap: 8px; margin: 0; }
body[data-ui="saas"] .store-info-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--q-ink-2); line-height: 1.5; }
body[data-ui="saas"] .store-info-item svg { width: 16px; height: 16px; flex: none; margin-top: 3px; stroke: var(--q-subtle); }
body[data-ui="saas"] .store-info-item span:empty { display: none; }
body[data-ui="saas"] .store-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 16px -18px -18px; border-top: 1px solid var(--q-line); }
body[data-ui="saas"] .stat { display: block; padding: 14px 18px; text-align: left; background: none; border: 0; border-radius: 0; }
body[data-ui="saas"] .stat + .stat { border-left: 1px solid var(--q-line); }
body[data-ui="saas"] .stat-value { font-size: 22px; font-weight: 600; color: var(--q-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
body[data-ui="saas"] .stat-label { font-size: 13px; color: var(--q-muted); margin-top: 2px; }

/* 表單 */
body[data-ui="saas"] .q-field label { display: block; font-size: 13px; font-weight: 500; color: var(--q-ink-2); margin-bottom: 6px; }
body[data-ui="saas"] .q-field small { display: block; font-size: 12px; color: var(--q-muted); margin-top: 6px; }
body[data-ui="saas"] .q-field input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--q-line-strong); border-radius: 8px; background: var(--q-surface); font: inherit; font-size: 16px; color: var(--q-ink); box-sizing: border-box; }
body[data-ui="saas"] .q-field input:focus { outline: none; border-color: var(--q-primary); box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); }

/* 按鈕 */
body[data-ui="saas"] .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: none !important; transform: none !important; background-image: none !important; }
body[data-ui="saas"] .btn-primary { background: var(--q-primary) !important; color: #fff !important; }
body[data-ui="saas"] .btn-primary:disabled { background: var(--q-line) !important; color: var(--q-muted) !important; cursor: not-allowed; opacity: 1; }
body[data-ui="saas"] .btn-large { height: 52px; font-size: 17px; }
body[data-ui="saas"] .btn-danger { background: var(--q-surface) !important; color: var(--q-danger) !important; border-color: #FECACA; }
body[data-ui="saas"] .btn-light { background: var(--q-surface) !important; color: var(--q-ink) !important; border-color: var(--q-line-strong); }

/* 提示 */
body[data-ui="saas"] .alert { border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.6; border: 1px solid var(--q-line); background: var(--q-surface); color: var(--q-ink-2); margin: 0; box-shadow: none; transition: opacity .3s; }
body[data-ui="saas"] .alert strong { color: var(--q-ink); font-weight: 600; }
body[data-ui="saas"] .alert-success { background: var(--q-success-soft); border-color: #D1FAE5; color: var(--q-success); }
body[data-ui="saas"] .alert-warning { background: var(--q-warn-soft); border-color: #FDE68A; color: var(--q-warn); }
body[data-ui="saas"] .alert-error { background: var(--q-danger-soft); border-color: #FEE2E2; color: var(--q-danger); }
body[data-ui="saas"] .container > .alert { margin: 12px 16px 0; }
body[data-ui="saas"] .q-note { text-align: center; font-size: 12px; color: var(--q-subtle); }

/* 號碼牌 */
body[data-ui="saas"] .ticket-display { text-align: center; padding: 8px 0 0; }
body[data-ui="saas"] .ticket-label { font-size: 13px; color: var(--q-muted); }
body[data-ui="saas"] .ticket-number { font-size: 64px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; margin: 4px 0 10px; color: var(--q-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; font-variant-numeric: tabular-nums; }
body[data-ui="saas"] .ticket-status { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--q-info-soft) !important; color: var(--q-info) !important; border: 0; box-shadow: none; }
body[data-ui="saas"] .ticket-status.serving { background: var(--q-success-soft) !important; color: var(--q-success) !important; }
body[data-ui="saas"] .ticket-status.completed { background: #F3F4F6 !important; color: var(--q-muted) !important; }
body[data-ui="saas"] .ticket-info { display: grid; grid-template-columns: 1fr 1fr; margin: 18px -18px -18px; border-top: 1px solid var(--q-line); gap: 0; }
body[data-ui="saas"] .ticket-info-item { display: block; padding: 14px 18px; text-align: left; background: none; border: 0; border-radius: 0; }
body[data-ui="saas"] .ticket-info-item + .ticket-info-item { border-left: 1px solid var(--q-line); }
body[data-ui="saas"] .ticket-info-label { display: block; font-size: 13px; color: var(--q-muted); }
body[data-ui="saas"] .ticket-info-value { display: block; font-size: 17px; font-weight: 600; color: var(--q-ink); margin-top: 2px; }

/* 邀請評論 */
body[data-ui="saas"] .review-card { text-align: center; }
body[data-ui="saas"] .review-card h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
body[data-ui="saas"] .review-card p { font-size: 14px; color: var(--q-muted); margin: 0 0 16px; }
body[data-ui="saas"] .review-qr { display: inline-block; padding: 12px; border: 1px solid var(--q-line); border-radius: 12px; margin-bottom: 14px; }
body[data-ui="saas"] .review-qr small { display: block; margin-top: 8px; font-size: 12px; color: var(--q-muted); }

body[data-ui="saas"] .hidden { display: none !important; }
body[data-ui="saas"] .loading { background: rgba(246, 247, 249, .7); }
body[data-ui="saas"] .spinner { border-color: var(--q-line); border-top-color: var(--q-primary); }

/* 舊主題的裝飾（彩條、圓圈、光暈）一律關掉 */
body[data-ui="saas"] :is(.card, .store-card, .ticket-display, .btn, .header, .logo, #review-card, #take-ticket-btn)::before,
body[data-ui="saas"] :is(.card, .store-card, .ticket-display, .btn, .header, .logo, #review-card, #take-ticket-btn)::after { content: none !important; display: none !important; }