/* ==================================================================
   pages/feedback.css — 反馈页（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖（全部来自 static/base.css，本文件不重复定义）：
     .fb-card 卡片家族（白底/细边/圆角/阴影由公共层给）
     .btn/.btn-primary/.btn-outline/.btn-sm · 表单（input/select/textarea 含焦点环）
     .toast（含 .toast.error）· .g-empty/.g-error/.g-skeleton · .modal-overlay/.modal-box
     .page-container/.page-title/.page-subtitle · .text-mute/.text-xs · .g-rise · :focus-visible
   纪律（《前端优化方案_20260925.md》§3/§9）：
     1. 无字面色值（无十六进制、无颜色函数），一律 var(--g-*)；
     2. 无强制权重覆盖声明（页面层不得出现 important 关键字）；
     3. 字号一律走 --g-fs-*（最小正文 12.5px，修 4-27 的 11.2/11.68px）；
     4. 不写 outline（焦点环交给 base 的 :focus-visible / 表单 focus ring）；
     5. 不改 HTML 既有 class 名，不动任何 id（页内 JS 依赖，删 id 会空指针）。
   ================================================================== */

/* 页脚沉底：.footer 的 margin-top:auto 依赖 body 为纵向 flex */
body[data-page="feedback"] { display: flex; flex-direction: column; }

/* 版心收紧到 1000px（原内联值），窄屏不许横向溢出 */
.page-container { max-width: 1000px; overflow-x: clip; }

/* ---------- 1. 双栏骨架：左 340px 提交区 / 右自适应处理区 ---------- */
.layout {
  display: flex; align-items: flex-start;
  gap: var(--g-sp-5);
}
.form-col { flex: 0 0 340px; width: 340px; min-width: 0; }
.list-col { flex: 1 1 auto; min-width: 0; }

/* ---------- 2. 提交卡：滚动时吸顶（窄屏取消），外壳走 .fb-card ---------- */
.form-card {
  position: sticky; top: calc(var(--g-nav-h) + var(--g-sp-3));
  padding: var(--g-sp-5);
}
.form-card h3 {
  margin-bottom: var(--g-sp-3);
  font-size: var(--g-fs-md); font-weight: 700; color: var(--g-ink);
}
/* 标签与控件的竖排关系在这里定；文字规格走 base 的 .form-label 语义（同字号/字重/色） */
.form-row { display: flex; flex-direction: column; gap: var(--g-sp-1); }
.form-row label { font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-ink-2); }
.form-row textarea { min-height: 88px; }
/* 行内校验提示：aria-live 容器，视觉走语义色 token（修 4-17 的状态反馈口径） */
.form-msg { display: none; margin-top: var(--g-sp-2); font-size: var(--g-fs-sm); color: var(--g-danger); }
.form-msg.on { display: block; }

/* 4-9 旧蓝：原 .btn-submit{background:#2563eb} 不在旧主题覆盖列表里；
   现在直接对齐全站主按钮（--g-grad + 主色光晕），禁用态沿用 base 的 .btn:disabled */
.btn-submit {
  width: 100%; min-height: 40px; margin-top: var(--g-sp-1);
  padding: 0 var(--g-sp-4);
  border: 1px solid transparent; border-radius: var(--g-r-sm);
  background: var(--g-grad); color: var(--g-on-primary);
  font-size: var(--g-fs-base); font-weight: 600; cursor: pointer;
  box-shadow: var(--g-sh-primary);
  transition: background var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease),
    transform var(--g-dur) var(--g-ease);
}
/* 悬停态不写字面色值：抬高 1px 并换用主色光晕 token */
.btn-submit:hover:not(:disabled) { background: var(--g-grad-hover); transform: translateY(-1px); }
.btn-submit:disabled { background: var(--g-mute-2); color: var(--g-on-primary); box-shadow: none; cursor: not-allowed; }

/* ---------- 3. 筛选栏：窄屏横向滚动，行高不塌 ---------- */
.filter-bar {
  display: flex; align-items: center; gap: var(--g-sp-2);
  margin-bottom: var(--g-sp-3);
}
.filter-bar select {
  flex: 1 1 0; min-width: 0; width: auto;
  font-size: var(--g-fs-sm); color: var(--g-ink-2);
}

