/* ══════════════════════════════════════════════════════════════
   活动中心 · 弹窗专用样式（Aurora 设计系统配套层）
   ──────────────────────────────────────────────────────────────
   弹窗外壳已统一为 Aurora（au-modal / au-field / au-input / au-select /
   au-data-table / au-btn / au-empty），本文件只保留 Aurora 组件库未覆盖、
   且仍被 js/pages-interactive.js 活动段引用的选择器：
     · .am-modal                     活动大表单弹窗作用域（openActivityModalDOM 挂载）
     · .csel / .csel-*               自定义下拉（toggleCsel / pickCsel / setCselValue 引用）
     · .staff-search / .staff-dd-*   工作人员用户搜索浮层（onActStaffSearch 引用）
     · .cover-preview / .cover-thumb / .cover-dim / .rm  封面缩略图（renderActivityCovers 引用）
     · .ac-edit-* / .ac-w7 等        活动编辑类小弹窗共用排版
   色值 / 圆角 / 阴影 / 动效一律取 css/themes.css 令牌；字号一律 rem。
   设计稿遗留的 .am-root 局部变量块（暖米色 + 衬线 + 金色）已随外壳迁移删除。
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 大表单弹窗骨架微调（叠加在 au-modal 之上） ─────────────────── */
.am-modal { max-width: 64rem; }
.am-modal .au-modal-body { padding: 1.75rem 2rem; }
.am-modal .au-modal-foot { gap: .625rem; padding: 1.125rem 2rem; }
.am-modal .au-data-table { font-size: var(--fs-2); }
.am-modal .au-data-table td { padding: .5rem .625rem; }
.am-modal .au-empty { margin: .25rem 0; }

/* 表单小节 / 标题图标：跟随 Aurora 强调色 */
.ac-form-sec-title .tc-ico { font-size: var(--fs-2); color: var(--accent-text); flex: none; }
.ac-cover-drop .u-title .tc-ico { margin-right: .375rem; color: var(--accent-text); }
.au-modal-title .tc-ico { margin-right: .5rem; color: var(--accent-text); vertical-align: -.15em; }

/* ── 1a. 弹窗头部层次：主标题 fs-3 + 一行引导副题（2026-09-20 重设计） ── */
.am-modal .au-modal-head { padding: 1.5rem 2rem 1.25rem; }
.am-modal .au-modal-title { font-size: var(--fs-3); }
.am-head-sub {
  margin-top: .375rem;
  padding-left: 2.875rem; /* 与标题图标后的文字起点对齐（2.125rem 图标 + .75rem 间隙） */
  font-size: var(--fs-1); font-weight: 400; color: var(--text-3);
}

/* ── 1b. 编号节标题：01-05 序号片 + fs-3 大节题 + 右侧策划提示 ────────── */
.am-modal .ac-form { gap: 1.75rem; }
.am-modal .ac-form-sec { padding: 1.5rem 1.75rem; }
.am-modal .ac-form-sec-title {
  font-size: var(--fs-3); font-weight: 700; letter-spacing: -.01em;
  gap: .625rem; margin-bottom: 1.375rem; padding-bottom: .875rem;
  border-bottom: 1px solid var(--border);
}
.am-sec-no {
  display: inline-flex; align-items: center; height: 1.625rem; padding: 0 .5rem;
  border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-text);
  font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .05em; font-variant-numeric: tabular-nums; flex: none;
}
.am-sec-hint {
  margin-left: auto; font-size: var(--fs-1); font-weight: 400; color: var(--text-4);
  letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 56rem) { .am-sec-hint { display: none; } }

/* 子区块（工作人员 / 参与设置）副层级题：强调色短标 + 600 中字重 */
.am-modal .ac-form-sub { margin-top: 1.75rem; }
.am-modal .ac-form-sub > .au-field-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-2); font-weight: 600; color: var(--text-1); margin-bottom: .875rem;
}
.am-modal .ac-form-sub > .au-field-label::before {
  content: ''; width: .25rem; height: .875rem; border-radius: .125rem;
  background: var(--accent); flex: none;
}

/* 字段组节奏：统一替代原先散落的行内 margin-top */
.am-modal .au-form-grid + .au-form-grid,
.am-modal .au-form-grid + .au-field { margin-top: 1.25rem; }
.am-modal .ac-form-sub .au-choice-group { margin: 0 0 1.25rem; }
.am-modal .ac-staff-row { gap: .875rem; margin-bottom: .875rem; }
.am-modal .am-add-row { margin-top: 1.125rem; }

/* 按钮与相邻组件等高：预算表内「移除」与同行 2.75rem 输入框对齐 */
.am-modal #actBudgetBody .au-btn { --btn-h: 2.75rem; }

