/* ===== Dark Mode Styles ===== */
/* 使用 CSS 變數覆寫實現深色模式 */
/* 色板：中性灰色系 — 無藍色調 */

/* --- 防止頁面載入時的白色閃爍 --- */
html.no-transition,
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
    transition: none !important;
}

/* ===================================================
   核心：覆寫 :root 的語義化變數
   只要 html 有 data-theme="dark"，所有引用變數的元素自動變色
   =================================================== */
html[data-theme="dark"] {
    /* --- 背景 --- */
    --bg-body: #1a1a1a;
    --bg-surface: #252525;
    --bg-surface-secondary: #2d2d2d;
    --bg-surface-hover: #333333;
    --bg-elevated: #2d2d2d;
    --bg-input: #1e1e1e;
    --bg-input-readonly: #252525;

    /* --- 文字 --- */
    --text-primary: #e0e0e0;
    --text-secondary: #c0c0c0;
    --text-muted: #999999;
    --text-black: #252525;

    /* --- 邊框 --- */
    --border-color: #3a3a3a;
    --border-color-light: #3a3a3a;
    --light-color: #252525;
    --dark-color: #e0e0e0;

    /* --- 柔和色系（降低對比度，提升可讀性） --- */
    --primary-soft: #6ea8fe;
    /* Bootstrap Blue-300 */
    --secondary-soft: #a7acb1;
    /* Gray-400 */
    --success-soft: #75b798;
    /* Green-300 */
    --danger-soft: #ea868f;
    /* Red-300 */
    --warning-soft: #ffda6a;
    /* Yellow-300 */
    --info-soft: #6edff6;
    /* Cyan-300 */

    /* --- 覆寫 Bootstrap 變數 (讓所有 Bootstrap 元件自動套用柔和色系) --- */
    --bs-primary: var(--primary-soft);
    --bs-secondary: var(--secondary-soft);
    --bs-success: var(--success-soft);
    --bs-danger: var(--danger-soft);
    --bs-warning: var(--warning-soft);
    --bs-info: var(--info-soft);
    --bs-light: var(--bg-surface-hover);
    --bs-dark: var(--bg-body);

    /* --- 卡片 --- */
    --card-bg: #252525;
    --card-header-bg: #2d2d2d;
    --card-border: #3a3a3a;

    /* --- 表格 --- */
    --table-header-bg: #2d2d2d;
    --table-header-color: #c0c0c0;
    --table-border: #3a3a3a;
    --table-hover-bg: rgba(255, 255, 255, 0.06);
    --table-stripe-bg: rgba(255, 255, 255, 0.03);

    /* --- 導航列 --- */
    --navbar-bg: linear-gradient(135deg, #222222 0%, #2a2a2a 100%);
    --navbar-border: #3a3a3a;

    /* --- 下拉選單 --- */
    --dropdown-bg: #252525;
    --dropdown-hover-bg: #333333;
    --dropdown-border: #3a3a3a;
    --dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);

    /* --- 模態框 --- */
    --modal-bg: #252525;
    --modal-border: #3a3a3a;

    /* --- 滾動條 --- */
    --scrollbar-track: #1a1a1a;
    --scrollbar-thumb: #3a3a3a;
    --scrollbar-thumb-hover: #555555;

    /* --- 載入 --- */
    --loading-overlay: rgba(26, 26, 26, 0.85);
    --loading-container-bg: #2d2d2d;
    --loading-container-border: rgba(255, 255, 255, 0.1);

    /* --- 頁腳 --- */
    --bg-footer: #111111;
    --text-footer: #c0c0c0;

    /* --- 陰影（深色模式加深） --- */
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

/* ===================================================
   以下為少量「必須用選擇器覆蓋」的規則
   （Bootstrap 硬編碼的樣式、第三方函式庫等）
   =================================================== */

/* --- body 基礎 --- */
body[data-theme="dark"] {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* --- 卡片 --- */
body[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

body[data-theme="dark"] .card-header {
    background-color: var(--card-header-bg);
    border-bottom-color: var(--card-border);
    color: var(--text-primary);
}

body[data-theme="dark"] .card-footer {
    background-color: var(--card-header-bg);
    border-top-color: var(--card-border);
}

/* --- 導航列 --- */
body[data-theme="dark"] .navbar {
    background: var(--navbar-bg) !important;
    border-bottom-color: var(--navbar-border);
}

/* ===================================================
   Warm Mode Overrides (暖色模式覆寫)
   =================================================== */
body[data-theme="warm"] {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

body[data-theme="warm"] .card {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

body[data-theme="warm"] .card-header,
body[data-theme="warm"] .card-footer {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="warm"] .navbar {
    background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%) !important;
    border-bottom-color: var(--border-color);
}

body[data-theme="warm"] .navbar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="warm"] .navbar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="warm"] .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

body[data-theme="warm"] .table th {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="warm"] .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--table-stripe-bg);
}

