/* ==========================================================================
   ICS-合规智能体 · 项目型模块公共外壳样式（project-shell.css）
   ----------------------------------------------------------------------------
   来源：自 recon.html 内联 <style> **逐字抽取**（2026-10-18 审计项目前端改造 · 迭代一 §3.2）
   用途：recon.html（往来资金对账）+ audit_project.html（审计项目）共用，
        后续绩效 / 合同等"项目型模块"亦可直接引用。

   抽取原则（不可违反）：
     1. **逐字搬运**，不改任何声明值 —— 抽取前后对账页计算样式必须逐属性一致；
     2. 追加的新类集中在本文件末尾「追加区」，不改动既有类语义；
     3. 字号只两档（标题 16px / 正文 14px）；颜色只用 Token；圆角 4px；控件 32px；
     4. 页面内不写色值，一律走 variables.css。

   引入顺序（各页面固定）：
     variables.css → style.css → buttons.css → project-shell.css → 页面内联 <style>
     （顺序保证：页面内联规则仍可覆盖本文件，与抽取前"内联块内后者覆盖前者"的行为一致）
   ========================================================================== */

/* ===== 页面容器：横向铺满，最小可视宽度 1200px 由 variables.css 兜底 ===== */
.container { width:100%; max-width:none; margin:0; padding:24px 32px 48px; }

/* ===== 页头 ===== */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.page-head h1 { font-size:16px; font-weight:400; color:var(--color-text-main); display:flex; align-items:center; gap:8px; }
.ph-left { position:relative; padding-left:16px; }
.ph-left::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:4px;
  border-radius:4px; background:var(--color-primary); }
.ph-sub { font-size:14px; color:var(--color-text-aux); margin-top:4px; }
.head-actions { display:flex; gap:8px; align-items:center; }

/* ===== 统计条（每格：图标 + 数值 + 说明）===== */
.stats-bar { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:16px; }
.stats-bar.cols-3 { grid-template-columns:repeat(3,1fr); }
.stats-bar.cols-4 { grid-template-columns:repeat(4,1fr); }
.stats-bar.cols-6 { grid-template-columns:repeat(6,1fr); }
.stats-bar.cols-7 { grid-template-columns:repeat(7,1fr); }
.stat-card { background:var(--color-bg-page); border:1px solid var(--color-border); border-radius:4px;
  padding:16px; display:flex; align-items:center; gap:16px; }
.stat-icon { width:32px; height:32px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:var(--color-bg-disabled); color:var(--color-primary); }
.stat-num { font-size:14px; font-weight:400; color:var(--color-text-main); line-height:1.2; font-variant-numeric:tabular-nums; }
.stat-label { font-size:14px; color:var(--color-text-aux); }

/* ===== 筛选栏 ===== */
.filter-bar { display:flex; gap:16px; margin-bottom:16px; align-items:center; flex-wrap:wrap;
  background:var(--color-bg-page); padding:16px; border-radius:4px; border:1px solid var(--color-border); }
.filter-bar .grow { flex:1; min-width:0; }
.filter-bar input, .filter-bar select { height:32px; padding:0 8px; border:1px solid var(--color-border);
  border-radius:4px; font-size:14px; background:var(--color-bg-page); color:var(--color-text-main);
  font-family:var(--font-family); }
.filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:var(--color-primary); }
.filter-bar input::placeholder { color:var(--color-text-aux); }
.filter-bar .kw { width:280px; }
.stats-tip { margin:0 0 16px; }
/* 行内小控件（下拉/输入）：与 32px 控件高度、4px 圆角、14px 字号统一 */
.mini-select, .mini-input { height:32px; padding:0 8px; border:1px solid var(--color-border);
  border-radius:4px; font-size:14px; color:var(--color-text-main); background:var(--color-bg-page);
  font-family:var(--font-family); }
.mini-select:focus, .mini-input:focus { outline:none; border-color:var(--color-primary); }
.mini-input::placeholder { color:var(--color-text-aux); }
.mini-input.w120 { width:120px; }
.mini-input.w200 { width:200px; }
.mini-input.w240 { width:240px; }
.mini-select.w120 { width:120px; }
.mini-select.w160 { width:160px; }
.mini-select.w200 { width:200px; }

/* ===== 表格：fixed 布局 + 主列省略号 ===== */
.table-wrap { width:100%; background:var(--color-bg-page); border:1px solid var(--color-border);
  border-radius:4px; overflow:hidden; margin-bottom:16px; }
