/* ============================================================================
   恒材盛达 · 学习系统「内容管理中心」——P3「穿透」叠加层样式（2026-10-11）
   ----------------------------------------------------------------------------
   作用域：全部规则带 `body.admin-view` 前缀 ⇒ 学员端零命中。
   来源口径：v2.0 §9「组件规范」（按钮 32px/圆角 8px、表格 表头 40px/行 44px、
             筛选栏=下拉+一键清空、抽屉 420px、卡片 padding 16px/圆角 10px/单层阴影、
             统计卡可穿透）与 §9.1 反面清单（禁 !important、禁多层阴影、正文禁 700 加粗）。
   回滚：删除本文件 + index.html 里的 <link> 与 admin-drill.js 的 <script> 即回现状。
   ============================================================================ */

/* ── 0. 抽屉打开时锁 body 滚动（§9「弹窗抽屉」） ─────────────────────────── */
body.admin-view.drOpen{ overflow:hidden; }

/* ── 1. 异常红条：下钻失败绝不静默 ─────────────────────────────────────── */
body.admin-view #drErr{
  position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:3000;
  display:flex; align-items:center; gap:var(--space-3);
  max-width:min(760px,92vw); padding:10px var(--space-4);
  background:var(--color-danger-bg); color:var(--color-danger);
  border:1px solid var(--color-danger); border-radius:var(--radius-md); box-shadow:var(--shadow-2);
  font-size:var(--fs-caption);
}
body.admin-view #drErr .drErr-h{ color:var(--color-text-3); }
body.admin-view #drErr .drErr-x{
  border:none; background:transparent; color:var(--color-danger);
  font-size:var(--fs-body); cursor:pointer; padding:0 var(--space-1);
}

/* ── 2. 筛选控件（学名 → 下拉 + 关键词 + 重置） ─────────────────────────── */
body.admin-view #uFil{ margin:0 0 var(--space-3); }
body.admin-view .drFil{
  display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4);
  box-shadow:var(--shadow-1); margin-bottom:var(--space-2);
}
body.admin-view .drFil-l{ font-size:var(--fs-caption); color:var(--color-text-2); margin:0; }
body.admin-view .drFil-s,
body.admin-view .drFil-k{
  height:32px; box-sizing:border-box; padding:0 var(--space-2);
  border:1px solid var(--color-border-strong); border-radius:var(--radius-sm);
  font-size:var(--fs-caption); color:var(--color-text-1); background:var(--color-surface);
  min-width:132px;
}
body.admin-view .drFil-k{ flex:1; min-width:180px; }

/* ── 3. 「🔎 当前筛选」提示条（导出与列表同范围） ───────────────────────── */
body.admin-view .drBar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:10px var(--space-4); margin-bottom:var(--space-2);
  background:var(--color-accent-bg); border:1px solid var(--color-accent);
  border-radius:var(--radius-md); font-size:var(--fs-caption); color:var(--color-text-1);
}
body.admin-view .drBar-note{ color:var(--color-text-3); margin-left:var(--space-1); }
body.admin-view .drBar-x{
  height:28px; padding:0 var(--space-3); cursor:pointer;
  background:var(--color-surface); color:var(--color-accent);
  border:1px solid var(--color-accent); border-radius:var(--radius-sm); font-size:var(--fs-caption);
}
body.admin-view .drBar-x:hover{ background:var(--color-accent-bg); }

/* ── 4. 列表行内入口（姓名可点） ───────────────────────────────────────── */
body.admin-view #uList td.drName{
  color:var(--color-accent); cursor:pointer; font-weight:var(--fw-medium);
}
body.admin-view #uList td.drName:hover{ text-decoration:underline; }

/* ── 5. 详情抽屉（PC 右侧 420px／手机底部全宽） ────────────────────────── */
body.admin-view #drDrw{ position:fixed; inset:0; z-index:2800; }
body.admin-view #drDrw .drMsk{
  position:absolute; inset:0; background:var(--color-overlay);
}
body.admin-view #drDrw .drPnl{
  position:absolute; top:0; right:0; bottom:0; width:420px; max-width:100%;
  background:var(--color-surface); box-shadow:var(--shadow-3);
  display:flex; flex-direction:column;
}
body.admin-view #drDrw .drHd{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border);
  flex:0 0 auto;
}
body.admin-view #drDrw .drHd-t{ font-size:var(--fs-h3); font-weight:var(--fw-semibold); color:var(--color-text-1); }
body.admin-view #drDrw .drX{
  width:32px; height:32px; border:1px solid var(--color-border-strong); border-radius:var(--radius-sm);
  background:var(--color-surface); color:var(--color-text-2); cursor:pointer; font-size:var(--fs-body);
}
body.admin-view #drDrw .drBd{ flex:1 1 auto; overflow-y:auto; padding:var(--space-4); }

body.admin-view .drWho{ margin-bottom:var(--space-3); }
body.admin-view .drWho-n{ font-size:var(--fs-h2); font-weight:var(--fw-semibold); color:var(--color-text-1); }
body.admin-view .drWho-p{ font-size:var(--fs-caption); color:var(--color-text-3); margin-left:var(--space-2); font-weight:var(--fw-regular); }
body.admin-view .drWho-m{ font-size:var(--fs-caption); color:var(--color-text-2); margin-top:var(--space-1); }

body.admin-view .drKpi{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-4);
}
body.admin-view .drKpi-i{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-3); box-shadow:var(--shadow-1);
}
body.admin-view .drKpi-v{ font-size:var(--fs-h2); font-weight:var(--fw-semibold); color:var(--color-text-1); }
body.admin-view .drKpi-u{ font-size:var(--fs-caption); color:var(--color-text-3); }
body.admin-view .drKpi-k{ font-size:var(--fs-mini); color:var(--color-text-3); margin-top:2px; }

