/* ========================================================================
   Quiet Luxury Theme Overlay · v1
   Why: 當前介面顏色飽和、陰影重、圓角大，偏向「熱鬧 SaaS」風格；
        目標是把視覺往「Aesop / The Row / 日系精品」的節制感調整。
   How: 在 tailwind.css 之後載入，用相同 class 名覆寫色票與陰影，
        不修改 HTML 即可一鍵換風。
   ======================================================================== */

/* ========= Typography ========= */

/* 襯線字型用在標題，非襯線用在 body；中文維持 Noto Sans/Serif TC */
body {
  font-family: 'Inter', 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-weight: 400;
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
  letter-spacing: -0.003em;
  background: #faf9f6 !important;
  color: #1c1c1e;
  /* 蓋掉原本的 radial gradient（太花），改成沉靜米白 */
  background-image: none !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  /* 不強制設 color：保留 Tailwind 的 text-white / text-ink-*，
     也不破壞 bg-clip-text 漸層文字（color:transparent） */
}

/* 粗體退一級，避免全版「感覺太用力」 */
.font-bold  { font-weight: 600 !important; }
.font-semibold { font-weight: 500 !important; }

/* 數字用系統 tabular 更對齊 */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ========= Color tokens ========= */
/*
 * ink scale：從冷灰轉為暖米灰（warm-grey / bone）
 * accent：從亮靛藍轉為深午夜藍（muted navy）
 * 強調色：引入柔金（brass / champagne），用在重要數字
 */

