// base color - 国家电网主题色
$blue: #1a4d7a;
$light-blue: #2d6ba3;
$red: #C03639;
$pink: #E65D6E;
$green: #00A862; // 国家电网主绿色
$tiffany: #00B86C; // 国家电网辅助绿色
$yellow: #FEC171;
$panGreen: #00C97A; // 国家电网亮绿色

// 默认主题变量 - 国家电网深色侧边栏
$menuText: #e8f5e9;
$menuActiveText: #00A862; // 国家电网主绿色
$menuBg: #1a3a2e; // 深绿色背景
$menuHover: #2d5a4a; // 悬停时的深绿色

// 浅色主题theme-light - 国家电网浅色侧边栏
$menuLightBg: #ffffff;
$menuLightHover: #e8f5e9; // 浅绿色悬停
$menuLightText: #303133;
$menuLightActiveText: #00A862; // 国家电网主绿色

// 基础变量
$base-sidebar-width: 200px;
$sideBarWidth: 200px;

// 菜单暗色变量 - 国家电网风格
$base-menu-color: #e8f5e9;
$base-menu-color-active: #00A862; // 国家电网主绿色
$base-menu-background: #1a3a2e; // 深绿色背景
$base-sub-menu-background: #153028; // 更深绿色子菜单背景
$base-sub-menu-hover: #2d5a4a; // 悬停时的深绿色

// 组件变量 - 国家电网主题色
$--color-primary: #00A862; // 国家电网主绿色
$--color-success: #00B86C; // 国家电网辅助绿色
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  menuLightBg: $menuLightBg;
  menuLightHover: $menuLightHover;
  menuLightText: $menuLightText;
  menuLightActiveText: $menuLightActiveText;
  sideBarWidth: $sideBarWidth;
  // 导出基础颜色
  blue: $blue;
  lightBlue: $light-blue;
  red: $red;
  pink: $pink;
  green: $green;
  tiffany: $tiffany;
  yellow: $yellow;
  panGreen: $panGreen;
  // 导出组件颜色
  colorPrimary: $--color-primary;
  colorSuccess: $--color-success;
  colorWarning: $--color-warning;
  colorDanger: $--color-danger;
  colorInfo: $--color-info;
}

