/* ===== Layout & Card ===== */
.stats-wrap {
  margin: 65px;
  border-top: 2px solid #d8d8d8;
}

.stats-inner { margin: 0 auto; max-width: 1200px; padding: 16px; background:#f7f7f7; border:1px solid #dcdcdc; }

.stats-grid {
  display: flex;
  gap: 40px;
  background-color: #ececed;
  padding: 40px;
}

.stats-card {
  flex: 1 1 50%;
}



.stats-card h3 {
  font-family: 'Source Serif 4';
  font-size: 22px;
  font-weight:700;
  color:#222;
  margin:0 0 22px;
}

/* ===== Chart box ===== */
.chart-box {
  height: 401px;
}

/* ===== Table ===== */
.kpi-table-scroll {
  overflow:auto;
}

.kpi-table {
  width:100%;
  border-collapse:collapse;
}

.kpi-table thead th {
  text-align:left;
  padding:10px 0;
  font-weight:700;
  border-bottom: 2px solid #dcdcdc;
  font-size: 13px;
}
.kpi-table tbody td {
  padding:10px 0;
  border-bottom: 2px solid #dcdcdc;
  vertical-align:top;
  font-size: 13px;
}

.kpi-rowlabel {
  color:#1a1a1a;
  white-space:nowrap;
}

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.muted { color:#6b7280; }
/* .negative { color:#dc2626; } */

/* ===== Footnote ===== */
.stats-footnote {
  margin: 14px 2px 0; font-size:13px; color:#374151;
  font-style: italic;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* mobie optimization */

@media (max-width: 768px){
  .stats-grid {
    flex-direction: column;
    padding: 20px;
  }

  .stats-wrap {
    margin: 30px;
  }

  .kpi-table thead th,
  .kpi-table tbody td {
    font-size: 10px;
  }

  .chart-box {
    height: 220px;
  }
}