/**
 * 深色模式樣式
 * Dark Mode Styles v1.0
 *
 * 使用方式：在 body 加上 .dark-mode class 即可啟用
 * Usage: Add .dark-mode class to body to enable dark mode
 */

/* ==========================================
   CSS 變數定義 - CSS Variables
   ========================================== */
/* 亮色模式變數已由 ems-theme.css 統一管理 */

body.dark-mode {
    /* 深色模式變數 — 橋接 ems-theme.css 統一色值 */
    --dark-bg: var(--ems-bg-primary, #1a1d21);
    --dark-bg-secondary: var(--ems-bg-secondary, #212529);
    --dark-bg-tertiary: var(--ems-bg-tertiary, #2d3238);
    --dark-text: var(--ems-text-primary, #e9ecef);
    --dark-text-muted: var(--ems-text-secondary, #adb5bd);
    --dark-border: var(--ems-border, #495057);
    --dark-card-bg: var(--ems-card-bg, #212529);
    --dark-input-bg: var(--ems-input-bg, #2d3238);
    --dark-table-stripe: var(--ems-bg-tertiary, #2d3238);
    --dark-shadow: rgba(0, 0, 0, 0.3);
    --dark-hover: #343a40;
    --dark-link: var(--ems-link, #6ea8fe);
    --dark-success: #75b798;
    --dark-warning: #ffda6a;
    --dark-danger: #ea868f;
    --dark-info: #6edff6;
}

/* ==========================================
   基礎樣式 - Base Styles
   ========================================== */
body.dark-mode {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode code {
    color: #6edff6 !important;
}

/* ==========================================
   導航欄 - Navbar (保持原色調)
   ========================================== */
/* 導航欄不受深色模式影響，保持系統設定的顏色 */

/* ==========================================
   主要內容區 - Main Content
   ========================================== */
body.dark-mode .main-content,
body.dark-mode .main-content-wrapper {
    background-color: var(--dark-bg) !important;
}

/* ==========================================
   卡片 - Cards
   ========================================== */
body.dark-mode .card {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 0.125rem 0.25rem var(--dark-shadow) !important;
}

body.dark-mode .card-header {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .card-body {
    color: var(--dark-text) !important;
}

body.dark-mode .card-footer {
    background-color: var(--dark-bg-tertiary) !important;
    border-top-color: var(--dark-border) !important;
}

/* ==========================================
   表格 - Tables
   ========================================== */
body.dark-mode table,
body.dark-mode .table {
    color: var(--dark-text) !important;
}

body.dark-mode .table {
    --bs-table-bg: var(--dark-card-bg);
    --bs-table-striped-bg: var(--dark-table-stripe);
    --bs-table-hover-bg: var(--dark-hover);
    --bs-table-border-color: var(--dark-border);
}

body.dark-mode .table thead th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-color: var(--dark-border) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--dark-table-stripe) !important;
    color: var(--dark-text) !important;
}

/* 所有表格 hover — 不限 table-hover，所有 .table 都適用 */
body.dark-mode .table > tbody > tr:hover > *,
body.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: #495057 !important;
    color: #fff !important;
    --bs-table-hover-bg: #495057;
}
body.dark-mode .table > tbody > tr:hover code,
body.dark-mode .table-hover > tbody > tr:hover code {
    color: #8cf !important;
}
body.dark-mode .table > tbody > tr:hover .text-muted,
body.dark-mode .table-hover > tbody > tr:hover .text-muted {
    color: #ced4da !important;
}
body.dark-mode .table > tbody > tr:hover .text-info,
body.dark-mode .table-hover > tbody > tr:hover .text-info {
    color: #8cf !important;
}
body.dark-mode .table > tbody > tr:hover .text-success,
body.dark-mode .table-hover > tbody > tr:hover .text-success {
    color: #75b798 !important;
}
body.dark-mode .table > tbody > tr:hover .text-danger,
body.dark-mode .table-hover > tbody > tr:hover .text-danger {
    color: #ea868f !important;
}
body.dark-mode .table > tbody > tr:hover .text-warning,
body.dark-mode .table-hover > tbody > tr:hover .text-warning {
    color: #ffda6a !important;
}
body.dark-mode .table > tbody > tr:hover .badge {
    opacity: 1 !important;
}
body.dark-mode .table > tbody > tr:hover a,
body.dark-mode .table-hover > tbody > tr:hover a {
    color: #8cf !important;
}

/* table-active 選中行 */
body.dark-mode .table-active > td,
body.dark-mode .table-active > th,
body.dark-mode tr.table-active > td,
body.dark-mode tr.table-active > th {
    background-color: #495057 !important;
    color: #fff !important;
    --bs-table-active-bg: #495057;
}

/* 狀態行在深色模式下的底色 + hover */
body.dark-mode .table-warning > td,
body.dark-mode .table-warning > th,
body.dark-mode tr.table-warning > td {
    background-color: #4a3d20 !important;
    color: var(--dark-text) !important;
}
body.dark-mode .table > tbody > tr.table-warning:hover > *,
body.dark-mode .table-hover > tbody > tr.table-warning:hover > * {
    background-color: #6b5a30 !important;
    color: #fff !important;
}

body.dark-mode .table-info > td,
body.dark-mode .table-info > th,
body.dark-mode tr.table-info > td {
    background-color: #1a3a4a !important;
    color: var(--dark-text) !important;
}
body.dark-mode .table > tbody > tr.table-info:hover > *,
body.dark-mode .table-hover > tbody > tr.table-info:hover > * {
    background-color: #2a5a6e !important;
    color: #fff !important;
}

body.dark-mode .table-success > td,
body.dark-mode .table-success > th,
body.dark-mode tr.table-success > td {
    background-color: #1a3a28 !important;
    color: var(--dark-text) !important;
}
body.dark-mode .table > tbody > tr.table-success:hover > *,
body.dark-mode .table-hover > tbody > tr.table-success:hover > * {
    background-color: #2a5e40 !important;
    color: #fff !important;
}

body.dark-mode .table-danger > td,
body.dark-mode .table-danger > th,
body.dark-mode tr.table-danger > td {
    background-color: #4a1a22 !important;
    color: var(--dark-text) !important;
}
body.dark-mode .table > tbody > tr.table-danger:hover > *,
body.dark-mode .table-hover > tbody > tr.table-danger:hover > * {
    background-color: #5a2430 !important;
    color: #fff !important;
}

/* table-secondary 行 */
body.dark-mode .table-secondary > td,
body.dark-mode .table-secondary > th,
body.dark-mode tr.table-secondary > td {
    background-color: #3a3d41 !important;
    color: var(--dark-text) !important;
}
body.dark-mode .table > tbody > tr.table-secondary:hover > *,
body.dark-mode .table-hover > tbody > tr.table-secondary:hover > * {
    background-color: #4a4e53 !important;
    color: #fff !important;
}

/* table-primary 行 */
body.dark-mode .table-primary > td,
body.dark-mode .table-primary > th,
body.dark-mode tr.table-primary > td {
    background-color: #1a2d4a !important;
    color: var(--dark-text) !important;
}
body.dark-mode .table > tbody > tr.table-primary:hover > *,
body.dark-mode .table-hover > tbody > tr.table-primary:hover > * {
    background-color: #2a4060 !important;
    color: #fff !important;
}

/* Bootstrap table-light / table-dark 覆蓋 */
body.dark-mode .table-light,
body.dark-mode .table-light > th,
body.dark-mode .table-light > td,
body.dark-mode thead.table-light > tr > th,
body.dark-mode tfoot.table-light > tr > td,
body.dark-mode tbody.table-light > tr > td {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    --bs-table-bg: var(--dark-bg-tertiary);
    --bs-table-border-color: var(--dark-border);
}

/* 卡片內表格行：覆蓋 Bootstrap table > tbody > tr > td 的預設白色背景 */
body.dark-mode .card .table > :not(caption) > * > * {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .card .table > thead > tr > th,
body.dark-mode .card thead.table-light > tr > th,
body.dark-mode .card tfoot.table-light > tr > td {
    background-color: var(--dark-bg-tertiary) !important;
}

/* 卡片內表格 hover 覆蓋 — 確保 hover 背景不被 card 規則蓋掉 */
body.dark-mode .card .table > tbody > tr:hover > * {
    background-color: #495057 !important;
    color: #fff !important;
}

/* DataTables 整合 */
body.dark-mode .dataTables_wrapper {
    color: var(--dark-text) !important;
}

body.dark-mode .dataTables_length,
body.dark-mode .dataTables_filter,
body.dark-mode .dataTables_info,
body.dark-mode .dataTables_paginate {
    color: var(--dark-text) !important;
}

body.dark-mode .dataTables_length select,
body.dark-mode .dataTables_filter input {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .page-link {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-link) !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-muted) !important;
}

/* ==========================================
   表單 - Forms
   ========================================== */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode .form-select:disabled {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-muted) !important;
}

body.dark-mode .form-label,
body.dark-mode label {
    color: var(--dark-text) !important;
}

body.dark-mode .form-text {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .input-group-text {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* Form Check (Checkbox/Radio) */
body.dark-mode .form-check-label {
    color: var(--dark-text) !important;
}

body.dark-mode .form-check-input:not(:checked) {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
}

/* ==========================================
   按鈕 - Buttons
   ========================================== */
/* 主要按鈕保持原色 */

body.dark-mode .btn-light {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .btn-outline-secondary {
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================
   下拉選單 - Dropdowns
   ========================================== */
body.dark-mode .dropdown-menu {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-item {
    color: var(--dark-text) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .dropdown-item.active,
body.dark-mode .dropdown-item:active {
    background-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

body.dark-mode .dropdown-divider {
    border-color: var(--dark-border) !important;
}

/* ==========================================
   Modal 對話框
   ========================================== */
body.dark-mode .modal-content {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .modal-header {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .modal-title {
    color: var(--dark-text) !important;
}

body.dark-mode .modal-body {
    color: var(--dark-text) !important;
}

body.dark-mode .modal-footer {
    border-top-color: var(--dark-border) !important;
}

/* ==========================================
   警告提示 - Alerts
   ========================================== */
body.dark-mode .alert {
    border-color: transparent !important;
}

body.dark-mode .alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    color: var(--dark-info) !important;
}

body.dark-mode .alert-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
    color: var(--dark-success) !important;
}

body.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: var(--dark-warning) !important;
}

body.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: var(--dark-danger) !important;
}

body.dark-mode .alert-primary {
    background-color: rgba(13, 110, 253, 0.15) !important;
    color: var(--dark-link) !important;
}

body.dark-mode .alert-secondary {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
}

/* ==========================================
   徽章 - Badges
   ========================================== */
body.dark-mode .badge.bg-light {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .badge.bg-secondary {
    background-color: #6c757d !important;
}

/* ==========================================
   麵包屑 - Breadcrumb
   ========================================== */
body.dark-mode .breadcrumb {
    background-color: transparent !important;
}

body.dark-mode .breadcrumb-item a {
    color: var(--dark-link) !important;
}

body.dark-mode .breadcrumb-item.active {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: var(--dark-text-muted) !important;
}

/* ==========================================
   分頁 - Pagination
   ========================================== */
body.dark-mode .pagination {
    --bs-pagination-bg: var(--dark-card-bg);
    --bs-pagination-border-color: var(--dark-border);
    --bs-pagination-color: var(--dark-link);
    --bs-pagination-hover-bg: var(--dark-hover);
    --bs-pagination-hover-border-color: var(--dark-border);
    --bs-pagination-hover-color: var(--dark-text);
    --bs-pagination-disabled-bg: var(--dark-bg-tertiary);
    --bs-pagination-disabled-border-color: var(--dark-border);
    --bs-pagination-disabled-color: var(--dark-text-muted);
}

/* ==========================================
   列表群組 - List Groups
   ========================================== */
body.dark-mode .list-group-item {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .list-group-item-action:hover,
body.dark-mode .list-group-item-action:focus {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .list-group-item.active {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
}

/* ==========================================
   Nav Tabs / Pills
   ========================================== */
body.dark-mode .nav-tabs {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: var(--dark-text) !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    border-color: var(--dark-border) !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) var(--dark-border) var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .nav-pills .nav-link {
    color: var(--dark-text) !important;
}

body.dark-mode .nav-pills .nav-link.active {
    background-color: var(--bs-primary, #0d6efd) !important;
}

/* ==========================================
   進度條 - Progress
   ========================================== */
body.dark-mode .progress {
    background-color: var(--dark-bg-tertiary) !important;
}

/* ==========================================
   工具提示 - Tooltips
   ========================================== */
body.dark-mode .tooltip-inner {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
}

/* ==========================================
   Popover
   ========================================== */
body.dark-mode .popover {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .popover-header {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .popover-body {
    color: var(--dark-text) !important;
}

/* ==========================================
   背景顏色覆寫 - Background Override
   ========================================== */
body.dark-mode .bg-white {
    background-color: var(--dark-card-bg) !important;
}

body.dark-mode .bg-light {
    background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode .bg-body {
    background-color: var(--dark-bg) !important;
}

/* 半透明背景色（統計卡片等）- Semi-transparent backgrounds */
body.dark-mode .bg-primary.bg-opacity-10 {
    background-color: rgba(13, 110, 253, 0.15) !important;
}

body.dark-mode .bg-success.bg-opacity-10 {
    background-color: rgba(25, 135, 84, 0.15) !important;
}

body.dark-mode .bg-warning.bg-opacity-10 {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

body.dark-mode .bg-danger.bg-opacity-10 {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

body.dark-mode .bg-info.bg-opacity-10 {
    background-color: rgba(13, 202, 240, 0.15) !important;
}

body.dark-mode .bg-secondary.bg-opacity-10 {
    background-color: rgba(108, 117, 125, 0.15) !important;
}

/* ==========================================
   文字顏色覆寫 - Text Override
   ========================================== */
body.dark-mode .text-dark {
    color: var(--dark-text) !important;
}

body.dark-mode .text-muted {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .text-body {
    color: var(--dark-text) !important;
}

body.dark-mode .fw-bold {
    color: var(--dark-text) !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--dark-text) !important;
}

/* ==========================================
   連結 - Links
   ========================================== */
body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item) {
    color: var(--dark-link) !important;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):hover {
    color: #9ec5fe !important;
}

/* ==========================================
   邊框覆寫 - Border Override
   ========================================== */
body.dark-mode .border {
    border-color: var(--dark-border) !important;
}

body.dark-mode .border-top {
    border-top-color: var(--dark-border) !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .border-start {
    border-left-color: var(--dark-border) !important;
}

body.dark-mode .border-end {
    border-right-color: var(--dark-border) !important;
}

/* ==========================================
   水平分隔線 - Horizontal Rules
   ========================================== */
body.dark-mode hr {
    border-color: var(--dark-border) !important;
    opacity: 0.5;
}

/* ==========================================
   Select2 整合
   ========================================== */
body.dark-mode .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--dark-text) !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-results__option {
    color: var(--dark-text) !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* ==========================================
   Flatpickr 日期選擇器
   ========================================== */
body.dark-mode .flatpickr-calendar {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 0.5rem 1rem var(--dark-shadow) !important;
}

body.dark-mode .flatpickr-month,
body.dark-mode .flatpickr-monthDropdown-months {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .flatpickr-current-month .numInputWrapper span.arrowUp:after,
body.dark-mode .flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-bottom-color: var(--dark-text) !important;
    border-top-color: var(--dark-text) !important;
}

body.dark-mode .flatpickr-weekday {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .flatpickr-day {
    color: var(--dark-text) !important;
}

body.dark-mode .flatpickr-day:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .flatpickr-day.today {
    border-color: var(--bs-primary, #0d6efd) !important;
}

body.dark-mode .flatpickr-day.selected {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
}

body.dark-mode .flatpickr-day.prevMonthDay,
body.dark-mode .flatpickr-day.nextMonthDay {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .flatpickr-prev-month svg,
body.dark-mode .flatpickr-next-month svg {
    fill: var(--dark-text) !important;
}

/* ==========================================
   分類儀表板 - Category Dashboard
   ========================================== */
body.dark-mode .category-card {
    background-color: var(--dark-card-bg) !important;
}

body.dark-mode .subcategory-card {
    background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-card-bg) 100%) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .subcategory-card:hover {
    background: var(--dark-card-bg) !important;
}

body.dark-mode .module-link-list li {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .module-link-list a {
    color: var(--dark-text) !important;
}

body.dark-mode .module-link-list a:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-link) !important;
}

body.dark-mode .module-link-list a i {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .module-link-list a:hover i {
    color: var(--dark-link) !important;
}

/* ==========================================
   登入頁面 - Login Page
   ========================================== */
body.dark-mode .login-card {
    background-color: var(--dark-card-bg) !important;
}

/* ==========================================
   側邊欄（部分模組）- Sidebar
   ========================================== */
body.dark-mode .sidebar,
body.dark-mode .module-sidebar {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .sidebar .nav-link,
body.dark-mode .module-sidebar .nav-link {
    color: var(--dark-text) !important;
}

body.dark-mode .sidebar .nav-link:hover,
body.dark-mode .module-sidebar .nav-link:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .sidebar .nav-link.active,
body.dark-mode .module-sidebar .nav-link.active {
    background-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

/* ==========================================
   GridStack 儀表板小工具
   ========================================== */
body.dark-mode .grid-stack-item-content {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .widget-header {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .widget-body {
    color: var(--dark-text) !important;
}

/* 按鈕小工具深色模式 */
body.dark-mode .widget-button-link {
    color: var(--dark-text) !important;
}

body.dark-mode .widget-button-label {
    color: var(--dark-text) !important;
}

body.dark-mode .widget-button-icon,
body.dark-mode .widget-button-icon i {
    color: var(--dark-text) !important;
}

/* 統計卡片小工具 */
body.dark-mode .widget-stat-card .stat-value {
    color: var(--dark-text) !important;
}

body.dark-mode .widget-stat-card .stat-label {
    color: var(--dark-text-muted) !important;
}

/* 快捷操作小工具 */
body.dark-mode .widget-quick-action .action-btn {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .widget-quick-action .action-btn:hover {
    background: var(--dark-hover-bg) !important;
}

body.dark-mode .widget-quick-action .action-btn span {
    color: var(--dark-text) !important;
}

/* 小工具載入與錯誤狀態 */
body.dark-mode .widget-loading {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .widget-error {
    color: #f87171 !important;
}

/* ==========================================
   自訂滾動條 - Custom Scrollbar
   ========================================== */
body.dark-mode::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--dark-bg);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 5px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

body.dark-mode *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode *::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
}

body.dark-mode *::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

/* ==========================================
   深色模式切換按鈕 - Dark Mode Toggle
   ========================================== */
.dark-mode-toggle {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode-toggle i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

body.dark-mode .dark-mode-toggle i {
    transform: rotate(180deg);
}

/* ==========================================
   列印模式 - Print (維持亮色)
   ========================================== */
@media print {
    body.dark-mode,
    body.dark-mode .card,
    body.dark-mode .table,
    body.dark-mode .modal-content {
        background-color: #fff !important;
        color: #000 !important;
    }

    body.dark-mode .card-header,
    body.dark-mode .table thead th {
        background-color: #f8f9fa !important;
        color: #000 !important;
    }
}

/* ==========================================
   動畫過渡 - Transitions
   ========================================== */
body,
body.dark-mode,
.card, .table, .form-control, .form-select, .btn,
.dropdown-menu, .modal-content, .alert, .badge,
.list-group-item, .nav-link, .breadcrumb-item {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ==========================================
   儀表板小工具（補強）- Dashboard Widgets
   ========================================== */
body.dark-mode .widget-wrapper {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    border-radius: 0.5rem;
}

body.dark-mode .widget-wrapper .card {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .widget-content {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .widget-welcome {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .widget-welcome h4 {
    color: var(--dark-text) !important;
}

body.dark-mode .widget-welcome p {
    color: var(--dark-text-muted) !important;
}

/* 小工具選擇器 Modal */
body.dark-mode .widget-selector-modal .modal-content {
    background-color: var(--dark-card-bg) !important;
}

body.dark-mode .widget-grid {
    background-color: transparent !important;
}

body.dark-mode .widget-option {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .widget-option:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-link) !important;
}

body.dark-mode .widget-option .widget-icon {
    background-color: var(--dark-bg-secondary) !important;
}

/* 小工具分類標籤 */
body.dark-mode #widgetCategoryTabs .nav-link {
    color: var(--dark-text) !important;
    background-color: transparent !important;
}

body.dark-mode #widgetCategoryTabs .nav-link.active {
    background-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

/* 公告通知管理小工具 */
body.dark-mode .announcement-widget,
body.dark-mode [data-widget-code="announcement_management"] .widget-content {
    background-color: var(--dark-card-bg) !important;
}

/* ==========================================
   流程引導 - WorkflowWidget
   ========================================== */
body.dark-mode .workflow-widget {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .workflow-widget .card-header {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15), rgba(13, 110, 253, 0.05)) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .workflow-widget .card-body {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-widget h5,
body.dark-mode .workflow-widget h6 {
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-quick-nav {
    background-color: var(--dark-card-bg) !important;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .workflow-quick-nav .btn {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-quick-nav .btn:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .workflow-steps-nav {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .workflow-steps-nav .btn {
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-sidebar {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .workflow-sidebar .card {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

/* 流程步驟詳情 */
body.dark-mode .workflow-step-detail {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
}

/* 流程統計區塊 */
body.dark-mode .workflow-statistics {
    background-color: var(--dark-bg-tertiary) !important;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* 流程注意事項 */
body.dark-mode .workflow-checklist {
    background-color: var(--dark-bg-tertiary) !important;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

body.dark-mode .workflow-checklist li {
    color: var(--dark-text) !important;
}

/* 流程提示 */
body.dark-mode .workflow-tip {
    background-color: rgba(13, 202, 240, 0.1) !important;
    border-left-color: var(--dark-info) !important;
    color: var(--dark-text) !important;
}

/* 流程進度條 */
body.dark-mode .workflow-progress-bar {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

/* 桌面版流程引導列（renderProgressBar）*/
body.dark-mode .workflow-guide-bar {
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-guide-collapsed {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-guide-collapsed.bg-white {
    background-color: var(--dark-card-bg) !important;
}

body.dark-mode .workflow-guide-title {
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-guide-steps .workflow-step-box {
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-guide-steps .workflow-step-box:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .workflow-guide-steps .workflow-step-no-access {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-muted) !important;
}

/* 流程引導手機浮動按鈕 */
body.dark-mode .workflow-mobile-trigger {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 手機版流程抽屜 */
body.dark-mode .workflow-mobile-steps {
    background-color: var(--dark-card-bg) !important;
}

body.dark-mode .workflow-mobile-step {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .workflow-mobile-step.active {
    background-color: var(--dark-hover) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
}

/* ==========================================
   Modal 對話框（補強）
   ========================================== */
body.dark-mode .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .modal-content {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .modal-header {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .modal-title {
    color: var(--dark-text) !important;
}

body.dark-mode .modal-body {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .modal-body p {
    color: var(--dark-text) !important;
}

body.dark-mode .modal-footer {
    background-color: var(--dark-bg-tertiary) !important;
    border-top-color: var(--dark-border) !important;
}

/* Offcanvas（側邊抽屜）*/
body.dark-mode .offcanvas {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .offcanvas-header {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .offcanvas-title {
    color: var(--dark-text) !important;
}

body.dark-mode .offcanvas-body {
    color: var(--dark-text) !important;
}

/* ==========================================
   頂部資訊欄 - Top Info Bar
   ========================================== */
body.dark-mode .top-info-bar {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .top-info-bar .user-info {
    color: var(--dark-text) !important;
}

/* ==========================================
   員工資料小卡（Popover 樣式）
   ========================================== */
body.dark-mode .employee-card-popover {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .employee-card-popover .popover-body {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
}

/* ==========================================
   Express 會計表格深色模式
   覆蓋 acc_* 模組 form.php 內嵌的白色背景樣式
   ========================================== */

/* 表單容器 */
body.dark-mode .express-form {
    background-color: var(--dark-bg, #1a1d21) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* 表格整體 - 覆蓋 inline background: #FFF / white */
body.dark-mode .express-table {
    background: var(--dark-card-bg, #212529) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* 表頭 */
body.dark-mode .express-table th {
    background: #1a2744 !important;
    color: #e9ecef !important;
    border-color: var(--dark-border, #495057) !important;
}

/* 表格儲存格 - 覆蓋 inline 白色背景 */
body.dark-mode .express-table td {
    background-color: var(--dark-card-bg, #212529) !important;
    color: var(--dark-text, #e9ecef) !important;
    border-color: var(--dark-border, #495057) !important;
}

body.dark-mode .express-table tr:nth-child(even) td {
    background-color: var(--dark-bg-tertiary, #2d3238) !important;
}

body.dark-mode .express-table tr:nth-child(odd) td {
    background-color: var(--dark-card-bg, #212529) !important;
}

body.dark-mode .express-table tr:hover td {
    background-color: var(--dark-hover, #343a40) !important;
}

body.dark-mode .express-table tr.selected td {
    background-color: #1a3a5c !important;
}

/* 表格內輸入框 */
body.dark-mode .express-table .express-input {
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-table .express-input:focus {
    background: var(--dark-input-bg, #2d3238) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* 表格包裝器 */
body.dark-mode .express-table-wrapper {
    background-color: var(--dark-card-bg, #212529) !important;
    border-color: var(--dark-border, #495057) !important;
}

/* 雙欄 Header 區域 */
body.dark-mode .express-header-left,
body.dark-mode .express-header-right {
    background: linear-gradient(to bottom, #2d3238 0%, #272b30 100%) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* 標籤文字 */
body.dark-mode .express-label {
    color: #ced4da !important;
}

/* 輸入框和下拉選單 */
body.dark-mode .express-input,
body.dark-mode .express-select {
    background-color: var(--dark-input-bg, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-input:disabled,
body.dark-mode .express-input[readonly],
body.dark-mode .express-select:disabled {
    background-color: var(--dark-bg-tertiary, #2d3238) !important;
    color: var(--dark-text-muted, #adb5bd) !important;
}

/* 搜尋按鈕 */
body.dark-mode .express-search-btn {
    background: linear-gradient(to bottom, #343a40, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Tab 頁籤 */
body.dark-mode .express-tabs {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-bottom-color: var(--dark-border, #495057) !important;
}

body.dark-mode .express-tab {
    background: #343a40 !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-tab:hover {
    background: #3d4450 !important;
}

body.dark-mode .express-tab.active {
    background: var(--dark-card-bg, #212529) !important;
    border-bottom-color: var(--dark-card-bg, #212529) !important;
    border-top-color: #4d9fff !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Bootstrap nav-tabs 在 Express 容器內 */
body.dark-mode .express-tabs .nav-tabs .nav-link {
    background: #343a40 !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-tabs .nav-tabs .nav-link:hover {
    background: #3d4450 !important;
}

body.dark-mode .express-tabs .nav-tabs .nav-link.active {
    background: var(--dark-card-bg, #212529) !important;
    border-bottom-color: var(--dark-card-bg, #212529) !important;
    border-top-color: #4d9fff !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Tab 內容區 */
body.dark-mode .express-tabs .tab-content,
body.dark-mode .express-tab-content {
    background: var(--dark-card-bg, #212529) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* 金額摘要區 */
body.dark-mode .express-summary {
    background: linear-gradient(to bottom, #2d3238 0%, #272b30 100%) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-summary-label {
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-summary-value {
    background-color: var(--dark-input-bg, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-summary-value:read-only {
    background-color: #2d3238 !important;
}

body.dark-mode .express-summary-total {
    background-color: #1a2744 !important;
    border-color: #3d8bfd !important;
    color: #6bb3ff !important;
}

/* 付款方式區 */
body.dark-mode .express-payment {
    background: linear-gradient(to bottom, #2d3238 0%, #272b30 100%) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-payment-label {
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-payment-value {
    background-color: var(--dark-input-bg, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Toolbar */
body.dark-mode .express-toolbar {
    background: linear-gradient(to bottom, #343a40, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
}

body.dark-mode .express-toolbar-btn {
    background: linear-gradient(to bottom, #343a40, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-toolbar-btn:hover:not(:disabled) {
    background: linear-gradient(to bottom, #3d4450, #343a40) !important;
}

body.dark-mode .express-toolbar-separator {
    background: var(--dark-border, #495057) !important;
}

/* 底部按鈕 */
body.dark-mode .express-buttons {
    border-top-color: var(--dark-border, #495057) !important;
}

body.dark-mode .express-btn {
    background: linear-gradient(to bottom, #343a40, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-btn:hover {
    background: linear-gradient(to bottom, #3d4450, #343a40) !important;
}

body.dark-mode .express-btn-primary {
    background: linear-gradient(to bottom, #4d9fff, #3d8bfd) !important;
    border-color: #3d8bfd !important;
    color: #fff !important;
}

body.dark-mode .express-btn-primary:hover {
    background: linear-gradient(to bottom, #3d8bfd, #2b7af0) !important;
}

/* 訂金搜尋 Modal */
body.dark-mode .deposit-search-modal {
    background: var(--dark-card-bg, #212529) !important;
    border-color: var(--dark-border, #495057) !important;
}

body.dark-mode .deposit-search-header {
    background: linear-gradient(to bottom, #343a40, #2d3238) !important;
    border-bottom-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .deposit-search-title {
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .deposit-search-close {
    color: var(--dark-text-muted, #adb5bd) !important;
}

body.dark-mode .deposit-search-table th {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .deposit-search-table td {
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .deposit-search-table tr:hover {
    background: var(--dark-hover, #343a40) !important;
}

body.dark-mode .deposit-search-footer {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-top-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* acc_* 模組內嵌樣式覆蓋 — 銀行/零用金按鈕 */
body.dark-mode .express-bank-btn,
body.dark-mode .express-fund-btn {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* acc_* 模組內嵌樣式覆蓋 — 零用金快速操作區 */
body.dark-mode .express-fund-quick {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* acc_* 模組 — 庫存模組特殊區塊 */
body.dark-mode .express-items-table tbody tr:hover {
    background: var(--dark-hover, #343a40) !important;
}

/* acc_* 模組 — 日記帳表格 td 覆蓋（#FFFEF5 等暖色背景） */
body.dark-mode .express-table td[style],
body.dark-mode .express-form td[style*="background"] {
    background-color: var(--dark-card-bg, #212529) !important;
}

/* acc_* 模組 — flatpickr 輸入框 */
body.dark-mode .express-form .flatpickr-input {
    background: var(--dark-input-bg, #2d3238) !important;
    color: var(--dark-text, #e9ecef) !important;
    border-color: var(--dark-border, #495057) !important;
}

/* acc_* 模組 — 金額顯示區塊 */
body.dark-mode .express-amount-item .value-display {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* acc_* 模組 — 狀態草稿標籤 */
body.dark-mode .status-draft {
    background: rgba(255, 193, 7, 0.15) !important;
    color: var(--dark-warning, #ffda6a) !important;
}

/* ==========================================================
   Express 通用深色模式 — 萬用規則
   覆蓋各模組 inline <style> 中 36 個 express-* 自定義 class
   ========================================================== */

/*
 * 第一層：所有 express-*-section / express-*-panel 等區塊容器
 * 匹配 background: #f5f7fa / #edf2f7 / white 的區塊
 */
body.dark-mode .express-section,
body.dark-mode .express-detail-section,
body.dark-mode .express-notes-section,
body.dark-mode .express-remarks-section,
body.dark-mode .express-summary-section,
body.dark-mode .express-amount-section,
body.dark-mode .express-items-section,
body.dark-mode .express-selection-section,
body.dark-mode .express-selection-footer,
body.dark-mode .express-remarks,
body.dark-mode .express-panel-left,
body.dark-mode .express-panel-right,
body.dark-mode .express-panel-body,
body.dark-mode .express-amount-left,
body.dark-mode .express-amount-right,
body.dark-mode .express-bank-quick,
body.dark-mode .express-table-container,
body.dark-mode .express-receipt-detail,
body.dark-mode .express-payment-status {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/*
 * 第二層：區塊標題 / 表頭列（略深一點）
 */
body.dark-mode .express-panel-title,
body.dark-mode .express-detail-header,
body.dark-mode .express-notes-header,
body.dark-mode .express-table-toolbar,
body.dark-mode .express-stats-box {
    background: var(--dark-hover, #343a40) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/*
 * 第三層：摘要框 / 摘要列 total / 金額強調
 */
body.dark-mode .express-summary-box {
    background: var(--dark-card-bg, #212529) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-summary-row.total,
body.dark-mode .express-summary-row.express-total-row {
    background: var(--dark-hover, #343a40) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-amount-input.express-total {
    background: #1a2744 !important;
    color: #6bb3ff !important;
}

/*
 * 第四層：express-buttons / express-header 背景
 */
body.dark-mode .express-buttons {
    background: transparent !important;
}

body.dark-mode .express-btn-secondary {
    background: linear-gradient(to bottom, #343a40, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/*
 * 第五層：textarea 覆蓋
 */
body.dark-mode .express-textarea {
    background-color: var(--dark-input-bg, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Express 表單內所有輸入元素 — 廣泛覆蓋（含 .express-form 及任何 express-* 容器） */
body.dark-mode .express-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.btn),
body.dark-mode .express-form select:not(.btn),
body.dark-mode .express-form textarea,
body.dark-mode [class*="express-"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.btn),
body.dark-mode [class*="express-"] select:not(.btn),
body.dark-mode [class*="express-"] textarea,
body.dark-mode [class*="express-"] input.express-input,
body.dark-mode .express-form-row input,
body.dark-mode .express-form-row select,
body.dark-mode .express-header-info input,
body.dark-mode .express-header-info select {
    background-color: var(--dark-input-bg, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Express 表單內所有 label */
body.dark-mode .express-form label,
body.dark-mode [class*="express-"] > label,
body.dark-mode .express-form-row label {
    color: var(--dark-text, #e9ecef) !important;
}

/* Express header info 區域（客戶/供應商等基本資訊） */
body.dark-mode .express-header-info {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Express 面板 */
body.dark-mode .express-panel {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Express 表單行 */
body.dark-mode .express-form-row label {
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-form-row .field-label {
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-form-row .hint {
    color: var(--dark-text-muted, #adb5bd) !important;
}

/* Express 餘額區域 */
body.dark-mode .express-balance-row {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
}

body.dark-mode .express-balance-item label {
    color: var(--dark-text, #e9ecef) !important;
}

/* Express Tab 餘額表頭 */
body.dark-mode .express-tab-balance-header .balance-item label {
    color: var(--dark-text, #e9ecef) !important;
}

/* Express 表格附註 */
body.dark-mode .express-table-note {
    color: var(--dark-text, #e9ecef) !important;
}

/* Express 送貨地點摘要 */
body.dark-mode .express-shipto-summary {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
}

body.dark-mode .express-shipto-summary .summary-row label,
body.dark-mode .express-shipto-summary .summary-row span {
    color: var(--dark-text, #e9ecef) !important;
}

/* Express OLD/NEW 按鈕 */
body.dark-mode .express-old-new {
    background: linear-gradient(to bottom, #3d4450 0%, #2d3238 50%, #3d4450 100%) !important;
    border-color: var(--dark-border, #495057) !important;
}

/* Express 搜尋按鈕 */
body.dark-mode .express-form .search-btn,
body.dark-mode .express-form .search-icon {
    background: linear-gradient(to bottom, #3d4450, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Express 容器 */
body.dark-mode .express-container {
    background-color: var(--dark-bg, #1a1d21) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Express toolbar divider */
body.dark-mode .express-toolbar .divider {
    background: var(--dark-border, #495057) !important;
}

/* Express toolbar 下拉箭頭 */
body.dark-mode .express-toolbar-btn.dropdown-toggle::before {
    border-top-color: var(--dark-text, #e9ecef) !important;
}

/* acc_* 模組 — 接收帳單/應收開帳/應付開帳等特殊區塊 */
body.dark-mode .express-form [style*="background: #edf2f7"],
body.dark-mode .express-form [style*="background:#edf2f7"],
body.dark-mode .express-form [style*="background: #f5f7fa"],
body.dark-mode .express-form [style*="background:#f5f7fa"] {
    background: var(--dark-bg-tertiary, #2d3238) !important;
}

/* ==========================================================
   Express 深色模式 — 補充覆蓋（修正 form.php 內嵌白色背景）
   ========================================================== */

/*
 * .express-header（無 -left/-right 後綴）：
 * 多個 acc_* form.php 的 inline <style> 定義
 * background: linear-gradient(to bottom, #cbd5e1, #edf2f7)
 * 或 background: #f5f7fa — 需覆蓋為深色
 */
body.dark-mode .express-header {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* .express-section-blue：#E8F4FC 淺藍背景 */
body.dark-mode .express-section-blue {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* .express-footer：inline border-top: 1px solid #94a3b8 */
body.dark-mode .express-footer {
    border-top-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/*
 * .express-table 內的裸 input/select（無 .express-input class）
 * 許多 form.php template 使用 raw <input>/<select>
 */
body.dark-mode .express-table input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.dark-mode .express-table select {
    background-color: var(--dark-input-bg, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-table input[readonly],
body.dark-mode .express-table input:disabled {
    background-color: var(--dark-bg-tertiary, #2d3238) !important;
    color: var(--dark-text-muted, #adb5bd) !important;
}

/* .express-row input[readonly]：form.php inline 設 background-color: #fff */
body.dark-mode .express-row input[readonly],
body.dark-mode .express-row input:disabled,
body.dark-mode .express-row select:disabled {
    background-color: var(--dark-bg-tertiary, #2d3238) !important;
    color: var(--dark-text-muted, #adb5bd) !important;
}

/* .express-summary-row：確保文字可見 */
body.dark-mode .express-summary-row {
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-summary-row span {
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-summary-row.total {
    background: var(--dark-hover, #343a40) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/*
 * .express-btn 系列：確保深色模式下按鈕文字可見
 * form.php inline 定義的 gradient 按鈕需要正確文字色
 */
body.dark-mode .express-btn {
    background: linear-gradient(to bottom, #3d4450, #343a40) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-btn:hover {
    background: linear-gradient(to bottom, #4d5560, #3d4450) !important;
}

body.dark-mode .express-btn-blue {
    background: linear-gradient(to bottom, #2563eb, #1d4ed8) !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
}

body.dark-mode .express-btn-blue:hover {
    background: linear-gradient(to bottom, #3b82f6, #2563eb) !important;
}

body.dark-mode .express-btn-green {
    background: linear-gradient(to bottom, #22c55e, #16a34a) !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

body.dark-mode .express-btn-green:hover {
    background: linear-gradient(to bottom, #4ade80, #22c55e) !important;
}

/* inline style="background: #FFF/white/#f0f9ff/#FFFEF8/#FFF3E0/#FFF5E0/#fff3cd" 覆蓋 */
body.dark-mode .express-form [style*="background: #FFF"],
body.dark-mode .express-form [style*="background:#FFF"],
body.dark-mode .express-form [style*="background: #fff"],
body.dark-mode .express-form [style*="background:#fff"],
body.dark-mode .express-form [style*="background: white"],
body.dark-mode .express-form [style*="background:#f0f9ff"],
body.dark-mode .express-form [style*="background: #f0f9ff"],
body.dark-mode .express-form [style*="background:#E8F4FC"],
body.dark-mode .express-form [style*="background: #E8F4FC"],
body.dark-mode .express-form [style*="background:#FFFEF8"],
body.dark-mode .express-form [style*="background: #FFFEF8"],
body.dark-mode .express-form [style*="background:#FFF3E0"],
body.dark-mode .express-form [style*="background: #FFF3E0"],
body.dark-mode .express-form [style*="background:#FFF5E0"],
body.dark-mode .express-form [style*="background: #FFF5E0"],
body.dark-mode .express-form [style*="background:#fff3cd"],
body.dark-mode .express-form [style*="background: #fff3cd"],
body.dark-mode .express-form [style*="background:#f8fafc"],
body.dark-mode .express-form [style*="background: #f8fafc"],
body.dark-mode .express-form [style*="background: #F5DEB3"],
body.dark-mode .express-form [style*="background:#F5DEB3"] {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* inline style="background: #fff !important" — 需更高權重覆蓋 */
body.dark-mode .express-form td[style*="background: #fff !important"],
body.dark-mode .express-form tr[style*="background: #fff !important"],
body.dark-mode .express-form div[style*="background: #fff !important"] {
    background: var(--dark-card-bg, #212529) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* .express-table 行條紋：覆蓋 inline style="background: #FFF/f5f7fa" */
body.dark-mode .express-table tr[style*="background: #FFF"] td,
body.dark-mode .express-table tr[style*="background:#FFF"] td,
body.dark-mode .express-table tr[style*="background: #f5f7fa"] td,
body.dark-mode .express-table tr[style*="background:#f5f7fa"] td {
    background: inherit !important;
}

body.dark-mode .express-table tr[style*="background: #FFF"],
body.dark-mode .express-table tr[style*="background:#FFF"] {
    background: var(--dark-card-bg, #212529) !important;
}

body.dark-mode .express-table tr[style*="background: #f5f7fa"],
body.dark-mode .express-table tr[style*="background:#f5f7fa"] {
    background: var(--dark-bg-tertiary, #2d3238) !important;
}

/*
 * .express-input 容器內的 input/select/textarea
 * acc_stock_adjustment 等模組使用 .express-input 包裝器（非 .express-input class 在 input 上）
 */
body.dark-mode .express-input input,
body.dark-mode .express-input select,
body.dark-mode .express-input textarea {
    background-color: var(--dark-input-bg, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-input input:focus,
body.dark-mode .express-input select:focus,
body.dark-mode .express-input textarea:focus {
    border-color: var(--dark-link, #6ea8fe) !important;
    box-shadow: 0 0 3px rgba(110, 168, 254, 0.3) !important;
}

/* .express-hint-box：#f0f9ff 淺藍提示框 */
body.dark-mode .express-hint-box {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-hint-text {
    color: var(--dark-text, #e9ecef) !important;
}

/* .express-items-table hover：覆蓋 #FFF0DD */
body.dark-mode .express-items-table tbody tr:hover {
    background: var(--dark-hover, #343a40) !important;
}

/* .account-row hover/selected：Modal 內表格行 */
body.dark-mode .account-row:hover {
    background-color: var(--dark-hover, #343a40) !important;
}

body.dark-mode .account-row.selected {
    background-color: #1a3a5c !important;
}

/* .express-table th：覆蓋 #dbeafe 淺藍表頭（acc_stock_adjustment 等） */
body.dark-mode .express-table th {
    background: #1a2744 !important;
    color: #e9ecef !important;
    border-color: var(--dark-border, #495057) !important;
}

/* ==========================================================
   Express 狀態標籤 — 粉彩背景深色模式（半透明化）
   覆蓋 acc_checks_*, acc_journal_*, acc_billing_* 等模組
   ========================================================== */

/* 綠色狀態：#CCFFCC / #99FF99 / #90EE90 → 深綠半透明 */
body.dark-mode .express-form [class*="status"][style*="background: #CCFFCC"],
body.dark-mode .express-form [class*="badge"][style*="background: #CCFFCC"] {
    background: rgba(34, 197, 94, 0.2) !important;
    color: var(--dark-success, #75b798) !important;
}

body.dark-mode [class*="status-cleared"],
body.dark-mode [class*="status-deposited"],
body.dark-mode [class*="status-paid"],
body.dark-mode [class*="status-balanced"] {
    background: rgba(34, 197, 94, 0.15) !important;
    color: var(--dark-success, #75b798) !important;
}

/* 紅色狀態：#fee2e2 / #fecaca → 深紅半透明 */
body.dark-mode [class*="status-cancelled"],
body.dark-mode [class*="status-void"],
body.dark-mode [class*="status-bounced"],
body.dark-mode [class*="status-rejected"] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--dark-danger, #ea868f) !important;
}

/* 藍色狀態：#CCFFFF / #99CCFF / #CCCCFF → 深藍半透明 */
body.dark-mode [class*="status-pending"],
body.dark-mode [class*="status-issued"],
body.dark-mode [class*="status-received"] {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--dark-info, #6edff6) !important;
}

/* 黃色狀態：#FFC107 / #fff3cd → 深黃半透明 */
body.dark-mode [class*="status-partial"],
body.dark-mode [class*="status-waiting"] {
    background: rgba(255, 193, 7, 0.15) !important;
    color: var(--dark-warning, #ffda6a) !important;
}

/* 灰色狀態：#CCCCCC → 深灰 */
body.dark-mode [class*="status-expired"],
body.dark-mode [class*="status-inactive"] {
    background: rgba(108, 117, 125, 0.2) !important;
    color: var(--dark-text-muted, #adb5bd) !important;
}

/* 通用：express-form 內所有粉彩背景屬性選擇器 */
body.dark-mode .express-form [style*="background: #fee2e2"],
body.dark-mode .express-form [style*="background:#fee2e2"],
body.dark-mode .express-form [style*="background: #fecaca"],
body.dark-mode .express-form [style*="background:#fecaca"] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--dark-danger, #ea868f) !important;
}

body.dark-mode .express-form [style*="background: #CCFFCC"],
body.dark-mode .express-form [style*="background:#CCFFCC"] {
    background: rgba(34, 197, 94, 0.15) !important;
    color: var(--dark-success, #75b798) !important;
}

body.dark-mode .express-form [style*="background: #CCFFFF"],
body.dark-mode .express-form [style*="background:#CCFFFF"],
body.dark-mode .express-form [style*="background: #CCCCFF"],
body.dark-mode .express-form [style*="background:#CCCCFF"] {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--dark-info, #6edff6) !important;
}

body.dark-mode .express-form [style*="background: #E6F3FF"],
body.dark-mode .express-form [style*="background:#E6F3FF"] {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* Express 客戶 tab 特殊色：#F5DEB3 麥色 / #D2B48C 棕褐 */
body.dark-mode .express-form [style*="background: #F5DEB3"],
body.dark-mode .express-form [style*="background:#F5DEB3"] {
    background: rgba(210, 180, 140, 0.15) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* .express-toolbar-btn:active 等 hover/active 狀態 */
body.dark-mode .express-toolbar-btn:active {
    background: var(--dark-hover, #343a40) !important;
}

/* .express-bank-btn 銀行快速選擇按鈕 */
body.dark-mode .express-bank-btn {
    background: var(--dark-card-bg, #212529) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-link, #6ea8fe) !important;
}

body.dark-mode .express-bank-btn:hover {
    background: var(--dark-hover, #343a40) !important;
    border-color: var(--dark-link, #6ea8fe) !important;
}

/* .express-fund-quick 零用金快速選擇 */
body.dark-mode .express-fund-quick {
    background: var(--dark-bg-tertiary, #2d3238) !important;
    border-color: var(--dark-border, #495057) !important;
    color: var(--dark-text, #e9ecef) !important;
}

/* .express-quick-btn-fill / clear */
body.dark-mode .express-quick-btn-fill {
    background: #2563eb !important;
    color: #fff !important;
}

body.dark-mode .express-quick-btn-fill:hover {
    background: #1d4ed8 !important;
}

body.dark-mode .express-quick-btn-clear {
    background: var(--dark-hover, #343a40) !important;
    color: var(--dark-text, #e9ecef) !important;
}

body.dark-mode .express-quick-btn-clear:hover {
    background: var(--dark-bg-tertiary, #2d3238) !important;
}

/* ==========================================
   Outline 按鈕 Dark Mode 對比度修正
   ========================================== */
body.dark-mode .btn-outline-primary {
    border-color: #6ea8fe !important;
    color: #6ea8fe !important;
}
body.dark-mode .btn-outline-primary:hover {
    background-color: rgba(110, 168, 254, 0.15) !important;
    color: #93bfff !important;
}

body.dark-mode .btn-outline-success {
    border-color: #75b798 !important;
    color: #75b798 !important;
}
body.dark-mode .btn-outline-success:hover {
    background-color: rgba(117, 183, 152, 0.15) !important;
    color: #8fcbab !important;
}

body.dark-mode .btn-outline-warning {
    border-color: #ffda6a !important;
    color: #ffda6a !important;
}
body.dark-mode .btn-outline-warning:hover {
    background-color: rgba(255, 218, 106, 0.15) !important;
    color: #ffe48a !important;
}

body.dark-mode .btn-outline-danger {
    border-color: #ea868f !important;
    color: #ea868f !important;
}
body.dark-mode .btn-outline-danger:hover {
    background-color: rgba(234, 134, 143, 0.15) !important;
    color: #f0a0a8 !important;
}

body.dark-mode .btn-outline-info {
    border-color: #6edff6 !important;
    color: #6edff6 !important;
}
body.dark-mode .btn-outline-info:hover {
    background-color: rgba(110, 223, 246, 0.15) !important;
    color: #8de6f8 !important;
}

body.dark-mode .btn-outline-light {
    border-color: var(--dark-text-muted) !important;
    color: var(--dark-text) !important;
}
body.dark-mode .btn-outline-light:hover {
    background-color: var(--dark-hover) !important;
    color: #fff !important;
}

/* 流程導引列步驟按鈕 — 確保 outline 在深色背景下可讀 */
body.dark-mode .workflow-guide-bar .btn.workflow-step {
    border-width: 1.5px !important;
}

/* ==========================================
   選單管理 - 分類清單 Dark Mode
   ========================================== */
body.dark-mode .category-item:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .category-item.active {
    background-color: rgba(13, 110, 253, 0.2) !important;
    border-color: #6ea8fe !important;
    color: var(--dark-text) !important;
}

body.dark-mode .category-item-parent {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .category-item.drag-over {
    background-color: rgba(25, 135, 84, 0.2) !important;
    border-color: #75b798 !important;
}

/* 步驟說明區域 bg-light 內的文字 */
body.dark-mode .workflow-guide-bar .bg-light strong,
body.dark-mode .workflow-guide-bar .bg-light .text-muted {
    color: var(--dark-text) !important;
}

/* 分類 badge 文字對比度 — warning 背景用深色文字 */
body.dark-mode .badge.bg-warning {
    color: #000 !important;
}

/* ==========================================
   報價表單 - 深色模式修正（2026-03-09）
   ========================================== */
body.dark-mode .searchable-dropdown-list {
    background: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}
body.dark-mode .searchable-dropdown-list .dropdown-item {
    color: var(--dark-text) !important;
}
body.dark-mode .searchable-dropdown-list .dropdown-item:hover {
    background-color: var(--dark-hover) !important;
}
body.dark-mode #itemsTable .calc-field {
    background-color: #3a3520 !important;
    border-color: #5a5030 !important;
}
body.dark-mode #itemsTable .price-highlight {
    background-color: #1a3a1a !important;
}
body.dark-mode .col-grp-a { background-color: #1a2a3a !important; }
body.dark-mode .col-grp-b { background-color: #2a1a3a !important; }
body.dark-mode .col-grp-c { background-color: #3a2a1a !important; }
body.dark-mode .col-grp-d { background-color: #3a1a2a !important; }
body.dark-mode .col-grp-e { background-color: #1a1a3a !important; }
body.dark-mode .col-grp-f { background-color: #1a3a3a !important; }
body.dark-mode .col-grp-g { background-color: #1a3a1a !important; }
body.dark-mode .col-grp-h { background-color: #2d3238 !important; }
body.dark-mode .col-grp-i { background-color: #1a3a20 !important; }