/* 增加基础排版变量，提升可读性 */
:root {
  --font-size-base: 14px;
  --line-height-base: 1.5;
  --font-family-base: "Helvetica Neue", Arial, sans-serif;
}

/* 深色模式 - 优化后的配色 */
:root[data-theme="dark"] {
  /* 主要背景色 - 稍亮一点的深色，减少极黑场景 */
  --bg-color: #161616;
  /* 文字颜色 - 稍降低亮度，减少光刺 */
  --text-color: #DCE0E6;
  /* 头部背景 - 比主背景略深，保持层次感 */
  --header-bg: #1B1B1B;
  /* 边框颜色 - 加微弱对比 */
  --border-color: #404040;
  /* 卡片背景 */
  --card-bg: #1E1E1E;
  /* 悬停背景 - 稍微浅一点 */
  --hover-bg: #2A2A2A;
  /* 次要文本 - 更中性的浅灰 */
  --secondary-text: #9CA3AF;
  /* 模态框背景 */
  --modal-bg: #1E1E1E;
  /* 模态框边框 */
  --modal-border: #404040;
  /* 滑块背景 */
  --slider-bg: #474747;
  /* 开关关闭状态背景 */
  --switch-off-bg: #474747;
  /* 项目悬停背景 */
  --item-hover-bg: #2A2A2A;
  /* 复选框背景 */
  --checkbox-bg: #1E1E1E;
  /* 标签页悬停背景 */
  --tab-hover-bg: #2A2A2A;
  /* 滚动条滑块 */
  --scrollbar-thumb: #4E4E4E;
  /* 滚动条轨道 */
  --scrollbar-track: #1E1E1E;
}

/* 浅色模式 - 优化后的配色 */
:root[data-theme="light"] {
  /* 主要背景色 - 稍微更柔和的白色 */
  --bg-color: #F7F8FA;
  /* 文字颜色 - 柔和深灰 */
  --text-color: #2E3A44;
  /* 头部背景 - 保持纯白 */
  --header-bg: #FFFFFF;
  /* 边框颜色 - 略微柔和的分割线 */
  --border-color: #E4E9EF;
  /* 卡片背景 */
  --card-bg: #FFFFFF;
  /* 悬停背景 - 柔和灰色 */
  --hover-bg: #F2F4F7;
  /* 次要文本 - 中等灰 */
  --secondary-text: #5F6E7C;
  /* 模态框背景 */
  --modal-bg: #FFFFFF;
  /* 模态框边框 */
  --modal-border: #E4E9EF;
  /* 滑块背景 */
  --slider-bg: #E2E5EC;
  /* 开关关闭状态 */
  --switch-off-bg: #D0D4DA;
  /* 项目悬停背景 */
  --item-hover-bg: #F2F4F7;
  /* 复选框背景 */
  --checkbox-bg: #FFFFFF;
  /* 标签页悬停背景 */
  --tab-hover-bg: #F2F4F7;
  /* 滚动条滑块 */
  --scrollbar-thumb: #C7CCD4;
  /* 滚动条轨道 */
  --scrollbar-track: #F2F4F7;
}

/* 通用样式优化 */
html, body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-family: var(--font-family-base);
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Element UI深色模式组件样式优化 */
[data-theme="dark"] .el-dialog {
  background-color: var(--modal-bg);
  border: 1px solid var(--modal-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .el-tabs__nav-wrap::after {
  background-color: var(--border-color);
}

[data-theme="dark"] .el-tabs__item {
  color: var(--secondary-text);
  transition: color 0.3s, background-color 0.3s;
}

[data-theme="dark"] .el-tabs__item.is-active {
  color: #409EFF;
}

[data-theme="dark"] .el-tabs__item:hover {
  color: #409EFF;
  background-color: var(--tab-hover-bg);
}

[data-theme="dark"] .el-slider__runway {
  background-color: var(--slider-bg);
}

[data-theme="dark"] .el-switch__core {
  background-color: var(--switch-off-bg) !important;
  border-color: transparent;
}

[data-theme="dark"] .el-checkbox__inner {
  background-color: var(--checkbox-bg);
  border-color: var(--border-color);
  transition: border-color 0.3s, background-color 0.3s;
}

[data-theme="dark"] .el-dialog__body {
  color: var(--text-color);
}

/* Element UI浅色模式组件样式优化 */
[data-theme="light"] .el-dialog {
  background-color: var(--modal-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .el-tabs__item:hover {
  color: #409EFF;
}

/* 优化的滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
  transition: background-color 0.3s;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--secondary-text);
}

/* 平滑过渡效果 */
.el-dialog,
.el-tabs__item,
.el-switch,
.el-checkbox,
.el-slider__runway,
.el-slider__bar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 焦点状态优化: 输入框获得焦点时强调但不刺眼 */
.el-input:focus-within,
.el-textarea:focus-within {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
