/* 基础变量 */
:root {
  --fr-bg-color: #ffffff;
  --fr-text-color: #000000;
  --fr-border-color: #dcdfe6;
  --fr-hover-color: #f5f7fa;
  --fr-popup-bg-color: #ffffff;
  --fr-text-color-regular: #606266;
  --fr-text-color-primary: #303133;
  --fr-border-color-lighter: #e4e7ed;
  --fr-border-color-light: #dcdfe6;
  --fr-bg-color-darker: #0a0a0a;
  color-scheme: light;
}

/* 全局基础前景/背景，确保 Popup 与页面根节点使用变量 */
html, body, #app {
  background-color: var(--fr-bg-color);
  color: var(--fr-text-color);
}

/* 深色模式变量 */
:root.dark {
  --fr-bg-color: #1a1a1a;
  --fr-text-color: #ffffff;
  --fr-border-color: #4c4c4c;
  --fr-hover-color: #2c2c2c;
  --fr-popup-bg-color: #1a1a1a;
  --fr-fill-color-blank: #1a1a1a;
  --fr-bg-color-overlay: #1a1a1a;
  --fr-fill-color-light: #2c2c2c;
  --fr-component-bg-color: #1a1a1a;
  --fr-text-color-regular: #e5eaf3;
  --fr-text-color-primary: #e5eaf3;
  --fr-border-color-lighter: #414243;
  --fr-border-color-light: #4c4c4c;
  --fr-bg-color-darker: #0a0a0a;
  color-scheme: dark;
}

/* Element Plus 组件适配 */
.el-select-dropdown {
  background-color: var(--fr-popup-bg-color) !important;
  border-color: var(--fr-border-color) !important;
}

.el-select-dropdown__item {
  color: var(--fr-text-color) !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: var(--fr-hover-color) !important;
}

.el-input__wrapper {
  background-color: var(--fr-bg-color) !important;
}

.el-input__inner {
  color: var(--fr-text-color) !important;
}

.el-textarea__inner {
  background-color: var(--fr-bg-color) !important;
  color: var(--fr-text-color) !important;
}

/* 自定义组件适配 */
.popup-text {
  color: var(--fr-text-color) !important;
}

.lightblue {
  background-color: var(--fr-bg-color) !important;
}

/* 折叠面板适配 */
.el-collapse {
  --el-collapse-header-bg-color: var(--fr-bg-color);
  --el-collapse-content-bg-color: var(--fr-bg-color);
  border-color: var(--fr-border-color);
}

.el-collapse-item__header,
.el-collapse-item__content {
  color: var(--fr-text-color);
}

/* 深色模式特殊处理（展开为标准选择器，避免无效嵌套） */
/* 容器背景与文本 */
.dark .el-container,
.dark .el-header,
.dark .el-main,
.dark .el-footer {
  background-color: var(--fr-bg-color) !important;
  color: var(--fr-text-color) !important;
}

/* 输入框和下拉菜单输入区 */
.dark .el-input__wrapper,
.dark .el-textarea__wrapper {
  background-color: var(--fr-fill-color-light) !important;
  box-shadow: 0 0 0 1px var(--fr-border-color) inset !important;
}

/* 下拉菜单容器 */
.dark .el-select-dropdown,
.dark .el-dropdown-menu {
  background-color: var(--fr-bg-color-overlay) !important;
  border-color: var(--fr-border-color) !important;
}

/* 一般按钮（非主按钮/成功按钮） */
.dark .el-button:not(.el-button--primary):not(.el-button--success) {
  background-color: var(--fr-fill-color-light) !important;
  border-color: var(--fr-border-color) !important;
  color: #ffffff !important;
}

/* 开关未开启色 */
.dark .el-switch {
  --el-switch-off-color: var(--fr-fill-color-light);
}

/* 弹出层类组件 */
.dark .el-tooltip__popper,
.dark .el-message-box,
.dark .el-dialog {
  background-color: var(--fr-bg-color-overlay) !important;
  border-color: var(--fr-border-color) !important;
}

/* 文本色适配点状控制 */
.dark .popup-text,
.dark .el-collapse-item__header,
.dark .el-collapse-item__content {
  color: var(--fr-text-color) !important;
}

/* 下拉项和分组标题在暗色下的弱化色 */
.dark .el-select-dropdown__item.is-disabled {
  color: rgba(255, 255, 255, 0.5) !important;
}

.dark .el-select-group__title {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 过渡动画 */
* {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* 下拉菜单分组样式 */
.el-select-group__title {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--el-text-color-secondary) !important;
  background-color: var(--fr-fill-color-light);
  border-bottom: 1px solid var(--el-border-color-light);
  margin: 0;
  line-height: 1.5;
}

.el-select-group__wrap:not(:last-of-type) {
  margin-bottom: 8px;
}

.el-select-group__wrap .el-select-dropdown__item {
  padding-left: 20px;
}

.el-select-dropdown__item.selected {
  color: var(--el-color-primary) !important;
  font-weight: bold;
} 