/* RXOPD final fluid viewport and canonical hamburger layer.
   This stylesheet is loaded last and is intentionally shell-scoped.
   It removes fixed desktop canvas widths without redesigning individual modules. */
:root{
  --rx16-page-gutter:clamp(12px,1.8vw,34px);
  --rx16-public-header-height:60px;
  --rx16-public-header-gap:8px;
  --rx16-blue:#1769e0;
  --rx16-navy:#0d2f70;
  --rx16-green:#0d9b73;
  --rx16-line:#d8e6f6;
}
html,body{max-width:100%!important;overflow-x:clip!important}

/* =========================================================
   CANONICAL THREE-LINE HAMBURGER -> CLOSE ANIMATION
   ========================================================= */
.rx-shell-hamburger{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:1px solid var(--rx16-line)!important;
  border-radius:14px!important;
  background:#f2f7ff!important;
  color:var(--rx16-blue)!important;
  box-shadow:0 8px 20px rgba(23,105,224,.12)!important;
  cursor:pointer!important;
}
.rx-shell-hamburger>span{
  position:absolute!important;
  left:50%!important;
  width:22px!important;
  height:2px!important;
  margin:0!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform:translateX(-50%)!important;
  transform-origin:center!important;
  transition:top .2s ease,transform .2s ease,opacity .15s ease,width .2s ease!important;
}
.rx-shell-hamburger>span:nth-child(1){top:13px!important}
.rx-shell-hamburger>span:nth-child(2){top:20px!important}
.rx-shell-hamburger>span:nth-child(3){top:27px!important}
.rx-shell-hamburger[aria-expanded="true"]{color:var(--rx16-green)!important;background:#effcf7!important;border-color:#bce9d9!important}
.rx-shell-hamburger[aria-expanded="true"]>span:nth-child(1){top:20px!important;transform:translateX(-50%) rotate(45deg)!important}
.rx-shell-hamburger[aria-expanded="true"]>span:nth-child(2){opacity:0!important;width:0!important}
.rx-shell-hamburger[aria-expanded="true"]>span:nth-child(3){top:20px!important;transform:translateX(-50%) rotate(-45deg)!important}
body.admin-sidebar-open .clean-admin-menu-button.rx-shell-hamburger,
body.staff-sidebar-open .staff-menu-button.rx-shell-hamburger{color:var(--rx16-green)!important;background:#effcf7!important;border-color:#bce9d9!important}
body.admin-sidebar-open .clean-admin-menu-button.rx-shell-hamburger>span:nth-child(1),
body.staff-sidebar-open .staff-menu-button.rx-shell-hamburger>span:nth-child(1){top:20px!important;transform:translateX(-50%) rotate(45deg)!important}
body.admin-sidebar-open .clean-admin-menu-button.rx-shell-hamburger>span:nth-child(2),
body.staff-sidebar-open .staff-menu-button.rx-shell-hamburger>span:nth-child(2){opacity:0!important;width:0!important}
body.admin-sidebar-open .clean-admin-menu-button.rx-shell-hamburger>span:nth-child(3),
body.staff-sidebar-open .staff-menu-button.rx-shell-hamburger>span:nth-child(3){top:20px!important;transform:translateX(-50%) rotate(-45deg)!important}

/* =========================================================
   PUBLIC / INDEX / DISCOVERY: FULL FLUID VIEWPORT
   ========================================================= */
body.rx-standard-shell .rx-topbar,
body.rx-standard-shell .rx-topbar.rx-hanging-header,
body.rx-standard-shell header.rx-topbar.rx-hanging-header{
  box-sizing:border-box!important;
  width:calc(100% - 16px)!important;
  max-width:none!important;
  min-width:0!important;
  min-height:var(--rx16-public-header-height)!important;
  height:auto!important;
  margin:0 8px var(--rx16-public-header-gap)!important;
  padding:8px var(--rx16-page-gutter)!important;
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  display:grid!important;
  grid-template-columns:minmax(120px,1fr) auto minmax(44px,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  z-index:1200!important;
  overflow:visible!important;
  border-radius:0 0 18px 18px!important;
}
body.rx-standard-shell .rx-topbar .rx-brand,
body.rx-standard-shell .rx-topbar .rx-logo-brand{grid-column:1!important;justify-self:start!important;max-width:180px!important}
body.rx-standard-shell .rx-topbar .rx-topnav{
  grid-column:2!important;
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  width:auto!important;
}
body.rx-standard-shell .rx-topbar .rx-mobile-login-outside{grid-column:3!important;justify-self:end!important}
body.rx-standard-shell .rx-topbar .rx-public-menu-button{grid-column:3!important;justify-self:end!important}
body.rx-standard-shell .rx-page{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0 0 40px!important;
  overflow-x:clip!important;
}
body.rx-standard-shell .rx-page > :not(link):not(script):not(style),
body.rx-standard-shell .rxhome,
body.rx-standard-shell .rx20-page,
body.rx-standard-shell .rxpub-page,
body.rx-standard-shell .rxfi-index,
body.rx-standard-shell .rx20-home-block{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.rx-standard-shell .rxhome,
body.rx-standard-shell .rx20-page,
body.rx-standard-shell .rxpub-page{
  padding-left:var(--rx16-page-gutter)!important;
  padding-right:var(--rx16-page-gutter)!important;
}
body.rx-standard-shell .rxhome-shell,
body.rx-standard-shell .rxhome-section,
body.rx-standard-shell .rxhome-ad,
body.rx-standard-shell .rx20-home-block,
body.rx-standard-shell .rxhome-network-row{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
}
/* Let the homepage grow with the viewport instead of stopping at the old 1028/1180px canvas. */
@media(min-width:1200px){
  body.rx-standard-shell .rxhome-hero{grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr)!important;padding-left:clamp(34px,4vw,74px)!important;padding-right:clamp(34px,4vw,74px)!important}
  body.rx-standard-shell .rxhome-search{max-width:720px!important}
  body.rx-standard-shell .rxhome-stat-strip{max-width:700px!important}
  body.rx-standard-shell .rxhome-hero-art img{max-width:min(620px,100%)!important}
  body.rx-standard-shell .rxhome-actions{grid-template-columns:repeat(8,minmax(0,1fr))!important}
}

/* Public menu is never duplicated with the full navigation.
   It appears only when the full navigation is hidden. */
@media(min-width:721px){
  body.rx-standard-shell .rx-public-menu-button,
  body.rx-standard-shell .rx-mobile-login-outside{display:none!important}
  body.rx-standard-shell .rx-topbar .rx-topnav{display:flex!important}
  body.rx-standard-shell .rx-public-drawer,
  body.rx-standard-shell .rx-public-menu-backdrop{display:none!important}
}
@media(max-width:720px){
  :root{--rx16-public-header-height:58px;--rx16-public-header-gap:7px}
  body.rx-standard-shell .rx-topbar,
  body.rx-standard-shell .rx-topbar.rx-hanging-header,
  body.rx-standard-shell header.rx-topbar.rx-hanging-header{
    width:calc(100% - 8px)!important;
    min-height:var(--rx16-public-header-height)!important;
    margin:0 4px var(--rx16-public-header-gap)!important;
    padding:7px 9px!important;
    grid-template-columns:minmax(92px,1fr) auto auto!important;
    gap:7px!important;
    border-radius:0 0 16px 16px!important;
  }
  body.rx-standard-shell .rx-topbar .rx-topnav{display:none!important}
  body.rx-standard-shell .rx-topbar .rx-public-menu-button{display:inline-flex!important}
  body.rx-standard-shell .rx-topbar .rx-mobile-login-outside{display:inline-flex!important;min-height:38px!important;padding:0 12px!important;white-space:nowrap!important}
  body.rx-standard-shell .rx-public-menu-backdrop{
    display:block!important;
    position:fixed!important;
    top:calc(var(--rx16-public-header-height) + var(--rx16-public-header-gap))!important;
    right:0!important;bottom:0!important;left:0!important;
    z-index:1120!important;
    background:rgba(8,24,58,.42)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:opacity .2s ease,visibility .2s ease!important;
  }
  body.rx-standard-shell .rx-public-drawer{
    display:flex!important;
    position:fixed!important;
    top:calc(var(--rx16-public-header-height) + var(--rx16-public-header-gap))!important;
    right:6px!important;
    bottom:6px!important;
    left:auto!important;
    width:min(330px,88vw)!important;
    height:auto!important;
    max-height:none!important;
    z-index:1140!important;
    padding:16px!important;
    flex-direction:column!important;
    overflow:auto!important;
    border:1px solid var(--rx16-line)!important;
    border-radius:20px 0 0 20px!important;
    background:#fff!important;
    box-shadow:-18px 16px 46px rgba(8,36,92,.22)!important;
    transform:translate3d(110%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .22s ease,visibility .22s ease!important;
  }
  body.rx-standard-shell.rx-public-menu-open .rx-public-menu-backdrop{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }
  body.rx-standard-shell.rx-public-menu-open .rx-public-drawer{
    transform:translate3d(0,0,0)!important;visibility:visible!important;pointer-events:auto!important;
  }
  /* Header hamburger is the single close control; remove duplicate drawer crosses. */
  body.rx-standard-shell .rx-public-drawer-close-top,
  body.rx-standard-shell .rx-public-drawer-head>button[data-public-menu-close]{display:none!important}
  body.rx-standard-shell .rx-public-drawer-head{padding-right:0!important;margin-bottom:12px!important}
  body.rx-standard-shell .rxhome,
  body.rx-standard-shell .rx20-page,
  body.rx-standard-shell .rxpub-page{padding-left:10px!important;padding-right:10px!important}
}

/* Login remains a card, but it scales appropriately on wide screens instead of appearing tiny. */
body.rx-standard-shell.rx-ui-app .rxopd-public-auth-screen{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  padding-left:var(--rx16-page-gutter)!important;
  padding-right:var(--rx16-page-gutter)!important;
}
body.rx-standard-shell.rx-ui-app .rxopd-public-auth-screen>.rxopd-public-auth-card,
body.rx-standard-shell .rxopd-login-clean-rev37 .rxopd-public-auth-card{
  width:min(92vw,620px)!important;
  max-width:620px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* =========================================================
   AUTHENTICATED ROLE PORTALS: FULL AVAILABLE VIEWPORT
   ========================================================= */
body.rx-role-shell .rx-role-main{
  box-sizing:border-box!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  padding-right:var(--rx16-page-gutter)!important;
  padding-left:var(--rx16-page-gutter)!important;
  overflow-x:clip!important;
}
body.rx-role-shell .rx-role-main>:not(link):not(script):not(style),
body.rx-role-shell .rx-role-main :is(.rxui-page,.opdops-page,.rx-role-page,.rxdoc-shell,.rx-wallet-page,.rxdesk-page,.rxclinic-page){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.rx-role-shell .rx-role-main .rxui-page{padding-left:0!important;padding-right:0!important}
/* On very wide screens, use the extra width rather than leaving a narrow centred island. */
@media(min-width:1500px){
  body.rx-role-shell .rx-role-main .rxui-vital-actions{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  body.rx-role-shell .rx-role-main .rxui-kpis{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}

/* Same fluid rule for Admin and Staff shells without altering their access/navigation logic. */
body.clean-admin-shell .clean-admin-page,
body.staff-desk-shell .staff-page{
  box-sizing:border-box!important;
  max-width:none!important;
  min-width:0!important;
  overflow-x:clip!important;
}
body.clean-admin-shell .clean-admin-page>:not(link):not(script):not(style),
body.staff-desk-shell .staff-page>:not(link):not(script):not(style){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* Role hamburger follows the same animated system while preserving sidebar state logic. */
body.rx-role-shell .rx-role-menu-button.rx-shell-hamburger{
  position:relative!important;
  flex:0 0 44px!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  background:#f2f7ff!important;
  color:var(--rx16-blue)!important;
  border-color:var(--rx16-line)!important;
}

@media(max-width:860px){
  body.rx-role-shell .rx-role-main{padding-left:12px!important;padding-right:12px!important}
}
@media(max-width:390px){
  .rx-shell-hamburger{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
  .rx-shell-hamburger>span:nth-child(1){top:11px!important}
  .rx-shell-hamburger>span:nth-child(2){top:18px!important}
  .rx-shell-hamburger>span:nth-child(3){top:25px!important}
  .rx-shell-hamburger[aria-expanded="true"]>span:nth-child(1),
  .rx-shell-hamburger[aria-expanded="true"]>span:nth-child(3){top:18px!important}
}
@media(prefers-reduced-motion:reduce){
  .rx-shell-hamburger>span,
  body.rx-standard-shell .rx-public-drawer,
  body.rx-standard-shell .rx-public-menu-backdrop{transition:none!important}
}

/* Final specificity lock: legacy V9 rules used an extra .rx-page class and !important. */
body.rx-standard-shell,
body.rx-role-shell,
body.clean-admin-shell,
body.staff-desk-shell{margin:0!important}
body.rx-standard-shell .rx-page > .rxhome,
body.rx-standard-shell .rx-page > .rx20-page,
body.rx-standard-shell .rx-page > .rxpub-page,
body.rx-standard-shell .rx-page > .rxfi-index,
body.rx-standard-shell .rx-page .rxhome,
body.rx-standard-shell .rx-page .rx20-page,
body.rx-standard-shell .rx-page .rxpub-page{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media(max-width:720px){
  body.rx-standard-shell .rx-topbar,
  body.rx-standard-shell .rx-topbar.rx-hanging-header,
  body.rx-standard-shell header.rx-topbar.rx-hanging-header{
    height:var(--rx16-public-header-height)!important;
    min-height:var(--rx16-public-header-height)!important;
    grid-template-columns:minmax(82px,1fr) auto 44px!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    overflow:visible!important;
  }
  body.rx-standard-shell .rx-topbar .rx-brand,
  body.rx-standard-shell .rx-topbar .rx-logo-brand{grid-column:1!important;grid-row:1!important}
  body.rx-standard-shell .rx-topbar .rx-mobile-login-outside{grid-column:2!important;grid-row:1!important;justify-self:end!important}
  body.rx-standard-shell .rx-topbar .rx-public-menu-button{grid-column:3!important;grid-row:1!important;justify-self:end!important}
}

/* Public hamburger specificity lock against legacy index/patient button rules. */
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger{
  position:relative!important;
  display:inline-flex!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:1px solid var(--rx16-line)!important;
  border-radius:14px!important;
  background:#f2f7ff!important;
  color:var(--rx16-blue)!important;
  box-shadow:0 8px 20px rgba(23,105,224,.12)!important;
}
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger>span{
  position:absolute!important;
  right:auto!important;
  left:50%!important;
  width:22px!important;
  height:2px!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform:translateX(-50%)!important;
  transition:top .2s ease,transform .2s ease,opacity .15s ease,width .2s ease!important;
}
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger>span:nth-child(1){top:13px!important}
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger>span:nth-child(2){top:20px!important}
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger>span:nth-child(3){top:27px!important}
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger[aria-expanded="true"]{
  background:#effcf7!important;color:var(--rx16-green)!important;border-color:#bce9d9!important;
}
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger[aria-expanded="true"]>span:nth-child(1){top:20px!important;transform:translateX(-50%) rotate(45deg)!important}
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger[aria-expanded="true"]>span:nth-child(2){opacity:0!important;width:0!important}
body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger[aria-expanded="true"]>span:nth-child(3){top:20px!important;transform:translateX(-50%) rotate(-45deg)!important}
@media(max-width:390px){
  body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
  body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger>span:nth-child(1){top:11px!important}
  body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger>span:nth-child(2){top:18px!important}
  body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger>span:nth-child(3){top:25px!important}
  body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger[aria-expanded="true"]>span:nth-child(1),
  body.rx-standard-shell .rx-public-menu-button.rx-public-menu-button-custom.rx-shell-hamburger[aria-expanded="true"]>span:nth-child(3){top:18px!important}
}