/* ============================================================
   類 Ant Design 視覺主題（純 CSS 覆蓋，不動 HTML 結構/JS 邏輯）
   載入順序：mdb.min.css 之後、main.css / login.css（或頁面行內樣式）之前，
   靠 CSS cascade 覆蓋 MDB 的 --mdb-* 設計變數與各元件的區域變數。
   ============================================================ */

:root {
    /* ---- 色彩 Token（Ant Design v5 預設值） ---- */
    --mdb-primary: #2563eb;
    --mdb-primary-rgb: 37, 99, 235;
    --mdb-success: #52c41a;
    --mdb-success-rgb: 82, 196, 26;
    --mdb-danger: #ff4d4f;
    --mdb-danger-rgb: 255, 77, 79;
    --mdb-warning: #faad14;
    --mdb-warning-rgb: 250, 173, 20;
    --mdb-link-color: #2563eb;

    --mdb-border-color: #d9d9d9;
    --mdb-body-color: rgba(0, 0, 0, .88);
    --mdb-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* ---- 圓角 Token ---- */
    --mdb-border-radius: .375rem;      /* 6px：按鈕/輸入框 */
    --mdb-border-radius-sm: .25rem;    /* 4px */
    --mdb-border-radius-lg: .5rem;     /* 8px：卡片/Modal/下拉選單 */
    --mdb-border-radius-xl: .5rem;
    --mdb-border-radius-2xl: .75rem;

    /* shadow-4/5、dropdown-menu、modal-content 的預設陰影都是透過這個變數算出顏色深淺 */
    --mdb-box-shadow-color-rgb: 0, 0, 0;
}

body {
    font-family: var(--mdb-body-font-family);
    color: var(--mdb-body-color);
}

/* ============================================================
   按鈕 —— MDB 的 .btn-* 元件會把顏色鎖定成各自的區域變數（不會跟著
   root 的 --mdb-primary 走），所以需要逐一覆寫對應元件的區域變數。
   ============================================================ */
.btn {
    --mdb-btn-border-radius: var(--mdb-border-radius);
    box-shadow: none !important; /* Ant Design 按鈕沒有立體投影 */
}
.btn:hover, .btn:focus, .btn:active {
    box-shadow: none !important;
}

.btn-primary {
    --mdb-btn-bg: #2563eb;
    --mdb-btn-border-color: #2563eb;
    --mdb-btn-hover-bg: #3b82f6;
    --mdb-btn-hover-border-color: #3b82f6;
    --mdb-btn-focus-bg: #3b82f6;
    --mdb-btn-focus-border-color: #3b82f6;
    --mdb-btn-active-bg: #1d4ed8;
    --mdb-btn-active-border-color: #1d4ed8;
    --mdb-btn-focus-shadow-rgb: 37, 99, 235;
}

.btn-success {
    --mdb-btn-bg: #52c41a;
    --mdb-btn-border-color: #52c41a;
    --mdb-btn-hover-bg: #73d13d;
    --mdb-btn-hover-border-color: #73d13d;
    --mdb-btn-focus-bg: #73d13d;
    --mdb-btn-focus-border-color: #73d13d;
    --mdb-btn-active-bg: #389e0d;
    --mdb-btn-active-border-color: #389e0d;
    --mdb-btn-focus-shadow-rgb: 82, 196, 26;
}

.btn-danger {
    --mdb-btn-bg: #ff4d4f;
    --mdb-btn-border-color: #ff4d4f;
    --mdb-btn-hover-bg: #ff7875;
    --mdb-btn-hover-border-color: #ff7875;
    --mdb-btn-focus-bg: #ff7875;
    --mdb-btn-focus-border-color: #ff7875;
    --mdb-btn-active-bg: #d9363e;
    --mdb-btn-active-border-color: #d9363e;
    --mdb-btn-focus-shadow-rgb: 255, 77, 79;
}

