/* v2.34 — navigation visual polish only.
   - Student + Homeroom role shells shrink to the width of their visible menus.
   - Active navigation styling is unified across Teacher, Student and Homeroom.
   No navigation behavior, routing, overflow logic or responsive JS is changed. */

/* Student + Homeroom: keep the pale outer shell snug around the actual menu
   instead of stretching across the available middle header column. */
@media (min-width: 769px) {
  #role-nav-shell:has(#student-nav:not(.hidden)),
  #role-nav-shell:has(#homeroom-nav:not(.hidden)) {
    display: inline-flex !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
  }

  #role-nav-shell:has(#student-nav:not(.hidden)) #student-nav,
  #role-nav-shell:has(#homeroom-nav:not(.hidden)) #homeroom-nav {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* One selected-state language for every logged-in role: white card, soft cyan
   icon treatment and turquoise underline. Never switch the whole button to
   a solid blue fill. */
#teacher-nav button.bg-brand-blue,
#teacher-nav button.is-active,
#student-nav .mv-student-nav-btn.is-active,
#homeroom-nav .mv-hr-nav-btn.is-active {
  position: relative !important;
  background: #ffffff !important;
  border-color: #ccecff !important;
  color: #0278b7 !important;
  box-shadow: 0 8px 18px rgba(14, 165, 233, .10) !important;
}

#teacher-nav button.bg-brand-blue::after,
#teacher-nav button.is-active::after,
#student-nav .mv-student-nav-btn.is-active::after,
#homeroom-nav .mv-hr-nav-btn.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 30% !important;
  right: 30% !important;
  bottom: -7px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #06d6a0 !important;
  pointer-events: none !important;
}

#teacher-nav button.bg-brand-blue > i,
#teacher-nav button.bg-brand-blue > svg,
#teacher-nav button.is-active > i,
#teacher-nav button.is-active > svg,
#student-nav .mv-student-nav-btn.is-active .mv-student-nav-icon,
#homeroom-nav .mv-hr-nav-btn.is-active > i,
#homeroom-nav .mv-hr-nav-btn.is-active > svg {
  background: #dff4ff !important;
  color: #0284c7 !important;
}

/* Explicitly neutralize the older Homeroom active icon rule that made the icon
   white when the whole button used a solid blue active state. */
#homeroom-nav:not(.hidden) .mv-hr-nav-btn.is-active i,
#homeroom-nav:not(.hidden) .mv-hr-nav-btn.is-active svg {
  background: #dff4ff !important;
  color: #0284c7 !important;
}