/* 背景層 */
.bg-ink-50  { background-color: #f7f5f0 !important; }
.bg-ink-100 { background-color: #eeebe3 !important; }
.bg-ink-200 { background-color: #e0ddd3 !important; }
.bg-white   { background-color: #ffffff !important; }
html.dark .bg-white { background-color: #1a1a1c !important; }

/* 深色面塊（主 CTA 維持實心）— 改用品牌墨藍 #1e2a4a 一系，讓 hero / CTA / 深色卡全家族色 */
.bg-ink-800 { background-color: #2a3b5c !important; }   /* hover 用的稍淺墨藍 */
.bg-ink-900 { background-color: #1e2a4a !important; }   /* 主 CTA、landing hero 的深墨藍 */
.hover\:bg-ink-800:hover { background-color: #2a3b5c !important; }

/* -------- Active state 降重 --------
   主要 CTA（「新增食材」、「開啟試算」等 button）直接寫 bg-ink-900 使用實心深；
   但分頁切換、分類 chip 的 active 也用 bg-ink-900 就太重。
   pattern：Tab / chip 共同特徵是外層父層為 rounded pill + p-1 容器，
   我們針對這個容器裡的 ink-900 active item 改為米底 + 深墨字 */
nav[x-show] > button.bg-ink-900,
.flex.items-center.rounded-full.bg-white\/80 button.bg-ink-900,
.flex.items-center.rounded-full > button.bg-ink-900,
.flex.rounded-full.border > button.bg-ink-900 {
  background-color: #eeebe3 !important;   /* ink-100 warm bone */
  color: #1c1c1e !important;
  box-shadow: inset 0 0 0 1px #2a2725 !important; /* thin dark outline */
}
/* Filter chip（食材頁分類那排） — chip 單獨是 rounded-full button */
button.rounded-full.bg-ink-900,
button.rounded-full.bg-ink-900.text-white {
  background-color: #eeebe3 !important;
  color: #1c1c1e !important;
  box-shadow: inset 0 0 0 1px #2a2725 !important;
}

/* Dark mode 對應：用深灰米 + 淡金字 */
html.dark nav[x-show] > button.bg-ink-900,
html.dark .flex.items-center.rounded-full > button.bg-ink-900,
html.dark button.rounded-full.bg-ink-900,
html.dark button.rounded-full.bg-ink-900.text-white {
  background-color: #2d2d30 !important;
  color: #f0ede5 !important;
  box-shadow: inset 0 0 0 1px #5a564d !important;
}

/* 文字色 */
.text-ink-300 { color: #c5c2bb !important; }
.text-ink-400 { color: #a5a29a !important; }
.text-ink-500 { color: #7f7c74 !important; }
.text-ink-600 { color: #605d56 !important; }
.text-ink-700 { color: #44413c !important; }
.text-ink-800 { color: #2a2725 !important; }
.text-ink-900 { color: #1c1c1e !important; }
.hover\:text-ink-900:hover { color: #1c1c1e !important; }
.hover\:text-ink-800:hover { color: #2a2725 !important; }

/* 邊框統一極淡 */
.border-ink-100 { border-color: #f1eee7 !important; }
.border-ink-200 { border-color: #e6e2d9 !important; }
.border-ink-300 { border-color: #d4cfc4 !important; }

/* accent：從亮靛紫 → 沉靜午夜藍 */
.bg-accent-50  { background-color: #f4f2ee !important; }
.bg-accent-100 { background-color: #e7e3db !important; }
.bg-accent-500 { background-color: #2e3a5a !important; }
.bg-accent-600 { background-color: #1e2a4a !important; }
.bg-accent-700 { background-color: #14203b !important; }
.hover\:bg-accent-700:hover { background-color: #0e1a32 !important; }
.hover\:bg-accent-600:hover { background-color: #14203b !important; }

.text-accent-600 { color: #1e2a4a !important; }
.text-accent-700 { color: #14203b !important; }
.text-accent-800 { color: #0e1a32 !important; }
.hover\:text-accent-600:hover { color: #1e2a4a !important; }

.border-accent-200 { border-color: #d5cfc4 !important; }
.border-accent-300 { border-color: #c0b8a9 !important; }
.border-accent-400 { border-color: #aa9f8d !important; }
.ring-accent-300 { --tw-ring-color: #c0b8a9 !important; }
.ring-accent-500 { --tw-ring-color: #2e3a5a !important; }

/* sage（健康）→ 霧綠 muted sage */
.text-sage-700 { color: #4a6b53 !important; }
.text-sage-800 { color: #385241 !important; }
.bg-sage-50  { background-color: #f0f3ed !important; }
.bg-sage-100 { background-color: #dfe4d8 !important; }
.bg-sage-500 { background-color: #4a6b53 !important; }
.bg-sage-600 { background-color: #385241 !important; }
.border-sage-200 { border-color: #c5ccba !important; }

/* amber（琥珀）→ 柔金 champagne */
.text-amber-600, .text-amber-700 { color: #8a6e2f !important; }
.text-amber-800 { color: #6a5624 !important; }
.bg-amber-50  { background-color: #f5efe0 !important; }
.bg-amber-100 { background-color: #ece2c7 !important; }
.border-amber-200 { border-color: #d9caa2 !important; }
.border-amber-400 { border-color: #c2a86c !important; }

/* rose（警戒）→ 深酒紅 wine，保留辨識 */
.text-rose-500 { color: #a33a48 !important; }
.text-rose-600 { color: #8e2b3a !important; }
.text-rose-700 { color: #7a2432 !important; }
.bg-rose-50 { background-color: #f5e9ec !important; }
.bg-rose-100 { background-color: #eed2d7 !important; }
.border-rose-200 { border-color: #e2b9c0 !important; }

/* ========= Shadows：全部變薄，像紙張而非塑膠 ========= */
.shadow-sm    { box-shadow: 0 1px 2px rgba(28, 28, 30, 0.03) !important; }
.shadow-card  { box-shadow: 0 1px 2px rgba(28, 28, 30, 0.03), 0 2px 6px -2px rgba(28, 28, 30, 0.04) !important; }
.shadow-lift  { box-shadow: 0 2px 6px -2px rgba(28, 28, 30, 0.04), 0 16px 32px -8px rgba(28, 28, 30, 0.08) !important; }
.shadow-md    { box-shadow: 0 2px 6px -2px rgba(28, 28, 30, 0.05), 0 8px 16px -4px rgba(28, 28, 30, 0.06) !important; }
.hover\:shadow-md:hover { box-shadow: 0 2px 6px -2px rgba(28, 28, 30, 0.05), 0 8px 16px -4px rgba(28, 28, 30, 0.06) !important; }
.hover\:shadow-lift:hover { box-shadow: 0 2px 6px -2px rgba(28, 28, 30, 0.04), 0 16px 32px -8px rgba(28, 28, 30, 0.08) !important; }

/* ========= Border radius：卡片柔和但不 chibi ========= */
.rounded-2xl { border-radius: 14px !important; }
.rounded-xl  { border-radius: 10px !important; }
.rounded-lg  { border-radius: 8px !important; }

/* ========= Buttons ========= */
button, a.btn {
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* 主要 CTA（深底 + 白字）：保留品牌深色，但去除漸層 */
.bg-gradient-to-br.from-accent-500.to-accent-600,
.bg-gradient-to-br.from-accent-600.to-accent-700 {
  background: #1e2a4a !important;
}
.hover\:from-accent-600:hover.bg-gradient-to-br,
.hover\:to-accent-700:hover.bg-gradient-to-br {
  background: #14203b !important;
}

/* ========= Inputs：極簡邊框 + focus 細金邊 ========= */
input[type=text], input[type=number], input[type=date], input[type=time],
input[type=email], select, textarea {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #1e2a4a !important;
  box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.08) !important;
}

/* 去掉 focus:ring-* 的青色環（原本是靛藍 ring），改為上面的淡藍灰 */
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.08) !important; }
.focus\:ring-accent-500\/30:focus { box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.08) !important; }
.focus\:border-accent-500:focus { border-color: #1e2a4a !important; }

/* ========= Tier 卡片背景（roadmap 區塊） —— light/dark 都明確上色，
   不能用 bg-amber-50/40 + opacity，因為 Tailwind 編譯成獨立 class，
   html.dark .bg-amber-50 override 會被繞過 → 深色模式變灰白 wash 看不見內容 */
.card-tier-login {
  background-color: #f1f5fa;
  border: 1px solid #cbd5e3;
}
html.dark .card-tier-login {
  background-color: #1c2536 !important;
  border-color: rgba(165, 180, 210, 0.25) !important;
}
.card-tier-pro {
  background-color: #fdf6e3;
  border: 1px solid #e8d59a;
}
html.dark .card-tier-pro {
  background-color: #2a2519 !important;
  border-color: rgba(223, 184, 114, 0.3) !important;
}

/* ========= Tier 標籤（登入解鎖 / 付費功能）—— 給未來鎖點功能用 ========= */
.tag-login, .tag-pro {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  font-size: 10px; font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}
.tag-login {
  color: #1e3a5f;
  background: #e8eef5;
  border: 1px solid #c8d4e3;
}
.tag-pro {
  color: #7c5a18;
  background: #fdf6e3;
  border: 1px solid #e8d59a;
}
html.dark .tag-login {
  color: #b5c1da !important;
  background: rgba(99,118,158,0.18) !important;
  border-color: rgba(165,180,210,0.3) !important;
}
html.dark .tag-pro {
  color: #dfb872 !important;
  background: rgba(184,148,92,0.15) !important;
  border-color: rgba(223,184,114,0.3) !important;
}

/* ========= Tooltip（data-tip）樣式優化 ========= */
[data-tip]:hover::after {
  background: #1c1c1e !important;
  color: #f5f3ee !important;
  letter-spacing: 0.01em;
  font-weight: 400 !important;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
}

/* ========= Dark mode 調校 ========= */
html.dark body {
  background: #0b1220 !important;        /* deep navy base，對齊品牌 accent #1e2a4a 的家族色 */
  color: #e8e5df;                         /* 保留暖米白字，navy 底 + warm cream = 編輯風 */
}
html.dark .bg-white { background-color: #141c2e !important; }   /* 浮起卡片面 */
html.dark .bg-ink-50 { background-color: #141c2e !important; }
html.dark .bg-ink-100 { background-color: #1e2740 !important; }
html.dark .bg-ink-200 { background-color: #293454 !important; }
html.dark .border-ink-100 { border-color: #1e2740 !important; }
html.dark .border-ink-200 { border-color: #2b3557 !important; }
/* CTA 在 navy body 上要比 body 亮一階才看得見；用品牌深墨藍 #1e2a4a */
html.dark .bg-ink-800 { background-color: #2a3b5c !important; }
html.dark .bg-ink-900 { background-color: #1e2a4a !important; }
html.dark .hover\:bg-ink-800:hover { background-color: #2a3b5c !important; }
html.dark .text-ink-900 { color: #f0ede5 !important; }
html.dark .text-ink-800 { color: #d8d4cb !important; }
html.dark .text-ink-700 { color: #bcb8af !important; }
html.dark .text-ink-600 { color: #9d998f !important; }
html.dark .text-ink-500 { color: #7a766d !important; }
html.dark .text-ink-400 { color: #5c5953 !important; }

/* Dark mode accent */
html.dark .bg-accent-600 { background-color: #6b7aa3 !important; }
html.dark .bg-accent-700 { background-color: #8493b8 !important; }
html.dark .text-accent-600 { color: #9ba9c8 !important; }
html.dark .text-accent-700 { color: #b5c1da !important; }

/* ========= Dark mode: soft-tint backgrounds（-50 / -100 系列） =========
   原本在淺色模式是柔米色；暗色模式需要對應的深調子底色，
   否則會在深背景上變成刺眼亮塊 */
html.dark .bg-sage-50    { background-color: #1c2620 !important; }
html.dark .bg-sage-100   { background-color: #24302a !important; }
html.dark .bg-accent-50  { background-color: #1c1f28 !important; }
html.dark .bg-accent-100 { background-color: #252a38 !important; }
html.dark .bg-amber-50   { background-color: #2a2519 !important; }
html.dark .bg-amber-100  { background-color: #332c1f !important; }
html.dark .bg-rose-50    { background-color: #2a1e22 !important; }
html.dark .bg-rose-100   { background-color: #372428 !important; }
html.dark .bg-emerald-50  { background-color: #1a2520 !important; }
html.dark .bg-emerald-100 { background-color: #1f2c27 !important; }
html.dark .bg-indigo-50   { background-color: #1c1f2e !important; }
html.dark .bg-indigo-100  { background-color: #24293b !important; }
html.dark .bg-orange-50   { background-color: #2a2017 !important; }
html.dark .bg-orange-100  { background-color: #332a1d !important; }

/* 各色 -50 底色上的文字：亮度提高避免低對比 */
html.dark .text-sage-700, html.dark .text-sage-800 { color: #a0c1aa !important; }
html.dark .text-accent-700, html.dark .text-accent-800 { color: #b5c1da !important; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #dfb872 !important; }
html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800 { color: #e9a3b0 !important; }
html.dark .text-indigo-700 { color: #a0afd6 !important; }

/* 邊框（-200 系列）在暗色下也要柔化 */
html.dark .border-sage-200    { border-color: #2e3d34 !important; }
html.dark .border-accent-200  { border-color: #2e3345 !important; }
html.dark .border-amber-200, html.dark .border-amber-400 { border-color: #443826 !important; }
html.dark .border-rose-200    { border-color: #443038 !important; }
html.dark .border-indigo-200  { border-color: #2b3148 !important; }
html.dark .border-orange-200  { border-color: #453620 !important; }

/* 漸層卡片（bg-gradient-to-br from-*-50 to-*-50/*-100）暗色模式拍平成單色 */
html.dark [class*="bg-gradient-to-br"][class*="from-sage-50"],
html.dark [class*="bg-gradient-to-br"][class*="from-emerald-50"] {
  background: #1c2620 !important;
}
html.dark [class*="bg-gradient-to-br"][class*="from-accent-50"] {
  background: #1c1f28 !important;
}
/* 特例：CTA 大卡 from-accent-50 via-white to-sage-50 — via-white 在暗模式會穿透成白光暈 */
html.dark [class*="bg-gradient-to-br"][class*="via-white"] {
  background: #141c2e !important;
}

/* ========= Dark mode: fractional-opacity Tailwind classes（.bg-*/\d+ 在 dark 下不會自動變暗） ========= */
html.dark .bg-white\/50,
html.dark .bg-white\/70,
html.dark .bg-white\/80,
html.dark .bg-white\/85,
html.dark .bg-white\/90,
html.dark .bg-white\/95 { background-color: rgba(20, 28, 46, 0.85) !important; }
html.dark .bg-white\/5  { background-color: rgba(245, 243, 238, 0.05) !important; }
html.dark .bg-white\/10 { background-color: rgba(245, 243, 238, 0.10) !important; }
html.dark .bg-ink-50\/40,
html.dark .bg-ink-50\/50,
html.dark .bg-ink-50\/60 { background-color: rgba(30, 39, 64, 0.5) !important; }
html.dark .bg-accent-100\/50 { background-color: rgba(37, 42, 56, 0.6) !important; }
html.dark .bg-sage-100\/50   { background-color: rgba(36, 48, 42, 0.6) !important; }
html.dark .bg-accent-50\/50  { background-color: rgba(28, 31, 40, 0.6) !important; }
html.dark .bg-sage-50\/50    { background-color: rgba(28, 38, 32, 0.6) !important; }
html.dark .open\:bg-ink-50\/50[open] { background-color: rgba(30, 39, 64, 0.5) !important; }
html.dark .hover\:bg-white\/5:hover,
html.dark .hover\:bg-white\/10:hover { background-color: rgba(245, 243, 238, 0.08) !important; }
html.dark .border-white\/10 { border-color: rgba(245, 243, 238, 0.12) !important; }
html.dark .border-white\/20 { border-color: rgba(245, 243, 238, 0.18) !important; }
html.dark .border-ink-200\/60 { border-color: rgba(43, 53, 87, 0.7) !important; }
html.dark [class*="bg-gradient-to-br"][class*="from-amber-50"] {
  background: #2a2519 !important;
}
html.dark [class*="bg-gradient-to-br"][class*="from-rose-50"] {
  background: #2a1e22 !important;
}
html.dark [class*="bg-gradient-to-br"][class*="from-orange-50"] {
  background: #2a2017 !important;
}

/* ========= 輕微微調：列表間距、hr 斷線 ========= */
hr, .border-t, .border-b { border-color: #ecebe5 !important; }
html.dark hr, html.dark .border-t, html.dark .border-b { border-color: #5a4830 !important; }
html.dark article table { border-top-color: #5a4830 !important; border-bottom-color: #5a4830 !important; }

/* ========= 選取文字 ========= */
::selection { background: rgba(30, 42, 74, 0.15); color: inherit; }
html.dark ::selection { background: rgba(183, 199, 232, 0.25); color: #f0ede5; }

/* ========= 捲軸（webkit）細緻化 ========= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(28, 28, 30, 0.12);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(28, 28, 30, 0.22); background-clip: padding-box; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(245, 243, 238, 0.15); background-clip: padding-box; }

/* ========= loading bounce 動畫放緩 ========= */
.animate-bounce { animation-duration: 2.5s !important; }

/* ========= 特例：營收/重要金額用襯線數字 ========= */
.num.text-2xl, .num.text-3xl, .num.text-lg.font-bold {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ========= 部落格文章排版（editorial rhythm） ========= */
/* h1：大而輕，字距緊 — 主角但不壓迫 */
article h1 {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  color: #1c1c1e !important;
  line-height: 1.2 !important;
}

/* h2：縮減字級與字重，配合分隔線；這層是文章主要節奏點 */
article h2 {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.375rem !important;
  letter-spacing: -0.012em !important;
  color: #2a2725 !important;
  padding-top: 2.5rem !important;
  margin-top: 3rem !important;
  border-top: 1px solid #ecebe5;
}
article h2:first-of-type { border-top: none; margin-top: 2rem !important; padding-top: 0 !important; }

article h3 {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.05rem !important;
  color: #44413c !important;
  margin-top: 1.75rem !important;
  letter-spacing: -0.005em;
}

/* 內文：細黑體，行高拉開，淡墨色（非純黑降低刺眼） */
article p {
  color: #3d3a35 !important;
  line-height: 1.85 !important;
  font-size: 0.98rem;
}
article ul li, article ol li { color: #3d3a35 !important; line-height: 1.85; }

/* strong 改用深炭黑，不刺眼 */
article strong { color: #1c1c1e !important; font-weight: 600 !important; }

/* blockquote：編輯感拉滿，左側細金線 + 淺米底 */
article blockquote {
  border-left: 2px solid #c8a96a !important;
  background: #faf9f4 !important;
  color: #3d3a35 !important;
  font-style: normal;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
}
article blockquote strong { color: #1c1c1e !important; }

/* 表格：極簡邊 + 米白 header */
article table {
  border: none !important;
  border-top: 1px solid #ecebe5 !important;
  border-bottom: 1px solid #ecebe5 !important;
}
article th, article td {
  border: none !important;
  border-bottom: 1px solid #f1eee7 !important;
  padding: 0.75rem 0.85rem !important;
}
article th { background: transparent !important; color: #605d56 !important; font-weight: 500 !important; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: none; }
article tr:last-child td { border-bottom: none !important; }

/* a：內文連結改為帶下劃線的深墨紫 */
article a { color: #1e2a4a !important; text-decoration-color: rgba(30, 42, 74, 0.4); text-underline-offset: 3px; }
article a:hover { text-decoration-color: #c8a96a !important; color: #1e2a4a !important; }
/* CTA 按鈕（深底 + text-white）不該繼承 article 連結色 —— 否則與 bg-ink-900 navy 同色變隱形 */
article a.text-white, article a.text-white:hover,
main a.text-white, main a.text-white:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Dark mode article */
html.dark article h1, html.dark article h2, html.dark article h3 { color: #f0ede5 !important; }
html.dark article h2 { border-top-color: #5a4830 !important; }
html.dark article p, html.dark article li { color: #c8c4ba !important; }
html.dark article strong { color: #f5f3ee !important; }
html.dark article blockquote { background: #1e1e20 !important; color: #c8c4ba !important; }
html.dark article table { border-top-color: #2a2a2c !important; border-bottom-color: #2a2a2c !important; }
html.dark article th, html.dark article td { border-bottom-color: #242426 !important; }
html.dark article th { color: #9d998f !important; }
html.dark article a { color: #b5c1da !important; text-decoration-color: rgba(181, 193, 218, 0.4); }

/* ========= Theme toggle icons ========= */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* ========= Privacy mode / 防窺模式（敏感數字模糊）=========
   目標：老闆身邊有員工/客人時，瞬間把成本、毛利、薪資模糊；按住才暫時顯示。
   做法：攔截 Alpine 的 x-text 表達式屬性，凡是叫到 cost/margin/profit/wage 等都當敏感。
   不攔的項目：
     - price：定價/售價是給員工看的
     - revenue：營收是員工也看得到的（收銀）
   要額外遮的欄位加 .peek-blur class；要反模糊加 .peek-expose。
   純視覺層，資料不改，IndexedDB 不動。 */
body.peek-mode [x-text*="money"],
body.peek-mode [x-text*="pct"],
body.peek-mode [x-text*="margin"],
body.peek-mode [x-text*="profit"],
body.peek-mode [x-text*="wage"],
body.peek-mode [x-text*="salary"],
body.peek-mode [x-text*="bonus"],
body.peek-mode [x-text*="cost"],
body.peek-mode [x-text*="net"],
body.peek-mode [x-text*="splh"],
body.peek-mode [x-text*="bep"],
body.peek-mode [x-text*="Cost"],
body.peek-mode [x-text*="Profit"],
body.peek-mode [x-text*="Margin"],
body.peek-mode .peek-blur {
  filter: blur(7px) saturate(0.6) !important;
  transition: filter 180ms ease !important;
  cursor: help !important;
  user-select: none !important;
}
/* 按住暫顯（:active = 桌機按住滑鼠、手機長按）。
   為什麼不做 hover：桌機游標飄過就解模糊，員工晃一下就看見，遮了等於沒遮。 */
body.peek-mode [x-text*="money"]:active,
body.peek-mode [x-text*="pct"]:active,
body.peek-mode [x-text*="margin"]:active,
body.peek-mode [x-text*="profit"]:active,
body.peek-mode [x-text*="wage"]:active,
body.peek-mode [x-text*="salary"]:active,
body.peek-mode [x-text*="bonus"]:active,
body.peek-mode [x-text*="cost"]:active,
body.peek-mode [x-text*="net"]:active,
body.peek-mode [x-text*="splh"]:active,
body.peek-mode [x-text*="bep"]:active,
body.peek-mode [x-text*="Cost"]:active,
body.peek-mode [x-text*="Profit"]:active,
body.peek-mode [x-text*="Margin"]:active,
body.peek-mode .peek-blur:active {
  filter: blur(0) !important;
}
/* .peek-expose：白名單反模糊。售價/定價是給員工看的，但 x-text 裡用 money() 包成
   會被 [x-text*="money"] 攔到；加這個 class 就能把定價類元素從遮罩裡救出來。 */
body.peek-mode .peek-expose,
body.peek-mode .peek-expose:hover,
body.peek-mode .peek-expose:active {
  filter: none !important;
  cursor: auto !important;
  user-select: auto !important;
}
/* 輸入框的 value 內容也要護 — 表單編輯時 input type=number 的值會顯露
   只有當用戶 focus 進去時才清楚。避免員工看表單填充的數字。 */
body.peek-mode input[type="number"].peek-sensitive,
body.peek-mode input[inputmode="decimal"].peek-sensitive {
  -webkit-text-security: disc;
  text-security: disc;
}
body.peek-mode input[type="number"].peek-sensitive:focus,
body.peek-mode input[inputmode="decimal"].peek-sensitive:focus {
  -webkit-text-security: none;
  text-security: none;
}

/* ========= 班表列印（@media print） =========
   列印時只顯示 .print-shift-modal 裡的 .print-sheets-area；
   其他所有東西（app chrome、modal header/footer）通通藏掉。
   NOTE: visibility:hidden 必須 scope 到 body.printing-shift，
   否則會把菜卡列印（body.printing-cards）與一般 .print-only 報表全部變空白。 */
@media print {
  /* 頁面設定：A4、留 1.5cm 邊 */
  @page { size: A4; margin: 1.5cm; }
  /* 只在班表列印模式才把所有東西藏起來 */
  body.printing-shift * { visibility: hidden !important; }
  /* 只顯示列印區塊 */
  body.printing-shift .print-shift-modal .print-sheets-area,
  body.printing-shift .print-shift-modal .print-sheets-area * { visibility: visible !important; }
  /* 把列印區抽到頁面左上角 */
  .print-shift-overlay {
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  .print-shift-modal {
    box-shadow: none !important;
    border: 0 !important;
    max-height: none !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
  }
  .print-shift-modal .print-sheets-area {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }
  .print-shift-sheet {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
    box-shadow: none !important;
  }
  .print-shift-sheet.print-page-break { page-break-after: always; }
  /* 關掉互動 chrome */
  .no-print, .no-print * { display: none !important; }
  /* 深色模式 → 列印強制用白底黑字（不然會變成暗底） */
  html.dark .print-shift-sheet,
  html.dark .print-shift-sheet * {
    background: #fff !important;
    color: #111 !important;
    border-color: #bbb !important;
  }
}

/* 排班懶人包卡：bg 要在亮/暗模式都有足夠對比；暗模式下 ink-* 文字需額外提亮 */
.coverage-summary-card {
  background-color: rgba(0, 0, 0, 0.03);
}
html.dark .coverage-summary-card {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* 暗模式下提亮 ink-600/700/800 text，避免灰上加灰讀不到 */
html.dark .coverage-summary-card .text-ink-600 { color: #b8b4a9 !important; }
html.dark .coverage-summary-card .text-ink-700 { color: #d0cdc3 !important; }
html.dark .coverage-summary-card .text-ink-800 { color: #e6e2d9 !important; }
html.dark .coverage-summary-card .text-rose-700 { color: #d67686 !important; }
html.dark .coverage-summary-card .text-sage-800 { color: #9ab89e !important; }

/* Peek toggle button：開啟時眼睛閉起來，icon swap */
.peek-toggle .icon-eye-open { display: block; }
.peek-toggle .icon-eye-closed { display: none; }
body.peek-mode .peek-toggle .icon-eye-open { display: none; }
body.peek-mode .peek-toggle .icon-eye-closed { display: block; }
body.peek-mode .peek-toggle { color: #c8a96a; }

/* Blog sticky header & footer in dark mode */
html.dark header.sticky { background: rgba(20,20,22,0.85) !important; border-bottom-color: #2a2a2c !important; }
html.dark footer { background: #18181a !important; border-top-color: #2a2a2c !important; }

/* Blog article CTA：淺底深字，保留品牌深墨藍 icon + 按鈕 */
.blog-cta {
  background: #faf9f4 !important;
  border: 1px solid #e6e2d9 !important;
}
html.dark .blog-cta { background: #1e1e20 !important; border-color: #2a2a2c !important; }
html.dark .blog-cta h3 { color: #f0ede5 !important; }
html.dark .blog-cta p  { color: #c8c4ba !important; }

/* Article callouts dark mode（各文章內嵌樣式定義，需 !important 覆蓋）
   框線統一使用「暗金 aged brass #b8945c」提升輕奢華質感，底色各自保留辨識 */
html.dark article blockquote {
  background: #1c1f28 !important;
  color: #c8c4ba !important;
  border-left-color: #b8945c !important;
  border-left-width: 3px !important;
}
html.dark article blockquote strong { color: #f0ede5 !important; }
html.dark article .callout-green {
  background: #1c2620 !important;
  color: #a0c1aa !important;
  border-left-color: #b8945c !important;
  border-left-width: 3px !important;
}
html.dark article .callout-green strong { color: #dfb872 !important; }
html.dark article .callout-red {
  background: #2a1e22 !important;
  color: #e9a3b0 !important;
  border-left-color: #b8945c !important;
  border-left-width: 3px !important;
}
html.dark article .callout-red strong { color: #dfb872 !important; }
html.dark article .callout-amber,
html.dark article .callout-yellow {
  background: #2a2519 !important;
  color: #dfb872 !important;
  border-left-color: #b8945c !important;
  border-left-width: 3px !important;
}
html.dark article .callout-amber strong,
html.dark article .callout-yellow strong { color: #ead29a !important; }

/* 資料參考聲明（inline-style p，以 border-left + #c8a96a 特徵鎖定） */
html.dark article p[style*="#c8a96a"] {
  background: #1e1a12 !important;
  color: #c8c4ba !important;
  border-left-color: #b8945c !important;
}
html.dark article p[style*="#c8a96a"] strong { color: #dfb872 !important; }
html.dark article th { background: #1e1e20 !important; color: #c8c4ba !important; border-color: #2a2a2c !important; }
html.dark article td { border-color: #2a2a2c !important; color: #c8c4ba !important; }

/* TLDR 金色卡 (VAT/employer-labor) */
html.dark article .tldr {
  background: #1e1a12 !important;
  border-color: #5a4830 !important;
  color: #c8c4ba !important;
}
html.dark article .tldr strong { color: #dfb872 !important; }

/* 內聯淺灰卡（footnote / reference p） */
html.dark article p[style*="#faf9f4"] {
  background: #1e1a12 !important;
  color: #c8c4ba !important;
  border-color: #5a4830 !important;
}
html.dark article p[style*="#faf9f4"] strong { color: #dfb872 !important; }

/* 表格列內聯高亮 (tr style="background:#faf9f4") */
html.dark article tr[style*="#faf9f4"] > td {
  background: #1e1a12 !important;
  color: #f0ede5 !important;
  border-color: #5a4830 !important;
}
html.dark article tr[style*="#faf9f4"] > td > strong { color: #dfb872 !important; }

/* 部落格列表卡 / 文章 OG 圖 figure 的 cream 背景 */
html.dark figure[style*="#faf9f6"],
html.dark a[style*="#faf9f6"] { background: #141c2e !important; }

/* allergen 菜單範本 + 徽章 */
html.dark article .menu-sample {
  background: #2a2519 !important;
  border-color: #443826 !important;
  color: #ead29a !important;
}
html.dark article .allergen-badge {
  background: #332c1f !important;
  color: #ead29a !important;
  border-color: #5a4830 !important;
}

/* ========= Content list markers =========
   Why: Tailwind preflight 把所有 ul/ol 的 list-style 清掉，造成內文的項目清單
        看不到符號。在 <article> 範圍內還原記號（app/UI 不會受影響，因為 app
        沒用 <article>）。
   How: ul 用金色小圓點（::before 絕對定位，對齊首行）；ol 用 decimal + 金色
        ::marker。巢狀 li > ul/ol 縮排另外處理。
   ======================================================================== */
article ul {
  list-style: none;
  padding-left: 0;
  margin: 0.75rem 0;
}
article ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}
article ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  /* 0.78em 約對齊 line-height 1.8 下的首行 x-line 中點 */
  top: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c8a96a;
}
article ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
article ol > li {
  margin: 0.25rem 0;
  padding-left: 0.3rem;
}
article ol > li::marker {
  color: #8a6e2f;
  font-weight: 600;
}
/* 巢狀清單（li 內再放一層 ul/ol）— 縮減上下邊界避免鬆散 */
article li > ul,
article li > ol {
  margin: 0.3rem 0 0.3rem 0;
}
/* Dark mode：圓點改成暖金，ol marker 調亮避免吃進深藍底 */
html.dark article ul > li::before { background: #dfb872; }
html.dark article ol > li::marker { color: #dfb872; }