/**
 * InstaLedger 統一設計系統 - 色彩調色盤
 *
 * 基於 Morandi 色調風格（低飽和度、柔和色彩）
 * 主題色：溫和橘色系（Warm Orange）
 * 次要色：莫蘭迪綠（Morandi Green）
 * 第三色：莫蘭迪粉（Morandi Pink）
 * 第四色：莫蘭迪藍（Morandi Blue）
 * 適用於 ~300px 窄寬度顯示設計
 *
 * 使用方式：
 * - 在 HTML 中引入：<link rel="stylesheet" href="/common/css/palette/system_palette.css">
 * - 在 CSS 中使用：background-color: var(--color-primary);
 * - 在 JavaScript 中使用：getComputedStyle(document.documentElement).getPropertyValue('--color-primary')
 */

/* ===== 基礎色彩系統 ===== */
:root {
  /* === 主題色系 - 溫和橘色系 === */
  --color-primary: #C49660;           /* 主要按鈕、連結、重點元素 */
  --color-primary-50: #FBF7F3;        /* 極淺橘 - 背景色、淺色區域 */
  --color-primary-100: #F5EDE3;       /* 很淺橘 - 懸停背景、淺色卡片 */
  --color-primary-200: #E8C4A0;       /* 淺橘 - 次要背景、分隔線 */
  --color-primary-300: #DDB485;       /* 中淺橘 - 圖示背景、標籤 */
  --color-primary-400: #D4A574;       /* 中橘 - 次要按鈕、懸停狀態 */
  --color-primary-500: #C49660;       /* 標準橘 - 主要按鈕、品牌色 */
  --color-primary-600: #B8956A;       /* 中深橘 - 按鈕懸停、活躍狀態 */
  --color-primary-700: #A67D52;       /* 深橘 - 文字、邊框 */
  --color-primary-800: #8B6B44;       /* 很深橘 - 深色文字、強調 */
  --color-primary-900: #6B5235;       /* 極深橘 - 標題、重要文字 */

  /* === 次要色系 - 莫蘭迪綠 === */
  --color-secondary: #95A58D;         /* 次要按鈕、資訊提示 */
  --color-secondary-50: #F6F8F6;      /* 極淺綠 - 資訊背景 */
  --color-secondary-100: #EDF1ED;     /* 很淺綠 - 資訊卡片背景 */
  --color-secondary-200: #D4DDD4;     /* 淺綠 - 分隔線、邊框 */
  --color-secondary-300: #C1CCC1;     /* 中淺綠 - 圖示、標籤 */
  --color-secondary-400: #A8B5A0;     /* 中綠 - 次要元素 */
  --color-secondary-500: #95A58D;     /* 標準綠 - 次要按鈕 */
  --color-secondary-600: #849182;     /* 中深綠 - 懸停狀態 */
  --color-secondary-700: #6F7A6D;     /* 深綠 - 文字連結 */
  --color-secondary-800: #5A645A;     /* 很深綠 - 深色文字 */
  --color-secondary-900: #454D45;     /* 極深綠 - 標題文字 */

  /* === 第三色系 - 莫蘭迪粉 === */
  --color-accent: #B59595;            /* 強調色、特殊元素 */
  --color-accent-50: #F8F6F6;         /* 極淺粉 - 背景色 */
  --color-accent-100: #F1EDED;        /* 很淺粉 - 卡片背景 */
  --color-accent-200: #DDD4D4;        /* 淺粉 - 分隔線 */
  --color-accent-300: #CCC1C1;        /* 中淺粉 - 圖示背景 */
  --color-accent-400: #C4A8A8;        /* 中粉 - 次要元素 */
  --color-accent-500: #B59595;        /* 標準粉 - 強調色 */
  --color-accent-600: #A58484;        /* 中深粉 - 懸停狀態 */
  --color-accent-700: #8A6F6F;        /* 深粉 - 文字 */
  --color-accent-800: #6E5A5A;        /* 很深粉 - 深色文字 */
  --color-accent-900: #534545;        /* 極深粉 - 標題文字 */

  /* === 第四色系 - 莫蘭迪藍 === */
  --color-tertiary: #8D95A5;          /* 第三色調、輔助元素 */
  --color-tertiary-50: #F6F7F8;       /* 極淺藍 - 背景色 */
  --color-tertiary-100: #EDEEF1;      /* 很淺藍 - 卡片背景 */
  --color-tertiary-200: #D4D7DD;      /* 淺藍 - 分隔線 */
  --color-tertiary-300: #C1C5CC;      /* 中淺藍 - 圖示背景 */
  --color-tertiary-400: #A0A8B5;      /* 中藍 - 次要元素 */
  --color-tertiary-500: #8D95A5;      /* 標準藍 - 第三色調 */
  --color-tertiary-600: #828491;      /* 中深藍 - 懸停狀態 */
  --color-tertiary-700: #6D6F7A;      /* 深藍 - 文字 */
  --color-tertiary-800: #5A5A64;      /* 很深藍 - 深色文字 */
  --color-tertiary-900: #45454D;      /* 極深藍 - 標題文字 */

  /* === 中性色系 - 溫暖灰色系 === */
  --color-neutral-50: #F8F7F6;        /* 極淺灰 - 頁面背景 */
  --color-neutral-100: #F0EFED;       /* 很淺灰 - 卡片背景 */
  --color-neutral-200: #E6E4E1;       /* 淺灰 - 分隔線、邊框 */
  --color-neutral-300: #D1CFC9;       /* 中淺灰 - 輸入框邊框 */
  --color-neutral-400: #B5B2AB;       /* 中灰 - 佔位符文字 */
  --color-neutral-500: #9B978E;       /* 標準灰 - 次要文字 */
  --color-neutral-600: #7D7A72;       /* 中深灰 - 正文文字 */
  --color-neutral-700: #625F58;       /* 深灰 - 標題文字 */
  --color-neutral-800: #4A4740;       /* 很深灰 - 重要文字 */
  --color-neutral-900: #332F2A;       /* 極深灰 - 主要文字 */

  /* === 狀態色系 - 莫蘭迪風格 === */
  --color-success: #95A58D;           /* 莫蘭迪綠 - 成功狀態 */
  --color-success-50: #F6F8F6;        /* 成功背景 */
  --color-success-100: #EDF1ED;       /* 成功淺背景 */
  --color-success-200: #D4DDD4;       /* 成功分隔線 */
  --color-success-300: #C1CCC1;       /* 成功圖示背景 */
  --color-success-400: #A8B5A0;       /* 成功次要元素 */
  --color-success-500: #95A58D;       /* 成功標準色 */
  --color-success-600: #849182;       /* 成功深色 */
  --color-success-700: #6F7A6D;       /* 成功文字 */
  --color-success-800: #5A645A;       /* 成功深色文字 */
  --color-success-900: #454D45;       /* 成功極深色 */

  --color-warning: #C49660;           /* 溫和橘色 - 警告狀態 */
  --color-warning-50: #FBF7F3;        /* 警告背景 */
  --color-warning-100: #F5EDE3;       /* 警告淺背景 */
  --color-warning-200: #E8C4A0;       /* 警告分隔線 */
  --color-warning-300: #DDB485;       /* 警告圖示背景 */
  --color-warning-400: #D4A574;       /* 警告次要元素 */
  --color-warning-500: #C49660;       /* 警告標準色 */
  --color-warning-600: #B8956A;       /* 警告深色 */
  --color-warning-700: #A67D52;       /* 警告文字 */
  --color-warning-800: #8B6B44;       /* 警告深色文字 */
  --color-warning-900: #6B5235;       /* 警告極深色 */

  --color-error: #B59595;             /* 莫蘭迪粉 - 錯誤狀態 */
  --color-error-50: #F8F6F6;          /* 錯誤背景 */
  --color-error-100: #F1EDED;         /* 錯誤淺背景 */
  --color-error-200: #DDD4D4;         /* 錯誤分隔線 */
  --color-error-300: #CCC1C1;         /* 錯誤圖示背景 */
  --color-error-400: #B59595;         /* 錯誤次要元素 */
  --color-error-500: #A58484;         /* 錯誤標準色 */
  --color-error-600: #947373;         /* 錯誤深色 */
  --color-error-700: #7A5F5F;         /* 錯誤文字 */
  --color-error-800: #614C4C;         /* 錯誤深色文字 */
  --color-error-900: #4A3939;         /* 錯誤極深色 */

  --color-info: #8D95A5;              /* 莫蘭迪藍 - 資訊狀態 */
  --color-info-50: #F6F7F8;           /* 資訊背景 */
  --color-info-100: #EDEEF1;          /* 資訊淺背景 */
  --color-info-200: #D4D7DD;          /* 資訊分隔線 */
  --color-info-300: #C1C5CC;          /* 資訊圖示背景 */
  --color-info-400: #A0A8B5;          /* 資訊次要元素 */
  --color-info-500: #8D95A5;          /* 資訊標準色 */
  --color-info-600: #828491;          /* 資訊深色 */
  --color-info-700: #6D6F7A;          /* 資訊文字 */
  --color-info-800: #5A5A64;          /* 資訊深色文字 */
  --color-info-900: #45454D;          /* 資訊極深色 */

  /* === 舊版相容性變數 === */
  --primary-color: var(--color-primary-400);
  --secondary-color: var(--color-secondary-400);
  --accent-color: var(--color-accent-400);
  --tertiary-color: var(--color-tertiary-400);
}

