/* v2.28 — authoritative role navigation separation + sticky header.
   Loaded last so older header/tablet patches cannot reintroduce overlapping
   role menus or reset the app header back to position: relative. */

/* One account role = one visible navigation row.  The homeroom stylesheet
   previously used an ID selector that overrode Tailwind's .hidden utility. */
#student-nav.hidden,
#teacher-nav.hidden,
#homeroom-nav.hidden {
  display: none !important;
}

/* Keep the standard app header pinned for every logged-in role. */
#main-header:not(.hidden),
#main-header.card-kid:not(.hidden),
#main-header:not(.hidden).is-menu-open {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* The open mobile/tablet menu must stay above page content while the sticky
   header remains its containing block. */
#main-header:not(.hidden).is-menu-open {
  z-index: 10000 !important;
}

/* Homeroom desktop navigation: three equally weighted actions with enough
   breathing room to read as separate controls rather than one tight cluster. */
@media (min-width: 1101px) {
  #homeroom-nav:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #homeroom-nav:not(.hidden) .mv-hr-nav-btn {
    min-width: 116px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #homeroom-nav:not(.hidden) .mv-hr-nav-btn i {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #ebf2f6 !important;
    color: #62778b !important;
    font-size: 12px !important;
  }

  #homeroom-nav:not(.hidden) .mv-hr-nav-btn.is-active i {
    background: rgba(255,255,255,.20) !important;
    color: #ffffff !important;
  }
}

/* Tablet/menu mode: retain the existing hamburger behavior, but make sure the
   sticky header itself is not downgraded to relative positioning. */
@media (max-width: 1100px) {
  #main-header:not(.hidden),
  #main-header.card-kid:not(.hidden),
  #main-header:not(.hidden).is-menu-open {
    position: sticky !important;
    top: 0 !important;
  }

  #main-header:not(.hidden) #homeroom-nav.hidden,
  #main-header:not(.hidden) #student-nav.hidden,
  #main-header:not(.hidden) #teacher-nav.hidden {
    display: none !important;
  }
}

/* Sticky anchors should not disappear underneath the normal app header. */
html {
  scroll-padding-top: 90px !important;
}
@media (max-width: 768px) {
  html { scroll-padding-top: 76px !important; }
}