.btn-outline-primary {
    --mdb-btn-color: #2563eb;
    --mdb-btn-border-color: #2563eb;
    --mdb-btn-outline-border-color: #2563eb;
    --mdb-btn-hover-bg: #2563eb;
    --mdb-btn-hover-color: #fff;
    --mdb-btn-hover-border-color: #2563eb;
    --mdb-btn-focus-bg: #eff6ff;
    --mdb-btn-focus-color: #2563eb;
    --mdb-btn-active-bg: #2563eb;
    --mdb-btn-active-color: #fff;
    --mdb-btn-focus-shadow-rgb: 37, 99, 235;
}

.btn-outline-secondary {
    --mdb-btn-color: rgba(0, 0, 0, .65);
    --mdb-btn-border-color: #d9d9d9;
    --mdb-btn-outline-border-color: #d9d9d9;
    --mdb-btn-hover-bg: #2563eb;
    --mdb-btn-hover-color: #fff;
    --mdb-btn-hover-border-color: #2563eb;
    --mdb-btn-focus-bg: #f5f5f5;
    --mdb-btn-focus-color: rgba(0, 0, 0, .88);
    --mdb-btn-active-bg: #f5f5f5;
    --mdb-btn-active-color: rgba(0, 0, 0, .88);
}

/* ============================================================
   陰影 —— Ant Design 的淡陰影（取代 Material 立體投影感）
   .shadow-4 / .shadow-5 在 MDB 原始 CSS 裡本身就帶 !important，
   這裡覆寫時也一併加上 !important 才蓋得過去。
   ============================================================ */
.shadow-4 {
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .16),
                0 3px 6px 0 rgba(0, 0, 0, .08),
                0 5px 12px 4px rgba(0, 0, 0, .05) !important;
}
.shadow-5 {
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12),
                0 6px 16px 0 rgba(0, 0, 0, .08),
                0 9px 28px 8px rgba(0, 0, 0, .05) !important;
}

/* ============================================================
   表格表頭 —— Ant Design 用淺灰底色，不用 MDB 預設的深色 table-dark
   ============================================================ */
.table-dark {
    --mdb-table-color: rgba(0, 0, 0, .88);
    --mdb-table-bg: #fafafa;
    --mdb-table-border-color: #f0f0f0;
    --mdb-table-striped-bg: #fafafa;
    --mdb-table-striped-color: rgba(0, 0, 0, .88);
    --mdb-table-active-bg: #f5f5f5;
    --mdb-table-active-color: rgba(0, 0, 0, .88);
    --mdb-table-hover-bg: #fafafa;
    --mdb-table-hover-color: rgba(0, 0, 0, .88);
    color: var(--mdb-table-color);
    border-color: var(--mdb-table-border-color);
}

/* ============================================================
   分頁 Tab —— Ant Design 用底線標示 active，不是實心色塊
   ============================================================ */
.nav-tabs {
    border-bottom: 1px solid #f0f0f0;
}
.nav-tabs .nav-link {
    border: none;
    color: rgba(0, 0, 0, .65);
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
    color: #2563eb;
    border: none;
}
.nav-tabs .nav-link.active {
    color: #2563eb;
    background: transparent;
    border: none;
    border-bottom: 2px solid #2563eb;
}

/* ============================================================
   下拉選單分隔線 —— 對齊 Ant Design 較淡的分隔線顏色
   ============================================================ */
.dropdown-divider {
    border-top-color: #f0f0f0;
}

/* ============================================================
   核取方塊 / 開關 / 輸入框聚焦
   MDB 把這幾處的顏色寫死成自家的藍 #3b71ca，不吃 --mdb-primary，
   所以要逐一對齊主題色，否則畫面上會同時出現兩種不同的藍。
   ============================================================ */
.form-check-input:checked,
.form-check-input[type="checkbox"]:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}
/* 開關被打開時的圓形滑塊 */
.form-switch .form-check-input:checked[type="checkbox"]:after {
    background-color: #2563eb;
}
/* 輸入框/下拉選單聚焦時的外框 */
.form-control:focus,
.form-select:focus {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 1px #2563eb;
}

