/* 管理控制台增量样式。
   基础变量、按钮、输入框、.field/.form-error/.hint/.empty/.pane/.topbar
   全部复用 styles.css —— 这里只写员工端没有的东西。 */

.admin-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------- 两栏主体 ---------- */

/* 🔴 两栏，不是三栏。左栏是员工导航（固定宽），右栏是内容区（吃掉剩下的）。
   分类靠**顶部标签切换**，不靠往右再加一列。

   上一版这里是 `280px | 1fr | 360px` 三列：把「员工 / 授权 / 系统」三个分类
   铺成了三栏并行。后果是授权详情只剩中间那 1fr，而它的表单有十几个字段，
   读一遍要横向来回扫；系统那一栏又是只读信息，占着 360px 常年不动。
   分类本来就该是「同一块地方换内容」，不是「把内容摊开成三块」。 */
.console {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* 左栏：员工导航。背景与右栏分开，让「这是导航、那是内容」一眼可辨。 */
.rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--space-4);
  background: var(--surface-2);
  border-right: 1px solid var(--line-2);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

/* 右栏：内容区。同一时刻只显示一个 pane。 */
.content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* 🔴 这两条**不放在媒体查询里**。上一版 `.pane-active` 只在 ≤860px 生效，
   于是宽屏下三个 pane 全是 display:flex 一起显示，点顶部标签没有任何反应 ——
   标签在宽屏下是个装饰品。分类切换在任何宽度下都该真的切。 */
.content > .pane { display: none; flex: 1; }

.content > .pane.pane-active { display: flex; }

/* styles.css 给 .pane-detail 上了 surface-2，因为在员工面它是右侧副栏。
   管理面里它是主工作区，而副栏（现在是导航）已经用了 surface-2 ——
   两栏同色就看不出边界，所以主工作区回到主底色。 */
.admin-view .pane-detail { background: var(--surface); }

/* 顶栏里的登录者。此前这个 span 没有任何样式，夹在标签和「退出登录」之间
   是一块裸文本。 */
.topbar-who {
  color: var(--text-3);
  font-size: var(--font-sm);
  white-space: nowrap;
}

/* 窄屏专用的列表开关，宽屏下左栏一直在眼前，按钮没有意义。 */
.rail-toggle { display: none; flex: none; }

/* ---------- 模型与 API ---------- */

/* 来源与生效方式。逐项标出来是这一页存在的理由：「生效到底在哪儿生效」有
   **三种**不同答案（立刻/重启/带外），笼统说一句「已保存」等于没说。 */
.cfg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-3);
  font-size: var(--font-xs);
  color: var(--text-3);
}

.cfg-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  white-space: nowrap;
}

.cfg-src {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

/* 三种生效方式的颜色：立刻生效绿、需重启用琥珀、带外写入用中性灰。
   带外那一种**不是「差」而是「设计如此」**，所以不用红色 —— 红色会让人
   以为密钥那条链路坏了，然后去修一个没有坏的东西。 */
.effect-immediate {
  background: var(--success-100);
  border-color: var(--success-200);
  color: var(--success-500);
}

.effect-restart {
  background: var(--gold-100);
  border-color: var(--gold-200);
  color: var(--gold-700);
}

.effect-out_of_band {
  background: var(--surface-3);
  border-color: var(--line-1);
  color: var(--text-2);
}

/* 测一测的三态。skip 用中性色：它是「这个部署没接这个东西」，
   不是故障；亮红灯会让人去修一个根本没配的对象。 */
.diag-list { margin: 0; padding: 0; list-style: none; }

.diag-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-2);
  font-size: var(--font-sm);
}

.diag-item:last-child { border-bottom: 0; }

.diag-label { font-weight: 500; color: var(--text-1); }

.diag-detail { flex: 1 1 200px; min-width: 0; color: var(--text-3); font-size: var(--font-xs); }

.diag-ms {
  margin-left: auto;
  color: var(--text-4);
  font-size: var(--font-xs);
  font-variant-numeric: tabular-nums;
}

.diag-ok { background: var(--success-100); border-color: var(--success-200); color: var(--success-500); }
.diag-fail { background: var(--danger-100); border-color: var(--danger-200); color: var(--danger-500); }
.diag-skip { background: var(--surface-3); border-color: var(--line-1); color: var(--text-2); }

/* 登录页的布局、卡片、动画与「员工工作台在这里」那行提示，全部复用 styles.css
   （.login-shell / .login-pane / .login-scene-wrap / .login-note）。
   管理面的登录页与员工面长得一样是有意的：同一个人同一套视觉，不该因为
   入口不同就要重新认一遍。 */

/* ---------- 员工列表 ---------- */

.people-tools { margin: 0 0 var(--space-3); }

.people-tools input { width: 100%; }

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

.person {
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  text-align: left;
  font: inherit;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .05s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.person:hover {
  background: var(--surface-2);
  border-color: var(--line-1);
}

.person:active { transform: translateY(1px); }

.person:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}

