/* EDUHUNT R418 — Principal People hub copy/layout + mobile/tablet header utility controls.
   Principal portal only. Desktop remains unchanged. */

@media (max-width:1024px){
  /* PEOPLE information must use the whole available content width. */
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-people-login-guide{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:14px 0 0!important;
    padding:0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:18px 20px!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box p{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:17px!important;
    line-height:1.52!important;
    overflow-wrap:anywhere!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box p b{
    display:block!important;
    font-size:18px!important;
    line-height:1.25!important;
    font-weight:950!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box p span,
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box p strong{
    font-size:17px!important;
    line-height:1.52!important;
  }

  /* Move Theme + Profile + WhatsApp to the extreme top-right on mobile/tablet.
     The dock stays compact so it does not consume the page body. */
  body[data-portal-role="PRINCIPAL"] .principal-mobile-utility-dock{
    position:fixed!important;
    top:max(9px,env(safe-area-inset-top))!important;
    right:8px!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:50px 35px 35px!important;
    align-items:center!important;
    justify-content:end!important;
    gap:4px!important;
    width:auto!important;
    min-width:0!important;
    min-height:40px!important;
    padding:3px 4px!important;
    border-radius:13px!important;
    z-index:1505!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-utility-dock.is-obstructed{
    transform:none!important;
  }

  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #desktopThemeSwitcher{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:50px!important;
    min-width:50px!important;
    height:34px!important;
    min-height:34px!important;
    padding:2px!important;
    margin:0!important;
    border-radius:10px!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock .desktop-theme-choice{
    width:22px!important;
    min-width:22px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0!important;
    border-radius:8px!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock .desktop-theme-choice>span{
    font-size:13px!important;
    line-height:1!important;
  }

  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #accountButton,
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #principalCoordinatorWhatsappButton{
    width:35px!important;
    min-width:35px!important;
    height:35px!important;
    min-height:35px!important;
    padding:2px!important;
    margin:0!important;
    border-radius:10px!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #accountButton .avatar{
    width:29px!important;
    min-width:29px!important;
    height:29px!important;
    min-height:29px!important;
    border-radius:8px!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #principalCoordinatorWhatsappButton svg{
    width:19px!important;
    height:19px!important;
  }

  /* Reserve the exact compact control width in the topbar title lane. */
  body[data-portal-role="PRINCIPAL"] .topbar-title{
    padding-right:128px!important;
    box-sizing:border-box!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-coord-wa-panel{
    top:58px!important;
    right:8px!important;
    bottom:auto!important;
  }
}

@media (min-width:700px) and (max-width:1024px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
  }
}

@media (max-width:560px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box{
    padding:16px!important;
    gap:13px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box p,
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box p span,
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box p strong{
    font-size:16px!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--people .principal-login-guide-box p b{
    font-size:17px!important;
  }
  body[data-portal-role="PRINCIPAL"] .topbar-title{
    padding-right:124px!important;
  }
}