// CSS变量定义 - 国家电网主题
:root {
  /* 亮色模式变量 */
  --sidebar-bg: #{$menuBg};
  --sidebar-text: #{$menuText};
  --menu-hover: #{$menuHover};
  --menu-active-text: #{$menuActiveText};
  
  --navbar-bg: #ffffff;
  --navbar-text: #303133;
  
  /* 国家电网主题色 */
  --sgcc-primary: #00A862;
  --sgcc-primary-light: #00B86C;
  --sgcc-primary-dark: #008050;
  --sgcc-gradient: linear-gradient(135deg, #00A862 0%, #00B86C 100%);
  
  /* splitpanes default-theme 变量 */
  --splitpanes-default-bg: #ffffff;

}

// 暗黑模式变量
html.dark {
  /* 默认通用 - 优化为更舒适的深色背景 */
  --el-bg-color: #0f1419;
  --el-bg-color-overlay: #1a1f24;
  --el-text-color-primary: #e4e7ed;
  --el-text-color-regular: #b3b9c4;
  --el-border-color: #2d3339;
  --el-border-color-light: #252a2f;

  /* 主体内容区域背景 */
  --main-bg-color: #0f1419;
  --content-bg-color: #151a20;

  /* 侧边栏 */
  --sidebar-bg: #0f1419;
  --sidebar-text: #e4e7ed;
  --menu-hover: #1f2529;
  --menu-active-text: #{$menuActiveText};

  /* 顶部导航栏 */
  --navbar-bg: #0f1419;
  --navbar-text: #e4e7ed;
  --navbar-hover: #1a1f24;
  --navbar-border: #252a2f;

  /* 标签栏 */
  --tags-bg: #0f1419;
  --tags-item-bg: #1a1f24;
  --tags-item-border: #252a2f;
  --tags-item-text: #b3b9c4;
  --tags-item-hover: #1f2529;
  --tags-close-hover: #4a5568;

  /* splitpanes 组件暗黑模式变量 */
  --splitpanes-bg: #0f1419;
  --splitpanes-border: #252a2f;
  --splitpanes-splitter-bg: #1a1f24;
  --splitpanes-splitter-hover-bg: #1f2529;

  /* blockquote 暗黑模式变量 */
  --blockquote-bg: #1a1f24;
  --blockquote-border: #252a2f;
  --blockquote-text: #b3b9c4;
  
  /* Cron 时间表达式 模式变量 */
  --cron-border: #252a2f;

  /* splitpanes default-theme 暗黑模式变量 */
  --splitpanes-default-bg: #0f1419;

  /* 搜索框暗黑模式变量 */
  --search-bg: #1a1f24;
  --search-border: #252a2f;
  --search-text: #e4e7ed;
  --search-placeholder: #6b7280;
  --search-hover-bg: #1f2529;
  --search-suffix-bg: #252a2f;

  /* 下拉菜单暗黑模式变量 */
  --dropdown-bg: #1a1f24;
  --dropdown-border: #252a2f;
  --dropdown-item-hover: #1f2529;
  --dropdown-divider: #252a2f;

  /* 主体内容区域 */
  --main-bg-color: #0f1419;
  --content-bg-color: #151a20;
  --card-bg-color: #1a1f24;
  --card-border-color: #252a2f;

  /* 侧边栏菜单覆盖 */
   .sidebar-container {
    .el-menu-item, .menu-title {
      color: var(--el-text-color-regular);
    }
    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .theme-dark .el-sub-menu .el-menu-item {
      background-color: var(--el-bg-color) !important;
    }
  }

  /* 顶部栏栏菜单覆盖 */
  .el-menu--horizontal {
    .el-menu-item {
      &:not(.is-disabled) {
        &:hover,
        &:focus {
          background-color: var(--navbar-hover) !important;
        }
      }
    }
  }

  /* 分割窗格覆盖 */
  .splitpanes {
    background-color: var(--splitpanes-bg);

    .splitpanes__pane {
      background-color: var(--splitpanes-bg);
      border-color: var(--splitpanes-border);
    }

    .splitpanes__splitter {
      background-color: var(--splitpanes-splitter-bg);
      border-color: var(--splitpanes-border);

      &:hover {
        background-color: var(--splitpanes-splitter-hover-bg);
      }

      &:before,
      &:after {
        background-color: var(--splitpanes-border);
      }
    }
  }

  /* 表格样式覆盖 */
  .el-table {
    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
    --el-table-header-text-color: var(--el-text-color-regular) !important;
    --el-table-border-color: var(--el-border-color-light) !important;
    --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;

    .el-table__header-wrapper, .el-table__fixed-header-wrapper {
      th {
        background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
        color: var(--el-text-color-regular, #515a6e);
      }
    }
  }

  /* 树组件高亮样式覆盖 */
  .el-tree {
    .el-tree-node.is-current > .el-tree-node__content {
      background-color: var(--el-bg-color-overlay) !important;
      color: var(--el-color-primary);
    }

    .el-tree-node__content:hover {
      background-color: var(--el-bg-color-overlay);
    }
  }
  
  /* 下拉菜单样式覆盖 */
  .el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{
    background-color: var(--navbar-hover) !important;
  }

  /* blockquote样式覆盖 */
  blockquote {
    background-color: var(--blockquote-bg) !important;
    border-left-color: var(--blockquote-border) !important;
    color: var(--blockquote-text) !important;
  }
  
  /* 时间表达式标题样式覆盖 */
  .popup-result .title {
    background: var(--cron-border);
  }

  /* 主体内容区域样式覆盖 */
  .app-main {
    background-color: var(--main-bg-color) !important;
  }

  .app-container {
    background-color: var(--content-bg-color);
    color: var(--el-text-color-primary);
  }

  .components-container {
    background-color: var(--content-bg-color);
    color: var(--el-text-color-primary);
  }

  /* 卡片样式夜间模式 */
  .el-card {
    background-color: var(--card-bg-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--el-text-color-primary) !important;
  }

  /* 面包屑导航夜间模式 */
  .el-breadcrumb {
    .el-breadcrumb__inner {
      color: var(--el-text-color-regular) !important;

      &.is-link {
        color: var(--el-text-color-regular) !important;

        &:hover {
          color: var(--el-color-primary) !important;
        }
      }
    }
  }

  /* 侧边栏菜单项夜间模式优化 */
  .sidebar-container {
    .el-menu-item,
    .el-sub-menu__title {
      &:hover {
        background-color: rgba(0, 168, 98, 0.12) !important;
      }
    }

    .el-menu-item.is-active {
      background-color: rgba(0, 168, 98, 0.18) !important;
    }
  }

  /* 导航栏汉堡菜单夜间模式 */
  .hamburger-container {
    &:hover {
      background: rgba(255, 255, 255, 0.05) !important;
    }
  }

}

