/* ════════════════════════════════════════════════════════════
   PHASE 2 · 组件统一层（v=160）
   不动任何家族原有尺寸/配色，只归一共性形态与交互模型；
   家族差异（尺寸/颜色/背景）仍在各自规则里保留。
   ════════════════════════════════════════════════════════════ */

/* ── 跨页面动作按钮 ──────────────────────────────────────────
   这些控件由课程浏览器、问答区、个人中心和后台共同生成；不能放在
   仅由后台懒加载的 admin.css 中。 */
.admin-btn {
  padding: 6px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.admin-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.admin-btn:hover { opacity: 0.85; }
.admin-btn-approve { background: var(--success-light); color: var(--success); }
.admin-btn-reject { background: var(--danger-light); color: var(--danger); }
.admin-btn-primary { background: var(--primary); color: #fff; }
.admin-btn-secondary { background: oklch(0.88 0.02 250 / 0.5); color: var(--text); }
.admin-btn-sm {
  padding: 2px 8px;
  font-size: 0.75rem;
  background: var(--primary-surface);
  color: var(--primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.admin-btn-sm:hover { background: var(--primary); color: white; }

/* ── 跨页面弹窗基座 ────────────────────────────────────────── */
.admin-reject-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(2px);
}
.admin-reject-dialog {
  background: oklch(1 0 0 / 0.95);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: min(92vw, 480px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.admin-reject-dialog h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--text);
}
.admin-reject-dialog textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid oklch(0.82 0.02 250 / 0.4);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  background: oklch(1 0 0 / 0.5);
}
.admin-reject-dialog textarea:focus { outline: none; border-color: var(--primary); }
.admin-reject-dialog .ar-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.admin-reject-dialog .ar-error {
  color: oklch(0.5 0.15 25);
  font-size: 0.82rem;
  margin-top: 8px;
  display: none;
}

/* ── 通用分段控件 ──────────────────────────────────────────── */
.pc-type-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.pc-type-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-faint);
  white-space: nowrap;
}
.pc-seg {
  display: inline-flex;
  flex-wrap: wrap;      /* 窄屏放不下时换行，而不是把按钮压成一字一行竖排 */
  max-width: 100%;
  background: oklch(0.93 0.005 60);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.pc-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;  /* 中文标签禁止折行 */
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.pc-seg-btn:hover { background: oklch(0.9 0.005 60); color: var(--ink); }
.pc-seg-btn.active {
  background: var(--raised);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px oklch(0.3 0.01 60 / 0.12);
}
.pc-seg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-faint);
  background: oklch(0.9 0.005 60);
}
.pc-seg-btn.active .pc-seg-count { color: var(--accent); background: oklch(0.93 0.05 60); }
.pc-seg-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .pc-seg-right { margin-left: 0; }
}

/* ── 通用开关 ──────────────────────────────────────────────── */
.ios-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  background: var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s;
  flex-shrink: 0;
}
.ios-toggle-on { background: var(--success); }
.ios-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--raised);
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s;
}
.ios-toggle-on .ios-toggle-knob { transform: translateX(20px); }
.ios-toggle::before { content: ""; position: absolute; inset: -10px 0; }
.dm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: default;
}
.dm-toggle-label { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 8px; }
.dm-toggle-label .dm-ico svg { width: 16px; height: 16px; }

/* ── 通用空态/加载态 ───────────────────────────────────────── */
.admin-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 0.9rem; }
.admin-loading { text-align: center; padding: 32px; color: var(--text-muted); }
@media (max-width: 640px) {
  .admin-reject-dialog {
    width: calc(100vw - 32px);
    min-width: 0;
    max-width: none;
    padding: 20px;
    margin: 0 16px;
    max-height: 85vh;
  }
  .admin-reject-dialog .ar-actions { flex-direction: column; }
  .admin-reject-dialog .ar-actions .admin-btn { width: 100%; text-align: center; }
}

/* ── 按钮：flex 居中 + 统一游标/过渡（不强制圆角，避免误伤分段控件与胶囊CTA） ── */
:is(.admin-btn, .admin-btn-approve, .admin-btn-reject, .admin-btn-primary,
    .admin-btn-secondary, .admin-btn-sm, .fd-btn, .fd-btn-primary,
    .fd-btn-secondary, .fd-btn-danger, .nc-btn-primary, .nc-btn-secondary,
    .mf-btn, .ms-copy-btn, .notif-mark-all-btn, .notif-mark-btn,
    .reupload-btn, .fi-preview-btn, .fi-download-btn, .pc-btn-detail,
    .pv-dl-btn, .announcement-create-btn, .fa-filter-btn,
    .profile-edit-btn, .profile-action-btn, .so-new-btn, .nc-level-btn,
    .ppc-save-btn, .fm-action-btn, .mgmt-new-btn, .explorer-newcourse-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast),
              opacity var(--t-fast), transform var(--t-fast);
}
/* 图标+文字按钮：内隙统一 */
:is(.fd-btn, .fd-btn-primary, .fd-btn-secondary, .fd-btn-danger,
    .fi-preview-btn, .fi-download-btn, .fa-filter-btn, .announcement-create-btn,
    .reupload-btn, .ms-copy-btn, .notif-mark-all-btn, .notif-mark-btn) {
  gap: 6px;
}

