/* ============================================================
 *  漏洞档案 /vulns —— 安全数据库式台账布局（全宽，非卡片）
 *  复用全站设计变量
 * ============================================================ */

/* 独立页：让主区域内部滚动（body 为 overflow:hidden 的 flex 列） */
.page-vulns .vwall {
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.page-vulns .vwall::-webkit-scrollbar { width: 8px; }
.page-vulns .vwall::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.page-vulns .vwall::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* 全宽铺满，仅留边距 */
.vwall__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--space-xl) var(--edge-pad) 140px;
}

/* ── 页头 ── */
.vwall__head {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.vwall__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-ghost);
  margin-bottom: var(--space-sm);
}
.vwall__title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-heading);
  line-height: 1.15;
}
.vwall__sub {
  margin-top: var(--space-sm);
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 720px;
}

/* 统计：横向数字条（非卡片） */
.vwall__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--space-lg);
}
.vstat { display: flex; align-items: baseline; gap: 7px; }
.vstat + .vstat {
  margin-left: var(--space-lg);
  padding-left: var(--space-lg);
  border-left: 1px solid var(--border);
}
.vstat__num {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-heading);
}
.vstat__label { font-size: 12px; letter-spacing: 0.5px; color: var(--text-muted); }
.vstat--accent .vstat__num { color: var(--severity-critical); }

