/* 亮色主题变量 */
:root {
  --primary-color-rgb: 24, 144, 255;
  --primary-color: #1890ff;
  --el-color-primary: #1890ff;
  
  /* 背景色 */
  --background-color: #f5f7fa;
  
  /* 卡片背景 */
  --card-background: rgba(255, 255, 255, 0.85);
  
  /* 文字颜色 */
  --text-color: #303133;
  --text-color-secondary: #606266;
  --text-color-tertiary: #909399;
  
  /* 边框颜色 */
  --border-color: #dcdfe6;
  --border-color-light: #e4e7ed;
  
  /* 阴影 */
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  /* 导航栏和底部栏 */
  --header-footer-bg: rgba(255, 255, 255, 0.85);
}

/* 暗色主题变量 */
body.dark-theme {
  --primary-color-rgb: 23, 125, 220;
  --primary-color: #177ddc;
  --el-color-primary: #177ddc;
  
  /* 背景色 */
  --background-color: #141414;
  
  /* 卡片背景 */
  --card-background: rgba(24, 24, 28, 0.85);
  
  /* 文字颜色 */
  --text-color: #ffffff;
  --text-color-secondary: rgba(255, 255, 255, 0.7);
  --text-color-tertiary: rgba(255, 255, 255, 0.5);
  
  /* 边框颜色 */
  --border-color: #434343;
  --border-color-light: #303030;
  
  /* 阴影 */
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  
  /* 导航栏和底部栏 */
  --header-footer-bg: rgba(24, 24, 28, 0.85);

  /* Element Plus 暗色模式覆盖 */
  --el-bg-color: #1f1f1f;
  --el-bg-color-overlay: #242424;
  --el-text-color-primary: #e6e6e6;
  --el-text-color-regular: #d0d0d0;
  --el-border-color: #434343;
  --el-border-color-light: #303030;
}

/* 暗色模式下 Element Plus 组件样式覆盖 */
body.dark-theme .el-input__wrapper {
  background-color: rgba(0, 0, 0, 0.2);
}

body.dark-theme .el-card {
  --el-card-bg-color: var(--card-background);
  color: var(--text-color);
}

body.dark-theme .el-table {
  --el-table-border-color: var(--border-color);
  --el-table-header-bg-color: rgba(0, 0, 0, 0.2);
  --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.05);
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
}

body.dark-theme .el-table th,
body.dark-theme .el-table td {
  background-color: transparent;
}

body.dark-theme .el-pagination {
  --el-pagination-button-color: var(--text-color-secondary);
  --el-pagination-button-bg-color: rgba(0, 0, 0, 0.2);
  --el-pagination-button-disabled-color: var(--text-color-tertiary);
  --el-pagination-button-disabled-bg-color: rgba(0, 0, 0, 0.1);
  --el-pagination-hover-color: var(--primary-color);
}

body.dark-theme .el-menu {
  --el-menu-bg-color: transparent;
  --el-menu-text-color: var(--text-color);
  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.05);
  --el-menu-active-color: var(--primary-color);
  border-right: none;
}

/* 过渡效果 */
.theme-transition {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}