/* ==================== 通用列表页面样式 ==================== */

/* 页面容器 */
.list-container {
  padding: 0;
  animation: fadeIn 0.5s ease-out;
}

/* 页面标题 */
.page-title {
  font-size: var(--font-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xl) 0;
  position: relative;
  padding-bottom: var(--spacing-md);
  animation: fadeIn 0.4s ease-out;
  /* 使用 fadeIn 代替 slideInLeft，避免动画冲突 */
}

.page-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
  border-radius: 2px;
}

/* ==================== 工具栏卡片 ==================== */
.toolbar-card {
  margin-bottom: var(--spacing-lg);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: all var(--transition-base);
  animation: fadeIn 0.5s ease-out;
  /* 移除 slideInDown 动画，避免遮挡页面标题 */
}

.toolbar-card:hover {
  box-shadow: var(--shadow-md);
}

.toolbar-card .el-card__body {
  padding: var(--spacing-lg);
}

/* 搜索输入框样式 */
.toolbar-card .el-input {
  transition: all var(--transition-base);
}

.toolbar-card .el-input:hover .el-input__wrapper {
  border-color: var(--primary-light);
}

.toolbar-card .el-input .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* 按钮样式增强 */
.toolbar-card .el-button {
  transition: all var(--transition-base);
  font-weight: var(--font-medium);
}

.toolbar-card .el-button--primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  color: #ffffff !important;  /* 确保按钮文字为白色 */
}

.toolbar-card .el-button--primary span {
  color: #ffffff !important;  /* 确保按钮内部文字为白色 */
}

.toolbar-card .el-button--primary .el-icon {
  color: #ffffff !important;  /* 确保按钮图标为白色 */
}

.toolbar-card .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.toolbar-card .el-button--primary:active {
  transform: translateY(0);
}

/* 下拉选择器 */
.toolbar-card .el-select {
  transition: all var(--transition-base);
}

/* ==================== 表格卡片 ==================== */
.table-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: all var(--transition-base);
  animation: fadeInUp 0.8s ease-out;
}

.table-card:hover {
  box-shadow: var(--shadow-md);
}

.table-card .el-card__body {
  padding: var(--spacing-xl);
}

/* ==================== 表格样式增强 ==================== */