/* ===== 語義化色彩變數 ===== */
:root {
  /* === 按鈕色彩 === */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-bg-hover: var(--color-primary-600);
  --btn-primary-text: #ffffff;
  --btn-primary-border: var(--color-primary);

  --btn-secondary-bg: var(--color-secondary);
  --btn-secondary-bg-hover: var(--color-secondary-600);
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: var(--color-secondary);

  --btn-outline-bg: transparent;
  --btn-outline-bg-hover: var(--color-primary);
  --btn-outline-text: var(--color-primary);
  --btn-outline-text-hover: #ffffff;
  --btn-outline-border: var(--color-primary);

  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: var(--color-primary-50);
  --btn-ghost-text: var(--color-primary);
  --btn-ghost-border: transparent;

  /* === 卡片色彩 === */
  --card-bg: #ffffff;
  --card-bg-secondary: var(--color-neutral-50);
  --card-border: var(--color-neutral-200);
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* === 頁面背景色彩 === */
  --page-bg: #ffffff;
  --page-bg-secondary: var(--color-neutral-50);
  --page-bg-tertiary: var(--color-neutral-100);

  /* === 文字色彩 === */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-placeholder: var(--color-neutral-400);
  --text-disabled: var(--color-neutral-300);
  --text-inverse: #ffffff;

  /* === 標題色彩 === */
  --heading-primary: var(--color-neutral-900);
  --heading-secondary: var(--color-neutral-800);
  --heading-accent: var(--color-primary);

  /* === 圖示色彩 === */
  --icon-primary: var(--color-primary);
  --icon-secondary: var(--color-secondary);
  --icon-neutral: var(--color-neutral-500);
  --icon-muted: var(--color-neutral-400);

  /* === 邊框色彩 === */
  --border-primary: var(--color-neutral-200);
  --border-secondary: var(--color-neutral-300);
  --border-accent: var(--color-primary);
  --border-focus: var(--color-primary-400);

  /* === 陰影色彩 === */
  --shadow-sm: 0 1px 2px 0 rgba(51, 47, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(51, 47, 42, 0.07), 0 2px 4px -1px rgba(51, 47, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(51, 47, 42, 0.1), 0 4px 6px -2px rgba(51, 47, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(51, 47, 42, 0.1), 0 10px 10px -5px rgba(51, 47, 42, 0.04);
  --shadow-primary: 0 4px 6px -1px rgba(196, 150, 96, 0.2), 0 2px 4px -1px rgba(196, 150, 96, 0.1);
  --shadow-secondary: 0 4px 6px -1px rgba(149, 165, 141, 0.2), 0 2px 4px -1px rgba(149, 165, 141, 0.1);
  --shadow-accent: 0 4px 6px -1px rgba(181, 149, 149, 0.2), 0 2px 4px -1px rgba(181, 149, 149, 0.1);
  --shadow-tertiary: 0 4px 6px -1px rgba(141, 149, 165, 0.2), 0 2px 4px -1px rgba(141, 149, 165, 0.1);
}

/* ===== Morandi 風格特殊效果 ===== */
:root {
  /* === 毛玻璃效果 === */
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-bg-secondary: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-primary: rgba(196, 150, 96, 0.2);
  --glass-border-secondary: rgba(149, 165, 141, 0.2);
  --glass-border-accent: rgba(181, 149, 149, 0.2);
  --glass-border-tertiary: rgba(141, 149, 165, 0.2);
  --glass-shadow: 0 8px 32px rgba(51, 47, 42, 0.1);
  --glass-blur: blur(10px);
  --glass-blur-strong: blur(20px);

  /* === 漸變背景 === */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-600) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-400) 0%, var(--color-secondary-600) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent-400) 0%, var(--color-accent-600) 100%);
  --gradient-tertiary: linear-gradient(135deg, var(--color-tertiary-400) 0%, var(--color-tertiary-600) 100%);
  --gradient-neutral: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-neutral-100) 100%);
  --gradient-page: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-neutral-100) 50%, var(--color-neutral-200) 100%);

  /* === 覆蓋層 === */
  --overlay-light: rgba(255, 255, 255, 0.8);
  --overlay-dark: rgba(51, 47, 42, 0.5);
  --overlay-primary: rgba(196, 150, 96, 0.1);
  --overlay-secondary: rgba(149, 165, 141, 0.1);
  --overlay-accent: rgba(181, 149, 149, 0.1);
  --overlay-tertiary: rgba(141, 149, 165, 0.1);

  /* === 後台管理系統專用色彩 === */
  /* 側邊欄深色背景漸變 - 基於主題色系的深色版本 */
  --admin-sidebar-bg: linear-gradient(180deg, #6B5235 0%, #4A3F2A 100%);
  --admin-sidebar-bg-alt: linear-gradient(180deg, var(--color-secondary-800) 0%, var(--color-secondary-900) 100%);

  /* 管理員標籤色彩 - 基於次要色系 */
  --admin-badge-bg: var(--color-secondary-100);
  --admin-badge-text: var(--color-secondary-800);
  --admin-badge-border: var(--color-secondary-200);

  /* 表格專用色彩 */
  --table-header-bg: var(--color-neutral-100);
  --table-header-text: var(--color-neutral-800);
  --table-row-hover: var(--color-primary-50);
  --table-border: var(--color-neutral-200);

  /* 側邊欄選單項目色彩 */
  --sidebar-item-active: rgba(196, 150, 96, 0.8);
  --sidebar-item-hover: rgba(196, 150, 96, 0.6);
  --sidebar-submenu-bg: rgba(0, 0, 0, 0.1);
  --sidebar-submenu-hover: rgba(0, 0, 0, 0.2);

  /* 頂部導航色彩 */
  --header-bg: #ffffff;
  --header-shadow: var(--shadow-md);
  --header-toggle-color: var(--color-primary);
  --header-toggle-hover: var(--color-primary-600);
}