/* ── 头像：图片类统一圆形裁切，首字类统一圆形居中 ── */
:is(.admin-user-avatar, .lb-avatar, .cr-pill-avatar, .up-avatar,
    .ai-avatar, .fdu-avatar-img) {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}
:is(.user-avatar-circle, .dm-avatar, .admin-user-avatar-placeholder,
    .cr-pill-avatar-ph, .lb-avatar-placeholder, .up-avatar-placeholder,
    .ai-avatar-placeholder, .fdu-avatar, .profile-avatar-circle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  user-select: none;
}

/* ── 类型标签 / 审核徽章：统一胶囊形态 ── */
:is(.cr-tag, .sg-pill, .sg-pill-general, .sg-pill-major, .hc-tag-general, .hc-tag-major) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1.4;
}
:is(.review-badge, .review-badge-pending, .review-badge-approved, .review-badge-rejected,
    .admin-table .status-tag) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ── Overlay 关闭钮：统一游标/过渡/悬停反馈 ── */
:is(.modal-close, .search-overlay-close, .sg-close, .notif-drawer-close, .preview-close) {
  cursor: pointer;
  line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
:is(.modal-close, .search-overlay-close, .sg-close, .notif-drawer-close):hover {
  color: var(--ink);
  background: var(--primary-surface);
}
/* 搜索覆盖层关闭钮并入圆形标准（与 .modal-close 同形） */
.search-overlay-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* ── 空态：紧凑变体（容器内"加载中/暂无数据/加载失败"消息） ── */
.empty-state.compact { padding: 32px 16px; }

/* ── Phase 3 · ICONS 尺寸（SVG 不带内联尺寸，尺寸集中在此） ── */
.ico-nav { display: inline-flex; align-items: center; justify-content: center; }
.side-nav .ico-nav { width: 18px; height: 18px; }
.side-nav .ico-nav svg { width: 18px; height: 18px; }
.sn-icon.ico-nav { width: 20px; height: 20px; }
.sn-icon.ico-nav svg { width: 20px; height: 20px; }
.header-login .login-icon svg { width: 20px; height: 20px; display: block; }
.empty-state .es-icon svg { width: 40px; height: 40px; }

/* ── v160 反馈修复：待审卡片「详情」按钮统一使用 SVG 图标 ── */
.admin-pending-card .pc-actions .admin-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.admin-pending-card .pc-actions .admin-btn { gap: 6px; }

/* 共用扁平 SVG 图标：统一尺寸与描边，颜色继承控件及主题。 */
.ui-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.16em; }
.ui-icon use { pointer-events: none; }

/* 共享分段控件随主题变化，避免暗色/冷色仍露出浅色硬编码底。 */
.pc-seg { background: var(--surface) !important; border-color: var(--border-light) !important; }
.pc-seg-btn:hover { background: var(--border-light) !important; color: var(--ink) !important; }
.pc-seg-btn.active { background: var(--raised) !important; color: var(--ink) !important; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08); }
.pc-seg-count { background: var(--border-light) !important; color: var(--ink-faint) !important; }

/* ── 键盘焦点：覆盖各家族历史遗留的 outline:none，仅在 focus-visible 出现 ── */
:where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px;
}

/*
 * 文字输入保持静态外观：聚焦时只显示光标，不再添加描边、光晕或变色边框。
 * 按钮、链接、选择器等非文字控件仍沿用上方的键盘焦点提示。
 */
:where(
  input:not(:is(
    [type="checkbox"], [type="radio"], [type="range"], [type="file"],
    [type="color"], [type="button"], [type="submit"], [type="reset"],
    [type="image"], [type="hidden"]
  )),
  textarea,
  [contenteditable="true"],
  [contenteditable="plaintext-only"]
):is(:focus, :focus-visible) {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* 当前三类组合输入由外壳承载边界，也必须取消 focus-within 产生的额外框。 */
:where(.search-box, .mf-email-wrap, .so-input-group):focus-within {
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* 关闭、显隐密码、开关等纯图标控件保持至少 44px 触控热区。 */
:is(.modal-close, .search-overlay-close, .mf-pwd-toggle) {
  min-width: 44px;
  min-height: 44px;
}

/* 暗色主题兜底：跨页面弹窗与分段控件不得沿用浅色实底。 */
html[data-bnu-theme="dark"] .admin-reject-dialog {
  background: var(--raised);
  color: var(--ink);
}
html[data-bnu-theme="dark"] .admin-reject-dialog textarea {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
html[data-bnu-theme="dark"] .pc-seg { background: var(--surface); }
html[data-bnu-theme="dark"] .pc-seg-btn:hover { background: var(--primary-surface); }
html[data-bnu-theme="dark"] .pc-seg-count { background: var(--raised); }
html[data-bnu-theme="dark"] .pc-seg-btn.active .pc-seg-count { background: var(--primary-surface); }