/* ERPCore2 顏色系統 - 僅包含顏色變數定義 */
:root {
  /* 側邊欄寬度 */
  --sidebar-width-expanded: 190px;
  --sidebar-width-collapsed: 60px;
  --sidebar-width: var(--sidebar-width-expanded);

  /* 主要色彩 */
  --primary-blue: #1E3A8A;
  --primary-blue-hover: #1e40af;
  --primary-blue-alt: #1F2937;
  --primary-dark-gray: #1F2937;
  --primary-white: #FFFFFF;
  --primary-light-gray: #F9FAFB;

  /* 文字色彩 */
  --text-primary: #374151;
  --text-secondary: #6B7280;
  --text-secondary-hover: #4b5563;
  --text-light: #9CA3AF;
  
  /* 邊框和分隔線 */
  --border-color: #D1D5DB;
  --border-light: #E5E7EB;
  
  /* 狀態色彩 */
  --success-color: #059669;
  --success-color-hover: #047857;
  --warning-color: #EA580C;
  --warning-color-hover: #c2410c;
  --danger-color: #DC2626;
  --danger-color-hover: #b91c1c;
  --info-color: #0891B2;
  --info-color-hover: #0e7490;
  /* 自訂色已精簡至標準 Bootstrap 語意色（2026-03-25） */

  /* warning 深色文字（橙色系在淡背景上需要更深的文字色） */
  --warning-text-dark: #9a3412;
  --warning-text-hover: #7c2d12;

  /* BusinessFlow Trace 模式節點配色 (Phase 3, 鐵律 G-BizFlow-21)
     Mermaid classDef 走 var(--bff-*) 跨 dark mode 自動換色, 不依賴 themeVariables */
  --bff-has-data-bg: #dcfce7;
  --bff-has-data-border: #16a34a;
  --bff-has-data-text: #15803d;
  --bff-no-data-bg: #f3f4f6;
  --bff-no-data-border: #9ca3af;
  --bff-no-data-text: #6b7280;

  /* BusinessFlow Phase 8 hover 高亮聚焦 (G-BizFlow-26, 2026-05-27)
     hover edge → 邊 + 兩端節點 高亮 (放射型聚焦); inline style + var() 跨 dark mode 自動換色 */
  --bff-hover-edge-stroke: #2563eb;
  --bff-hover-node-bg: #dbeafe;
  --bff-hover-node-border: #2563eb;
  --bff-hover-node-text: #1e40af;

  /* BusinessFlow Phase 10-B 異常標示 (G-BizFlow-31, 2026-05-27)
     anomalyWarning (黃底, PR/SD Approved 1-7 天無 OP/OR) / anomalyError (紅底, > 7 天) */
  --bff-anomaly-warning-bg: #fef3c7;
  --bff-anomaly-warning-border: #f59e0b;
  --bff-anomaly-error-bg: #fee2e2;
  --bff-anomaly-error-border: #dc2626;

  /* BusinessFlow Phase 11-C2.1 圖內搜尋淡化 (G-BizFlow-35, 2026-05-27)
     不符合搜尋的節點/邊降低透明度, 不與 hover inline style 衝突 */
  --bff-dimmed-opacity: 0.18;

  /* BusinessFlow Phase 12-A 命中視覺強化 (G-BizFlow-35 修訂, 2026-05-28)
     match: 命中節點粗藍邊 + 淺底; match-current: 上下鍵指向的當前節點換對比橙邊 */
  --bff-match-bg: #fef3c7;
  --bff-match-border: #1E3A8A;
  --bff-match-stroke-width: 3px;
  --bff-match-current-stroke-width: 5px;
  --bff-match-current-border: #c2410c;

  /* BusinessFlow Phase 12-B cluster 命中加亮 (G-BizFlow-35 修訂, 2026-05-28)
     共用 --bff-match-border, dark mode 自動繼承 */
  --bff-match-cluster-border: var(--bff-match-border);
  --bff-match-cluster-stroke-width: 3px;

  /* BusinessFlow Phase 12-D 目前位置高亮 (2026-05-28)
     切到 SystemOverview 時, 對使用者進入點對應 group 加橙色粗虛線邊框
     與 .bff-match-cluster (藍實線) 用顏色+線型雙重區分, 兩者可同時存在於同一 cluster */
  --bff-current-group-border: #c2410c;
  --bff-current-group-stroke-width: 3px;
  --bff-current-group-stroke-dasharray: 6 4;

  /* RGB 分量值（供 rgba() 透明度計算使用） */
  --primary-blue-rgb: 30, 58, 138;
  --text-secondary-rgb: 107, 114, 128;
  --success-color-rgb: 5, 150, 105;
  --warning-color-rgb: 234, 88, 12;
  --danger-color-rgb: 220, 38, 38;
  --info-color-rgb: 8, 145, 178;

    /* 背景色彩 */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-tertiary: #F3F4F6;
  
  /* 表格 hover 色彩 */
  --table-hover-bg: #f1f5f9;
  --table-hover-bg-striped: #e8eef6;
  --table-hover-text: inherit;
  --table-hover-accent: var(--primary-blue);

  /* 表格 striped 色彩（加大對比度） */
  --table-stripe-bg: #F3F6F9;

  /* 唯讀 / 系統欄位 / 鎖定列灰底（明顯可辨,比 --bg-secondary 深） */
  --table-readonly-bg: #E9ECF1;
  
  /* 陰影 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
  
  /* 陰影和focus效果 */
  --focus-shadow-primary: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
  
  /* 警告框背景色 */
  --alert-success-bg: rgba(5, 150, 105, 0.1);
  --alert-warning-bg: rgba(234, 88, 12, 0.1);
  --alert-danger-bg: rgba(220, 38, 38, 0.1);
  --alert-info-bg: rgba(30, 58, 138, 0.1);
  
  /* 卡片hover陰影 */
  --card-hover-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  
  /* 圓角 */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  
  /* 標籤頁色彩 - Detail Tabs */
  --detail-tab-bg: var(--bg-secondary);           /* 標籤頁標題背景 */
  --detail-tab-content-bg: var(--bg-primary);     /* 標籤頁內容背景 */
  --detail-tab-border: var(--border-light);       /* 邊框顏色 */
  --detail-tab-active-bg: var(--bg-primary);      /* 活躍標籤背景 */
  --detail-tab-active-border: #fde68a;            /* 活躍標籤底線 - 黃色 */
  --detail-tab-hover-bg: var(--bg-tertiary);      /* hover 背景 */
  --detail-tab-shadow: var(--shadow-lg);          /* 標籤頁容器陰影 */

  /* 導航側邊欄色彩（nav-scrollable 區域，不含深色 top-row） */
  --nav-bg: #FFFFFF;
  --nav-text: var(--text-primary);
  --nav-text-dim: rgba(0, 0, 0, 0.35);
  --nav-hover-bg: rgba(0, 0, 0, 0.05);
  --nav-active-bg: rgba(30, 58, 138, 0.09);
  --nav-active-hover-bg: rgba(30, 58, 138, 0.13);
  --nav-active-border: #1E3A8A;
  --nav-expanded-bg: rgba(0, 0, 0, 0.04);
  --nav-content-bg: rgba(0, 0, 0, 0.02);
  --nav-content-left-border: rgba(30, 58, 138, 0.25);
  --nav-dropdown-text: var(--text-primary);
  --nav-dropdown-hover-border: rgba(30, 58, 138, 0.50);
  --nav-divider: rgba(0, 0, 0, 0.10);
  --nav-scrollbar: rgba(0, 0, 0, 0.12);
  --nav-scrollbar-hover: rgba(0, 0, 0, 0.22);
  /* 使用者頭像（avatar 背景恆為深色，白字始終可讀） */
  --nav-avatar-bg: var(--primary-blue);
  --nav-avatar-hover-shadow: rgba(30, 58, 138, 0.20);
}

