@media (prefers-color-scheme: dark) {
    :root {
      /* 20260716 renhao add - 原生控件（datetime-local 日曆圖示等）改用深色渲染 */
      color-scheme: dark;
      --primary: #264b5d;
      --primary-fg: #f7f7f7;
  
      --body-fg: #eeeeee;
      --body-bg: #121212;
      --body-quiet-color: #e0e0e0;
      --body-loud-color: #ffffff;
  
      --breadcrumbs-link-fg: #e0e0e0;
      --breadcrumbs-bg: var(--primary);
  
      --link-fg: #81d4fa;
      --link-hover-color: #4ac1f7;
      --link-selected-fg: #6f94c6;
  
      --hairline-color: #272727;
      --border-color: #353535;
  
      --error-fg: #e35f5f;
      --message-success-bg: #006b1b;
      --message-warning-bg: #583305;
      --message-error-bg: #570808;
  
      --darkened-bg: #212121;
      --selected-bg: #1b1b1b;
      --selected-row: #00363a;
  
      --close-button-bg: #333333;
      --close-button-hover-bg: #666666;

      /* 側邊欄自訂變數 - 深色模式覆蓋 */
      --sidebar-bg-light: #212121;                /* var(--darkened-bg) */
      --sidebar-text-light: #eeeeee;              /* var(--body-fg) */
      --sidebar-button-bg-light: rgba(255, 255, 255, 0.1);
      --sidebar-button-hover-bg-light: rgba(255, 255, 255, 0.15);
      --sidebar-button-active-bg-light: #264b5d;  /* var(--primary) */

      /* 儀表板專用變數 - 深色模式覆蓋 */
      --dashboard-bg: #121212;
      --kpi-pending-bg: linear-gradient(135deg, #d32f2f, #c62828);
      --kpi-inprogress-bg: linear-gradient(135deg, #26a69a, #00897b);
      --kpi-completed-week-bg: linear-gradient(135deg, #0288d1, #7cb342);
      --kpi-completed-month-bg: linear-gradient(135deg, #ab47bc, #e91e63);

      /* 通知顏色 - 深色模式 */
      --notification-urgent-fg: #ef5350;
      --notification-normal-fg: #ffa726;
      --notification-maintenance-fg: #42a5f5;

      /* 優先級標籤 - 深色模式 */
      --priority-high-bg: #5d1f1f;
      --priority-high-fg: #ef5350;
      --priority-medium-bg: #5d4a1f;
      --priority-medium-fg: #ffa726;
      --priority-low-bg: #1f5d2e;
      --priority-low-fg: #66bb6a;
      --priority-critical-bg: #b71c1c;
      --priority-critical-fg: #ffffff;

      /* 狀態標籤 - 深色模式 */
      --status-pending-bg: #5d1f1f;
      --status-pending-fg: #ef5350;
      --status-inprogress-bg: #1f3a5d;
      --status-inprogress-fg: #42a5f5;
      --status-completed-bg: #1f5d2e;
      --status-completed-fg: #66bb6a;
      --status-assigned-bg: #5d511f;
      --status-assigned-fg: #ffb74d;
      --status-cancelled-bg: #2a2a2a;
      --status-cancelled-fg: #bdbdbd;

      /* 狀態卡片專用漸層背景 - 深色模式 */
      --status-card-bg: linear-gradient(135deg, #264b5d 0%, #1a3a4a 100%);
      --status-card-fg: #f7f7f7;

      /* 警告與成功按鈕 - 深色模式 */
      --alert-danger-bg: #d32f2f;
      --alert-danger-fg: #fff;
      --button-success-bg: #388e3c;
      --button-success-hover-bg: #2e7d32;
      --button-danger-bg: #d32f2f;
      --button-danger-hover-bg: #c62828;
      --warning-color: #ffa726;
      --success-fg: #2ecc71;
      --overdue-bg: #3a1f1f;
      --overdue-hover-bg: #4a2929;

      /* 其他通用變數 - 深色模式 */
      --placeholder-color: #757575;
      --table-header-bg: #1e1e1e;
      --table-header-fg: #e0e0e0;
      --table-header-border: #4a4a4a;   /* 原 #3a3a3a，提高 26% 對比度 */
      --table-row-border: #353535;      /* 原 #2a2a2a，提高 30% 對比度 */

      /* 卡片專用變數 - 深色模式（混合策略） */
      --card-bg: #1e1e1e;                             /* 1dp elevation */
      --card-border: rgba(255, 255, 255, 0.08);       /* 極細白色半透明邊框 */

      /* 邊框對比度優化（中度調整） */
      --hairline-color: #333333;        /* 原 #272727，提高 25% 對比度 */
      --border-color: #404040;          /* 原 #353535，提高 20% 對比度 */

      /* Scrollbar 樣式變數 - 深色模式 */
      --scrollbar-bg: #1e1e1e;
      --scrollbar-thumb: #404040;
      --scrollbar-thumb-hover: #555555;

      /* 保養表單專用變數 - 深色模式 */
      --maintenance-bg: #121212;
      --maintenance-primary: #5a8fc7;
      --maintenance-primary-hover: #6ba3d9;
      --maintenance-card-bg: #1e1e1e;
      --maintenance-secondary-bg: #252525;
      --maintenance-border: #404040;
      --maintenance-border-light: #353535;
      --maintenance-quiet-color: #9e9e9e;
      --maintenance-hover-bg: #1a3a4a;
      --maintenance-table-header-bg: #2a2a2a;
      --maintenance-btn-primary-bg: #1565c0;
      --maintenance-btn-primary-hover-bg: #1976d2;
      --maintenance-btn-secondary-bg: #616161;
      --maintenance-btn-outline-bg: #1e1e1e;
      --maintenance-btn-outline-fg: #81d4fa;
      --maintenance-btn-outline-border: #5a8fc7;
      --maintenance-modal-overlay: rgba(0, 0, 0, 0.85);
      --maintenance-canvas-border: #555555;
    }
  }


html[data-theme="dark"] {
    /* 20260716 renhao add - 原生控件（datetime-local 日曆圖示等）改用深色渲染 */
    color-scheme: dark;
    --primary: #264b5d;
    --primary-fg: #f7f7f7;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: var(--primary);

    --link-fg: #81d4fa;
    --link-hover-color: #4ac1f7;
    --link-selected-fg: #6f94c6;

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: #00363a;

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;

    /* 側邊欄自訂變數 - 深色模式覆蓋 */
    --sidebar-bg-light: #212121;                /* var(--darkened-bg) */
    --sidebar-text-light: #eeeeee;              /* var(--body-fg) */
    --sidebar-button-bg-light: rgba(255, 255, 255, 0.1);
    --sidebar-button-hover-bg-light: rgba(255, 255, 255, 0.15);
    --sidebar-button-active-bg-light: #264b5d;  /* var(--primary) */

    /* 儀表板專用變數 - 深色模式覆蓋 */
    --dashboard-bg: #121212;
    --kpi-pending-bg: linear-gradient(135deg, #d32f2f, #c62828);
    --kpi-inprogress-bg: linear-gradient(135deg, #26a69a, #00897b);
    --kpi-completed-week-bg: linear-gradient(135deg, #0288d1, #7cb342);
    --kpi-completed-month-bg: linear-gradient(135deg, #ab47bc, #e91e63);

    /* 通知顏色 - 深色模式 */
    --notification-urgent-fg: #ef5350;
    --notification-normal-fg: #ffa726;
    --notification-maintenance-fg: #42a5f5;

    /* 優先級標籤 - 深色模式 */
    --priority-high-bg: #5d1f1f;
    --priority-high-fg: #ef5350;
    --priority-medium-bg: #5d4a1f;
    --priority-medium-fg: #ffa726;
    --priority-low-bg: #1f5d2e;
    --priority-low-fg: #66bb6a;
    --priority-critical-bg: #b71c1c;
    --priority-critical-fg: #ffffff;

    /* 狀態標籤 - 深色模式 */
    --status-pending-bg: #5d1f1f;
    --status-pending-fg: #ef5350;
    --status-inprogress-bg: #1f3a5d;
    --status-inprogress-fg: #42a5f5;
    --status-completed-bg: #1f5d2e;
    --status-completed-fg: #66bb6a;
    --status-assigned-bg: #5d511f;
    --status-assigned-fg: #ffb74d;
    --status-cancelled-bg: #2a2a2a;
    --status-cancelled-fg: #bdbdbd;

    /* 狀態卡片專用漸層背景 - 深色模式 */
    --status-card-bg: linear-gradient(135deg, #264b5d 0%, #1a3a4a 100%);
    --status-card-fg: #f7f7f7;

    /* 警告與成功按鈕 - 深色模式 */
    --alert-danger-bg: #d32f2f;
    --alert-danger-fg: #fff;
    --button-success-bg: #388e3c;
    --button-success-hover-bg: #2e7d32;
    --button-danger-bg: #d32f2f;
    --button-danger-hover-bg: #c62828;
    --warning-color: #ffa726;
    --success-fg: #2ecc71;
    --overdue-bg: #3a1f1f;
    --overdue-hover-bg: #4a2929;

    /* 其他通用變數 - 深色模式 */
    --placeholder-color: #757575;
    --table-header-bg: #1e1e1e;
    --table-header-fg: #e0e0e0;
    --table-header-border: #4a4a4a;   /* 原 #3a3a3a，提高 26% 對比度 */
    --table-row-border: #353535;      /* 原 #2a2a2a，提高 30% 對比度 */

    /* 卡片專用變數 - 深色模式（混合策略） */
    --card-bg: #1e1e1e;                             /* 1dp elevation */
    --card-border: rgba(255, 255, 255, 0.08);       /* 極細白色半透明邊框 */

    /* 邊框對比度優化（中度調整） */
    --hairline-color: #333333;        /* 原 #272727，提高 25% 對比度 */
    --border-color: #404040;          /* 原 #353535，提高 20% 對比度 */

    /* Scrollbar 樣式變數 - 深色模式 */
    --scrollbar-bg: #1e1e1e;
    --scrollbar-thumb: #404040;
    --scrollbar-thumb-hover: #555555;

    /* 保養表單專用變數 - 深色模式 */
    --maintenance-bg: #121212;
    --maintenance-primary: #5a8fc7;
    --maintenance-primary-hover: #6ba3d9;
    --maintenance-card-bg: #1e1e1e;
    --maintenance-secondary-bg: #252525;
    --maintenance-border: #404040;
    --maintenance-border-light: #353535;
    --maintenance-quiet-color: #9e9e9e;
    --maintenance-hover-bg: #1a3a4a;
    --maintenance-table-header-bg: #2a2a2a;
    --maintenance-btn-primary-bg: #1565c0;
    --maintenance-btn-primary-hover-bg: #1976d2;
    --maintenance-btn-secondary-bg: #616161;
    --maintenance-btn-outline-bg: #1e1e1e;
    --maintenance-btn-outline-fg: #81d4fa;
    --maintenance-btn-outline-border: #5a8fc7;
    --maintenance-modal-overlay: rgba(0, 0, 0, 0.85);
    --maintenance-canvas-border: #555555;
}

/* THEME SWITCH */
.theme-toggle {
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
    vertical-align: middle;
    margin-inline-start: 5px;
    margin-top: -1px;
}

.theme-toggle svg {
    vertical-align: middle;
    height: 1rem;
    width: 1rem;
    display: none;
}

/*
Fully hide screen reader text so we only show the one matching the current
theme.
*/
.theme-toggle .visually-hidden {
    display: none;
}

html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
    display: block;
}

html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
    display: block;
}

html[data-theme="light"] .theme-toggle .theme-label-when-light {
    display: block;
}

/* ICONS */
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
    fill: var(--header-link-color);
    color: var(--header-bg);
}

html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
    display: block;
}

html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
    display: block;
}

html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
    display: block;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

/* ========================================
   Select2 全域 CSS 變數適配 20260211 renhao add
   適用所有頁面的 Select2（default 主題）
   ======================================== */

/* 下拉選單容器 */
.select2-container--default .select2-dropdown {
  background-color: var(--body-bg) !important;
  border-color: var(--border-color) !important;
}

/* 選項列表容器 */
.select2-container--default .select2-results > .select2-results__options {
  background: var(--body-bg);
  color: var(--body-fg);
}

/* 選項 */
.select2-container--default .select2-results__option {
  color: var(--body-fg);
}

/* 已選中選項 */
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--selected-bg) !important;
  color: var(--body-fg) !important;
}

/* 滑鼠懸停選項 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
  color: var(--primary-fg) !important;
}

/* 選擇框 */
.select2-container--default .select2-selection--single {
  background-color: var(--body-bg) !important;
  border-color: var(--border-color) !important;
}

/* 選擇框文字 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--body-fg) !important;
}

/* 搜尋框 */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--body-bg) !important;
  color: var(--body-fg) !important;
  border-color: var(--border-color) !important;
}

/* Placeholder 文字 */
.select2-container--default .select2-selection__placeholder {
  color: var(--placeholder-color) !important;
}

/* 停用狀態 */
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--darkened-bg) !important;
}

/* 下拉選單箭頭 */
.select2-container--default .select2-selection__arrow b {
  border-color: var(--body-fg) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--body-fg) transparent !important;
}