/* 和事管理信息平台 —— 门户专属样式 */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
}

/* ---------- 顶栏 ---------- */
.portal-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  height: 68px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}
.portal-brand { order: 1; display: flex; align-items: center; gap: 12px; }
.portal-logo { width: 40px; height: 40px; object-fit: contain; }
.portal-brand-txt { min-width: 0; }
.portal-brand h1 { font-size: 19px; margin: 0; letter-spacing: .5px; }
.portal-brand p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

.portal-tabs { order: 2; display: flex; gap: 6px; margin-left: 12px; }
.portal-tabs .ptab {
  height: 34px;
  padding: 0 16px;
  border: none;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.portal-tabs .ptab.active { background: #eef2ff; color: var(--brand-dark); font-weight: 600; }
.portal-user { order: 4; margin-left: 0; display: flex; align-items: center; gap: 10px; }

/* 资源版本标记（顶栏首行右端，紧邻用户区左边）。
   它是「诊断用」的：值等于本次真正下载执行的静态资源版本，用来判断手机有没有吃到最新发布。
   故意做成最轻的样式 —— 灰字、等宽字体、**没有任何外框**，不跟右边的角色/用户名/退出抢注意力。
   平台上有个视觉约定：外方框=按钮，外圆角框=用户名；它两者都不是，所以一个框都不给。
   margin-left:auto 把它自己顶到本行右端，同时把用户区推到顶栏最右。
   :empty 兜底：万一 platform.js 没执行成功，它是空的就整块不显示，不会留空壳或 undefined，
   此时用户区自己用 auto 撑到最右，不会塌在导航按钮旁边。 */
.ver-chip {
  order: 3;
  margin-left: auto;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2px;
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
}
.ver-chip:empty { display: none; }
.ver-chip:empty ~ .portal-user { margin-left: auto; }

.portal-main { max-width: 1180px; margin: 0 auto; padding: 24px; }

.portal-msg {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
}
.portal-msg.ok { background: #ecfdf5; color: var(--ok); border-color: #a7f3d0; }
.portal-msg.err { background: #fef2f2; color: var(--danger); border-color: #fecaca; }

.sec-head { margin-bottom: 16px; }
.sec-head h2 { margin: 0 0 4px; font-size: 17px; }
.sec-head p { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- 应用宫格 ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.app-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.app-card:not(.disabled):hover { transform: translateY(-2px); border-color: #b9c8ff; box-shadow: 0 8px 24px rgba(31, 94, 255, .14); }
.app-card.disabled { opacity: .62; cursor: not-allowed; }
.app-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-icon { width: 35.2px; height: 35.2px; object-fit: contain; flex: none; }
.app-icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: var(--brand-dark);
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
}
.app-meta { min-width: 0; }
.app-meta h3 { margin: 0 0 2px; font-size: 15px; line-height: 1.35; }
.app-meta p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.app-foot { display: flex; align-items: center; justify-content: space-between; }
.app-enter { font-size: 13px; color: var(--brand); font-weight: 600; }
.app-role { font-size: 12px; line-height: 20px; color: var(--muted); }
.app-role-none { color: #9ca3af; }

/* 注：原 .table-wrap / .grid 表格样式已于 2026-10-02 随「应用管理」改卡片式一并移除
   —— 全站最后一张表格消失，样式零引用故不留。平台内所有列表一律卡片式。 */
.me-tag { font-size: 11px; background: #eef2ff; color: var(--brand-dark); padding: 1px 6px; border-radius: 4px; }
.muted { color: var(--muted); }

.select, .cell-input {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  min-width: 110px;
}
/* .wide 已随表格移除（零引用）。卡片里的输入框由 .field-row .cell-input 接管：
   必须显式 min-width:0，否则基础规则的 min-width:110px 会顶破 grid 的 1fr 列。 */
.cell-input.narrow { width: 72px; min-width: 72px; }
.select:disabled, .cell-input:disabled { background: #f9fafb; color: var(--muted); }

.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }

/* ---------- 新增子系统 ---------- */
.add-app { margin-top: 20px; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.add-app h3 { margin: 0 0 12px; font-size: 15px; }
.add-app-form { display: flex; gap: 10px; flex-wrap: wrap; }
.add-app-form input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  flex: 1 1 180px;
  min-width: 150px;
}

/* ---------- 用户管理子页签（已开通用户 / 开通申请） ---------- */
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.subtabs.hidden { display: none; }
.subtab {
  height: 32px; padding: 0 14px; border: none; background: #f3f4f6;
  border-radius: 8px; font-size: 13px; color: var(--muted); cursor: pointer;
}
.subtab.active { background: #eef2ff; color: var(--brand-dark); font-weight: 600; }
.subtab .badge { margin-left: 4px; color: var(--danger); font-weight: 600; }
.subpane.hidden { display: none; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 20px; white-space: nowrap; }
.tag-pending { background: #fff7ed; color: #c2410c; }
.tag-ok { background: #ecfdf5; color: var(--ok); }
.tag-no { background: #f3f4f6; color: var(--muted); }

.mini-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.mini-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.mini-btn.primary:disabled { opacity: .6; cursor: default; }

/* ⚠️ 原先这里有 .op-guide / .op-cmd / .apply-open 三套样式（手工复制验证码时代），
   开通台改卡片式 + 一键开通后已**全部无人引用**（grep platform.js index.html 为 0），
   于2026-10-02 一并删除，不留成两套死规则。 */

@media (max-width: 860px) {
  .portal-top { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  /* 首行瘦身：手机上去掉副标题「统一账号 · 统一权限 · 子系统集中纳管」。
     不瘦身的话，首行光是 «logo + 标题 + 副标题» 就有 ~290px，
     加版本标记必然放不下，它会掉到下一行去 —— 而我们要它待在标题行右端。
     桌面端副标题照常显示。 */
  .portal-brand p { display: none; }
  /* 手机端顺序：① 标题行（标题 + 版本标记，标记靠右） ② 导航 ③ 用户区。
     导航用 flex-basis:100% 强制独占一行 —— 否则在 470~860 这种「够宽」的视口下，
     它会挤进标题行、把版本标记顶到中间去，就谈不上「标题行右侧」了。 */
  .portal-tabs { order: 3; margin-left: 0; flex: 1 1 100%; }
  .ver-chip { order: 2; margin-left: auto; font-size: 10.5px; }
  /* 用户区在手机端独占一行（flex-basis:100%，与导航同样手法），
     但**内容仍靠左** —— 只有【退出】被单独推到这一行的最右端。
     2026-10-02 用户指着截图要求「【退出】按钮移至右侧」，
     追问落位方式后他选的是「只把『退出』推到最右，角色与用户名留在左边」。
     ⚠️ 两步缺一不可：
       ① .portal-user 必须 flex-basis:100% 独占整行 —— 否则它只有内容宽（195px），
          里面的 margin-left:auto 无处可 auto，按钮仍停在用户名右边；
          （也不能只靠 margin-left:auto 把它自己推右：470~860 这种「导航还挤得下」的视口下
            它会与导航同行，那个 auto 只会把它停在导航右边，而不是行右端。）
       ② 退出按钮上 margin-left:auto —— flex 容器里有剩余空间时把「它及它右边的元素」推到末尾，
          行内它本就是最后一个元素，于是正好贴到行右端。
     桌面端（>860px）不受影响：那儿用户区只有内容宽、且整体已贴在顶栏右端。 */
  .portal-user { order: 4; margin-left: 0; flex: 1 1 100%; }
  #btnPortalSignOut { margin-left: auto; }
}

/* ---------- 开通申请：卡片式（一个申请人一张卡） ----------
   2026-10-02 由表格改来。手机端原表格把「张阿姨」挤成两行、右边按钮被裁掉
   （截图实证），卡片式一屏一张、信息一列、按钮聚在底部，互不挤压。 */
.card-list { display: flex; flex-direction: column; gap: 10px; }

.apply-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
/* 待审核的卡片左侧一道品牌色，与「已开通/已驳回」一眼区分（状态文字仍在右上） */
.apply-card[data-status="pending"] { border-left: 3px solid var(--brand); }

.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-nick { font-size: 16px; line-height: 24px; word-break: break-word; }
.card-head .tag { margin-left: auto; flex: 0 0 auto; }

/* 字段行：左标签右值。窄屏也保持两列 —— 手机上「姓名/手机」本来就很短，
   竖排三行反而把卡片撑得过长、翻起来更费劲。 */
.card-metas { margin: 0; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px 10px; }
.card-meta { display: contents; }
.card-meta dt { font-size: 13px; line-height: 20px; color: var(--muted); }
.card-meta dd {
  margin: 0; font-size: 14px; line-height: 20px;
  word-break: break-word; min-width: 0;
}

.card-ops { display: flex; gap: 8px; margin-top: 12px; }
.card-ops.hidden { display: none; }
.card-ops .mini-btn { flex: 1 1 0; }   /* 两个按钮等宽，撑满整行、间距一致 */

.card-open { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.card-open.hidden { display: none; }
.open-panel { display: flex; flex-direction: column; gap: 8px; }
.open-mail { font-size: 13px; line-height: 1.6; }
.open-mail strong { color: var(--text); }
.open-mail code { word-break: break-all; }
/* 密码框 + 一键开通同行；窄屏时输入框占满、按钮落到下一行，两者仍都不被裁 */
.open-line { display: flex; gap: 8px; flex-wrap: wrap; }
.open-line .cell-input { flex: 1 1 160px; min-width: 0; }
.open-line .mini-btn { flex: 1 1 120px; }
.open-hint { font-size: 12.5px; line-height: 1.6; }

.card-empty {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 40px 20px; text-align: center; color: var(--muted); box-shadow: var(--shadow);
}

/* 手机端：卡片内边距略收，字段标签列略窄；正文不缩放（用户口径：只放大不缩小） */
@media (max-width: 768px) {
  .apply-card { padding: 13px 14px; }
  .card-nick { font-size: 16px; }
  .card-metas { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 8px; }
  .card-meta dd { font-size: 15px; }        /* 正文 14 → 15，不缩小 */
  .card-meta dt { line-height: 22px; }
  .card-ops .mini-btn, .open-line .mini-btn { flex: 1 1 100%; }
}

/* ---------- 已开通用户：卡片式（一个用户一张卡） ----------
   2026-10-02 由表格改来。原表格是「平台角色 + 每个子系统一列」，手机上必然横向溢出
   （截图实证：下拉框被挤到屏幕右缘外）。这里把每个子系统竖排成一行：
   标签在左、当前值居中、下拉在右，宽度固定不随子系统数量增长。 */
.user-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.user-card .card-head { margin-bottom: 2px; }
.user-card .card-head .me-tag { margin-left: auto; flex: 0 0 auto; }
.mail-line {
  margin: 0 0 10px;
  font-size: 13px; line-height: 20px; color: var(--muted);
  word-break: break-all;
}

/* 角色行：标签在左、下拉在右，宽度固定不随子系统数量增长。
   当前值由下拉框的选中项直接表达 —— 不再额外挂文字徽标（与下拉内容重复）。 */
.role-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #f2f3f7;
}
.role-row:first-of-type { border-top: none; }
.role-label, .role-sub {
  font-size: 14px; line-height: 20px; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.role-label { font-weight: 600; }
/* 子系统名比「平台角色」弱一级，避免两个同级粗体打架 */
.role-sub { color: var(--muted); }
.role-row .select { width: 116px; }

@media (max-width: 768px) {
  .user-card { padding: 13px 14px; }
  .role-row { grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
  .role-label, .role-sub { font-size: 15px; }
  .role-row .select { width: 104px; }
  .mail-line { font-size: 13px; }
}

/* ---------- 应用管理：卡片式（一个子系统一张卡） ----------
   2026-10-02 由表格改来。表格 6 列在手机上右侧整片被裁（截图实证：入口路径看不全、
   排序/启用/保存/删除四列根本不在屏内）。卡片式把可编辑项竖排，操作按钮聚在底部。 */
.app-card-admin {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
/* app_key 是不可改的标识，用等宽字体的 chip 呈现，区别于可编辑的名称 */
.app-key {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; line-height: 20px;
  color: var(--muted); background: #f2f3f7;
  padding: 1px 7px; border-radius: 5px;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-card-admin .card-head .tag { margin-left: auto; flex: 0 0 auto; }

/* 字段行：左标签右控件。标签列固定 68px，控件占满剩余宽度且不撑破卡片 */
.field-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #f2f3f7;
}
.field-row:first-of-type { border-top: none; }
.field-label { font-size: 14px; line-height: 20px; color: var(--muted); }
.field-row .cell-input { width: 100%; min-width: 0; box-sizing: border-box; }
/* 排序只占一小格，不跟着撑满 */
.field-row .cell-input.narrow { width: 88px; }

@media (max-width: 768px) {
  .app-card-admin { padding: 13px 14px; }
  .field-row { grid-template-columns: 60px minmax(0, 1fr); gap: 8px; }
  .field-label { font-size: 15px; }
}