/* Naxel Product Table - 产品参数展开表格样式 */

/* === 外层容器 === */
.npt-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

/* === 行布局（表头行 & 数据行）=== */
.npt-header-row,
.npt-data-row {
  display: flex;
  align-items: stretch;
  min-height: 88px;
}

/* 表头背景 */
.npt-header-row {
  background: #EEEEF0;
}

/* 数据行顶部分割线 + 登场动效初始状态 */
.npt-data-row {
  border-top: 1px solid #ebebeb;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.npt-data-row.npt-animate {
  opacity: 1;
  transform: translateY(0);
}

/* === Grade 列（固定左侧，不参与横向滚动）=== */
.npt-col-grade {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px 0 36px;
  font-size: 14px;
  color: #333;
}

.npt-header-row .npt-col-grade {
  font-weight: 500;
  color: #555;
}

/* === 中间数据列区域 === */
.npt-cols-data {
  flex: 1;
  display: flex;
  min-width: 0;
}

/* 每个数据列 */
.npt-col-data {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  color: #333;
}

.npt-header-row .npt-col-data {
  font-weight: 500;
  color: #555;
}

/* === 按钮列（固定右侧，不参与横向滚动）=== */
.npt-col-action {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 36px;
}

/* === 展开/收起按钮 === */
.npt-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #0E55AC;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.npt-toggle-btn:hover {
  opacity: 0.7;
}

/* === 展开行 === */
.npt-expand-row.is-open {
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

/* 动画容器：默认折叠 */
.npt-expand-inner {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}

.npt-expand-row.is-open .npt-expand-inner {
  max-height: 600px;
}

/* 展开内容区域 - Grid 镜像表格列：190px | 1fr×5 | 72px */
.npt-expand-content {
  display: grid;
  grid-template-columns: 190px repeat(5, 1fr) 72px;
  padding: 24px 0 32px;
  align-items: start;
}

/* Description：跨 Grade列(1) + Br列(2) + Hcb列(3)，从左边开始 */
.npt-desc {
  grid-column: 1 / 4;
  padding: 0 40px 0 36px;
}

/* Application：从 Hcj列(4) 开始，对齐 Hcj + (BH)max + TW */
.npt-app  {
  grid-column: 4 / 7;
  padding-left: 16px; /* 与数据列左 padding 一致，视觉对齐 Hcj 文字 */
}

/* 操作列：Action 列(7) */
.npt-expand-right {
  grid-column: 7;
  padding: 4px 36px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

/* 展开内容标题 */
.npt-desc h4,
.npt-app h4 {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

/* 展开内容正文 */
.npt-desc p {
  color: #666;
  font-size: 14px;
  line-height: 160%;
  margin: 0;
}

/* 应用列表 */
.npt-app ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.npt-app ul li {
  color: #666;
  font-size: 14px;
  line-height: 160%;
}

.npt-app ul li::before {
  content: "· ";
  color: #666;
}

/* View Specifications 按钮 */
.npt-btn-spec {
  display: inline-block;
  background: #0E55AC;
  color: #fff;
  padding: 8px 16px;
  border-radius: 0;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.2s;
}

.npt-btn-spec:hover {
  background: #142f80;
  color: #fff;
}

/* ===== 移动端响应式 ===== */
@media (max-width: 767px) {
  .npt-wrap {
    border-radius: 8px;
  }

  /* 表头行高 */
  .npt-header-row {
    min-height: 60px;
    position: relative;
  }

  /* 数据行高 + 移动端动效偏移量收小 */
  .npt-data-row {
    min-height: 44px;
    position: relative;
    transform: translateY(48px);
  }

  /* 右侧渐变遮罩：提示还有更多内容可滑动 */
  .npt-header-row::after,
  .npt-data-row::after {
    content: '';
    position: absolute;
    right: 48px; /* 与按钮列宽度对齐 */
    top: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  .npt-header-row::after {
    background: linear-gradient(to right, transparent, #EEEEF0);
  }

  .npt-data-row::after {
    background: linear-gradient(to right, transparent, #fff);
  }

  /* Grade 列收窄 */
  .npt-col-grade {
    width: 120px;
    flex-shrink: 0;
    padding: 0 8px 0 16px;
    font-size: 13px;
  }

  /* 表头列字号覆盖 */
  .npt-header-row .npt-col-grade,
  .npt-header-row .npt-col-data {
    font-size: 12px;
  }

  /* 中间列区域：每行独立横向滚动 */
  .npt-cols-data {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
  }

  .npt-cols-data::-webkit-scrollbar {
    display: none;
  }

  /* 每列固定最小宽度，不随容器压缩 */
  .npt-col-data {
    min-width: 140px;
    flex-shrink: 0;
    font-size: 12px;
    padding: 0 10px;
  }

  /* 按钮列收窄 */
  .npt-col-action {
    width: 48px;
    flex-shrink: 0;
    padding-right: 16px;
  }

  /* 展开行：sticky 固定左侧，宽度限制在可见区域内 */
  .npt-expand-row {
    position: sticky;
    left: 0;
    max-width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* 展开内容竖排，覆盖 Grid */
  .npt-expand-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px 24px;
  }

  .npt-desc,
  .npt-app {
    padding: 0;
  }

  .npt-expand-right {
    padding: 0;
    justify-content: flex-start;
  }

  /* 按钮宽度撑满 */
  .npt-btn-spec {
    display: block;
    text-align: center;
    white-space: normal;
  }
}