/* ===================================================================
 * 页面专属样式（自原页面 <style> 块抽取，§10.1）
 * 源文件：mgt-sys/maturity/index.html
 * 说明：本文件仅承载该页面的版式细节；通用组件请写入 components.css。
 *       V3：骨架统一走 components.css §2.0（.app-top/.app-body/.app-side/.app-main）。
 * =================================================================== */

/* 控制台全屏工作区：顶栏 + 工具条固定，内容栏内部滚动 */
html, body { height: 100%; }
body.app-page { display: flex; flex-direction: column; min-height: 100vh; }

/* ===== 项目条 = 功能切片栏（§2.0.4 .subbar 提供底/边/阴影与内衬，此处只留差异） ===== */
.pbar { flex-shrink: 0; }
.pbar select, .pbar input { width: auto; min-width: 130px; }
.subbar .sb-btn.pri { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.subbar .sb-btn.pri:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); }
.pbar .lb { font-size: var(--fs-14); color: var(--c-text-sub); font-weight: 700; }
.pbar .spacer { flex: 1; }

/* ===== 主体：左侧功能栏 + 内容栏（骨架由 components.css 提供） =====
   V3.3：骨架高度由 flex 决定（占满顶栏 + 切片栏之外的空间），
   内容超长时由 .app-main 内部滚动，内容栏与左栏等高。 */
.app-body { flex: 1; min-height: 0; height: auto; }

/* ===== 左侧导航树：与「安标查评」左栏视觉体系统一（V3.4） =====
   命名与取值对齐 mgt-sys/standard/page-system-standard.css 的 .chap/.ct/.sub/.ni，
   保证同一站点内两条业务线的左栏手感一致。 */
.app-side { padding: var(--sp-1) 0 var(--sp-7); }
.app-mask { display: none; position: fixed; inset: 0; background: rgba(15,40,26,.5); z-index: calc(var(--z-side) - 1); }
.app-mask.on { display: block; }

/* 一级要素（可折叠） */
.chap { cursor: pointer; user-select: none; }
.chap > .ct { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) 12px;
  font-weight: 600; font-size: var(--fs-14); border-bottom: 1px solid var(--c-gray-tint); transition: .15s; }
.chap > .ct:hover { background: var(--c-info-tint); }
.chap .arw { font-size: var(--fs-13); transition: transform .2s; color: var(--muted); }
.chap .arw.open { transform: rotate(90deg); }
.chap .cs { margin-left: auto; font-size: var(--fs-14); color: var(--muted); white-space: nowrap; }
.chap .cs .got { color: var(--ok); font-weight: 700; }
.chap .cs b { font-weight: 700; }
.sub { display: none; padding: 8px; }
.sub.on { display: block; }

/* 二级要素（末级，可点选） */
.ni { padding: 8px var(--sp-2) 8px 16px; cursor: pointer; font-size: var(--fs-14);
  border-bottom: 1px solid var(--c-gray-tint); display: flex; justify-content: space-between;
  gap: var(--sp-2); align-items: center; min-height: 34px; transition: .14s; }
.ni:hover { background: var(--c-info-tint); }
.ni.on { background: var(--c-info-tint); border-left: 3px solid var(--accent); font-weight: 600; }
.ni .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni .sc { color: var(--muted); font-size: var(--fs-14); white-space: nowrap; }
.ni .sc b { color: var(--ok); font-weight: 700; }
.ni .sc i { color: var(--danger); font-style: normal; }

/* 内容栏内部滚动（长评分项列表），保持工作台式布局 */
.app-main { padding: var(--sp-4); }
.it{background:var(--c-card);border:1px solid var(--line);border-radius: var(--r-sm);padding: var(--sp-3) var(--sp-3);margin: var(--sp-2);}
.it.bad{border-color:var(--c-danger-tint);background:var(--c-danger-tint);}
.it .ih{display:flex;align-items:flex-start;gap: var(--sp-2);flex-wrap:wrap;}
.it .ino{font-size:var(--fs-14);color:var(--c-card);background:var(--brand3);border-radius: var(--r-xs);padding: 1px var(--sp-1);flex-shrink:0;}
.it.ADLI-A .ino{background:var(--c-info);} .it.ADLI-D .ino{background:var(--c-ok);}
.it.ADLI-L .ino{background:var(--c-warn);} .it.ADLI-I .ino{background:var(--c-purple);}
.it .itx{flex:1;min-width:var(--side-w-sm);font-size:var(--fs-14);line-height:1.7;}
.it .meta{margin: var(--sp-1);font-size:var(--fs-14);color:var(--muted);line-height:1.8;display:none;}
.it.open .meta{display:block;}
.it .meta .k{color:var(--brand2);font-weight:700;}
.it .scrow{display:flex;align-items:center;gap: 8px;flex-shrink:0;}
.it .scrow input{width:74px;text-align:center;font-weight:700;color:var(--brand);padding: var(--sp-1) var(--sp-2);}
.it .scrow .mx{font-size: var(--fs-14);color:var(--muted);white-space:nowrap;}
.it .scrow .lost{font-size:var(--fs-14);font-weight:700;color:var(--danger);white-space:nowrap;min-width:46px;}
.it .acts{display:flex;gap: var(--sp-1);margin: var(--sp-2);flex-wrap:wrap;}
.note-in{width:100%;font-size:var(--fs-14);min-height:44px;margin: var(--sp-2);}

