/* pages-admin.css —— 教师后台（#/admin）。老师 2026-10-03 要的那一页。
   ----------------------------------------------------------------------------
   五个页签：总览 / 昵称申请 / 测评开放 / 组练词本 / 学生。
   ★ 全部样式只服务这一页，类名一律 `ad-` 前缀 —— 不与别的页面抢名字。
   ★ 令牌全部取自 theme.css（`--c-*` / `--t-*` / `--fs-*` / `--r-*`），
     不写死颜色：写死的话主题一改这里就"看起来不一样"（这项目栽过）。 */

.ad-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}

.ad-tab {
  position: relative;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--t-muted);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.ad-tab:hover { color: var(--t-primary); background: var(--c-card-hi); }

.ad-tab.is-on {
  color: var(--t-bright);
  background: var(--c-hover);
  border-color: var(--c-accent-dim);
}

/* 待办徽标：老师不进那一页也知道有东西等着他 */
.ad-badge {
  display: inline-block;
  min-width: 17px;
  margin-left: 6px;
  padding: 0 5px;
  font-size: var(--fs-xs);
  line-height: 17px;
  text-align: center;
  color: var(--t-bright);
  background: var(--c-red-a);
  border-radius: 9px;
}

.ad-panel { display: flex; flex-direction: column; gap: 10px; }

/* 加载占位。★ 刻意**不**复用 `ui.loading()`：它的外层 `class="grid"` 是商店页的
   卡片网格，会把骨架撑成大方块（后台里看着像坏了）。这里是一条条细的。 */
.ad-skel { display: flex; flex-direction: column; gap: 8px; }

.ad-skel-row {
  height: 18px;
  border-radius: var(--r-sm);
  background: var(--c-card-hi);
  opacity: 0.5;
  animation: ad-skel-pulse 1.1s ease-in-out infinite;
}

.ad-skel-row:nth-child(2) { width: 82%; }
.ad-skel-row:nth-child(3) { width: 64%; }

@keyframes ad-skel-pulse {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.62; }
}

.ad-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ad-head h3 { margin: 0; }
.ad-head .ad-cls { max-width: 220px; }
.ad-head .ad-toggle { margin-left: auto; }
.ad-head .btn { margin-left: auto; }

.ad-note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--t-dim);
}

.ad-err {
  margin: 0;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  color: var(--t-primary);
  background: var(--c-card);
  border: 1px solid var(--c-red-a);
  border-radius: var(--r-sm);
}

.ad-lb {
  font-size: var(--fs-sm);
  color: var(--t-muted);
  margin-top: 4px;
}