/* ============================================================
   深色模式 —— 沿用 MDB5 內建的 [data-mdb-theme="dark"] 機制
   （切換方式見 frontend/public/js/theme.js：在 <html> 上加/移除這個屬性）。

   MDB 本身已經有完整的深色元件樣式（card/modal/table/form 等會自動切換），
   但頁面上大量使用寫死顏色的 utility class（.bg-white / .bg-light / .text-dark
   / .table-light 等），這些是固定色值、不隨主題變動，且在 MDB 原始 CSS 裡都帶
   !important，所以必須在這裡逐一覆寫（同樣要帶 !important 才蓋得過去）。
   ============================================================ */
[data-mdb-theme="dark"] {
    /* Ant Design 深色階層：底層 → 容器 → 浮起層 → 填充/表頭 */
    --antd-bg-base: #141414;
    --antd-bg-container: #1f1f1f;
    --antd-bg-elevated: #262626;
    --antd-bg-fill: #303030;
    --antd-text: rgba(255, 255, 255, .85);
    --antd-text-secondary: rgba(255, 255, 255, .45);
    --antd-border-dark: #424242;

    /* 深色模式專用狀態色。
       深色底上直接沿用淺色模式的高飽和色會產生視覺振動（螢光感、邊緣發亮），
       所以改用 Ant Design 深色演算法的對應色階：降飽和、提亮度。 */
    --antd-blue: #1668dc;
    --antd-blue-hover: #3c89e8;
    --antd-blue-active: #1554ad;
    --antd-blue-text: #4096ff;   /* 標題/連結：深色底上需要更亮才夠對比 */
    --antd-green: #49aa19;
    --antd-green-hover: #6abe39;
    --antd-green-active: #3c8618;
    --antd-gold: #d89614;
    --antd-gold-hover: #e8b339;
    --antd-red: #dc4446;
    --antd-red-hover: #e86e6b;
    --antd-cyan: #13a8a8;

    --mdb-border-color: var(--antd-border-dark);
    --mdb-body-color: var(--antd-text);
    --mdb-primary: var(--antd-blue);
    --mdb-primary-rgb: 22, 104, 220;
    --mdb-success: var(--antd-green);
    --mdb-success-rgb: 73, 170, 25;
    --mdb-warning: var(--antd-gold);
    --mdb-warning-rgb: 216, 150, 20;
    --mdb-danger: var(--antd-red);
    --mdb-danger-rgb: 220, 68, 70;
    --mdb-link-color: var(--antd-blue-text);
}

/* ---- 主色文字（頁面大標題、連結、搜尋圖示）----
   .text-primary 走 --mdb-primary-rgb，那是按鈕底色用的深藍，
   拿來當深色底上的文字對比不足，所以單獨提亮。 */
[data-mdb-theme="dark"] .text-primary {
    color: var(--antd-blue-text) !important;
}

/* ---- 實心按鈕：換成深色模式的低飽和色階 ---- */
[data-mdb-theme="dark"] .btn-primary {
    --mdb-btn-bg: var(--antd-blue);
    --mdb-btn-border-color: var(--antd-blue);
    --mdb-btn-hover-bg: var(--antd-blue-hover);
    --mdb-btn-hover-border-color: var(--antd-blue-hover);
    --mdb-btn-focus-bg: var(--antd-blue-hover);
    --mdb-btn-focus-border-color: var(--antd-blue-hover);
    --mdb-btn-active-bg: var(--antd-blue-active);
    --mdb-btn-active-border-color: var(--antd-blue-active);
}
[data-mdb-theme="dark"] .btn-success {
    --mdb-btn-bg: var(--antd-green);
    --mdb-btn-border-color: var(--antd-green);
    --mdb-btn-hover-bg: var(--antd-green-hover);
    --mdb-btn-hover-border-color: var(--antd-green-hover);
    --mdb-btn-focus-bg: var(--antd-green-hover);
    --mdb-btn-focus-border-color: var(--antd-green-hover);
    --mdb-btn-active-bg: var(--antd-green-active);
    --mdb-btn-active-border-color: var(--antd-green-active);
}
[data-mdb-theme="dark"] .btn-danger {
    --mdb-btn-bg: var(--antd-red);
    --mdb-btn-border-color: var(--antd-red);
    --mdb-btn-hover-bg: var(--antd-red-hover);
    --mdb-btn-hover-border-color: var(--antd-red-hover);
    --mdb-btn-focus-bg: var(--antd-red-hover);
    --mdb-btn-focus-border-color: var(--antd-red-hover);
    --mdb-btn-active-bg: #ad393a;
    --mdb-btn-active-border-color: #ad393a;
}

