/* HTNS v302 r43 — compact top-header overflow menu.
   Only the vertical-ellipsis trigger is visible in the header. The dropdown is
   rendered as a fixed body-level portal so rounded/clipped headers cannot hide it.
   When unread notifications exist, the trigger itself becomes a notification cue
   and automatically returns to the normal state after notifications are cleared. */

#mainApp .top .htns-header-menu-wrap{
  position:relative !important;
  flex:0 0 auto !important;
  display:block !important;
  z-index:120 !important;
}

#mainApp .top #htnsHeaderMenuBtn{
  position:relative !important;
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  min-height:54px !important;
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  place-items:center !important;
  padding:0 !important;
  border:1.5px solid #D5E4F0 !important;
  border-radius:17px !important;
  background:#FFFFFF !important;
  color:#123F70 !important;
  box-shadow:0 5px 15px rgba(22,72,113,.06) !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease !important;
}
#mainApp .top #htnsHeaderMenuBtn:active{
  transform:scale(.96) !important;
  background:#F4F9FD !important;
}
#mainApp .top #htnsHeaderMenuBtn svg{
  width:24px !important;
  height:24px !important;
  display:block !important;
  fill:currentColor !important;
  stroke:none !important;
  pointer-events:none !important;
}
#mainApp .top #htnsHeaderMenuBtn[aria-expanded="true"]{
  border-color:#B9D4E8 !important;
  background:#F5FAFE !important;
}

/* r43: make unread notifications obvious on the one visible header control. */
#mainApp .top #htnsHeaderMenuBtn:has(#htnsHeaderMenuDot.on){
  border-color:#E9AEB8 !important;
  background:linear-gradient(145deg,#FFF7F9 0%,#FFFFFF 100%) !important;
  color:#B92E48 !important;
  box-shadow:0 0 0 3px rgba(217,57,88,.09),0 8px 20px rgba(160,45,67,.12) !important;
}
#mainApp .top #htnsHeaderMenuBtn:has(#htnsHeaderMenuDot.on)[aria-expanded="true"]{
  border-color:#DF8FA0 !important;
  background:#FFF3F6 !important;
}

#htnsHeaderMenuDot{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  width:11px !important;
  height:11px !important;
  display:none !important;
  border:2.5px solid #fff !important;
  border-radius:999px !important;
  background:#DF3E5D !important;
  box-shadow:0 2px 7px rgba(185,46,72,.32) !important;
  box-sizing:content-box !important;
  pointer-events:none !important;
}
#htnsHeaderMenuDot.on{display:block !important;}

/* r41+: body-level portal. Geometry is finalized by JS from the trigger rect. */
#htnsHeaderMenuPanel{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:min(248px,calc(100vw - 22px)) !important;
  max-height:calc(100dvh - 20px) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  padding:7px !important;
  border:1px solid #D8E5EF !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.985) !important;
  color:#103B66 !important;
  box-shadow:0 16px 38px rgba(26,77,116,.18) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  transform-origin:top right !important;
  z-index:2147483000 !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
}
#htnsHeaderMenuPanel[hidden]{display:none !important;}

#htnsHeaderMenuPanel .htns-header-menu-item{
  width:100% !important;
  min-height:50px !important;
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:7px 9px !important;
  border:0 !important;
  border-radius:13px !important;
  background:transparent !important;
  color:#123F70 !important;
  text-align:left !important;
  font:inherit !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}
#htnsHeaderMenuPanel .htns-header-menu-item + .htns-header-menu-item{
  margin-top:2px !important;
}
#htnsHeaderMenuPanel .htns-header-menu-item:hover,
#htnsHeaderMenuPanel .htns-header-menu-item:focus-visible{
  background:#F3F8FC !important;
  outline:none !important;
}
#htnsHeaderMenuPanel .htns-header-menu-item:active{
  background:#EDF6FC !important;
}
#htnsHeaderMenuPanel .htns-header-menu-item[data-action="logout"]{
  color:#B24854 !important;
}
#htnsHeaderMenuPanel .htns-header-menu-icon{
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:11px !important;
  background:#EEF7FD !important;
  color:#1682C7 !important;
  pointer-events:none !important;
}
#htnsHeaderMenuPanel .htns-header-menu-item[data-action="feedback"] .htns-header-menu-icon{
  background:#F3ECFF !important;
  color:#7B33BF !important;
}
#htnsHeaderMenuPanel .htns-header-menu-item[data-action="notifications"] .htns-header-menu-icon{
  background:#EAF6FF !important;
  color:#157DC0 !important;
}
#htnsHeaderMenuPanel .htns-header-menu-item[data-action="logout"] .htns-header-menu-icon{
  background:#FFF0F2 !important;
  color:#C7495B !important;
}
#htnsHeaderMenuPanel .htns-header-menu-icon svg{
  width:19px !important;
  height:19px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
#htnsHeaderMenuPanel .htns-header-menu-label{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  pointer-events:none !important;
}
#htnsHeaderMenuPanel .htns-header-menu-label b{
  color:inherit !important;
  font-size:13px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
}
#htnsHeaderMenuPanel .htns-header-menu-label small{
  color:#7890A7 !important;
  font-size:10px !important;
  line-height:1.15 !important;
  font-weight:600 !important;
}
#htnsHeaderMenuPanel .htns-header-menu-value{
  min-width:42px !important;
  min-height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 9px !important;
  border:1px solid #D6E5F0 !important;
  border-radius:999px !important;
  background:#F7FBFE !important;
  color:#123F70 !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:900 !important;
  pointer-events:none !important;
}
#htnsHeaderMenuPanel .htns-header-menu-alert{
  width:8px !important;
  height:8px !important;
  display:none !important;
  border-radius:999px !important;
  background:#DF3E5D !important;
  pointer-events:none !important;
}
#htnsHeaderMenuPanel .htns-header-menu-alert.on{display:block !important;}

/* The legacy four action controls stay as invisible programmatic action proxies. */
#mainApp #btnLang,
#mainApp #btnFeedback,
#mainApp #btnBell,
#mainApp #btnGuestLogout{
  display:none !important;
  visibility:hidden !important;
  position:absolute !important;
  width:0 !important;
  min-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
  pointer-events:none !important;
}

/* Preserve the existing guest notification restriction in the consolidated menu. */
body.guest-mode #htnsHeaderMenuPanel [data-action="notifications"],
body[data-user-role="guest"] #htnsHeaderMenuPanel [data-action="notifications"],
body[data-mode="guest"] #htnsHeaderMenuPanel [data-action="notifications"]{
  display:none !important;
}

#mainApp .top .who{min-width:0 !important;}

@media (max-width:420px){
  #mainApp .top #htnsHeaderMenuBtn{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    border-radius:16px !important;
  }
  #htnsHeaderMenuPanel{
    width:min(236px,calc(100vw - 22px)) !important;
  }
}