/**
 * EMS 統一主題變數系統
 *
 * 所有入口（mobile.php / tablet.php / dashboard.php）共用此檔案。
 * 亮色模式：CSS 寫死值（:root）
 * 深色模式：body.dark-mode 使用 CSS fallback，管理員可從 system_settings 覆寫。
 *           覆寫值由 _html-head.php inline <style> 注入 --ems-dark-* 變數。
 *
 * 色彩體系來源：GCP Console（17-gcp-console.html）
 * 管理員覆寫：system_settings/index.php → _html-head.php → --ems-dark-* 注入
 */

/* =========================================================
   亮色模式（預設）
   ========================================================= */
:root {
    /* 主色（繼承管理員在 system_settings 設定的 UI 主色） */
    --ems-primary: var(--ui-primary-color, #0d6efd);
    --ems-primary-rgb: var(--bs-primary-rgb, 13, 110, 253);

    /* 背景 */
    --ems-bg-primary: #ffffff;
    --ems-bg-secondary: #f5f7fa;
    --ems-bg-tertiary: #f8f9fa;

    /* 文字 */
    --ems-text-primary: #212529;
    --ems-text-secondary: #6c757d;
    --ems-text-muted: #adb5bd;

    /* 元件 */
    --ems-card-bg: #ffffff;
    --ems-border: #dee2e6;
    --ems-input-bg: #ffffff;
    --ems-input-border: #ced4da;

    /* 語意色（Bootstrap 5 標準值，三入口統一） */
    --ems-success: #198754;
    --ems-danger: #dc3545;
    --ems-warning: #ffc107;
    --ems-info: #0dcaf0;

    /* 連結 */
    --ems-link: var(--ems-primary);

    /* 陰影 */
    --ems-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --ems-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --ems-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* 圓角 */
    --ems-radius-sm: 0.25rem;
    --ems-radius: 0.375rem;
    --ems-radius-lg: 0.5rem;
    --ems-radius-xl: 1rem;

    /* 過渡 */
    --ems-transition-fast: 0.15s ease;
    --ems-transition: 0.3s ease;
    --ems-transition-slow: 0.5s ease;

    /* Navbar（從 _html-head.php 動態注入） */
    --ems-navbar-bg: var(--navbar-dropdown-bg-1, #0d3b66);
    --ems-navbar-text: var(--navbar-dropdown-text, #ffffff);
}

/* =========================================================
   深色模式

   使用 CSS fallback 模式：
   --ems-dark-* 由 _html-head.php inline style 注入管理員設定值。
   若未設定，則使用逗號後的預設值。
   ========================================================= */
body.dark-mode {
    /* 背景（GCP Console 色板） */
    --ems-bg-primary: var(--ems-dark-bg-primary, #1e1e2e);
    --ems-bg-secondary: var(--ems-dark-bg-secondary, #202124);
    --ems-bg-tertiary: var(--ems-dark-bg-tertiary, #303134);

    /* 文字（GCP Console 色板） */
    --ems-text-primary: var(--ems-dark-text-primary, #e8eaed);
    --ems-text-secondary: var(--ems-dark-text-secondary, #9aa0a6);
    --ems-text-muted: #6e7681;

    /* 四層文字擴充（Phase 0 新增） */
    --ems-text-tertiary: #6e7681;
    --ems-text-quaternary: #484f58;

    /* 元件（GCP Console 色板） */
    --ems-card-bg: var(--ems-dark-card-bg, #292a2d);
    --ems-border: var(--ems-dark-border, #3c4043);
    --ems-input-bg: var(--ems-dark-input-bg, #303134);
    --ems-input-border: #3c4043;

    /* 連結（GCP Console 藍色） */
    --ems-link: var(--ems-dark-link-color, #8ab4f8);

    /* 背景擴充（Drawer / 選中態 / 互動態） */
    --ems-bg-sidebar: #1a1c1f;
    --ems-bg-selected: #394457;
    --ems-bg-hover: rgba(255, 255, 255, .06);
    --ems-bg-active: rgba(255, 255, 255, .10);

    /* GCP 強調色 */
    --ems-accent-blue: #8ab4f8;
    --ems-accent-blue-dim: rgba(138, 180, 248, .12);
    --ems-accent-teal: #00bfa5;
    --ems-accent-gemini: #a8c7fa;

    /* GCP 語義色 */
    --ems-semantic-red: #f28b82;
    --ems-semantic-yellow: #fdd663;
    --ems-semantic-green: #81c995;

    /* 狀態色（行事曆 / 看板） */
    --ems-status-backlog: #484f58;
    --ems-status-todo: #9aa0a6;
    --ems-status-progress: #fdd663;
    --ems-status-done: #81c995;
    --ems-status-canceled: #f28b82;

    /* 陰影（深色模式加深） */
    --ems-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    --ems-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
    --ems-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.45);

    /* 基礎元素覆寫 */
    color-scheme: dark;
}

/* =========================================================
   基礎元素套用
   ========================================================= */
body {
    background-color: var(--ems-bg-primary);
    color: var(--ems-text-primary);
}

a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--ems-link);
}

/* 卡片 */
.card {
    background-color: var(--ems-card-bg);
    border-color: var(--ems-border);
}

/* 表格 */
body.dark-mode .table {
    --bs-table-bg: var(--ems-card-bg);
    --bs-table-color: var(--ems-text-primary);
    --bs-table-border-color: var(--ems-border);
    --bs-table-striped-bg: var(--ems-bg-tertiary);
    --bs-table-hover-bg: var(--ems-bg-tertiary);
}

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

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--ems-input-bg);
    color: var(--ems-text-primary);
}

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

/* Modal */
body.dark-mode .modal-content {
    background-color: var(--ems-card-bg);
    border-color: var(--ems-border);
    color: var(--ems-text-primary);
}

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

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

/* Dropdown */
body.dark-mode .dropdown-menu {
    background-color: var(--ems-card-bg);
    border-color: var(--ems-border);
}

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

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--ems-bg-tertiary);
    color: var(--ems-text-primary);
}

/* List Group */
body.dark-mode .list-group-item {
    background-color: var(--ems-card-bg);
    border-color: var(--ems-border);
    color: var(--ems-text-primary);
}

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

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

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

/* Accordion */
body.dark-mode .accordion-item {
    background-color: var(--ems-card-bg);
    border-color: var(--ems-border);
}

body.dark-mode .accordion-button {
    background-color: var(--ems-card-bg);
    color: var(--ems-text-primary);
}

body.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--ems-bg-tertiary);
    color: var(--ems-text-primary);
}

/* Badge / Alert 在深色模式的可讀性 */
body.dark-mode .badge.bg-light {
    background-color: var(--ems-bg-tertiary) !important;
    color: var(--ems-text-primary) !important;
}

body.dark-mode .alert {
    border-color: var(--ems-border);
}

/* 分頁 */
body.dark-mode .page-link {
    background-color: var(--ems-card-bg);
    border-color: var(--ems-border);
    color: var(--ems-link);
}

body.dark-mode .page-item.active .page-link {
    background-color: var(--ems-primary);
    border-color: var(--ems-primary);
}

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

/* Breadcrumb */
body.dark-mode .breadcrumb {
    background-color: transparent;
}

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

body.dark-mode .breadcrumb-item.active {
    color: var(--ems-text-secondary);
}

/* Tooltip & Popover */
body.dark-mode .tooltip-inner {
    background-color: var(--ems-bg-tertiary);
    color: var(--ems-text-primary);
}

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

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

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

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--ems-text-muted);
}

/* Select2 深色模式 */
body.dark-mode .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--ems-input-bg);
    border-color: var(--ems-input-border);
    color: var(--ems-text-primary);
}

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