/* ---- 外框按鈕：列表操作鈕（資訊/改密碼/刪除）與工具列按鈕 ---- */
[data-mdb-theme="dark"] .btn-outline-primary {
    --mdb-btn-color: var(--antd-blue-text);
    --mdb-btn-border-color: var(--antd-blue);
    --mdb-btn-outline-border-color: var(--antd-blue);
    --mdb-btn-hover-bg: var(--antd-blue);
    --mdb-btn-hover-color: #fff;
    --mdb-btn-hover-border-color: var(--antd-blue);
    --mdb-btn-focus-bg: rgba(22, 104, 220, .2);
    --mdb-btn-focus-color: var(--antd-blue-text);
    --mdb-btn-active-bg: var(--antd-blue);
    --mdb-btn-active-color: #fff;
}
[data-mdb-theme="dark"] .btn-outline-info {
    --mdb-btn-color: #58b6b6;
    --mdb-btn-border-color: var(--antd-cyan);
    --mdb-btn-outline-border-color: var(--antd-cyan);
    --mdb-btn-hover-bg: var(--antd-cyan);
    --mdb-btn-hover-color: #fff;
    --mdb-btn-hover-border-color: var(--antd-cyan);
    --mdb-btn-active-bg: var(--antd-cyan);
    --mdb-btn-active-color: #fff;
}
[data-mdb-theme="dark"] .btn-outline-warning {
    --mdb-btn-color: var(--antd-gold-hover);
    --mdb-btn-border-color: var(--antd-gold);
    --mdb-btn-outline-border-color: var(--antd-gold);
    --mdb-btn-hover-bg: var(--antd-gold);
    --mdb-btn-hover-color: #141414;
    --mdb-btn-hover-border-color: var(--antd-gold);
    --mdb-btn-active-bg: var(--antd-gold);
    --mdb-btn-active-color: #141414;
}
[data-mdb-theme="dark"] .btn-outline-danger {
    --mdb-btn-color: var(--antd-red-hover);
    --mdb-btn-border-color: var(--antd-red);
    --mdb-btn-outline-border-color: var(--antd-red);
    --mdb-btn-hover-bg: var(--antd-red);
    --mdb-btn-hover-color: #fff;
    --mdb-btn-hover-border-color: var(--antd-red);
    --mdb-btn-active-bg: var(--antd-red);
    --mdb-btn-active-color: #fff;
}

/* ---- 徽章（日誌頁的 Access-Accept / Reject）---- */
[data-mdb-theme="dark"] .badge.bg-success {
    background-color: var(--antd-green) !important;
}
[data-mdb-theme="dark"] .badge.bg-danger {
    background-color: var(--antd-red) !important;
}
[data-mdb-theme="dark"] .badge.bg-warning {
    background-color: var(--antd-gold) !important;
}

/* ---- 核取方塊 / 開關 / 輸入框聚焦 ---- */
[data-mdb-theme="dark"] .form-check-input:checked,
[data-mdb-theme="dark"] .form-check-input[type="checkbox"]:checked {
    background-color: var(--antd-blue);
    border-color: var(--antd-blue);
}
[data-mdb-theme="dark"] .form-switch .form-check-input:checked[type="checkbox"]:after {
    background-color: var(--antd-blue);
}
/* 未勾選狀態：MDB 的預設邊框在深色底上幾乎看不見 */
[data-mdb-theme="dark"] .form-check-input:not(:checked) {
    border-color: rgba(255, 255, 255, .3);
}
[data-mdb-theme="dark"] .form-control:focus,
[data-mdb-theme="dark"] .form-select:focus {
    border-color: var(--antd-blue-text);
    box-shadow: inset 0 0 0 1px var(--antd-blue-text);
}

/* ---- 頂部導覽列 ----
   淺色模式是品牌藍，深色模式改成深色面板 + 底部分隔線，
   避免整條高飽和藍色橫在深色頁面上過於刺眼。
   只針對 .navbar 覆寫，其他用 .bg-primary 的元素（卡片標題等）不受影響。 */
