/* EDUHUNT R420 — Principal mobile/tablet utility controls at bottom-right.
   Scope: Principal only, max-width 1024px. Desktop unchanged. */
@media (max-width:1024px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-utility-dock{
    position:fixed!important;
    top:auto!important;
    right:10px!important;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
    left:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:40px 40px 40px!important;
    align-items:center!important;
    justify-content:end!important;
    gap:7px!important;
    width:auto!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    padding:4px 5px!important;
    box-sizing:border-box!important;
    border-radius:15px!important;
    z-index:1505!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:opacity .16s ease,visibility .16s ease,transform .16s ease!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-utility-dock.is-obstructed{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,7px,0)!important;
  }

  /* All three outer controls occupy the same 40 x 40 footprint. */
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #desktopThemeSwitcher,
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #accountButton,
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #principalCoordinatorWhatsappButton{
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #desktopThemeSwitcher{
    position:relative!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:1px!important;
    padding:2px!important;
    border-radius:11px!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock .desktop-theme-choice{
    width:17px!important;
    min-width:17px!important;
    max-width:17px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    padding:0!important;
    border-radius:8px!important;
    display:grid!important;
    place-items:center!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock .desktop-theme-choice>span{
    font-size:12px!important;
    line-height:1!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock .desktop-theme-choice b{
    display:none!important;
  }

  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #accountButton,
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #principalCoordinatorWhatsappButton{
    position:relative!important;
    inset:auto!important;
    padding:3px!important;
    border-radius:11px!important;
    display:grid!important;
    place-items:center!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #accountButton .avatar{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    border-radius:8px!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #accountButton .account-copy{
    display:none!important;
  }
  body[data-portal-role="PRINCIPAL"] #principalMobileUtilityDock #principalCoordinatorWhatsappButton svg{
    width:21px!important;
    height:21px!important;
  }

  /* Controls no longer occupy the top-right header, so return that space to the school title. */
  body[data-portal-role="PRINCIPAL"] .topbar-title{
    padding-right:0!important;
  }

  /* WhatsApp contact panel opens upward from the new bottom-right dock. */
  body[data-portal-role="PRINCIPAL"] .principal-coord-wa-panel{
    top:auto!important;
    right:10px!important;
    bottom:calc(132px + env(safe-area-inset-bottom))!important;
    left:auto!important;
  }
}

@media (max-width:480px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-utility-dock{
    right:8px!important;
    bottom:calc(74px + env(safe-area-inset-bottom))!important;
    gap:6px!important;
  }
}