/* Version 5.6.0 — final three-viewport layout and motion layer. */
:root{--space-page:clamp(16px,2.35vw,34px);--surface-radius:clamp(18px,1.7vw,24px);--ease-ui:cubic-bezier(.22,.8,.24,1);--ease-soft:cubic-bezier(.2,.65,.3,1);--duration-fast:140ms;--duration-ui:240ms;--duration-page:360ms}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body.appbody{min-width:0;overflow-x:clip}
.appbody :where(header,main,footer,section,article,aside,nav,form,div,ol,ul,li){min-width:0}
.appbody :where(h1,h2,h3,h4,p,small,strong,b,span,td,th,label){max-width:100%}
.appbody :where(.paneltitle,.pagehead,.modalhead,.billhero,.homewelcome,.periodhero,.businesshero,.people-hero)>*{min-width:0}
.appbody :where(.paneltitle h2,.paneltitle p,.pagehead h1,.pagehead p,.billhero h2,.billhero p,.businesshero h2,.people-hero h2){overflow-wrap:anywhere}
.appbody main{box-sizing:border-box;width:min(1440px,100%);max-width:1440px;padding-inline:var(--space-page)}
.appbody :where(.panel,.metric,.glasscard,.commoninfocard,.shortcutcard,.homeactioncard){border-radius:var(--surface-radius)}
.appbody :where(.grid,.metrics,.metrics-five,.adminmetrics,.homegrid,.periodworkbenchhub,.financeworkbenchhub,.businessgrid,.databaseworkspace,.superpeoplelist)>*{min-width:0}
.appbody .tablewrap{width:100%;max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.appbody .tablewrap table{margin:0}
.appbody :where(input,select,textarea,button,.primary,.secondary){box-sizing:border-box}
.appbody :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select){min-height:44px}
.appbody textarea{max-width:100%;resize:vertical}