[data-mdb-theme="dark"] .navbar.bg-primary {
    background-color: var(--antd-bg-container) !important;
    border-bottom: 1px solid var(--antd-bg-fill);
}
/* importGroup.html 的頁首用 .navbar-light（文字預設為深色），
   底色被翻成深色後文字也必須跟著轉白，否則會變成深底深字。 */
[data-mdb-theme="dark"] .navbar-light {
    --mdb-navbar-color: var(--antd-text);
    --mdb-navbar-hover-color: #fff;
    --mdb-navbar-active-color: #fff;
    --mdb-navbar-brand-color: var(--antd-text);
    --mdb-navbar-brand-hover-color: #fff;
}
[data-mdb-theme="dark"] .navbar-light .navbar-text {
    color: var(--antd-text);
}

/* 手機版側滑選單（main.css 內是 var(--mdb-primary)，深色下改用面板色） */
@media (max-width: 991.98px) {
    [data-mdb-theme="dark"] .mobile-offcanvas {
        background-color: var(--antd-bg-container);
    }
}

/* ---- 背景 utility ----
   body 用最深的底色；其餘 .bg-light / .bg-white 區塊（表單區、卡片、下拉搜尋列）
   用稍淺的容器色，才能在深色底上分出層次。
   .bg-white.bg-opacity-* 是 navbar 內半透明的頭像膠囊，必須維持白色半透明，
   所以用 :not() 排除掉，避免被改成不透明深色。 */
[data-mdb-theme="dark"] .bg-light,
[data-mdb-theme="dark"] .bg-white:not([class*="bg-opacity"]) {
    background-color: var(--antd-bg-container) !important;
}
[data-mdb-theme="dark"] body.bg-light {
    background-color: var(--antd-bg-base) !important;
}
[data-mdb-theme="dark"] body {
    background-color: var(--antd-bg-base);
}

/* ---- 文字 utility ----
   .text-dark 要排除彩色底的組合：Toast 的警告樣式是 .bg-warning.text-dark
   （黃底黑字），若一律翻成白字會變成黃底白字、對比度不足。 */
[data-mdb-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-primary):not(.bg-danger) {
    color: var(--antd-text) !important;
}
[data-mdb-theme="dark"] .text-muted,
[data-mdb-theme="dark"] .text-secondary {
    color: var(--antd-text-secondary) !important;
}

/* ---- 淺色/次要按鈕（Modal 的取消鈕、Close 鈕、群組下拉選單觸發鈕） ---- */
[data-mdb-theme="dark"] .btn-light,
[data-mdb-theme="dark"] .btn-secondary {
    --mdb-btn-bg: var(--antd-bg-elevated);
    --mdb-btn-color: var(--antd-text);
    --mdb-btn-border-color: var(--antd-border-dark);
    --mdb-btn-hover-bg: var(--antd-bg-fill);
    --mdb-btn-hover-color: var(--antd-text);
    --mdb-btn-focus-bg: var(--antd-bg-fill);
    --mdb-btn-focus-color: var(--antd-text);
    --mdb-btn-active-bg: var(--antd-bg-fill);
    --mdb-btn-active-color: var(--antd-text);
}

/* ---- 輸入框前綴（搜尋列的放大鏡圖示底色） ---- */
[data-mdb-theme="dark"] .input-group-text {
    background-color: var(--antd-bg-elevated);
    border-color: var(--antd-border-dark);
    color: var(--antd-text);
}

/* ---- 表格 ----
   .table-dark：日誌/使用者列表表頭（index.html 寫死的 class）
   .table-light：Excel 匯入預覽表頭與資訊彈窗的欄位名稱（user.js 動態產生） */
