/* ==================================================================
   pages/links.css — 网址导航（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖：static/base.css 的 token 与组件（.link-card 卡片家族、.btn/.btn-primary/
        .btn-outline/.btn-sm、.chip 家族、.toast、.g-empty/.g-error/.btn-retry 语义位、
        .g-skeleton/.g-skeleton-card、.page-container/.page-title/.page-subtitle、
        .text-mute/.text-xs、.g-rise、:focus-visible）
   纪律（对应《前端优化方案_20260925.md》§3/§9）：
     1. 本文件不出现字面色值（注释里也不留颜色写法），
        统一走 var(--g-*) token（含分类色点的 --g-c* 调色板）；
     2. 不出现 important 声明（页面层 = 0，见 G6）；
     3. 字号一律走 --g-fs-*（最小 12.5px，见 G4 / 4-27）；
     4. 不取消焦点轮廓（键盘焦点环由 base 的 :focus-visible 统一提供）；
     5. 不改 HTML 既有 class 名与任何 id（页内 JS 依赖，见 §9 坑 #3）。
   ================================================================== */

/* ---------- 1. 页头 ---------- */
.page-head { margin-bottom: var(--g-sp-4); }
.page-subtitle { max-width: 62ch; }

/* ---------- 2. 分类标签 ----------
   4-15：原 span+onclick 不可 Tab 聚焦 → 表单元素 button，
   键盘 Enter/Space 原生触发 click；4-9：选中态不再写死旧蓝，
   走主色片（--g-primary-soft / --g-primary）；4-27：字号 = --g-fs-xs（12.5px） */
.cat-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--g-sp-4);
}
.cat-tag {
  min-height: 32px; padding: 5px 16px;
  border: 1px solid var(--g-line); background: var(--g-surface); color: var(--g-mute);
  font-size: var(--g-fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease),
    border-color var(--g-dur) var(--g-ease);
}
.cat-tag:hover { border-color: var(--g-primary); color: var(--g-primary); background: var(--g-primary-soft); }
.cat-tag.active {
  background: linear-gradient(135deg, var(--g-primary-soft), var(--g-primary-soft-2));
  border-color: var(--g-primary); color: var(--g-primary);
}

/* ---------- 3. 搜索行 ---------- */
.search-row { display: flex; gap: var(--g-sp-2); margin-bottom: var(--g-sp-3); }
.search-row .search-input { flex: 1 1 auto; min-width: 0; }
.search-row .btn { flex: 0 0 auto; }

/* ---------- 4. 新增链接入口（管理员） ---------- */
.add-link-bar { display: none; margin-bottom: var(--g-sp-3); }
.add-link-bar.visible { display: flex; }

/* ---------- 5. 链接列表 ----------
   .link-card 的白底/细边/圆角/阴影来自 base 卡片家族，这里只补本页几何 */
.links-list { display: flex; flex-direction: column; gap: 10px; }
.link-card {
  display: flex; align-items: center; gap: var(--g-sp-4);
  padding: 14px var(--g-sp-5) 14px var(--g-sp-4);
  transition: transform var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease),
    border-color var(--g-dur) var(--g-ease);
}
.link-card:hover { transform: translateY(-2px); box-shadow: var(--g-sh-md); border-color: var(--g-primary); }

/* 分类色点：类别色走 base 的图表调色板，页面层不写字面色值 */
.link-cat-dot { width: 10px; height: 10px; border-radius: var(--g-r-pill); flex: 0 0 auto; background: var(--g-mute); }
.link-cat-dot.cat-literature { background: var(--g-c3); }
.link-cat-dot.cat-data_download { background: var(--g-c4); }
.link-cat-dot.cat-map_view { background: var(--g-c5); }
.link-cat-dot.cat-online_course { background: var(--g-c6); }
.link-cat-dot.cat-research_tool { background: var(--g-c1); }
.link-cat-dot.cat-geography_popular { background: var(--g-knowledge-2); }

