/**
 * jubo-theme.css — Jubo 完整設計系統主題層
 *
 * infuture 後台管理系統 v2 (2026-05-16)
 *
 * 載入順序（v2 頁面）：
 *   1. tokens.css       Design Token 唯一來源（含 orange brand）
 *   2. base.css         全域 Reset
 *   3. components.css   v1 共用元件（infuture 風格）
 *   4. jubo-theme.css   ← 本檔（覆寫 brand color + chrome + 新增 Jubo 元件）
 *   5. {page}-jubo.css  頁面 scoped 樣式
 *
 * 範圍：
 * - Token 層：brand 從 #FF6B35 改回 Tiffany 青綠 #0abab5
 * - Chrome 層：AppBar / NavRail / PageHeader 改 Jubo 規範
 * - 新元件：.jc-filterbar / .jc-spacer / Card with .card-head/.card-foot / Chip 標準狀態色
 *
 * 與 v1（橘色版）共存原則：
 * - 不修改 components.css；只在此檔覆寫
 * - vendors.html（v1）不載入此檔；vendors-jubo.html（v2）載入此檔
 */


/* ═════════════════════════════════════════════════════════════
 * TOKEN OVERRIDE — Brand 改為 infuture 黃 #FFCC00
 * 註：黃色與白色對比過低，brand-primary 主要用於背景；
 *     文字／chip 字色一律使用 --color-brand-primary-dark（yellow-700 金棕）。
 *     下面有對應的對比覆寫處理 primary 按鈕、AppBar 徽章、登入徽章。
 * ═════════════════════════════════════════════════════════════ */

:root {
  /* Semantic brand 重導向 → yellow */
  --color-brand-primary:        var(--color-yellow-500);
  --color-brand-primary-hover:  var(--color-yellow-600);
  --color-brand-primary-dark:   var(--color-yellow-700);
  --color-brand-primary-light:  var(--color-yellow-50);    /* 卡片/active 淡底 */
  --color-brand-primary-subtle: var(--color-yellow-100);   /* chip 填底 */

  /* tag-brand 改為 yellow rgba（黃色濃度淡，alpha 稍提升避免太白）*/
  --color-tag-brand-bg:  rgba(255, 204, 0, 0.20);

  /* brand tint 改為 yellow rgba */
  --color-brand-primary-tint-04: rgba(255, 204, 0, 0.08);
  --color-brand-primary-tint-06: rgba(255, 204, 0, 0.10);
  --color-brand-primary-tint-08: rgba(255, 204, 0, 0.14);
  --color-brand-primary-tint-12: rgba(255, 204, 0, 0.22);

  /* nav rail active 改為 yellow tint */
  --color-surface-rail-active: rgba(255, 204, 0, 0.18);

  /* 頁面底色（卡片之間的 paper 後背景）→ 淡黃 */
  --color-surface-tinted: var(--color-yellow-50);

  /* 圖表色 → yellow */
  --chart-primary:   var(--color-yellow-500);
  --chart-secondary: var(--color-yellow-400);
}


/* ─────────────────────────────────────────────────────────────
 * 對比覆寫：黃底元件需深字（白字在黃底對比 ~1.6:1，不可讀）
 * ───────────────────────────────────────────────────────────── */

.jc-btn.primary,
.jc-btn.primary:hover,
.jc-btn.primary:focus {
  color: var(--color-text);
}
.jc-btn.primary .material-symbols-outlined {
  color: var(--color-text);
}

.jc-appbar .brand-mark {
  color: var(--color-text);
}

.jc-login-card .login-brand .brand-mark {
  color: var(--color-text);
}


/* ═════════════════════════════════════════════════════════════
 * CHROME OVERRIDE — AppBar
 * Jubo 規範：64px、brand mark + brand name + spacer + iconbtn 群 + me 膠囊
 * ═════════════════════════════════════════════════════════════ */

.jc-appbar {
  gap: var(--spacing-md);
}

.jc-appbar .brand-mark {
  /* 與 v1 同；色已透過 token override 變青綠 */
}

.jc-appbar .brand-sub {
  margin-left: var(--spacing-xs);
  padding-left: var(--spacing-md);
  border-left: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
}

/* Icon button 群（Jubo AppBar 右側） */
.jc-appbar .iconbtn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast);
  background: transparent;
  border: none;
}

.jc-appbar .iconbtn:hover {
  background: var(--color-surface-hover);
}

.jc-appbar .iconbtn .material-symbols-outlined {
  font-size: 22px;
}

