/* ============================================================
   行业报告模块（进出口贸易报告）页面级样式
   仅在 reports/index.html 与 reports/detail.html 中加载，
   类名统一使用 rep- 前缀，状态类（cur/up/down/top/mid/low）
   仅在本模块内使用，避免与全局 v4.css 冲突。
   ============================================================ */

/* ---------- 报告首页：省份排名入口网格 ---------- */
/* 覆盖 .g3 默认三列，改为四列 */
.g3.rep-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 6px;
}
/* 覆盖 .entry 默认内边距 */
.entry.rep-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 11px 13px;
}
.rep-entry-name {
  flex: 0 0 auto; /* 省份名完整展示，不压缩不换行 */
  white-space: nowrap;
  font-size: 14px;
}
.rep-entry-sub {
  flex: 0 1 auto;
  min-width: 0;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 详情页：往期报告期次卡片 ---------- */
.rep-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
/* 覆盖 .card 默认内边距；宽度弹性均分（5 期时约各占 1/5），不固定宽度 */
.card.rep-term {
  padding: 13px 18px;
  flex: 1 1 0;
  min-width: 0;
}
/* 当前期次高亮 */
.rep-term.cur {
  border-color: #2AA8A1;
  box-shadow: 0 0 0 2px rgba(42, 168, 161, .13);
}
.rep-term-curhead {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rep-term-name-cur {
  font-size: 14px;
  color: var(--brand-deep);
}
.rep-badge-cur {
  font-size: 10px;
  color: #fff;
  background: #2AA8A1;
  padding: 1.5px 8px;
  border-radius: 20px;
}
.rep-term-name {
  font-size: 14px;
  color: var(--ink2);
  font-weight: 600;
}
.rep-term-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
}

/* 页面底部灰色小字备注（期次说明 / 数据来源说明共用） */
.rep-note {
  margin-top: 13px;
  font-size: 11.5px;
  color: var(--muted);
}

/* ---------- 详情页：报告摘要 ---------- */
.rep-summary {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-top: 14px;
}
.rep-summary-bar {
  flex: 0 0 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #5FD6CE, #2AA8A1);
}
.rep-summary-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 2;
  color: var(--ink2);
}

/* ---------- 详情页：核心指标卡 ---------- */
.rep-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}
/* 覆盖 .card 默认内边距 */
.card.rep-metric {
  padding: 18px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
/* 空字段不渲染后，最后一个可见区块拉伸填满并居中（金额/增长率/占比排名自动补位） */
.rep-metric-fig {
  display: flex;
  flex-direction: column;
}
.rep-metric-fig:last-child,
.rep-metric-delta:last-child,
.rep-metric-foot:last-child {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rep-metric-label {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .04em;
}
.rep-metric-value {
  font-size: 25px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.35;
  margin-top: 8px;
  letter-spacing: -.01em;
}
.rep-metric-unit {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.rep-metric-delta {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
}
/* 金额与补充信息之间的虚线：增长率或占比/排名任一存在即显示 */
.rep-metric-foot {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.rep-metric-fig + .rep-metric-foot {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
}
/* 虚线已由上方 delta 区块提供时，foot 不再重复 */
.rep-metric-delta + .rep-metric-foot {
  border-top: none;
  padding-top: 0;
}

/* 涨跌色共用类：红涨绿跌（指标卡与排名格子共用，字号按上下文区分） */
.rep-trend {
  font-weight: 700;
}
.rep-trend.up {
  color: #C0392B;
}
.rep-trend.down {
  color: #1E8E5A;
}
/* 增长率恰为 0：无箭头、灰色 */
.rep-trend.flat {
  color: var(--muted);
}
.rep-metric-delta .rep-trend {
  font-size: 12px;
}
.rep-rank-fig .rep-trend {
  font-size: 10px;
}

/* ---------- 详情页：报告目录树 ---------- */
.rep-toc {
  margin-top: 14px;
  max-height: 430px;
  overflow: auto;
  font-size: 12.5px;
  line-height: 2;
  padding-right: 10px;
}
.rep-toc-l0 {
  padding-left: 0px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-top: 9px;
}
.rep-toc-l1 {
  padding-left: 18px;
  color: var(--ink);
  font-weight: 600;
}
.rep-toc-l2 {
  padding-left: 36px;
  color: var(--ink2);
}
.rep-toc-l3 {
  padding-left: 54px;
  color: var(--muted);
}

/* ---------- 详情页：其他省份排名格子 ---------- */
.rep-rank-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 14px;
}
.rep-rank-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
/* 当前省份高亮 */
.rep-rank-cell.cur {
  border-color: #2AA8A1;
  box-shadow: 0 0 0 2px rgba(42, 168, 161, .13);
}
/* 排名徽章：top 前 3 / mid 4-10 / low 其余 */
.rep-rank-badge {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rep-rank-badge.top {
  background: linear-gradient(135deg, #2AA8A1, #3FC9C1);
  color: #fff;
}
.rep-rank-badge.mid {
  background: #D6F1EE;
  color: var(--brand-deep);
}
.rep-rank-badge.low {
  background: var(--page);
  color: var(--muted);
}
.rep-rank-name {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-rank-fig {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: none;
}
.rep-rank-value {
  font-size: 11.5px;
  color: var(--brand-deep);
  font-weight: 700;
}

/* ---------- 响应式：固定列数网格在窄屏降列 ---------- */
@media (max-width:1100px){
  .g3.rep-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:900px){
  /* 省份入口网格：一行一个，撑满整行 */
  .g3.rep-grid { grid-template-columns: 1fr; }
  /* 报告摘要 4 指标卡：一行一个 */
  .rep-metrics { grid-template-columns: 1fr; }
  /* 其他省份排名格子：一行一个 */
  .rep-rank-grid { grid-template-columns: 1fr; }
  /* 往期报告卡片：一行一个，撑满整行（需覆盖 flex-basis，width 在 flex 容器内不生效） */
  .card.rep-term { flex: 0 0 100%; min-width: 0; }
}