/* KPI cards that filter the table under them (DashboardFilterHelper).
   With nothing chosen the strip looks as it always has. Once a card is chosen
   it grows, the others shrink, and "Show all" appears at the end. */

/* The cards are links now: undo the global link rule (2rem top margin, fill,
   font) so they look exactly like the cards they were. */
.kpi-strip--filters > a.kpi-card,
a.kpi-card.kpi-card--link {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.kpi-strip--filters > a.kpi-card:hover,
.kpi-strip--filters > a.kpi-card:focus-visible,
a.kpi-card.kpi-card--link:hover,
a.kpi-card.kpi-card--link:focus-visible {
  border-color: var(--major-link);
  box-shadow: 0 0 0 1px var(--major-link);
  color: inherit;
}

.kpi-strip--filters > a.kpi-card:focus-visible,
a.kpi-card.kpi-card--link:focus-visible { outline: 2px solid var(--major-link); outline-offset: 2px; }

.kpi-strip--filters > a.kpi-card.is-active {
  border-color: var(--major-link);
  box-shadow: 0 0 0 2px var(--major-link);
}

.kpi-strip--filters > a.kpi-card.is-dimmed { opacity: 0.7; }
.kpi-strip--filters > a.kpi-card.is-dimmed:hover { opacity: 1; }

.kpi-filter-reset {
  align-self: center;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(128, 128, 128, 0.45);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.kpi-filter-reset:hover { border-color: var(--major-link); color: var(--major-link); background: none; }

@media (min-width: 831px) {
  /* Three classes, so the dashboards' own `.site-dashboard .kpi-strip { display: grid }`
     (same weight, loaded later) doesn't win. */
  .kpi-strip.kpi-strip--filters.is-filtering {
    display: flex;
    align-items: stretch;
  }

  .kpi-strip--filters.is-filtering > a.kpi-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.6rem 0.75rem;
  }

  .kpi-strip--filters.is-filtering > a.kpi-card.is-active {
    flex-grow: 2.4;
    padding: 1rem;
  }

  .kpi-strip--filters.is-filtering > a.kpi-card.is-dimmed .kpi-value { font-size: 1rem; }
  .kpi-strip--filters.is-filtering > a.kpi-card.is-dimmed .kpi-label { font-size: 0.62rem; }
  .kpi-strip--filters.is-filtering > a.kpi-card.is-dimmed .kpi-meta { display: none; }
  .kpi-strip--filters.is-filtering > a.kpi-card.is-active .kpi-value { font-size: 1.7rem; }
}

/* Phones: the strip is two columns; the chosen card takes a full row at the top. */
@media (max-width: 830px) {
  .kpi-strip--filters.is-filtering > a.kpi-card.is-active {
    grid-column: 1 / -1;
    order: -1;
  }

  .kpi-strip--filters .kpi-filter-reset { grid-column: 1 / -1; justify-self: start; }
}

/* Chips that narrow one table on their own (a card header) */
.dash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.dash-chip {
  margin: 0;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(128, 128, 128, 0.45);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.dash-chip:hover { border-color: var(--major-link); color: var(--major-link); background: none; }

.dash-chip.is-active,
.dash-chip.is-active:hover {
  background: var(--major-link);
  border-color: var(--major-link);
  color: #0f1117;
}