/* me 膠囊（Jubo AppBar 個人帳號區） */
.jc-appbar .me {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px var(--spacing-sm);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.jc-appbar .me:hover {
  background: var(--color-surface-hover);
}

.jc-appbar .me-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: #cfd8dc;
  color: var(--color-gray-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
}

.jc-appbar .me-name {
  margin-right: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.jc-appbar .me .material-symbols-outlined {
  color: var(--color-text-tertiary);
  font-size: 18px;
}


/* ═════════════════════════════════════════════════════════════
 * CHROME OVERRIDE — NavRail
 * Jubo 規範：72px 寬、垂直 icon + 標籤（雙行排版）
 * ═════════════════════════════════════════════════════════════ */

.jc-rail {
  width: var(--layout-sidebar-width); /* 72px */
  padding: var(--spacing-sm) 6px;
  gap: 0;
  align-items: stretch;
}

.jc-rail .rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 0;
  border-radius: var(--radius-md);
  font-size: 11px;
  line-height: 1.27;
  text-align: center;
}

.jc-rail .rail-item .material-symbols-outlined {
  font-size: 24px;
  margin-bottom: 2px;
}

/* Jubo NavRail 不顯示 SECTION 標籤（infuture v1 有，這裡隱藏） */
.jc-rail-section {
  display: none;
}


/* ═════════════════════════════════════════════════════════════
 * CHROME OVERRIDE — App Layout
 * Jubo 主背景為 surface-tinted（paper 後背景）
 * ═════════════════════════════════════════════════════════════ */

.jc-app {
  background: var(--color-surface-tinted);
}


/* ═════════════════════════════════════════════════════════════
 * PAGEHEADER — Jubo 規範 compact 變體
 * 高 64px、單行 ph-meta（title + sub）+ 右側 ph-actions
 * ═════════════════════════════════════════════════════════════ */

.jc-pageheader.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--layout-pageheader-height-compact);
  padding: 0 var(--spacing-lg);
  margin: 0 calc(-1 * var(--spacing-lg)) var(--spacing-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.jc-pageheader.compact .ph-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jc-pageheader.compact .ph-name {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.2;
}

.jc-pageheader.compact .ph-sub {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.jc-pageheader.compact .ph-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}


/* ═════════════════════════════════════════════════════════════
 * FILTERBAR — Jubo 規範
 * 一條橫向篩選列，含多個 group + spacer + 次動作
 * ═════════════════════════════════════════════════════════════ */

.jc-filterbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.jc-filterbar .group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
}

.jc-filterbar .ctl-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px var(--spacing-sm);
  background: var(--color-brand-primary-tint-08);
  color: var(--color-text);
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.jc-filterbar .ctl-mini:hover {
  background: var(--color-brand-primary-tint-12);
}

.jc-filterbar .ctl-mini .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-text-tertiary);
}

.jc-spacer {
  flex: 1;
}


/* ═════════════════════════════════════════════════════════════
 * CARD — Jubo 規範（card-head + card-foot）
 * ═════════════════════════════════════════════════════════════ */

.jc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0;
  /* Jubo 預設無陰影 */
  box-shadow: var(--shadow-none);
}

.jc-card.no-border {
  border: none;
}

.jc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.jc-card-body {
  padding: var(--spacing-md);
}

.jc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}


/* ═════════════════════════════════════════════════════════════
 * BUTTON — Jubo 規範微調
 * 沿用 components.css 大部分；Jubo 的 .small 較緊湊
 * ═════════════════════════════════════════════════════════════ */

.jc-btn.small {
  height: 32px;
  padding: 0 var(--spacing-sm);
  font-size: var(--font-size-caption);
}


/* ═════════════════════════════════════════════════════════════
 * TABLE — Jubo 規範
 * 表頭背景 surface-table-head、無 row hover brand tint（用 surface-hover）
 * ═════════════════════════════════════════════════════════════ */

.jc-table thead th {
  background: var(--color-surface-table-head);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-caption);
  text-transform: none;
  letter-spacing: 0;
}

.jc-table tbody tr:hover {
  background: var(--color-surface-hover);
}

.jc-table .row-action {
  width: 50px;
  text-align: center;
  color: var(--color-text-muted);
  cursor: pointer;
}

.jc-table .row-action:hover {
  color: var(--color-text);
}


/* ═════════════════════════════════════════════════════════════
 * CHIP — Jubo 標準狀態色慣例
 * components.css 已定義；此處只加強說明性 alias 與 outlined 行為
 * ═════════════════════════════════════════════════════════════ */
/* （沿用 components.css 既有 .jc-chip 與 6 色 variant）*/


/* ═════════════════════════════════════════════════════════════
 * MODAL — Jubo 規範
 * components.css 已是 480px max-width，本檔不再覆寫
 * ═════════════════════════════════════════════════════════════ */
/* （沿用 components.css 既有 .jc-modal）*/


/* ═════════════════════════════════════════════════════════════
 * STATCARD — Jubo domain（dashboard KPI 卡）
 * 規範來源：design-system/components/StatCard.md
 * ═════════════════════════════════════════════════════════════ */