.welcome{text-align:center;padding: var(--sp-9) 20px;color:var(--muted);}
.welcome h2{font-size: var(--fs-20);color:var(--brand);margin: var(--sp-2);}

/* ===== 汇总面板 ===== */
.sp{position:fixed;top:0;right:0;bottom:0;width:min(1080px,97vw);background:var(--c-card);z-index: var(--z-drawer);
  box-shadow:-6px 0 34px rgba(0,0,0,.2);transform:translateX(102%);transition:transform .3s;
  display:flex;flex-direction:column;}
.sp.on{transform:none;}
.sp-hd{padding: 12px var(--sp-4);border-bottom:1px solid var(--line);display:flex;align-items:center;gap: var(--sp-2);flex-shrink:0;flex-wrap:wrap;}
.sp-hd h3{font-size: var(--fs-15);color:var(--brand);margin-right:auto;}
.sp-bd{flex:1;overflow-y:auto;padding: 16px var(--sp-4) 40px;}
.mask{position:fixed;inset:0;background:rgba(15,30,45,.4);z-index: var(--z-drawer);display:none;}
.mask.on{display:block;}

.lvcard{display:flex;gap: 16px;align-items:center;background:linear-gradient(135deg,var(--sg-green-ink,var(--c-bar)),var(--sg-green,var(--c-brand)));
  color:var(--c-card);border-radius: 12px;padding: 16px 20px;margin: 16px;flex-wrap:wrap;}
.lvcard .big{font-size:var(--fs-34);font-weight:800;line-height:1;}
.lvcard .tx{flex:1;min-width:var(--side-w-sm);}
.lvcard .tx b{font-size: var(--fs-17);}
.lvcard .tx p{font-size: var(--fs-14);color:var(--sg-green-line,var(--c-brand-line));margin: var(--sp-1);}
.lvcard .rt{text-align:right;font-size: var(--fs-14);color:var(--sg-green-line,var(--c-brand-line));}
.lvcard .rt b{display:block;font-size:var(--fs-22);color:var(--c-card);}

.sec{margin: 20px;}
.sec h4{font-size: var(--fs-14);color:var(--brand);border-bottom:2px solid var(--brand3);padding: var(--sp-1);margin: var(--sp-2);}
.barlist{display:flex;flex-direction:column;gap: var(--sp-2);}
.barlist .b{display:flex;align-items:center;gap: var(--sp-2);font-size:var(--fs-14);}
.barlist .b .nm{width:150px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.barlist .b .bar{flex:1;}
.barlist .b .pc{width:52px;text-align:right;flex-shrink:0;font-weight:700;}
.adli{display:flex;gap: 16px;flex-wrap:wrap;align-items:center;}
.adli .tb{flex:1;min-width:210px;}
table.mt{width:100%;border-collapse:collapse;font-size: var(--fs-14);}
table.mt th{background:var(--sg-green-tint,var(--c-brand-tint));color:var(--muted);font-weight:600;padding: var(--sp-2) 8px;text-align:left;border-bottom:1px solid var(--line2);white-space:nowrap;}
table.mt td{padding: var(--sp-2) 8px;border-bottom:1px solid var(--c-gray-tint);vertical-align:top;}
table.mt td.c{text-align:center;white-space:nowrap;}
table.mt tr.bad td{background:var(--c-danger-tint);}
.imp{border:1px solid var(--c-danger-tint);background:var(--c-danger-tint);border-radius: var(--r-xs);padding: var(--sp-2) var(--sp-3);margin: 8px;font-size: var(--fs-14);line-height:1.75;}
.imp .t{font-weight:700;color:var(--c-danger);}
.imp .d{white-space:pre-wrap;color:var(--c-info);}

@media(max-width:900px){
  .app-main{padding: 12px;}
  .barlist .b .nm{width:96px;}
}


/* ---- 自内联 style 抽取（§10.1 页面禁止内联样式） ---- */
.u1 { min-width:220px; }
.u2 { min-width:110px; }
.u3 { max-width:540px; }
.u4 { max-width:440px; }