/* ==========================================================================
   Element Plus 主题定制
   依据官方文档：https://element-plus.org/zh-CN/guide/theming
   本项目为本地预编译 CSS（无 SCSS 构建管线），采用官方推荐的
   「CSS 变量覆盖」方案：定义 --el-color-primary 及其派生变量。
   派生色按官方 theme-chalk 的 SCSS mix 算法生成：
     light-x = mix(#fff, base, x%)  = x% 白 + (1-x)% 基色
     dark-2  = mix(#000, base, 20%) = 20% 黑 + 80% 基色
   主色：#1890ff（Ant Design 蓝）
   ========================================================================== */

/* ---------- 亮色模式：全局主色 ----------
   :root:root 双写提高特异性，确保覆盖 index.css 中的默认变量
   （主后台 index.css 由 admin.js 动态加载，加载顺序晚于本文件） */
:root:root {
    color-scheme: light;

    --el-color-primary: #1890ff;
    --el-color-primary-rgb: 24, 144, 255;
    --el-color-primary-light-3: #5db1ff;
    --el-color-primary-light-5: #8cc8ff;
    --el-color-primary-light-7: #badeff;
    --el-color-primary-light-8: #d1e9ff;
    --el-color-primary-light-9: #e8f4ff;
    --el-color-primary-dark-2: #1373cc;

    /* 全局文字颜色：亮色模式默认黑色（可在主题设置-全局文字颜色中自定义） */
    --el-text-color-primary: #333333;
    --el-text-color-regular: #333333;
    --el-text-color-secondary: #333333;
}

