/* =============================================================================
   收件箱页 `inbox.html` 专用样式
   依赖：tokens.css + app.css（共用外壳与组件）
   ⚠️ 顶栏那个**下拉面板**的样式不在这里 —— 它在 app.css（那个面板出现在 9 个页面上，
      不是本页独有的东西）。这里只管收件箱**页**上的条目行。
   ============================================================================= */

/* ---------------------------------------------------------------- 条目行 */
/* ★ 一行里有两层链接，这是刻意的：
     · **整行可点**（点空白处 → 去处理它）
     · **条内实体也可点**（姓名 → 来访档案；会谈时间 → 日程里那一周）
   做法：整行不是 <a>（<a> 不能嵌 <a>），由 inbox.js 挂一个 click 处理器，
   并在处理器里**放过落在 <a>/<button> 上的点击** —— 否则点姓名会被整行的
   跳转抢走，两个导航打架。 */

.ib-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
}
.ib-row + .ib-row { border-top: 1px solid var(--line-soft); }
.ib-row:hover { background: var(--surface-2); }
.ib-row:focus-visible { outline: 2px solid var(--anlan-blue); outline-offset: -2px; border-radius: 8px; }

.ib-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ib-row__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  text-decoration: none;
}
.ib-row__name:hover { color: var(--anlan-blue); text-decoration: underline; }

.ib-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--ink-500);
}
.ib-row__meta a { color: var(--ink-700); text-decoration: none; }
.ib-row__meta a:hover { color: var(--anlan-blue); text-decoration: underline; }
.ib-row__sep { color: var(--ink-300); }

/* 已过期的预约：把这一条顶出来。
   时段一过，它就**永远不会自己好** —— 这是整张表里最该被先看见的一行。 */
.ib-row--expired .ib-row__meta,
.ib-row--expired .ib-row__meta a { color: var(--risk); }

.ib-row__ops {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 正在提交的那一行：整行压暗，别让咨询师以为还能再点一次 */
.ib-row.is-busy { opacity: .55; }

/* 行级错误（确认撞了唯一索引、取消失败…）。
   刻意显示在**这一行上**而不是页面顶部：失败的是这一条，别的行仍然好好的。 */
.ib-row__err {
  font-size: var(--text-xs);
  color: var(--risk);
}

.ib-more {
  padding: var(--space-2) var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* 窄屏：操作列换到下一行，别把姓名挤成两三个字 */
@media (max-width: 720px) {
  .ib-row { flex-wrap: wrap; }
  .ib-row__ops { flex: 1 1 100%; justify-content: flex-end; }
}