/* =============================================================================
   安澜心理 ANLANCE — 来访管理 · 动作层（邀请来访 / 新增来访）  v0.1
   -----------------------------------------------------------------------------
   定位：clients.html 专属扩展层。只补齐两个动作的弹层形态：
        宽表单弹窗（三段式：头 / 可滚动体 / 固定底栏）、分节表单卡、
        必填·选填标记、折叠选填区、分段控件、邀请元信息卡、复制行、校验态。
   纪律：色值 / 间距 / 圆角 / 缓动 一律引用 tokens.css 变量；零硬编码、零新色；
        字重仅 400 / 500；无弹跳缓动；图标一律内联 SVG（禁 emoji）。
   说明：不改动 tokens.css / app.css / interactions.css 等共享契约文件。
   ============================================================================= */

/* ============================================================ 1. 弹窗变体 */
.modal--form .modal__panel { max-width: 880px; }
.modal--invite .modal__panel { max-width: 560px; }

/* 三段式弹窗：头尾固定，内容区独立滚动（长表单不顶破视口） */
.modal__panel--flush {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--space-12));
  padding: 0;
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-shrink: 0;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}

.modal__head-copy { flex: 1; min-width: 0; }
.modal__head .modal__title { margin-bottom: var(--space-1); }
.modal__head .modal__desc { margin-bottom: 0; }

.modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1) 0 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.modal__close:hover { background: var(--surface-2); color: var(--ink-900); }

.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  background: var(--bg);
}

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.modal__foot-note {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-500);
}
.modal__foot-actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
}

/* ============================================================ 2. 分节表单 */
.form-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.form-section + .form-section { margin-top: var(--space-5); }

.form-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
}

.form-section__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
}

.form-section__meta {
  font-size: var(--text-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.form-section__body { padding: var(--space-5); }

/* 必填 / 选填 小标签 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: .3px;
  white-space: nowrap;
}
.tag--req { background: var(--risk-bg); color: var(--risk); }
.tag--opt { background: var(--neutral-bg); color: var(--ink-500); }
/* 「建议填写」：不阻塞建档，但会带来提醒/通知等实际收益 */
.tag--rec { background: var(--pending-bg); color: var(--anlan-blue); }

/* 表单栅格 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid > .field--full { grid-column: 1 / -1; }

/* display:grid 会盖掉 [hidden] 的 UA 默认 display:none，必须显式归还 */
.form-grid[hidden] { display: none; }

/* 弹窗内表单更紧凑一档，长表单不至于滚动过多 */
.modal--form .input,
.modal--form .select { min-height: 40px; }
.modal--form .textarea { min-height: 74px; }

/* 必填星号 / 建议标记 / 辅助说明 / 校验错误 */
.field__req { margin-left: 2px; color: var(--risk); }

.field__rec {
  margin-left: var(--space-2);
  padding: 0 6px;
  border-radius: 4px;
  background: var(--pending-bg);
  color: var(--anlan-blue);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: .3px;
}

/* `.field__hint` 已于 2026-10-08 **移到 `app.css`**（放在 `.field` 旁边）。
   原因：它原来只在本文件里定义，而本文件只有 `clients.html` 引 ——
   `settings.html` / `org.html` 用了同一个类名却拿不到样式。
   本文件仍由 clients.html 加载，类名照旧可用，只是定义不再在这里。 */

.field__error {
  display: none;
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--risk);
}
.field__error.is-shown { display: block; }

.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
  border-color: var(--risk);
  box-shadow: none;
}
.input.is-invalid:focus,
.select.is-invalid:focus,
.textarea.is-invalid:focus {
  border-color: var(--risk);
  box-shadow: 0 0 0 3px var(--risk-bg);
}

/* 必填区内的子分区（紧急联系人 / 监护人分流） */
.form-sub {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.form-sub__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.form-sub__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
}

/* 勾选行（未成年来访切换） */
.checkline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--ink-700);
  cursor: pointer;
}
.checkline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--anlan-blue);
  cursor: pointer;
}

/* 选填区子分组标题（无上边框的轻量版） */
.fold__body .form-sub__head:first-child { margin-top: 0; }

/* ============================================================ 3. 折叠选填区 */
/* 选填信息默认收起：让「必填」成为视觉主体，选填保持轻量可后补的语气 */
details.form-section > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  cursor: pointer;
  list-style: none;
}
details.form-section > summary::-webkit-details-marker { display: none; }
details.form-section[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.fold__chev {
  display: inline-flex;
  color: var(--ink-500);
  transition: transform var(--motion-fast) var(--ease-out);
}
details.form-section[open] .fold__chev { transform: rotate(90deg); }

.fold__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
}