/* ===== 深色模式覆寫（GitHub Dark 調色盤）===== */
[data-bs-theme=dark] {
  /* 主要色彩 */
  --primary-blue: #58a6ff;
  --primary-blue-hover: #388bfd;
  --primary-blue-alt: #1c2d3e;
  --primary-dark-gray: #c9d1d9;
  /* --primary-white 保持 #FFFFFF（繼承自 :root），因為用於深色側邊欄 / 表頭上的文字顏色 */
  --primary-light-gray: #21262d;

  /* 文字色彩 */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-secondary-hover: #c9d1d9;
  --text-light: #6e7681;

  /* 邊框和分隔線 */
  --border-color: #30363d;
  --border-light: #21262d;

  /* 背景色彩 */
  --bg-primary: #161b22;
  --bg-secondary: #0d1117;
  --bg-tertiary: #21262d;

  /* 表格 hover 色彩 */
  --table-hover-bg: #1c2a3e;
  --table-hover-bg-striped: #1e3255;
  --table-hover-text: inherit;
  --table-hover-accent: #58a6ff;

  /* 表格 striped 色彩 */
  --table-stripe-bg: #1a2233;

  /* 唯讀 / 系統欄位 / 鎖定列灰底（深色模式比列底 #161b22 更深） */
  --table-readonly-bg: #0d1117;

  /* 警告框背景色 */
  --alert-success-bg: rgba(46, 160, 67, 0.15);
  --alert-warning-bg: rgba(210, 153, 34, 0.15);
  --alert-danger-bg: rgba(248, 81, 73, 0.15);
  --alert-info-bg: rgba(88, 166, 255, 0.15);

  /* 陰影（深色模式增加不透明度以保持可見性） */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -2px rgb(0 0 0 / 0.3);

  /* RGB 分量值 */
  --primary-blue-rgb: 88, 166, 255;
  --text-secondary-rgb: 139, 148, 158;
  --success-color-rgb: 46, 160, 67;
  --warning-color-rgb: 210, 153, 34;
  --danger-color-rgb: 248, 81, 73;
  --info-color-rgb: 88, 166, 255;

  /* warning 深色文字（暗色模式下 warning 用淺色）*/
  --warning-text-dark: #e3b341;
  --warning-text-hover: #d29922;

  /* BusinessFlow Trace 模式節點配色（深色模式覆寫, Phase 3） */
  --bff-has-data-bg: #14532d;
  --bff-has-data-border: #22c55e;
  --bff-has-data-text: #86efac;
  --bff-no-data-bg: #1f2937;
  --bff-no-data-border: #4b5563;
  --bff-no-data-text: #9ca3af;

  /* BusinessFlow Phase 8 hover 高亮（深色模式覆寫, GitHub Dark 風格藍） */
  --bff-hover-edge-stroke: #60a5fa;
  --bff-hover-node-bg: #1e3a8a;
  --bff-hover-node-border: #60a5fa;
  --bff-hover-node-text: #dbeafe;

  /* BusinessFlow Phase 10-B 異常標示（深色模式覆寫） */
  --bff-anomaly-warning-bg: #78350f;
  --bff-anomaly-warning-border: #f59e0b;
  --bff-anomaly-error-bg: #7f1d1d;
  --bff-anomaly-error-border: #f87171;

  /* BusinessFlow Phase 12-A 命中視覺強化（深色模式覆寫） */
  --bff-match-bg: #78350f;
  --bff-match-border: #60a5fa;
  --bff-match-current-border: #f59e0b;

  /* BusinessFlow Phase 12-D 目前位置高亮（深色模式覆寫, 橙色亮版確保夜間可見） */
  --bff-current-group-border: #fb923c;

  /* 標籤頁色彩 - Detail Tabs */
  --detail-tab-active-border: #e3b341;

  /* 導航側邊欄色彩（深色模式覆寫） */
  --nav-bg: #1c2d3e;
  --nav-text: #FFFFFF;
  --nav-text-dim: rgba(255, 255, 255, 0.50);
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-active-bg: rgba(255, 255, 255, 0.10);
  --nav-active-hover-bg: rgba(255, 255, 255, 0.14);
  --nav-active-border: #60a5fa;
  --nav-expanded-bg: rgba(255, 255, 255, 0.06);
  --nav-content-bg: rgba(255, 255, 255, 0.03);
  --nav-content-left-border: rgba(120, 170, 255, 0.40);
  --nav-dropdown-text: rgba(255, 255, 255, 0.82);
  --nav-dropdown-hover-border: rgba(120, 170, 255, 0.60);
  --nav-divider: rgba(255, 255, 255, 0.15);
  --nav-scrollbar: rgba(255, 255, 255, 0.15);
  --nav-scrollbar-hover: rgba(255, 255, 255, 0.30);
  /* 使用者頭像 */
  --nav-avatar-bg: rgba(255, 255, 255, 0.15);
  --nav-avatar-hover-shadow: rgba(255, 255, 255, 0.10);

  /* focus */
  --focus-shadow-primary: 0 0 0 0.2rem rgba(88, 166, 255, 0.35);

  /* Bootstrap 分頁元件 — 覆寫以使用 GitHub Dark 調色盤 */
  --bs-pagination-color: var(--primary-blue);
  --bs-pagination-bg: var(--bg-secondary);
  --bs-pagination-border-color: var(--border-color);
  --bs-pagination-hover-color: var(--primary-blue);
  --bs-pagination-hover-bg: var(--bg-tertiary);
  --bs-pagination-hover-border-color: var(--border-color);
  --bs-pagination-focus-color: var(--primary-blue);
  --bs-pagination-focus-bg: var(--bg-tertiary);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: var(--primary-blue);
  --bs-pagination-active-border-color: var(--primary-blue);
  --bs-pagination-disabled-color: var(--text-secondary);
  --bs-pagination-disabled-bg: var(--bg-tertiary);
  --bs-pagination-disabled-border-color: var(--border-color);

  /* Bootstrap 下拉選單 — 覆寫以使用 GitHub Dark 調色盤 */
  --bs-dropdown-bg: var(--bg-primary);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--bg-tertiary);
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: var(--primary-blue);
  --bs-dropdown-divider-bg: var(--border-color);
  --bs-dropdown-border-color: var(--border-color);
  --bs-dropdown-item-color: var(--text-primary);

  /* Bootstrap 表格 — 覆寫以使用 GitHub Dark 調色盤 */
  --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);

  /* Bootstrap form 元件 — 覆寫以使用 GitHub Dark 調色盤 */
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--bg-primary);
  --bs-border-color: var(--border-color);
  --bs-secondary-bg: var(--bg-tertiary);
  --bs-tertiary-bg: var(--bg-secondary);
  --bs-link-color: var(--primary-blue);
  --bs-link-hover-color: var(--primary-blue-hover);
}