body[data-theme="warm"] .table-hover tbody tr:hover {
    background-color: var(--table-hover-bg);
}

body[data-theme="warm"] .dropdown-menu {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

body[data-theme="warm"] .dropdown-item {
    color: var(--text-primary);
}

body[data-theme="warm"] .dropdown-item:hover,
body[data-theme="warm"] .dropdown-item:focus {
    background-color: var(--bg-surface-secondary);
}

body[data-theme="warm"] .form-control,
body[data-theme="warm"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

body[data-theme="warm"] .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(141, 110, 99, 0.25);
}

body[data-theme="warm"] .modal-content {
    background-color: var(--bg-surface);
}

body[data-theme="warm"] .modal-header,
body[data-theme="warm"] .modal-footer {
    border-color: var(--border-color);
}

body[data-theme="warm"] .btn-outline-dark {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

body[data-theme="warm"] .btn-outline-dark:hover {
    background-color: var(--text-primary);
    color: #fff;
}

body[data-theme="warm"] .dropdown-divider {
    border-top-color: var(--border-color);
}

body[data-theme="warm"] .text-muted {
    color: var(--text-muted) !important;
}

body[data-theme="warm"] .bg-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary);
}

body[data-theme="warm"] .bg-white {
    background-color: var(--bg-surface) !important;
}

/* 暖色模式下的導航標籤 */
body[data-theme="warm"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

body[data-theme="dark"] .navbar-nav .nav-link {
    color: #c0c0c0 !important;
}

body[data-theme="dark"] .navbar-nav .nav-link:hover,
body[data-theme="dark"] .navbar-nav .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

body[data-theme="dark"] .navbar-toggler {
    border-color: var(--border-color);
}

body[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(192, 192, 192, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* --- 表單控制項（覆蓋 Bootstrap） --- */
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-input);
    border-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(27, 110, 194, 0.25);
}

body[data-theme="dark"] .form-control::placeholder {
    color: #666666;
}

body[data-theme="dark"] .form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

body[data-theme="dark"] .form-check-input:checked {
    background-color: #1b6ec2;
    border-color: #1b6ec2;
}

body[data-theme="dark"] .input-group-text {
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body[data-theme="dark"] .form-label {
    color: var(--text-secondary);
}

/* --- 表格（覆蓋 Bootstrap） --- */
body[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--table-border);
}

body[data-theme="dark"] .table th {
    background-color: var(--table-header-bg);
    border-color: var(--table-border);
    color: var(--table-header-color);
}

body[data-theme="dark"] .table td {
    border-color: var(--table-border);
}

body[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--table-stripe-bg);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--table-hover-bg);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-bordered,
body[data-theme="dark"] .table-bordered th,
body[data-theme="dark"] .table-bordered td {
    border-color: var(--table-border);
}

body[data-theme="dark"] .table-warning {
    background-color: rgba(255, 193, 7, 0.08) !important;
    color: #ffe082;
}