.jc-stat {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-none);
}

.jc-stat .lbl {
  font-size: var(--font-size-caption);
  color: var(--color-text-body);
  margin-bottom: var(--spacing-xs);
  padding-right: 40px; /* 預留 stat-icon 空間 */
  line-height: 1.4;
}

.jc-stat .val {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 36px;
  margin-bottom: var(--spacing-xs);
}

.jc-stat .sub {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* 右上角的 stat icon */
.jc-stat .stat-icon {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
}

.jc-stat .stat-icon .material-symbols-outlined {
  font-size: 20px;
}

/* icon 變體（依語意配色，使用 chip 色系統）*/
.jc-stat .stat-icon.brand  { background: var(--color-brand-primary-tint-12); color: var(--color-brand-primary-dark); }
.jc-stat .stat-icon.green  { background: var(--color-tag-green-bg);  color: var(--color-tag-green-fg); }
.jc-stat .stat-icon.amber  { background: var(--color-tag-amber-bg);  color: var(--color-tag-amber-fg); }
.jc-stat .stat-icon.red    { background: var(--color-tag-red-bg);    color: var(--color-tag-red-fg); }
.jc-stat .stat-icon.blue   { background: var(--color-tag-blue-bg);   color: var(--color-tag-blue-fg); }
.jc-stat .stat-icon.grey   { background: var(--color-tag-grey-bg);   color: var(--color-tag-grey-fg); }


/* ═════════════════════════════════════════════════════════════
 * AMOUNT CARD — domain new（dashboard 大金額卡）
 * Jubo 風格：白底 + 左側 4px 色條 + 大幣值
 * ═════════════════════════════════════════════════════════════ */

.jc-amount-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  padding-left: calc(var(--spacing-lg) + 4px);
  overflow: hidden;
}

.jc-amount-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-brand-primary);
}

.jc-amount-card.green::before  { background: var(--color-green-700); }
.jc-amount-card.blue::before   { background: var(--color-blue-700); }
.jc-amount-card.amber::before  { background: var(--color-amber-600); }
.jc-amount-card.red::before    { background: var(--color-status-abnormal); }

.jc-amount-card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.jc-amount-card .lbl {
  font-size: var(--font-size-body);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
}

.jc-amount-card .head-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary-tint-12);
  color: var(--color-brand-primary-dark);
}

.jc-amount-card.green .head-icon { background: var(--color-tag-green-bg); color: var(--color-tag-green-fg); }
.jc-amount-card.blue  .head-icon { background: var(--color-tag-blue-bg);  color: var(--color-tag-blue-fg); }
.jc-amount-card.amber .head-icon { background: var(--color-tag-amber-bg); color: var(--color-tag-amber-fg); }
.jc-amount-card.red   .head-icon { background: var(--color-tag-red-bg);   color: var(--color-tag-red-fg); }

.jc-amount-card .head-icon .material-symbols-outlined {
  font-size: 20px;
}

.jc-amount-card .val {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-dark);
  line-height: 1.2;
  margin-bottom: var(--spacing-xs);
  font-variant-numeric: tabular-nums;
}

.jc-amount-card.green .val { color: var(--color-green-800); }
.jc-amount-card.blue  .val { color: var(--color-blue-800); }
.jc-amount-card.amber .val { color: var(--color-amber-700); }
.jc-amount-card.red   .val { color: var(--color-status-abnormal-text); }

.jc-amount-card .sub {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  line-height: 1.4;
}


/* ═════════════════════════════════════════════════════════════
 * QUICK ACTION CARD — domain new（dashboard 快速操作卡）
 * Jubo 風格：clean Card + icon + 標題 + sub + text-brand CTA
 * ═════════════════════════════════════════════════════════════ */

.jc-quick-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.jc-quick-card .head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.jc-quick-card .head-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-brand-primary-tint-12);
  color: var(--color-brand-primary-dark);
  flex-shrink: 0;
}

.jc-quick-card .head-icon .material-symbols-outlined {
  font-size: 22px;
}

.jc-quick-card h3 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.jc-quick-card .sub {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

.jc-quick-card .cta {
  align-self: flex-start;
}


/* ═════════════════════════════════════════════════════════════
 * PILLBAR — segmented control（quote-review 用）
 * 規範：design-system/components/Pillbar.md（沿用 Jubo 命名）
 * ═════════════════════════════════════════════════════════════ */

.jc-pillbar {
  display: inline-flex;
  padding: 4px;
  background: var(--color-surface-app-alt);
  border-radius: var(--radius-full);
  gap: 2px;
}

.jc-pillbar .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border: none;
}

.jc-pillbar .pill:hover:not(.active) {
  background: var(--color-surface-hover);
}

