/* style.css */

/* 通用样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0; /* 移除默认的 body 外边距 */
  padding: 0; /* 移除默认的 body 内边距 */
  background-color: #f4f7f6; /* 页面背景色 */
}

/* 头部容器样式 */
.header-container {
  background-color: #e0f2f7; /* 头部背景色 */
  padding: 40px 20px; /* 头部内边距 */
  text-align: center; /* <<<=== 确保整个头部容器文本居中 ===>>> */
  border-bottom: 1px solid #cceeff; /* 底部边框 */
  margin-bottom: 20px; /* 头部下方留白 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 头部阴影 */
}

.header-container h1 {
  font-size: 2.2em; /* 标题字体大小 */
  color: #2c3e50; /* 标题颜色 */
  margin-top: 0;
  margin-bottom: 15px;
  /* text-align: center; /* 这一行在父容器设置后可省略，但保留也无妨 */
}

.header-container p {
  max-width: 800px; /* 段落最大宽度 */
  margin: 0 auto 30px auto; /* 段落居中并底部留白 */
  font-size: 1.1em;
  line-height: 1.6;
  color: #555;
  /* text-align: center; /* 这一行在父容器设置后可省略，但保留也无妨 */
}

.header-container a {
  color: #007bff; /* 链接颜色 */
  text-decoration: none; /* 移除下划线 */
}

.header-container a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 搜索区域样式 */
.search-section {
  display: flex; /* Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  gap: 15px; /* 子元素间距 */
  flex-wrap: wrap; /* 允许在小屏幕上换行 */
  margin-top: 20px;
}

.last-updated {
  font-size: 0.9em;
  color: #666;
  white-space: nowrap; /* 防止日期字符串换行 */
}

#modelSearchInput {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 250px; /* 输入框固定宽度 */
  font-size: 1em;
}

#searchButton {
  padding: 10px 20px;
  background-color: #007bff; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标指针样式 */
  font-size: 1em;
  transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

#searchButton:hover {
  background-color: #0056b3; /* 鼠标悬停时背景色 */
}

/* 榜单切换按钮区域样式 */
.leaderboard-tabs {
  display: flex; /* Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  margin-top: 20px;
  margin-bottom: 20px; /* 按钮和表格之间留白 */
  border-bottom: 2px solid #ccc; /* 底部线条 */
}

.leaderboard-tabs button {
  padding: 10px 20px;
  border: none;
  background-color: transparent; /* 默认透明背景 */
  cursor: pointer;
  font-size: 1.1em;
  color: #555;
  transition: all 0.3s ease; /* 所有属性过渡效果 */
  border-radius: 5px 5px 0 0; /* 顶部圆角 */
  margin: 0 5px; /* 按钮间距 */
  position: relative;
  bottom: -2px; /* 让按钮底部稍微盖住下划线 */
}

.leaderboard-tabs button:hover {
  color: #007bff;
  background-color: #f0f0f0;
}

.leaderboard-tabs button.active {
  color: #007bff;
  font-weight: bold;
  border-bottom: 2px solid #007bff; /* 活跃按钮的底部蓝色线条 */
  background-color: #fff; /* 活跃按钮背景色 */
}

/* Leaderboard 表格样式 */
#leaderboard {
  width: 90%; /* 表格宽度 */
  max-width: 1400px; /* <<<=== 调整表格的最大宽度以适应更多列 ===>>> */
  margin: 0 auto 20px auto; /* 表格居中并底部留白 */
  border-collapse: collapse; /* 合并边框 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
  background-color: #fff; /* 背景色 */
  /*
  如果表格布局仍然有问题，可以启用 table-layout: fixed; 并精确分配每列宽度
  table-layout: fixed;
  */
}

#leaderboard thead {
  background-color: #4CAF50; /* 表头背景色 */
  color: white; /* 表头文字颜色 */
}

#leaderboard th:first-child, /* 针对 Model 列的表头 */
#leaderboard td:first-child { /* 针对 Model 列的数据单元格 */
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  width: 18%; /* 保持 Model 列宽度 */
}

/* 对所有分数数字列的表头和数据进行居中 */
/* 表格现在有 10 列：Model (1), Atom (2), Single-Turn (3), ..., Overall (10) */
/* 所以从第 2 列开始（Atom）到第 10 列（Overall）都是数字 */
#leaderboard th:nth-child(n+2), /* 从第二列 Atom 开始 */
#leaderboard td:nth-child(n+2) {
  text-align: center; /* <<<=== **将这里改为 center** ===>>> */
}

/* 封闭源/开源模型的分类标题行样式 */
tbody > tr:first-child td {
  background-color: #ddd;
  font-weight: bold;
  text-align: center; /* 确保这些标题居中 */
  padding: 10px 15px;
  font-size: 1.1em;
  color: #333;
}

/* 斑马纹效果 */
#leaderboard tbody tr:nth-child(odd):not(:first-child) { /* 应用于奇数行，排除第一个分类标题行 */
  background-color: #f2f2f2;
}

/* 鼠标悬停效果 */
#leaderboard tbody tr:hover:not(:first-child) { /* 悬停效果，排除分类标题行 */
  background-color: #e0e0e0;
}