/* Last-loaded hard override for the compact secondary KPI strip. */
.container > div.kpi-grid.secondary-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 82px !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(50, 50, 49, 0.035) !important;
}

.container > div.kpi-grid.secondary-kpis > .kpi {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr auto !important;
  grid-template-areas:
    "label value"
    "sub sub" !important;
  align-items: center !important;
  align-self: stretch !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  margin: 0 !important;
  padding: 10px 13px 8px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.container > div.kpi-grid.secondary-kpis > .kpi + .kpi {
  border-left: 1px solid var(--panel-border) !important;
}

.container > div.kpi-grid.secondary-kpis > .kpi::before {
  content: none !important;
  display: none !important;
}

.container > div.kpi-grid.secondary-kpis > .kpi .label {
  grid-area: label !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
}

.container > div.kpi-grid.secondary-kpis > .kpi .value {
  grid-area: value !important;
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 23px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.container > div.kpi-grid.secondary-kpis > .kpi .sub {
  grid-area: sub !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.container > div.kpi-grid.secondary-kpis > .kpi svg,
.container > div.kpi-grid.secondary-kpis > .kpi .delta {
  display: none !important;
}

@media (max-width: 800px) {
  .container > div.kpi-grid.secondary-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 76px !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
  }

  .container > div.kpi-grid.secondary-kpis > .kpi {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
  }

  .container > div.kpi-grid.secondary-kpis > .kpi:nth-child(odd) {
    border-left: 0 !important;
  }

  .container > div.kpi-grid.secondary-kpis > .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--panel-border) !important;
  }
}