/* 自定义美化样式 */

/* 表格样式美化 */
.el-table {
  /* 表头样式 */
  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
    th {
      background: linear-gradient(to bottom, #f8f9fa, #edf2f7) !important;
      color: #334155 !important;
      font-weight: 600;
      height: 46px !important;
      font-size: 14px !important;
      border-bottom: 2px solid #e2e8f0 !important;
      transition: all 0.3s;
    }
  }

  /* 表格行样式 */
  .el-table__body-wrapper {
    .el-table__row {
      transition: all 0.3s;

      &:hover {
        background-color: #f1f5f9 !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
      }


    }

    /* 斑马纹效果 */
    .el-table__row--striped td {
      background-color: #f8fafc !important;
    }
  }

  /* 表格边框 */
  &.el-table--border {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0 !important;

    th, td {
      border-right: 1px solid #e2e8f0 !important;
    }
  }
}

/* 分页组件美化 */
.pagination-container {
  margin-top: 24px !important;
  padding: 10px 0;

  .el-pagination {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    .btn-prev, .btn-next, .number {
      background-color: #ffffff;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      margin: 0 3px;
      min-width: 32px;
      height: 32px;
      line-height: 32px;

      &:hover {
        color: #3b82f6;
        border-color: #3b82f6;
      }
    }

    .el-pagination__jump, .el-pagination__sizes {
      margin-left: 16px;
    }

    .active {
      background-color: #3b82f6 !important;
      color: #ffffff !important;
      border-color: #3b82f6 !important;
    }
  }
}

/* 按钮样式美化 */
.el-button {
  border-radius: 6px;
  padding: 10px 16px;
  transition: all 0.3s;
  font-weight: 500;
  border: 1px solid transparent;

  &:hover, &:focus {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  &.is-disabled {
    opacity: 0.6;
    &:hover {
      transform: none;
      box-shadow: none;
    }
  }

  /* 主按钮 */
  &.el-button--primary {
    background: linear-gradient(to right, #3b82f6, #2563eb);
    border-color: #2563eb;

    &.is-plain {
      color: #3b82f6;
      background: rgba(59, 130, 246, 0.1);
      border-color: rgba(59, 130, 246, 0.3);

      &:hover, &:focus {
        background: #3b82f6;
        color: #ffffff;
        border-color: #3b82f6;
      }
    }
  }

  /* 成功按钮 */
  &.el-button--success {
    background: linear-gradient(to right, #10b981, #059669);
    border-color: #059669;

    &.is-plain {
      color: #10b981;
      background: rgba(16, 185, 129, 0.1);
      border-color: rgba(16, 185, 129, 0.3);

      &:hover, &:focus {
        background: #10b981;
        color: #ffffff;
        border-color: #10b981;
      }
    }
  }

  /* 危险按钮 */
  &.el-button--danger {
    background: linear-gradient(to right, #ef4444, #dc2626);
    border-color: #dc2626;

    &.is-plain {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.3);

      &:hover, &:focus {
        background: #ef4444;
        color: #ffffff;
        border-color: #ef4444;
      }
    }
  }

  /* 警告按钮 */
  &.el-button--warning {
    background: linear-gradient(to right, #f59e0b, #d97706);
    border-color: #d97706;

    &.is-plain {
      color: #f59e0b;
      background: rgba(245, 158, 11, 0.1);
      border-color: rgba(245, 158, 11, 0.3);

      &:hover, &:focus {
        background: #f59e0b;
        color: #ffffff;
        border-color: #f59e0b;
      }
    }
  }

  /* 信息按钮 */
  &.el-button--info {
    background: linear-gradient(to right, #6b7280, #4b5563);
    border-color: #4b5563;

    &.is-plain {
      color: #6b7280;
      background: rgba(107, 114, 128, 0.1);
      border-color: rgba(107, 114, 128, 0.3);

      &:hover, &:focus {
        background: #6b7280;
        color: #ffffff;
        border-color: #6b7280;
      }
    }
  }

  /* 文本按钮 */
  &.el-button--text {
    padding: 5px 8px;
    color: #3b82f6;

    &:hover, &:focus {
      color: #60a5fa;
      background-color: rgba(59, 130, 246, 0.1);
      border-radius: 4px;
      transform: none;
      box-shadow: none;
    }
  }

  /* 小按钮 */
  &.el-button--mini {
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 4px;
  }
}

/* 表单美化 */
.el-form {
  .el-form-item {
    margin-bottom: 20px;

    .el-form-item__label {
      font-weight: 500;
      color: #334155;
    }

    .el-input__inner, .el-textarea__inner {
      border-radius: 6px;
      border-color: #e2e8f0;
      transition: all 0.3s;

      &:hover {
        border-color: #94a3b8;
      }

      &:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
      }
    }
  }
}

/* 搜索区域美化 */
.search-container {
  margin-bottom: 20px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 卡片美化 */
.el-card {
  border-radius: 8px;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 16px;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px);
  }

  .el-card__header {
    border-bottom: 1px solid #f1f5f9;
    padding: 16px 20px;
    font-weight: 600;
    color: #334155;
  }

  .el-card__body {
    padding: 20px;
  }
}

/* 弹窗美化 */
.el-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  .el-dialog__header {
    background-color: #f8fafc;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;

    .el-dialog__title {
      font-weight: 600;
      color: #334155;
      font-size: 16px;
    }
  }

  .el-dialog__body {
    padding: 24px;
  }

  .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #f1f5f9;
    background-color: #f8fafc;
  }
}

/* 下拉菜单美化 */
.el-dropdown-menu {
  padding: 8px 0;
  border-radius: 8px;
  border: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  .el-dropdown-menu__item {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;

    &:hover {
      background-color: #f1f5f9;
      color: #2563eb;
    }

    i {
      margin-right: 8px;
      font-size: 14px;
    }
  }
}

/* 开关美化 */
.el-switch {
  &.is-checked {
    .el-switch__core {
      background-color: #10b981 !important;
      border-color: #10b981 !important;
    }
  }

  .el-switch__core {
    background-color: #e2e8f0;
    border-color: #e2e8f0;
  }
}

/* 美化列表组工具栏 */
.mb8 {
  margin-bottom: 16px !important;

  .el-button {
    margin-right: 8px;
  }
}