/* --- 下拉選單（覆蓋 Bootstrap） --- */
body[data-theme="dark"] .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
    box-shadow: var(--dropdown-shadow);
}

body[data-theme="dark"] .dropdown-item {
    color: var(--text-secondary);
}

body[data-theme="dark"] .dropdown-item:hover,
body[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--dropdown-hover-bg);
    color: var(--text-primary);
}

body[data-theme="dark"] .dropdown-item.active {
    background-color: rgba(27, 110, 194, 0.3);
    color: var(--text-primary);
}

body[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-color);
}

body[data-theme="dark"] .dropdown-header {
    color: var(--text-muted);
}

/* --- 模態框（覆蓋 Bootstrap） --- */
body[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--text-primary);
}

body[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

body[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

body[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Bootstrap 工具類覆寫 --- */
body[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary);
}

body[data-theme="dark"] .bg-white {
    background-color: var(--bg-surface) !important;
}

body[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

body[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .text-black {
    color: var(--text-black) !important;
}

body[data-theme="dark"] .text-body {
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

body[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

body[data-theme="dark"] .border-top {
    border-top-color: var(--border-color) !important;
}

body[data-theme="dark"] .shadow-sm {
    box-shadow: var(--box-shadow) !important;
}

body[data-theme="dark"] .shadow {
    box-shadow: var(--box-shadow-lg) !important;
}

/* --- 按鈕（使用柔和色系降低對比度） --- */
body[data-theme="dark"] .btn-outline-primary {
    color: var(--primary-soft);
    border-color: var(--primary-soft);
}

body[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--primary-soft);
    color: #000;
    border-color: var(--primary-soft);
}

body[data-theme="dark"] .btn-outline-secondary {
    color: var(--secondary-soft);
    border-color: var(--secondary-soft);
}

body[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--secondary-soft);
    color: #000;
    border-color: var(--secondary-soft);
}

body[data-theme="dark"] .btn-outline-success {
    color: var(--success-soft);
    border-color: var(--success-soft);
}

body[data-theme="dark"] .btn-outline-success:hover {
    background-color: var(--success-soft);
    color: #000;
    border-color: var(--success-soft);
}

body[data-theme="dark"] .btn-outline-danger {
    color: var(--danger-soft);
    border-color: var(--danger-soft);
}

body[data-theme="dark"] .btn-outline-danger:hover {
    background-color: var(--danger-soft);
    color: #000;
    border-color: var(--danger-soft);
}

body[data-theme="dark"] .btn-outline-warning {
    color: var(--warning-soft);
    border-color: var(--warning-soft);
}

body[data-theme="dark"] .btn-outline-warning:hover {
    background-color: var(--warning-soft);
    color: #000;
    border-color: var(--warning-soft);
}

body[data-theme="dark"] .btn-outline-info {
    color: var(--info-soft);
    border-color: var(--info-soft);
}

body[data-theme="dark"] .btn-outline-info:hover {
    background-color: var(--info-soft);
    color: #000;
    border-color: var(--info-soft);
}

body[data-theme="dark"] .btn-light {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="dark"] .btn-light:hover {
    background-color: #404040;
    color: var(--text-primary);
    --chart-grid-color: #444444;
}

/* --- Warm Mode Variables (暖色模式) --- */
[data-theme="warm"] {
    --primary-color: #8d6e63;
    /* Warm Brown */
    --primary-hover: #6d4c41;
    --secondary-color: #a1887f;
    --bg-body: #fdf6e3;
    /* Solarized Light / Sepia background */
    --bg-surface: #fffbf0;
    /* Slightly lighter warm surface */
    --bg-surface-secondary: #fcefdc;
    --text-primary: #5d4037;
    /* Dark Brown text */
    --text-secondary: #8d6e63;
    --text-muted: #a1887f;
    --border-color: #d7ccc8;
    --border-color-light: #efebe9;
    --input-bg: #fffbf0;
    --input-border: #d7ccc8;
    --table-hover-bg: #fbe9e7;
    --table-stripe-bg: #fff8e1;
    --card-shadow: 0 4px 6px rgba(93, 64, 55, 0.1);
    --scrollbar-track: #fdf6e3;
    --scrollbar-thumb: #d7ccc8;
    --scrollbar-thumb-hover: #a1887f;
    --chart-grid-color: #e0e0e0;
}

/* --- 背景色工具類別（使用柔和色系 + 深色文字以確保可讀性） --- */
body[data-theme="dark"] .bg-primary {
    background-color: var(--primary-soft) !important;
    color: #000 !important;
}

body[data-theme="dark"] .bg-secondary {
    background-color: var(--secondary-soft) !important;
    color: #000 !important;
}

body[data-theme="dark"] .bg-success {
    background-color: var(--success-soft) !important;
    color: #000 !important;
}

body[data-theme="dark"] .bg-danger {
    background-color: var(--danger-soft) !important;
    color: #000 !important;
}

body[data-theme="dark"] .bg-warning {
    background-color: var(--warning-soft) !important;
    color: #000 !important;
}

body[data-theme="dark"] .bg-info {
    background-color: var(--info-soft) !important;
    color: #000 !important;
}

/* --- 文字顏色工具類別 --- */
body[data-theme="dark"] .text-primary {
    color: var(--primary-soft) !important;
}

body[data-theme="dark"] .text-secondary {
    color: var(--secondary-soft) !important;
}

body[data-theme="dark"] .text-success {
    color: var(--success-soft) !important;
}

body[data-theme="dark"] .text-danger {
    color: var(--danger-soft) !important;
}

body[data-theme="dark"] .text-warning {
    color: var(--warning-soft) !important;
}

body[data-theme="dark"] .text-info {
    color: var(--info-soft) !important;
}

/* --- 連結顏色工具類別 hover --- */
body[data-theme="dark"] a.text-primary:hover,
body[data-theme="dark"] a.text-secondary:hover,
body[data-theme="dark"] a.text-success:hover,
body[data-theme="dark"] a.text-danger:hover,
body[data-theme="dark"] a.text-warning:hover,
body[data-theme="dark"] a.text-info:hover {
    filter: brightness(1.1);
}

/* --- 邊框顏色工具類別 --- */
body[data-theme="dark"] .border-primary {
    border-color: var(--primary-soft) !important;
}

body[data-theme="dark"] .border-secondary {
    border-color: var(--secondary-soft) !important;
}

body[data-theme="dark"] .border-success {
    border-color: var(--success-soft) !important;
}

body[data-theme="dark"] .border-danger {
    border-color: var(--danger-soft) !important;
}

body[data-theme="dark"] .border-warning {
    border-color: var(--warning-soft) !important;
}

body[data-theme="dark"] .border-info {
    border-color: var(--info-soft) !important;
}

/* --- Badge & Solid Buttons (確保黑字以提升可讀性) --- */
body[data-theme="dark"] .badge.bg-primary,
body[data-theme="dark"] .badge.bg-secondary,
body[data-theme="dark"] .badge.bg-success,
body[data-theme="dark"] .badge.bg-danger,
body[data-theme="dark"] .badge.bg-warning,
body[data-theme="dark"] .badge.bg-info,
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] .btn-success,
body[data-theme="dark"] .btn-danger,
body[data-theme="dark"] .btn-warning,
body[data-theme="dark"] .btn-info {
    color: #000 !important;
}

/* --- 提示框（Alert） --- */
body[data-theme="dark"] .alert-primary {
    background-color: rgba(27, 110, 194, 0.15);
    border-color: rgba(27, 110, 194, 0.25);
    color: #6db3e8;
}

body[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.25);
    color: #75d6a7;
}

body[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.2);
    color: #ffe082;
}

body[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.25);
    color: #f5a0a8;
}

