/* Element Plus 组件样式覆盖 - 基于参考项目设计 */

/* ===== 按钮组件 ===== */
.el-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-primary);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-color), var(--transition-background), var(--transition-border), var(--transition-box-shadow), var(--transition-transform);
  background: none;
  color: var(--color-text-primary);
  padding: var(--spacing-lg) var(--spacing-xl);
}

.el-button:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.el-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.el-button--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
  box-shadow: var(--shadow-button);
}

.el-button--primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
}

.el-button--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-button);
}

.el-button--success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-white);
  box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.3);
}

.el-button--success:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-success-rgb), 0.4);
}

.el-button--success:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.3);
}

.el-button--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-white);
  box-shadow: 0 4px 16px rgba(var(--color-danger-rgb), 0.3);
}

.el-button--danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-danger-rgb), 0.4);
}

.el-button--danger:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(var(--color-danger-rgb), 0.3);
}

.el-button--warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-text-white);
  box-shadow: 0 4px 16px rgba(var(--color-warning-rgb), 0.3);
}

.el-button--warning:hover {
  background: var(--color-warning);
  border-color: var(--color-warning);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-warning-rgb), 0.4);
}

.el-button--warning:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(var(--color-warning-rgb), 0.3);
}

.el-button--info {
  background: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-text-white);
  box-shadow: 0 4px 16px rgba(var(--color-info-rgb), 0.3);
}

.el-button--info:hover {
  background: var(--color-info);
  border-color: var(--color-info);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-info-rgb), 0.4);
}

.el-button--info:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(var(--color-info-rgb), 0.3);
}

.el-button--default {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.el-button--default:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.el-button--default:active {
  transform: translateY(0);
}

.el-button--small {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  height: var(--button-height-sm);
}

.el-button--small.el-button--primary:hover,
.el-button--small.el-button--success:hover,
.el-button--small.el-button--info:hover,
.el-button--small.el-button--warning:hover,
.el-button--small.el-button--danger:hover {
  transform: translateY(-1px);
}

.el-button--small.el-button--primary:active,
.el-button--small.el-button--success:active,
.el-button--small.el-button--info:active,
.el-button--small.el-button--warning:active,
.el-button--small.el-button--danger:active {
  transform: translateY(0);
}

.el-button.is-circle {
  border-radius: var(--border-radius-full);
}

.el-button.is-link {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: var(--spacing-sm) var(--spacing-md);
}

.el-button.is-link:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.el-button--text {
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-primary);
}

.el-button--text:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  transform: none;
}

/* ===== 卡片组件 ===== */
.el-card {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-small);
  border: 1px solid var(--color-border);
}

.el-card__header {
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}

.el-card__body {
  padding: var(--spacing-xl);
  background: var(--color-background);
}

/* ===== 表格组件 ===== */
.el-table {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-small);
  font-family: var(--font-family-primary);
}

.el-table .el-table__header-wrapper {
  background: var(--color-background);
}

.el-table th {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-secondary);
  border-bottom: 1px solid var(--color-border);
}

.el-table td {
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
}

.el-table .el-table__row:hover > td {
  background: rgba(var(--color-primary-rgb), 0.05);
}

.el-table .el-table__row {
  transition: var(--transition-background);
}

/* ===== 对话框组件 ===== */
.el-dialog {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-large);
  overflow: hidden;
}

.el-dialog__header {
  background: var(--color-primary);
  color: var(--color-text-white);
  padding: var(--spacing-2xl);
  border-bottom: none;
}

.el-dialog__title {
  color: var(--color-text-white);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-secondary);
}

.el-dialog__headerbtn {
  position: absolute;
  top: 50%;
  right: var(--spacing-lg);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: var(--transition-background), var(--transition-transform);
}

.el-dialog__headerbtn .el-dialog__close {
  color: var(--color-text-white);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.el-dialog__headerbtn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.el-dialog__body {
  padding: var(--spacing-2xl);
}

.el-dialog__footer {
  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
  text-align: right;
}

/* ===== 表单组件 ===== */
.el-form-item__label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
}