.table-wrap table { width:100%; table-layout:fixed; border-collapse:collapse; }
.table-wrap th { background:var(--color-bg-table-header); padding:8px; text-align:left; font-size:14px;
  font-weight:400; color:var(--color-text-main); border-bottom:1px solid var(--color-border); white-space:nowrap; }
.table-wrap td { padding:8px; font-size:14px; color:var(--color-text-main); line-height:1.4;
  border-bottom:1px solid var(--color-border-light); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-wrap tbody tr:hover td { background:var(--color-bg-hover); }
.table-wrap tr:last-child td { border-bottom:none; }
.table-wrap .num { text-align:right; font-variant-numeric:tabular-nums; }
.table-wrap .wrap-td { white-space:normal; word-break:break-all; }
.table-wrap .act { text-align:right; }
.table-wrap .act .btn { margin-left:8px; }
.link-a { color:var(--color-primary); cursor:pointer; }
.link-a:hover { color:var(--color-primary-hover); text-decoration:underline; }

/* ===== 分页 ===== */
.pagination { display:flex; gap:8px; align-items:center; justify-content:flex-end; font-size:14px; color:var(--color-text-aux); }
.pagination .pg-total { margin-right:auto; font-size:14px; color:var(--color-text-aux); }

/* ===== 状态徽标（颜色 + 文字双标识）===== */
.badge { display:inline-block; padding:0 8px; border-radius:4px; font-size:14px; font-weight:400; line-height:1.5; }
.bd-draft { background:var(--color-bg-disabled); color:var(--color-text-sec); }
.bd-running { background:var(--primary-l); color:var(--color-primary); }
.bd-done { background:var(--success-l); color:var(--color-success); }
.bd-locked { background:var(--danger-l); color:var(--color-danger); }
.bd-ok { background:var(--success-l); color:var(--color-success); }
.bd-warn { background:var(--warn-l); color:var(--color-warning); }
.bd-bad { background:var(--danger-l); color:var(--color-danger); }
.bd-gray { background:var(--color-bg-disabled); color:var(--color-text-sec); }
.bd-info { background:var(--primary-l); color:var(--color-primary); }

/* ===== 工作台：步骤条 ===== */
.steps { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.step { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid var(--color-border); border-radius:4px; background:var(--color-bg-page);
  font-size:14px; color:var(--color-text-aux); }
.step .no { width:16px; height:16px; border-radius:4px; display:inline-flex; align-items:center;
  justify-content:center; font-size:14px; background:var(--color-bg-disabled); color:var(--color-text-sec); flex:none; }
.step.done { border-color:var(--color-success); color:var(--color-success); }
.step.done .no { background:var(--success-l); color:var(--color-success); }
.step.cur { border-color:var(--color-primary); color:var(--color-primary); }
.step.cur .no { background:var(--color-primary); color:var(--color-text-white); }
.step.later { color:var(--color-text-disabled); }
.step.clickable { cursor:pointer; }
.step.clickable:hover { border-color:var(--color-primary); }
.step:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }

/* ===== 工作台：Tab ===== */
.tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--color-border);
  flex-wrap:nowrap; overflow-x:auto; }
.tab { height:32px; padding:0 16px; border:1px solid transparent; border-bottom:none; background:transparent;
  border-radius:4px 4px 0 0; font-size:14px; color:var(--color-text-main); cursor:pointer;
  font-family:var(--font-family); white-space:nowrap; display:inline-flex; align-items:center; gap:4px;
  text-decoration:none; }
.tab:hover { color:var(--color-primary); text-decoration:none; }
.tab:focus-visible { outline:none; border-color:var(--color-primary); }
.tab.active { color:var(--color-primary); background:var(--color-bg-page);
  border-color:var(--color-border); border-bottom:1px solid var(--color-bg-page);
  margin-bottom:-1px; font-weight:400; }
.tab .later-tag { color:var(--color-text-disabled); }
/* 复选 / 单选控件字号对齐 14px（UA 默认 13.33px 会破坏「字号只两档」口径） */
input[type="checkbox"], input[type="radio"] { font-size:14px; }

/* ===== 分区卡片 ===== */
.sec { border:1px solid var(--color-border); border-radius:4px; background:var(--color-bg-page); margin-bottom:16px; }
.sec-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px;
  border-bottom:1px solid var(--color-border-light); flex-wrap:wrap; }
