/* 原始表格样式 - 保留您的结构 */
.table-x {
    width: 100%;
    overflow-x: auto;
    /* 关键属性 - 允许水平滚动 */
    -webkit-overflow-scrolling: touch;
    /* 移动端平滑滚动 */
}

.table-x p {
  font-weight: 700;
}

/* ===== 平板端样式 (768px-991.98px) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .table-x {
    width: 100%;
    overflow-x: auto;
    /* 关键属性 - 允许水平滚动 */
    -webkit-overflow-scrolling: touch;
    /* 移动端平滑滚动 */
  }
}

/* ===== 手机端样式 (<768px) ===== */
@media (max-width: 767.98px) {
  .table-x {
    width: 100%;
    overflow-x: auto;
    /* 关键属性 - 允许水平滚动 */
    -webkit-overflow-scrolling: touch;
    /* 移动端平滑滚动 */
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  min-width: 600px;

  /* 确保表格最小宽度 */
}

tr th:first-child {
  font-weight: 700;
}

th,
td {
  border: 1px solid #e1e5eb;
  text-align: left;
  padding: 9px 10px;
  vertical-align: top;
}

th {
  font-weight: 700;
  width: 20%;
}

td {
  padding-left: 30px;
}
.break-word {
  word-break: break-word;
}
.no-wrap {
  white-space: nowrap;
}

/* 滚动提示样式 */
.scroll-hint {
  display: none;
  text-align: center;
  margin-top: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 30px;
  color: #7f8c8d;
  font-size: 0.95rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
  }
}

.hint-icon {
  display: inline-block;
  margin-right: 8px;
  animation: move 1.5s infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(8px);
  }

  100% {
    transform: translateX(0);
  }
}

/* 响应式设计 */
@media (max-width: 991px) {
  /* 平板样式调整 */
  .card-header {
    font-size: 1.4rem;
    padding: 18px 25px;
  }

  .card-body {
    padding: 25px;
  }

  th,
  td {
    padding: 16px 18px;
  }
}

@media (max-width: 767px) {
  /* 手机样式调整 */
  .header {
    padding: 25px 20px;
    margin-bottom: 30px;
  }

  .header h1 {
    font-size: 1.8rem;
  }

  .header p {
    font-size: 1rem;
  }

  .card-header {
    font-size: 1.3rem;
    padding: 16px 20px;
  }

  .card-body {
    padding: 20px;
  }

  .scroll-hint {
    display: block;
  }

  th,
  td {
    padding: 14px 16px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  th,
  td {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
}