/* ===== 實用工具類別 ===== */

/* === 背景色工具類 === */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-50 { background-color: var(--color-primary-50) !important; }
.bg-primary-100 { background-color: var(--color-primary-100) !important; }
.bg-primary-200 { background-color: var(--color-primary-200) !important; }
.bg-primary-300 { background-color: var(--color-primary-300) !important; }
.bg-primary-400 { background-color: var(--color-primary-400) !important; }
.bg-primary-500 { background-color: var(--color-primary-500) !important; }
.bg-primary-600 { background-color: var(--color-primary-600) !important; }

.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-50 { background-color: var(--color-secondary-50) !important; }
.bg-secondary-100 { background-color: var(--color-secondary-100) !important; }
.bg-secondary-400 { background-color: var(--color-secondary-400) !important; }
.bg-secondary-500 { background-color: var(--color-secondary-500) !important; }

.bg-accent { background-color: var(--color-accent) !important; }
.bg-accent-50 { background-color: var(--color-accent-50) !important; }
.bg-accent-100 { background-color: var(--color-accent-100) !important; }
.bg-accent-400 { background-color: var(--color-accent-400) !important; }
.bg-accent-500 { background-color: var(--color-accent-500) !important; }

.bg-tertiary { background-color: var(--color-tertiary) !important; }
.bg-tertiary-50 { background-color: var(--color-tertiary-50) !important; }
.bg-tertiary-100 { background-color: var(--color-tertiary-100) !important; }
.bg-tertiary-400 { background-color: var(--color-tertiary-400) !important; }
.bg-tertiary-500 { background-color: var(--color-tertiary-500) !important; }