.sec-title { font-size:16px; font-weight:400; color:var(--color-text-main); display:flex; align-items:center; gap:8px; }
.sec-tip { font-size:14px; color:var(--color-text-aux); }
.sec-acts { display:flex; gap:8px; align-items:center; }
.sec-body { padding:16px; }
.sec-body.tight { padding:0; }
.sec-body.tight .table-wrap { border:none; border-radius:0; margin-bottom:0; }

/* 提示条 */
.hint { font-size:14px; color:var(--color-text-aux); display:flex; align-items:flex-start; gap:8px; line-height:1.6; }
.hint-warn { font-size:14px; color:var(--color-warning); background:var(--warn-l); border:1px solid var(--color-warning);
  border-radius:4px; padding:8px 16px; display:flex; align-items:flex-start; gap:8px; line-height:1.6; }
.hint-danger { font-size:14px; color:var(--color-danger); background:var(--danger-l); border:1px solid var(--color-danger);
  border-radius:4px; padding:8px 16px; display:flex; align-items:flex-start; gap:8px; line-height:1.6; }
.hint-lock { font-size:14px; color:var(--color-danger); background:var(--danger-l); border:1px solid var(--color-danger);
  border-radius:4px; padding:8px 16px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.text-warn { color:var(--color-warning); }
.text-danger { color:var(--color-danger); }
.text-ok { color:var(--color-success); }
.text-aux { color:var(--color-text-aux); }
.text-sec { color:var(--color-text-sec); }

/* ===== 空态 / 加载态 ===== */
.empty-state { text-align:center; padding:32px 16px; color:var(--color-text-aux); }
.empty-state .es-title { font-size:14px; font-weight:400; color:var(--color-text-main); margin-bottom:8px; }
.empty-state .es-sub { font-size:14px; color:var(--color-text-aux); line-height:1.6; }
.loading-state { text-align:center; padding:32px 16px; font-size:14px; color:var(--color-text-aux); }
.err-state { text-align:center; padding:32px 16px; font-size:14px; color:var(--color-danger); }

/* ===== 上传区（点击 / 拖拽，选择即传）===== */
.dropzone { border:1px dashed var(--color-border); border-radius:4px; padding:24px 16px; text-align:center;
  cursor:pointer; background:var(--color-bg-page); }
.dropzone:hover, .dropzone.drag { border-color:var(--color-primary); background:var(--primary-l); }
.dropzone.dz-disabled { cursor:not-allowed; border-color:var(--color-border); background:var(--color-bg-disabled); color:var(--color-text-disabled); }
.dropzone.dz-disabled .dz-main { color:var(--color-text-disabled); }
.dz-main { font-size:14px; font-weight:400; color:var(--color-text-main); display:flex; align-items:center;
  justify-content:center; gap:8px; }
.dz-sub { font-size:14px; color:var(--color-text-aux); margin-top:8px; }

/* ===== 字段映射 ===== */
.map-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.map-grid .full { grid-column:1 / -1; }
.field label { display:block; font-size:14px; font-weight:400; color:var(--color-text-main); margin-bottom:8px; }
.field label .req { color:var(--color-danger); margin-left:4px; }
.field input, .field select, .field textarea { width:100%; height:32px; padding:0 8px; border:1px solid var(--color-border);
  border-radius:4px; font-size:14px; color:var(--color-text-main); background:var(--color-bg-page);
  font-family:var(--font-family); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--color-primary); }
.field input::placeholder, .field textarea::placeholder { color:var(--color-text-aux); }
.field textarea { height:auto; min-height:64px; padding:8px; resize:vertical; line-height:1.5; }
.field .fh { font-size:14px; color:var(--color-text-aux); margin-top:4px; }
/* 复选 / 单选不套用输入框的满宽与 32px 高 */
.field input[type="checkbox"], .field input[type="radio"] {
  width:auto; height:auto; padding:0; border:none; background:transparent; flex:none; }
.field label.chk-row { display:flex; align-items:center; gap:8px; font-weight:400; margin:0; cursor:pointer; }
.radio-row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.radio-row label { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:400;
  color:var(--color-text-main); cursor:pointer; margin:0; white-space:nowrap; }
.radio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.radio-grid label { display:flex; align-items:flex-start; gap:8px; font-size:14px; font-weight:400;
  color:var(--color-text-main); cursor:pointer; margin:0; line-height:1.5; }
