/* Supplemental reports only; keep existing UTP panels and printed documents intact. */
html body.is-authenticated:not(.report-print-body):not(.report-pdf-render) main#appMain #module-utp .utp-supplement {
  margin: 10px 0; padding: 12px; border: 1px solid #d5e4f5; border-radius: 10px;
  background: #fff; color: #12385d; min-width: 0; max-width: 100%;
}
#module-utp .utp-supplement summary { cursor: pointer; font-weight: 700; padding: 5px 0; color: #145fca; }
html body.is-authenticated main#appMain #module-utp .utp-supplement-filters {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
  gap: 8px 12px !important; margin: 10px 0 !important; align-items: end !important;
}
html body.is-authenticated main#appMain #module-utp .utp-supplement-filters label {
  display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; margin: 0 !important;
}
#module-utp .utp-supplement-filters :is(select, input) { width: 100%; min-height: 36px; }
html body.is-authenticated main#appMain #module-utp .utp-supplement-actions {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 8px 0 !important;
}
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-utp #utpSupplement.utp-supplement .utp-supplement-actions > button {
  width: auto !important; flex: 0 1 auto !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 7px 12px !important;
}
.utp-supplement-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.utp-supplement-stats article { padding: 8px 12px; border-left: 3px solid #ffcf21; background: #f3f8ff; }
.utp-supplement-stats span, .utp-supplement-stats strong { display: block; }
.utp-supplement-stats strong { font-size: 1.3rem; color: #12385d; }
.utp-supplement-chart { display: grid; gap: 5px; margin: 10px 0; }
.utp-supplement-chart > div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(60px, 3fr) 60px; gap: 8px; align-items: center; }
.utp-supplement-chart meter { width: 100%; height: 18px; accent-color: #145fca; }
.utp-supplement-chart meter::-webkit-meter-optimum-value { background: #145fca; }
.utp-supplement-chart b { text-align: right; }
#module-utp .utp-supplement p { margin: 8px 0; font-size: .82rem; line-height: 1.4; }
#module-utp .utp-supplement .table-wrap { max-width: 100%; overflow-x: auto; }
html body.is-authenticated main#appMain #module-utp .utp-supplement table { width: 100% !important; min-width: 640px; }
@media (max-width: 480px) {
  .utp-supplement-chart > div { grid-template-columns: minmax(80px, 1fr) minmax(40px, 1.5fr) 48px; gap: 5px; }
}