/* ============================================================================
   Auspicious (吉利愛漆車體美研) — Bootstrap 5.3 theme
   Reproduces the original Tailwind design tokens & custom classes on Bootstrap.
   ============================================================================ */

/* ---- Design tokens (ported verbatim from the original build) ---- */
:root {
  --background: 220 15% 8%;
  --foreground: 40 20% 92%;
  --card: 220 12% 12%;
  --card-foreground: 40 20% 92%;
  --popover: 220 12% 14%;
  --popover-foreground: 40 20% 92%;
  --primary: 25 95% 53%;
  --primary-foreground: 220 15% 8%;
  --secondary: 220 10% 18%;
  --secondary-foreground: 40 20% 85%;
  --muted: 220 10% 16%;
  --muted-foreground: 220 10% 55%;
  --accent: 30 80% 50%;
  --accent-foreground: 220 15% 8%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 40 20% 92%;
  --border: 220 10% 20%;
  --input: 220 10% 22%;
  --ring: 25 95% 53%;
  --radius: .75rem;
  --gradient-primary: linear-gradient(135deg, hsl(25 95% 53%), hsl(35 100% 60%));
  --gradient-glow: linear-gradient(135deg, hsl(25 95% 53% / .2), hsl(35 100% 60% / .1));
  --shadow-glow: 0 0 40px hsl(25 95% 53% / .15);
}

/* ---- Map tokens onto Bootstrap 5.3 CSS variables (dark theme) ---- */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg: hsl(var(--background));
  --bs-body-color: hsl(var(--foreground));
  --bs-emphasis-color: hsl(var(--foreground));
  --bs-secondary-color: hsl(var(--muted-foreground));
  --bs-secondary-bg: hsl(var(--secondary));
  --bs-tertiary-bg: hsl(var(--muted));
  --bs-tertiary-color: hsl(var(--muted-foreground));
  --bs-border-color: hsl(var(--border));
  --bs-primary: hsl(var(--primary));
  --bs-primary-rgb: 249, 115, 22;
  --bs-link-color: hsl(var(--primary));
  --bs-link-color-rgb: 249, 115, 22;
  --bs-link-hover-color: hsl(35 100% 60%);
  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-sm: .5rem;
  --bs-body-font-family: "Noto Sans TC", "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, "Microsoft JhengHei", sans-serif;
  --bs-emphasis-color-rgb: 235, 232, 224;
}

/* ---- Base ---- */
body {
  font-family: var(--bs-body-font-family);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
  max-width: 100vw;
}

/* ============================================================================
   Ported custom classes (same names/behaviour as the original)
   ============================================================================ */