.radio-grid input[type="radio"] { margin-top:4px; flex:none; }
.chk-row { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--color-text-main); cursor:pointer; }

/* ===== 批量操作条（④ 资金性质）===== */
.batch-bar { display:flex; gap:16px; align-items:center; padding:8px 16px;
  border-bottom:1px solid var(--color-border-light); background:var(--color-bg-table-header); flex-wrap:wrap; }
.batch-bar .bb-tip { font-size:14px; color:var(--color-text-aux); }
/* ===== 键值网格（⑤ 合同详情 / ⑥ 试算摘要）===== */
.kv-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 16px; }
.kv-item { font-size:14px; color:var(--color-text-main); border-bottom:1px solid var(--color-border-light);
  padding:8px 0; min-width:0; }
.kv-item .k { color:var(--color-text-aux); margin-right:8px; }
.kv-item .v { font-variant-numeric:tabular-nums; }
.kv-item.full { grid-column:1 / -1; }
/* 表格内复选列宽 */
.sel-col { width:40px; }

/* ===== 弹窗 ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:var(--z-dropdown); display:none;
  align-items:flex-start; justify-content:center; overflow-y:auto; padding:32px 16px; }
.modal-overlay.show { display:flex; }
.modal { background:var(--color-bg-page); border-radius:4px; box-shadow:var(--shadow-dropdown); width:100%; max-width:720px; }
.modal.wide { max-width:960px; }
.modal.narrow { max-width:480px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px;
  border-bottom:1px solid var(--color-border-light); }
.modal-head h2 { font-size:16px; font-weight:400; color:var(--color-text-main); display:flex; align-items:center; gap:8px; }
.modal-close { background:none; border:none; color:var(--color-text-aux); cursor:pointer; padding:0;
  display:inline-flex; align-items:center; line-height:1; }
.modal-close:hover { color:var(--color-danger); }
.modal-body { padding:16px; max-height:72vh; overflow-y:auto; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:16px; border-top:1px solid var(--color-border-light); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-grid .full { grid-column:1 / -1; }
.form-grid .third { grid-column:span 1; }
.dyn-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:8px; align-items:end; }
.dyn-row .rm { color:var(--color-danger); cursor:pointer; font-size:14px; display:flex; align-items:center;
  justify-content:center; height:32px; }

/* ===== 右上角提示 ===== */
.toast-container { position:fixed; top:80px; right:24px; z-index:var(--z-modal); display:flex;
  flex-direction:column; gap:8px; }
.toast-msg { padding:8px 16px; border-radius:4px; font-size:14px; font-weight:400; box-shadow:var(--shadow-dropdown); }
.toast-msg.success { background:var(--color-success); color:var(--color-text-white); }
.toast-msg.error { background:var(--color-danger); color:var(--color-text-white); }
.toast-msg.info { background:var(--color-primary); color:var(--color-text-white); }

/* ===== 图标位：16px 线性图标 ===== */
.ic { display:inline-flex; align-items:center; vertical-align:-0.125em; line-height:1; }
.ic svg { width:16px; height:16px; vertical-align:middle; }
.btn .ic svg { width:16px; height:16px; }

/* ==========================================================================
   追加区（2026-10-18 审计项目改造新增）
   —— 只做**追加**，不覆盖上面任何既有类的声明，对账页零影响。
   ========================================================================== */

/* ----- 状态标签（§8.1 色卡；risk_audit.html 原为页面内联，此处上提为公共）----- */
.tag { display:inline-block; padding:0 8px; border-radius:4px; font-size:14px; line-height:1.5;
  background:var(--color-bg-hover); color:var(--color-text-main); }
.tag.b { background:var(--primary-l); color:var(--color-primary); }
.tag.g { background:var(--success-l); color:var(--color-success); }
.tag.y { background:var(--warn-l); color:var(--color-warning); }
.tag.r { background:var(--danger-l); color:var(--color-danger); }

/* ----- 富空态（§8.2：图标 + 主文案 + 副文案 + 主操作）----- */
.empty { text-align:center; padding:32px 16px; }
.empty-icon { color:var(--color-text-disabled); margin-bottom:8px; }
.empty-main { font-size:14px; font-weight:400; color:var(--color-text-main); margin-bottom:8px; }
.empty-sub { font-size:14px; color:var(--color-text-aux); line-height:1.6; }
.empty-act { margin-top:16px; }
.lnk { color:var(--color-primary); font-size:14px; cursor:pointer; }
.lnk:hover { color:var(--color-primary-hover); text-decoration:underline; }

