/* YENTUMI Gradebook Enterprise — Viewport-Driven Mobile Shell
   Step 5.65 / Release 2026.08.29.070
   Phone-width means the complete Gradebook mobile UI, whether the viewport
   belongs to a real phone, an installed PWA, browser responsive mode or a
   narrow desktop browser window. Device-only touch controls remain JS-gated. */

:root{
  --gb-viewport-dock-height:82px;
  --gb-viewport-dock-gap:10px;
}

/* STAFF / SCHOOL ADMIN / SYSTEM ADMIN / TEACHER ------------------------- */
@media (max-width:800px){
  /* The role-aware dock is already emitted server-side for authenticated
     Gradebook pages. Visibility is now a layout decision, not an install-state
     decision. */
  body.dashboard-shell .pwa-app-dock{
    position:fixed!important;
    z-index:1170!important;
    left:max(14px,env(safe-area-inset-left,0px))!important;
    right:max(14px,env(safe-area-inset-right,0px))!important;
    bottom:max(var(--gb-viewport-dock-gap),env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    min-height:var(--gb-viewport-dock-height)!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    padding:6px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(211,221,233,.94)!important;
    border-radius:25px!important;
    background:rgba(255,255,255,.97)!important;
    color:#536a80!important;
    box-shadow:0 16px 44px rgba(8,27,51,.18)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateZ(0)!important;
  }

  body.dashboard-shell .pwa-app-dock .pwa-dock-item{
    min-width:0!important;
    min-height:62px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:6px 3px!important;
    border:0!important;
    border-radius:18px!important;
    background:transparent!important;
    color:#536a80!important;
    text-decoration:none!important;
    box-shadow:none!important;
    line-height:1!important;
    overflow:hidden!important;
  }
  body.dashboard-shell .pwa-app-dock .pwa-dock-item>span{
    width:25px!important;
    height:25px!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 25px!important;
  }
  body.dashboard-shell .pwa-app-dock .pwa-dock-item svg{
    width:23px!important;
    height:23px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  body.dashboard-shell .pwa-app-dock .pwa-dock-item>b{
    display:block!important;
    max-width:100%!important;
    margin:0!important;
    color:inherit!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.dashboard-shell .pwa-app-dock .pwa-dock-item.active,
  body.dashboard-shell .pwa-app-dock .pwa-dock-item:hover{
    background:var(--school-accent-soft,#eef4ff)!important;
    color:var(--school-accent-dark,#175cd3)!important;
  }

  /* Fixed bottom navigation must reserve real content space on every
     phone-width viewport, not only in installed-app mode. */
  body.dashboard-shell>main.shell,
  body.dashboard-shell>.shell,
  body.enterprise-shell-v3.dashboard-shell>main.shell,
  body.enterprise-shell-v3.dashboard-shell>.shell{
    padding-bottom:calc(116px + env(safe-area-inset-bottom,0px))!important;
  }
  body.dashboard-shell .site-footer{display:none!important}

  /* Keep transient connectivity feedback above the dock. */
  .pwa-network-status{
    bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Preserve existing interaction rules outside standalone mode too. */
  body.sidebar-mobile-open .pwa-app-dock,
  html.mobile-keyboard-open .pwa-app-dock,
  html.gradebook-sheet-open .pwa-app-dock{
    transform:translateY(118%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html[data-theme="dark"] body.dashboard-shell .pwa-app-dock{
    background:rgba(17,29,44,.98)!important;
    border-color:#30455e!important;
    color:#9fb0c5!important;
    box-shadow:0 18px 48px rgba(0,0,0,.42)!important;
  }
  html[data-theme="dark"] body.dashboard-shell .pwa-app-dock .pwa-dock-item{
    color:#9fb0c5!important;
  }
  html[data-theme="dark"] body.dashboard-shell .pwa-app-dock .pwa-dock-item.active,
  html[data-theme="dark"] body.dashboard-shell .pwa-app-dock .pwa-dock-item:hover{
    background:color-mix(in srgb,var(--school-accent,#3974db) 22%,#111d2c)!important;
    color:#eaf2ff!important;
  }
}

@media (max-width:359px){
  body.dashboard-shell .pwa-app-dock{
    left:max(8px,env(safe-area-inset-left,0px))!important;
    right:max(8px,env(safe-area-inset-right,0px))!important;
    padding:5px!important;
    border-radius:22px!important;
  }
  body.dashboard-shell .pwa-app-dock .pwa-dock-item{min-height:58px!important;padding-inline:2px!important}
  body.dashboard-shell .pwa-app-dock .pwa-dock-item>b{font-size:9px!important}
}

/* PARENT & LEARNER PORTAL ---------------------------------------------- */
@media (max-width:760px){
  /* Parent navigation was previously limited to display-mode: standalone.
     The same family-app navigation now appears in any true phone-width view. */
  body.parent-family-app .parent-dashboard{
    padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))!important;
  }
  body.parent-family-app .parent-mobile-dock{
    position:fixed!important;
    left:max(12px,env(safe-area-inset-left,0px))!important;
    right:max(12px,env(safe-area-inset-right,0px))!important;
    bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
    z-index:1170!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    padding:5px!important;
    border:1px solid rgba(209,221,236,.94)!important;
    border-radius:25px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 18px 50px rgba(10,33,68,.18)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  body.parent-family-app .parent-mobile-dock>a,
  body.parent-family-app .parent-mobile-dock>button{
    position:relative!important;
    min-width:0!important;
    min-height:58px!important;
    margin:0!important;
    padding:6px 2px!important;
    border:0!important;
    border-radius:17px!important;
    background:transparent!important;
    color:#5f718a!important;
    text-decoration:none!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
  }
  body.parent-family-app .parent-mobile-dock svg{width:20px!important;height:20px!important}
  body.parent-family-app .parent-mobile-dock b{
    max-width:100%!important;
    font-size:8.5px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.parent-family-app .parent-mobile-dock>[data-parent-nav].is-active{
    background:#edf3ff!important;
    color:#174fae!important;
  }
  html[data-theme="dark"] body.parent-family-app .parent-mobile-dock{
    background:rgba(17,31,50,.97)!important;
    border-color:#2d425a!important;
  }
  html[data-theme="dark"] body.parent-family-app .parent-mobile-dock>a,
  html[data-theme="dark"] body.parent-family-app .parent-mobile-dock>button{color:#9eafc3!important}
  html[data-theme="dark"] body.parent-family-app .parent-mobile-dock>[data-parent-nav].is-active{
    background:#172f58!important;
    color:#a9c4ff!important;
  }
}

/* A document being printed must never inherit the viewport app dock. */
@media print{
  .pwa-app-dock,.parent-mobile-dock{display:none!important}
}