/* BusinessFlow Phase 11-C2.1 圖內搜尋淡化 class (G-BizFlow-35; Phase 12-A 擴 edgeLabel) */
.business-flow-container g.node.bff-dimmed,
.business-flow-container g.edgePaths > path.bff-dimmed,
.business-flow-container g.edgeLabels .edgeLabel.bff-dimmed,
.business-flow-container g.edgeLabels g.label.bff-dimmed {
  opacity: var(--bff-dimmed-opacity);
  transition: opacity 0.18s ease;
}

/* BusinessFlow Phase 12-A 命中視覺 (G-BizFlow-35 修訂, 2026-05-28)
   !important 蓋 Phase 3 hasData/noData classDef + Phase 6 approvalGate stroke-dasharray
   不蓋 Phase 8 hover (hover 走 inline style, 優先級高於 class) */
.business-flow-container g.node.bff-match > rect,
.business-flow-container g.node.bff-match > polygon,
.business-flow-container g.node.bff-match > circle,
.business-flow-container g.node.bff-match > path {
  stroke: var(--bff-match-border) !important;
  stroke-width: var(--bff-match-stroke-width) !important;
  fill: var(--bff-match-bg) !important;
}
.business-flow-container g.node.bff-match-current > rect,
.business-flow-container g.node.bff-match-current > polygon,
.business-flow-container g.node.bff-match-current > circle,
.business-flow-container g.node.bff-match-current > path {
  stroke: var(--bff-match-current-border) !important;
  stroke-width: var(--bff-match-current-stroke-width) !important;
}

