/* 列表页样式 - 仅列表页使用 */

/* PC端默认：表格显示，卡片隐藏 */
.table-scroll{display:block}
.mobile-list{display:none}

/* 顶部导航 */
.header-nav{
  background:#2c3e50;
  height:50px;
  line-height:50px;
  flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.nav-container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0 15px;
  position:relative;
}
.nav-logo{
  color:#fff;
  font-size:18px;
  font-weight:bold;
  white-space:nowrap;
  flex-shrink:0;
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-logo img{
  height:36px;
  width:auto;
}
.nav-links{
  display:flex;
  gap:3px;
  margin:0 auto;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-link{
  color:#ecf0f1;
  text-decoration:none;
  padding:0 12px;
  height:50px;
  display:flex;
  align-items:center;
  transition:all 0.3s;
  font-size:13px;
  white-space:nowrap;
}
.nav-link:hover,.nav-link.active{
  background:#34495e;
  color:#fff;
}
/* PC端隐藏导航切换按钮 */
.nav-toggle{display:none}

/* 导航返回按钮 */
.nav-back-btn{
  color:#fff;
  text-decoration:none;
  padding:6px 16px;
  background:#67c23a;
  border-radius:4px;
  font-size:13px;
  white-space:nowrap;
  transition:all 0.3s;
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
}
.nav-back-btn:hover{
  background:#85ce61;
  color:#fff;
}

/* 搜索栏 */
.search-bar{
  background:#fff;
  padding:8px 12px;
  border-bottom:1px solid #eee;
  flex-shrink:0;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.search-bar select{
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:4px;
  font-size:13px;
  min-width:120px;
  background:#fff;
}
.search-bar input{
  padding:6px 12px;
  border:1px solid #ddd;
  border-radius:4px;
  font-size:13px;
  flex:1;
  min-width:150px;
  max-width:300px;
}
.search-bar button{
  padding:6px 20px;
  background:#409eff;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
}
.search-bar button:hover{background:#66b1ff;}
.search-bar button.btn-search{background:#409eff;}
.search-bar button.btn-search:hover{background:#66b1ff;}
.search-bar button.btn-reset{background:#f56c6c;}
.search-bar button.btn-reset:hover{background:#f78989;}

/* 主内容区 */
.main-container{
  flex:1;
  display:flex;
  padding:10px;
  overflow:hidden;
  min-height:0;
}

/* 列表页特定样式 */
.board-module{
  flex:1;
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.module-title{
  padding:6px;
  background:#409eff;
  color:#fff;
  font-weight:bold;
  text-align:center;
  font-size:13px;
  flex-shrink:0;
}

/* 表格滚动容器 */
.table-scroll {
  flex:1;
  overflow:auto;
  min-height:0;
}
.param-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  table-layout:fixed;
}
.param-table th{
  background:#e6f7ff;
  color:#1890ff;
  padding:5px 3px;
  border:1px solid #ddd;
  position:sticky;
  top:0;
  z-index:1;
  white-space:nowrap;
  font-weight:600;
  font-size:12px;
  line-height:1.2;
}
/* 表头图片列不需要固定高度，避免把表头行撑高 */
.param-table th.img-col{height:auto !important;padding:5px 3px !important;}
.param-table td{
  padding:2px 3px;
  border:1px solid #ddd;
  text-align:center;
}
.param-table tr:nth-child(even){background:#fafafa}
.param-table tr:hover{background:#f0f0f0}

/* 列宽 */
.model-col{width:180px;text-align:center;padding-left:6px;cursor:pointer;white-space:normal;line-height:1.2}
.model-col:hover{background:#f0f8ff;}
.spec-col{width:130px;white-space:normal;line-height:1.2}
.alias-col{width:60px;white-space:normal}
.minQty-col{width:45px}
.price-col{width:65px}
.action-col{width:60px}

/* 详情按钮 */
.btn-detail{
  padding:2px 8px;
  background:#409eff;
  color:#fff;
  border:none;
  border-radius:3px;
  cursor:pointer;
  font-size:11px;
  text-decoration:none;
  display:inline-block;
}
.btn-detail:hover{background:#66b1ff;}

/* 复制按钮 */
.btn-copy{
  padding:2px 6px;
  background:#67c23a;
  color:#fff;
  border:none;
  border-radius:3px;
  cursor:pointer;
  font-size:11px;
  text-decoration:none;
  display:inline-block;
  margin-right:3px;
}
.btn-copy:hover{background:#85ce61;}

.chip-row td{background:#e1f7ed;color:#13a865;font-weight:bold}

/* 字体颜色 */
.font-red{color:#f00 !important;}
.font-orange{color:#e67e22;}
.font-blue{color:#3498db;}
.font-purple{color:#9b59b6;}
.font-green{color:#27ae60;}

/* 滚动条 */
.table-scroll::-webkit-scrollbar {width:6px;height:6px}
.table-scroll::-webkit-scrollbar-thumb {background:#ccc;border-radius:3px}
.table-scroll::-webkit-scrollbar-track {background:#f5f5f5}

/* 手机端列表页适配 */
@media (max-width: 768px) {
  html,body{min-height:100vh;height:auto !important;overflow:auto !important}
  body{flex-direction:column !important;min-height:100vh !important;display:flex !important}
  
  /* 手机端导航 - 折叠菜单 */
  .header-nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:50px !important;
    padding:0 !important;
    box-sizing:border-box !important;
    z-index:9999 !important;
    background:#2c3e50 !important;
  }
  .nav-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:0 10px !important;
    height:100% !important;
  }
  .nav-logo{
    font-size:14px !important;
    color:#fff !important;
    font-weight:bold !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    white-space:nowrap !important;
    flex-shrink:0 !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
  }
  .nav-logo img{
    height:28px !important;
    width:auto !important;
  }
  .nav-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:36px !important;
    height:36px !important;
    background:#409eff !important;
    border-radius:6px !important;
    cursor:pointer !important;
    color:#fff !important;
    font-size:18px !important;
    flex-shrink:0 !important;
  }
  /* 手机端隐藏切换按钮（详情页会用到） */
  .nav-toggle{
    display:flex !important;
  }
  /* 隐藏导航栏内的返回按钮 */
  .nav-back-btn{
    display:none !important;
  }
  /* 手机端固定返回按钮（仅详情页显示） */
  .detail-body .nav-back-btn{
    display:flex !important;
    position:fixed !important;
    right:10px !important;
    top:8px !important;
    transform:none !important;
    z-index:10001 !important;
    padding:6px 12px !important;
    font-size:12px !important;
    background:#67c23a !important;
    color:#fff !important;
    border-radius:4px !important;
    text-decoration:none !important;
    align-items:center !important;
  }
  .nav-links{
    display:none !important;
    position:fixed !important;
    top:50px !important;
    left:0 !important;
    right:0 !important;
    background:#2c3e50 !important;
    padding:10px !important;
    box-shadow:0 4px 10px rgba(0,0,0,0.3) !important;
    z-index:9998 !important;
    max-height:60vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{display:block !important}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-link{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:6px 12px !important;
    margin:2px 0 !important;
    color:#fff !important;
    text-decoration:none !important;
    background:#34495e !important;
    border-radius:4px !important;
    font-size:14px !important;
    height:auto !important;
    line-height:1.2 !important;
  }
  .nav-link.active{background:#5c9bd5 !important}
  
  .search-bar{
    position:fixed !important;
    top:50px !important;
    left:0 !important;
    right:0 !important;
    flex-shrink:0 !important;
    padding:10px !important;
    gap:8px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    background:#fff !important;
    border-bottom:1px solid #eee !important;
    z-index:9997 !important;
    box-sizing:border-box !important;
  }
  .search-bar select,.search-bar input{
    flex:1 !important;
    min-width:calc(50% - 4px) !important;
    max-width:none !important;
    font-size:12px !important;
    padding:8px !important;
    border:1px solid #ddd !important;
    border-radius:4px !important;
    background:#fff !important;
  }
  .search-bar button{
    padding:8px 15px !important;
    font-size:12px !important;
    background:#409eff !important;
    color:#fff !important;
    border:none !important;
    border-radius:4px !important;
  }
  .update-time{width:100% !important;text-align:center !important;margin-top:5px !important;font-size:12px !important;color:#e6a23c !important}
  
  .main-container{flex:1;padding:10px;padding-top:120px !important;overflow:visible;display:block}
  
  /* 列表页特定手机样式 */
  .board-module{display:none !important}
  .module-title{padding:10px;font-size:13px}
  
  /* 手机端：表格隐藏，卡片显示 */
  .table-scroll{display:none !important}
  .mobile-list{display:block !important;visibility:visible !important;padding:10px;padding-top:120px !important;overflow-y:auto;-webkit-overflow-scrolling:touch}
  
  /* 卡片 */
  .mobile-card{
    background:#fff;
    border-radius:8px;
    margin-bottom:10px;
    box-shadow:0 1px 4px rgba(0,0,0,0.1);
    overflow:hidden;
  }
  .mobile-card-header{
    display:flex;
    align-items:center;
    padding:12px 15px;
    cursor:pointer;
  }
  .mobile-card-header:active{background:#f8f8f8}
  .mobile-card-info{flex:1;min-width:0}
  .mobile-card-title{
    font-size:14px;font-weight:bold;color:#333;margin-bottom:4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .mobile-card-brief{font-size:12px;color:#888}
  .mobile-card-price{font-size:18px;font-weight:bold;color:#f56c6c;margin-left:15px;white-space:nowrap}
  .mobile-card-toggle{
    width:24px;height:24px;margin-left:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;color:#999;transition:transform 0.3s
  }
  .mobile-card-toggle.open{transform:rotate(180deg)}
  
  /* 卡片展开内容 */
  .mobile-card-detail{
    max-height:0;overflow:hidden;
    transition:max-height 0.3s ease-out;
    background:#fafafa;
  }
  .mobile-card-detail.open{max-height:800px}
  .mobile-card-inner{padding:15px}
  .mobile-row{
    display:flex;justify-content:space-between;
    padding:8px 0;border-bottom:1px solid #eee;font-size:13px
  }
  .mobile-row:last-child{border-bottom:none}
  .mobile-row-label{color:#888}
  .mobile-row-value{color:#333;font-weight:500}
  .mobile-row-value.blue{color:#409eff}
  .mobile-row-value.purple{color:#9b59b6}
  .mobile-row-value.green{color:#67c23a}
  .mobile-card-actions{
    display:flex;gap:10px;padding-top:12px;border-top:1px solid #eee;margin-top:10px
  }
  .mobile-card-actions a{
    flex:1;text-align:center;padding:10px;border-radius:6px;font-size:13px;text-decoration:none
  }
  .mobile-btn-detail{background:#409eff;color:#fff}
  .mobile-btn-copy{background:#67c23a;color:#fff}
  
  /* 手机端卡片列表滚动 */
  .mobile-list .mobile-card{flex-shrink:0}
}