:root {
  --suite-bg: #f4f7fb;
  --suite-surface: #ffffff;
  --suite-ink: #162033;
  --suite-muted: #667085;
  --suite-line: #dfe5ee;
  --suite-primary: #2563eb;
  --suite-primary-dark: #1d4ed8;
  --suite-radius: 12px;
  --suite-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(37, 99, 235, .28) !important; outline-offset: 2px; }

.suite-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--suite-line);
  border-radius: 9px;
  color: var(--suite-ink);
  background: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.suite-link:hover { color: var(--suite-primary); border-color: #b8caf6; background: #fff; transform: translateY(-1px); }
.suite-link--dark { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.1); }
.suite-link--dark:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.18); }
.suite-link__mark { font-size: 16px; line-height: 1; }

* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border: 2px solid transparent; border-radius: 99px; background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ───────── 各工具主色：結構與元件一致，主色沿用工具中心卡片 ───────── */
body[data-tool="portal"]     { --tool-accent:#2563eb; --tool-accent-dark:#1d4ed8; --tool-accent-soft:#eaf1ff; }
body[data-tool="booking"]    { --tool-accent:#175cd3; --tool-accent-dark:#1849a9; --tool-accent-soft:#eaf1ff; }
body[data-tool="invitation"] { --tool-accent:#7f56d9; --tool-accent-dark:#6941c6; --tool-accent-soft:#f4f0ff; }
body[data-tool="messages"]   { --tool-accent:#039855; --tool-accent-dark:#027a48; --tool-accent-soft:#e7f8ef; }
body[data-tool="schedule"]   { --tool-accent:#e04f16; --tool-accent-dark:#b93815; --tool-accent-soft:#fff1eb; }

/* ───────── 統一頂欄 ───────── */
.suite-bar { position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:14px; min-height:60px; padding:8px 20px; background:#fff; border-bottom:1px solid var(--suite-line); box-shadow:0 1px 2px rgba(16,24,40,.03); }
.suite-brand { display:flex; align-items:center; gap:10px; color:var(--suite-ink); font-size:17px; font-weight:800; letter-spacing:-.01em; text-decoration:none; white-space:nowrap; cursor:pointer; }
.suite-brand:hover { color:var(--suite-ink); }
.suite-mark { display:grid; place-items:center; min-width:34px; height:34px; padding:0 6px; border-radius:10px; color:#fff; background:var(--tool-accent, var(--suite-primary)); font-size:14px; font-weight:800; line-height:1; }
.suite-tabs { display:flex; align-items:center; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.suite-tabs::-webkit-scrollbar { display:none; }
.suite-tabs a, .suite-tabs button { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; color:var(--suite-muted); background:transparent; border:0; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; cursor:pointer; }
.suite-tabs a:hover, .suite-tabs button:hover { color:var(--suite-ink); background:#f2f4f7; }
.suite-tabs a.active, .suite-tabs button.active { color:var(--tool-accent); background:var(--tool-accent-soft); }
.suite-bar__spacer { flex:1; }
.suite-bar__actions { display:flex; align-items:center; gap:8px; }
.suite-badge { padding:4px 9px; color:var(--tool-accent-dark); background:var(--tool-accent-soft); border-radius:99px; font-size:12px; font-weight:800; white-space:nowrap; }
@media (max-width:760px) {
  .suite-bar { flex-wrap:wrap; gap:8px; padding:8px 12px; }
  .suite-tabs { order:3; flex-basis:100%; }
  .suite-link__label { display:none; }
}

/* ───────── 統一按鈕（805、調度表等未使用 Bootstrap 的工具） ───────── */
.suite-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:8px 14px; color:var(--suite-ink); background:#fff; border:1px solid #d0d5dd; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; }
.suite-btn:hover { background:#f9fafb; border-color:#98a2b3; }
.suite-btn--primary { color:#fff; background:var(--tool-accent, var(--suite-primary)); border-color:var(--tool-accent, var(--suite-primary)); }
.suite-btn--primary:hover { background:var(--tool-accent-dark, var(--suite-primary-dark)); border-color:var(--tool-accent-dark, var(--suite-primary-dark)); }
.suite-btn--danger { color:#fff; background:#d92d20; border-color:#d92d20; }
.suite-btn--danger:hover { background:#b42318; border-color:#b42318; }

/* Bootstrap 工具（邀約、訊息範本）的主要按鈕改用工具主色 */
body[data-tool] .btn-primary { --bs-btn-bg:var(--tool-accent); --bs-btn-border-color:var(--tool-accent); --bs-btn-hover-bg:var(--tool-accent-dark); --bs-btn-hover-border-color:var(--tool-accent-dark); --bs-btn-active-bg:var(--tool-accent-dark); --bs-btn-active-border-color:var(--tool-accent-dark); --bs-btn-disabled-bg:var(--tool-accent); --bs-btn-disabled-border-color:var(--tool-accent); }
body[data-tool] .text-primary { color:var(--tool-accent) !important; }
body[data-tool] .bg-primary { background-color:var(--tool-accent) !important; }
body[data-tool] .btn-outline-primary { --bs-btn-color:var(--tool-accent); --bs-btn-border-color:var(--tool-accent); --bs-btn-hover-bg:var(--tool-accent); --bs-btn-hover-border-color:var(--tool-accent); --bs-btn-active-bg:var(--tool-accent-dark); --bs-btn-active-border-color:var(--tool-accent-dark); }

/* ───────── 提示訊息 ───────── */
.suite-toasts { position:fixed; right:20px; bottom:20px; z-index:2000; display:grid; gap:8px; justify-items:end; pointer-events:none; }
.suite-toast { max-width:min(420px, calc(100vw - 40px)); padding:12px 16px; color:#fff; background:#101828; border-radius:10px; box-shadow:0 10px 30px rgba(16,24,40,.22); font-size:14px; font-weight:600; line-height:1.5; opacity:0; transform:translateY(12px); transition:opacity .2s, transform .2s; }
.suite-toast.show { opacity:1; transform:none; }
.suite-toast--success { background:#067647; }
.suite-toast--warning { background:#b54708; }
.suite-toast--error { background:#b42318; }
@media (max-width:600px) { .suite-toasts { right:12px; left:12px; bottom:12px; justify-items:stretch; } .suite-toast { max-width:none; } }

/* ───────── 觸控裝置隱藏只適合滑鼠的功能（拖曳、滑鼠提示） ───────── */
@media (hover: none), (pointer: coarse) {
  .desktop-only { display: none !important; }
}

/* ───────── 點選移動模式的提示列 ───────── */
.suite-banner { position:fixed; left:50%; top:72px; z-index:1900; display:flex; align-items:center; gap:12px; flex-wrap:wrap; width:min(640px, calc(100% - 24px)); padding:10px 12px 10px 16px; color:#fff; background:#101828; border-radius:12px; box-shadow:0 14px 36px rgba(16,24,40,.3); transform:translateX(-50%); }
.suite-banner__text { flex:1 1 220px; font-size:14px; font-weight:700; line-height:1.5; }
.suite-banner__actions { display:flex; gap:6px; }
.suite-banner .suite-btn { min-height:34px; padding:6px 12px; font-size:13px; }

/* ───────── 確認視窗 ───────── */
.suite-confirm { width:min(420px, calc(100% - 32px)); padding:0; color:var(--suite-ink); border:0; border-radius:14px; box-shadow:0 24px 70px rgba(16,24,40,.28); }
.suite-confirm::backdrop { background:rgba(16,24,40,.5); }
.suite-confirm__body { padding:22px 22px 8px; }
.suite-confirm h2 { margin:0 0 8px; font-size:18px; font-weight:800; }
.suite-confirm p { margin:0; color:#475467; line-height:1.7; white-space:pre-line; }
.suite-confirm__actions { display:flex; justify-content:flex-end; gap:8px; padding:16px 22px 20px; }