/* BusinessFlow Phase 12-B cluster (subgraph) 命中加亮 (G-BizFlow-35 修訂, 2026-05-28) */
.business-flow-container g.cluster.bff-match-cluster > rect {
  stroke: var(--bff-match-cluster-border) !important;
  stroke-width: var(--bff-match-cluster-stroke-width) !important;
}

/* BusinessFlow Phase 12-D 目前位置 cluster 高亮 (2026-05-28)
   切到 SystemOverview 時對使用者進入點 group 加橙色粗虛線; 與 .bff-match-cluster 兩個獨立 class 可並存。
   stroke-dasharray 用變數確保 dark mode 主題切換無需重設, 且若需動態調整可單點改 :root */
.business-flow-container g.cluster.bff-current-group > rect {
  stroke: var(--bff-current-group-border) !important;
  stroke-width: var(--bff-current-group-stroke-width) !important;
  stroke-dasharray: var(--bff-current-group-stroke-dasharray) !important;
}

/* BusinessFlow Phase 12-B 命中節點 pulse 動畫 (scroll-to-match 後短脈動凸顯)
   尊重 prefers-reduced-motion (動暈症使用者) */
@keyframes bff-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.business-flow-container g.node.bff-pulse {
  animation: bff-pulse 0.6s ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .business-flow-container g.node.bff-pulse { animation: none; }
}

/* BusinessFlow Phase 12-B 搜尋框 X 清除按鈕 (放在 input position-relative 容器內絕對定位) */
.bff-clear-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 0 4px;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
}
.bff-clear-btn:hover { color: var(--text-primary); }

/* BusinessFlow Phase 12-C 圖例 panel (G-BizFlow-15 修訂, 2026-05-28)
   panel 容器配色對齊 modal-header (var(--bg-secondary)), 視覺一致;
   swatch 重用 Phase 3 / Phase 10-B 既有 --bff-has-data-* / --bff-no-data-* / --bff-anomaly-* 變數, dark mode 自動繼承 */
