/* v2.33 — authoritative role-aware overflow navigation.
   Fixes the v2.32 overflow panel leaking into document flow and provides one
   responsive dropdown implementation for Teacher, Student and Homeroom roles. */

/* Header geometry: keep the role navigation in the true middle column. */
#main-header:not(.hidden),
#main-header.card-kid:not(.hidden) {
  overflow: visible !important;
}

#role-nav-cluster.mv-role-nav-cluster {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  justify-self: stretch !important;
}

#role-nav-shell.mv-role-nav-shell {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  margin: 0 !important;
  padding: 3px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  background: #f5f9fc !important;
  border: 1px solid #dce8ef !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(40, 72, 96, 0.045) !important;
}

#role-nav-shell[hidden] {
  display: none !important;
}

#teacher-nav:not(.hidden),
#student-nav:not(.hidden),
#homeroom-nav:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#teacher-nav.hidden,
#student-nav.hidden,
#homeroom-nav.hidden {
  display: none !important;
}

/* Visible role items stay compact but readable. */
#teacher-nav button.mv-role-fit-visible,
#student-nav .mv-student-nav-btn.mv-role-fit-visible,
#homeroom-nav .mv-hr-nav-btn.mv-role-fit-visible {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  gap: 6px !important;
  border-radius: 11px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#teacher-nav button.mv-role-fit-hidden,
#student-nav .mv-student-nav-btn.mv-role-fit-hidden,
#homeroom-nav .mv-hr-nav-btn.mv-role-fit-hidden {
  display: none !important;
}

#teacher-nav button.mv-role-fit-visible > i,
#teacher-nav button.mv-role-fit-visible > svg,
#student-nav .mv-student-nav-btn.mv-role-fit-visible .mv-student-nav-icon,
#homeroom-nav .mv-hr-nav-btn.mv-role-fit-visible > i,
#homeroom-nav .mv-hr-nav-btn.mv-role-fit-visible > svg {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  flex: 0 0 25px !important;
}

/* More / close button. JS controls whether it exists in the layout. */
#mobile-menu-toggle.mv-role-overflow-toggle {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #d6e3eb !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #526a7e !important;
  box-shadow: 0 2px 7px rgba(35, 69, 98, 0.06) !important;
  cursor: pointer !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
  position: relative !important;
  z-index: 1004 !important;
}

#mobile-menu-toggle.mv-role-overflow-toggle.is-needed {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#mobile-menu-toggle.mv-role-overflow-toggle:hover,
#mobile-menu-toggle.mv-role-overflow-toggle[aria-expanded="true"] {
  background: #eef9ff !important;
  color: #0785bc !important;
  border-color: #bfe0ef !important;
}

.mv-role-menu-glyph {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 19px !important;
  height: 15px !important;
  pointer-events: none !important;
}

.mv-role-menu-glyph > span {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center !important;
  transition: transform .18s ease, opacity .12s ease !important;
}

#mobile-menu-toggle[aria-expanded="true"] .mv-role-menu-glyph > span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg) !important;
}
#mobile-menu-toggle[aria-expanded="true"] .mv-role-menu-glyph > span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(.2) !important;
}
#mobile-menu-toggle[aria-expanded="true"] .mv-role-menu-glyph > span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg) !important;
}

/* Authoritative overflow panel: never participates in normal document flow. */
#role-overflow-menu.mv-role-overflow-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 12000 !important;
  width: min(310px, calc(100vw - 28px)) !important;
  min-width: 248px !important;
  max-width: 310px !important;
  margin: 0 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #d9e6ee !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px rgba(31, 61, 84, 0.18), 0 3px 10px rgba(31, 61, 84, 0.07) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) scale(.985) !important;
  transform-origin: top right !important;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease !important;
  overflow: hidden !important;
}

#role-overflow-menu.mv-role-overflow-menu[hidden],
#role-overflow-menu.mv-role-overflow-menu[aria-hidden="true"] {
  display: none !important;
}

#role-overflow-menu.mv-role-overflow-menu.is-open,
#role-overflow-menu.mv-role-overflow-menu[aria-hidden="false"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.mv-role-overflow-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 5px 6px 9px !important;
  margin: 0 0 5px !important;
  border-bottom: 1px solid #edf2f5 !important;
}