.ad-form { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.ad-form .input { width: 100%; }
.ad-form .btn { margin-top: 10px; align-self: flex-start; }

/* ---------------- 总览卡 ---------------- */
.ad-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.ad-card {
  padding: 14px 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.ad-card.is-link { cursor: pointer; }
.ad-card.is-link:hover { background: var(--c-card-hi); border-color: var(--c-accent-dim); }

.ad-card-t { font-size: var(--fs-sm); color: var(--t-muted); }
.ad-card-b {
  margin: 6px 0 2px;
  font-size: 28px;
  font-weight: 700;
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
}
.ad-card-s { font-size: var(--fs-xs); color: var(--t-dim); }

/* ---------------- 列表行 ---------------- */
.ad-list { display: flex; flex-direction: column; gap: 8px; }

.ad-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}

.ad-row-main { flex: 1 1 auto; min-width: 0; }
.ad-row-t { color: var(--t-bright); font-size: var(--fs-md); }
.ad-row-s { margin-top: 2px; color: var(--t-dim); font-size: var(--fs-sm); }
.ad-row-acts { flex: none; display: flex; gap: 8px; align-items: center; }

.ad-pill {
  padding: 2px 10px;
  font-size: var(--fs-xs);
  color: var(--t-muted);
  background: var(--c-card-hi);
  border-radius: 10px;
}

/* ---------------- 学生表 ---------------- */
.ad-table { display: flex; flex-direction: column; }

/* ★★★ 2026-10-06（老师）：「主平台的后台和雅思平台的后台直接用一套数据，
     不用额外加区域，只需要在现有的内容上加上雅思的就行。」
   ★ 老师随后的修正把列定成 12 个：
       雅思(勾选框) · 学生 · 班级 · 今天练习 · 练过 · 战力 · 已掌握 ·
       我的词库 · 雅思刷题 · 正确 · 正确率 · 雅思预估分
   ★ 列宽策略：
     · 「雅思」勾选框**极小**（36px）—— 老师原话"占的位置太大了，
       只需要非常小的一点，留一点勾选框就行"
     · 学生 / 班级**各给弹性**（名字 1.3fr、班级 1fr）—— 老师原话
       "学生和班级没有分开…会让这一栏的可视化很差"
     · 数字列窄等分（46–60px），挤出来的宽度让给名字与班级
   ★★★ 2026-10-12（老师）：「给教师的后台加一个**修改学生密码**的功能」——
      表尾追加**第 13 列「改密码」**（动作列，固定 72px，见下面 grid 末尾那一段）。
      ★ 为什么新列单独给宽、不从学生/班级那两列里抠：动作列要放一颗中文按钮
        （「改密码」三字 + 内边距），太窄会折成两行，整张表的行高就参差不齐。
        72px = "三字按钮刚好一行"的宽度。
      ★ 这一列**没有任何显示口令的单元格** —— 老师明确要求不能查看学生密码，
        所以这里只有一颗按钮（弹窗里也只输入新口令）。 */
.ad-tr {
  display: grid;
  grid-template-columns: 36px minmax(84px, 1.3fr) minmax(70px, 1fr)
                         repeat(2, minmax(50px, .75fr)) minmax(50px, .8fr)
                         repeat(2, minmax(46px, .7fr)) minmax(50px, .8fr)
                         repeat(2, minmax(44px, .7fr)) minmax(58px, .85fr)
                         72px;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.ad-tr:hover { background: var(--c-card-hi); }

.ad-tr.is-hd {
  cursor: default;
  color: var(--t-muted);
  font-size: var(--fs-xs);
  border-bottom-color: var(--c-line);
}

.ad-tr.is-hd:hover { background: transparent; }

.ad-td { color: var(--t-primary); font-variant-numeric: tabular-nums; }
.ad-td-name { color: var(--t-bright); }
/* ★ 今天一点没练的人写暗一点 —— 老师扫一眼就能看出"谁没动"，
   但不能写成灰色到看不见（那反而是最该被看到的一行）。 */
.ad-td.is-zero { color: var(--c-red-a); }

/* ★ 雅思两列（老师 2026-10-06）：
   · 权限没开 ⇒ 灰字；开了 ⇒ 绿字（一眼区分）
   · 正确率按高低着色：≥80% 绿、60–80% 黄、<60% 红 —— 老师扫一列就看出谁要补
   ★ 变量只用了主题里**真实存在**的那些（`theme.css` 里有 `--c-green-a` /
     `--c-red-a`，**没有** `--c-green` / `--c-yellow`）—— 我第一版写了不存在的
     名字，那样颜色会静默失效（不报错，但看着没效果）。黄色主题里没有，
     就在这一处**局部定义**，不污染全局主题。 */
.pages-admin, .ad-table { --ad-warn: #b8860b; }
.ad-td.is-yes { color: var(--c-green-a); }
.ad-td.is-no  { color: var(--t-dim); }
.ad-td.acc-hi { color: var(--c-green-a); }
.ad-td.acc-mid { color: var(--ad-warn); }
.ad-td.acc-lo { color: var(--c-red-a); }
/* 练过 / 雅思勾选框：居中，像"勾选栏" */
.ad-td.is-mark { text-align: center; }
/* 雅思权限勾选框：**小一点**但留足点击区（老师："只需要非常小的一点"） */
.ad-cb {
  width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--c-green-a);
  vertical-align: middle;
}
.ad-cb:disabled { cursor: progress; opacity: .5; }
/* 班级列：可能会长（"10年级国际部1班"），允许省略但保留 title 可看全 */
.ad-td-cls { color: var(--t-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 雅思预估分：手动设定过的**加粗+高亮**，一眼区分"老师定的"与"自动算的" */
.ad-td-band { font-weight: 600; }
.ad-td-band.is-manual { color: var(--c-green-a); }
.ad-td-band:hover { text-decoration: underline dotted; }

/* ---------------- 单个学生详情 ---------------- */
.ad-detail:empty { display: none; }

.ad-detail {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-line);
}

.ad-detail-t {
  margin-bottom: 10px;
  font-size: var(--fs-lg);
  color: var(--t-bright);
}

.ad-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.ad-col h4 { margin: 0 0 8px; font-size: var(--fs-md); color: var(--t-primary); }

.ad-kv {
  margin: 0 0 5px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--t-muted);
}

/* 按天时长：一根细条 —— 这不是精确图表，只让"哪天练得多"一眼可见 */
.ad-days { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }

.ad-day {
  display: grid;
  grid-template-columns: 88px 1fr 60px;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--t-dim);
}

.ad-day-bar {
  display: block;
  height: 6px;
  background: var(--c-input);
  border-radius: 3px;
  overflow: hidden;
}

.ad-day-bar i { display: block; height: 100%; background: var(--c-accent-dim); }
.ad-day-v { text-align: right; font-variant-numeric: tabular-nums; }

.ad-evs { margin-top: 8px; }
.ad-ev {
  font-size: var(--fs-xs);
  color: var(--t-dim);
  padding: 1px 0;
}

/* 学生词库（只读） */
.ad-wls {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  background: var(--c-deep);
}

.ad-wl {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-line-soft);
}

