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

  /* 主要色彩 */
  --primary-blue: #1E3A8A;
  --primary-blue-hover: #1e40af;
  --primary-blue-alt: #1F2937;
  /* --color-primary:多個共用元件(IconPicker/FieldSettingsPanel/ConfirmModal 等)
     引用此別名作藍色強調,但先前全專案從未定義 → 退回 currentColor 灰字(潛在 bug)。
     定義為 --primary-blue 別名一次修好全部,且自動跟隨深色。 */
  --color-primary: var(--primary-blue);
  --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;

  /* 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陰影(對齊 Tailwind 級 shadow token,取代 Bootstrap 時代硬寫值) */
  --card-hover-shadow: var(--shadow-lg);
  
  /* 圓角 */
  --radius-sm: 0.125rem;
  --radius: 0.375rem;   /* 按鈕/輸入基礎圓角(4→6px,適度現代化;走 var(--radius) 者自動生效) */
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;   /* 卡片/面板（ShortcutCard、Home 面板 de-facto 現用值） */
  --radius-2xl: 1rem;     /* 大容器（收斂目前散落的 12/16px） */
  --radius-full: 9999px;  /* 膠囊/圓形（取代散落的 50%） */

  /* 轉場 token — 時長+標準 easing 合一,可直接放進 transition 簡寫。
     easing 統一 cubic-bezier(0.4,0,0.2,1)(Material 標準曲線,側欄/NavMenu 既有值)。
     fast: hover/顏色/邊框/陰影微回饋; base: 佈局/位移/寬度。
     ≥0.3s 的長動畫(抽屜滑出/彈簧/進度條)刻意不收斂,保留各自節奏 */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* 卡片配方(約定,非 class;各元件 css 對齊同組 token,不建 BaseCard):
     A 互動卡: radius-xl + border-light + 靜置 shadow-sm → hover shadow-md/lg + translateY(-2~3px)
     B 容器卡(表格/panel): radius-lg + border-light + 靜置 shadow-sm → hover shadow-md
     C 平面卡: radius-md~lg + border-color, 無陰影 */

  /* 間距尺度（統一 padding/margin/gap 節奏；後續零風險 retrofit 用；值對齊現用 de-facto） */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* 標籤頁色彩 - 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 較 GitHub #161b22 略提亮，拉大與頁面底 #0d1117 的差，卡片浮起） */
  --bg-primary: #1b212b;
  --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);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 10px 10px -5px rgb(0 0 0 / 0.4);

  /* 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;

  /* 標籤頁色彩 - 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);
}

/* ── Debug 方式四：欄位標籤 Debug 標記（預設隱藏，SuperAdmin 快捷鍵切換）── */
/* Ctrl+Alt+P 切換 PropertyName，html.debug-props 時顯示（橘色） */
.field-debug-name {
  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;
}

/* ── Debug 方式五：InteractiveTableComponent 欄位標頭 Debug 標記 ── */
/* col-debug-name（橘色）預設隱藏，快捷鍵切換後顯示 */
.col-debug-name {
  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;
}


/* 方式五：表格名稱 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; }

/* ── 全域無障礙：尊重系統「減少動態效果」偏好（動暈症 / 前庭障礙使用者）──
   一次涵蓋全站 transition / animation / smooth-scroll，個別元件無需再各自處理。
   用近乎瞬時的 0.01ms 而非 0：避免依賴 animationend 事件的邏輯永不觸發。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}