/* 研发效能：复用统计页组件（observability.css 中 :is(#observabilityView,#metricsView) 共享规则），这里只放本页专属布局 */
#metricsView .metrics-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
#metricsView .metrics-title-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
#metricsView .metrics-title-row h1{margin:0;font-size:20px;white-space:nowrap}
#metricsView .metrics-title-row p{margin:0;color:var(--muted-2);font-size:12px}
#metricsView .metrics-fbar{margin-bottom:14px}
#metricsView .metrics-date-filter{display:inline-flex;align-items:center;gap:6px;margin:0}
#metricsView .metrics-date-filter>i{color:var(--muted-2);font-style:normal;font-size:12px}
#metricsView .metrics-date-filter .hui-date-trigger{width:132px;height:28px;font-size:12px}
#metricsView .metrics-date-filter input{height:28px;width:128px;padding:0 4px;border:0;background:transparent;color:var(--text);font:inherit;font-size:12px;color-scheme:light dark}
#metricsView .metrics-active-window{white-space:nowrap}
#metricsView .metrics-fbar .obs-tip{left:auto;right:0;width:340px}

.metrics-body{display:flex;flex-direction:column;gap:14px;padding-bottom:40px}
.metrics-loading,.metrics-empty{min-height:300px;display:grid;place-items:center;text-align:center;color:var(--muted)}
.metrics-loading i{display:block;width:28px;height:28px;margin:auto;border:3px solid var(--line);border-top-color:var(--c1);border-radius:50%;animation:metrics-spin .8s linear infinite}
@keyframes metrics-spin{to{transform:rotate(360deg)}}

.metrics-sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:10px 0 -4px;scroll-margin-top:72px}
.metrics-sec-head span{color:var(--muted-2);font-size:11.5px;font-weight:600;letter-spacing:.04em}
.metrics-sec-head h2{margin:0;color:var(--text);font-size:15px;font-weight:650}
.metrics-sec-head p{margin:0;color:var(--muted-2);font-size:11.5px}

#metricsView .obs-kpi.is-missing .obs-kpi-value .num{color:var(--muted-2);font-size:18px;font-weight:600}
#metricsPhase+.obs-kg .obs-kpi:nth-child(2) .obs-meter i{background:var(--c2)}
#metricsPhase+.obs-kg .obs-kpi:nth-child(3) .obs-meter i{background:var(--c3)}
.metrics-card-total{color:var(--text);font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.metrics-card-total small{color:var(--muted-2);font-size:11.5px;font-weight:400}
.metrics-split{padding-top:10px;border-top:1px solid var(--line)}

/* 环图 + 图例 */
.metrics-donut2{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:center;gap:16px}
.metrics-donut2-ring{min-width:0}
.metrics-slices{display:flex;flex-direction:column;gap:2px;min-width:0}
.metrics-slices>div{display:grid;grid-template-columns:10px minmax(0,1fr) auto 40px;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;color:var(--text);font-size:12px}
.metrics-slices>div:hover{background:var(--hover)}
.metrics-slices i{width:9px;height:9px;border-radius:2px}
.metrics-slices span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metrics-slices b{font-weight:600;font-variant-numeric:tabular-nums}
.metrics-slices em{color:var(--muted-2);font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.metrics-no-data{padding:6px 8px;color:var(--muted-2);font-size:12px}
.metrics-donut{position:relative;width:132px;aspect-ratio:1;margin:auto;border-radius:50%;background:conic-gradient(var(--donut))}
.metrics-donut:after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--panel)}
.metrics-donut-center{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center}
.metrics-donut-center b{color:var(--text);font-size:20px;font-weight:650;line-height:1}
.metrics-donut-center span{margin-top:4px;color:var(--muted-2);font-size:11px}

/* 明细表 */
.metrics-tw{max-height:460px}
.metrics-requirement-table td{white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}
.metrics-requirement-table td strong{color:var(--text);font-weight:600}
.metrics-requirement-table time{color:var(--muted)}
.metrics-requirement-table a{color:var(--c1);text-decoration:none;font-weight:600}
.metrics-requirement-table a:hover{text-decoration:underline}
.metrics-requirement-name{display:flex;align-items:center;gap:8px;min-width:0;max-width:460px}
.metrics-requirement-name>b{flex:none;color:var(--text);font-weight:600}
.metrics-requirement-name span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.metrics-requirement-name .button.small{flex:none;min-height:0;height:22px;padding:0 8px;border-radius:6px;font-size:11px}
.metrics-requirement-table td>span.is-missing{color:var(--muted-2)}
.metrics-requirement-status{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:99px;background:var(--panel-2);color:var(--muted);font-size:11px}
.metrics-requirement-status.done{color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent)}
.metrics-requirement-status.failed{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}
.metrics-table-empty{padding:28px!important;text-align:center!important;color:var(--muted-2)!important}
.metrics-mr-details>summary{padding:4px 0;color:var(--muted);font-size:12px;cursor:pointer}
.metrics-mr-details[open]>summary{margin-bottom:8px}

/* ECharts 加载失败时的简版 SVG */
#metricsView .obs-chart.is-fallback svg{display:block;overflow:visible}
#metricsView .obs-chart.is-fallback .grid{stroke:var(--line);stroke-width:1}
#metricsView .obs-chart.is-fallback .line{fill:none;stroke:var(--chart-color,var(--c1));stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#metricsView .obs-chart.is-fallback .dot{fill:var(--panel);stroke:var(--chart-color,var(--c1));stroke-width:2}
#metricsView .obs-chart.is-fallback text{fill:var(--muted-2);font-size:10px}
.metrics-phase-legend{display:flex;justify-content:flex-end;gap:14px;margin:0 4px 4px}
.metrics-phase-legend span{display:flex;align-items:center;gap:5px;color:var(--muted-2);font-size:11px}
.metrics-phase-legend i{width:9px;height:9px;border-radius:2px}
.metrics-trend-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center}
.metrics-trend-empty b{color:var(--text);font-size:13px;font-weight:600}
.metrics-trend-empty span{color:var(--muted-2);font-size:12px}

@media (max-width:1279px){
  #metricsView .metrics-heading{flex-wrap:wrap}
  #metricsView .metrics-fbar .obs-tip{width:min(340px,80vw)}
}
@media (max-width:760px){
  #metricsView .metrics-date-filter{flex-wrap:wrap}
  #metricsView .metrics-date-filter input{width:116px}
  #metricsView .metrics-date-filter .hui-date-trigger{width:126px}
  .metrics-donut2{grid-template-columns:1fr}
}