[data-mdb-theme="dark"] .table-dark {
    --mdb-table-color: var(--antd-text);
    --mdb-table-bg: var(--antd-bg-fill);
    --mdb-table-border-color: var(--antd-border-dark);
    --mdb-table-striped-bg: var(--antd-bg-fill);
    --mdb-table-striped-color: var(--antd-text);
    --mdb-table-active-bg: #3a3a3a;
    --mdb-table-active-color: var(--antd-text);
    --mdb-table-hover-bg: #383838;
    --mdb-table-hover-color: var(--antd-text);
}
[data-mdb-theme="dark"] .table-light,
[data-mdb-theme="dark"] th.table-light {
    --mdb-table-color: var(--antd-text);
    --mdb-table-bg: var(--antd-bg-elevated);
    --mdb-table-border-color: var(--antd-border-dark);
    --mdb-table-striped-bg: var(--antd-bg-elevated);
    --mdb-table-striped-color: var(--antd-text);
    --mdb-table-active-bg: var(--antd-bg-fill);
    --mdb-table-active-color: var(--antd-text);
    --mdb-table-hover-bg: var(--antd-bg-fill);
    --mdb-table-hover-color: var(--antd-text);
}
/* 表格本體：資料列底色跟著容器走，避免在深色容器上出現白底列 */
[data-mdb-theme="dark"] .table {
    --mdb-table-color: var(--antd-text);
    --mdb-table-bg: transparent;
    --mdb-table-border-color: var(--antd-border-dark);
    --mdb-table-hover-bg: rgba(255, 255, 255, .04);
    --mdb-table-hover-color: var(--antd-text);
}

/* ---- 分頁 Tab ---- */
[data-mdb-theme="dark"] .nav-tabs {
    border-bottom-color: var(--antd-border-dark);
}
[data-mdb-theme="dark"] .nav-tabs .nav-link {
    color: rgba(255, 255, 255, .65);
}
[data-mdb-theme="dark"] .nav-tabs .nav-link:hover,
[data-mdb-theme="dark"] .nav-tabs .nav-link.active {
    color: #3b82f6;
}
[data-mdb-theme="dark"] .nav-tabs .nav-link.active {
    border-bottom-color: #3b82f6;
}

/* ---- 下拉選單 / 分隔線 / 邊框 ---- */
[data-mdb-theme="dark"] .dropdown-menu {
    background-color: var(--antd-bg-elevated);
}
[data-mdb-theme="dark"] .dropdown-item {
    color: var(--antd-text);
}
[data-mdb-theme="dark"] .dropdown-item:hover,
[data-mdb-theme="dark"] .dropdown-item:focus {
    background-color: var(--antd-bg-fill);
    color: var(--antd-text);
}
[data-mdb-theme="dark"] .dropdown-divider {
    border-top-color: var(--antd-border-dark);
}
[data-mdb-theme="dark"] .border,
[data-mdb-theme="dark"] .border-top,
[data-mdb-theme="dark"] .border-bottom,
[data-mdb-theme="dark"] .border-start,
[data-mdb-theme="dark"] .border-end {
    border-color: var(--antd-border-dark) !important;
}

/* ---- 卡片 / Modal ---- */
[data-mdb-theme="dark"] .card {
    --mdb-card-bg: var(--antd-bg-container);
    --mdb-card-color: var(--antd-text);
    --mdb-card-border-color: var(--antd-border-dark);
}
[data-mdb-theme="dark"] .modal-content {
    --mdb-modal-bg: var(--antd-bg-elevated);
    --mdb-modal-color: var(--antd-text);
}
[data-mdb-theme="dark"] .modal-header,
[data-mdb-theme="dark"] .modal-footer {
    border-color: var(--antd-border-dark);
}
/* Bootstrap 的關閉鈕是黑色 SVG 圖檔，深色底下要反白才看得見 */
[data-mdb-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- 深色底下陰影要更明顯，否則層次會完全消失 ---- */
[data-mdb-theme="dark"] .shadow-4 {
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .5),
                0 3px 6px 0 rgba(0, 0, 0, .4),
                0 5px 12px 4px rgba(0, 0, 0, .3) !important;
}
[data-mdb-theme="dark"] .shadow-5 {
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .6),
                0 6px 16px 0 rgba(0, 0, 0, .5),
                0 9px 28px 8px rgba(0, 0, 0, .35) !important;
}

/* ---- importGroup.html 頁面行內 <style> 寫死的淺色 ---- */
[data-mdb-theme="dark"] .table-preview th {
    background-color: var(--antd-bg-elevated) !important;
}