/* 明亮模式主题样式 */

:root {
  /* 背景色 */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #fafafa;
  --bg-header: #f5f5f5;
  --bg-aside: #ffffff;
  --bg-main: #ffffff;

  /* 文字颜色 */
  --text-primary: #63acb5;
  --text-secondary: #63acb5;
  --text-tertiary: #63acb5;
  --text-inverse: #ffffff;

  /* 主题色 */
  --theme-primary: #63acb5;
  --theme-secondary: #63acb5;
  --theme-accent: #63acb5;

  /* 边框颜色 */
  --border-primary: #dcdfe6;
  --border-secondary: #e4e7ed;
  --border-tertiary: #ebeef5;

  /* 阴影 */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.04);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.12), 0 0 24px rgba(0, 0, 0, 0.04);
}

/* 基础元素样式 */
html, body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
  background-color: var(--bg-primary);
}

.container {
  background-color: var(--bg-primary);
}

/* 头部样式 */
.el-header {
  background-color: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-primary);
}

.el-menu-demo {
  background-color: var(--bg-header) !important;
}

.el-menu-demo .el-menu-item {
  background-color: var(--bg-header) !important;
  color: var(--text-secondary) !important;
}

.el-menu-demo .el-menu-item:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--theme-primary) !important;
}

/* 侧边栏样式 */
.el-aside {
  background-color: var(--bg-aside) !important;
  border-right: 1px solid var(--border-primary);
}

.el-menu-vertical-demo {
  background-color: var(--bg-aside) !important;
}

.el-menu-vertical-demo .el-menu-item {
  background-color: var(--bg-aside) !important;
  color: var(--text-secondary) !important;
}

.el-menu-vertical-demo .el-menu-item:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--theme-primary) !important;
}

.el-menu-vertical-demo .el-sub-menu__title {
  background-color: var(--bg-aside) !important;
  color: var(--text-secondary) !important;
}

.el-menu-vertical-demo .el-sub-menu__title:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--theme-primary) !important;
}

/* 主内容区域 */
.el-main {
  background-color: var(--bg-main) !important;
}

/* 链接样式 */
a {
  color: var(--text-secondary);
}

a:hover {
  color: var(--theme-primary);
}

.router-link-active .el-menu-item {
  color: var(--theme-primary) !important;
  background-color: var(--bg-secondary) !important;
}

/* 抽屉样式 */
.el-drawer {
  background-color: var(--bg-aside) !important;
}

.el-drawer__header {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-primary);
  color: var(--theme-primary);
}

.el-menu-mobile {
  background-color: var(--bg-aside) !important;
}

.el-menu-mobile .el-menu-item {
  background-color: var(--bg-aside) !important;
  color: var(--text-secondary) !important;
}

.el-menu-mobile .el-menu-item:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--theme-primary) !important;
}

/* 覆盖Element Plus的默认样式 */
.el-menu {
  border-right: none !important;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: var(--bg-secondary) !important;
}

/* 开关样式 */
.theme-toggle .el-switch {
  --el-switch-on-color: var(--theme-primary);
  --el-switch-off-color: var(--text-tertiary);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: 4px;
}

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