/* YENTUMI Gradebook Enterprise — Fixed Mobile App Shell
   Step 5.63 / Release 2026.08.29.068
   One non-scrolling, safe-area-aware app header across staff and family portals. */

:root{
  --gb-mobile-header-core:64px;
  --gb-mobile-safe-top:env(safe-area-inset-top,0px);
  --gb-mobile-safe-right:env(safe-area-inset-right,0px);
  --gb-mobile-safe-left:env(safe-area-inset-left,0px);
  --gb-mobile-shell-top:calc(var(--gb-mobile-header-core) + var(--gb-mobile-safe-top));
  --gb-mobile-header-bg:#0b2545;
  --gb-mobile-header-fg:#ffffff;
}

@media (max-width:800px){
  html.gradebook-phone-app,
  html.gradebook-installed-app.gradebook-phone-app{overscroll-behavior-y:contain}

  /* ---------------------------------------------------------------------
     STAFF / SCHOOL / SYSTEM ADMIN / TEACHER APP SHELL
     ------------------------------------------------------------------ */
  body.enterprise-shell-v3.dashboard-shell .app-header,
  body.dashboard-shell .app-header{
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:var(--gb-mobile-shell-top)!important;
    min-height:var(--gb-mobile-shell-top)!important;
    box-sizing:border-box!important;
    padding:
      var(--gb-mobile-safe-top)
      max(10px,var(--gb-mobile-safe-right))
      0
      max(10px,var(--gb-mobile-safe-left))!important;
    z-index:1180!important;
    display:grid!important;
    align-items:center!important;
    background:var(--gb-mobile-header-bg)!important;
    color:var(--gb-mobile-header-fg)!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 6px 20px rgba(3,18,36,.18)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:translateZ(0)!important;
    will-change:transform!important;
    isolation:isolate;
  }

  /* Fixed positioning removes the header from document flow, therefore every
     authenticated page receives one consistent top offset. */
  body.enterprise-shell-v3.dashboard-shell>.shell,
  body.enterprise-shell-v3.dashboard-shell>main.shell,
  body.dashboard-shell>.shell,
  body.dashboard-shell>main.shell{
    margin-top:0!important;
    padding-top:calc(var(--gb-mobile-shell-top) + 18px)!important;
    scroll-margin-top:var(--gb-mobile-shell-top)!important;
  }

  html{scroll-padding-top:calc(var(--gb-mobile-shell-top) + 12px)!important}

  /* Header controls keep a strong, touch-friendly contrast on the navy bar. */
  body.dashboard-shell .app-header :is(.mobile-sidebar-toggle,.pwa-refresh-control,.theme-toggle),
  body.enterprise-shell-v3 .app-header :is(.mobile-sidebar-toggle,.pwa-refresh-control,.theme-toggle),
  body.dashboard-shell .app-header .notification-menu>summary,
  body.enterprise-shell-v3 .app-header .notification-menu>summary,
  body.dashboard-shell .app-header .enterprise-user-menu>summary,
  body.enterprise-shell-v3 .app-header .enterprise-user-menu>summary{
    background:rgba(255,255,255,.12)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  body.dashboard-shell .app-header :is(.mobile-sidebar-toggle,.pwa-refresh-control,.theme-toggle):active,
  body.enterprise-shell-v3 .app-header :is(.mobile-sidebar-toggle,.pwa-refresh-control,.theme-toggle):active,
  body.dashboard-shell .app-header .notification-menu>summary:active,
  body.enterprise-shell-v3 .app-header .notification-menu>summary:active,
  body.dashboard-shell .app-header .enterprise-user-menu>summary:active,
  body.enterprise-shell-v3 .app-header .enterprise-user-menu>summary:active{
    background:rgba(255,255,255,.2)!important;
  }

  body.enterprise-shell-v3 .app-header :is(.header-product,.header-school,.enterprise-platform-context),
  body.dashboard-shell .app-header :is(.header-product,.header-school,.enterprise-platform-context){color:#fff!important}
  body.enterprise-shell-v3 .app-header :is(.header-product,.header-school,.enterprise-platform-context) :is(b,small,span),
  body.dashboard-shell .app-header :is(.header-product,.header-school,.enterprise-platform-context) :is(b,small,span){color:inherit!important}

  body.enterprise-shell-v3 .app-header .enterprise-period-context b,
  body.dashboard-shell .app-header .enterprise-period-context b{
    background:rgba(255,255,255,.12)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:#fff!important;
  }
  body.enterprise-shell-v3 .app-header .enterprise-user-avatar,
  body.dashboard-shell .app-header .enterprise-user-avatar{
    background:#fff!important;
    color:#0b2545!important;
    border-color:rgba(255,255,255,.85)!important;
  }
  body.enterprise-shell-v3 .app-header .notification-menu>summary em,
  body.dashboard-shell .app-header .notification-menu>summary em{border-color:#0b2545!important}

  /* Popovers open below the permanent app bar instead of beneath it. */
  body.enterprise-shell-v3 .enterprise-user-popover,
  body.dashboard-shell .enterprise-user-popover,
  body.enterprise-shell-v3 .notification-popover,
  body.dashboard-shell .notification-popover{
    top:calc(var(--gb-mobile-shell-top) + 8px)!important;
    max-height:calc(100dvh - var(--gb-mobile-shell-top) - 18px)!important;
  }

  /* The navigation drawer occupies the viewport below the permanent app bar.
     The header remains visible so the user never loses orientation. */
  body.enterprise-shell-v3.dashboard-shell .app-sidebar,
  body.dashboard-shell .app-sidebar{
    position:fixed!important;
    top:var(--gb-mobile-shell-top)!important;
    bottom:0!important;
    height:calc(100dvh - var(--gb-mobile-shell-top))!important;
    max-height:calc(100dvh - var(--gb-mobile-shell-top))!important;
    z-index:1160!important;
    padding-bottom:max(16px,env(safe-area-inset-bottom,0px))!important;
  }
  body.enterprise-shell-v3.dashboard-shell .sidebar-overlay,
  body.dashboard-shell .sidebar-overlay{
    position:fixed!important;
    top:var(--gb-mobile-shell-top)!important;
    bottom:0!important;
    height:auto!important;
    z-index:1150!important;
  }

  /* ---------------------------------------------------------------------
     PARENT & LEARNER APP
     ------------------------------------------------------------------ */
  body.parent-family-app .parent-app-header{
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:var(--gb-mobile-shell-top)!important;
    min-height:var(--gb-mobile-shell-top)!important;
    box-sizing:border-box!important;
    padding:
      var(--gb-mobile-safe-top)
      max(12px,var(--gb-mobile-safe-right))
      0
      max(12px,var(--gb-mobile-safe-left))!important;
    z-index:1180!important;
    display:flex!important;
    align-items:center!important;
    background:var(--gb-mobile-header-bg)!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 6px 20px rgba(3,18,36,.18)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:translateZ(0)!important;
    will-change:transform!important;
  }
  body.parent-family-app .parent-dashboard{
    padding-top:calc(var(--gb-mobile-shell-top) + 12px)!important;
  }
  body.parent-family-app .parent-brand-logo{
    background:#fff!important;
    border-radius:11px!important;
    padding:4px 7px!important;
    max-height:50px!important;
  }
  body.parent-family-app .parent-brand-lockup :is(b,small){color:#fff!important}
  body.parent-family-app .parent-header-button,
  body.parent-family-app .parent-avatar-button{
    background:rgba(255,255,255,.12)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  body.parent-family-app .parent-header-button em{border-color:#0b2545!important}

  /* ---------------------------------------------------------------------
     PUBLIC PRODUCT LANDING PAGE
     ------------------------------------------------------------------ */
  body.landing-body .landing-nav.enterprise-landing-nav{
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:var(--gb-mobile-shell-top)!important;
    min-height:var(--gb-mobile-shell-top)!important;
    box-sizing:border-box!important;
    padding:
      var(--gb-mobile-safe-top)
      max(12px,var(--gb-mobile-safe-right))
      0
      max(12px,var(--gb-mobile-safe-left))!important;
    z-index:1180!important;
    background:var(--gb-mobile-header-bg)!important;
    color:#fff!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 6px 20px rgba(3,18,36,.18)!important;
    transform:translateZ(0)!important;
    will-change:transform!important;
  }

  body.landing-body .landing-nav.enterprise-landing-nav .landing-brand{color:#fff!important}
  body.landing-body .landing-nav.enterprise-landing-nav .landing-brand :is(b,small){color:#fff!important}
  body.landing-body .landing-nav.enterprise-landing-nav .landing-brand img{background:#fff!important;border-radius:10px!important;padding:3px 5px!important}
  body.landing-body .landing-nav.enterprise-landing-nav :is(.landing-signin,.landing-register){border-color:rgba(255,255,255,.3)!important}
  body.landing-body>main{padding-top:var(--gb-mobile-shell-top)!important}

  /* Login portals do not use the full authenticated app bar. In installed
     mode the system status area still receives the Gradebook navy backdrop. */
  body.pwa-auth-page::before{
    content:"";position:fixed;z-index:1170;left:0;right:0;top:0;
    height:var(--gb-mobile-safe-top);background:var(--gb-mobile-header-bg);
    pointer-events:none
  }

  /* Any in-page anchor should stop below the fixed bar. */
  body.dashboard-shell [id],
  body.parent-family-app [id],
  body.landing-body [id]{scroll-margin-top:calc(var(--gb-mobile-shell-top) + 14px)}
}

/* Narrow phones: preserve 44px touch targets while recovering horizontal room. */
@media (max-width:380px){
  :root{--gb-mobile-header-core:60px}
  body.parent-family-app .parent-brand-logo{width:min(45vw,158px)!important}
}

/* Installed iPhone/Android app: suppress browser-like rubber-band refresh feel
   while keeping normal vertical scrolling inside Gradebook. */
@media (display-mode:standalone) and (max-width:820px){
  html,body{overscroll-behavior-y:contain}
}

/* Print output must never inherit app-shell positioning. */
@media print{
  body.dashboard-shell .app-header,
  body.enterprise-shell-v3.dashboard-shell .app-header,
  body.parent-family-app .parent-app-header,
  body.landing-body .landing-nav.enterprise-landing-nav{
    position:static!important;
    height:auto!important;
    min-height:0!important;
    padding-top:0!important;
    transform:none!important;
    box-shadow:none!important;
  }
  body.dashboard-shell>.shell,
  body.enterprise-shell-v3.dashboard-shell>.shell,
  body.parent-family-app .parent-dashboard,
  body.landing-body>main{padding-top:0!important}
}