/* ============================================================================
 * 咨询与督导（session-records.html）· 页面专用样式
 *
 * 本文件**只放本页独有的东西**。下面这些都已由既有文件提供，不要在这里重复定义：
 *   · 表格与卡片骨架（.table / .card / .card__body / .metric-card / .grid--3
 *     / .field / .select / .input / .btn / .empty*）→ app.css
 *   · 会谈类辅助（.s-tablehint / .s-rowlink / .s-right / .s-muted / .s-yes
 *     / .s-no / .s-check / .s-hide）→ session.css
 *   · 状态与风险徽标（.badge--pending / --confirmed / --cancelled
 *     / --risk-high / --risk-mid / --risk-low）→ app.css
 * 本页已引入 tokens.css / app.css / interactions.css / session.css，
 * 再加本文件 —— 少引一个就会"样式莫名丢失"。
 * ========================================================================== */

/* ------------------------------------------------------------------ 三态条
   加载中 / 出错。**出错必须与「空」分开** ——
   一次网络故障不能被渲染成"你还没有会谈记录"（那是把故障说成用户工作里的一个事实）。

   样式与 clients 页的 .clients-state 同源；那份定义在 clients-actions.css 里，
   而那是 clients 页的专用样式文件（里面满是 #clients-panel 之类的具体选择器），
   所以这里另立一份而不是跨页引用。 */
.sr-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-700);
  font-size: var(--text-sm);
}
.sr-state[hidden] { display: none; }
.sr-state--error {
  background: var(--risk-bg);
  color: var(--risk);
  border-color: transparent;
}
/* .btn 是 inline-flex → [hidden] 会被 display 盖掉，属性设了照样显示。
   同族已经踩过三次（.badge / .clients-state / .btn），每加一个组件都要查。 */
.sr-state .btn[hidden] { display: none; }

/* ------------------------------------------------------- AI 能力未接通说明条
   这不是"空态"、不是"加载中"，是一条**产品事实**：这两列后端没有数据源
   （17 张业务表里没有逐字稿 / AI 记录 / 督导报告）。用暖色 note 与"出错"的
   红色分开 —— 用户要能一眼区分「系统坏了」「这项功能还没做」「我确实没有记录」
   这三件完全不同的事。 */
.sr-note {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.sr-note[hidden] { display: none; }
.sr-note svg { flex: 0 0 auto; margin-top: 2px; }

/* 说明条里的外链按钮：靠右、垂直居中。
   2026-10-07 新增 —— 督导服务已上线但落在 saas.anlan.space，
   本站需要一条明确的出口，否则咨询师会以为"督导没做"。 */
.sr-note__cta { margin-left: auto; align-self: center; white-space: nowrap; }

/* ----------------------------------------------------------- 空态里的按钮
   「清空筛选」在"库里本来就没有会谈"时必须隐藏 —— 那时清空筛选毫无意义
   （空的原因不是筛选）。同 .btn[hidden] 那条坑。 */
.sr-empty .btn[hidden] { display: none; }

/* ----------------------------------------------------------- 概览卡的强调色
   待确认 > 0 是**待办**，不是中性统计 → 染 warn；有风险标记 → 染 risk。
   等于 0 时不加类、保持中性 —— "0 条待确认"不是问题，不该报警
   （同 clients 页"填了值就不要画成灰字"的口径：颜色要说真话）。 */
.metric-card.sr-metric--warn strong { color: var(--warn); }
.metric-card.sr-metric--risk strong { color: var(--risk); }

/* ------------------------------------------------------------ 新增会谈弹窗
   四格两列：来访 / 时间 / 时长 / 第几次。
   ⚠️ 「第几次」是**只读预览**，样式上必须看得出来不是让人填的 ——
      否则用户会去点它、点了没反应，以为输入框坏了。 */
#dlgNewSession .modal__panel { max-width: 560px; }

.sr-dlg__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.sr-dlg__grid .input[readonly] {
  background: var(--s-soft-2);
  color: var(--ink-500);
  cursor: default;
}

.sr-dlg__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-500);
}

/* ------------------------------------------------------------------ 窄屏
   列多，窄屏优先横向滚动（与 clients 页同策略：不强行折行，折了反而看不清）。 */
@media (max-width: 900px) {
  .sr-note { font-size: var(--text-xs); }
}
@media (max-width: 640px) {
  .sr-dlg__grid { grid-template-columns: 1fr; }
}