/* ============================================================
   geo-ai-theme-qiye.css — 酷顿GEO 企业端 高端扁平化双主题（全开源 UI 改版 v3）
   设计方向：扁平 / 高端 / 克制 / AI 感（青蓝紫品牌色点缀）
   主题机制：html.dark = 夜晚（深色）；默认 = 白天（浅色）
   主生效路径：index.html geo-theme-js（内联 CSS 变量 + 元素兜底）
   本文件：CSS 变量双主题 + tailwind 类兜底（与 JS 保持一致，防 CSS 生效场景缺漏）
   日期：2026-10-22
   ============================================================ */

/* ============ 白天（默认）：高端扁平浅色 ============ */
:root,
html:not(.dark) {
  --geo-bg-0: #f3f6fb;
  --geo-bg-1: #ffffff;
  --geo-bg-2: #f5f8fc;
  --geo-panel: #ffffff;
  --geo-line: #e6ecf5;
  --geo-line-strong: #d3dce9;
  --geo-cyan: #00a8e8;
  --geo-violet: #7b5cff;
  --geo-blue: #2f6bff;
  --geo-text-hi: #17233d;
  --geo-text: #3d4d6d;
  --geo-text-dim: #7a8aa8;
  --geo-grad: linear-gradient(135deg, #00a8e8 0%, #2f6bff 55%, #7b5cff 100%);

  --el-color-primary: #2f6bff;
  --el-color-primary-light-3: #5b8bff;
  --el-color-primary-light-5: #8ab0ff;
  --el-color-primary-light-7: #b9d0ff;
  --el-color-primary-light-8: #d4e1ff;
  --el-color-primary-light-9: #edf3ff;
  --el-color-primary-dark-2: #1f4fd6;
  --el-color-success: #00b578;
  --el-color-warning: #ff9f43;
  --el-color-danger: #ff4d6a;
  --el-color-error: #ff4d6a;
  --el-color-info: #8a97ab;

  --el-bg-color: #ffffff;
  --el-bg-color-page: #f3f6fb;
  --el-bg-color-overlay: #ffffff;
  --el-fill-color-blank: #ffffff;
  --el-fill-color: #f0f4fa;
  --el-fill-color-light: #f5f8fc;
  --el-fill-color-lighter: #f8fafd;
  --el-border-color: #dce4ef;
  --el-border-color-light: #e4ebf4;
  --el-border-color-lighter: #ebf1f8;
  --el-border-color-hover: #b9c6da;
  --el-text-color-primary: #17233d;
  --el-text-color-regular: #3d4d6d;
  --el-text-color-secondary: #7a8aa8;
  --el-text-color-placeholder: #a0adc2;
  --el-text-color-disabled: #c3ccda;
  --el-mask-color: rgba(23, 35, 61, 0.45);
  --el-box-shadow: 0 1px 3px rgba(23, 35, 61, 0.06);
}

/* ============ 夜晚（html.dark）：深空蓝黑（精简克制） ============ */
html.dark {
  --geo-bg-0: #060a14;
  --geo-bg-1: #0a0f1e;
  --geo-bg-2: #0d1526;
  --geo-panel: #0d1526;
  --geo-line: rgba(0, 212, 255, 0.13);
  --geo-line-strong: rgba(0, 212, 255, 0.26);
  --geo-cyan: #00d4ff;
  --geo-violet: #7b5cff;
  --geo-blue: #2f6bff;
  --geo-text-hi: #e6f0ff;
  --geo-text: #a9bedb;
  --geo-text-dim: #64748f;
  --geo-grad: linear-gradient(135deg, #00d4ff 0%, #2f6bff 55%, #7b5cff 100%);

  --el-color-primary: #00d4ff;
  --el-color-primary-light-3: #3f8dff;
  --el-color-primary-light-5: #2f6bff;
  --el-color-primary-light-7: rgba(0, 212, 255, 0.32);
  --el-color-primary-light-8: rgba(0, 212, 255, 0.20);
  --el-color-primary-light-9: rgba(0, 212, 255, 0.10);
  --el-color-primary-dark-2: #00a8d4;
  --el-color-success: #00e6a8;
  --el-color-warning: #ffb84d;
  --el-color-danger: #ff5d7a;
  --el-color-error: #ff5d7a;
  --el-color-info: #7d8fb0;

  --el-bg-color: #0a0f1e;
  --el-bg-color-page: #060a14;
  --el-bg-color-overlay: #0d1526;
  --el-fill-color-blank: #0a0f1e;
  --el-fill-color: rgba(0, 212, 255, 0.06);
  --el-fill-color-light: rgba(0, 212, 255, 0.05);
  --el-fill-color-lighter: rgba(0, 212, 255, 0.03);
  --el-border-color: rgba(0, 212, 255, 0.14);
  --el-border-color-light: rgba(0, 212, 255, 0.10);
  --el-border-color-lighter: rgba(0, 212, 255, 0.08);
  --el-border-color-hover: rgba(0, 212, 255, 0.30);
  --el-text-color-primary: #e6f0ff;
  --el-text-color-regular: #a9bedb;
  --el-text-color-secondary: #7d8fb0;
  --el-text-color-placeholder: #5b6b8c;
  --el-text-color-disabled: #46536e;
  --el-mask-color: rgba(3, 6, 12, 0.6);
  --el-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ============ 页面级背景 ============ */
body {
  background-color: var(--geo-bg-0) !important;
  color: var(--geo-text) !important;
}
#app, .layout-default, .layout-container {
  background: transparent !important;
}

/* ============ 侧边栏 / 顶栏 / 主区 ============ */
aside, .bg-sidebar {
  background-color: var(--geo-bg-1) !important;
  border-right: 1px solid var(--geo-line) !important;
}
html.dark aside, html.dark .bg-sidebar {
  background-image: linear-gradient(180deg, rgba(7,12,24,0.97) 0%, rgba(10,16,30,0.95) 100%) !important;
}
header, .bg-header {
  background-color: var(--geo-bg-1) !important;
  border-bottom: 1px solid var(--geo-line) !important;
}
main, .bg-background-deep, .bg-background {
  background-color: var(--geo-bg-0) !important;
}

/* ============ 卡片：扁平高端 ============ */
.card, .el-card {
  background-color: var(--geo-panel) !important;
  border: 1px solid var(--geo-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--el-box-shadow) !important;
  color: var(--geo-text) !important;
}

/* ============ 表格 ============ */
.el-table {
  background-color: transparent !important;
  color: var(--geo-text) !important;
  --el-table-border-color: var(--geo-line);
  --el-table-header-bg-color: var(--geo-bg-1);
  --el-table-header-text-color: var(--geo-text-hi);
  --el-table-row-hover-bg-color: rgba(47, 107, 255, 0.06);
}
.el-table th.el-table__cell {
  background-color: var(--geo-bg-1) !important;
  color: var(--geo-text-hi) !important;
}

/* ============ 按钮 / 输入框 / 分页 ============ */
.el-button--primary {
  background-image: var(--geo-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.el-input__wrapper, .el-textarea__inner, .el-select__wrapper {
  background-color: var(--geo-bg-1) !important;
  box-shadow: 0 0 0 1px var(--geo-line) inset !important;
}
.el-pagination.is-background .el-pager li.is-active {
  background-image: var(--geo-grad) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* ============ 标题渐变 ============ */
.core-title, .page-title, .order-title, .business-title, .gradient-text {
  background: var(--geo-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--geo-line-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 数据可视化容器 ============ */
html.dark .echarts { color: var(--geo-text) !important; }