.appbody dialog{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.appbody dialog[open]{isolation:isolate}
.appbody dialog :where(form,iframe,.modalbody,.orderdetailbody,.profile-center-body,.person-dialog-body){min-width:0;max-width:100%}
.appbody dialog::backdrop{animation:uiBackdropIn var(--duration-ui) ease-out both}

.appbody main>:where(.pagehead,.adminnav,.superadmintabs,.homewelcome,.periodhero,.businesshero,.people-hero,.databasehero,.panel,.grid,.metrics,.adminmetrics,.homegrid){animation:uiPageIn var(--duration-page) var(--ease-ui) both}
.appbody main>:nth-child(2){animation-delay:22ms}.appbody main>:nth-child(3){animation-delay:44ms}.appbody main>:nth-child(4){animation-delay:66ms}.appbody main>:nth-child(n+5){animation-delay:82ms}
.appbody :where(.metric,.adminmetrics>article,.shortcutgrid>a,.periodworkbenchhub>a,.financeworkbenchhub>a,.businessledgercard,.periodcompletedcard,.mobilelogcard,.people-row,.superpersoncard,.backupset){animation:uiItemIn 300ms var(--ease-soft) both;transition:background-color var(--duration-ui) ease,border-color var(--duration-ui) ease,box-shadow var(--duration-ui) ease,filter var(--duration-fast) ease,opacity var(--duration-fast) ease!important}
.appbody :where(.metrics,.adminmetrics,.shortcutgrid,.periodworkbenchhub,.financeworkbenchhub,.superpeoplelist)>:nth-child(2){animation-delay:28ms}
.appbody :where(.metrics,.adminmetrics,.shortcutgrid,.periodworkbenchhub,.financeworkbenchhub,.superpeoplelist)>:nth-child(3){animation-delay:56ms}
.appbody :where(.metrics,.adminmetrics,.shortcutgrid,.periodworkbenchhub,.financeworkbenchhub,.superpeoplelist)>:nth-child(4){animation-delay:84ms}
.appbody :where(.metrics,.adminmetrics,.shortcutgrid,.periodworkbenchhub,.financeworkbenchhub,.superpeoplelist)>:nth-child(n+5){animation-delay:108ms}
.appbody :where(.success,.error,.notice,.chat-toast){animation:uiStatusIn 280ms var(--ease-ui) both}
.appbody :where(.adminnav,.superadmintabs,header nav,.accessrolefilters){scroll-behavior:smooth;overscroll-behavior-inline:contain}
.appbody details>summary{transition:color var(--duration-fast) ease,background-color var(--duration-fast) ease,border-color var(--duration-fast) ease}
.appbody details[open]>summary{color:var(--ui-accent,#69507e)}
.appbody :where(.systemambient,.loginambient)>span{will-change:transform;animation:uiAmbientFloat 20s ease-in-out infinite alternate}
.appbody :where(.systemambient,.loginambient)>span:nth-child(2){animation-duration:24s;animation-direction:alternate-reverse}
.appbody :where(.systemambient,.loginambient)>span:nth-child(3){animation-duration:28s}
.appbody :where(.systemambient,.loginambient)>span:nth-child(4){animation-duration:32s;animation-direction:alternate-reverse}

@supports(view-transition-name:root){@view-transition{navigation:auto}::view-transition-old(root){animation:uiPageOut 150ms ease both}::view-transition-new(root){animation:uiPageIn 280ms var(--ease-ui) both}}

@media(min-width:1101px){
  .appbody main{padding-top:30px;padding-bottom:92px}.appbody .pagehead{min-height:50px}.appbody :where(.metrics,.adminmetrics){gap:15px}
  .appbody .paneltitle>.buttonrow{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap}
  .appbody :where(.advancedfilters,.ledgerqueryfilters,.businessadvancedfilters,.people-filters){padding:18px 19px!important}
}

@media(min-width:701px) and (max-width:1100px){
  .appbody main{width:100%;padding:24px clamp(16px,2.8vw,28px) 84px}.appbody header{gap:16px;padding-inline:clamp(14px,2.4vw,24px)}
  .appbody header nav{min-width:0;overflow-x:auto;scrollbar-width:none}.appbody header nav::-webkit-scrollbar{display:none}.appbody header nav a{flex:0 0 auto;white-space:nowrap}
  .appbody :where(.metrics,.adminmetrics,.periodmetrics,.perioddetailmetrics,.databasemetrics){grid-template-columns:repeat(2,minmax(0,1fr))!important}.appbody .metrics-five{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .appbody :where(.advancedfilters .filterrow,.ledgerqueryfilters .filterrow-primary,.ledgerqueryfilters .filterrow-secondary,.businessadvancedfilters .filterrow-primary,.businessadvancedfilters .filterrow-secondary,.people-filters){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .appbody :where(.periodhero,.businesshero,.people-hero,.databasehero){gap:18px}.appbody :where(button,.primary,.secondary,a.primary,a.secondary){min-height:44px}.appbody .paneltitle{align-items:flex-start}
  .appbody dialog{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px)}
}

@media(max-width:700px){
  html{scroll-padding-top:118px}body.appbody{width:100%;max-width:100%;overflow-x:hidden}
  .appbody main{width:100%!important;max-width:100%!important;padding:15px 10px calc(76px + env(safe-area-inset-bottom))!important}.appbody header{position:sticky;top:0;z-index:1000;transform:translateZ(0)}
  .appbody :where(.pagehead,.paneltitle){gap:10px}.appbody :where(.panel,.glasscard,.commoninfocard){padding:14px!important}
  .appbody :where(.metrics,.metrics-five,.adminmetrics,.periodmetrics,.perioddetailmetrics,.filtertotals,.supermetrics,.databasemetrics){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .appbody :where(.advancedfilters,.ledgerqueryfilters,.businessadvancedfilters,.businessqueryfilters,.people-filters,.periodcompletedfilters){width:100%!important;max-width:100%!important;padding:12px!important}
  .appbody :where(.advancedfilters .filterrow,.ledgerqueryfilters .filterrow,.businessadvancedfilters .filterrow,.businessqueryfilters,.people-filters,.periodcompletedfilters){grid-template-columns:1fr!important}
  .appbody :where(.filteractions,.queryactionbar,.modalactions){align-items:stretch}.appbody :where(.filteractions,.queryactionbar)>*{min-width:0!important}
  .appbody :where(.perioddashboardactions,.people-hero-actions,.businesshero .buttonrow,.paneltitle>.buttonrow){grid-template-columns:repeat(2,minmax(0,1fr))!important}.appbody :where(.perioddashboardactions,.people-hero-actions,.businesshero .buttonrow,.paneltitle>.buttonrow)>*{min-width:0!important}
  html body.appbody main .tablewrap:not(#allow-page-overflow){overflow-x:auto!important;overflow-y:hidden!important}.appbody dialog{max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
  html body.appbody main .rowactions .tiny{min-height:40px!important}
  .appbody :where(.mobilelogcard,.periodcompletedcard,.superpersoncard){content-visibility:auto;contain-intrinsic-size:auto 240px}
}

@media(max-width:380px){
  .appbody :where(.metrics,.metrics-five,.adminmetrics,.periodmetrics,.perioddetailmetrics,.filtertotals,.supermetrics,.databasemetrics){grid-template-columns:1fr!important}
  .appbody :where(.perioddashboardactions,.people-hero-actions,.businesshero .buttonrow,.paneltitle>.buttonrow,.filteractions,.queryactionbar,.modalactions){grid-template-columns:1fr!important}
}

@media(hover:hover) and (pointer:fine){.appbody :where(.metric,.adminmetrics>article,.shortcutgrid>a,.periodworkbenchhub>a,.financeworkbenchhub>a,.businessledgercard,.people-row,.periodcompletedcard,.superpersoncard):hover{border-color:rgba(103,76,124,.16)!important;box-shadow:0 16px 42px rgba(44,31,55,.085)!important;filter:saturate(1.025)!important}}

/* 5.6.1 memo reading alignment and compact mobile company picker. */
html body.appbody :is(.memoitembutton,.memoallitem,.memocardcopy,.memoreadonly,.loginremindercard,.memodetailfooter,.memomanagenotice){text-align:left!important}
html body.appbody :is(.memoitembutton,.memoallitem) :is(h3,h4,p,b,small,span),
html body.appbody dialog :is(.memoreadonly,.loginremindercard) :is(h3,h4,p,b,small,span){text-align:left!important}

@media(max-width:700px){
  html body.appbody dialog#businessCompanySelect.businesscompanydialog{
    inset:0!important;
    width:calc(100vw - 20px)!important;
    max-width:520px!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(78dvh,640px)!important;
    margin:auto!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  html body.appbody dialog#businessCompanySelect.businesscompanydialog>.businessdialogbody{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(78dvh,640px)!important;
    padding:15px!important;
    overflow:hidden!important;
  }
  html body.appbody dialog#businessCompanySelect .modalhead{
    flex:0 0 auto!important;
    align-items:flex-start!important;
    margin:0 0 10px!important;
    padding:0 0 10px!important;
  }
  html body.appbody dialog#businessCompanySelect .modalhead h3{font-size:18px!important;line-height:1.25!important}
  html body.appbody dialog#businessCompanySelect .modalhead p{margin-top:3px!important;font-size:10px!important;line-height:1.45!important}
  html body.appbody dialog#businessCompanySelect .businesscompanychoices{
    display:grid!important;
    grid-template-columns:1fr!important;
    flex:0 1 auto!important;
    gap:7px!important;
    width:100%!important;
    min-height:0!important;
    max-height:calc(min(78dvh,640px) - 102px)!important;
    margin:0!important;
    padding:1px 3px 1px 1px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  html body.appbody dialog#businessCompanySelect .businesscompanychoices>button{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 16px!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    gap:2px 10px!important;
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    margin:0!important;
    padding:8px 10px!important;
    border-radius:14px!important;
    text-align:left!important;
  }
  html body.appbody dialog#businessCompanySelect .businessledgericon{grid-column:1!important;grid-row:1/3!important;width:38px!important;height:38px!important;border-radius:12px!important}
  html body.appbody dialog#businessCompanySelect .businesscompanychoices strong{grid-column:2!important;grid-row:1!important;min-width:0!important;overflow-wrap:anywhere!important;font-size:13px!important;line-height:1.35!important;text-align:left!important}
  html body.appbody dialog#businessCompanySelect .businesscompanychoices small{grid-column:2!important;grid-row:2!important;margin:0!important;font-size:9px!important;text-align:left!important}
  html body.appbody dialog#businessCompanySelect .businesscompanychoices i{display:grid!important;grid-column:3!important;grid-row:1/3!important;place-items:center!important;width:16px!important;height:24px!important;font-size:20px!important;line-height:1!important}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.appbody *,.appbody *::before,.appbody *::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}

@keyframes uiPageIn{from{opacity:0;transform:translate3d(0,7px,0)}to{opacity:1;transform:none}}
@keyframes uiPageOut{from{opacity:1}to{opacity:0}}
@keyframes uiItemIn{from{opacity:0;transform:translate3d(0,5px,0) scale(.996)}to{opacity:1;transform:none}}
@keyframes uiStatusIn{from{opacity:0;transform:translate3d(0,-6px,0) scale(.992)}to{opacity:1;transform:none}}
@keyframes uiBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes uiAmbientFloat{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.06)}}