.bg-white { background-color: #ffffff !important; }
.bg-neutral-50 { background-color: var(--color-neutral-50) !important; }
.bg-neutral-100 { background-color: var(--color-neutral-100) !important; }
.bg-neutral-200 { background-color: var(--color-neutral-200) !important; }

.bg-success { background-color: var(--color-success) !important; }
.bg-success-50 { background-color: var(--color-success-50) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-50 { background-color: var(--color-warning-50) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-error-50 { background-color: var(--color-error-50) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-info-50 { background-color: var(--color-info-50) !important; }

/* === 文字色工具類 === */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-white { color: #ffffff !important; }

.text-color-primary { color: var(--color-primary) !important; }
.text-color-secondary { color: var(--color-secondary) !important; }
.text-color-accent { color: var(--color-accent) !important; }
.text-color-tertiary { color: var(--color-tertiary) !important; }

.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }
.text-info { color: var(--color-info) !important; }

/* === 邊框色工具類 === */
.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.border-accent { border-color: var(--border-accent) !important; }
.border-focus { border-color: var(--border-focus) !important; }

.border-color-primary { border-color: var(--color-primary) !important; }
.border-color-secondary { border-color: var(--color-secondary) !important; }
.border-color-accent { border-color: var(--color-accent) !important; }
.border-color-tertiary { border-color: var(--color-tertiary) !important; }

/* === 按鈕樣式類 === */
/* 基礎按鈕樣式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--overlay-primary);
}

/* 主要按鈕 */
.btn-primary, .btn.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
}

.btn-primary:hover, .btn.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
}

/* 次要按鈕 */
.btn-secondary, .btn.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.btn-secondary:hover, .btn.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
}

/* 危險按鈕 */
.btn-danger, .btn.btn-danger {
  background-color: var(--color-error);
  color: var(--text-inverse);
  border-color: var(--color-error);
}

.btn-danger:hover, .btn.btn-danger:hover {
  background-color: var(--color-error-600);
}

/* 按鈕尺寸 */
.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

/* 系統按鈕樣式（保持向後相容） */
.btn-system-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
  transition: all 0.2s ease-in-out;
}