.ad-wl:last-child { border-bottom: 0; }
.ad-wl-w { flex: none; min-width: 96px; color: var(--t-bright); }
.ad-wl-c { flex: 1 1 auto; min-width: 0; color: var(--t-dim); }

/* ---------------- 窄屏（平板竖屏 / 手机） ---------------- */
@media (max-width: 900px) {
  /* ★ 13 列（含 2026-10-12 加的「改密码」动作列）在窄屏放不下 ⇒
     整表**横向滚动**（比把每列压到看不清更好用）。
     表头与数据行必须同宽，所以滚动放在容器上、列宽保持同一份 grid 定义。 */
  .ad-table { overflow-x: auto; }
  .ad-tr {
    min-width: 800px;
    grid-template-columns: 34px minmax(80px, 1.2fr) minmax(64px, 1fr)
                           repeat(2, minmax(46px, .7fr)) minmax(46px, .75fr)
                           repeat(2, minmax(42px, .65fr)) minmax(46px, .75fr)
                           repeat(2, minmax(40px, .65fr)) minmax(54px, .8fr)
                           68px;
    gap: 5px;
    font-size: var(--fs-xs);
  }
  .ad-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------------- 「改密码」动作列 + 弹窗（老师 2026-10-12） ----------------
   ★ 列本身只要把按钮摆正、别让它折行；按钮沿用平台的 `.btn.btn-ghost.btn-sm`
     （与「昵称申请」那页的「通过 / 驳回」同一颗），不另造按钮外观。 */
.ad-td-act { display: flex; align-items: center; justify-content: flex-end; }

.ad-pwd {
  padding: 3px 8px;
  font-size: var(--fs-xs);
  white-space: nowrap;        /* ★ 「改密码」不折行 —— 折了两行整表行高就乱了 */
}

/* 弹窗里那一行"登录名 · 班级"副标题（不是口令，只是让人确认改的是谁） */
.ad-modal-sub {
  margin: -4px 0 8px;
  font-size: var(--fs-sm);
  color: var(--t-muted);
}

/* 「让学生下次登录自己改」的勾选行：复选框 + 文字横排、整体可点 */
.ad-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--t-primary);
}

.ad-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--c-green-a);
}


/* ★★★ 2026-10-11（老师）：花名册的【保存】条 ——
   「修改学生的雅思权限、修改学生的雅思预估分，都需要保存。
    服务器不需要实时读教师的操作，只认保存的数据。」
   ⇒ 有改动时才出现（.is-off 时整条不显示），并且**吸顶**，
     老师滚到名单底部也能直接点保存。 */
.ad-savebar {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin: 8px 0 4px; padding: 7px 12px;
  background: #f6f7f9; border: 1px solid #e2e6ec; border-radius: 10px;
  position: sticky; top: 0; z-index: 6;
}
/* 有未保存改动时整条变黄，提示该保存了（但不显示任何文字） */
.ad-savebar.is-dirty { background: #fff8e6; border-color: #f0d78a; }
/* 没改动 ⇒ 按钮置灰不可点（老师要求的默认态） */
.ad-savebar .btn:disabled { opacity: .45; cursor: not-allowed; }
/* 有未保存改动的行：左侧一条竖线 + 淡黄底，扫一眼就知道改过哪些 */
.ad-tr.is-dirty { background: #fffdf3; box-shadow: inset 3px 0 0 #e0b64a; }
.ad-td-band.is-dirty { color: #8a5a00; font-weight: 700; }
.ad-td-band.is-dirty::after { content: ' •'; color: #e0b64a; }


/* ★★★ 2026-10-11（老师）：学生详情**插到该学生那一行下方**（原来在最底部）。
   要求「优化显示框的大小」⇒ 面板有最大高度 + 内部滚动；
   三栏在宽屏并排、窄屏自动竖排；词库单独限高滚动。 */
.ad-inline {
  position: relative;
  margin: 2px 0 10px;
  padding: 12px 14px 12px 16px;
  background: var(--bg-soft, #f7f9fc);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-blue, #2f6fed);
  border-radius: 10px;
  max-height: 52vh;          /* ★ 不占满整屏 */
  overflow: auto;
}
.ad-inline .ad-detail-t { margin: 0 0 8px; }
.ad-inline .ad-cols { gap: 14px; }
/* 词库再长也只占一块，不把整个面板撑高 */
.ad-inline .ad-wls { max-height: 180px; overflow: auto; }
.ad-inline-x {
  position: absolute; top: 8px; right: 10px;
  font-size: 12px; padding: 2px 9px; cursor: pointer;
  background: #fff; color: var(--t-muted);
  border: 1px solid var(--c-line); border-radius: 999px;
}
.ad-inline-x:hover { color: var(--t-bright); border-color: var(--c-blue, #2f6fed); }
/* 被展开的那一行给个左标记，滚动时也知道开的是谁 */
.ad-tr.is-open { background: #f2f7ff; box-shadow: inset 3px 0 0 var(--c-blue, #2f6fed); }