/* Digitera V4307 — Unified Student Header & Navigation
   Loaded after all legacy UI styles so student navigation is identical on
   Beranda and feature pages, readable, and persistent while scrolling. */

:root{
  --student-nav-bg:#ffffff;
  --student-nav-bg-soft:#f8f7fc;
  --student-nav-text:#263247;
  --student-nav-muted:#5d6678;
  --student-nav-border:#e3e0ec;
  --student-nav-primary:#5b21b6;
  --student-nav-primary-hover:#4c1d95;
  --student-nav-primary-soft:#ede9fe;
  --student-nav-primary-soft-2:#f5f3ff;
  --student-nav-danger:#b42318;
  --student-nav-shadow:0 8px 24px rgba(31,35,48,.10);
  --student-nav-top-h:72px;
}

/* ------------------------------------------------------------
   SAME HEADER ON BERANDA + EVERY NORMAL STUDENT FEATURE PAGE
   ------------------------------------------------------------ */
body.role-student:not(.student-play-mode) .student-app-topbar.student-app-topbar-unified,
body.role-student:not(.student-play-mode) .student-app-topbar{
  position:sticky!important;
  position:-webkit-sticky!important;
  top:0!important;
  z-index:1200!important;
  width:100%!important;
  min-height:var(--student-nav-top-h)!important;
  margin:0!important;
  padding:0!important;
  color:var(--student-nav-text)!important;
  background:rgba(255,255,255,.98)!important;
  border:0!important;
  border-bottom:1px solid var(--student-nav-border)!important;
  border-radius:0!important;
  box-shadow:var(--student-nav-shadow)!important;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  isolation:isolate;
}

