/* Reusable KPI strip: one connected container, 1px dividers between items.
   Used by admin summary cards (audit log first; HMS-1084/1086 reuse it). */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
  gap: 1px;
  background: var(--wa-color-surface-border); /* the 1px gap is the divider */
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  overflow: hidden;
  margin-block-end: 1.25rem;
}

.kpi-strip__item {
  background: var(--wa-color-surface-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  min-width: 0;
}

.kpi-strip__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.kpi-strip__value {
  font-size: 1.25rem;
  font-weight: var(--wa-font-weight-bold);
  line-height: 1.2;
  color: var(--wa-color-text-normal);
}

.kpi-strip__label {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-strip__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-normal);
  font-size: 0.8125rem;
}

.kpi-strip__title {
  font-size: 0.875rem;
  font-weight: var(--wa-font-weight-bold);
  line-height: 1.3;
  color: var(--wa-color-text-normal);
  margin-block-end: 0.25rem;
}

.kpi-strip__item:has(.kpi-strip__title) {
  align-items: flex-start;
}

.kpi-strip__item:has(.kpi-strip__title) .kpi-strip__icon {
  align-self: flex-end;
}

@media (max-width: 900px) {
  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-strip__item:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .kpi-strip__label {
    white-space: normal;
  }
}