/* ==========================================================================
   账号与权限（2026-09-16 上云改造 · 阶段 1）
   三个用途共用本文件，各自前缀区分，避免与 style.css 的既有类名打架：
     .lg-*   登录页
     .ac-*   账号与权限管理页
     .nb-auth*  顶栏用户区（由 authbar.js 注入到每个页面）
   配色一律走 style.css 的 :root 变量，保证与全站一致。
   ========================================================================== */

/* ---------------------------------------------------------------- 顶栏用户区 */

.nb-auth {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.nb-auth-user {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: #dce6fb; max-width: 260px;
}
.nb-auth-user b { color: #fff; font-weight: 600; }
.nb-auth-user .nb-auth-role {
  font-size: 11px; color: #9db4e8;
  border-left: 1px solid rgba(255, 255, 255, .25);
  padding-left: 6px; margin-left: 2px;
}
.nb-auth-btn {
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #dce6fb; padding: 4px 10px; border-radius: 6px;
  cursor: pointer; font-size: 12px; transition: all .15s;
}
.nb-auth-btn:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }

/* 浅底顶栏（cad / boxes 页的 .topbar）—— 用深色文字 */
.topbar .nb-auth-user,
.pc-topbar .nb-auth-user {
  background: #eef2fb; color: var(--text-sub); max-width: none;
}
.topbar .nb-auth-user b, .pc-topbar .nb-auth-user b { color: var(--text-main); }
.topbar .nb-auth-user .nb-auth-role,
.pc-topbar .nb-auth-user .nb-auth-role { color: var(--text-aux); border-left-color: #cdd6e6; }
.topbar .nb-auth-btn, .pc-topbar .nb-auth-btn {
  border-color: var(--border-input); background: #fff; color: var(--text-sub);
}
.topbar .nb-auth-btn:hover, .pc-topbar .nb-auth-btn:hover {
  border-color: var(--primary); color: var(--primary); background: #f2f7ff;
}

/* 完全没有顶栏的页面 → 右上角浮动（正常情况不会用到，兜底） */
.nb-auth-float {
  position: fixed; top: 10px; right: 14px; z-index: 300;
  background: rgba(36, 52, 77, .94); padding: 5px 8px; border-radius: 18px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
}

.nb-perm-tip {
  display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid #f0d9b5;
}

/* ---------------------------------------------------------------- 登录页 */

body.pg-login {
  min-height: 100vh; margin: 0;
  background: linear-gradient(160deg, #24344D 0%, #33507e 42%, #EDEFF2 42.1%, #E6EAF1 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lg-wrap { width: 100%; max-width: 900px; display: flex; gap: 0;
           border-radius: 14px; overflow: hidden;
           box-shadow: 0 18px 48px rgba(20, 32, 56, .28); }
.lg-brand {
  flex: 0 0 320px; background: var(--titlebar); color: #fff;
  padding: 40px 32px; display: flex; flex-direction: column; gap: 14px;
}
.lg-brand .lg-logo {
  width: 46px; height: 46px; border-radius: 12px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.lg-brand h1 { font-size: 20px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; }
.lg-brand .lg-sub { color: #8ea0c0; font-size: 12px; line-height: 2; }
.lg-brand .lg-sep { flex: 1; }
.lg-brand .lg-ver { color: #6f84a8; font-size: 11px; }

.lg-card {
  flex: 1; background: var(--card-bg); padding: 40px 40px 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.lg-card h2 { font-size: 17px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.lg-card .lg-hint { font-size: 12px; color: var(--text-aux); margin-bottom: 22px; }
.lg-field { margin-bottom: 16px; }
.lg-field label {
  display: block; font-size: 12px; color: var(--text-sub);
  margin-bottom: 6px; font-weight: 600;
}
.lg-field input {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border-input); border-radius: 8px;
  background: #fff; color: var(--text-main);
  box-sizing: border-box; transition: border-color .15s;
}
.lg-field input:focus { outline: none; border-color: var(--primary);
                        box-shadow: 0 0 0 3px rgba(46, 107, 230, .12); }
.lg-field input::placeholder { color: var(--text-placeholder); }
.lg-field .lg-pw-hint { font-size: 11px; color: var(--text-aux); margin-top: 5px; }
.lg-submit {
  width: 100%; padding: 11px; margin-top: 6px;
  background: var(--primary); color: #fff; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.lg-submit:hover { background: var(--primary-dark); }
.lg-submit:disabled { opacity: .6; cursor: default; }
.lg-err {
  margin-top: 14px; padding: 9px 12px; border-radius: 6px;
  background: #fdecec; border: 1px solid #f5c2c2; color: #b3251f;
  font-size: 12px; display: none;
}
.lg-err.show { display: block; }
.lg-msg {
  margin-top: 14px; padding: 9px 12px; border-radius: 6px;
  background: #eaf5ec; border: 1px solid #bfe0c6; color: #2c6b38;
  font-size: 12px; display: none;
}
.lg-msg.show { display: block; }
.lg-foot { margin-top: 22px; font-size: 11px; color: var(--text-placeholder); line-height: 1.9; }

/* 免密账号：密码框整块收起来 */
body.lg-nopwd .lg-field.lg-pwd { display: none; }
.lg-noacct {
  margin-top: 10px; font-size: 11px; color: var(--text-aux);
  background: var(--auto-bg); border: 1px solid #d9e3f5; border-radius: 6px;
  padding: 7px 10px; line-height: 1.7;
}

/* ---------------------------------------------------------------- 账号与权限页 */

body.pg-accounts { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
body.pg-accounts .workspace {
  flex: 1 1 auto; min-height: 0; width: 100%; margin: 14px auto;
  padding: 0 20px; align-items: stretch; overflow: hidden;
}
body.pg-accounts .sidebar { position: static; max-height: none; min-height: 0; }
body.pg-accounts .main { overflow-y: auto; min-height: 0; }

.ac-side-head {
  padding: 12px 14px 10px; border-bottom: 1px solid var(--border-card);
  display: flex; align-items: center; gap: 8px;
}
.ac-side-head input {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border-input);
  border-radius: 6px; font-size: 12px; box-sizing: border-box;
}
.ac-side-head input:focus { outline: none; border-color: var(--primary); }

.ac-user {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 14px; cursor: pointer; border-left: 3px solid transparent;
  box-sizing: border-box; border-bottom: 1px solid #f0f2f6;
}
.ac-user:hover { background: #f2f5fb; }
.ac-user.on { background: #e8effc; border-left-color: var(--primary); }
.ac-user .ac-u-name { font-size: 13px; font-weight: 600; color: var(--text-main); }
.ac-user .ac-u-meta { font-size: 11px; color: var(--text-aux); margin-top: 2px; }
.ac-user .ac-u-tag {
  float: right; font-size: 10px; padding: 1px 7px; border-radius: 9px;
  background: #eef2fb; color: var(--text-sub); margin-left: 6px;
}
.ac-user .ac-u-tag.super { background: #fdecec; color: #b3251f; }
.ac-user .ac-u-tag.off { background: #f0f0f0; color: #999; }
.ac-user .ac-u-tag.pwd { background: #fff7ec; color: var(--warn-text); }

.ac-card {
  background: var(--card-bg); border: 1px solid var(--border-card);
  border-radius: 8px; margin-bottom: 14px; overflow: hidden;
}
.ac-card-head {
  padding: 10px 16px; border-bottom: 1px solid var(--border-card);
  background: var(--toolbar-bg); font-size: 13px; font-weight: 600;
  color: var(--text-main); display: flex; align-items: center; gap: 8px;
}
.ac-card-head .ac-bar {
  width: 3px; height: 14px; background: var(--primary); border-radius: 2px;
}
.ac-card-body { padding: 16px; }

.ac-form { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.ac-form .ac-f { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.ac-form .ac-f label { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.ac-form .ac-f input, .ac-form .ac-f select {
  padding: 7px 10px; border: 1px solid var(--border-input); border-radius: 6px;
  font-size: 12px; background: #fff; box-sizing: border-box; min-width: 160px;
}
.ac-form .ac-f input:focus, .ac-form .ac-f select:focus {
  outline: none; border-color: var(--primary);
}
.ac-form .ac-f .ac-f-note { font-size: 11px; color: var(--text-aux); }

/* 权限矩阵：15 行 × 3 级 */
.ac-matrix { width: 100%; border-collapse: collapse; }
.ac-matrix th, .ac-matrix td {
  border-bottom: 1px solid #eef0f5; padding: 7px 10px; font-size: 12px;
  text-align: left;
}
.ac-matrix thead th {
  background: var(--toolbar-bg); color: var(--text-sub); font-weight: 600;
  position: sticky; top: 0; z-index: 2;
}
.ac-matrix td.ac-lv { text-align: center; width: 96px; }
.ac-matrix tbody tr:hover { background: #f7f9fd; }
.ac-matrix .ac-mod-name { color: var(--text-main); }
.ac-matrix input[type=radio] { cursor: pointer; width: 15px; height: 15px; }
.ac-lv-cell { display: flex; justify-content: center; }
.ac-tpl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
              font-size: 12px; color: var(--text-aux); flex-wrap: wrap; }
.ac-tpl-row button {
  border: 1px solid var(--border-input); background: #fff; padding: 4px 12px;
  border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-sub);
}
.ac-tpl-row button:hover { border-color: var(--primary); color: var(--primary); background: #f2f7ff; }

.ac-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.ac-actions button {
  border: 1px solid var(--border-input); background: #fff; padding: 6px 14px;
  border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-sub);
}
.ac-actions button:hover { border-color: var(--primary); color: var(--primary); background: #f2f7ff; }
.ac-actions button.ac-primary {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.ac-actions button.ac-primary:hover { background: var(--primary-dark); }
.ac-actions button.ac-danger { color: #b3251f; border-color: #eabfbf; }
.ac-actions button.ac-danger:hover { background: #fdecec; color: #8f1c17; }
.ac-actions button:disabled { opacity: .45; cursor: not-allowed; }

.ac-empty { text-align: center; color: var(--text-placeholder); font-size: 13px; padding: 48px 0; }
.ac-note {
  font-size: 11px; color: var(--text-aux); line-height: 1.9;
  background: var(--auto-bg); border: 1px solid #d9e3f5; border-radius: 6px;
  padding: 8px 12px; margin-top: 12px;
}
.ac-banner {
  background: var(--warn-bg); border: 1px solid #f0d9b5; color: var(--warn-text);
  border-radius: 6px; padding: 8px 12px; font-size: 12px; margin-bottom: 12px;
}

/* 强制改密弹窗 */
.ac-mask {
  position: fixed; inset: 0; background: rgba(24, 34, 52, .5);
  display: none; align-items: center; justify-content: center; z-index: 500;
}
.ac-mask.show { display: flex; }
.ac-modal {
  background: #fff; border-radius: 10px; width: 380px; max-width: 92vw;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3); overflow: hidden;
}
.ac-modal-head {
  padding: 13px 18px; background: var(--titlebar); color: #fff;
  font-size: 14px; font-weight: 600;
}
.ac-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ac-modal-body .ac-f { display: flex; flex-direction: column; gap: 5px; }
.ac-modal-body .ac-f label { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.ac-modal-body .ac-f input {
  padding: 8px 10px; border: 1px solid var(--border-input); border-radius: 6px;
  font-size: 13px; box-sizing: border-box;
}
.ac-modal-foot {
  padding: 0 18px 18px; display: flex; gap: 8px; justify-content: flex-end;
}
.ac-modal-foot button {
  border: 1px solid var(--border-input); background: #fff; padding: 7px 16px;
  border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-sub);
}
.ac-modal-foot button.ac-primary {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.ac-modal .ac-err {
  padding: 8px 10px; border-radius: 6px; background: #fdecec;
  border: 1px solid #f5c2c2; color: #b3251f; font-size: 12px; display: none;
}
.ac-modal .ac-err.show { display: block; }