/* 全局夜间模式样式 */
:root {
  --bg-color: #fff;
  --text-color: #333;
  --sidebar-bg: #2b2c2f;
  --main-bg: #ffffff;
  --border-color: #e1e1e1;
  --hover-bg: #f5f5f5;
  --input-bg: #fff;
  --input-border: #dcdfe6;
  --card-bg: #fff;
  --shadow: rgba(0, 0, 0, 0.1);
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #e1e1e1;
  --sidebar-bg: #1a1a1a;
  --main-bg: #2d2d2d;
  --border-color: #404040;
  --hover-bg: #3a3a3a;
  --input-bg: #3a3a3a;
  --input-border: #505050;
  --card-bg: #3a3a3a;
  --shadow: rgba(0, 0, 0, 0.5);
}

/* Element UI 夜间模式样式覆盖 */
.dark-mode .el-input__inner {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-color) !important;
}

.dark-mode .el-input__inner:focus {
  border-color: #409eff !important;
}

.dark-mode .el-button {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

.dark-mode .el-button:hover {
  background-color: var(--hover-bg) !important;
}

.dark-mode .el-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

.dark-mode .el-dialog {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.dark-mode .el-dialog__header {
  border-bottom-color: var(--border-color) !important;
}

.dark-mode .el-dialog__title {
  color: var(--text-color) !important;
}

.dark-mode .el-message-box {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.dark-mode .el-form-item__label {
  color: var(--text-color) !important;
}

.dark-mode .el-textarea__inner {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-color) !important;
}

.dark-mode .el-select .el-input .el-select__caret {
  color: var(--text-color) !important;
}

.dark-mode .el-option {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.dark-mode .el-option:hover {
  background-color: var(--hover-bg) !important;
}

.dark-mode .el-dropdown-menu {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

.dark-mode .el-dropdown-menu__item {
  color: var(--text-color) !important;
}

.dark-mode .el-dropdown-menu__item:hover {
  background-color: var(--hover-bg) !important;
}

/* Element UI 表格夜间模式样式 */
.dark-mode .el-table {
  background-color: var(--main-bg) !important;
  color: var(--text-color) !important;
}

.dark-mode .el-table th {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-bottom-color: var(--border-color) !important;
}

.dark-mode .el-table td {
  background-color: var(--main-bg) !important;
  color: var(--text-color) !important;
  border-bottom-color: var(--border-color) !important;
}

.dark-mode .el-table tr:hover td {
  background-color: var(--hover-bg) !important;
}

.dark-mode .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: var(--hover-bg) !important;
}

/* Element UI 头像组件 */
.dark-mode .el-avatar {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* 自定义组件夜间模式样式 */
.dark-mode * {
  color: var(--text-color);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.dark-mode div, .dark-mode span, .dark-mode p {
  background-color: transparent;
}

.dark-mode .router-link-active {
  color: #409eff !important;
}

/* 输入框占位符颜色 */
.dark-mode input::placeholder {
  color: var(--text-color);
  opacity: 0.5;
}

/* 滚动条样式 */
.dark-mode ::-webkit-scrollbar {
  width: 6px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--main-bg);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--hover-bg);

}