/* ---------- 暗色模式：html 加 dark 类切换（参考官方 dark-mode 文档） ---------- */
html.dark {
    color-scheme: dark;

    /* 主色：暗色背景下 light 系列改用混黑算法、dark-2 用混白，保持层次 */
    --el-color-primary: #1890ff;
    --el-color-primary-rgb: 24, 144, 255;
    --el-color-primary-light-3: #1165b3;
    --el-color-primary-light-5: #0c4880;
    --el-color-primary-light-7: #072b4d;
    --el-color-primary-light-8: #051d33;
    --el-color-primary-light-9: #020e1a;
    --el-color-primary-dark-2: #46a6ff;

    /* 基础色（官方 dark/css-vars.css 核心变量，背景统一为协调深色板） */
    --el-color-white: #171717;
    --el-color-black: #000000;
    --el-bg-color: #171717;
    --el-bg-color-page: #0d0d0d;
    --el-bg-color-overlay: #1f1f1f;
    /* 全局文字颜色：暗色模式强制白色（含图标与组件文字） */
    --el-text-color-primary: #ffffff;
    --el-text-color-regular: #ffffff;
    --el-text-color-secondary: #e0e3e8;
    --el-text-color-placeholder: #9a9fa8;
    --el-text-color-disabled: #6c6e72;
    --el-border-color: #4c4d4f;
    --el-border-color-light: #414243;
    --el-border-color-lighter: #363637;
    --el-border-color-extra-light: #2b2b2c;
    --el-border-color-dark: #58585b;
    --el-border-color-darker: #636466;
    --el-fill-color: #303030;
    --el-fill-color-light: #2a2a2a;
    --el-fill-color-lighter: #202020;
    --el-fill-color-extra-light: #1c1c1c;
    --el-fill-color-dark: #39393a;
    --el-fill-color-darker: #424243;
    --el-fill-color-blank: transparent;
    --el-mask-color: rgba(0, 0, 0, 0.8);
    --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
    --el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.36), 0 8px 20px rgba(0, 0, 0, 0.72);
    --el-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.72);
    --el-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.72);

    /* ---------- 主后台框架暗色兜底（admin.js 运行时还会注入同值内联样式） ---------- */
    #admin-layout {
        background-color: #0d0d0d;
        color: #ffffff;
    }
    #admin-layout .top-bar,
    #admin-layout .sidebar-l2,
    #admin-layout .sidebar-l3,
    #admin-layout .main-content,
    #admin-layout .breadcrumb,
    #admin-layout .content-area,
    #admin-layout .component,
    #admin-layout .tabs-bar,
    #admin-layout .l3-floating-menu,
    #admin-layout .message-header,
    #admin-layout .message-item {
        background-color: #171717;
        border-color: #2b2b2c;
    }
    #admin-layout .top-bar,
    #admin-layout .sidebar-l2,
    #admin-layout .sidebar-l3 {
        border-bottom-color: #2b2b2c;
        border-right-color: #2b2b2c;
    }
    #admin-layout .logo-text,
    #admin-layout .menu-toggle,
    #admin-layout .user-section,
    #admin-layout .l3-header,
    #admin-layout .breadcrumb {
        color: #ffffff;
    }
    #admin-layout .side-menu-title,
    #admin-layout .side-menu-child,
    #admin-layout .sidebar-l3 li,
    #admin-layout .l3-floating-list li {
        color: #ffffff;
    }
    #admin-layout .side-menu-title:hover,
    #admin-layout .side-menu-child:hover,
    #admin-layout .sidebar-l3 li:hover,
    #admin-layout .menu-toggle:hover,
    #admin-layout .sidebar-collapse:hover {
        color: #1890ff;
        background-color: #2a2a2a;
    }
    #admin-layout .side-menu-children {
        background-color: #202020;
    }
    #admin-layout .message-content-text {
        color: #ffffff;
    }
    #admin-layout .message-content-desc {
        color: #e0e3e8;
    }
    #admin-layout .message-empty {
        color: #9a9fa8;
    }
    #admin-layout .loading,
    #admin-layout .error {
        background-color: #171717;
    }

    /* ---------- 登录页暗色覆盖 ---------- */
    .login-container {
        background: linear-gradient(-45deg, #0a1628, #101d33, #0d1f33, #12233d, #0b1a30);
        background-size: 400% 400%;
    }
    .login-form {
        background: rgba(30, 32, 38, 0.95);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    }
    .form-title {
        color: #ffffff;
    }
    .form-input {
        background: rgba(50, 52, 60, 0.9);
        color: #ffffff;
    }
    .form-input:focus {
        background: rgba(60, 62, 72, 1);
        box-shadow: 0 0 0 2px #1890ff;
    }
    .form-input::placeholder {
        color: #9a9fa8;
    }
    .copyright {
        color: #e0e3e8 !important;
    }
    .error-message {
        color: #f56c6c;
    }
    /* 备案信息弹层内联 #eee 分割线，暗色改暗色边框 */
    .login-container hr {
        border-top-color: #2b2b2c !important;
    }

    /* ---------- 接口文档页暗色覆盖（body 带 apidoc-page 类限定） ---------- */
    body.apidoc-page {
        background: #0d0d0d !important;
    }
    body.apidoc-page .main,
    body.apidoc-page .content {
        background: #0d0d0d !important;
    }
    body.apidoc-page .sidebar {
        background: #171717 !important;
        border-right-color: #2b2b2c !important;
    }
    body.apidoc-page .group-item .group-head {
        color: #ffffff;
    }
    body.apidoc-page .group-item .group-head:hover,
    body.apidoc-page .api-item:hover {
        background: #2a2a2a;
    }
    body.apidoc-page .group-item .group-head.active,
    body.apidoc-page .api-item.active {
        background: rgba(24, 144, 255, 0.15);
        color: #5db1ff;
    }
    body.apidoc-page .group-item .group-head .count {
        background: #2b2b2c;
        color: #e0e3e8;
    }
    body.apidoc-page .group-item .group-head.active .count {
        background: rgba(24, 144, 255, 0.25);
        color: #8cc8ff;
    }
    body.apidoc-page .api-item {
        color: #e0e3e8;
    }
    body.apidoc-page .doc-card {
        background: #171717 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
    }
    body.apidoc-page .doc-card .card-title,
    body.apidoc-page .api-title {
        color: #ffffff;
    }
    body.apidoc-page .api-info-row .meta-label,
    body.apidoc-page .hdr-tip {
        color: #9a9fa8;
    }
    body.apidoc-page .api-url-box {
        background: #1f1f1f;
        border-color: #363637;
    }
    body.apidoc-page .api-url-box .url,
    body.apidoc-page .pname {
        color: #8cb0ff;
    }
    body.apidoc-page .api-desc {
        background: #1f1f1f;
        color: #ffffff;
    }
    body.apidoc-page .ptable {
        border-color: #363637;
    }
    body.apidoc-page .phead {
        background: #1f1f1f;
        color: #e0e3e8;
        border-bottom-color: #363637;
    }
    body.apidoc-page .prow {
        border-bottom-color: #2b2b2c;
    }
    body.apidoc-page .prow:hover {
        background: #1f1f1f;
    }
    body.apidoc-page .ptext,
    body.apidoc-page .preq {
        color: #e0e3e8;
    }
    body.apidoc-page .pexample {
        color: #e8b04b;
    }
    body.apidoc-page .ptoggle,
    body.apidoc-page .ptoggle .dot {
        color: #9a9fa8;
        background: #6c6e72;
    }
    body.apidoc-page .empty-box {
        color: #9a9fa8;
    }
    body.apidoc-page .empty-box i {
        color: #4c4d4f;
    }
    body.apidoc-page .modal-box {
        background: #1f1f1f !important;
    }
    body.apidoc-page .modal-head {
        border-bottom-color: #2b2b2c;
        color: #ffffff;
    }
    body.apidoc-page .modal-close:hover {
        color: #ffffff;
    }
    body.apidoc-page .modal-foot {
        border-top-color: #2b2b2c;
    }
    body.apidoc-page .sidebar ::-webkit-scrollbar-thumb,
    body.apidoc-page .content::-webkit-scrollbar-thumb {
        background: #4c4d4f;
    }
}