.btn-system-primary:hover {
  background-color: var(--btn-primary-bg-hover);
}

.btn-system-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  transition: all 0.2s ease-in-out;
}

.btn-system-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
}

/* === 表單色彩類 === */
.form-label {
  color: var(--text-secondary);
}

.form-control {
  color: var(--text-primary);
  background-color: var(--card-bg);
  border: 1px solid var(--border-secondary);
}

.form-control:focus {
  color: var(--text-primary);
  background-color: var(--card-bg);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 0.2rem var(--overlay-primary);
}

.form-control::placeholder {
  color: var(--text-placeholder);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--color-neutral-100);
}

/* === SweetAlert2 自定義樣式 === */
/* 覆蓋 SweetAlert2 的預設色彩，使其使用 system_palette 色彩 */

/* 主要彈窗樣式 */
.swal2-popup {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* 標題樣式 */
.swal2-title {
  color: var(--text-primary) !important;
}

/* 內容文字樣式 */
.swal2-html-container {
  color: var(--text-secondary) !important;
}

/* 確認按鈕 - 使用主題色 */
.swal2-confirm {
  background-color: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
}

.swal2-confirm:hover {
  background-color: var(--btn-primary-bg-hover) !important;
}

/* 取消按鈕 - 使用次要色 */
.swal2-cancel {
  background-color: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text) !important;
}

.swal2-cancel:hover {
  background-color: var(--btn-secondary-bg-hover) !important;
}

/* 成功圖示 */
.swal2-success .swal2-success-ring {
  border-color: var(--color-success) !important;
}

.swal2-success .swal2-success-fix {
  background-color: var(--color-success) !important;
}

.swal2-success [class^='swal2-success-line'] {
  background-color: var(--color-success) !important;
}

/* 錯誤圖示 */
.swal2-error .swal2-x-mark {
  border-color: var(--color-error) !important;
}

.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--color-error) !important;
}

/* 警告圖示 */
.swal2-warning .swal2-warning-outline {
  border-color: var(--color-warning) !important;
}

.swal2-warning .swal2-warning-inner {
  background-color: var(--color-warning) !important;
}

/* 資訊圖示 */
.swal2-info .swal2-info-outline {
  border-color: var(--color-info) !important;
}

.swal2-info .swal2-info-inner {
  background-color: var(--color-info) !important;
}

/* 問號圖示 */
.swal2-question .swal2-question-mark {
  border-color: var(--color-tertiary) !important;
  color: var(--color-tertiary) !important;
}