.el-input__wrapper {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  transition: var(--transition-border), var(--transition-box-shadow);
  box-shadow: none;
}

.el-input__wrapper:hover {
  border-color: var(--color-primary);
  box-shadow: none;
}

.el-input__wrapper.is-focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-small);
}

.el-input__inner::placeholder {
  color: var(--color-text-light);
}

.el-textarea__inner {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  transition: var(--transition-border), var(--transition-box-shadow);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  box-shadow: none;
}

.el-textarea__inner:hover {
  border-color: var(--color-primary);
  box-shadow: none;
}

.el-textarea__inner:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-small);
}

.el-textarea__inner::placeholder {
  color: var(--color-text-light);
}

/* ===== 选择器组件 ===== */
.el-select .el-input__wrapper {
  border-radius: var(--border-radius-md);
  box-shadow: none;
}

.el-select-dropdown {
  border-radius: var(--border-radius-lg);
  border: none;
  box-shadow: var(--shadow-large);
  padding: var(--spacing-md);
}

.el-select-dropdown__item {
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  transition: var(--transition-color), var(--transition-background);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.el-select-dropdown__item:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.el-select-dropdown__item.is-selected {
  background: var(--color-primary);
  color: var(--color-text-white);
}

/* ===== 数字输入框 ===== */
.el-input-number {
  width: 100px;
}

.el-input-number .el-input__wrapper {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  transition: var(--transition-border), var(--transition-box-shadow);
  box-shadow: none;
}

.el-input-number .el-input__wrapper:hover {
  border-color: var(--color-primary);
  box-shadow: none;
}

.el-input-number .el-input__wrapper.is-focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-small);
}

/* ===== 上传组件 ===== */
.el-upload-dragger {
  border-radius: var(--border-radius-lg);
  border: 2px dashed var(--color-border);
  transition: var(--transition-border), var(--transition-background);
}

.el-upload-dragger:hover {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.05);
}

/* ===== 标签组件 ===== */
.el-tag {
  border-radius: var(--border-radius-full);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-primary);
}

.el-tag--success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-white);
}

.el-tag--info {
  background: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-text-white);
}

.el-tag--warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-text-white);
}

.el-tag--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-white);
}

/* ===== 消息提示 ===== */
.el-message {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-large);
  font-family: var(--font-family-primary);
}

.el-message--success {
  background: var(--color-success);
  border-color: var(--color-success);
}

.el-message--warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
}

.el-message--error {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.el-message--info {
  background: var(--color-info);
  border-color: var(--color-info);
}

/* ===== 复选框 ===== */
.el-checkbox {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.el-checkbox__inner:hover {
  border-color: var(--color-primary);
}

/* ===== 分页 ===== */
.el-pagination {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
}

.el-pagination .el-pager li {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  border-radius: var(--border-radius-sm);
  margin: 0 2px;
  transition: var(--transition-color), var(--transition-background);
}

.el-pagination .el-pager li.active {
  background: var(--color-primary);
  color: var(--color-text-white);
}

.el-pagination .el-pager li:hover {
  color: var(--color-text-primary);
}

.el-pagination button {
  border-radius: var(--border-radius-sm);
}

/* ===== 开关 ===== */
.el-switch {
  --el-switch-on-color: var(--color-success);
}

.el-switch__core {
  border-radius: var(--border-radius-full);
}

/* ===== 下拉菜单 ===== */
.el-dropdown-menu {
  border-radius: var(--border-radius-lg);
  border: none;
  box-shadow: var(--shadow-large);
  padding: var(--spacing-md);
  background: var(--color-background);
  overflow: hidden;
  font-family: var(--font-family-primary);
}

.el-dropdown-menu__item {
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  transition: var(--transition-color), var(--transition-background);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.el-dropdown-menu__item:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.el-dropdown-menu__item.is-divided {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 8px;
  padding-top: 16px;
}