/**
 * Element Plus 样式覆盖
 * 遵循 Element Plus 官方主题定制方式
 * 深色模式使用 html.dark 类名
 */

// 全局主题色覆盖 (确保自定义主题色应用到 Element Plus)
:root {
  --el-color-primary: var(--color-primary);
  --el-color-primary-light-3: var(--color-primary-light-3);
  --el-color-primary-light-5: var(--color-primary-light-5);
  --el-color-primary-light-7: var(--color-primary-light-7);
  --el-color-primary-light-8: var(--color-primary-light-7);
  --el-color-primary-light-9: var(--color-primary-light-9);
  --el-color-primary-dark-2: var(--color-primary-dark-2);

  // 全局圆角覆盖
  --el-border-radius-base: var(--radius-base);
  --el-border-radius-small: var(--radius-sm);
  --el-border-radius-round: var(--radius-base);
  --el-border-radius-circle: 50%;
}

// 按钮
.el-button {
  --el-border-radius-base: var(--radius-base);
  border-radius: var(--radius-base);
}

.el-button--primary {
  --el-button-bg-color: var(--color-primary);
  --el-button-border-color: var(--color-primary);
  --el-button-hover-bg-color: var(--color-primary-light-3);
  --el-button-hover-border-color: var(--color-primary-light-3);
  --el-button-active-bg-color: var(--color-primary-dark-2);
  --el-button-active-border-color: var(--color-primary-dark-2);
}

// Default 按钮 hover - 单色系配色（排除其他类型按钮）
.el-button--default:not(.is-disabled):not(.el-button--primary):not(.el-button--danger):not(.el-button--success):not(
    .el-button--warning
  ):not(.el-button--info) {
  &:hover,
  &:focus {
    --el-button-hover-bg-color: var(--color-primary-light-9);
    --el-button-hover-text-color: var(--color-primary);
    --el-button-hover-border-color: var(--color-primary-light-5);
    color: var(--color-primary);
    border-color: var(--color-primary-light-5);
    background-color: var(--color-primary-light-9);
  }
}

// 链接 - 单色系配色
.el-link--primary {
  --el-link-text-color: var(--color-primary);
  --el-link-hover-text-color: var(--color-primary-dark-2);
}

