/* ==================== 数据展示优化样式 ==================== */

/* 
 * 专注于优化各类数据展示的视觉效果
 * 包括：表格、列表、卡片、标签、状态、加载等
 */

/* ==================== 表格优化 ==================== */

/* 表格整体容器 */
.el-table {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  color: var(--text-primary);
}

/* 表头优化 */
.el-table th.el-table__cell {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 16px 12px !important;
  border-bottom: 2px solid var(--border-color) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1.4;
}

.el-table th.el-table__cell .cell {
  padding: 0;
  line-height: 1.4;
}

/* 表格单元格优化 */
.el-table td.el-table__cell {
  padding: 14px 12px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  transition: background-color var(--transition-fast);
}

.el-table td.el-table__cell .cell {
  padding: 0;
  line-height: 1.6;
  word-break: break-word;
}

/* 表格行高优化 - 48-56px */
.el-table .el-table__row {
  height: 52px;
}

/* 奇偶行颜色区分 */
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #fafbfc !important;
}

.el-table__body tr.el-table__row:not(.el-table__row--striped) td.el-table__cell {
  background-color: #ffffff !important;
}

/* 行悬停效果增强 */
.el-table__body tr:hover > td.el-table__cell {
  background-color: #f0f7ff !important;
  cursor: pointer;
}

/* 选中行高亮 */
.el-table__body tr.current-row > td.el-table__cell {
  background-color: #e6f4ff !important;
  font-weight: 500;
}

/* 表格内序号列 */
.el-table .el-table__cell:has(.el-table-column--selection) {
  background-color: #fafbfc;
}

/* 序号列样式 */
.el-table td.el-table__cell:first-child {
  font-weight: 500;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* 固定列阴影优化 */
.el-table .el-table__fixed-right {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
}

.el-table .el-table__fixed-left {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
}

/* ==================== 文字与排版优化 ==================== */

/* 关键数据突出 */
.data-highlight {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

/* 金额显示 */
.amount-text {
  font-weight: 600;
  color: #1890ff;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
}

.amount-text.positive {
  color: var(--success-color);
}

.amount-text.negative {
  color: var(--danger-color);
}

/* 数字强调 */
.number-emphasis {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 16px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* 长文本省略 - 单行 */
.text-ellipsis-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  cursor: help;
}

/* 长文本省略 - 两行 */
.text-ellipsis-2-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
  line-height: 1.5;
}

/* 长文本省略 - 三行 */
.text-ellipsis-3-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
  line-height: 1.5;
}

/* 标题样式 */
.data-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
}

/* 描述文本 */
.data-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 次要信息 */
.data-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ==================== 状态标签优化 ==================== */

/* 基础标签样式增强 */
.el-tag {
  border-radius: var(--radius-sm) !important;
  padding: 4px 12px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border: none !important;
  line-height: 1.4 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-base);
}

/* 状态标签颜色方案 */

/* 成功状态 - 绿色 */
.el-tag--success,
.status-success {
  background-color: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}

.el-tag--success.is-dark {
  background-color: var(--success-color) !important;
  color: #ffffff !important;
}

/* 警告状态 - 橙色 */
.el-tag--warning,
.status-warning {
  background-color: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}

.el-tag--warning.is-dark {
  background-color: var(--warning-color) !important;
  color: #ffffff !important;
}

