.kpi-summary-section {
  --kpi-component-card-height: 13.25rem;
  --kpi-component-gap: 0.75rem;
  --kpi-total-card-height: calc((var(--kpi-component-card-height) * 2) + var(--kpi-component-gap));
}

.kpi-summary-heading {
  margin-bottom: 0.75rem !important;
}

.kpi-summary-heading .metric-empty-toggle {
  display: none !important;
}

.kpi-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(22rem, 2.65fr);
  grid-template-areas:
    "ela-ach ela-lg ela-lq aux-one aux-two aux-three total"
    "math-ach math-lg math-lq aux-four aux-five aux-six total";
  gap: var(--kpi-component-gap) 1rem !important;
  align-items: stretch;
}

.kpi-summary-grid > .kpi-col {
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  padding: 0 !important;
}

.kpi-summary-grid .kpi-col--selector,
.kpi-summary-grid .kpi-col--hidden {
  display: none !important;
}

.kpi-summary-grid .kpi-col--ela_ach { grid-area: ela-ach; }
.kpi-summary-grid .kpi-col--ela_lg { grid-area: ela-lg; }
.kpi-summary-grid .kpi-col--ela_lq { grid-area: ela-lq; }
.kpi-summary-grid .kpi-col--math_ach { grid-area: math-ach; }
.kpi-summary-grid .kpi-col--math_lg { grid-area: math-lg; }
.kpi-summary-grid .kpi-col--math_lq { grid-area: math-lq; }
.kpi-summary-grid .kpi-col--overall_pct { grid-area: total; }

.kpi-summary-grid .kpi-col--ela3,
.kpi-summary-grid .kpi-col--science,
.kpi-summary-grid .kpi-col--socstud,
.kpi-summary-grid .kpi-col--grad_rate,
.kpi-summary-grid .kpi-col--msa,
.kpi-summary-grid .kpi-col--cca {
  grid-area: aux-one;
}

.kpi-summary-grid .kpi-col--aux-1 { grid-area: aux-one; }
.kpi-summary-grid .kpi-col--aux-2 { grid-area: aux-two; }
.kpi-summary-grid .kpi-col--aux-3 { grid-area: aux-three; }
.kpi-summary-grid .kpi-col--aux-4 { grid-area: aux-four; }
.kpi-summary-grid .kpi-col--aux-5 { grid-area: aux-five; }
.kpi-summary-grid .kpi-col--aux-6 { grid-area: aux-six; }

.kpi-summary-grid .kpi {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: var(--kpi-component-card-height) !important;
  min-height: var(--kpi-component-card-height) !important;
  max-height: var(--kpi-component-card-height);
  border-radius: 0.85rem;
  padding: 0.55rem;
  gap: 0.45rem;
  overflow: hidden;
}

.kpi-summary-grid .kpi-title {
  letter-spacing: 0 !important;
  font-size: 0.76rem !important;
  line-height: 1.2;
  color: #64748b;
}

.kpi-summary-grid .kpi-main {
  gap: 0.35rem;
}

.kpi-summary-grid .kpi-main-row,
.kpi-summary-grid .kpi-value-group {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.kpi-summary-grid .kpi-value {
  font-size: 2rem !important;
  letter-spacing: 0;
}

.kpi-summary-grid .kpi-delta {
  font-size: 0.95rem !important;
}

.kpi-summary-grid .kpi-delta.is-flat {
  color: #64748b;
}

.kpi-summary-grid .kpi-delta-caption {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  margin-top: -0.15rem;
}

.kpi-summary-grid .kpi-bg {
  height: auto !important;
  min-height: 4.7rem !important;
  border-radius: 0;
}

.kpi-summary-grid .kpi-prior-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 -0.55rem -0.55rem;
  padding: 0.55rem 0.55rem 0.45rem;
  text-transform: uppercase;
}

.kpi-summary-grid .kpi-prior-footer-value {
  color: #0f172a;
  font-size: 1.1rem;
  line-height: 1;
  text-transform: none;
}

.kpi-summary-grid .kpi-flat-bottom-center {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.kpi-summary-grid .kpi-flat-bottom-center .kpi-main {
  margin-top: auto;
}

.kpi-summary-grid .kpi-flat-bottom-center .kpi-value {
  font-size: 3.35rem !important;
}

.kpi-summary-grid .kpi-score-focus {
  height: var(--kpi-total-card-height) !important;
  min-height: var(--kpi-total-card-height) !important;
  max-height: none;
  padding: 0.7rem;
}

.kpi-summary-grid .kpi-score-focus .kpi-title {
  font-size: 0.9rem !important;
}

.kpi-summary-grid .kpi-score-focus .kpi-bg {
  min-height: 18rem !important;
}

.school-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
}

.school-grade-badge--a,
.school-grade-badge--b {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.school-grade-badge--c {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
}

.school-grade-badge--s {
  background: #ffedd5;
  border: 1px solid #fdba74;
  color: #9a3412;
}

.school-grade-badge--d,
.school-grade-badge--f {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.school-grade-badge--empty {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #94a3b8;
}

.school-hub-card .roster-controls-section {
  align-items: flex-start;
  background: #f8fafc;
}

.school-hub-card .roster-control label,
.school-hub-card .roster-pm-control > label {
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.school-hub-card .school-hub-period-tabs {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
}

.school-hub-card .school-hub-period-tab {
  border: 0;
  background: transparent;
  color: #64748b;
  font-weight: 700;
  padding: 0;
}

.school-hub-card .school-hub-period-tab.is-active {
  color: #0f172a;
  font-size: 1.75rem;
  line-height: 1;
}

#school-hub-table .school-name-label {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#school-hub-table .roster-status-cell {
  font-weight: 700;
  text-align: center;
}

#school-hub-table .roster-status-cell.on-track {
  background: #d1fae5;
  color: #047857;
}

#school-hub-table .roster-status-cell.off-track {
  background: #fee2e2;
  color: #b91c1c;
}

#school-hub-table .roster-status-cell.no-data {
  background: #f1f5f9;
  color: #cbd5e1;
}

@media (max-width: 1399.98px) {
  .kpi-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "ela-ach ela-lg ela-lq"
      "math-ach math-lg math-lq"
      "aux-one aux-two aux-three"
      "aux-four aux-five aux-six"
      "total total total";
  }

  .kpi-summary-grid .kpi-score-focus,
  .kpi-summary-grid .kpi-score-focus .kpi-bg {
    min-height: var(--kpi-component-card-height) !important;
    height: var(--kpi-component-card-height) !important;
  }
}

@media (max-width: 767.98px) {
  .kpi-summary-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ela-ach"
      "ela-lg"
      "ela-lq"
      "math-ach"
      "math-lg"
      "math-lq"
      "aux-one"
      "aux-two"
      "aux-three"
      "aux-four"
      "aux-five"
      "aux-six"
      "total";
  }
}