body[data-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.12);
    border-color: rgba(13, 202, 240, 0.2);
    color: #80e5f5;
}

body[data-theme="dark"] .alert-secondary {
    background-color: rgba(108, 117, 125, 0.15);
    border-color: rgba(108, 117, 125, 0.25);
    color: #b0b0b0;
}

/* --- 儀表板樣式修正 (Dashboard Specifics) --- */

/* 左側邊框 */
body[data-theme="dark"] .border-left-primary {
    border-left-color: var(--primary-soft) !important;
}

body[data-theme="dark"] .border-left-secondary {
    border-left-color: var(--secondary-soft) !important;
}

body[data-theme="dark"] .border-left-success {
    border-left-color: var(--success-soft) !important;
}

body[data-theme="dark"] .border-left-danger {
    border-left-color: var(--danger-soft) !important;
}

body[data-theme="dark"] .border-left-warning {
    border-left-color: var(--warning-soft) !important;
}

body[data-theme="dark"] .border-left-info {
    border-left-color: var(--info-soft) !important;
}

/* 儀表板文字顏色反轉 */
body[data-theme="dark"] .text-gray-800 {
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .text-gray-300 {
    color: var(--text-muted) !important;
}

/* 載入指示器 */
body[data-theme="dark"] .loading-spinner,
body[data-theme="dark"] .chart-loading::before {
    border-top-color: var(--primary-soft);
    border-left-color: rgba(255, 255, 255, 0.1);
    border-right-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* 逾期告警 (柔和化) */
body[data-theme="dark"] .overdue-emergency {
    background-color: rgba(234, 134, 143, 0.1);
    border-left-color: var(--danger-soft);
    color: var(--danger-soft);
}

body[data-theme="dark"] .overdue-critical {
    background-color: rgba(253, 126, 20, 0.1);
    border-left-color: #ffda6a;
}

body[data-theme="dark"] .overdue-warning {
    background-color: rgba(255, 218, 106, 0.1);
    border-left-color: var(--warning-soft);
}

/* 績效表格表頭 */
body[data-theme="dark"] .performance-table th {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    color: var(--text-primary);
}

/* 標籤統計卡片 Hover */
body[data-theme="dark"] .tag-stat-card:hover {
    border-color: var(--primary-soft);
}

/* 徽章漸層 */
body[data-theme="dark"] .badge-gradient {
    background: linear-gradient(45deg, var(--primary-soft), #5a95f5);
    color: #000;
}

/* --- 分頁（覆蓋 Bootstrap） --- */
body[data-theme="dark"] .page-link {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body[data-theme="dark"] .page-link:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--primary-soft);
    border-color: var(--primary-soft);
    color: #000;
}

body[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-body);
    border-color: var(--border-color);
    color: #555555;
}

/* --- 列表群組（覆蓋 Bootstrap） --- */
body[data-theme="dark"] .list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-elevated);
}