body.admin-view .drSec-t{
  font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--color-text-1);
  margin:var(--space-4) 0 var(--space-2); padding-bottom:var(--space-1);
  border-bottom:1px solid var(--color-border);
}
body.admin-view .drTb{ width:100%; border-collapse:collapse; font-size:var(--fs-caption); }
body.admin-view .drTb th{
  text-align:left; font-weight:var(--fw-medium); color:var(--color-text-3);
  padding:var(--space-2) var(--space-2) var(--space-2) 0; border-bottom:1px solid var(--color-border);
  vertical-align:bottom;
}
body.admin-view .drTb td{
  padding:10px var(--space-2) 10px 0; border-bottom:1px solid var(--color-border);
  color:var(--color-text-1); vertical-align:middle;
}
body.admin-view .drTb-c{ text-align:center; }
body.admin-view .drTb-a{ text-align:right; width:96px; }
body.admin-view .drTb-n{ color:var(--color-text-1); }
body.admin-view .drTb-m{ font-size:var(--fs-mini); color:var(--color-text-3); margin-top:2px; }
body.admin-view .drGo{
  height:28px; padding:0 var(--space-2); cursor:pointer; white-space:nowrap;
  background:var(--color-accent-bg); color:var(--color-accent);
  border:1px solid var(--color-accent); border-radius:var(--radius-sm); font-size:var(--fs-mini);
}
body.admin-view .drGo:hover{ background:var(--color-surface); }
body.admin-view .drOk{ color:var(--color-success); }
body.admin-view .drBad{ color:var(--color-danger); }
body.admin-view .drInfo{ color:var(--color-accent); }
body.admin-view .drMuted{ color:var(--color-text-3); }
body.admin-view .drNone,
body.admin-view .drLoading{
  padding:var(--space-4); text-align:center; color:var(--color-text-3); font-size:var(--fs-caption);
}

/* ── 6. 手机端：抽屉改底部全宽 + 筛选控件换行 ─────────────────────────── */
@media (max-width:760px){
  body.admin-view #drDrw .drPnl{
    top:auto; left:0; right:0; bottom:0; width:100%; max-height:88vh;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  body.admin-view .drFil{ padding:var(--space-3); }
  body.admin-view .drFil-s, body.admin-view .drFil-k{ min-width:0; width:100%; }
  body.admin-view .drKpi{ grid-template-columns:1fr 1fr; }
  body.admin-view .drBar{ flex-direction:column; align-items:flex-start; gap:var(--space-2); }
}

/* ── 7. 可穿透统计卡与名单行（§9「统计卡可穿透」） ─────────────────────── */
body.admin-view #ap .dsh-card.drHit{ cursor:pointer; position:relative; }
body.admin-view .drHit-h{
  margin-top:var(--space-1); font-size:var(--fs-mini); color:var(--color-accent);
  opacity:.85;
}
body.admin-view #ap .dsh-card.drHit:hover .drHit-h{ opacity:1; text-decoration:underline; }
body.admin-view #ap .dsh-rank.drRow,
body.admin-view #ap .dsh-unrow.drRow{ cursor:pointer; }
body.admin-view #ap .dsh-rank.drRow:hover,
body.admin-view #ap .dsh-unrow.drRow:hover{ background:var(--color-accent-bg); }

/* ── 8. L2/L3 穿透扩展：商户卡 / 试卷卡可穿透 + 名册与题目 ─────────────── */
body.admin-view #merList > div.drRow,
body.admin-view #plist > div.drRow{ cursor:pointer; }
body.admin-view #merList > div.drRow:hover,
body.admin-view #plist > div.drRow:hover{ box-shadow:var(--shadow-2); }
body.admin-view .drGo-w{ white-space:nowrap; }
body.admin-view .drTb td .drName2{ cursor:pointer; }
body.admin-view .drTb td .drName2:hover{ text-decoration:underline; color:var(--color-accent); }
body.admin-view .drOk{ color:var(--color-success); }
body.admin-view .drWarn{ color:var(--color-danger); }
body.admin-view .drBack{
  margin-left:auto; margin-right:var(--space-2); height:24px; padding:0 var(--space-2);
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-surface); color:var(--color-text-2);
  font-size:var(--fs-mini); cursor:pointer;
}

/* 错题本 · 题目明细 */
body.admin-view .drQ{
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-3); margin-bottom:var(--space-2); background:var(--color-surface);
}
body.admin-view .drQ-h{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); }
body.admin-view .drQ-i{
  width:20px; height:20px; flex:0 0 20px; border-radius:50%;
  background:var(--color-accent-bg); color:var(--color-accent);
  font-size:var(--fs-mini); line-height:20px; text-align:center;
}
body.admin-view .drQ-t{ font-size:var(--fs-mini); color:var(--color-text-2); }
body.admin-view .drQ-w{ margin-left:auto; font-size:var(--fs-mini); color:var(--color-danger); }
body.admin-view .drQ-s{ font-size:var(--fs-caption); color:var(--color-text-1); line-height:1.6; }
body.admin-view .drQ-o{
  margin:var(--space-2) 0 0; padding-left:var(--space-4);
  font-size:var(--fs-mini); color:var(--color-text-2); line-height:1.7;
}
body.admin-view .drQ-a{
  margin-top:var(--space-2); padding-top:var(--space-2);
  border-top:1px dashed var(--color-border);
  font-size:var(--fs-mini); color:var(--color-text-2);
}
body.admin-view .drQ-a b{ color:var(--color-success); }