/* ---------- vxe-table 暗色主题 ----------
   vxe-table v4 / vxe-pc-ui v4 使用独立变量体系，暗色主题由
   [data-vxe-ui-theme=dark] 属性触发（admin.js applyDarkMode 已同步设置该属性），
   其自带暗色变量组；此处用 html.dark[data-vxe-ui-theme="dark"] 更高特异性，
   把主色从默认 #409eff 覆盖为 #1890ff，并对齐本主题的暗色面板色。
   注意：vxe 的 CSS 由 admin.js 动态加载晚于本文件，靠特异性而非顺序取胜。 */
html.dark[data-vxe-ui-theme="dark"] {
    --vxe-ui-font-primary-color: #1890ff;
    --vxe-ui-layout-background-color: #171717;
    --vxe-ui-font-color: #ffffff;
    --vxe-ui-font-tinge-color: #e0e3e8;
    --vxe-ui-font-lighten-color: #9a9fa8;
    --vxe-ui-font-darken-color: #6c6e72;
    --vxe-ui-table-header-background-color: #1f1f1f;
    --vxe-ui-table-border-color: #363637;
    --vxe-ui-table-row-hover-background-color: #2a2a2a;
    --vxe-ui-table-row-hover-striped-background-color: #252525;
    --vxe-ui-table-row-striped-background-color: #202020;
    --vxe-ui-table-row-current-background-color: rgba(24, 144, 255, 0.15);
    --vxe-ui-table-row-hover-current-background-color: rgba(24, 144, 255, 0.2);
    --vxe-ui-table-column-current-background-color: rgba(24, 144, 255, 0.15);
    --vxe-ui-table-column-hover-background-color: rgba(24, 144, 255, 0.1);
    --vxe-ui-table-footer-background-color: #1f1f1f;
    --vxe-ui-table-menu-background-color: #1f1f1f;
    --vxe-ui-input-border-color: #363637;
    --vxe-ui-input-disabled-background-color: #1c1c1c;
    --vxe-ui-input-placeholder-color: #9a9fa8;
    --vxe-ui-base-popup-border-color: #2b2b2c;
}

/* ---------- 主后台页面级硬编码样式暗色覆盖 ----------
   index.html head 内联 CSS 中写死的白色背景/深色文字，用 !important 压过 */
html.dark .tabs-bar {
    background-color: #171717 !important;
    border-bottom-color: #333333 !important;
}
html.dark .tabs-container::-webkit-scrollbar-thumb {
    background-color: #58585b;
}
html.dark .tab-close:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ff4d4f;
}
html.dark .language-selector {
    color: #ffffff !important;
}
html.dark .language-selector:hover {
    background-color: rgba(24, 144, 255, 0.15);
    color: #5db1ff !important;
}
html.dark .el-dropdown-menu .el-dropdown-item.is-active {
    background-color: rgba(24, 144, 255, 0.15);
    color: #5db1ff;
}
html.dark .tab-context-menu {
    background-color: #1f1f1f !important;
    border-color: #414243 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}
html.dark .context-menu-item {
    color: #ffffff !important;
}
html.dark .context-menu-item:hover {
    background-color: #2a2a2a !important;
    color: #1890ff !important;
}

/* ---------- 菜单 hover 暗色协调 ----------
   index.html head 内联 CSS 中剩余几条硬编码亮色 hover 背景（#f0f2f5/#f5f7fa），
   统一改为暗色 hover #2a2a2a，hover 文字保持主题蓝 #1890ff */
html.dark #admin-layout .top-menu .menu-item:hover,
html.dark #admin-layout .el-menu-demo .el-sub-menu__title:hover,
html.dark #admin-layout .sidebar-collapsed-list > li:hover,
html.dark #admin-layout .message-item:hover {
    background-color: #2a2a2a !important;
}
html.dark .l3-floating-list li:hover {
    background-color: #2a2a2a !important;
    color: #1890ff !important;
}

/* ---------- 弹窗内容滚动区分割线 ----------
   index.html 系列弹窗内联 border-top: 1px solid #eee，暗色下改暗色边框 */
html.dark .dialog-scroll-body {
    border-top-color: #2b2b2c !important;
}

/* ---------- 权限编辑弹窗权限分类 ----------
   role/post.html 分组容器内联 #fafafa 背景 + #e4e7ed 边框，暗色下改暗色面板 */
