/* ERPCore2 顏色系統 - 僅包含顏色變數定義 */
:root {
  /* 側邊欄寬度 */
  --sidebar-width-expanded: 220px;
  --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;

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

  /* 警告框背景色 */
  --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;

  /* 標籤頁色彩 - 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 時顯示（橘色） */
/* 方式三：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（預設隱藏）*/
.table-debug-name {
  display: none;
  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: none;
  user-select: none;
}

html.debug-props .table-debug-name,
html.debug-i18n .table-debug-name {
  display: block;
  pointer-events: auto;
  cursor: pointer;
}

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