/* ── 工具条 ── */
.vwall__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.vwall__filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.vfilter {
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.vfilter:hover { border-color: var(--border-strong); color: var(--text-heading); }
.vfilter.is-active { background: var(--text-heading); color: var(--bg-surface); border-color: var(--text-heading); }
.vfilter__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.vfilter__dot--critical { background: var(--severity-critical); }
.vfilter__dot--high { background: var(--severity-high); }
.vfilter__dot--medium { background: var(--severity-medium); }
.vfilter__dot--low { background: var(--severity-low); }
.vfilter__dot--info { background: var(--severity-info); }
.vwall__search { flex: 0 0 auto; }
.vwall__search .search-input { width: 280px; max-width: 100%; }

/* ============================================================
 *  台账（ledger）
 * ============================================================ */
.vledger {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden;
}

/* 列网格：列头与数据行共用 */
.vledger__head,
.vrow {
  display: grid;
  grid-template-columns: 104px 70px 168px minmax(240px, 1fr) 120px 104px 132px 40px;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
}

.vledger__head {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 38px;
  background: var(--bg-surface-hover);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vledger__head > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vledger__col--link { text-align: center; }

/* 数据行 */
.vrow {
  min-height: 58px;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background var(--transition), border-left-color var(--transition);
}
.vrow:last-child { border-bottom: none; }
.vrow:hover { background: var(--bg-surface-hover); }
.vrow--critical { border-left-color: var(--severity-critical); }
.vrow--high { border-left-color: var(--severity-high); }
.vrow--medium { border-left-color: var(--severity-medium); }
.vrow--low { border-left-color: var(--severity-low); }
.vrow--info { border-left-color: var(--severity-info); }

/* 严重度 */
.vsev { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.vsev__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.vsev--critical { color: var(--severity-critical); } .vsev--critical .vsev__dot { background: var(--severity-critical); }
.vsev--high { color: var(--severity-high); } .vsev--high .vsev__dot { background: var(--severity-high); }
.vsev--medium { color: var(--severity-medium); } .vsev--medium .vsev__dot { background: var(--severity-medium); }
.vsev--low { color: var(--severity-low); } .vsev--low .vsev__dot { background: var(--severity-low); }
.vsev--info { color: var(--severity-info); } .vsev--info .vsev__dot { background: var(--severity-info); }

/* CVSS */
.vcvss { font-family: var(--font-mono); font-size: 16px; font-weight: 700; line-height: 1; }
.vcvss--critical { color: var(--severity-critical); }
.vcvss--high { color: var(--severity-high); }
.vcvss--medium { color: var(--severity-medium); }
.vcvss--low { color: var(--severity-low); }
.vcvss--info { color: var(--severity-info); }
.vcvss--na { color: var(--text-ghost); font-size: 13px; font-weight: 600; }

/* 编号 */
.vid { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid--empty { color: var(--text-ghost); }

/* 主列：标题 + 目标 + 摘要 */
.vmain { min-width: 0; }
.vmain__title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.35;
}
.vmain__target { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.vmain__target .sep { color: var(--text-ghost); margin: 0 5px; }
.vmain__summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 类型 */
.vtype { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-heading); background: var(--bg-code); padding: 2px 7px; border-radius: var(--radius); white-space: nowrap; }

/* 状态 + 标记 */
.vcell--status { display: flex; flex-wrap: wrap; gap: 4px; }
.vstatus { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius); border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-body); white-space: nowrap; }
.vstatus--0day { color: var(--severity-critical); background: var(--severity-critical-bg); border-color: transparent; }
.vstatus--original { color: var(--severity-low); background: var(--severity-low-bg); border-color: transparent; }
.vstatus--sample { color: var(--text-muted); background: repeating-linear-gradient(45deg, var(--bg-body), var(--bg-body) 5px, var(--bg-surface-hover) 5px, var(--bg-surface-hover) 10px); }

/* 来源 + 日期：桌面端纵向堆叠，避免挤在一行 */
.vmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.vmeta__platform { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmeta__date { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* 外链 */
.vcell--link { text-align: center; }
.vlink { display: inline-flex; color: var(--text-muted); transition: color var(--transition); }
.vlink:hover { color: var(--link-hover); }
.vlink svg { width: 15px; height: 15px; }

/* 筛选 chip 计数 */
.vfilter__count { color: var(--text-ghost); }
.vfilter.is-active .vfilter__count { color: inherit; opacity: 0.7; }

/* ── 空态 / 加载 ── */
.vwall__empty, .vwall__loading {
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  padding: var(--space-2xl) 0;
}

/* ============================================================
 *  翻页器
 * ============================================================ */
.vpager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.vpager__info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.vpager__ctrls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vpager__btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.vpager__num { font-family: var(--font-mono); }
.vpager__btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--border-strong);
  color: var(--text-heading);
}
.vpager__btn.is-active {
  background: var(--text-heading);
  color: var(--bg-surface);
  border-color: var(--text-heading);
  cursor: default;
}
.vpager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vpager__gap {
  min-width: 22px;
  text-align: center;
  color: var(--text-ghost);
  font-family: var(--font-mono);
  font-size: 13px;
  user-select: none;
}

/* ============================================================
 *  响应式：窄屏下台账行改为堆叠块
 * ============================================================ */
@media (max-width: 880px) {
  .vledger { border-left: none; border-right: none; border-radius: 0; }
  .vledger__head { display: none; }

  .vrow {
    display: block;
    padding: var(--space-md) var(--space-md);
    border-left-width: 4px;
  }
  .vrow > .vcell { margin: 0; }

  /* 主信息优先 */
  .vcell--main { margin-bottom: var(--space-sm) !important; }
  .vmain__summary { -webkit-line-clamp: 2; line-clamp: 2; }

  /* 其余字段排成一行 badge 流 */
  .vrow {
    position: relative;
  }
  .vcell--sev, .vcell--cvss, .vcell--id, .vcell--type,
  .vcell--status, .vcell--meta {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-md) !important;
    margin-top: 4px;
  }
  .vcvss { font-size: 14px; }
  .vcvss::before { content: 'CVSS '; font-size: 10px; color: var(--text-ghost); font-weight: 600; }
  .vcvss--na::before { content: ''; }
  .vmeta { display: inline-flex; flex-direction: row; gap: 6px; align-items: baseline; }
  .vmeta__date::before { content: '·'; color: var(--text-ghost); margin-right: 6px; }
  .vcell--link {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    margin: 0 !important;
  }
}

@media (max-width: 520px) {
  .vwall__title { font-size: 25px; }
  .vstat + .vstat { margin-left: var(--space-md); padding-left: var(--space-md); }
  .vstat__num { font-size: 20px; }
  .vwall__search { width: 100%; }
  .vwall__search .search-input { width: 100%; }
  .vpager { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .vpager__ctrls { justify-content: center; }
}