/* EDUHUNT R410 — recipient video cleanup + Principal mobile/tablet 3-column hubs.
   UI only. Loaded after earlier portal styles so legacy mobile rules cannot override it. */

/* Principal mobile/tablet hub: exactly 3 buttons per row. */
@media (max-width:1024px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item{
    width:100%!important;
    min-width:0!important;
    min-height:102px!important;
    padding:10px 5px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item>b,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item>b{
    font-size:13px!important;
    line-height:1.18!important;
    overflow-wrap:anywhere!important;
  }
}
@media (max-width:420px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid{
    gap:6px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item{
    min-height:96px!important;
    padding:8px 4px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item>b,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item>b{
    font-size:12px!important;
  }
}

/* Recipient video playlist rows: keep one clean topic lane and one fixed play arrow. */
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .edu-video-list-row{
  grid-template-columns:28px minmax(0,1fr) 24px!important;
  align-items:center!important;
}
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .edu-video-list-row>div{
  min-width:0!important;
}
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .edu-video-list-row strong{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}