/* =========================================================
   Report-specific styles
   ========================================================= */

   /* Screen-reader-only content */
.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;
}


/* =========================================================
   Body styling
   ========================================================= */

.section-layout h2 {
  text-align: left;
  margin-top: 4rem;
}

.section-layout h3 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 0.1rem;

}

/* Constrain donut chart width */
.mai-chart-container {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  margin: 1rem auto;
  position: relative
}

.mai-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.mai-chart-container:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   Table styling
   ========================================================= */

.mai-report-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

.mai-report-table:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Column headers */
.mai-report-table thead th {
  text-align: left;
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  background-color: #23397E !important;
  color: #ffffff;
}

/* Row headers (first column) */
.mai-report-table tbody th {
  padding: 0.6rem 0.75rem;
  background-color: #b4c9d7 !important;
  font-weight: 400;
  color: #000000 !important;
  border-bottom: 1px solid #ffffff !important;
}

/* Center‑align numeric column headers */
.mai-report-table thead th:not(:first-child) {
  text-align: center;
}

/* Numeric cells */
.mai-report-table tbody td {
  text-align: right;
}

/* Data cells */
.mai-report-table tbody td {
  padding: 0.6rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid #ffffff;
}

/* Zebra striping */
.mai-report-table tbody tr:nth-child(even) {
  background-color: #f7f9fb;
}

/* Constrain visible table width */
.mai-table-container {
  max-width: 700px;
  margin: 0 auto 2rem;
  overflow-x: auto;   /* safety for narrow screens */
}

/* TOTAL row */
.mai-report-table tr.is-total-row {
  font-weight: 700;
  background-color: #d6e1e8 !important;
}

/* Make the TOTAL row label bold */
.mai-report-table tr.is-total-row th {
  font-weight: 700;
}

/* TOTAL row separator */
.mai-report-table tr.is-total-row > th,
.mai-report-table tr.is-total-row > td {
  border-top: 2px solid #23397E;
}

/* TOTAL column */
.mai-report-table .is-total-col {
  font-weight: 700;
  background-color: #d6e1e8 !important ;
  border-left: 2px solid #23397E
}

/* When a cell is BOTH in total row AND total column */
.mai-report-table tr.is-total-row .is-total-col {
  background-color: #c8dae8; /* slightly stronger emphasis */
}


/* =========================================================
   Vertical spacing utilities
   ========================================================= */

.section-spacer {
  height: 1rem;
}

.section-spacer--sm {
  height: 0.5rem;
}

.section-spacer--md {
  height: 1.5rem;
}

.section-spacer--lg {
  height: 2.5rem;
}


/* =========================================================
   Metric Group card styling
   ========================================================= */

.metric-group {
  background-color: #eef4f9;
  color: #23397E;
  padding: 1.5rem;
  max-width: 500px;
  border-radius: 6px;
  border: 1px solid #23397E;
  margin: 1.5rem auto;
  text-align: center;
}

.metric-card--primary .metric-card__value {
  font-size: 5rem;
  font-weight: 400;
  margin-bottom: 0.1rem;
}

.metric-card--primary .metric-card__label {
  font-size: 1.25rem;
  margin-bottom: 0.1rem;
}

.metric-card--primary .metric-card__sublabel {
  font-size: 1rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}

.metric-group__divider {
  width: 85%;
  height: 1px;
  margin: 1rem auto;
  background-color: #23397e;
}

.metric-card--secondary .metric-card__value {
  font-size: 2.5rem;
  font-weight:400;
}

.metric-card--secondary .metric-card__label {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 0.1rem;
}

.metric-card--secondary .metric-card__sublabel {
  font-size: 0.9rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}

.metric-group:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}