/* 表格容器 */
.table-card .el-table {
  border-radius: var(--radius-base);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

/* 表头样式 */
.table-card .el-table th.el-table__cell {
  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  font-size: var(--font-sm);
  padding: var(--spacing-md) var(--spacing-base);
  border-bottom: 2px solid var(--border-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 表格单元格 */
.table-card .el-table td.el-table__cell {
  padding: var(--spacing-md) var(--spacing-base);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  transition: all var(--transition-fast);
}

/* 斑马纹 */
.table-card .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: var(--bg-secondary);
}

/* 悬停效果 */
.table-card .el-table__body tr:hover > td {
  background-color: var(--bg-hover) !important;
  cursor: pointer;
}

/* 序号列样式 */
.table-card .el-table .el-table__cell:first-child {
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

/* 图片/头像样式 */
.table-card .el-avatar {
  border: 2px solid var(--border-color);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.table-card .el-avatar:hover {
  transform: scale(1.1);
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.table-card .el-image {
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
}

.table-card .el-image:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

/* 标签样式 */
.table-card .el-tag {
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: var(--font-xs);
  transition: all var(--transition-base);
}

/* 操作按钮 */
.table-card .el-button.is-link {
  font-weight: var(--font-medium);
  padding: 4px 8px;
  transition: all var(--transition-base);
}

.table-card .el-button.is-link:hover {
  transform: translateX(2px);
}

/* 开关样式 */
.table-card .el-switch {
  transition: all var(--transition-base);
}

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

/* ==================== 分页容器 ==================== */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.pagination-container .el-pagination {
  gap: var(--spacing-sm);
}

.pagination-container .el-pagination button,
.pagination-container .el-pager li {
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
  font-weight: var(--font-medium);
}

.pagination-container .el-pager li:hover {
  transform: translateY(-2px);
  background-color: var(--bg-hover);
}

.pagination-container .el-pager li.is-active {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* ==================== 对话框样式 ==================== */

/* 对话框容器 */
.el-dialog {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}

/* 对话框头部 */
.el-dialog__header {
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  border-bottom: 2px solid var(--border-color);
}

.el-dialog__title {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

/* 对话框内容 */
.el-dialog__body {
  padding: var(--spacing-xl);
  max-height: 60vh;
  overflow-y: auto;
}

/* 对话框页脚 */
.el-dialog__footer {
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.el-dialog__footer .el-button {
  min-width: 100px;
  transition: all var(--transition-base);
}

/* 表单样式 */
.el-dialog .el-form-item {
  margin-bottom: var(--spacing-lg);
}

.el-dialog .el-form-item__label {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.el-dialog .el-input,
.el-dialog .el-textarea {
  transition: all var(--transition-base);
}

/* 描述列表样式 */
.el-dialog .el-descriptions {
  border-radius: var(--radius-base);
  overflow: hidden;
}

.el-dialog .el-descriptions__label {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.el-dialog .el-descriptions__content {
  color: var(--text-secondary);
}

/* ==================== 空状态 ==================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  color: var(--text-tertiary);
  animation: fadeIn 0.8s ease-out;
}

.empty-state-icon {
  font-size: 72px;
  margin-bottom: var(--spacing-lg);
  opacity: 0.4;
  color: var(--text-tertiary);
}

.empty-state-text {
  font-size: var(--font-md);
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

.empty-state-hint {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

/* ==================== 加载状态 ==================== */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-tertiary);
}

/* ==================== 卡片信息展示 ==================== */

/* 信息卡片 */
.info-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  transition: all var(--transition-base);
}

.info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.info-card-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--border-color);
}

.info-card-content {
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}

/* 信息行 */
.info-row {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  flex: 0 0 120px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.info-value {
  flex: 1;
  color: var(--text-primary);
  font-size: var(--font-sm);
}

/* ==================== 搜索和筛选 ==================== */

/* 搜索框容器 */
.search-wrapper {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* 筛选组 */
.filter-group {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

.filter-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  min-width: 60px;
}

/* ==================== 操作按钮组 ==================== */

/* 按钮组容器 */
.button-group {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* 表格操作按钮组 */
.table-actions {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.table-actions .el-button {
  padding: 4px 8px;
  font-size: var(--font-xs);
}

/* ==================== 批量操作栏 ==================== */

.batch-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-base);
  margin-bottom: var(--spacing-md);
}

.batch-actions-info {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.batch-actions-info .count {
  color: var(--primary-color);
  font-weight: var(--font-semibold);
  margin: 0 4px;
}

.batch-actions-buttons {
  display: flex;
  gap: var(--spacing-sm);
}

/* ==================== 提示信息 ==================== */

/* 提示框 */
.tip-box {
  padding: var(--spacing-md);
  border-radius: var(--radius-base);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.tip-box-icon {
  font-size: var(--font-lg);
  flex-shrink: 0;
}

.tip-box-content {
  flex: 1;
  font-size: var(--font-sm);
  line-height: var(--line-height-loose);
}

/* 不同类型的提示框 */
.tip-box-info {
  background-color: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.tip-box-success {
  background-color: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.tip-box-warning {
  background-color: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.tip-box-danger {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* ==================== 徽章和指示器 ==================== */

/* 数字徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  background-color: var(--danger-color);
  color: #ffffff;
}

.badge-primary {
  background-color: var(--primary-color);
}

.badge-success {
  background-color: var(--success-color);
}

.badge-warning {
  background-color: var(--warning-color);
}

.badge-danger {
  background-color: var(--danger-color);
}

/* 状态点 */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
}

.status-dot-success {
  background-color: var(--success-color);
}

.status-dot-warning {
  background-color: var(--warning-color);
}

.status-dot-danger {
  background-color: var(--danger-color);
}

.status-dot-info {
  background-color: var(--info-color);
}

/* ==================== 工具类 ==================== */

/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 文本颜色 */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-danger { color: var(--danger-color); }
.text-info { color: var(--info-color); }

/* 文本大小 */
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }

/* 文本粗细 */
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* 间距工具 */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }

.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Flex 布局 */
.flex { display: flex; }
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* 显示/隐藏 */
.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* 圆角 */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-base); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* 阴影 */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* 过渡动画 */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* 鼠标样式 */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* 溢出处理 */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* ==================== 响应式设计 ==================== */

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) {
  .page-title {
    font-size: var(--font-2xl);
    margin-bottom: var(--spacing-lg);
  }

  .toolbar-card .el-card__body,
  .table-card .el-card__body {
    padding: var(--spacing-md);
  }

  .table-card .el-table {
    font-size: var(--font-xs);
  }

  .pagination-container {
    justify-content: center;
  }
}

/* 移动设备 (< 768px) */
@media (max-width: 768px) {
  .page-title {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-md);
  }

  .toolbar-card {
    margin-bottom: var(--spacing-md);
  }

  .toolbar-card .el-card__body {
    padding: var(--spacing-sm);
  }

  .toolbar-card .el-space {
    width: 100%;
  }

  .toolbar-card .el-input,
  .toolbar-card .el-select {
    width: 100% !important;
  }

  .table-card .el-card__body {
    padding: var(--spacing-sm);
  }

  .table-card .el-table th.el-table__cell,
  .table-card .el-table td.el-table__cell {
    padding: var(--spacing-sm) var(--spacing-xs);
    font-size: var(--font-xs);
  }

  .pagination-container {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
  }

  .pagination-container .el-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .el-dialog {
    width: 90% !important;
    margin: var(--spacing-lg) auto !important;
  }

  .el-dialog__header,
  .el-dialog__body {
    padding: var(--spacing-md);
  }

  .el-dialog__footer {
    padding: var(--spacing-md);
  }
}

/* 超小屏幕 (< 480px) */
@media (max-width: 480px) {
  .page-title {
    font-size: var(--font-lg);
  }

  .table-card .el-table {
    font-size: 11px;
  }

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

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

/* 超大屏幕 (>= 1920px) */
@media (min-width: 1920px) {
  .page-title {
    font-size: var(--font-4xl);
  }

  .table-card .el-table th.el-table__cell,
  .table-card .el-table td.el-table__cell {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

