/* ═══════════════════════════════════════════════════════════
 * _common_gov.css — 合规治理页·主题底座（#161 新建 / #162 消息页试点 / #163 总览页切换+移动端+暗金预置）
 * 用法：<link rel="stylesheet" href="_common_gov.css"> + <body class="gov-page">（暗金页再追加 gov-dark）
 * 已接入（4 页）：消息中心管理（#162 试点）· 合规治理总览（#163）· 合规护栏拦截日志看板（#165 暗金）
 *        · 治理三页统一暗金（#166 总览+消息切 gov-dark，与看板对齐）。
 * 配色死命令：对外可见治理页 = 浅底国风（米白底 + 墨绿 #145C43 + 鎏金 #B8860B），正文 ≥12px；
 *        内部治理大屏（看板/总览/消息管理）= 暗金（暗底 + 金字），两种主题互斥不混用。
 * ═══════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
 * 【暗色主题三条踩坑清单】—— #167 沉淀，新页切 .gov-dark 前必读
 * ① UA 表单默认色不继承主题：<select>/<input> 的 color 不受父级 color 影响，
 *    暗底下会露出 UA 默认黑字 → 底座已在第 61 行显式补 color:var(--gov-ink)，勿删。
 * ② 底座组件类 specificity 高于页面裸标签/内联：.gov-page .btn 等（2 类）会压过页面内的
 *    .btn（1 类）与内联样式；页面若需改写必须提级到 .gov-page.<自身> 或加 !important。
 *    看板 #165 按钮"隐形"即此坑（底座深字压过页面暗底规则）→ 已提级修复，勿回退。
 * ③ body.gov-page 默认 max-width:1180px + padding，通栏页（看板）必须提级覆盖为
 *    max-width:none;padding:0;padding-bottom:56px，否则左右留白破坏通栏 header。
 * 【启用三步】①body 加 class="gov-page gov-dark" ②删页面内等价内嵌 :root/硬编码色 ③视觉逐区核对。
 * 【变量对照表（浅底国风 → 暗金）】
 *   --gov-bg      #f7f4ec → #141310     --gov-ink       #2b2822 → #E8DCC0
 *   --gov-ink-soft#4a463f → #C8BE9E     --gov-green     #145c43 → #F0B90B
 *   --gov-green-deep #0f4a35 → #FFD257  --gov-gold      #B8860B → #F0B90B
 *   --gov-gold-deep  #96700a → #FFD257  --gov-red       #B23A2E → #FF7B6B
 *   --gov-ok      #1E7A5A → #7FE0A8     --gov-line      #e6e0d5 → #3A3527
 *   --gov-line-soft #eee9df → #2E2A1F   --gov-card      #ffffff → #1C1A14
 *   --gov-muted   #8a857c → #9A9276     --gov-faint     #a5a099 → #6E6852
 *   --gov-note-bg #fdf9ef → #1F1C14     --gov-note-line #eee4cd → #3A3527
 *   --gov-note-ink#6b665d → #B0A787     --gov-th-bg     #f2eee3 → #241F12
 *   --gov-input-line #d8d2c4 → #3A3527
 * ─────────────────────────────────────────────────────────── */

:root {
  --gov-bg: #f7f4ec;          /* 页面米白底 */
  --gov-ink: #2b2822;         /* 正文墨色 */
  --gov-ink-soft: #4a463f;    /* 次级正文（lbl 等） */
  --gov-green: #145c43;       /* 主色·墨绿（标题/主按钮） */
  --gov-green-deep: #0f4a35;  /* 墨绿 hover */
  --gov-gold: #B8860B;        /* 强调·鎏金 */
  --gov-gold-deep: #96700a;   /* 鎏金 hover */
  --gov-red: #B23A2E;         /* 风险红 */
  --gov-ok: #1E7A5A;          /* 成功绿 */
  --gov-line: #e6e0d5;        /* 卡片描边 */
  --gov-line-soft: #eee9df;   /* 表格行线 */
  --gov-card: #ffffff;        /* 卡片底 */
  --gov-muted: #8a857c;       /* 次要文字 */
  --gov-faint: #a5a099;       /* 最弱文字 */
  --gov-note-bg: #fdf9ef;     /* 提示条底 */
  --gov-note-line: #eee4cd;   /* 提示条描边 */
  --gov-note-ink: #6b665d;    /* 提示条文字 */
  --gov-th-bg: #f2eee3;       /* 表头底 */
  --gov-input-line: #d8d2c4;  /* 表单描边 */
}

