/* KPI page (optional module, kpi.js). Delete together with the module. */
.kpi-summary { margin: 0 0 14px; color: var(--muted); }
.kpi-section { padding: 0; margin-bottom: 18px; overflow: hidden; }
.kpi-section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px 10px; }
.kpi-section-head h2 { margin: 0; }
.kpi-section-head .muted { margin-left: auto; }
.kpi-table th { white-space: nowrap; }
.kpi-table td { vertical-align: middle; }
.kpi-table td.kpi-part .muted { white-space: nowrap; margin-top: 2px; }
.kpi-name { font-weight: 600; }
.kpi-band { margin-top: 2px; }

/* A score as a coloured chip: excellent / good / average / low */
.kpi-score { display: inline-block; min-width: 34px; padding: 2px 7px; border-radius: 7px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.kpi-score.big { min-width: 48px; font-size: 18px; padding: 4px 9px; border-radius: 9px; }
.kpi-b-top { background: #e3f5ea; color: #1f7a45; } .kpi-b-good { background: #e6f0ff; color: #2860d8; }
.kpi-b-mid { background: #fff3dc; color: #a86200; } .kpi-b-low { background: #fde6e7; color: #c42a31; } .kpi-b-none { background: var(--surface-2); color: var(--muted); }

/* The six-month line */
.kpi-spark { display: block; }
.kpi-spark-base { stroke: #dfe3ea; stroke-width: 1; stroke-dasharray: 3 3; }
.kpi-spark-line { fill: none; stroke: #7d9cff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kpi-spark-dot { stroke: #fff; stroke-width: 1.5; }
.kpi-spark-dot.kpi-b-top { fill: #2f9e5b; } .kpi-spark-dot.kpi-b-good { fill: #3a63db; } .kpi-spark-dot.kpi-b-mid { fill: #f0a020; } .kpi-spark-dot.kpi-b-low { fill: #e5484d; }

/* The detail window */
.kpi-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.kpi-detail-head .spacer { flex: 1; }
.kpi-detail-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kpi-detail-parts li.kpi-none { opacity: .65; }
.kpi-detail-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kpi-detail-row .spacer { flex: 1; }
.kpi-detail-parts p { margin: 6px 0 0; color: #3d4461; }
.kpi-bar { height: 7px; border-radius: 4px; background: #e9ecf2; overflow: hidden; }
.kpi-bar span { display: block; height: 100%; width: 0; }
.kpi-bar .kpi-b-top { background: #2f9e5b; } .kpi-bar .kpi-b-good { background: #4f7cff; } .kpi-bar .kpi-b-mid { background: #f0a020; } .kpi-bar .kpi-b-low { background: #e5484d; }
.kpi-team { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kpi-team-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 99px; background: #f3f5f9; font-size: 13px; }

/* Instructions and settings */
.kpi-help { max-width: 900px; }
.kpi-help h2 { margin-top: 18px; }
.kpi-help h2:first-child { margin-top: 0; }
.kpi-help li { margin-bottom: 6px; }
.kpi-roles { margin-bottom: 16px; }
.kpi-roles select { width: auto; min-width: 190px; }
.kpi-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 18px; }
.kpi-weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kpi-weight-col { display: flex; flex-direction: column; gap: 2px; }
.kpi-num { width: 110px; }
@media (max-width: 760px) {
  .kpi-weights { grid-template-columns: 1fr; }
  .kpi-section-head .muted { margin-left: 0; flex-basis: 100%; }
}
.kpi-table th { white-space: normal; line-height: 1.25; max-width: 130px; vertical-align: bottom; }
.kpi-table td:first-child { min-width: 240px; }
.kpi-table th:last-child, .kpi-table td:last-child { width: 110px; }
.kpi-late { margin: 6px 0 0; padding-left: 18px; color: #c42a31; }
.kpi-parcel-people { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kpi-parcel-people .check { display: inline-flex; align-items: center; gap: 6px; }

/* What a part was counted from, line by line */
.kpi-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.kpi-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 8px; background: #f6f7fa; font-size: 13px; }
.kpi-item-mark { font-weight: 800; text-align: center; }
.kpi-item-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
a.kpi-item-main:hover { color: var(--primary); text-decoration: underline; }
.kpi-item-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.kpi-item-ok .kpi-item-mark { color: #1f7a45; }
.kpi-item-bad { background: #fdf1f1; }
.kpi-item-bad .kpi-item-mark, .kpi-item-bad .kpi-item-meta { color: #c42a31; }
.kpi-item-wait .kpi-item-mark { color: var(--muted); }
.kpi-items-none { margin: 6px 0 0; }
.kpi-self-hint { margin: 0 0 10px; }
@media (max-width: 600px) { .kpi-item { grid-template-columns: 18px minmax(0, 1fr); } .kpi-item-meta { grid-column: 2; white-space: normal; } }