html.dark .permission-group {
    background-color: #1c1c1c !important;
    border-color: #2b2b2c !important;
}
html.dark .box-card {
    border-color: #2b2b2c !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
html.dark .card-header .el-checkbox__label {
    color: #ffffff !important;
}
html.dark .form-tip {
    color: #9a9fa8 !important;
}

/* ---------- 系统配置页暗色覆盖（manage/config：index / upload） ----------
   config 两页样式块硬编码白底/亮卡片/深色文字，统一对齐暗色协调色板 */
html.dark .config-container,
html.dark .upload-config-container {
    background: #0d0d0d !important;
}
html.dark .config-title {
    color: #ffffff !important;
}
html.dark .config-title i,
html.dark .config-label i {
    color: #5db1ff !important;
}
html.dark .config-item {
    background: #171717 !important;
    border-color: #2b2b2c !important;
}
html.dark .config-item:hover {
    border-color: #1890ff !important;
    background: #1f1f1f !important;
}
html.dark .config-label {
    color: #ffffff !important;
}
html.dark .config-item label {
    color: #e0e3e8 !important;
}
html.dark .config-description {
    color: #9a9fa8 !important;
}
html.dark .config-description a {
    color: #5db1ff !important;
}
html.dark .save-icon {
    color: #5db1ff !important;
}
html.dark .save-icon:hover {
    color: #8cc8ff !important;
}
html.dark .action-buttons {
    border-top-color: #2b2b2c !important;
}
html.dark .test-section h3,
html.dark .test-results h4 {
    color: #ffffff !important;
}
html.dark .test-section p {
    color: #e0e3e8 !important;
}
html.dark .test-result-item {
    background: #171717 !important;
    border-color: #2b2b2c !important;
}
html.dark .test-time {
    color: #9a9fa8 !important;
}
/* 配置页内联硬编码小字（MB/% 与下拉选项备注等） */
html.dark .config-item span[style*="color: #8492a6"],
html.dark .config-item span[style*="color: #909399"] {
    color: #9a9fa8 !important;
}

/* ---------- 图标选择器暗色覆盖（manage/com/c-icon-picker） ----------
   组件样式块硬编码白底格子/亮边框/深灰文字，对齐暗色协调色板 */
html.dark .c-icon-picker .el-input-group__prepend {
    background-color: #202020 !important;
}
html.dark .c-icon-picker .preview-box {
    color: #ffffff !important;
}
html.dark .icon-picker-summary {
    color: #9a9fa8 !important;
}
html.dark .icon-item {
    background-color: #202020 !important;
    border-color: #2b2b2c !important;
}
html.dark .icon-item:hover {
    background-color: #2a2a2a !important;
    border-color: #1890ff !important;
    color: #1890ff !important;
}
html.dark .icon-item.selected {
    background-color: rgba(24, 144, 255, 0.15) !important;
    border-color: #1890ff !important;
    color: #1890ff !important;
}
html.dark .icon-item .icon-name {
    color: #e0e3e8 !important;
}
html.dark .icon-item .icon-class {
    color: #9a9fa8 !important;
}
html.dark .icon-item.selected .icon-name,
html.dark .icon-item.selected .icon-class {
    color: #1890ff !important;
}
html.dark .selected-icon {
    color: #e0e3e8 !important;
}

/* ---------- 富文本编辑器暗色覆盖（manage/com/c-rich-editor） ---------- */
html.dark .c-rich-editor {
    border-color: #2b2b2c !important;
}
html.dark .c-rich-editor .toolbar-container {
    background-color: #1f1f1f !important;
}
html.dark .c-rich-editor-image-dialog .gallery-loading {
    background-color: rgba(29, 30, 31, 0.8) !important;
}
html.dark .c-rich-editor-image-dialog .gallery-item {
    border-color: #2b2b2c !important;
}
html.dark .c-rich-editor-image-dialog .gallery-item:hover {
    border-color: #58585b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
html.dark .c-rich-editor-image-dialog .image-slot-error {
    background: #1c1c1c !important;
    color: #6c6e72 !important;
}
/* 上传中/加载中内联 #606266 小字 */
html.dark .c-rich-editor div[style*="color: #606266"] {
    color: #e0e3e8 !important;
}

/* ---------- 远程选择器暗色覆盖（manage/com/c-select） ---------- */
html.dark .c-select .select-all-option {
    background-color: #202020 !important;
    border-bottom-color: #2b2b2c !important;
}
html.dark .c-select .option-desc,
html.dark .c-select .option-extra {
    color: #9a9fa8 !important;
}

/* ---------- 主题色下拉面板加宽（manage/index/theme） ---------- */
.theme-color-popper {
    min-width: 480px !important;
}