/* =====================================================================
   流程类 Demo · 基础样式  (_demo-base.css)
   来源:KYC审核-demo (workbench / demo1 投资人维度 / demo2 案件维度 / 需求清单) 提炼
   用法:新 demo 在 <head> 里 <link rel="stylesheet" href="_demo-base.css">
        只需写 HTML 结构 + 数据,样式 80% 现成,按需在页面 <style> 覆盖即可
===================================================================== */

:root{
  /* —— 品牌主色 —— */
  --p:#2E75B6;   /* Primary      主蓝:主操作 / 选中 / 进行中 */
  --pl:#D5E8F0;  /* Primary Lt   悬停 / 选中底 / 浅蓝块 */
  /* —— 状态色(语义固定,勿乱用)—— */
  --g:#0f7b65;   /* Green  成功 / 通过 / 完成 / 进度 */
  --gl:#e8f5f2;  /* Green Lt */
  --w:#E6A23C;   /* Warn   警告 / 待办 / 中等风险 / 待确认 */
  --wl:#fff5df;  /* Warn Lt */
  --d:#F56C6C;   /* Danger 危险 / 驳回 / 缺失 / 高风险 / 红点 */
  --dl:#fff0ef;  /* Danger Lt */
  /* —— 中性 —— */
  --bg:#F0F4F8;  /* 页面背景 冷灰蓝 */
  --t:#303133;   /* Text 正文 */
  --m:#909399;   /* Muted 次要文字 */
  --b:#DCDFE6;   /* Border 边框 */
  --s:#F5F7FA;   /* Surface 块底 / 表头底 */
  --n:#001529;   /* Navy 深色侧栏 */
}

/* —— reset —— */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--t);font-size:14px;line-height:1.5}
button,input,select,textarea{font:inherit}button{cursor:pointer}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}

/* =====================================================================
   App Shell · 应用骨架
   .app  ┬ .sidebar (220 深色)         ┐
         └ .main ┬ .topbar (48 白)      │ flex, height:100vh
                ├ .dim-banner (维度横幅)│
                └ .page / .detail-page  ┘
===================================================================== */
.app{display:flex;height:100vh}