#role-overflow-title {
  color: #1e3347 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.mv-role-overflow-hint {
  color: #8b9bad !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.mv-role-overflow-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  width: 100% !important;
}

.mv-role-overflow-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #465e72 !important;
  text-align: left !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  cursor: pointer !important;
  transition: background .13s ease, border-color .13s ease, color .13s ease, transform .13s ease !important;
}

.mv-role-overflow-item:hover,
.mv-role-overflow-item:focus-visible {
  background: #f2f9fd !important;
  border-color: #d5e9f4 !important;
  color: #087eae !important;
  outline: none !important;
}

.mv-role-overflow-item:active {
  transform: translateY(1px) !important;
}

.mv-role-overflow-item.is-active {
  background: #e9f7ff !important;
  border-color: #bfe7f8 !important;
  color: #067fad !important;
}

.mv-overflow-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: #edf3f7 !important;
  color: #63788b !important;
  font-size: 13px !important;
}

.mv-role-overflow-item.is-active .mv-overflow-icon,
.mv-role-overflow-item:hover .mv-overflow-icon {
  background: #dff3fc !important;
  color: #0785b8 !important;
}

.mv-overflow-icon i,
.mv-overflow-icon svg {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
}

.mv-overflow-label {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Never blur/dim page content when this menu is open. */
body.mv-mobile-menu-open #app > [id^="view-"]:not(.hidden) {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.mv-mobile-menu-open { overflow: auto !important; }

/* Desktop sizing. Reserve useful room for nav before moving items to overflow. */
@media (min-width: 1200px) {
  #main-header:not(.hidden),
  #main-header.card-kid:not(.hidden) {
    grid-template-columns: minmax(142px, 160px) minmax(0, 1fr) minmax(160px, 178px) !important;
    column-gap: clamp(8px, 1vw, 14px) !important;
    padding-left: clamp(16px, 2vw, 28px) !important;
    padding-right: clamp(16px, 2vw, 28px) !important;
  }
  #main-header > div:first-child img {
    width: clamp(142px, 11vw, 158px) !important;
    max-width: 158px !important;
  }
  #user-header-info { max-width: 178px !important; }
}

@media (max-width: 1199px) and (min-width: 701px) {
  #main-header:not(.hidden),
  #main-header.card-kid:not(.hidden) {
    grid-template-columns: minmax(128px, 144px) minmax(0, 1fr) auto !important;
    column-gap: 7px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #main-header > div:first-child img {
    width: 138px !important;
    max-width: 138px !important;
  }
  /* Core Teacher tools remain in natural order and fit dynamically.
     When space runs out, items on the right move into More teacher tools. */
  #teacher-nav button.mv-role-fit-visible {
    padding-left: 5px !important;
    padding-right: 5px !important;
    gap: 4px !important;
    font-size: 10.5px !important;
  }
  #teacher-nav button.mv-role-fit-visible > i,
  #teacher-nav button.mv-role-fit-visible > svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-basis: 22px !important;
  }
  #student-nav .mv-student-nav-btn.mv-role-fit-visible,
  #homeroom-nav .mv-hr-nav-btn.mv-role-fit-visible {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11px !important;
  }
}

/* Phone: keep logo/profile concise and put every role destination in dropdown. */
@media (max-width: 700px) {
  #main-header:not(.hidden),
  #main-header.card-kid:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(126px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
  }
  #role-nav-shell { display: none !important; }
  #role-nav-cluster.mv-role-nav-cluster {
    width: auto !important;
    justify-self: end !important;
  }
  #user-header-info { max-width: 54px !important; }
  #role-overflow-menu.mv-role-overflow-menu {
    position: fixed !important;
    top: 70px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    transform-origin: top center !important;
  }
}

/* Teacher Settings uses a simple ring icon so it stays available in the local icon runtime. */
.mv-settings-ring {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid currentColor !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.mv-settings-ring::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}


/* Teacher Settings icon: explicit gear glyph (v2.33 menu-action fix). */
.mv-teacher-settings-overflow-item .mv-settings-gear {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-family: Arial, "Segoe UI Symbol", sans-serif !important;
  font-weight: 400 !important;
  color: currentColor !important;
}