/* Toast 樣式 */
.swal2-toast {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-lg) !important;
}

.swal2-toast .swal2-title {
  color: var(--text-primary) !important;
}

.swal2-toast .swal2-html-container {
  color: var(--text-secondary) !important;
}

.btn-system-outline {
  background-color: var(--btn-outline-bg);
  color: var(--btn-outline-text);
  border: 1px solid var(--btn-outline-border);
  transition: all 0.2s ease-in-out;
}

.btn-system-outline:hover {
  background-color: var(--btn-outline-bg-hover);
  color: var(--btn-outline-text-hover);
}

.btn-system-ghost {
  background-color: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border: 1px solid var(--btn-ghost-border);
  transition: all 0.2s ease-in-out;
}

.btn-system-ghost:hover {
  background-color: var(--btn-ghost-bg-hover);
}

/* === 卡片樣式類 === */
.card-system {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: all 0.2s ease-in-out;
}

.card-system:hover {
  box-shadow: var(--card-shadow-hover);
}

.card-system-secondary {
  background-color: var(--card-bg-secondary);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

/* === 毛玻璃效果類 === */
.glass-system {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-system-secondary {
  background: var(--glass-bg-secondary);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-system-primary {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-primary);
  box-shadow: var(--glass-shadow);
}

.glass-system-accent {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-accent);
  box-shadow: var(--glass-shadow);
}

.glass-system-tertiary {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-tertiary);
  box-shadow: var(--glass-shadow);
}

.glass-system-strong {
  background: var(--glass-bg-secondary);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* === 陰影工具類 === */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-secondary { box-shadow: var(--shadow-secondary) !important; }
.shadow-accent { box-shadow: var(--shadow-accent) !important; }
.shadow-tertiary { box-shadow: var(--shadow-tertiary) !important; }

/* === 漸變背景工具類 === */
.gradient-primary { background: var(--gradient-primary) !important; }
.gradient-secondary { background: var(--gradient-secondary) !important; }
.gradient-accent { background: var(--gradient-accent) !important; }
.gradient-tertiary { background: var(--gradient-tertiary) !important; }
.gradient-neutral { background: var(--gradient-neutral) !important; }
.gradient-page { background: var(--gradient-page) !important; }

/* === 懸停效果工具類 === */
.hover-primary:hover { background-color: var(--color-primary-500) !important; }
.hover-secondary:hover { background-color: var(--color-secondary-500) !important; }
.hover-accent:hover { background-color: var(--color-accent-500) !important; }
.hover-tertiary:hover { background-color: var(--color-tertiary-500) !important; }

.hover-primary-light:hover { background-color: var(--color-primary-100) !important; }
.hover-secondary-light:hover { background-color: var(--color-secondary-100) !important; }
.hover-accent-light:hover { background-color: var(--color-accent-100) !important; }
.hover-tertiary-light:hover { background-color: var(--color-tertiary-100) !important; }

/* === 後台管理系統專用工具類 === */
.admin-sidebar-bg { background: var(--admin-sidebar-bg) !important; }
.admin-sidebar-bg-alt { background: var(--admin-sidebar-bg-alt) !important; }

.admin-badge {
  background-color: var(--admin-badge-bg) !important;
  color: var(--admin-badge-text) !important;
  border: 1px solid var(--admin-badge-border) !important;
}

.table-system {
  border-collapse: collapse;
  width: 100%;
}

.table-system th {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
  border-bottom: 1px solid var(--table-border) !important;
}

.table-system td {
  border-bottom: 1px solid var(--table-border) !important;
}

.table-system tr:hover {
  background-color: var(--table-row-hover) !important;
}

.sidebar-item-active {
  background-color: var(--sidebar-item-active) !important;
}

.sidebar-item-hover:hover {
  background-color: var(--sidebar-item-hover) !important;
}

.sidebar-submenu-bg {
  background-color: var(--sidebar-submenu-bg) !important;
}

.sidebar-submenu-hover:hover {
  background-color: var(--sidebar-submenu-hover) !important;
}

.header-system {
  background-color: var(--header-bg) !important;
  box-shadow: var(--header-shadow) !important;
}

.header-toggle {
  color: var(--header-toggle-color) !important;
}

.header-toggle:hover {
  color: var(--header-toggle-hover) !important;
}