/* ---------- 4. 反馈卡：外壳走 .fb-card，左轨承担分类色（原 4 段颜色改 token） ---------- */
.fb-card {
  padding: var(--g-sp-3) var(--g-sp-5);
  border-left: 4px solid var(--g-line);
  margin-bottom: var(--g-sp-2);
}
.fb-card.cat-功能性 { border-left-color: var(--g-primary-2); }
.fb-card.cat-内容性 { border-left-color: var(--g-knowledge); }
.fb-card.cat-其他 { border-left-color: var(--g-mute-2); }

.fb-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-sp-2);
  margin-bottom: var(--g-sp-1);
}
.fb-title {
  flex: 1 1 160px; min-width: 0;
  font-size: var(--g-fs-base); font-weight: 600; color: var(--g-ink);
  overflow-wrap: anywhere;
}
/* 分类/状态徽标：形状与字号沿用 base 徽标家族（12.5px），只补语义底色 */
.fb-cat { background: var(--g-surface-3); color: var(--g-ink-2); white-space: nowrap; }
.fb-cat.功能 { background: var(--g-primary-soft); color: var(--g-primary); }
.fb-cat.内容 { background: var(--g-knowledge-bg); color: var(--g-knowledge); }
.fb-cat.其他 { background: var(--g-surface-3); color: var(--g-mute); }

.fb-status { white-space: nowrap; }
.fb-status.待处理 { background: var(--g-warn-bg); color: var(--g-warn); }
.fb-status.处理中 { background: var(--g-info-bg); color: var(--g-info); }
.fb-status.已解决 { background: var(--g-ok-bg); color: var(--g-ok); }
.fb-status.已关闭 { background: var(--g-surface-3); color: var(--g-mute); }

.fb-content {
  font-size: var(--g-fs-base); color: var(--g-ink-2);
  line-height: 1.6; overflow-wrap: anywhere;
}
/* 4-16 对比度：#94a3b8(2.56:1) → var(--g-mute)(4.76:1) */
.fb-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-sp-2) var(--g-sp-3);
  margin-top: var(--g-sp-1);
  font-size: var(--g-fs-xs); color: var(--g-mute);
}
/* 处理备注块：meta 在备注存在时由 JS 提前闭合，这里自带外边距 */
.fb-handler-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-sp-2);
  margin-top: var(--g-sp-2); padding: var(--g-sp-2) var(--g-sp-3);
  background: var(--g-surface-2); border: 1px solid var(--g-line-2);
  border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); color: var(--g-ink-2); overflow-wrap: anywhere;
}
.fb-handler-note .btn-sm { flex: 0 0 auto; margin-left: auto; }

/* 列表占位统一走 base 三件套：.empty-msg 只保留文字居中这一条几何 */
.empty-msg { text-align: center; }
#list-area .g-error { border-radius: var(--g-r-md); }
/* 首屏骨架容器：三张卡的高度节奏（骨架条本身走 base 的 .g-skeleton 动画） */
#list-area.fb-skeleton { display: flex; flex-direction: column; gap: var(--g-sp-2); }

/* ---------- 5. 处理弹窗：外壳走 base 的 .modal-overlay（.show 开）/ .modal-box ---------- */
#handle-modal .modal-box { max-width: 440px; }
#handle-modal h3 {
  margin-bottom: var(--g-sp-4);
  font-size: var(--g-fs-md); font-weight: 700; color: var(--g-ink);
}
.form-actions {
  display: flex; justify-content: flex-end; gap: var(--g-sp-2);
  margin-top: var(--g-sp-4);
}

/* ---------- 6. 响应式（断点与公共层 860/480px 对齐） ---------- */
@media (max-width: 860px) {
  /* 4-20：双栏改单栏，提交区不再吸顶 */
  .layout { flex-direction: column; gap: var(--g-sp-4); }
  .form-col { flex: 1 1 auto; width: 100%; }
  .form-card { position: static; padding: var(--g-sp-4); }
  .fb-card { padding: var(--g-sp-3) var(--g-sp-4); }
}
@media (max-width: 560px) {
  /* 筛选栏不换行（一行两个下拉），超出时容器内横滚 */
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .filter-bar select { flex: 0 0 auto; min-width: 132px; }
  .fb-title { flex: 1 1 100%; }
  .fb-handler-note .btn-sm { margin-left: 0; }
}
@media (max-width: 480px) {
  /* 390px：卡片内边距再收一档，弹窗按钮整行可点 */
  .form-card { padding: var(--g-sp-4) var(--g-sp-3); }
  .fb-card { padding: var(--g-sp-3); }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { align-self: stretch; }
}