/* EDUHUNT R413 — Principal Portal only.
   Mobile/tablet inner-page heading alignment + compact Exams hub.
   Desktop and every other role are intentionally untouched. */

@media (max-width:1024px){
  /* Every Principal inner page uses the same top row:
     Back button | Page heading | optional page actions.
     This covers Students, Teachers, EduHunt Staff, Execution Status,
     Online Tests and the other Principal inner modules. */
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head{
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:0!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
    padding:0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head > .principal-inner-back{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:start!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head > div:not(.page-actions){
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head h2{
    margin:0!important;
    padding:0!important;
    font-size:clamp(20px,4.2vw,27px)!important;
    line-height:1.08!important;
    font-weight:950!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head p{
    margin:3px 0 0!important;
    font-size:11px!important;
    line-height:1.2!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head > .page-actions{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:end!important;
    margin:0!important;
  }

  /* When actions need more room, keep the title beside Back and place actions
     on a compact second line instead of pushing the title downward. */
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head:has(.page-actions .button:nth-child(2)) > .page-actions{
    grid-column:2 / -1!important;
    grid-row:2!important;
    justify-self:start!important;
    margin-top:6px!important;
  }

  /* Principal mobile/tablet hub headings use the same compact geometry. */
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head{
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    margin:0 0 8px!important;
    padding:0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head > button[data-principal-back]{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head h2{
    margin:0!important;
    padding:0!important;
    font-size:clamp(20px,4.2vw,27px)!important;
    line-height:1.08!important;
    font-weight:950!important;
  }

  /* Exams hub: keep three cards per row and make all ten fit in the visible
     mobile/tablet workspace without creating page-height waste. */
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams{
    margin:0!important;
    padding:0 0 calc(76px + env(safe-area-inset-bottom))!important;
    min-height:0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:clamp(68px,calc((100dvh - 220px - env(safe-area-inset-bottom))/4),82px)!important;
    gap:7px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-item{
    min-width:0!important;
    width:100%!important;
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    padding:6px 5px!important;
    gap:4px!important;
    border-radius:11px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    overflow:hidden!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-emoji{
    width:31px!important;
    min-width:31px!important;
    height:31px!important;
    min-height:31px!important;
    margin:0 auto!important;
    border-radius:9px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-emoji svg{
    width:18px!important;
    height:18px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-item b{
    width:100%!important;
    margin:0!important;
    font-size:clamp(10.5px,2.35vw,13px)!important;
    line-height:1.12!important;
    font-weight:900!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Remove extra top/bottom margins inherited from older Principal mobile CSS. */
  body[data-portal-role="PRINCIPAL"] .content > .principal-inner-page-head:first-child,
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub > .principal-app-page-head:first-child{
    margin-top:0!important;
  }
}

@media (max-width:560px){
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head,
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head{
    grid-template-columns:35px minmax(0,1fr) auto!important;
    column-gap:9px!important;
    margin-bottom:8px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head > .principal-inner-back,
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head > button[data-principal-back]{
    width:35px!important;
    min-width:35px!important;
    height:35px!important;
    min-height:35px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-inner-page-head h2,
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head h2{
    font-size:20px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-grid{
    grid-auto-rows:clamp(66px,calc((100dvh - 215px - env(safe-area-inset-bottom))/4),78px)!important;
    gap:6px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-item{
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    padding:5px 4px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-emoji{
    width:29px!important;
    min-width:29px!important;
    height:29px!important;
    min-height:29px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-item b{
    font-size:10.5px!important;
    line-height:1.08!important;
  }
}