.glass-card {
  border: 1px solid hsl(var(--border) / .5);
  background-color: hsl(var(--card) / .8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.text-gradient {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: var(--gradient-primary);
}
.bg-gradient-primary { background-image: var(--gradient-primary); }
.glow-shadow { box-shadow: var(--shadow-glow); }

/* ============================================================================
   Colour helper classes (design tokens as utilities)
   ============================================================================ */
.text-foreground { color: hsl(var(--foreground)) !important; }
.text-muted-fg { color: hsl(var(--muted-foreground)) !important; }
.text-accent { color: hsl(var(--accent)) !important; }
.text-destructive { color: hsl(var(--destructive)) !important; }
.text-primary { color: hsl(var(--primary)) !important; }
.text-primary-fg { color: hsl(var(--primary-foreground)) !important; }

.bg-app { background-color: hsl(var(--background)) !important; }
.bg-card { background-color: hsl(var(--card)) !important; }
.bg-card-80 { background-color: hsl(var(--card) / .8) !important; }
.bg-secondary-2 { background-color: hsl(var(--secondary)) !important; }
.bg-secondary-50 { background-color: hsl(var(--secondary) / .5) !important; }
.bg-muted-2 { background-color: hsl(var(--muted)) !important; }
.bg-primary-10 { background-color: hsl(var(--primary) / .1) !important; }

.border-theme { border-color: hsl(var(--border)) !important; }
.border-primary-20 { border-color: hsl(var(--primary) / .2) !important; }

/* ============================================================================
   Component overrides so Bootstrap widgets match the original
   ============================================================================ */

/* Primary buttons = orange gradient with dark text (the site's main CTA look) */
.btn-primary,
.btn-gradient {
  --bs-btn-color: hsl(var(--primary-foreground));
  --bs-btn-hover-color: hsl(var(--primary-foreground));
  --bs-btn-active-color: hsl(var(--primary-foreground));
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  background-image: var(--gradient-primary);
  border: none;
  font-weight: 700;
}
.btn-primary:hover,
.btn-gradient:hover { opacity: .9; }

/* Outline / solid orange button (borders like the 會員登入 button) */
.btn-orange {
  --bs-btn-color: hsl(var(--primary));
  --bs-btn-border-color: hsl(var(--primary));
  --bs-btn-hover-color: hsl(var(--primary-foreground));
  --bs-btn-hover-bg: hsl(var(--primary));
  --bs-btn-hover-border-color: hsl(var(--primary));
  --bs-btn-active-bg: hsl(var(--primary));
  --bs-btn-border-radius: var(--radius);
  font-weight: 600;
}

/* Secondary/ghost button */
.btn-soft {
  --bs-btn-color: hsl(var(--secondary-foreground));
  --bs-btn-bg: hsl(var(--secondary));
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: hsl(var(--foreground));
  --bs-btn-hover-bg: hsl(var(--secondary) / .8);
  --bs-btn-hover-border-color: transparent;
}

/* Form controls in the dark theme */
.form-control,
.form-select {
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
  border-radius: calc(var(--radius) - .25rem);
}
.form-control::placeholder { color: hsl(var(--muted-foreground)); }
.form-control:focus,
.form-select:focus {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 .2rem hsl(var(--primary) / .25);
}
.form-check-input:checked { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.form-label { font-weight: 500; font-size: .875rem; color: hsl(var(--foreground)); }

/* Navbar (fixed, translucent dark) */
.navbar.site-nav {
  background-color: hsl(var(--background) / .8);
  border-bottom: 1px solid hsl(var(--border) / .5);
}
/* 模糊放在偽元素：backdrop-filter 直接放在 navbar 會變成 fixed 元素的定位基準，手機版的 offcanvas 選單會被限制在 navbar 56px 高度內 */
.navbar.site-nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-nav .nav-link {
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: color .15s;
}
.site-nav .nav-link:hover { color: hsl(var(--foreground)); }
.site-nav .nav-link.active { color: hsl(var(--primary)); }

/* Cards used for products / services */
.card {
  --bs-card-bg: hsl(var(--card) / .8);
  --bs-card-border-color: hsl(var(--border) / .5);
  --bs-card-color: hsl(var(--foreground));
  --bs-card-border-radius: var(--radius);
}

/* ============================================================================
   Small utilities needed to match the original layout
   ============================================================================ */
.page-wrap { padding-top: 6rem; padding-bottom: 4rem; }   /* pt-24 pb-16 */
.section-pad { padding-top: 4rem; padding-bottom: 4rem; } /* py-16 */
.aspect-square { aspect-ratio: 1 / 1; }
.min-vh-70 { min-height: 70vh; }
.max-w-7xl { max-width: 80rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-2xl { max-width: 42rem; }
.col-aside { width: 100%; }
@media (min-width: 992px) { .col-aside { width: 20rem; flex-shrink: 0; } }
@media (min-width: 576px) { .w-sm-auto { width: auto !important; } }
.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform .4s ease; }
.hover-zoom:hover img { transform: scale(1.05); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ring-primary { box-shadow: 0 0 0 2px hsl(var(--primary) / .5); }
.ring-primary-30 { box-shadow: 0 0 0 1px hsl(var(--primary) / .3); }
.cursor-pointer { cursor: pointer; }
.fw-black { font-weight: 900 !important; }
.grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.tracking-wide { letter-spacing: .1em; }
.tracking-widest { letter-spacing: .2em; }
.object-fit-cover { object-fit: cover; }
/* v11 E-42：flex 子元素可以縮到比內容窄（裡面的 text-truncate 才截得到）；原本只在 staff.css，後台、前台用到 .min-w-0 的地方都沒效果（點數兌換手機版點數被擠出卡片） */
.min-w-0 { min-width: 0; }

/* Floating contact button（外層 .contact-fab-wrap 固定在右下角、按鈕本身 position-static；v10 起加上 iPhone 右側／底部安全區） */
.contact-fab-wrap { position: fixed; right: calc(24px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1040; }
.contact-fab {
  position: fixed; right: calc(24px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background-image: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  border: none; box-shadow: 0 8px 24px hsl(var(--primary) / .4);
  transition: transform .2s;
}
.contact-fab:hover { transform: scale(1.1); color: hsl(var(--primary-foreground)); }

/* Hero overlay helper */
.hero-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, hsl(var(--background) / .7), hsl(var(--background)));
}
/* Booking calendar + form styles (Bootstrap-compatible, uses theme tokens) */

/* Calendar day cell */
.bk-day {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: .5rem;
  font-weight: 500;
  font-size: .85rem;
  position: relative;
  background: transparent;
  color: hsl(var(--foreground));
  transition: background .15s, box-shadow .15s;
}
.bk-day:hover:not(:disabled) { background: hsl(var(--secondary)); }
.bk-day:disabled { cursor: not-allowed; }
.bk-day.past { color: hsl(var(--muted-foreground) / .3); }
.bk-day.selected { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 0 0 2px hsl(var(--primary) / .5); }
.bk-day.partial { color: hsl(var(--accent)); }
.bk-day.holiday { color: hsl(var(--destructive) / .7); }
.bk-day.full { color: hsl(var(--destructive) / .6); text-decoration: line-through; }
.bk-day.noslots { color: hsl(var(--muted-foreground) / .4); }
.bk-day.today:not(.selected) { box-shadow: 0 0 0 1px hsl(var(--primary) / .3); }

/* status dot / holiday marker inside a day */
.bk-mark {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
}
.bk-mark.dot { width: 4px; height: 4px; border-radius: 50%; }
.bk-mark.dot-accent { background: hsl(var(--accent)); }
.bk-mark.dot-full { background: hsl(var(--destructive)); }
.bk-mark.rest { bottom: 2px; font-size: 9px; font-weight: 700; color: hsl(var(--destructive) / .7); }

/* Time-slot button：未選 = 橘色外框，選到 = 橘色實心＋勾＋光暈 */
.bk-slot {
  padding: .5rem .9rem;
  border: 1px solid hsl(var(--primary) / .5);
  border-radius: .5rem;
  font-weight: 600;
  font-size: .9rem;
  background: hsl(var(--primary) / .08);
  color: hsl(var(--primary));
  transition: background .15s, box-shadow .15s, transform .15s;
}
.bk-slot:hover:not(:disabled):not(.selected) { background: hsl(var(--primary) / .2); border-color: hsl(var(--primary)); }
.bk-slot.selected {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 0 0 3px hsl(var(--primary) / .35), 0 6px 18px hsl(var(--primary) / .4);
  transform: scale(1.06);
}
.bk-slot.selected::before { content: '✓ '; }
.bk-slot:disabled { background: hsl(var(--muted)); border-color: transparent; color: hsl(var(--muted-foreground) / .4); text-decoration: line-through; cursor: not-allowed; }

/* Add-on checkbox tile：未選 = 灰色＋空框，選到 = 橘色高亮＋勾 */
.bk-addon {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: .5rem;
  border: 1px solid hsl(var(--border) / .6);
  background: hsl(var(--secondary) / .5);
  color: hsl(var(--foreground));
  font-size: .9rem; font-weight: 500;
  transition: background .15s, border-color .15s, box-shadow .15s; cursor: pointer; user-select: none;
}
.bk-addon:hover:not(.selected) { background: hsl(var(--secondary) / .8); border-color: hsl(var(--primary) / .5); }
.bk-addon .bk-check { width: 1rem; height: 1rem; border-radius: .25rem; border: 1px solid hsl(var(--muted-foreground) / .6); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; flex: none; }
.bk-addon.selected {
  background: hsl(var(--primary) / .2);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  font-weight: 700;
  box-shadow: 0 0 0 2px hsl(var(--primary) / .3);
}
.bk-addon.selected .bk-check { background: var(--gradient-primary); border-color: transparent; color: hsl(var(--primary-foreground)); }
.bk-addon.selected .bk-check::before { content: '✓'; font-weight: 800; }

/* weekday header cell */
.bk-wd { text-align: center; font-size: .72rem; color: hsl(var(--muted-foreground)); font-weight: 500; padding: .5rem 0; }

/* ===== 預約頁補充（分頁、月曆狀態） ===== */
.bk-tabs .bk-tab { font-weight: 600; }
.bk-legend { display:inline-block; width:14px; height:14px; border-radius:4px; }
.bk-legend.bk-avail { background: hsl(var(--primary) / .25); border:1px solid hsl(var(--primary) / .6); }
.bk-legend.bk-partial { background: hsl(45 95% 55% / .25); border:1px solid hsl(45 95% 55% / .7); }
.bk-legend.bk-full { background: hsl(var(--destructive) / .25); border:1px solid hsl(var(--destructive) / .6); }
.bk-legend.bk-holiday { background: hsl(var(--secondary)); color: hsl(var(--destructive)); font-size:.65rem; text-align:center; line-height:14px; }
.bk-wd { text-align:center; font-size:.75rem; color: hsl(var(--muted-foreground)); padding:.25rem 0; }
.bk-day { aspect-ratio:1; border-radius:.6rem; border:1px solid hsl(var(--border) / .5); background: hsl(var(--secondary) / .3); color: hsl(var(--foreground)); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.9rem; font-weight:600; transition: all .15s; }
.bk-day:not([disabled]):hover { border-color: hsl(var(--primary)); transform: translateY(-1px); }
.bk-day-avail { background: hsl(var(--primary) / .18); border-color: hsl(var(--primary) / .5); }
.bk-day-partial { background: hsl(45 95% 55% / .18); border-color: hsl(45 95% 55% / .6); }
.bk-day-full { background: hsl(var(--destructive) / .18); border-color: hsl(var(--destructive) / .5); color: hsl(var(--muted-foreground)); }
.bk-day-holiday { color: hsl(var(--destructive)); background: hsl(var(--secondary) / .5); }
.bk-day-holiday .bk-num { display:none; }
.bk-day-past, .bk-day-none { opacity:.35; }
.bk-day-selected { border-color: hsl(var(--primary)) !important; box-shadow: 0 0 0 2px hsl(var(--primary) / .5); background: hsl(var(--primary) / .3); }
.bk-day-today .bk-num { text-decoration: underline; text-decoration-color: hsl(var(--primary)); text-underline-offset: 3px; }
.bk-lbl { font-size:.7rem; }

/* ===== 會員中心 / 抽獎 ===== */
/* v11 追加 V25：抽獎舞台、動畫、結果卡改在 assets/css/lucky_garage.css（有進行中的活動才載入）；原本的 🚪 搖晃動畫（draw-shake）拿掉 */
.draw-prize { background: hsl(var(--secondary) / .4); border: 1px solid hsl(var(--border) / .5); }
/* v11 E-43：車名／獎項說明最多兩行，按「看全文」展開（assets/js/profile.js） */
.draw-prize .draw-clamp { overflow-wrap: anywhere; }
.draw-prize.open .draw-clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
.draw-prize .draw-more { text-decoration: none; }
#pfTabs .nav-link { color: hsl(var(--muted-foreground)); font-weight:600; border:1px solid transparent; }
#pfTabs .nav-link.active { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); }
.badge-soft { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight:500; }
.badge-primary-soft { background: hsl(var(--primary) / .2); color: hsl(var(--primary)); border:1px solid hsl(var(--primary) / .4); }
.badge-info-soft { background: rgba(59,130,246,.2); color:#60a5fa; border:1px solid rgba(59,130,246,.4); }
.badge-success-soft { background: rgba(34,197,94,.2); color:#4ade80; border:1px solid rgba(34,197,94,.4); }
.badge-danger-soft { background: hsl(var(--destructive) / .2); color: hsl(0 72% 65%); border:1px solid hsl(var(--destructive) / .4); }
/* v11 驗證（畫面）：原本只在 admin.css，前台沒載入 →「✍️ 金額異動待簽」「30 天內到期」徽章在會員專區、施工紀錄頁沒有底色和框，看起來像一般文字 */
.badge-accent-soft { background: hsl(var(--accent) / .2); color: hsl(var(--accent)); border: 1px solid hsl(var(--accent) / .4); }
/* v11 驗證（畫面）：會員專區分頁（9 個）在手機原本是一條要左右滑的膠囊列，只看得到 3 個、也沒有「還有更多」的提示（手機不顯示捲軸）→
   575px 以下改成三欄排好、全部看得到（profile.js 的 revealTab 在不用捲動時自動不做事） */
@media (max-width: 575.98px) {
  #pfTabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible !important; }
  #pfTabs .nav-link { width: 100%; padding: .5rem .25rem; font-size: .9rem; }
}
.nav-pills .nav-link { color: hsl(var(--muted-foreground)); }
.nav-pills .nav-link.active { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); }
.alert-warning { --bs-alert-bg: hsl(45 95% 55% / .15); --bs-alert-border-color: hsl(45 95% 55% / .4); --bs-alert-color: hsl(45 95% 75%); }
.alert-success { --bs-alert-bg: rgba(34,197,94,.15); --bs-alert-border-color: rgba(34,197,94,.4); --bs-alert-color:#86efac; }
.alert-danger { --bs-alert-bg: hsl(var(--destructive) / .15); --bs-alert-border-color: hsl(var(--destructive) / .4); --bs-alert-color: hsl(0 72% 75%); }
.dropdown-menu { --bs-dropdown-bg: hsl(var(--card)); --bs-dropdown-color: hsl(var(--foreground)); --bs-dropdown-link-color: hsl(var(--foreground)); --bs-dropdown-link-hover-bg: hsl(var(--secondary)); --bs-dropdown-link-hover-color: hsl(var(--foreground)); --bs-dropdown-border-color: hsl(var(--border)); }

/* v10：Bootstrap 的 d-flex／d-block 等工具類是 display:… !important，會把 hidden 屬性蓋掉（元素照樣顯示）。
   兩者同時出現時一律以 hidden 為準（例：施工人員首頁的「膜料成本待填」提示原本對所有人都顯示出來） */
[hidden][class] { display: none !important; }

/* v10：Modal 用 <form> 包住 modal-body 與 modal-footer 時，form 不是 flex 容器，
   scrollable／手機全螢幕的 Modal 內容一多，modal-body 不會捲動、底部按鈕被切掉（施工人員手機「臨時來客開單」的開單鈕）。
   讓這層 form 接手 modal-content 的直向排版：body 自己捲動、footer 固定在底部看得到 */
.modal-dialog-scrollable .modal-content > form,
.modal-fullscreen .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body,
.modal-fullscreen .modal-content > form > .modal-body { overflow-y: auto; }
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .modal-fullscreen-sm-down .modal-content > form > .modal-body { overflow-y: auto; }
  /* 手機瀏覽器的網址列／工具列會吃掉高度：全螢幕 Modal 用實際可見高度，底部按鈕留出 iPhone 底部安全區 */
  @supports (height: 100dvh) { .modal-fullscreen-sm-down { height: 100dvh; } }
  .modal-fullscreen-sm-down .modal-footer { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
}

/* ============================================================================
   v10 手機安全區與瀏覽器工具列（全站：前台、會員專區、商城、施工人員、後台、財務入口共用這份 theme.css）
   1. 手機的 100vh＝網址列收起時的「最大」高度，網址列／工具列展開時底部那一截在工具列底下 →
      撐滿畫面的高度用 100dvh（不支援的舊瀏覽器退回 100vh 或 top:0＋bottom:0）；頁面裡自己捲動的區塊（max-height）用 svh
      （工具列展開時的最小高度，一定放得下，也不會隨工具列伸縮跳動）
   2. head.php 全站 viewport-fit=cover：畫面延伸到瀏海／圓角／Home 指示條底下，env(safe-area-inset-*) 才有值。
      一般內容的左右由 body 留白（橫拿時不被瀏海切到）；固定元素（上方列、側欄、浮動鈕、Modal、提示）各自加對應方向的 inset
   3. 靠底部的固定元素 bottom 一律「原本距離＋env(safe-area-inset-bottom)」；頁面底部要留出固定元素的高度，
      捲到最底時最後一個按鈕／欄位不會被蓋住（前台頁尾留出聯繫我們浮動鈕、後台內容區留出 Home 指示條）
   ============================================================================ */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* 前台固定上方列：瀏海／狀態列（上方 inset）與橫拿時的左右 inset；內容區 main 的上方留白在 layouts/front.php 一起加 */
.navbar.site-nav { padding-top: calc(var(--bs-navbar-padding-y) + env(safe-area-inset-top)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* 前台手機選單（navbar-expand-lg 收合時才是 offcanvas）：高度用實際可見高度，最後一項與 Home 指示條保持距離 */
@media (max-width: 991.98px) {
  .site-nav .offcanvas { padding-right: env(safe-area-inset-right); }
  @supports (height: 100dvh) { .site-nav .offcanvas { height: 100dvh; } }
  .site-nav .offcanvas-header { padding-top: calc(var(--bs-offcanvas-padding-y) + env(safe-area-inset-top)); }
  .site-nav .offcanvas-body { padding-bottom: calc(var(--bs-offcanvas-padding-y) + env(safe-area-inset-bottom)); }
}
/* 前台頁尾：底部留 Home 指示條；手機寬度再留出右下角聯繫我們浮動鈕（24px 間距＋56px 按鈕＋1rem），捲到最底時頁尾最後一行不會被蓋住 */
.site-footer { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
/* v11 驗證（畫面）：前台（客人看的頁面）段落最後一行不要只剩一個字（感。／證／繫…）；只有前台版面（.site-nav 後面的 main 與頁尾），
   不支援的瀏覽器照舊斷行，不影響版面 */
.site-nav ~ main, .site-footer { text-wrap: pretty; }
@media (max-width: 767.98px) { .site-footer { padding-bottom: calc(24px + 56px + 1rem + env(safe-area-inset-bottom)); } }

/* 提示訊息（partials/toast.php）：右上角的避開瀏海與右側圓角（施工人員版改在底部，見 staff.css） */
#toastArea.top-0 { top: env(safe-area-inset-top) !important; }
#toastArea.end-0 { right: env(safe-area-inset-right) !important; }

/* Modal：一般對話框上下避開瀏海與 Home 指示條（.modal 的內容區＝安全區，scrollable／centered 的高度都以它計算）；
   全螢幕 Modal 底色延伸到邊緣，改由標題列、底部按鈕列自己留白（上方 v10 規則已處理手機全螢幕的底部按鈕列） */
.modal { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.modal:has(> .modal-fullscreen) { padding-top: 0; padding-bottom: 0; }
.modal-fullscreen .modal-header { padding-top: max(1rem, calc(env(safe-area-inset-top) + .5rem)); }
.modal-fullscreen .modal-footer { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
@media (max-width: 575.98px) {
  .modal:has(> .modal-fullscreen-sm-down) { padding-top: 0; padding-bottom: 0; }
  .modal-fullscreen-sm-down .modal-header { padding-top: max(1rem, calc(env(safe-area-inset-top) + .5rem)); }
}
/* v11 追加 V29（報告 5-1、5-3）：送出中的連結、非按鈕元素（app.js api() 加 .is-busy；按鈕是直接停用）：變淡、游標轉圈，點了不理 */
.is-busy { opacity: .65; cursor: progress; }
/* 9/29 首頁施工日誌輪播（app/views/front/home.php）：下方點點＝Bootstrap 的 carousel-indicators，改成不疊在內容上的圓點，目前那則拉長；
   上一則／下一則是圓形按鈕；摘要、心情小語留兩行（每張一樣高，換張時下面的內容不會跳） */
.home-log-dots { position: static; margin: 0; padding: 0; gap: .4rem; flex-wrap: wrap; }
.home-log-dots [data-bs-target] { box-sizing: border-box; width: .5rem; height: .5rem; margin: 0; border: 0; border-radius: 1rem; background-color: hsl(var(--primary) / .35); background-clip: border-box; opacity: 1; transition: width .3s ease, background-color .3s ease; }
.home-log-dots .active { width: 1.25rem; background-color: hsl(var(--primary)); }
.home-log-nav { width: 2.5rem; height: 2.5rem; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.home-log-summary { min-height: 3em; }
.home-log-mood { min-height: calc(3em + 1rem); }
@media (prefers-reduced-motion: reduce) { .home-log-dots [data-bs-target] { transition: none; } }
/* 施工日誌頁：從首頁輪播點進來捲到那一則（避開上方固定的選單列），那一則加外框 */
.nl-log { scroll-margin-top: 5.5rem; }
.nl-log:target { box-shadow: 0 0 0 2px hsl(var(--primary) / .8); }