/* 原来只换底色 + 灰边框，和员工端的红左条选中语言不一致 */
.person[aria-current="true"] {
  background: var(--surface-2);
  border-color: var(--line-1);
  border-left-color: var(--brand-600);
  box-shadow: var(--shadow-sm);
}

.person[aria-current="true"] .person-name {
  color: var(--brand-700);
  font-weight: 600;
}

.person-name {
  display: block;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.4;
}

/* 徽章和账号原来挤在同一行，读成「生效中lisi · seat-xx」 */
.person-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-1);
  font-size: var(--font-xs);
  color: var(--text-3);
}

.person-meta { min-width: 0; word-break: break-all; }

/* ---------- 状态徽标 ---------- */

/* 基元 .badge 已移到 styles.css（带填色），这里只做语义映射 */
.badge-active { background: var(--success-100); border-color: var(--success-200); color: var(--success-500); }

.badge-off { background: var(--danger-100); border-color: var(--danger-200); color: var(--danger-500); }

/* ---------- 授权详情 ---------- */

/* 原为 13px = 正文字号，5 个分节平铺在一条长流里分不出层级 */
.sub-h {
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-2);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-1);
}

/* dt 列原为 max-content，三个 dl 算出 26/64.39/65px 三个值，纵向不对齐 */
.kv {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--font-sm);
}

.kv dt { color: var(--text-3); font-weight: 400; }

.kv dd { margin: 0; word-break: break-word; color: var(--text-1); }

/* 授权面内容长达 1600px，靠卡片把 5 个区分开 */
.card {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card > .sub-h:first-child { margin-top: 0; }

/* 只读事实用等宽，和可编辑控件在视觉上区分开 */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-xs);
}

.readonly-note {
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs);
  color: var(--text-3);
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius);
  line-height: 1.5;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.grant-line { margin: 0 0 var(--space-1); font-size: var(--font-sm); }

/* ---------- 审计 ---------- */

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

.audit-item {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  transition: background-color .15s ease;
}

.audit-item:nth-child(odd) { background: var(--surface-2); }

.audit-item:hover { background: var(--surface-3); }

.audit-item:last-child { border-bottom: 0; }

.audit-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.audit-action {
  font-weight: 600;
  word-break: break-all;
  color: var(--text-1);
}

/* 原来 head 12px 而副信息 hint 13px，副压主 */
.audit-item .hint { margin: var(--space-1) 0 0; font-size: var(--font-xs); }

.audit-when {
  margin-left: auto;
  color: var(--text-3);
  font-size: var(--font-xs);
  font-variant-numeric: tabular-nums;
}

.audit-ok { color: var(--success-500); }

.audit-denied { color: var(--danger-500); }

/* 审计筛选条 */
.audit-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-3);
}

.audit-tools .select { min-width: 0; flex: 1 1 140px; width: auto; }

.audit-tools .btn { flex: none; }

/* ---------- 可改字段表单 ---------- */

/* 自身即卡片：.assign-actions 靠负边距贴到卡片下沿，两边内边距必须同源 */
.assign-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.assign-form > .sub-h:first-child { margin-top: 0; }

/* 表单里的输入框跟 .field 的默认宽度一致，不再单独设宽，
   免得两处宽度定义日后各改一半。 */
.assign-form .select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-1);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.assign-form .select:hover { border-color: var(--text-4); }

.assign-form .select:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}

/* 原来 static，埋在 1600px 长表单中段，改完得滚回去找 */
.assign-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-1) calc(-1 * var(--space-5)) calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  z-index: 1;
}

.assign-form .btn { flex: none; height: 40px; font-weight: 500; }

.assign-form .btn-primary {
  height: 44px;
  padding: 0 var(--space-5);
  font-weight: 600;
}

/* ---------- 席位管理 ---------- */

.seat-actions {
  margin: var(--space-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.seat-actions .btn {
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--font-base);
  font-weight: 500;
}

/* ---------- 小屏：一栏，列表与内容各占一屏 ---------- */

/* 断点与 styles.css 的 859px 对齐。此前这里是 860px，于是宽度正好 860px 时
   左边按单栏排、右边顶栏还按宽屏排（标题不隐藏、内边距也不缩），
   一条 1px 的缝里两套布局各生效一半。 */
@media (max-width: 859px) {
  .console { grid-template-columns: 1fr; }

  .rail-toggle { display: inline-flex; }

  /* 顶栏在窄屏要塞下：logo、列表开关、三个分类、退出登录。登录者的名字
     不是这一屏要看的东西，让位给分类（与 styles.css 窄屏隐藏 .topbar-title、
     .avatar-name 同一个取舍）。 */
  .topbar-who { display: none; }

  .rail {
    max-height: 42vh;
    padding: var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
  }

  /* 选完人就把列表收起来，把整屏让给详情。
     不收的话详情永远只在屏幕下半截，改一个字段得先滚过整个员工列表。 */
  .console.rail-collapsed .rail { display: none; }

  .card { padding: var(--space-3) var(--space-4); }

  .assign-form { padding: var(--space-3) var(--space-4); }

  .assign-actions {
    margin: var(--space-1) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));
    padding: var(--space-2) var(--space-4);
  }
}