/* EDUHUNT R412 — Principal Portal only.
   Mobile/tablet programme-role line + 3-column dashboard KPI layout.
   Desktop and every other portal are intentionally untouched. */
@media (max-width:1024px){
  /* Show the school Programme immediately before PRINCIPAL on mobile/tablet.
     The original desktop role text remains in the DOM and is not changed. */
  body[data-portal-role="PRINCIPAL"] #topbarRoleLabel[data-mobile-principal-role]{
    font-size:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body[data-portal-role="PRINCIPAL"] #topbarRoleLabel[data-mobile-principal-role]::before{
    content:attr(data-mobile-principal-role);
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:clamp(12px,2.8vw,16px)!important;
    line-height:1.08!important;
    font-weight:950!important;
    letter-spacing:.025em!important;
  }

  /* Principal Dashboard only: 3 cards per row on phone and tablet. */
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] #principalDashboardDynamic > .kpi-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] #principalDashboardDynamic > .kpi-grid .kpi-card{
    min-width:0!important;
    min-height:126px!important;
    padding:11px 7px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:7px!important;
  }
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] .kpi-card .kpi-icon{
    position:static!important;
    inset:auto!important;
    margin:0 auto 2px!important;
    align-self:center!important;
  }
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] .kpi-card b{
    width:100%!important;
    text-align:center!important;
    font-size:clamp(20px,5.2vw,28px)!important;
    line-height:1.05!important;
    overflow-wrap:anywhere!important;
  }
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] .kpi-card .kpi-label,
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] .kpi-card > span:not(.kpi-icon){
    width:100%!important;
    margin:0!important;
    text-align:center!important;
    font-size:clamp(10px,2.6vw,13px)!important;
    line-height:1.15!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  /* Explicitly keep the non-clickable Tasks card centered too. */
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] .kpi-grid .kpi-card:last-child{
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
}

@media (max-width:560px){
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] #principalDashboardDynamic > .kpi-grid{
    gap:6px!important;
  }
  body[data-portal-role="PRINCIPAL"][data-portal-module="dashboard"] #principalDashboardDynamic > .kpi-grid .kpi-card{
    min-height:116px!important;
    padding:9px 5px!important;
    gap:5px!important;
  }
}