// ==================== 现代化列表页通用样式 Mixin ====================
// 使用方法：在页面 <style scoped lang="scss"> 中
//   @use '@/assets/styles/page-common.scss' as *;
//   .xxx-page { @include page-common-list; }

@mixin page-common-list {
  padding: 20px 24px;
  background: #f7f8fc;
  min-height: 100%;
  box-sizing: border-box;

  :deep(.el-card) {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  }

  :deep(.el-card__header) {
    border-bottom: 1px solid #edf2f7;
    padding: 16px 20px;
  }

  :deep(.el-card__body) {
    padding: 20px;
  }

  :deep(.el-table) {
    border: none !important;
  }

  :deep(.el-table::before) {
    display: none;
  }

  :deep(.el-table__inner-wrapper::before) {
    display: none;
  }

  :deep(.el-table__header th) {
    background: #fafbfc !important;
    color: #4a5568;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 2px solid #e2e8f0 !important;
    border-right: none !important;
  }

  :deep(.el-table__body td) {
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  :deep(.el-table__row:hover > td) {
    background: #f8fafc !important;
  }

  :deep(.el-button) {
    border-radius: 8px;
    font-weight: 500;
  }

  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }

  :deep(.el-table .el-button + .el-button) {
    margin-left: 0 !important;
  }

  :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 0 0 1px #e2e8f0 inset;
  }

  :deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #cbd5e1 inset;
  }

  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #4f46e5 inset, 0 0 0 3px rgba(79, 70, 229, 0.08);
  }
}
