.kpi-ps-list { width: 100%; }
.kpi-ps-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--border, #eee);
  font-size: 13px; cursor: pointer;
}
.kpi-ps-row:hover { background: var(--page, #f4f7fb); }
.kpi-ps-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.kpi-ps-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-ps-qty { flex: 0 0 auto; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-ps-total { margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--border, #e0e0e0); font-size: 13px; }
.kpi-ps-total strong { font-size: 16px; color: var(--text, #1a1a1a); }


.kpi-tp-sub { font-size: 10px; font-weight: 500; color: var(--muted, #888); text-transform: none; letter-spacing: 0; }
.kpi-tp-list { width: 100%; }
.kpi-tp-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border, #eee); font-size: 13px; }
.kpi-tp-clickable { cursor: pointer; }
.kpi-tp-clickable:hover { background: var(--page, #f4f7fb); }
.kpi-tp-clickable .kpi-tp-name { color: var(--brand, #1565c0); }
.kpi-tp-icon { flex: 0 0 auto; width: 18px; text-align: center; }
.kpi-tp-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #555); }
.kpi-tp-val { flex: 0 0 auto; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text, #1a1a1a); }
.kpi-tp-good { color: #1b5e20; }
.kpi-tp-warn { color: #c62828; }
.kpi-tp-eff { padding: 1px 8px; border-radius: 10px; }

.kpi-tabs { margin-bottom: 8px; }
.kpi-drill-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brand, #1565c0); text-decoration: underline; font: inherit;
}
.kpi-perf { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.kpi-perf-green { background: #e6f4ea; color: #1b5e20; }
.kpi-perf-blue { background: #e3f0fb; color: #0d47a1; }
.kpi-perf-yellow { background: #fdf3d7; color: #8a6d00; }
.kpi-perf-red { background: #fde5e5; color: #b71c1c; }


#workshop-kpi-host { display: contents; }
#workshop-kpi.workshop-kpi-active-fallback { display: block; }
body:has(#workshop-kpi.workshop-kpi-active-fallback) .dashboard { display: none; }


#workshop-kpi .customer-header { align-items: flex-start; }
#workshop-kpi .customer-header > .utility-actions.customer-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  position: static;
  width: auto;
  min-width: 0;
  margin: 0;
  align-self: flex-start;
}
#workshop-kpi .utility-actions.customer-actions .small-button {
  white-space: nowrap;
  height: fit-content;
}
/* Reserve room on the right of the action group so the absolutely
   positioned close button sits at the top-right corner like other pages. */
#workshop-kpi .customer-header > .utility-actions.customer-actions {
  padding-right: 52px;
}
#workshop-kpi .customer-header .exit-button.kpi-close-button {
  position: absolute;
  top: 8px;
  right: 16px;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}
.kpi-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; align-items: end; }
.kpi-filters label { display: flex; flex-direction: column; font-size: 11px; gap: 3px; color: var(--muted, #555); min-width: 0; }
.kpi-filters input, .kpi-filters select { width: 100%; min-width: 0; box-sizing: border-box; }

@media print {
  body:has(#workshop-kpi:target) * { visibility: hidden; }
  body:has(#workshop-kpi:target) #workshop-kpi,
  body:has(#workshop-kpi:target) #workshop-kpi * { visibility: visible; }
  body:has(#workshop-kpi:target) #workshop-kpi { position: absolute; left: 0; top: 0; width: 100%; }
  .kpi-filters, .utility-actions, .kpi-tabs { display: none !important; }
  .kpi-card-drill { cursor: default; }
}