body[data-theme="dark"] .list-group-item.active {
    background-color: var(--primary-soft);
    border-color: var(--primary-soft);
    color: #000;
}

/* --- 手風琴（覆蓋 Bootstrap） --- */
body[data-theme="dark"] .accordion-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

/* --- 標籤系統 (Tags) --- */
body[data-theme="dark"] .custom-tag.tag-primary {
    background-color: var(--primary-soft);
    color: #000;
    border-color: var(--primary-soft);
}

body[data-theme="dark"] .custom-tag.tag-secondary {
    background-color: var(--secondary-soft);
    color: #000;
    border-color: var(--secondary-soft);
}

body[data-theme="dark"] .custom-tag.tag-success {
    background-color: var(--success-soft);
    color: #000;
    border-color: var(--success-soft);
}

body[data-theme="dark"] .custom-tag.tag-danger {
    background-color: var(--danger-soft);
    color: #000;
    border-color: var(--danger-soft);
}

body[data-theme="dark"] .custom-tag.tag-warning {
    background-color: var(--warning-soft);
    color: #000;
    border-color: var(--warning-soft);
}

body[data-theme="dark"] .custom-tag.tag-info {
    background-color: var(--info-soft);
    color: #000;
    border-color: var(--info-soft);
}

body[data-theme="dark"] .custom-tag.tag-light {
    background-color: var(--bg-surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body[data-theme="dark"] .custom-tag.tag-dark {
    background-color: var(--bg-body);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* --- 通知系統 (Notifications) --- */
body[data-theme="dark"] .notification-action-btn.primary {
    background-color: var(--primary-soft);
    color: #000;
    border-color: var(--primary-soft);
}

body[data-theme="dark"] .notification-action-btn.primary:hover {
    background-color: var(--primary-soft);
    filter: brightness(0.9);
}

body[data-theme="dark"] .notification-type.urgent {
    background-color: var(--danger-soft);
    color: #000;
}

body[data-theme="dark"] .notification-type.info {
    background-color: var(--info-soft);
    color: #000;
}

body[data-theme="dark"] .notification-type.success {
    background-color: var(--success-soft);
    color: #000;
}

body[data-theme="dark"] .notification-type.warning {
    background-color: var(--warning-soft);
    color: #000;
}

body[data-theme="dark"] .floating-notification.success {
    border-left-color: var(--success-soft);
}

body[data-theme="dark"] .floating-notification.error {
    border-left-color: var(--danger-soft);
}

body[data-theme="dark"] .floating-notification.warning {
    border-left-color: var(--warning-soft);
}

body[data-theme="dark"] .floating-notification.info {
    border-left-color: var(--info-soft);
}

body[data-theme="dark"] .accordion-button {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

body[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

body[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(200%);
}

body[data-theme="dark"] .accordion-body {
    background-color: var(--bg-surface);
}

/* --- 導航標籤（覆蓋 Bootstrap） --- */
body[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

/* --- 深色模式下 btn-outline-dark 反轉為亮色 --- */
body[data-theme="dark"] .btn-outline-dark {
    color: #e0e0e0;
    border-color: #6c757d;
    background-color: transparent;
}

body[data-theme="dark"] .btn-outline-dark:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #adb5bd;
}

/* --- Navbar Theme Toggle --- */
.theme-toggle-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-decoration: none !important;
    /* Default light border */
}

.theme-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

.theme-toggle-btn i {
    font-size: 1.1rem;
    transition: all 0.3s ease;

}

/* Dark Mode styles for toggle */
body[data-theme="dark"] .theme-toggle-btn {
    color: #ffd700;
    /* Gold color for sun/moon */
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

body[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
}

/* Light Mode styles for toggle */
body:not([data-theme="dark"]) .theme-toggle-btn {
    color: #555;
    background-color: transparent;
}

body:not([data-theme="dark"]) .theme-toggle-btn:hover {
    color: #333;
    background-color: rgba(0, 0, 0, 0.05);
}

body[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

body[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color) var(--border-color) transparent;
}

body[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-surface);
    border-color: var(--border-color) var(--border-color) var(--bg-surface);
    color: var(--text-primary);
}

body[data-theme="dark"] .tab-content {
    color: var(--text-primary);
}

/* --- 進度條 --- */
body[data-theme="dark"] .progress {
    background-color: var(--bg-elevated);
}

/* --- 連結 --- */
body[data-theme="dark"] a {
    color: var(--primary-color);
}

body[data-theme="dark"] a:hover {
    color: var(--primary-hover);
}

/* 不影響有特定顏色的按鈕連結 */
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-success,
body[data-theme="dark"] .btn-danger,
body[data-theme="dark"] .btn-warning,
body[data-theme="dark"] .btn-info {
    color: inherit;
}

/* --- 其他元素 --- */
body[data-theme="dark"] hr {
    border-color: var(--border-color);
    opacity: 0.5;
}

body[data-theme="dark"] .badge.bg-light {
    background-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body[data-theme="dark"] select option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

body[data-theme="dark"] code {
    color: #f5a0a8;
    background-color: rgba(245, 160, 168, 0.08);
}

/* --- 卡片式動態 UI (Card Based UI) 修正 --- */
body[data-theme="dark"] .card-grid .grid-item {
    background-color: var(--card-bg);
}

body[data-theme="dark"] .card-timeline .timeline-content {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

body[data-theme="dark"] .card-metric {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
}

body[data-theme="dark"] .card-list .list-group-item:hover {
    background-color: var(--bg-surface-hover);
    border-left-color: var(--primary-soft);
}

body[data-theme="dark"] .card-table thead {
    background-color: var(--table-header-bg);
}

body[data-theme="dark"] .card-table th {
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

/* Timeline vertical line gradient */
body[data-theme="dark"] .card-timeline .timeline-vertical::before {
    background: linear-gradient(180deg, var(--primary-soft) 0%, var(--success-soft) 100%);
}

/* List number */
body[data-theme="dark"] .card-list .list-number {
    color: var(--primary-soft);
}

/* Timeline title */
body[data-theme="dark"] .card-timeline .timeline-title {
    color: var(--primary-soft);
}

/* Timeline date and description */
body[data-theme="dark"] .card-timeline .timeline-date {
    color: var(--text-muted);
}

body[data-theme="dark"] .card-timeline .timeline-description {
    color: var(--text-secondary);
}

/* Card Header Border */
body[data-theme="dark"] .card-header {
    border-bottom-color: var(--border-color);
}

body[data-theme="dark"] kbd {
    background-color: #111111;
    color: var(--text-primary);
}

body[data-theme="dark"] mark,
body[data-theme="dark"] .mark {
    background-color: rgba(255, 193, 7, 0.25);
    color: var(--text-primary);
}

body[data-theme="dark"] pre {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary);
}

/* --- SweetAlert2 --- */
body[data-theme="dark"] .swal2-popup {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .swal2-title {
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .swal2-html-container {
    color: var(--text-secondary) !important;
}

body[data-theme="dark"] .swal2-input,
body[data-theme="dark"] .swal2-textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .swal2-validation-message {
    background-color: var(--bg-elevated) !important;
    color: #f5a0a8 !important;
}

/* --- Toastr --- */
body[data-theme="dark"] .toast {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="dark"] .toast-success {
    background-color: #1a3a1a !important;
}

body[data-theme="dark"] .toast-error {
    background-color: #3a1a1a !important;
}

body[data-theme="dark"] .toast-warning {
    background-color: #3a3015 !important;
}

body[data-theme="dark"] .toast-info {
    background-color: #1a2a3a !important;
}

/* --- Tooltip / Popover --- */
body[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

body[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bg-surface-hover);
}

body[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bg-surface-hover);
}

body[data-theme="dark"] .popover {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

body[data-theme="dark"] .popover-header {
    background-color: var(--bg-elevated);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="dark"] .popover-body {
    color: var(--text-secondary);
}

/* --- 側邊欄模式 Dark Mode --- */
body[data-theme="dark"][data-nav-mode="sidebar"] .navbar {
    background: linear-gradient(180deg, #222222 0%, #2a2a2a 100%) !important;
    border-right-color: var(--border-color);
    border-bottom: none;
}

body[data-theme="dark"][data-nav-mode="sidebar"] .navbar-brand {
    border-bottom-color: var(--border-color);
}

body[data-theme="dark"][data-nav-mode="sidebar"] .navbar-nav.ms-auto {
    border-top-color: var(--border-color);
}

body[data-theme="dark"][data-nav-mode="sidebar"] .dropdown-menu {
    background-color: var(--bg-input);
}

body[data-theme="dark"][data-nav-mode="sidebar"] .dropdown-item:hover {
    background-color: var(--bg-surface-hover);
}

/* 側邊欄模式 - 小螢幕 header */
@media (max-width: 992px) {
    body[data-theme="dark"][data-nav-mode="sidebar"] header {
        background: linear-gradient(135deg, #222222 0%, #2a2a2a 100%);
        border-bottom-color: var(--border-color);
    }

    body[data-theme="dark"][data-nav-mode="sidebar"] header::after {
        color: var(--primary-color);
    }

    body[data-theme="dark"][data-nav-mode="sidebar"] .navbar-toggler-sidebar {
        background-color: var(--bg-surface) !important;
        border-color: var(--primary-color) !important;
    }

    body[data-theme="dark"][data-nav-mode="sidebar"] .navbar-toggler-sidebar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(27, 110, 194, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    body[data-theme="dark"][data-nav-mode="sidebar"] header .navbar {
        background: linear-gradient(180deg, #222222 0%, #2a2a2a 100%);
        border-right-color: var(--border-color);
    }
}

/* --- Smart Loading overlay --- */
body[data-theme="dark"] .smart-loading-overlay {
    background: var(--loading-overlay);
}

body[data-theme="dark"] .smart-loading-container {
    background: var(--loading-container-bg);
    border-color: var(--loading-container-border);
    color: var(--text-primary);
}

/* --- 切換動畫（只在已移除 no-transition 後生效） --- */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card,
.navbar,
.dropdown-menu,
.modal-content,
.footer,
.form-control,
.form-select,
.table,
.list-group-item {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- 響應式下拉選單（移動端） --- */
@media (max-width: 768px) {
    body[data-theme="dark"] .dropdown-menu {
        background-color: var(--bg-input);
    }
}

/* --- 表格顏色變體 (Table Variants) --- */
body[data-theme="dark"] .table-warning {
    --bs-table-bg: rgba(255, 218, 106, 0.2);
    --bs-table-border-color: rgba(255, 218, 106, 0.1);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-warning td {
    background-color: var(--bs-table-bg);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-danger {
    --bs-table-bg: rgba(234, 134, 143, 0.2);
    --bs-table-border-color: rgba(234, 134, 143, 0.1);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-danger td {
    background-color: var(--bs-table-bg);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-success {
    --bs-table-bg: rgba(117, 183, 152, 0.2);
    --bs-table-border-color: rgba(117, 183, 152, 0.1);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-success td {
    background-color: var(--bs-table-bg);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-info {
    --bs-table-bg: rgba(110, 223, 246, 0.2);
    --bs-table-border-color: rgba(110, 223, 246, 0.1);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-info td {
    background-color: var(--bs-table-bg);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-primary {
    --bs-table-bg: rgba(110, 168, 254, 0.2);
    --bs-table-border-color: rgba(110, 168, 254, 0.1);
    color: var(--text-primary);
}

body[data-theme="dark"] .table-primary td {
    background-color: var(--bs-table-bg);
    color: var(--text-primary);

}

/* --- Fixes for User Reported Issues --- */

/* 1. Nav-link active color (Tab Group) */
body[data-theme="dark"] .nav-tabs .nav-link.active,
body[data-theme="warm"] .nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    border-color: var(--border-color) var(--border-color) var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
}

/* 2. Navbar Brand Visibility (標題看不清楚) */
/* 在深色與暖色模式下，Navbar 背景較深，強制標題為淺色 */
body[data-theme="dark"] .navbar-brand,
body[data-theme="warm"] .navbar-brand {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 確保 Sidebar 下的 Brand 也有足夠對比 (如果是 Light sidebar) */
body[data-nav-mode="sidebar"]:not([data-theme="dark"]):not([data-theme="warm"]) .navbar-brand {
    color: #2c3e50 !important;
    font-weight: 600;
}


/* Ensure collapsed mode still removes it (This rule is already in navigation-sidebar.css but let's reinforce just in case, though specificity there is higher so it should win) */