// 链接按钮统一 hover 风格 - 颜色变亮 + 下划线
.el-button.is-link:not(.is-disabled) {
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

// Primary 链接按钮
.el-button--primary.is-link:not(.is-disabled) {
  &:hover,
  &:focus {
    color: var(--color-primary-light-3);
  }
}

// Danger 链接按钮
.el-button--danger.is-link:not(.is-disabled) {
  &:hover,
  &:focus {
    color: var(--color-danger-light);
  }
}

// Success 链接按钮
.el-button--success.is-link:not(.is-disabled) {
  &:hover,
  &:focus {
    color: var(--color-success-light);
  }
}

// Warning 链接按钮
.el-button--warning.is-link:not(.is-disabled) {
  &:hover,
  &:focus {
    color: var(--color-warning-light);
  }
}

// 输入框
.el-input {
  --el-input-border-radius: var(--radius-base);

  .el-input__wrapper {
    border-radius: var(--radius-base);
  }
}

.el-textarea {
  .el-textarea__inner {
    border-radius: var(--radius-base);
  }
}

// 选择框
.el-select {
  --el-select-border-radius: var(--radius-base);

  .el-select__wrapper {
    border-radius: var(--radius-base);
  }
}

// 选择框下拉菜单
.el-select-dropdown {
  border-radius: var(--radius-base) !important;

  .el-select-dropdown__wrap {
    border-radius: var(--radius-base);
  }

  .el-select-dropdown__item {
    border-radius: 0;
  }
}

// 下拉菜单弹出层
.el-popper {
  border-radius: var(--radius-base) !important;
}

// 卡片
.el-card {
  --el-card-border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background-color: var(--bg-container);
}

// 表格
.el-table {
  --el-table-border-color: var(--border-color);
  --el-table-header-bg-color: var(--bg-hover);
  --el-table-row-hover-bg-color: var(--bg-hover);
  --el-table-bg-color: var(--bg-container);
  --el-table-tr-bg-color: var(--bg-container);
  --el-table-text-color: var(--text-primary);
  --el-table-header-text-color: var(--text-primary);

  border-radius: var(--radius-base);
  overflow: hidden;

  th.el-table__cell {
    font-weight: var(--font-weight-semibold);
  }
}

// 分页
.el-pagination {
  --el-pagination-button-bg-color: var(--bg-container);
  --el-pagination-hover-color: var(--color-primary);

  .el-pager li {
    border-radius: var(--radius-sm);
  }
}

// 对话框
.el-dialog {
  --el-dialog-border-radius: var(--radius-lg);
  --el-dialog-bg-color: var(--bg-container);
}

// 抽屉
.el-drawer {
  --el-drawer-bg-color: var(--bg-container);
}

// 消息
.el-message {
  --el-message-border-radius: var(--radius-base);
}

// 标签
.el-tag {
  --el-tag-border-radius: var(--radius-sm);
}

// 下拉菜单
.el-dropdown-menu {
  --el-dropdown-menu-border-radius: var(--radius-base);
  border: 1px solid var(--border-color);
}

// 菜单
.el-menu {
  --el-menu-border-color: transparent;
}

// 表单
.el-form-item__label {
  color: var(--text-regular);
  font-weight: var(--font-weight-medium);
}

// 深色模式下的特殊处理
html.dark {
  // Element Plus 核心变量覆盖
  --el-color-primary: var(--color-primary);
  --el-color-primary-light-3: var(--color-primary-light-3);
  --el-color-primary-light-5: var(--color-primary-light-5);
  --el-color-primary-light-7: var(--color-primary-light-7);
  --el-color-primary-light-8: var(--color-primary-light-7);
  --el-color-primary-light-9: var(--color-primary-light-9);
  --el-color-primary-dark-2: var(--color-primary-dark-2);

  --el-bg-color: var(--bg-container);
  --el-bg-color-page: var(--bg-page);
  --el-bg-color-overlay: var(--bg-container);

  --el-text-color-primary: var(--text-primary);
  --el-text-color-regular: var(--text-regular);
  --el-text-color-secondary: var(--text-secondary);
  --el-text-color-placeholder: var(--text-placeholder);
  --el-text-color-disabled: var(--text-disabled);

  --el-border-color: var(--border-color);
  --el-border-color-light: var(--border-color-light);
  --el-border-color-lighter: var(--border-color-lighter);
  --el-border-color-dark: var(--border-color-dark);

  --el-fill-color: var(--bg-hover);
  --el-fill-color-light: var(--bg-hover);
  --el-fill-color-lighter: var(--bg-page);
  --el-fill-color-blank: var(--bg-container);

  // 表格深色模式
  .el-table {
    --el-table-bg-color: var(--bg-container);
    --el-table-tr-bg-color: var(--bg-container);
    --el-table-header-bg-color: var(--bg-hover);
    --el-table-row-hover-bg-color: var(--bg-hover);
    --el-table-border-color: var(--border-color);
    --el-table-text-color: var(--text-primary);
    --el-table-header-text-color: var(--text-primary);
    --el-table-current-row-bg-color: var(--bg-active);

    background-color: var(--bg-container) !important;

    th.el-table__cell,
    td.el-table__cell {
      background-color: transparent !important;
    }

    .el-table__inner-wrapper::before {
      background-color: var(--border-color);
    }
  }

  // 输入框
  .el-input__wrapper {
    background-color: var(--bg-container);
    box-shadow: 0 0 0 1px var(--border-color) inset;

    &:hover {
      box-shadow: 0 0 0 1px var(--border-color-light) inset;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px var(--color-primary) inset;
    }
  }

  // 选择框
  .el-select__wrapper {
    background-color: var(--bg-container);
    box-shadow: 0 0 0 1px var(--border-color) inset;
  }

  // 日期选择器弹出
  .el-picker__popper {
    background-color: var(--bg-container);
    border-color: var(--border-color);
  }

  // 下拉菜单弹出
  .el-select-dropdown,
  .el-dropdown-menu {
    background-color: var(--bg-container) !important;
    border-color: var(--border-color) !important;
  }

  // Select 下拉选项
  .el-select-dropdown {
    .el-select-dropdown__item {
      color: var(--text-regular);

      &:hover,
      &.hover {
        background-color: var(--bg-hover);
      }

      &.is-selected,
      &.selected {
        color: var(--color-primary);
        font-weight: var(--font-weight-medium);
      }
    }
  }

  // 弹出层
  .el-popper {
    background-color: var(--bg-container) !important;
    border-color: var(--border-color) !important;
    border: 1px solid var(--border-color) !important;

    &.el-popper--light,
    &.is-light {
      background-color: var(--bg-container) !important;
      border: 1px solid var(--border-color) !important;

      .el-popper__arrow::before {
        background-color: var(--bg-container) !important;
        border-color: var(--border-color) !important;
      }
    }

    .el-popper__arrow::before {
      background-color: var(--bg-container) !important;
      border-color: var(--border-color) !important;
    }
  }

  // 下拉菜单
  .el-dropdown__popper,
  .el-dropdown__popper.el-popper {
    background-color: var(--bg-container) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;

    .el-dropdown-menu {
      background-color: var(--bg-container) !important;
      border: none !important;

      .el-dropdown-menu__item {
        color: var(--text-regular) !important;

        &:hover,
        &:focus,
        &.is-hovering {
          background-color: var(--bg-hover) !important;
          color: var(--color-primary) !important;
        }

        &.active {
          color: var(--color-primary) !important;
        }
      }
    }

    .el-popper__arrow::before {
      background-color: var(--bg-container) !important;
      border-color: var(--border-color) !important;
    }
  }

  // 对话框
  .el-dialog {
    background-color: var(--bg-container);
  }

  // 消息框
  .el-message-box {
    background-color: var(--bg-container);
    border-color: var(--border-color);
  }

  // Tooltip 深色模式
  .el-popper.is-dark {
    background-color: var(--bg-container) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;

    .el-popper__arrow::before {
      background-color: var(--bg-container) !important;
      border-color: var(--border-color) !important;
    }
  }
}