.bff-legend-panel {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}
.bff-legend-icon {
  display: inline-block;
  width: 28px;
  height: 16px;
  vertical-align: middle;
  text-align: center;
  line-height: 14px;
  font-size: 0.7rem;
  box-sizing: border-box;
}
.bff-legend-rect {
  border: 1px solid var(--text-primary);
}
.bff-legend-stadium {
  border: 1px dashed var(--text-primary);
  border-radius: 8px;
}
.bff-legend-subgraph {
  border: 1px dashed var(--text-secondary);
  background: transparent;
}
.bff-legend-swatch {
  display: inline-block;
  width: 24px;
  height: 14px;
  vertical-align: middle;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
}
.bff-legend-hasdata {
  background: var(--bff-has-data-bg);
  border-color: var(--bff-has-data-border);
}
.bff-legend-nodata {
  background: var(--bff-no-data-bg);
  border-color: var(--bff-no-data-border);
}
.bff-legend-anomaly {
  background: var(--bff-anomaly-warning-bg);
  border-color: var(--bff-anomaly-warning-border);
}

/* ── Debug 方式三 / 四：欄位標籤 Debug 標記（預設隱藏，SuperAdmin 快捷鍵切換）── */
/* 方式四：Ctrl+Alt+P 切換 PropertyName，html.debug-props 時顯示（橘色） */
/* 方式三：Ctrl+Alt+K 切換 i18n Key，html.debug-i18n 時顯示（綠色） */
.field-debug-name,
.field-debug-i18n {
  display: none;
  font-family: monospace;
  padding: 0 0.3rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
  background: #1a1a2e;
  border: 1px solid #30363d;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}

html.debug-props .field-debug-name {
  display: inline;
  color: #f8c8a0;
  cursor: pointer;
  pointer-events: auto;
}

html.debug-i18n .field-debug-i18n {
  display: inline;
  color: #90ee90;
  cursor: pointer;
  pointer-events: auto;
}

/* ── Debug 方式五：InteractiveTableComponent 欄位標頭 Debug 標記 ── */
/* col-debug-name (橘色) 和 col-debug-i18n (綠色) 預設隱藏，快捷鍵切換後顯示 */
.col-debug-name,
.col-debug-i18n {
  display: none;
  font-family: monospace;
  padding: 0 0.25rem;
  border-radius: 3px;
  margin-left: 0.25rem;
  vertical-align: middle;
  background: #1a1a2e;
  border: 1px solid #30363d;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}

html.debug-props .col-debug-name {
  display: inline;
  color: #f8c8a0;
  cursor: pointer;
  pointer-events: auto;
}

html.debug-i18n .col-debug-i18n {
  display: inline;
  color: #90ee90;
  cursor: pointer;
  pointer-events: auto;
}

/* 方式五：表格名稱 Badge（SuperAdmin 自動常駐顯示，由元件 @if 守門） */
.table-debug-name {
  display: block;
  /* 釘在捲動視窗左緣：寬度=容器可視寬，sticky 後在任何 scrollLeft 都覆蓋整個可視區，
     深色背景不再於水平捲動時被截斷（最右欄上方無缺口）。GenericTable / GenericInteractiveTable 共用 */
  position: sticky;
  left: 0;
  font-family: monospace;
  color: #7ec8e3;
  background: #1a1a2e;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.25rem;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

/* ── Debug 方式六（Ctrl+Alt+C）：非 Modal 子組件 header Debug 標籤 ── */
/* 預設隱藏，Ctrl+Alt+C 切換 debug-components class 時顯示 */
.debug-component-label {
  display: none;
  font-family: monospace;
  background: #1a1a2e;
  color: #7ec8e3;
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
}

html.debug-components .debug-component-label {
  display: inline;
}

/* ── Debug 方式二：頁面組件名稱 Badge（SuperAdmin 自動顯示，置於頁面底部置中）── */
.debug-page-badge {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: #1a1a2e;
  color: #7ec8e3;
  font-family: monospace;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid #30363d;
  cursor: pointer;
  letter-spacing: 0.03em;
  opacity: 0.85;
  user-select: text;
  white-space: nowrap;
}
.debug-page-badge .badge-label      { color: #f8c8a0; font-weight: bold; }
.debug-page-badge .stat-sep         { color: #8b949e; }
.debug-page-badge .stat-mode-server { color: #3fb950; }
.debug-page-badge .stat-mode-client { color: #d29922; }
.debug-page-badge .stat-count       { color: #e6edf3; }
.debug-page-badge .stat-fast        { color: #3fb950; }
.debug-page-badge .stat-medium      { color: #d29922; }
.debug-page-badge .stat-slow        { color: #f85149; }