/* ==========================================================================
   用户管理层。

   骨架复用 .ov 的顶栏（overlay.css），这里只定义滚动区、分组名册与
   `⋯` 菜单。单独一份文件，不动 overlay.css。

   两条跟着既有语言的约定：
     · 状态标签**描边不填色** —— 填色小标签留给风险等级
       （见 cards.css 的 .lstag、changelog.css 的 .lg-tag）。
       账号状态借过来会被读成风险。
     · 只用 tokens.css 里真实存在的令牌。写不存在的 var() CSS 不报错，
       只是静默退化成默认值，表现和「样式表没生效」一模一样，查起来很贵。

   上一版这一页难看的实际原因是 index.html 从未 <link> 这份文件 ——
   样式表一直在仓库里，页面却跑的是浏览器默认样式。test/admin.html §4
   第一条断言（.ov-admin 覆盖了栅格）就是守这件事的。

   为什么用行而不是 <table>：真表格在窄屏横向滚动，而管理员多半开着
   侧栏在笔记本上用。四列栅格能在窄屏把后两列收掉。
   ========================================================================== */

/* .ov 默认三行栅格（顶栏 / 总览 / 正文），这一层只有两行。
   照 changelog.css:8 的 .ov-log 做法。 */
.ov-admin { grid-template-rows: auto 1fr; }

.ad-scroll {
  overflow-y: auto;
  background: var(--paper);
}
.ad-inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-10);
}

/* ------------------------------------------------------------ 顶部 */

.ad-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.ad-count {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  letter-spacing: .04em;
  color: var(--ink);
}
.ad-count b { font-weight: 600; }
.ad-count span {          /* 「· 管理员 2」这半句 */
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--ink3);
  margin-left: var(--sp-2);
}

/* 主操作。实心黄铜，全页只有这一个 —— 第二个实心按钮会让人
   分不清该点哪个。 */
.ad-new {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  background: var(--brass);
  border: 1px solid var(--brass);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.ad-new:hover { background: var(--brass-l); border-color: var(--brass-l); }
.ad-new[aria-expanded="true"] {   /* 表单开着时降成描边，表示「再点收起」 */
  background: transparent;
  color: var(--brass);
}

/* 待处理提醒。黄铜竖线 + 文字，不用色块 —— 色块在这一屏会比名册
   本身还抢眼，而它只是一句提示。没事时整块不渲染（见 admin-data.js）。 */
.ad-pending {
  margin-top: var(--sp-4);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  background: transparent;
  border-left: 2px solid var(--brass);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink2);
}
.ad-pending b { color: var(--ink); font-weight: 600; }

/* 操作结果条。成功 3.6 秒消失，失败留着（见 admin.js 的 msg()）。 */
.ad-msg {
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--low);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--low);
}
.ad-msg.is-bad { border-color: var(--high); color: var(--high); }

/* ------------------------------------------------------------ 表单 */

/* 就地展开，不是弹窗。弹窗会盖住名册，而建号时常要照着名册确认
   「这个人是不是已经有号了」。 */
.ad-formwrap {
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* 容器一直在 DOM 里（表单要就地插进去），空的时候不能留一个空描边框 */
.ad-formwrap:empty { display: none; padding: 0; border: none; }
.ad-formwrap h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.ad-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.ad-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.ad-field.is-wide { grid-column: 1 / -1; }
.ad-flabel {
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--ink2);
}
.ad-form input {
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--ink);
}
.ad-form input:focus {
  outline: none;
  border-color: var(--brass);
}
/* 初始密码是明文 + 等宽：这串要念给对方或粘到聊天里，遮起来只会
   让管理员先复制到别处再看。 */
.ad-form input[name="password"] {
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.ad-hint {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink3);
}

/* 「随机生成一个」。黄铜下划线文字而不是第三个按钮 —— 三个并排的
   实心按钮会让人分不清哪个是主操作。 */
.ad-gen {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--brass);
  cursor: pointer;
}
.ad-gen:hover { border-bottom-color: var(--brass); }