/* 危险/错误状态 - 红色 */
.el-tag--danger,
.status-danger,
.status-error {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

.el-tag--danger.is-dark {
  background-color: var(--danger-color) !important;
  color: #ffffff !important;
}

/* 信息状态 - 蓝色 */
.el-tag--primary,
.el-tag--info,
.status-info {
  background-color: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

.el-tag--primary.is-dark,
.el-tag--info.is-dark {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* 中性/待处理状态 - 灰色 */
.status-pending,
.status-default {
  background-color: #f9fafb !important;
  color: #6b7280 !important;
  border: 1px solid #e5e7eb !important;
}

/* 进行中状态 - 青色 */
.status-processing {
  background-color: #ecfeff !important;
  color: #0891b2 !important;
  border: 1px solid #a5f3fc !important;
}

/* 已禁用状态 */
.status-disabled {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
  border: 1px solid #d1d5db !important;
  opacity: 0.7;
}

/* 状态标签悬停效果 */
.el-tag:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* VIP 标签特殊样式 */
.vip-tag {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
  border: none !important;
}

/* 热门标签 */
.hot-tag {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  animation: pulse 2s ease-in-out infinite;
}

/* 新标签 */
.new-tag {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ==================== 操作按钮优化 ==================== */

/* 表格内操作按钮统一样式 */
.el-table .el-button.is-link {
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  margin: 0 2px;
}

.el-table .el-button.is-link:hover {
  background-color: var(--bg-hover);
  transform: translateX(2px);
}

/* 主要操作按钮 */
.el-table .el-button--primary.is-link {
  color: var(--primary-color) !important;
}

.el-table .el-button--primary.is-link:hover {
  background-color: #eff6ff !important;
  color: var(--primary-dark) !important;
}

/* 成功操作按钮 */
.el-table .el-button--success.is-link {
  color: var(--success-color) !important;
}

.el-table .el-button--success.is-link:hover {
  background-color: #f0fdf4 !important;
  color: #15803d !important;
}

/* 警告操作按钮 */
.el-table .el-button--warning.is-link {
  color: var(--warning-color) !important;
}

.el-table .el-button--warning.is-link:hover {
  background-color: #fffbeb !important;
  color: #d97706 !important;
}

/* 危险操作按钮 */
.el-table .el-button--danger.is-link {
  color: var(--danger-color) !important;
}

.el-table .el-button--danger.is-link:hover {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}

/* 按钮组间距 */
.el-table .cell .el-button + .el-button {
  margin-left: 4px;
}

/* ==================== 图片和头像优化 ==================== */

/* 表格内头像 */
.el-table .el-avatar {
  border: 2px solid #f0f0f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-base);
}

.el-table .el-avatar:hover {
  transform: scale(1.15);
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
  z-index: 10;
  cursor: pointer;
}

/* 表格内图片 */
.el-table .el-image {
  border-radius: var(--radius-base);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
}

.el-table .el-image:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
  z-index: 10;
}

/* ==================== 开关和选择器优化 ==================== */

/* 表格内开关 */
.el-table .el-switch {
  transition: all var(--transition-base);
}

.el-table .el-switch:hover {
  transform: scale(1.08);
}

.el-table .el-switch.is-checked .el-switch__core {
  background-color: var(--success-color) !important;
}

/* ==================== 空状态优化 ==================== */

/* 优化空状态容器 */
.el-table__empty-block {
  padding: 60px 0 !important;
}

.el-table__empty-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  color: var(--text-tertiary);
  font-size: 14px;
}

/* 空状态图标 */
.empty-icon {
  font-size: 64px;
  color: var(--text-tertiary);
  opacity: 0.4;
  margin-bottom: var(--spacing-md);
}

/* 空状态文本 */
.empty-text {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

/* 空状态提示 */
.empty-hint {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* 自定义空状态组件 */
.custom-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  animation: fadeIn 0.5s ease-out;
}

.custom-empty-state .empty-icon {
  font-size: 80px;
  color: #cbd5e1;
  margin-bottom: var(--spacing-lg);
  opacity: 0.6;
}

.custom-empty-state .empty-text {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.custom-empty-state .empty-hint {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-lg);
}

.custom-empty-state .el-button {
  margin-top: var(--spacing-md);
}

/* ==================== 加载状态优化 ==================== */

/* 加载遮罩层优化 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(2px);
}

/* 加载图标优化 */
.el-loading-spinner {
  font-size: 32px;
}

.el-loading-spinner .circular {
  width: 42px;
  height: 42px;
  animation: loading-rotate 2s linear infinite;
}

.el-loading-spinner .path {
  stroke: var(--primary-color);
  stroke-width: 3;
  stroke-linecap: round;
  animation: loading-dash 1.5s ease-in-out infinite;
}

/* 加载文本 */
.el-loading-spinner .el-loading-text {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  margin-top: var(--spacing-md);
}

/* 骨架屏样式 */
.skeleton-wrapper {
  padding: var(--spacing-lg);
}

.skeleton-item {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-content {
  flex: 1;
}

.skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: var(--spacing-sm);
}

.skeleton-line:last-child {
  width: 60%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ==================== 分页优化 ==================== */

/* 分页容器 */
.el-pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
}

/* 分页按钮优化 */
.el-pagination button,
.el-pagination .el-pager li {
  min-width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  border-radius: var(--radius-base) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all var(--transition-base);
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
}

.el-pagination button:hover:not(:disabled),
.el-pagination .el-pager li:hover:not(.is-active) {
  background-color: var(--bg-hover);
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* 激活状态 */
.el-pagination .el-pager li.is-active {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  font-weight: 600 !important;
}

/* 分页信息文本 */
.el-pagination__total,
.el-pagination__jump {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

/* 每页大小选择器 */
.el-pagination__sizes .el-select {
  margin: 0;
}

.el-pagination__sizes .el-select .el-input__wrapper {
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
}

.el-pagination__sizes .el-select:hover .el-input__wrapper {
  border-color: var(--primary-light);
}

/* ==================== 数据卡片优化 ==================== */

/* 数据卡片容器 */
.data-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.data-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--primary-light);
}

/* 数据卡片头部 */
.data-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.data-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 数据卡片内容 */
.data-card-content {
  padding: var(--spacing-md) 0;
}

.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  line-height: 1.6;
}

.data-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.data-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ==================== 描述列表优化 ==================== */

/* Element Plus 描述列表增强 */
.el-descriptions {
  border-radius: var(--radius-base);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.el-descriptions__label {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  background-color: #fafbfc !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  width: 30%;
  border-right: 1px solid var(--border-light) !important;
}

.el-descriptions__content {
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.6;
  background-color: var(--bg-primary) !important;
}

.el-descriptions__body .el-descriptions__table {
  border-collapse: collapse;
}

.el-descriptions__body .el-descriptions__table td {
  border: 1px solid var(--border-light) !important;
}

/* ==================== 响应式优化 ==================== */

/* 平板设备 */
@media (max-width: 1024px) {
  .el-table th.el-table__cell,
  .el-table td.el-table__cell {
    padding: 12px 10px !important;
    font-size: 13px !important;
  }

  .el-table .el-table__row {
    height: 48px;
  }

  .data-card {
    padding: var(--spacing-lg);
  }
}

/* 移动设备 */
@media (max-width: 768px) {
  .el-table th.el-table__cell,
  .el-table td.el-table__cell {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  .el-table .el-table__row {
    height: 44px;
  }

  .el-tag {
    padding: 2px 8px !important;
    font-size: 11px !important;
  }

  .el-table .el-button.is-link {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  .data-card {
    padding: var(--spacing-md);
    border-radius: var(--radius-base);
  }

  .el-pagination button,
  .el-pagination .el-pager li {
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 13px !important;
  }

  .custom-empty-state {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .custom-empty-state .empty-icon {
    font-size: 60px;
  }
}