/* —— 左侧深色导航 —— */
.sidebar{width:220px;background:var(--n);color:#fff;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.side-logo{padding:16px;font-size:15px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px}
.side-logo .sq{width:30px;height:30px;background:#fff;color:var(--n);border-radius:5px;display:grid;place-items:center;font-size:14px;font-weight:800}
.side-menu{flex:1;padding:8px 0}
.menu-group-title{padding:8px 20px;font-size:11px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1px}
.menu-item{padding:10px 20px;display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.7);cursor:pointer;transition:all .15s;border-left:3px solid transparent}
.menu-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.menu-item.active{color:#fff;background:var(--p);border-left-color:#fff}
.menu-item .mi-badge{margin-left:auto;background:var(--d);color:#fff;font-size:10px;padding:1px 7px;border-radius:10px;min-width:20px;text-align:center}
.side-dim{padding:12px 16px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:rgba(255,255,255,.45)}
.side-dim b{color:#FFD666}

/* —— 主区 —— */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{background:#fff;border-bottom:1px solid var(--b);padding:0 20px;height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.topbar select{padding:4px 8px;border:1px solid var(--b);border-radius:4px;font-size:12px}
.dim-switch{display:flex;border:1px solid var(--b);border-radius:4px;overflow:hidden}
.dim-switch a{padding:5px 12px;font-size:12px;color:var(--m);background:#fff}
.dim-switch a.on{background:var(--p);color:#fff;font-weight:600}
.dim-banner{background:linear-gradient(90deg,#EBF3FB,#F5F7FA);border-bottom:1px solid var(--b);padding:8px 20px;font-size:12px;color:#1B5A8C;display:flex;align-items:center;gap:8px;flex-shrink:0}
.dim-banner b{color:#001529}
.dim-banner .tag{background:var(--p);color:#fff;font-size:10px;padding:1px 7px;border-radius:3px;font-weight:600}

/* —— 页面容器 —— */
.page{flex:1;overflow-y:auto;padding:16px 20px;display:none}
.page.active{display:block}
.page-header{margin-bottom:14px;display:flex;justify-content:space-between;align-items:flex-start}
.page-header h2{font-size:16px;font-weight:600}
.page-header p{font-size:12px;color:var(--m);margin-top:2px}
.filter-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:flex-end}
.filter-row input,.filter-row select{padding:6px 10px;border:1px solid var(--b);border-radius:4px;font-size:12px;background:#fff}
.filter-row input{min-width:200px}

/* =====================================================================
   数据表 .tbl  (sticky 末列操作列吸右;长表吸顶见规范文档)
===================================================================== */
.tbl-wrap{overflow-x:auto;border:1px solid var(--b);border-radius:6px;background:#fff;margin-top:8px}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{background:var(--s);padding:8px 10px;text-align:left;font-weight:600;border-bottom:1px solid var(--b);white-space:nowrap;font-size:11px;color:#344054}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--b);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#fafbfc}
.tbl tr.clickable{cursor:pointer}
.tbl tr.clickable:hover td{background:var(--pl)}
.tbl tr.row-wait td{background:var(--wl)}   /* 待处理行(橙底) */
.tbl tr.row-ext td{background:#F7F8FA}       /* 扩展/次级行 */
.tbl th.c,.tbl td.c{text-align:center;white-space:nowrap}
.tbl th:last-child,.tbl td:last-child{position:sticky;right:0;box-shadow:-2px 0 4px rgba(0,0,0,.05)}  /* 末列吸右 */
.tbl th:last-child{background:var(--s);z-index:2}
.tbl td:last-child{background:#fff}

/* =====================================================================
   状态药丸 .pill / 角色徽章 .badge / 小标签 .tag
===================================================================== */
.pill{display:inline-flex;align-items:center;min-height:20px;white-space:nowrap;border-radius:999px;padding:1px 7px;font-size:10px;font-weight:500}
.pill.b{color:var(--p);background:#E8F4FD}     /* 蓝 进行中 */
.pill.g{color:var(--g);background:var(--gl)}  /* 绿 通过 */
.pill.y{color:#B87A14;background:var(--wl)}   /* 橙 待办/中风险 */
.pill.r{color:var(--d);background:var(--dl)}  /* 红 驳回/缺失/高险 */
.pill.m{color:#606266;background:#F4F4F5}     /* 灰 已完成 */
.pill.z{color:#909399;background:#F0F0F0}     /* 浅灰 占位 */

.badge{font-size:11px;padding:2px 8px;border-radius:3px;font-weight:600}
.badge-maker{background:var(--pl);color:#1B5A8C}
.badge-amlA{background:var(--pl);color:#1B5A8C}
.badge-amlB{background:var(--wl);color:#B87A14}
.badge-report{background:#f4e6f8;color:#7A3B9E}

.tag{display:inline-block;font-size:9px;padding:1px 6px;border-radius:3px;background:var(--pl);color:var(--p);font-weight:600;margin-left:4px}

/* =====================================================================
   按钮 .btn
===================================================================== */
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:4px;font-size:12px;font-weight:500;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--p);color:#fff}
.btn-primary:hover{background:#256699}
.btn-default{background:#fff;color:var(--t);border-color:var(--b)}
.btn-default:hover{border-color:var(--p);color:var(--p)}
.btn-success{background:var(--g);color:#fff}
.btn-warn{background:var(--w);color:#fff}
.btn-danger{background:var(--d);color:#fff}
.btn-sm{padding:3px 8px;font-size:11px}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}
.btn-back{color:var(--p);background:none;border:none;font-size:13px;cursor:pointer;padding:0}

/* =====================================================================
   详情页 .detail-page  (列表行点击进入)
===================================================================== */
.detail-page{flex:1;overflow-y:auto;display:none;flex-direction:column}
.detail-page.active{display:flex}
.detail-header{border-bottom:1px solid var(--b);padding:0 20px;background:#fff;flex-shrink:0}
.detail-header .dh-top{display:flex;justify-content:space-between;align-items:center;padding-top:8px}
.detail-header h3{font-size:16px}
.detail-header .dh-sub{font-size:11px;color:var(--m);margin-top:2px;margin-bottom:8px}
.dh-nav{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--m);margin-bottom:4px}
.dh-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.detail-tabs{display:flex;border-bottom:1px solid var(--b);gap:2px;margin-top:10px}
.detail-tab{padding:8px 16px;font-size:13px;color:var(--m);border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none}
.detail-tab.active{color:var(--p);border-bottom-color:var(--p);font-weight:600}
.detail-body{flex:1;overflow-y:auto;display:flex;gap:16px;padding:14px 20px}
.detail-main-area{flex:1;min-width:0}
.detail-tab-panel{display:none}
.detail-tab-panel.active{display:block}
.detail-sidebar{width:300px;flex-shrink:0;border-left:1px solid var(--b);padding-left:16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.detail-sidebar h4{font-size:13px;font-weight:600;margin-bottom:8px}

/* =====================================================================
   卡片 / 区块 / 信息网格
===================================================================== */
.card{background:#fff;border:1px solid var(--b);border-radius:8px;padding:14px 16px;margin-bottom:12px}
.card h4{font-size:14px;font-weight:600;margin-bottom:8px}
.sec{margin-bottom:14px}
.sec h4{font-size:14px;font-weight:600;margin-bottom:6px}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.if{border:1px solid var(--b);border-radius:5px;padding:8px 10px;background:#fff}
.if span{display:block;font-size:10px;color:var(--m);margin-bottom:2px}
.if strong{font-size:13px;overflow-wrap:anywhere}
.note{font-size:11px;color:var(--m);padding:8px 10px;background:var(--s);border-radius:4px;margin-top:6px}
.note-b{font-size:11px;padding:10px 12px;border-radius:4px;background:var(--pl);color:var(--p);margin-bottom:8px}

/* =====================================================================
   材料列表 .mat-list  (审核件 / 附件)
===================================================================== */
.mat-list{border:1px solid var(--b);border-radius:8px;overflow:hidden;background:#fff}
.mat-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--b);cursor:pointer;font-size:12px}
.mat-item:last-child{border-bottom:none}
.mat-item:hover{background:var(--s)}
.mat-item.active{background:var(--pl);border-left:3px solid var(--p)}
.mat-item .mi-ic{width:24px;text-align:center;font-weight:700;color:var(--g)}
.mat-item .mi-ic.miss{color:var(--d)}
.mat-item .mi-n{flex:1;font-weight:600}
.mat-item .mi-sub{font-size:10px;color:var(--m);font-weight:400}
.mat-item .mi-cnt{font-size:10px;color:var(--m);background:#fff;padding:1px 7px;border-radius:10px;border:1px solid var(--b)}

/* =====================================================================
   OCR 字段行 + 置信度条
===================================================================== */
.ocr-field{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--b);font-size:12px}
.ocr-field:last-child{border-bottom:none}
.ocr-field .of-n{flex:1;color:var(--m)}
.ocr-field .of-v{font-weight:600;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocr-field .of-conf{width:90px;display:flex;align-items:center;gap:4px}
.confbar{display:inline-block;width:50px;height:6px;background:var(--s);border-radius:3px;overflow:hidden;vertical-align:middle}
.confbar i{display:block;height:100%;background:var(--p)}
.confbar i.lo{background:var(--d)}
.confbar i.md{background:var(--w)}
.confnum{font-size:10px;color:var(--m);min-width:28px}

/* =====================================================================
   Checklist 行  (问题 + 答案 select + 详情)
===================================================================== */
.cl-row{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border-bottom:1px solid var(--b);font-size:12px}
.cl-row:last-child{border-bottom:none}
.cl-row .cl-q{flex:1;line-height:1.5}
.cl-row .cl-q .cl-tag{font-size:9px;padding:1px 5px;border-radius:3px;background:var(--pl);color:var(--p);font-weight:600;margin-left:4px}
.cl-row .cl-ans{width:78px;flex-shrink:0}
.cl-row .cl-ans select{width:100%;padding:2px 4px;border:1px solid var(--b);border-radius:3px;font-size:11px}
.cl-row .cl-detail{font-size:10px;color:var(--p);cursor:pointer;white-space:nowrap;flex-shrink:0}
.cl-row .cl-detail:hover{text-decoration:underline}
.cl-row.sys-override .cl-ans select{border-color:var(--w);background:var(--wl)}

/* =====================================================================
   进度条 / 流程步骤 / 知识条
===================================================================== */
.progress-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border:1px solid var(--b);border-radius:8px;margin-bottom:12px}
.progress-bar .pb-track{flex:1;height:8px;background:var(--s);border-radius:4px;overflow:hidden}
.progress-bar .pb-track i{display:block;height:100%;background:var(--g)}
.progress-bar .pb-text{font-size:12px;color:var(--m);white-space:nowrap}
.prog-step{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--b);font-size:12px}
.prog-step:last-child{border-bottom:none}
.prog-step .ps-no{width:22px;height:22px;border-radius:50%;background:var(--pl);color:var(--p);display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.prog-step .ps-body{flex:1}
.prog-step .ps-title{font-weight:600;margin-bottom:2px}
.prog-step .ps-desc{font-size:11px;color:var(--m);line-height:1.5}
.prog-step .ps-out{font-size:11px;color:var(--g);font-weight:600;margin-top:2px}
.know-item{padding:8px 10px;border-left:2px solid var(--p);background:var(--s);border-radius:0 4px 4px 0;margin-bottom:6px;font-size:11px}
.know-item .ki-t{font-weight:600;color:var(--p);margin-bottom:2px}

/* =====================================================================
   队列 / 模块 Tabs
===================================================================== */
.queue-tabs{display:flex;gap:0;border-bottom:1px solid var(--b);margin-bottom:12px}
.queue-tab{padding:8px 18px;font-size:13px;color:var(--m);border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;display:flex;align-items:center;gap:6px}
.queue-tab .qcnt{font-size:10px;background:#F4F4F5;color:var(--m);padding:1px 6px;border-radius:10px}
.queue-tab.active{color:var(--p);border-bottom-color:var(--p);font-weight:600}
.queue-tab.alert .qcnt{background:var(--wl);color:#B87A14}
.queue-tab.danger .qcnt{background:var(--dl);color:var(--d)}

.module-tabs{display:flex;gap:0;border-bottom:1px solid var(--b);margin-bottom:12px}
.module-tab{padding:8px 16px;font-size:13px;color:var(--m);border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;display:flex;align-items:center;gap:6px}
.module-tab.active{color:var(--p);border-bottom-color:var(--p);font-weight:600}
.mt-cnt{font-size:10px;background:var(--s);color:var(--m);padding:1px 6px;border-radius:10px;font-weight:400}
.module-tab.active .mt-cnt{background:var(--pl);color:var(--p)}

/* =====================================================================
   归属判定横幅  (案件维度 4 列,左边框色区分)
===================================================================== */
.attr-banner{display:flex;border:1px solid var(--b);border-radius:8px;overflow:hidden;margin-bottom:12px;background:#fff}
.attr-banner .ab-col{flex:1;padding:10px 14px;border-right:1px solid var(--b)}
.attr-banner .ab-col:last-child{border-right:none}
.attr-banner .ab-col.attr-uniq{border-left:3px solid var(--g)}
.attr-banner .ab-col.attr-orphan{border-left:3px solid var(--d)}
.attr-banner .ab-col.attr-multi{border-left:3px solid var(--w)}
.attr-banner .ab-col.attr-fail{border-left:3px solid var(--m)}
.attr-banner .ab-lbl{font-size:10px;color:var(--m);margin-bottom:3px}
.attr-banner .ab-val{font-size:13px;font-weight:600}

/* =====================================================================
   复核台  (左文档预览 + 右字段清单)
===================================================================== */
.rv{display:flex;border:1px solid var(--b);border-radius:8px;overflow:hidden;min-height:460px;background:#fff}
.rv-l{width:44%;border-right:1px solid var(--b);background:#F7F8FA;display:flex;flex-direction:column}
.rv-r{flex:1;min-width:0;display:flex;flex-direction:column}
.doc{background:#fff;border:1px solid #DDE1E6;border-radius:3px;padding:16px 18px;font-size:11px;line-height:2.1;color:#41474F;flex:1;margin:10px;overflow-y:auto}
.doc-title{font-weight:700;letter-spacing:1px;color:#1F2430;font-size:12px}
.doc-divider{border-top:1px solid #E5E8EC;margin:8px 0}
.doc-line .dl{display:inline-block;width:110px;color:#8A8F99}
.doc-line .dv{font-weight:600;color:#1F2430}
.doc .hl{background:#FFF0BF;outline:1.5px solid var(--w);border-radius:2px;padding:0 2px}   /* OCR 命中高亮(黄) */
.doc .hl2{background:#DDEEFB;outline:1.5px solid var(--p);border-radius:2px;padding:0 2px}  /* 系统比对高亮(蓝) */
.doc-foot{margin-top:14px;font-size:9.5px;color:#98A0AA}
.doc-legend{font-size:10px;color:var(--m);padding:0 12px 8px}
.grp{background:#FAFBFC;padding:5px 14px;font-size:10.5px;font-weight:600;color:var(--m);border-bottom:1px solid #EFF1F4;border-top:1px solid #EFF1F4}
.fld{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #EFF1F4}

/* —— 占位 / 打印 —— */
.empty{text-align:center;padding:40px 20px;color:var(--m)}
@media print{.sidebar,.topbar,.dim-banner,.filter-row{display:none}.page,.detail-page{display:block!important;overflow:visible}.tbl th:last-child,.tbl td:last-child{position:static;box-shadow:none}}