.ad-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-1);
}
.ad-submit {
  padding: var(--sp-2) var(--sp-5);
  background: var(--brass);
  border: 1px solid var(--brass);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--paper);
  cursor: pointer;
}
.ad-submit:disabled { opacity: .5; cursor: default; }
.ad-cancel {
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  font-size: var(--fs-sm);
  color: var(--ink3);
  cursor: pointer;
}
.ad-cancel:hover { color: var(--ink2); }

/* ------------------------------------------------------------ 分组名册 */

.ad-group { margin-top: var(--sp-8); }

/* 延伸横线把每组框成一个明确的段落。这是 C 版胜过 A/B 版的地方 ——
   药丸标签让组间过散，竖线串组又太弱。

   横线是 `::after` 的 `flex: 1`，所以**弹性容器必须是 `.ad-ghead`，
   不能是 `.ad-gname`**。放到只包着组名的那个 span 上的话，::after
   只能在文字宽度里伸展，横线宽度接近 0 —— 看起来像是忘了画，而且
   不报任何错。这一版的整个版式就是靠这条线立起来的。 */
.ad-ghead {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.ad-ghead::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line-s);
}
.ad-gname {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink2);
}
.ad-gcount {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--ink3);
}
/* 顶部「8 个 · 管理员 2」里那个间隔点。单独一条是因为它要比文字更淡，
   否则会被读成句读。 */
.ad-sep { color: var(--line); }

.ad-list { list-style: none; margin: 0; padding: 0; }

/* 四列：身份 | 状态 | 最后登录 | ⋯
   后三列定宽，让状态与时间对齐成两条纵向轴线 —— 扫的时候眼睛
   不用左右找。 */
.ad-row {
  display: grid;
  grid-template-columns: 1fr 72px 88px 28px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-1);
  border-bottom: 1px solid var(--line-s);
}
.ad-row:last-child { border-bottom: none; }
.ad-row:hover { background: var(--surface-2); }
.ad-row.is-off { opacity: .55; }

.ad-who {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}
/* 姓名为主、工号次之：名册是拿来找人的，先认脸再认号。 */
.ad-name {
  font-size: var(--fs-body);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ad-id {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--ink3);
}
.ad-me {
  flex-shrink: 0;
  font-size: var(--fs-label);
  color: var(--brass);
}

/* 正常账号这一格是**完全空白**。上一版放了个 `·` 占位，那个点没有
   意义还会被读成某种状态。 */
.ad-state { min-height: 1px; }

.ad-tag {
  display: inline-block;
  padding: 1px 7px;
  background: transparent;         /* 描边不填色，见文件头 */
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--ink2);
}
.ad-tag.is-admin { border-color: var(--brass); color: var(--brass); }
.ad-tag.is-warn  { border-color: var(--mid);   color: var(--mid); }
.ad-tag.is-off   { border-color: var(--line);  color: var(--ink3); }

.ad-seen {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--ink3);
  white-space: nowrap;
}

/* ------------------------------------------------------------ ⋯ 菜单 */

.ad-more { position: relative; text-align: right; }

.ad-dots {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--ink3);
  cursor: pointer;
}
.ad-dots:hover { background: var(--surface); color: var(--ink); }
.ad-dots[aria-expanded="true"] { background: var(--surface); color: var(--brass); }

.ad-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-1));
  z-index: 5;
  min-width: 150px;
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  text-align: left;
}
/* 靠近视口底部时向上弹，不被裁掉。 */
.ad-menu.is-up { top: auto; bottom: calc(100% + var(--sp-1)); }

.ad-mi {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--fs-sm);
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
}
.ad-mi:hover { background: var(--surface-2); }
.ad-mi.is-danger { color: var(--high); }
.ad-mi:disabled { color: var(--ink3); cursor: default; }
.ad-mi:disabled:hover { background: none; }

/* ------------------------------------------------------------ 页脚说明 */

.ad-foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-s);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--ink3);
}

/* ------------------------------------------------------------ 窄屏 */

/* 侧栏开着的笔记本大约就是这个宽度。先收「最后登录」——
   三列里它最不影响判断。 */
@media (max-width: 700px) {
  .ad-inner { padding: var(--sp-6) var(--sp-4) var(--sp-8); }
  .ad-row { grid-template-columns: 1fr 72px 28px; }
  .ad-seen { display: none; }
  .ad-form { grid-template-columns: 1fr; }
}