/* 封面上传区与预算总额条：加大留白、突出汇总数字 */
.am-modal .ac-cover-drop { padding: 1.75rem 1.25rem; gap: .625rem; }
.am-modal .ac-budget-total { padding: .875rem 1.125rem; margin-bottom: 1rem; }
.am-modal .ac-budget-val { font-size: var(--fs-3); }

/* ── 2. 三列表单网格（au-form-grid 的模块内变体） ─────────────────── */
.au-form-grid.au-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62.5rem) { .au-form-grid.au-form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem)   { .au-form-grid.au-form-grid--3 { grid-template-columns: 1fr; } }

/* ── 3. 活动编辑类小弹窗共用排版（组织 / 参与 / 议程 / 总结） ─────── */
.ac-edit-col  { display: flex; flex-direction: column; gap: .75rem; }
.ac-edit-list { display: flex; flex-direction: column; gap: .5rem; }
.ac-self-start { align-self: flex-start; }
.ac-inline-select { width: auto; min-width: 7rem; flex: none; }
.ac-w7 { max-width: 7rem; flex: none; }
.ac-fx1 { flex: 1 1 0; min-width: 0; }
.ac-fx2 { flex: 2 1 0; min-width: 0; }
.ac-btn-end { justify-content: flex-end; }
.ac-form--tight { gap: .875rem; }

/* 弹窗内紧凑空态：Aurora au-empty 面向页面级留白，此处收敛尺寸 */
.ac-empty-compact { padding: 1.25rem .75rem; }
.ac-empty-compact .au-empty-icon { width: 2.75rem; height: 2.75rem; margin: 0 auto .625rem; }
.ac-empty-compact .au-empty-icon svg { width: 1.25rem; height: 1.25rem; }
.ac-empty-compact h4 { font-size: var(--fs-2); margin-bottom: .25rem; }
.ac-empty-compact p { font-size: var(--fs-1); margin-bottom: 0; }

/* ── 4. 表单小节进场动画（外壳动画由 au-modal / au-is-open 负责） ──── */
@keyframes amSecIn { to { opacity: 1; transform: translateY(0); } }

/* （原 .am-root .m-head / .m-close 头部样式已删除：由 au-modal-head / au-title-icon / au-modal-x 承担） */

/* ── 5. 表单小节逐节淡入（衔接 au-modal 进场节奏） ─────────────────── */
.am-modal .ac-form-sec {
  opacity: 0; transform: translateY(.625rem);
  animation: amSecIn .45s var(--ease-out) forwards;
}
.am-modal .ac-form-sec:nth-child(1) { animation-delay: .06s; }
.am-modal .ac-form-sec:nth-child(2) { animation-delay: .12s; }
.am-modal .ac-form-sec:nth-child(3) { animation-delay: .18s; }
.am-modal .ac-form-sec:nth-child(4) { animation-delay: .24s; }
.am-modal .ac-form-sec:nth-child(5) { animation-delay: .30s; }

/* ── 6. 弹窗滚动条（令牌化，替代原 260px 定高与暖色描边） ─────────── */
.am-modal .au-modal-body::-webkit-scrollbar { width: .3125rem; }
.am-modal .au-modal-body::-webkit-scrollbar-track { background: transparent; }
.am-modal .au-modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: .25rem; }
.am-modal .au-modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ── 7. 自定义下拉 .csel（视觉对齐 au-select / au-dropdown-menu） ───── */
.am-modal .csel { position: relative; user-select: none; }
.am-modal .csel-trigger {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 2.25rem 0 .875rem;
  display: flex; align-items: center;
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-4);
  font-size: var(--fs-2);
  line-height: 1.4;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.am-modal .csel-trigger.has-value { color: var(--text-1); }