.jc-pillbar .pill.active {
  background: var(--color-surface);
  color: var(--color-brand-primary-dark);
  box-shadow: var(--shadow-sm);
}

.jc-pillbar .pill .count {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  opacity: 0.7;
}


/* ═════════════════════════════════════════════════════════════
 * THREAD — domain（跨團隊討論串，quote-review 重用為審核討論）
 * 規範：design-system/components/Thread.md
 * ═════════════════════════════════════════════════════════════ */

.jc-thread {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.jc-thread .post {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.jc-thread .post .head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.jc-thread .post .head .name {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.jc-thread .post .head .role {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.jc-thread .post .head .time {
  margin-left: auto;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.jc-thread .post .body {
  font-size: var(--font-size-body);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-sm);
}

.jc-thread .post .meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.jc-thread .replies {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  padding-left: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.jc-thread .reply {
  background: var(--color-surface-hover);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

.jc-thread .reply .head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.jc-thread .reply .head .name {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.jc-thread .reply .head .time {
  margin-left: auto;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.jc-thread .reply .body {
  font-size: var(--font-size-caption);
  color: var(--color-text-body);
  line-height: var(--line-height-snug);
}


/* ═════════════════════════════════════════════════════════════
 * PERMISSION TABLE — domain（settings 用戶權限矩陣）
 * 規範：design-system/components/PermissionTable.md
 * ═════════════════════════════════════════════════════════════ */

.jc-perm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--font-size-body);
}

.jc-perm-table thead th {
  background: var(--color-surface-table-head);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-caption);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.jc-perm-table thead th:first-child {
  text-align: left;
  min-width: 180px;
}

.jc-perm-table tbody td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.jc-perm-table tbody tr:last-child td {
  border-bottom: none;
}

.jc-perm-table tbody td:first-child {
  text-align: left;
}

/* 分類列（一個權限分組的標題列）*/
.jc-perm-table .perm-cat td {
  background: var(--color-surface-tinted);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-align: left;
  font-size: var(--font-size-body);
}

/* 權限指示 icon */
.jc-perm-table .perm-yes {
  color: var(--color-status-normal-text);
  font-size: 20px;
}

.jc-perm-table .perm-no {
  color: var(--color-text-disabled);
  font-size: 20px;
  opacity: 0.4;
}


/* ═════════════════════════════════════════════════════════════
 * LOGIN CARD — chrome（login 頁置中卡）
 * 規範：design-system/components/LoginCard.md
 * ═════════════════════════════════════════════════════════════ */

.jc-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.jc-login-card .login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.jc-login-card .login-brand .brand-mark {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.jc-login-card .login-brand .brand-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-align: center;
}

.jc-login-card .login-brand .brand-sub {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  text-align: center;
}

.jc-login-card .login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.jc-login-card .login-form .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jc-login-card .login-form .row label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-caption);
  color: var(--color-text-body);
  cursor: pointer;
}

.jc-login-card .login-form .row a {
  font-size: var(--font-size-caption);
  color: var(--color-text-link);
}

.jc-login-card .login-foot {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  text-align: center;
}


/* ═════════════════════════════════════════════════════════════
 * LOGIN 頁全頁置中 layout
 * ═════════════════════════════════════════════════════════════ */

.jc-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  background: var(--color-surface-tinted);
}


/* ═════════════════════════════════════════════════════════════
 * FILTERBAR — 搜尋輸入框（vendors 頁用）
 * ═════════════════════════════════════════════════════════════ */

.jc-filterbar .filterbar-input {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--font-size-caption);
  color: var(--color-text);
  min-width: 240px;
}

.jc-filterbar .filterbar-input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px var(--color-brand-primary-tint-12);
}


/* ═════════════════════════════════════════════════════════════
 * FLASH 訊息（CRUD 後的成功 / 失敗提示）
 * ═════════════════════════════════════════════════════════════ */

.flash {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-body);
}

.flash .material-symbols-outlined {
  font-size: 20px;
  flex-shrink: 0;
}

.flash-success {
  background: var(--color-tag-green-bg);
  color: var(--color-tag-green-fg);
}

.flash-error {
  background: var(--color-tag-red-bg);
  color: var(--color-tag-red-fg);
}

.flash-warning {
  background: var(--color-tag-amber-bg);
  color: var(--color-tag-amber-fg);
}


/* ═════════════════════════════════════════════════════════════
 * PAGINATION — 支援 <a> 元素（不只 <button>）
 * ═════════════════════════════════════════════════════════════ */

.jc-pagination a.page-btn {
  text-decoration: none;
}

.jc-pagination a.page-btn:hover {
  text-decoration: none;
}

.jc-pagination .page-btn.disabled {
  pointer-events: none;
  opacity: 0.4;
}