/* ── 骨架 ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
.gov-page body, body.gov-page { background: var(--gov-bg); color: var(--gov-ink); padding: 24px; max-width: 1180px; margin: 0 auto; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.gov-page h1 { font-size: 26px; color: var(--gov-green); letter-spacing: 2px; margin-bottom: 4px; }
.gov-page .sub { color: var(--gov-muted); font-size: 13px; margin-bottom: 20px; }

/* ── 区块标题 ── */
.gov-page .sec { font-size: 15px; font-weight: 800; color: var(--gov-green); border-left: 4px solid var(--gov-gold); padding-left: 10px; margin: 26px 0 12px; }
.gov-page .sec small { color: var(--gov-muted); font-weight: 400; margin-left: 8px; font-size: 12px; } /* #165 显式 12px（防 small 默认缩放跌破死命令） */

/* ── 提示条 ── */
.gov-page .note { background: var(--gov-note-bg); border: 1px solid var(--gov-note-line); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: var(--gov-note-ink); margin: 10px 0; line-height: 1.7; }

/* ── 表格 ── */
.gov-page table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--gov-card); border: 1px solid var(--gov-line); border-radius: 10px; overflow: hidden; }
.gov-page th, .gov-page td { padding: 9px 10px; border-bottom: 1px solid var(--gov-line-soft); text-align: left; vertical-align: top; } /* #167 行距 8px→9px，三页观感靠近看板 12px 大屏行距 */
.gov-page th { background: var(--gov-th-bg); color: var(--gov-green); font-size: 12px; }
.gov-page tr:last-child td { border-bottom: none; }
.gov-page .gray { color: var(--gov-muted); font-size: 12px; }

