/* ========================================================================
   EDUHUNT R407 — RESULT READABILITY + STAY-IN-PLACE INTERACTIONS + OLT KPI ROW
   Loaded last. UI-only overrides; no marks/exam/database logic.
   ======================================================================== */

/* 1) Principal Student Result History: increase the two circled result tables
      by ~3px while retaining the exact six-column table on every device. */
body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) .table-toolbar strong{
  font-size:14px!important;
  line-height:1.2!important;
}
body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) th{
  font-size:13px!important;
  line-height:1.15!important;
  padding:8px 5px!important;
}
body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) td{
  font-size:14px!important;
  line-height:1.2!important;
  padding:8px 5px!important;
}

/* 2) EduHunt Staff circled guidance copy: +3px from R400 values. Higher
      specificity intentionally beats the runtime-injected R400 style. */
html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p{
  font-size:21px!important;
  line-height:1.5!important;
}
html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p:nth-child(3),
html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p:nth-child(4){
  font-size:28px!important;
  line-height:1.42!important;
  font-weight:850!important;
}

/* 3) Principal Online Test Participation KPI cards: keep the five summary
      cards as one compact row and center all copy. The JS now places this row
      directly below the Student Activity / Tests tabs and above filters. */
body[data-portal-role="PRINCIPAL"] #content .otr82-kpis{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:9px!important;
  width:100%!important;
  margin:0 0 12px!important;
  overflow:visible!important;
}
body[data-portal-role="PRINCIPAL"] #content .otr82-kpi{
  min-width:0!important;
  padding:12px 6px!important;
  text-align:center!important;
  display:grid!important;
  align-content:center!important;
  justify-items:center!important;
}
body[data-portal-role="PRINCIPAL"] #content .otr82-kpi b{
  width:100%!important;
  text-align:center!important;
}
body[data-portal-role="PRINCIPAL"] #content .otr82-kpi span{
  width:100%!important;
  text-align:center!important;
}

@media(max-width:1100px){
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) .table-toolbar strong{font-size:14px!important}
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) th{font-size:12px!important;padding:7px 3px!important}
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) td{font-size:13px!important;padding:7px 3px!important}

  html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p{font-size:19px!important}
  html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p:nth-child(3),
  html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p:nth-child(4){font-size:26px!important}

  body[data-portal-role="PRINCIPAL"] #content .otr82-kpis{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi{padding:10px 3px!important;min-height:74px!important}
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi b{font-size:20px!important;line-height:1.05!important}
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi span{font-size:9px!important;line-height:1.1!important;letter-spacing:.01em!important}
}

@media(max-width:600px){
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) .table-toolbar{padding:8px 7px!important}
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) .table-toolbar strong{font-size:13px!important}
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) th{font-size:10.5px!important;padding:6px 2px!important;line-height:1.08!important}
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) td{font-size:11.5px!important;padding:6px 2px!important;line-height:1.12!important}
  body[data-portal-role="PRINCIPAL"] #content .principal-history-result-symbol{width:22px!important;height:22px!important;font-size:15px!important}

  html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p{font-size:18px!important}
  html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p:nth-child(3),
  html body[data-portal-role="PRINCIPAL"] #content .staff-directory-contact-guidance p:nth-child(4){font-size:25px!important}

  body[data-portal-role="PRINCIPAL"] #content .otr82-kpis{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    margin-bottom:9px!important;
  }
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi{
    min-height:70px!important;
    padding:8px 2px!important;
    border-radius:10px!important;
  }
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi b{font-size:18px!important;line-height:1!important}
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi span{font-size:7.8px!important;line-height:1.08!important;letter-spacing:0!important;overflow-wrap:anywhere!important}
}

@media(max-width:420px){
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) th{font-size:10px!important;padding:5px 1px!important}
  body[data-portal-role="PRINCIPAL"] #content :is(.principal-history-subject-table,.principal-history-response-table) td{font-size:11px!important;padding:5px 1px!important}
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi{min-height:66px!important;padding:7px 1px!important}
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi b{font-size:17px!important}
  body[data-portal-role="PRINCIPAL"] #content .otr82-kpi span{font-size:7px!important}
}