.link-info { flex: 1 1 auto; min-width: 0; }
.link-title { font-size: var(--g-fs-base); font-weight: 700; color: var(--g-ink); overflow-wrap: anywhere; }
.link-desc {
  margin-top: 2px; font-size: var(--g-fs-xs); color: var(--g-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
/* 4-16：点击计数原先用浅灰（2.56:1）→ --g-mute（4.76:1）；4-27：字号进字阶 */
.link-clicks { font-size: var(--g-fs-xs); color: var(--g-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 管理按钮：默认收起，走 base 的 .btn .btn-sm + .btn-outline/.btn-danger */
.link-actions { display: none; gap: 6px; align-items: center; flex-wrap: wrap; }
.link-card.editable.admin-open .link-actions { display: inline-flex; }
.more-btn { display: none; }
.link-card.editable .more-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; min-width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--g-line); border-radius: var(--g-r-sm);
  background: var(--g-surface); color: var(--g-mute);
  font-size: var(--g-fs-base); line-height: 1; cursor: pointer;
}
.more-btn:hover { background: var(--g-surface-3); color: var(--g-primary); }

/* ---------- 6. 加载更多 ---------- */
.load-more { display: flex; justify-content: center; padding: var(--g-sp-4) 0; }

/* ---------- 7. 状态位 ----------
   4-21：首屏骨架 → 失败错误位（.g-empty.g-error + 重试按钮）→ 空态，
   三态共用 #empty-state 一个容器（toggle 顺序不会互相打架） */
#empty-state { min-height: 160px; }
#empty-state .g-empty-icon { font-size: 1.75rem; line-height: 1; opacity: 0.9; }
#empty-state .g-empty-title { font-size: var(--g-fs-base); font-weight: 600; color: var(--g-ink-2); }
#empty-state .g-empty-desc { font-size: var(--g-fs-sm); color: var(--g-mute); max-width: 46ch; }
#empty-state .btn-retry { margin-top: var(--g-sp-1); }

.links-skeleton { display: flex; flex-direction: column; gap: 10px; }
/* 骨架卡的 g-shimmer 由 base 提供，这里只定高度与错峰 */
.links-skeleton .g-skeleton-card { height: 78px; animation-delay: calc(var(--i, 0) * 0.12s); }

/* 重试按钮（本页私有，形态与 pages/stats.css 的 .btn-retry 一致；触控 ≥32px） */
.btn-retry {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px;
  border: 1px solid var(--g-line); border-radius: var(--g-r-sm);
  background: var(--g-surface); color: var(--g-primary);
  font-size: var(--g-fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease),
    color var(--g-dur) var(--g-ease);
}
.btn-retry:hover { background: var(--g-primary-soft); border-color: var(--g-primary); }

/* ---------- 8. 弹窗内部结构（外壳 .modal-overlay/.modal-box 走 base） ---------- */
#edit-modal .modal-box { max-width: 480px; }
#edit-modal .modal-box h3 { margin-bottom: var(--g-sp-4); font-size: var(--g-fs-md); font-weight: 700; }
.form-actions { display: flex; gap: var(--g-sp-2); justify-content: flex-end; margin-top: var(--g-sp-4); }
.form-required { color: var(--g-danger); }

/* ---------- 9. 响应式（断点与 base.css 的导航断点 860px 对齐） ---------- */
@media (max-width: 860px) {
  /* 分类标签横滚，避免在窄屏撑成三四行 */
  .cat-bar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .cat-bar::-webkit-scrollbar { display: none; }
  .cat-tag { flex: 0 0 auto; }

  /* 链接卡：信息占满整行，meta 落到第二行（修窄屏 nowrap 挤压） */
  .link-card { flex-wrap: wrap; gap: var(--g-sp-2) var(--g-sp-3); padding: var(--g-sp-3) var(--g-sp-4); }
  .link-info { flex: 1 1 100%; }
  .link-meta { flex: 1 1 100%; justify-content: flex-start; }
  .link-card.editable .link-actions { margin-left: 0; }

  /* 触屏没有 hover：管理员工具直接展开，省掉一次“···”点击（4-14） */
  .link-card.editable .more-btn { display: none; }
  .link-card.editable .link-actions { display: inline-flex; }
}

@media (max-width: 560px) {
  .search-row { flex-wrap: wrap; }
  .search-row .search-input { flex: 1 1 100%; }
  .search-row .btn { flex: 1 1 100%; }
  .add-link-bar .btn { width: 100%; }
}

/* ---------- 10. 打印 ---------- */
@media print {
  .cat-bar, .search-row, .add-link-bar, .load-more, .link-actions, .more-btn { display: none; }
}