/* CK Metrics KPI layout + icon color refinement — Aug. 29, 2026 */
:root{--paceblue:#178aa2}
.metric-icon.paceblue{background:var(--paceblue)}
.metric-icon .uploaded-kpi-svg{width:21px!important;height:21px!important;display:block;fill:#fff!important;stroke:none!important;overflow:visible}
.metric-icon .uploaded-kpi-svg path{fill:#fff!important;stroke:none!important}

.metric.metric-color-teal .metric-value,.metric:has(.metric-icon.teal) .metric-value{color:var(--teal-dark)}
.metric.metric-color-orange .metric-value,.metric:has(.metric-icon.orange) .metric-value{color:var(--orange)}
.metric.metric-color-navy .metric-value,.metric:has(.metric-icon.navy) .metric-value{color:var(--navy2)}
.metric.metric-color-gold .metric-value,.metric:has(.metric-icon.gold) .metric-value{color:#c99009}
.metric:has(.metric-icon.slate) .metric-value{color:var(--slate)}
.metric.metric-color-paceblue .metric-value,.metric.metric-color-paceblue .metric-compare strong,.metric:has(.metric-icon.paceblue) .metric-value{color:var(--paceblue)}
.metric.is-returned .metric-note{color:#0d8e89;font-weight:850}
.metric.is-over .metric-note{color:var(--orange);font-weight:850}

.metric-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 7px}
.metric-compare div{min-width:0}
.metric-compare span{display:block;font-size:8.5px;line-height:1.1;text-transform:uppercase;letter-spacing:.04em;color:#7a8b99;font-weight:900}
.metric-compare strong{display:block;margin-top:3px;font-size:18px;line-height:1;font-weight:950;white-space:nowrap}

@media(max-width:820px){
  .metric-grid,.metric-grid.closed,.metric-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .metric-grid.five .metric:last-child{grid-column:1/-1}
  .metric{min-height:112px;padding:11px 11px 10px}
  .metric-top{gap:8px;margin-bottom:8px}
  .metric-icon{width:35px;height:35px}
  .metric-icon .uploaded-kpi-svg{width:18px!important;height:18px!important}
  .metric-label{font-size:9.5px;line-height:1.18}
  .metric-value{font-size:21px;margin-bottom:5px;letter-spacing:-.6px}
  .metric-note{font-size:10.3px;line-height:1.2}
  .metric-compare{gap:6px;margin-bottom:5px}
  .metric-compare strong{font-size:16px}
}

@media(max-width:390px){
  .metric-grid,.metric-grid.closed,.metric-grid.five{gap:7px}
  .metric{padding:10px 9px;min-height:108px}
  .metric-icon{width:32px;height:32px}
  .metric-icon .uploaded-kpi-svg{width:16px!important;height:16px!important}
  .metric-value{font-size:19px}
  .metric-label{font-size:8.8px}
  .metric-note{font-size:9.6px}
  .metric-compare strong{font-size:15px}
}