.am-modal .csel-trigger::after {
  content: '';
  position: absolute; right: 1rem; top: 50%;
  width: .3125rem; height: .3125rem;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .3s var(--ease-spring), border-color var(--dur-2) var(--ease-out);
}
.am-modal .csel.open .csel-trigger::after { transform: translateY(-35%) rotate(-135deg); border-color: var(--accent); }
.am-modal .csel-trigger:hover { border-color: var(--border-strong); }
.am-modal .csel.open .csel-trigger { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); }
.am-modal .csel-drop {
  position: absolute;
  top: calc(100% + .375rem); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  padding: .3125rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-.375rem) scale(.98);
  transform-origin: top center;
  transition: all .28s var(--ease-spring);
  max-height: 16.25rem; overflow-y: auto;
}
.am-modal .csel-drop::-webkit-scrollbar { width: .25rem; }
.am-modal .csel-drop::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: .25rem; }
.am-modal .csel.open .csel-drop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.am-modal .csel-opt {
  padding: .5rem .625rem;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-size: var(--fs-2);
  color: var(--text-2);
  transition: all var(--dur-2) var(--ease-out);
  display: flex; align-items: center; gap: .5rem;
}
.am-modal .csel-opt:hover { background: var(--accent-soft); color: var(--accent-text); }
.am-modal .csel-opt.selected { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.am-modal .csel-opt .dot { width: .3125rem; height: .3125rem; border-radius: 50%; background: transparent; flex-shrink: 0; transition: all var(--dur-2) var(--ease-out); }
.am-modal .csel-opt.selected .dot { background: var(--accent); box-shadow: 0 0 .375rem var(--accent-glow); }

/* ── 8. 封面缩略图（renderActivityCovers 输出） ─────────────────────
   原 .upload-zone / .hint-box 已删除：上传区由 aurora-ext.css 的
   .ac-cover-drop 承担，提示文案统一用 .au-field-hint / .au-alert。   */
.am-modal .cover-preview { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: .875rem; }
.am-modal .cover-thumb {
  width: 6.75rem; height: 4.5rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  position: relative;
  animation: amThumbPop .35s var(--ease-spring) both;
}
@keyframes amThumbPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.am-modal .cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-modal .cover-thumb .rm {
  position: absolute; top: .25rem; right: .25rem;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  background: var(--surface-glass);
  backdrop-filter: blur(.25rem);
  -webkit-backdrop-filter: blur(.25rem);
  border: 1px solid var(--border);
  color: var(--danger);
  font-size: var(--fs-2); line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.8);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-spring), background-color var(--dur-2) var(--ease-out);
}
.am-modal .cover-thumb:hover .rm { opacity: 1; transform: scale(1); }
.am-modal .cover-thumb .rm:hover { background: var(--danger-soft); }
.am-modal .cover-thumb .cover-dim {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: var(--fs-1); line-height: 1.5; text-align: center;
  color: var(--text-2);
  background: var(--surface-glass);
  backdrop-filter: blur(.25rem);
  -webkit-backdrop-filter: blur(.25rem);
  border-top: 1px solid var(--border);
  padding: .0625rem .125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 9. 工作人员用户搜索浮层（onActStaffSearch / pickActStaff） ───────
   原 .am-root .cb-*（自定义复选框）已由 au-choice + au-mark-check 取代；
   .stbl / .btbl / .budget-bar / .del-btn / .btn* / .m-foot 由
   au-data-table / ac-budget-total / au-btn / au-modal-foot 取代；
   .staff-row-1 / .staff-row-2 由 au-form-grid + ac-staff-row 取代。      */
.am-modal .staff-search { position: relative; }
.am-modal .staff-dd {
  position: absolute;
  top: calc(100% + .3125rem); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 90;
  padding: .3125rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-.375rem);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-spring), visibility .28s;
  max-height: 13.75rem; overflow-y: auto;
}
.am-modal .staff-dd.open { opacity: 1; visibility: visible; transform: translateY(0); }
.am-modal .staff-dd::-webkit-scrollbar { width: .25rem; }
.am-modal .staff-dd::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: .25rem; }
.am-modal .staff-dd-item {
  padding: .5625rem .75rem;
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: .625rem;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out);
}
.am-modal .staff-dd-item:hover { background: var(--accent-soft); }
.am-modal .staff-dd-empty {
  cursor: default;
  color: var(--text-3);
  font-size: var(--fs-2);
}
.am-modal .staff-dd-empty:hover { background: transparent; }
.am-modal .staff-dd-avatar {
  width: 1.875rem; height: 1.875rem;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-1); font-weight: 600;
  color: var(--accent-text);
  flex-shrink: 0;
}
.am-modal .staff-dd-name { font-size: var(--fs-2); font-weight: 500; color: var(--text-1); }
.am-modal .staff-dd-dept { font-size: var(--fs-1); color: var(--text-3); }

/* ── 10. 响应式（rem 断点，配合根字号 clamp） ──────────────────────── */
@media (max-width: 48rem) {
  .am-modal .au-modal-head { padding: 1.125rem 1.25rem .875rem; }
  .am-head-sub { padding-left: 0; }
  .am-modal .au-modal-body { padding: 1.25rem 1rem; }
  .am-modal .au-modal-foot { padding: .875rem 1rem; }
  .am-modal .ac-form-sec { padding: 1.125rem 1rem; }
  .am-modal .cover-preview { gap: .5rem; }
  .am-modal .cover-thumb { width: 5.5rem; height: 3.75rem; }
  .am-modal .csel-drop, .am-modal .staff-dd { max-height: 11.25rem; }
}