/* ============================================================ 4. 分段控件 */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.seg__btn {
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-500);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.seg__btn:hover { color: var(--ink-900); }
.seg__btn.is-active {
  background: var(--surface);
  color: var(--anlan-blue);
  box-shadow: var(--shadow-sm);
}
.seg__btn:active { transform: translateY(1px); }

/* ============================================================ 5. 邀请动作 */
.invite-stack { display: flex; flex-direction: column; gap: var(--space-5); }

.invite-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--anlan-blue-50);
}
.invite-meta__label { font-size: var(--text-xs); color: var(--ink-500); }
.invite-meta__value {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
}
.invite-meta__code { font-family: var(--font-mono); color: var(--anlan-blue); }

.invite-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.copy-row { display: flex; gap: var(--space-2); }
.copy-row .input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ============================================================ 6. 新增行入场 */
/* 建档成功后新行轻微高亮淡出，给「落地了」的确认感（无位移、无弹跳） */
@keyframes anlan-row-settle {
  from { background: var(--anlan-blue-50); }
  to   { background: transparent; }
}
tr.is-new { animation: anlan-row-settle 1.6s var(--ease-standard); }

/* ============================================================ 7. 小屏适配 */
@media (max-width: 760px) {
  .form-grid,
  .form-grid--3 { grid-template-columns: minmax(0, 1fr); }

  .modal__head,
  .modal__body,
  .modal__foot { padding-left: var(--space-4); padding-right: var(--space-4); }

  .modal__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .modal__foot-actions .btn { flex: 1; }

  .invite-tools {
    flex-direction: column;
    align-items: stretch;
  }
  .copy-row { flex-wrap: wrap; }
  .copy-row .btn { flex: 0 0 auto; }
}

/* ============================================================ 8. 列表数据层
   配套 assets/clients.js：表格行由 GET /api/v1/visitors 渲染，8 行演示数据已删。
   这里只补三样「原型没有、接真数据才需要」的东西：姓名两行、状态条、就地编辑态。 */

/* 8.1 姓名两行（主名 + 代号·状态）
   与 org.html 的成员列表共用同一套 .cell-client__* 类。
   共享的 app.css 里这两个 span 是并排的；来访列表每列更窄、姓名与代号需要分行，
   故**只在本页表格内**声明为块级，不去动共享的 app.css。
   （org.html 那边 2026-10-07 也改成了两行，见 app.css 的 #org-members 规则 —— 它同样就近声明，
     没有动共享样式，所以两条规则互不干扰。） */
#clients-table .cell-client__code,
#clients-table .cell-client__meta { display: block; }

/* 8.2 状态条：加载中 / 出错 / 提示
   出错态与「空」是两件事 —— 一次接口故障不能说成「你还没有来访」。 */
.clients-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);
}
/* display:flex 会盖掉 [hidden] 的 UA 样式，必须显式归还
   （与 .form-grid[hidden] 同源的老坑） */
.clients-state[hidden] { display: none; }
.clients-state--error { background: var(--risk-bg); color: var(--risk); border-color: transparent; }
.clients-state--note { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }

/* 同类：.btn 是 inline-flex，[hidden] 同样会被盖掉（空态里的「清空筛选」靠它隐藏） */
#clients-panel .btn[hidden] { display: none; }

/* 8.3 就地编辑单元格（情况概览 / 个人咨询策略 / AI 建议策略）
   空值**不写进 DOM** —— 否则用户点进来编辑时，那个占位符会变成内容的一部分。 */
#clients-table td[contenteditable="true"] {
  cursor: text;
  transition: background var(--motion-fast) var(--ease-out);
}
#clients-table td[contenteditable="true"]:focus {
  outline: none;
  background: var(--surface);
  box-shadow: var(--shadow-focus);
}
#clients-table td[data-empty="1"]::before {
  content: attr(data-placeholder);
  color: var(--ink-300);
}
#clients-table td.is-saving { opacity: .55; }

/* ============================================================ 9. 无障碍降级 */
@media (prefers-reduced-motion: reduce) {
  .fold__chev,
  .seg__btn { transition: none; }
  .seg__btn:active { transform: none; }
  tr.is-new { animation: none; }
  #clients-table td[contenteditable="true"] { transition: none; }
}