/* MANHJ PRO — iOS/mobile header popover hotfix.
   Keep header menus inside the sticky header stacking context instead of using
   position:fixed. Safari treats fixed descendants of a backdrop-filtered
   sticky header as a special containing block, which can crop the menu. */

@media (max-width:760px){
  html.manhj-v33-ready #appView .topbar,
  html.manhj-v33-ready #appView .topbar-actions,
  html.manhj-v33-ready #notificationPopover,
  html.manhj-v33-ready #accountPopover{
    overflow:visible!important;
  }

  html.manhj-v33-ready #notificationPopover[open] .notification-popover-card,
  html.manhj-v33-ready #accountPopover[open] .header-popover-card{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    inset-inline-start:auto!important;
    inset-inline-end:0!important;
    width:min(92vw,390px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 100px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:140!important;
  }

  /* The notification card has an inline top value; this rule deliberately
     wins so both top buttons behave the same on iPhone/iPad. */
  html.manhj-v33-ready #notificationPopover[open] .notification-popover-card{
    margin:0!important;
  }
}

@media (max-width:430px){
  html.manhj-v33-ready #notificationPopover[open] .notification-popover-card,
  html.manhj-v33-ready #accountPopover[open] .header-popover-card{
    width:min(94vw,390px)!important;
    max-width:calc(100vw - 14px)!important;
  }
}

/* Compact iPhone/tablet dashboard header: preserve the round school emblem.
   Never let the bilingual title or four utility buttons squeeze/crop the logo. */
@media (max-width:760px){
  html.manhj-v33-ready #appView .topbar{
    box-sizing:border-box;
    max-width:100%;
    gap:6px;
    padding-inline:max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-left,0px));
  }
  html.manhj-v33-ready #appView .topbar-brand{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    align-items:center;
    gap:7px;
  }
  html.manhj-v33-ready #appView .topbar-brand-logo{
    display:block;
    box-sizing:border-box;
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px;
    max-width:38px;
    padding:2px!important;
    object-fit:contain!important;
    object-position:center;
    border-radius:50%!important;
    background:rgba(30,61,112,.16);
    border:1px solid rgba(79,135,220,.28);
    box-shadow:none;
    transform:none;
  }
  html.manhj-v33-ready #appView .topbar-brand>div{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
  }
  html.manhj-v33-ready #appView .topbar-brand .eyebrow{
    display:block;
    margin:0;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.61rem;
  }
  html.manhj-v33-ready #appView #pageTitle{
    display:block;
    margin:2px 0 0;
    line-height:1.35;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  html.manhj-v33-ready #appView .topbar-actions{
    flex:0 0 auto;
    min-width:0;
    gap:3px;
  }
}
@media (max-width:460px){
  html.manhj-v33-ready #appView .topbar-brand .eyebrow{display:none}
  html.manhj-v33-ready #appView .topbar-brand-logo{
    flex-basis:36px!important;width:36px!important;height:36px!important;min-width:36px;
  }
  html.manhj-v33-ready #appView #pageTitle{font-size:.93rem}
}