/* ── 按钮 ── */
.gov-page .btn { background: var(--gov-green); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.gov-page .btn:hover { background: var(--gov-green-deep); }
.gov-page .btn.warn { background: var(--gov-gold); }
.gov-page .btn.warn:hover { background: var(--gov-gold-deep); }
.gov-page .btn.sm { padding: 5px 10px; font-size: 12px; }

/* ── 表单 ── */
.gov-page select, .gov-page input { padding: 6px 8px; border: 1px solid var(--gov-input-line); border-radius: 6px; font-size: 13px; background: var(--gov-card); color: var(--gov-ink); } /* #166 补 color：防 UA 默认黑字在暗底不可读 */
.gov-page .lbl { font-size: 13px; color: var(--gov-ink-soft); font-weight: 700; }

/* ── KPI 卡 ── */
.gov-page .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
/* #167 三页统一：KPI 卡圆角 12px / 内边距 16px 18px（原 10px/14px 16px，与看板大屏口径归一） */
.gov-page .kpi { background: var(--gov-card); border: 1px solid var(--gov-line); border-radius: 12px; padding: 16px 18px; }
.gov-page .kpi .lb { font-size: 12px; color: var(--gov-muted); margin-bottom: 6px; }
.gov-page .kpi .vl { font-size: 24px; font-weight: 800; color: var(--gov-ink); }
.gov-page .kpi.red .vl { color: var(--gov-red); }
.gov-page .kpi.ok .vl { color: var(--gov-ok); }
.gov-page .kpi.gold .vl { color: var(--gov-gold); }
.gov-page .kpi .sub2 { font-size: 12px; color: var(--gov-faint); margin-top: 4px; }

/* ── 徽章 / 标签 ── */
.gov-page .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.gov-page .badge.sys { background: #e8f3ec; color: var(--gov-ok); }
.gov-page .badge.seed { background: var(--gov-line-soft); color: var(--gov-muted); }
.gov-page .badge.on { background: #e8f3ec; color: var(--gov-ok); }
.gov-page .badge.off { background: #f7ecd9; color: var(--gov-gold); }

/* ── 控制条 / 链接 / 其它 ── */
.gov-page .ctrl { background: var(--gov-card); border: 1px solid var(--gov-line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.gov-page .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.gov-page .links a { display: inline-block; background: var(--gov-card); border: 1px solid var(--gov-line); border-radius: 8px; padding: 8px 14px; color: var(--gov-green); text-decoration: none; font-size: 13px; font-weight: 700; margin-right: 10px; }
.gov-page .links a:hover { border-color: var(--gov-gold); background: var(--gov-note-bg); }
.gov-page .loading { color: var(--gov-faint); font-size: 13px; padding: 8px 0; }

/* ── 移动端适配（#163，断点 760px 与总览 .grid2 一致；字号死命令 ≥12px 不破） ── */
@media (max-width: 760px) {
  body.gov-page { padding: 14px; }
  .gov-page h1 { font-size: 21px; }
  .gov-page .sec { font-size: 14px; margin: 20px 0 10px; }
  .gov-page .kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .gov-page table { font-size: 12px; }
  .gov-page th, .gov-page td { padding: 6px 7px; }
  /* #173 宽表兜底：小屏下表格自身横滚，不撑破文档流（375px 实测） */
  body.gov-page table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .gov-page .btn, .gov-page select, .gov-page input { font-size: 12px; }
  .gov-page footer { margin-top: 20px; }
}

/* ── 暗金大屏变体（#163 预置：看板专项切换时启用） ──
 * 启用三步：①body 加 gov-dark（class="gov-page gov-dark"）②删等价内嵌样式 ③人工逐区视觉核对。
 * 踩坑清单与变量对照表见文件头【暗色主题三条踩坑清单】（#167）。
 * 配色锚点：暗底 #141310 / 卡 #1C1A14 / 金字 #F0B90B / 成功绿 #7FE0A8（与看板 ⑤f 同款）。 */
.gov-page.gov-dark {
  --gov-bg: #141310; --gov-ink: #E8DCC0; --gov-ink-soft: #C8BE9E;
  --gov-green: #F0B90B; --gov-green-deep: #FFD257;
  --gov-gold: #F0B90B; --gov-gold-deep: #FFD257;
  --gov-red: #FF7B6B; --gov-ok: #7FE0A8;
  --gov-line: #3A3527; --gov-line-soft: #2E2A1F;
  --gov-card: #1C1A14; --gov-muted: #9A9276; --gov-faint: #6E6852;
  --gov-note-bg: #1F1C14; --gov-note-line: #3A3527; --gov-note-ink: #B0A787;
  --gov-th-bg: #241F12; --gov-input-line: #3A3527;
}
.gov-page.gov-dark .btn { background: var(--gov-card); color: var(--gov-gold); border: 1px solid var(--gov-input-line); } /* #166 统一暗金按钮 = 暗卡底金字描边（与看板一致；原金底深字弃用） */
.gov-page.gov-dark .btn:hover { background: #221E15; }
/* #166 暗金下徽章/标签浅底变暗色光底（防刺眼白块） */
.gov-page.gov-dark .badge.sys, .gov-page.gov-dark .badge.on { background: rgba(127,224,168,.15); color: var(--gov-ok); }
.gov-page.gov-dark .badge.seed, .gov-page.gov-dark .badge.off { background: rgba(240,185,11,.15); color: var(--gov-gold-deep); }

/* ═══════════════════════════════════════════════════════════
 * 【兼容别名层】—— #173 新增：让存量看板/大屏页「零改页内 CSS」直接吃底座主题
 * 背景：31 个存量看板页各自内嵌 :root，变量名五花八门（两大家族）：
 *    A 系·暗金蜂群（--bg/--panel/--card/--gold/--txt/--sub/--line/--red/--grn）
 *    B 系·浅底国风（--paper/--paper2~4/--ink/--ink3/--mute/--dai/--qing/--zhe）
 * 做法：在 body.gov-page 作用域内，用「同名变量重新赋值」把两家族别名指向主变量。
 *   页面内部 CSS 引用 var(--bg) 时 → 自动取 --gov-bg 的值 → 主题随底座切换。
 * 启用：页面 <body class="gov-page">（暗金页加 gov-dark）+ <link _common_gov.css>，页内 :root 保留亦可（被本层同作用域覆盖）。
 * 注意：本层写在 body 作用域，页面 :root 是 html 级 → body 内的 var(--bg) 解析优先取 body 声明，故别名生效。
 * ═══════════════════════════════════════════════════════════ */
body.gov-page {
  /* A 系·暗金蜂群别名 */
  --bg: var(--gov-bg);
  --panel: var(--gov-card);
  --panel2: var(--gov-note-bg);
  --card: var(--gov-card);
  --gold: var(--gov-gold);
  --gold2: var(--gov-gold-deep);
  --gold3: var(--gov-muted);
  --txt: var(--gov-ink);
  --ink: var(--gov-ink);
  --sub: var(--gov-muted);
  --dim: var(--gov-faint);
  --line: var(--gov-line);
  --line2: var(--gov-line-soft);
  --red: var(--gov-red);
  --grn: var(--gov-ok);
  --amber: var(--gov-gold);
  --warn: var(--gov-gold);
  --up: var(--gov-red);
  --down: var(--gov-ok);
  /* B 系·浅底国风别名 */
  --paper: var(--gov-bg);
  --paper2: var(--gov-note-bg);
  --paper3: var(--gov-line-soft);
  --paper4: var(--gov-line);
  --paper-2: var(--gov-note-bg);
  --ink3: var(--gov-ink-soft);
  --mute: var(--gov-muted);
  --dai: var(--gov-green);
  --qing: var(--gov-green);
  --zhe: var(--gov-gold);
  --cinnabar: var(--gov-red);
  --green-deep: var(--gov-green-deep);
  --green-mid: var(--gov-green);
  --green-light: var(--gov-card);
  --org: var(--gov-gold);
  --blu: var(--gov-green);
}
/* 兼容层下的通栏大屏：解除底座 1180px 限宽与 24px 内边距（看板/大屏需通栏） */
body.gov-page.gov-wide { max-width: none; margin: 0; padding: 0; padding-bottom: 56px; }
body.gov-page.gov-wide > header, body.gov-page.gov-wide > .wrap, body.gov-page.gov-wide > .container { padding-left: 16px; padding-right: 16px; }