body.dark-mode .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--ems-bg-tertiary);
    color: var(--ems-text-primary);
}

/* Flatpickr 深色模式 */
body.dark-mode .flatpickr-calendar {
    background: var(--ems-card-bg);
    border-color: var(--ems-border);
    color: var(--ems-text-primary);
}

body.dark-mode .flatpickr-months .flatpickr-month {
    background: var(--ems-card-bg);
    color: var(--ems-text-primary);
}

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

body.dark-mode .flatpickr-day:hover {
    background: var(--ems-bg-tertiary);
    border-color: var(--ems-border);
}

/* DataTables 深色模式 */
body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: var(--ems-input-bg);
    border-color: var(--ems-input-border);
    color: var(--ems-text-primary);
}

body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_length label,
body.dark-mode .dataTables_wrapper .dataTables_filter label {
    color: var(--ems-text-secondary);
}

/* =========================================================
   列印模式：強制亮色
   ========================================================= */
@media print {
    :root,
    body.dark-mode {
        --ems-bg-primary: #ffffff !important;
        --ems-bg-secondary: #f5f7fa !important;
        --ems-bg-tertiary: #f8f9fa !important;
        --ems-text-primary: #212529 !important;
        --ems-text-secondary: #6c757d !important;
        --ems-card-bg: #ffffff !important;
        --ems-border: #dee2e6 !important;
        --ems-input-bg: #ffffff !important;
        color-scheme: light !important;
    }
}

/* =========================================================
   高對比模式
   ========================================================= */
@media (prefers-contrast: high) {
    body.dark-mode {
        --ems-text-primary: #ffffff;
        --ems-text-secondary: #d1d5db;
        --ems-border: #6b7280;
    }
}

/* =========================================================
   深色模式過渡動畫（避免閃爍使用 0s，使用者主動切換時啟用）
   ========================================================= */
body.theme-transitioning,
body.theme-transitioning * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}