/* ----- 信息类提示条（§7.1 蓝底：队列运行中）----- */
.hint-info { font-size:14px; color:var(--color-primary); background:var(--primary-l); border:1px solid var(--color-primary);
  border-radius:4px; padding:8px 16px; display:flex; align-items:center; gap:8px; line-height:1.6; }

/* ----- 侧滑抽屉（§7.7-D 预警详情，右侧 520px）----- */
.drawer-mask { position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:1050; }
.drawer-mask.show { display:block; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:520px; max-width:100%;
  background:var(--color-bg-page); border-left:1px solid var(--color-border); box-shadow:var(--shadow-dropdown);
  z-index:1060; display:none; flex-direction:column; overflow:hidden; }
.drawer.show { display:flex; }
.drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:16px;
  border-bottom:1px solid var(--color-border-light); }
.drawer-title { font-size:16px; font-weight:400; color:var(--color-text-main); line-height:1.5; }
.drawer-sub { font-size:14px; color:var(--color-text-aux); margin-top:4px; line-height:1.6; }
.drawer-body { flex:1; overflow-y:auto; padding:16px; }
.drawer-sec { margin-bottom:16px; }
.drawer-sec-t { font-size:14px; font-weight:400; color:var(--color-text-main); margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; }
.drawer-foot { display:flex; justify-content:flex-end; gap:8px; padding:16px; border-top:1px solid var(--color-border-light); }

/* ----- 证据链方块（§7.7-D ②制度条款 / 执行佐证 / 规则命中）----- */
.ev-block { border:1px solid var(--color-border); border-radius:4px; padding:8px 12px; margin-bottom:8px;
  background:var(--color-bg-page); }
.ev-block .ev-h { display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:14px; color:var(--color-text-main); margin-bottom:4px; }
.ev-block .ev-q { font-size:14px; color:var(--color-text-sec); line-height:1.6; }
.ev-block .ev-m { font-size:14px; color:var(--color-text-aux); margin-top:4px; }

/* ----- 预警卡片（§7.7-C 非表格，卡片列表）----- */
.issue-list { display:flex; flex-direction:column; gap:8px; }
.issue-card { border:1px solid var(--color-border); border-radius:4px; background:var(--color-bg-page);
  padding:12px 16px; cursor:pointer; }
.issue-card:hover { border-color:var(--color-primary); background:var(--color-bg-hover); }
.issue-card.sel { border-color:var(--color-primary); background:var(--primary-l); }
.issue-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.issue-title { font-size:14px; font-weight:400; color:var(--color-text-main); }
.issue-meta { font-size:14px; color:var(--color-text-aux); line-height:1.6; }
.issue-desc { font-size:14px; color:var(--color-text-sec); line-height:1.6; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ----- 迷你进度条（§6.3 第 6 列）----- */
.prog { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.prog-bar { width:56px; height:8px; flex:none; border-radius:4px; background:var(--color-bg-disabled); overflow:hidden; }
.prog-bar > i { display:block; height:100%; border-radius:4px; background:var(--color-primary); }
.prog-bar.ok > i { background:var(--color-success); }
.prog-bar.warn > i { background:var(--color-warning); }
.prog-txt { font-size:14px; color:var(--color-text-aux); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ----- 通用小工具（只增不改）----- */
.muted { color:var(--color-text-aux); font-size:14px; }
.nowrap { white-space:nowrap; }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.right { text-align:right; }
.hide { display:none !important; }
.kv2 { display:grid; grid-template-columns:96px 1fr 96px 1fr; gap:8px 16px; align-items:baseline; }
.kv2 .k { font-size:14px; color:var(--color-text-aux); text-align:right; }
.kv2 .v { font-size:14px; color:var(--color-text-main); word-break:break-all; }
.actions-left { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spacer { flex:1; min-width:0; }

/* 窄屏仅做内部栅格降级（不做移动端适配，最小可视宽度 1200px） */
@media (max-width: 1360px) {
  .stats-bar.cols-6 { grid-template-columns:repeat(3,1fr); }
  .stats-bar.cols-7 { grid-template-columns:repeat(4,1fr); }
}