body.role-student:not(.student-play-mode) .student-app-topbar-inner{
  width:min(100% - 28px,1380px)!important;
  min-height:var(--student-nav-top-h)!important;
  margin:0 auto!important;
  padding:8px 0!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body.role-student:not(.student-play-mode) .student-app-brand{
  min-width:max-content!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  color:var(--student-nav-text)!important;
  text-decoration:none!important;
}
body.role-student:not(.student-play-mode) .student-app-logo{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  padding:4px!important;
  border-radius:13px!important;
  background:#fff!important;
  border:1px solid var(--student-nav-border)!important;
  box-shadow:0 3px 10px rgba(35,31,60,.08)!important;
}
body.role-student:not(.student-play-mode) .student-app-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
body.role-student:not(.student-play-mode) .student-app-brand strong{
  display:block!important;
  color:#202b3c!important;
  font-weight:850!important;
  line-height:1.15!important;
}
body.role-student:not(.student-play-mode) .student-app-brand small{
  display:block!important;
  max-width:160px!important;
  margin-top:2px!important;
  overflow:hidden!important;
  color:var(--student-nav-muted)!important;
  font-weight:650!important;
  line-height:1.2!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* All desktop links keep one visual language on every page. */
body.role-student:not(.student-play-mode) .student-desktop-nav.student-desktop-nav-unified,
body.role-student:not(.student-play-mode) .student-desktop-nav{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:3px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  white-space:nowrap!important;
  background:var(--student-nav-bg-soft)!important;
  border:1px solid #ece9f2!important;
  border-radius:16px!important;
}
body.role-student:not(.student-play-mode) .student-desktop-nav::-webkit-scrollbar{display:none!important}

/* Override old nth-child rules that hid student menus at some widths. */
body.role-student:not(.student-play-mode) .student-desktop-nav > a,
body.role-student:not(.student-play-mode) .student-desktop-nav > a:nth-child(n){
  position:relative!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:42px!important;
  padding:7px 10px!important;
  color:var(--student-nav-text)!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  box-shadow:none!important;
  font-size:.78rem!important;
  font-weight:750!important;
  line-height:1!important;
  text-decoration:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
body.role-student:not(.student-play-mode) .student-desktop-nav > a:hover,
body.role-student:not(.student-play-mode) .student-desktop-nav > a:focus-visible{
  color:var(--student-nav-primary-hover)!important;
  background:#f0edf9!important;
  border-color:#e0d9f4!important;
  outline:none!important;
}
body.role-student:not(.student-play-mode) .student-desktop-nav > a.active,
body.role-student:not(.student-play-mode) .student-desktop-nav > a.active:hover,
body.role-student:not(.student-play-mode) .student-desktop-nav > a[aria-current="page"]{
  color:var(--student-nav-primary)!important;
  background:var(--student-nav-primary-soft)!important;
  border-color:#d9cdf8!important;
  box-shadow:0 2px 7px rgba(91,33,182,.10)!important;
}
body.role-student:not(.student-play-mode) .student-desktop-nav > a.active::after{
  content:""!important;
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:3px!important;
  height:2px!important;
  border-radius:2px!important;
  background:var(--student-nav-primary)!important;
}

body.role-student:not(.student-play-mode) .student-desktop-nav-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:27px!important;
  height:27px!important;
  color:#465267!important;
  background:#fff!important;
  border:1px solid #e5e2ec!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
body.role-student:not(.student-play-mode) .student-desktop-nav-icon svg{
  width:16px!important;
  height:16px!important;
}
body.role-student:not(.student-play-mode) .student-desktop-nav > a:hover .student-desktop-nav-icon,
body.role-student:not(.student-play-mode) .student-desktop-nav > a.active .student-desktop-nav-icon{
  color:#fff!important;
  background:var(--student-nav-primary)!important;
  border-color:var(--student-nav-primary)!important;
}
body.role-student:not(.student-play-mode) .student-desktop-nav-icon .icon-line,
body.role-student:not(.student-play-mode) .student-desktop-nav-icon .icon-fill{
  stroke:currentColor!important;
}
body.role-student:not(.student-play-mode) .student-desktop-nav-icon .icon-fill{fill:currentColor!important}

body.role-student:not(.student-play-mode) .student-app-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
body.role-student:not(.student-play-mode) .app-notification-button.student-notification-button,
body.role-student:not(.student-play-mode) .student-top-exit{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  padding:0!important;
  color:#344056!important;
  background:#fff!important;
  border:1px solid var(--student-nav-border)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
body.role-student:not(.student-play-mode) .app-notification-button.student-notification-button:hover,
body.role-student:not(.student-play-mode) .app-notification-button.student-notification-button.active{
  color:var(--student-nav-primary)!important;
  background:var(--student-nav-primary-soft)!important;
  border-color:#d9cdf8!important;
}
body.role-student:not(.student-play-mode) .student-top-exit:hover{
  color:var(--student-nav-danger)!important;
  background:#fff1f0!important;
  border-color:#f6c7c3!important;
}
body.role-student:not(.student-play-mode) .student-top-code{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:5px 10px!important;
  color:var(--student-nav-text)!important;
  background:#faf9fd!important;
  border:1px solid var(--student-nav-border)!important;
  border-radius:12px!important;
}
body.role-student:not(.student-play-mode) .student-top-code small{color:#596276!important;font-weight:650!important}
body.role-student:not(.student-play-mode) .student-top-code strong{color:#4c1d95!important;font-weight:850!important}

/* Sticky header should never be overlapped by anchor jumps. */
body.role-student:not(.student-play-mode) .student-app-main [id]{scroll-margin-top:calc(var(--student-nav-top-h) + 14px)}

/* ------------------------------------------------------------
   MOBILE: TOP HEADER + FIXED BOTTOM MENU, ALWAYS READABLE
   ------------------------------------------------------------ */
@media(max-width:850px){
  :root{--student-nav-top-h:60px}

  body.role-student:not(.student-play-mode) .student-app-topbar-inner{
    width:calc(100% - 20px)!important;
    min-height:var(--student-nav-top-h)!important;
    padding:6px 0!important;
    gap:8px!important;
  }
  body.role-student:not(.student-play-mode) .student-app-logo{
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
  }
  body.role-student:not(.student-play-mode) .student-app-brand strong{font-size:.92rem!important}
  body.role-student:not(.student-play-mode) .student-app-brand small{max-width:120px!important;font-size:.62rem!important}

  body.role-student:not(.student-play-mode) .student-desktop-nav,
  body.role-student:not(.student-play-mode) .student-desktop-nav.student-desktop-nav-unified{
    display:none!important;
  }
  body.role-student:not(.student-play-mode) .student-top-code{display:none!important}
  body.role-student:not(.student-play-mode) .student-app-actions{margin-left:auto!important}
  body.role-student:not(.student-play-mode) .app-notification-button.student-notification-button,
  body.role-student:not(.student-play-mode) .student-top-exit{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:11px!important;
  }

  body.role-student:not(.student-play-mode) .student-bottom-nav.student-bottom-nav-unified,
  body.role-student:not(.student-play-mode) .student-bottom-nav.student-bottom-nav-simple,
  body.role-student:not(.student-play-mode) .student-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    z-index:1250!important;
    width:auto!important;
    min-height:66px!important;
    margin:0!important;
    padding:6px!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:3px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    color:var(--student-nav-text)!important;
    background:rgba(255,255,255,.985)!important;
    border:1px solid #ded9eb!important;
    border-radius:20px!important;
    box-shadow:0 12px 34px rgba(34,30,54,.20)!important;
    backdrop-filter:saturate(160%) blur(16px);
    -webkit-backdrop-filter:saturate(160%) blur(16px);
    scrollbar-width:none;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav::-webkit-scrollbar{display:none!important}

  body.role-student:not(.student-play-mode) .student-bottom-nav > a,
  body.role-student:not(.student-play-mode) .student-bottom-nav > button{
    position:relative!important;
    min-width:58px!important;
    min-height:54px!important;
    padding:5px 4px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    color:#3f4a5e!important;
    background:transparent!important;
    border:1px solid transparent!important;
    border-radius:15px!important;
    box-shadow:none!important;
    text-decoration:none!important;
    opacity:1!important;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav > a:hover,
  body.role-student:not(.student-play-mode) .student-bottom-nav > button:hover,
  body.role-student:not(.student-play-mode) .student-bottom-nav > a:focus-visible,
  body.role-student:not(.student-play-mode) .student-bottom-nav > button:focus-visible{
    color:var(--student-nav-primary)!important;
    background:var(--student-nav-primary-soft-2)!important;
    outline:none!important;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav > a.active,
  body.role-student:not(.student-play-mode) .student-bottom-nav > button.active,
  body.role-student:not(.student-play-mode) .student-bottom-nav > button.is-open{
    color:var(--student-nav-primary)!important;
    background:var(--student-nav-primary-soft)!important;
    border-color:#d8ccf6!important;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav .student-nav-icon{
    width:28px!important;
    height:28px!important;
    display:grid!important;
    place-items:center!important;
    color:#445066!important;
    background:#f5f3f9!important;
    border:1px solid #e6e1ee!important;
    border-radius:9px!important;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav > a.active .student-nav-icon,
  body.role-student:not(.student-play-mode) .student-bottom-nav > button.active .student-nav-icon,
  body.role-student:not(.student-play-mode) .student-bottom-nav > button.is-open .student-nav-icon{
    color:#fff!important;
    background:var(--student-nav-primary)!important;
    border-color:var(--student-nav-primary)!important;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav .student-nav-icon svg{
    width:17px!important;
    height:17px!important;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav small{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    color:inherit!important;
    font-size:.58rem!important;
    font-weight:800!important;
    line-height:1.05!important;
    text-align:center!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav a::after,
  body.role-student:not(.student-play-mode) .student-bottom-nav button::after{display:none!important}

  body.role-student:not(.student-play-mode) .student-app-main{
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
  }
  body.role-student:not(.student-play-mode) .student-app-main [id]{scroll-margin-top:calc(var(--student-nav-top-h) + 10px)}
}

@media(max-width:430px){
  body.role-student:not(.student-play-mode) .student-app-brand small{display:none!important}
  body.role-student:not(.student-play-mode) .student-app-brand{gap:7px!important}
  body.role-student:not(.student-play-mode) .student-app-logo{width:36px!important;height:36px!important}
  body.role-student:not(.student-play-mode) .student-bottom-nav.student-bottom-nav-simple,
  body.role-student:not(.student-play-mode) .student-bottom-nav{
    left:6px!important;
    right:6px!important;
    bottom:calc(5px + env(safe-area-inset-bottom))!important;
    padding:5px!important;
    border-radius:18px!important;
  }
  body.role-student:not(.student-play-mode) .student-bottom-nav > a,
  body.role-student:not(.student-play-mode) .student-bottom-nav > button{min-width:54px!important;padding-inline:3px!important}
}

/* Prevent page-specific generic header/nav rules from recoloring student chrome. */
body.role-student:not(.student-play-mode) header.student-app-topbar *,
body.role-student:not(.student-play-mode) nav.student-desktop-nav *,
body.role-student:not(.student-play-mode) nav.student-bottom-nav *{
  text-shadow:none!important;
}