/* StaffSwift V3.3.10 — final auth layout and visibility layer.
   Loaded after every legacy auth stylesheet to provide one predictable layout. */
:root{
  --ss-auth-page-pad:clamp(12px,1.6vw,24px);
  --ss-auth-gap:clamp(12px,1.25vw,18px);
  --ss-auth-shell-max:1320px;
  --ss-auth-left-width:clamp(350px,37vw,480px);
}

body.ss-auth{
  min-height:100dvh!important;
  padding:var(--ss-auth-page-pad)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow-x:hidden!important;
}

.ss-auth .auth-shell,
.ss-auth .auth-wrap{
  width:min(100%,var(--ss-auth-shell-max))!important;
  min-height:min(820px,calc(100dvh - (var(--ss-auth-page-pad) * 2)))!important;
  height:auto!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,var(--ss-auth-left-width)) minmax(0,1fr)!important;
  gap:var(--ss-auth-gap)!important;
  align-items:stretch!important;
  background:transparent!important;
}

/* Closely spaced left information card */
.ss-auth .auth-side,
.ss-auth .auth-left{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:clamp(28px,3.2vw,46px)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:28px!important;
  box-shadow:0 24px 70px rgba(7,14,48,.22)!important;
}
.ss-auth .auth-side .logo,
.ss-auth .auth-left .logo,
.ss-auth .al-logo img{
  display:block!important;
  width:min(100%,285px)!important;
  height:auto!important;
  max-height:52px!important;
  object-fit:contain!important;
  object-position:left center!important;
  opacity:1!important;
  visibility:visible!important;
}
.ss-auth .side-chip,
.ss-auth .al-logo-badge{
  margin-top:clamp(26px,4vh,44px)!important;
}
.ss-auth .side-title,
.ss-auth .al-headline{
  max-width:430px!important;
  margin:18px 0 13px!important;
  font-size:clamp(34px,3.25vw,48px)!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
  text-wrap:balance!important;
}
.ss-auth .side-copy,
.ss-auth .al-sub{
  max-width:430px!important;
  font-size:15px!important;
  line-height:1.68!important;
}
.ss-auth .side-list{
  width:100%!important;
  max-width:430px!important;
  margin-top:clamp(24px,4vh,38px)!important;
  gap:10px!important;
}
.ss-auth .side-item{
  grid-template-columns:40px minmax(0,1fr)!important;
  padding:12px!important;
  border-radius:15px!important;
}
.ss-auth .side-ico{width:40px!important;height:40px!important}
.ss-auth .side-item strong{font-size:13.5px!important}
.ss-auth .side-item span{font-size:12px!important;line-height:1.48!important}
.ss-auth .side-links{margin-top:24px!important}

/* Form side: no large empty gutter between cards */
.ss-auth .auth-main,
.ss-auth .auth-right{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  background:transparent!important;
}
.ss-auth .auth-card,
.ss-auth .ar-inner{
  width:100%!important;
  max-width:none!important;
  min-height:100%!important;
  margin:0!important;
  padding:clamp(26px,3.3vw,44px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border-radius:28px!important;
  box-shadow:0 24px 70px rgba(11,19,64,.12)!important;
}
html[data-theme="dark"] .ss-auth .auth-card,
html[data-theme="dark"] .ss-auth .ar-inner{box-shadow:0 24px 70px rgba(0,0,0,.34)!important}

.ss-auth .auth-top{margin-bottom:20px!important}
.ss-auth .brand-mini{
  min-width:0!important;
  gap:9px!important;
}
.ss-auth .brand-mini img{
  display:block!important;
  width:38px!important;
  height:38px!important;
  padding:5px!important;
  border-radius:11px!important;
  background:#0b1340!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  box-shadow:0 5px 15px rgba(11,19,64,.18)!important;
}
.ss-auth .brand-mini span{font-size:14px!important;white-space:nowrap!important}
.ss-auth .auth-title,
.ss-auth .content h1{
  font-size:clamp(30px,3vw,43px)!important;
  line-height:1.12!important;
}
.ss-auth .auth-sub{font-size:14px!important;line-height:1.65!important;max-width:680px!important}
.ss-auth .account-type-banner{margin-bottom:20px!important}
.ss-auth .form-grid{gap:14px!important}
.ss-auth .form-grid.two{gap:14px!important}
.ss-auth .field label{font-size:12px!important;line-height:1.3!important}
.ss-auth .input,
.ss-auth .textarea,
.ss-auth select{
  min-height:48px!important;
  font-size:15px!important;
}
.ss-auth .textarea{min-height:108px!important}
.ss-auth .btn,
.ss-auth button[type="submit"]{min-height:48px!important;font-size:14px!important}
.ss-auth .social-btn,.ss-auth .soc-btn{font-size:13px!important;min-height:47px!important}
.ss-auth .tabs,.ss-auth .portal-switch,.ss-auth .role-switcher{margin-bottom:18px!important}
.ss-auth .stepper{margin-bottom:22px!important}
.ss-auth .step-indicator{font-size:12px!important;min-height:44px!important}
.ss-auth .wizard-actions,.ss-auth .actions,.ss-auth .step-actions{gap:12px!important;margin-top:24px!important}

/* Laptop: retain readable left copy and a compact gap. */
@media (min-width:901px) and (max-width:1180px){
  :root{--ss-auth-page-pad:14px;--ss-auth-gap:12px;--ss-auth-left-width:clamp(310px,35vw,390px)}
  .ss-auth .auth-shell,.ss-auth .auth-wrap{min-height:calc(100dvh - 28px)!important}
  .ss-auth .auth-side,.ss-auth .auth-left{padding:28px!important;border-radius:24px!important}
  .ss-auth .auth-side .logo,.ss-auth .auth-left .logo,.ss-auth .al-logo img{width:min(100%,230px)!important;max-height:44px!important}
  .ss-auth .side-chip,.ss-auth .al-logo-badge{margin-top:25px!important}
  .ss-auth .side-title,.ss-auth .al-headline{font-size:34px!important;line-height:1.1!important}
  .ss-auth .side-copy,.ss-auth .al-sub{font-size:14px!important;line-height:1.62!important}
  .ss-auth .side-list{margin-top:22px!important}
  .ss-auth .side-item{padding:11px!important}
  .ss-auth .side-item:nth-child(n+3){display:none!important}
  .ss-auth .auth-card,.ss-auth .ar-inner{padding:30px!important;border-radius:24px!important}
  .ss-auth .auth-title,.ss-auth .content h1{font-size:34px!important}
}

/* Tablet and phone: a compact dark brand strip with a clearly visible logo. */
@media (max-width:900px){
  body.ss-auth{
    display:block!important;
    min-height:100dvh!important;
    padding:0!important;
    background:var(--ss-auth-bg)!important;
  }
  .ss-auth .auth-shell,
  .ss-auth .auth-wrap{
    width:100%!important;
    min-height:100dvh!important;
    display:block!important;
    margin:0!important;
  }
  .ss-auth .auth-side,
  .ss-auth .auth-left{
    min-height:76px!important;
    height:auto!important;
    padding:16px 20px 20px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:0 0 24px 24px!important;
    box-shadow:0 12px 32px rgba(7,14,48,.24)!important;
  }
  .ss-auth .auth-side>div:first-child,
  .ss-auth .auth-left>div:first-child{
    width:100%!important;
    min-height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  .ss-auth .auth-side .logo,
  .ss-auth .auth-left .logo,
  .ss-auth .al-logo img{
    width:min(68vw,245px)!important;
    height:auto!important;
    max-height:42px!important;
    margin:0!important;
  }
  .ss-auth .side-chip,
  .ss-auth .side-title,
  .ss-auth .side-copy,
  .ss-auth .side-list,
  .ss-auth .side-links,
  .ss-auth .al-logo-badge,
  .ss-auth .al-headline,
  .ss-auth .al-sub{display:none!important}
  .ss-auth .auth-main,
  .ss-auth .auth-right{
    min-height:0!important;
    padding:12px 12px 30px!important;
    margin:0!important;
    display:block!important;
  }
  .ss-auth .auth-card,
  .ss-auth .ar-inner{
    width:100%!important;
    min-height:0!important;
    margin:-8px 0 0!important;
    padding:clamp(22px,5vw,32px)!important;
    border-radius:22px!important;
    box-shadow:0 12px 36px rgba(11,19,64,.12)!important;
  }
  .ss-auth .auth-title,.ss-auth .content h1{font-size:clamp(28px,6vw,36px)!important}
  .ss-auth .form-grid.two{grid-template-columns:minmax(0,1fr)!important}
  .ss-auth .success-grid{grid-template-columns:minmax(0,1fr)!important}
  .ss-auth .visual{min-height:280px!important}
}

@media (max-width:560px){
  .ss-auth .auth-side,.ss-auth .auth-left{min-height:68px!important;padding:14px 16px 18px!important;border-radius:0 0 20px 20px!important}
  .ss-auth .auth-side .logo,.ss-auth .auth-left .logo,.ss-auth .al-logo img{width:min(72vw,220px)!important;max-height:37px!important}
  .ss-auth .auth-main,.ss-auth .auth-right{padding:10px 8px 26px!important}
  .ss-auth .auth-card,.ss-auth .ar-inner{padding:21px 15px!important;border-radius:18px!important}
  .ss-auth .auth-top{align-items:center!important;margin-bottom:18px!important}
  .ss-auth .brand-mini img{width:36px!important;height:36px!important}
  .ss-auth .brand-mini span{display:inline!important;font-size:13px!important}
  .ss-auth .auth-top .auth-badge{max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ss-auth .account-type-banner{grid-template-columns:42px minmax(0,1fr)!important;padding:12px!important}
  .ss-auth .type-icon{width:42px!important;height:42px!important}
  .ss-auth .social-grid,.ss-auth .social-row{grid-template-columns:minmax(0,1fr)!important}
  .ss-auth .phone-control,.ss-auth .phone-row{grid-template-columns:102px minmax(0,1fr)!important;gap:8px!important}
  .ss-auth .stepper{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;gap:7px!important}
  .ss-auth .step-indicator{min-width:0!important;width:100%!important;border:1px solid var(--ss-auth-border)!important;border-radius:10px!important;padding:8px!important}
  .ss-auth .step-indicator.active{border-color:var(--ss-auth-blue)!important;background:color-mix(in srgb,var(--ss-auth-blue) 8%,var(--ss-auth-panel))!important}
  .ss-auth .wizard-actions,.ss-auth .actions,.ss-auth .step-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .ss-auth .wizard-actions>*{width:100%!important}
}

@media (max-height:760px) and (min-width:901px){
  .ss-auth .auth-shell,.ss-auth .auth-wrap{min-height:calc(100dvh - 24px)!important}
  .ss-auth .auth-side,.ss-auth .auth-left{padding:25px!important}
  .ss-auth .side-chip,.ss-auth .al-logo-badge{margin-top:22px!important}
  .ss-auth .side-title,.ss-auth .al-headline{font-size:32px!important}
  .ss-auth .side-list{margin-top:18px!important}
  .ss-auth .auth-card,.ss-auth .ar-inner{padding:27px!important}
}


/* StaffSwift V3.3.11: alternative sign-in actions belong below the primary sign-in button. */
.ss-auth .post-signin-divider{margin-top:18px!important;margin-bottom:12px!important}
.ss-auth .post-signin-options{margin:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.ss-auth .post-signin-options .social-btn{width:100%!important;min-height:48px!important;justify-content:flex-start!important;padding:11px 14px!important;text-align:left!important}
.ss-auth .post-signin-options .social-btn .i{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:24px!important;flex:0 0 24px!important;font-size:18px!important}
.ss-auth .post-signin-options .social-btn.phone{grid-column:auto!important}
@media(max-width:640px){
  .ss-auth .post-signin-options{grid-template-columns:minmax(0,1fr)!important}
}

/* StaffSwift V3.3.12 — mobile logo cleanup and branded alternative sign-in buttons. */
.ss-auth-login .login-side-list{
  gap:0!important;
  margin-top:clamp(22px,3.5vh,34px)!important;
}
.ss-auth-login .login-side-item{
  display:block!important;
  grid-template-columns:minmax(0,1fr)!important;
  padding:13px 0!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.ss-auth-login .login-side-item:first-child{border-top:0!important;padding-top:0!important}
.ss-auth-login .login-side-item strong{
  display:block!important;
  margin:0 0 4px!important;
  color:#fff!important;
  font-size:14px!important;
  letter-spacing:.005em!important;
}
.ss-auth-login .login-side-item span{
  display:block!important;
  color:rgba(255,255,255,.67)!important;
  font-size:12.5px!important;
  line-height:1.55!important;
}

.ss-auth-login .post-signin-options .social-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  min-height:50px!important;
  padding:11px 15px!important;
  border-radius:13px!important;
  font-size:13.5px!important;
  font-weight:750!important;
  line-height:1.2!important;
  text-decoration:none!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.ss-auth-login .post-signin-options .social-btn:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.025)!important;
  box-shadow:0 9px 22px rgba(11,19,64,.14)!important;
}
.ss-auth-login .post-signin-options .social-btn:focus-visible{
  outline:3px solid rgba(8,119,209,.28)!important;
  outline-offset:2px!important;
}
.ss-auth-login .post-signin-options .provider-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
}
.ss-auth-login .post-signin-options .provider-icon img{
  display:block!important;
  width:23px!important;
  height:23px!important;
  object-fit:contain!important;
}
.ss-auth-login .post-signin-options .provider-google{
  background:#fff!important;
  color:#202124!important;
  border:1px solid #cfd4dc!important;
}
.ss-auth-login .post-signin-options .provider-apple{
  background:#050505!important;
  color:#fff!important;
  border:1px solid #050505!important;
}
.ss-auth-login .post-signin-options .provider-facebook{
  background:#1877f2!important;
  color:#fff!important;
  border:1px solid #1877f2!important;
}
.ss-auth-login .post-signin-options .provider-phone{
  background:#16834b!important;
  color:#fff!important;
  border:1px solid #16834b!important;
}
html[data-theme="dark"] .ss-auth-login .post-signin-options .provider-google{
  background:#fff!important;
  color:#202124!important;
  border-color:#fff!important;
}

@media (max-width:900px){
  /* The navy top brand strip already contains the full logo on mobile. */
  .ss-auth-login .auth-top .brand-mini{display:none!important}
  .ss-auth-login .auth-top{justify-content:flex-end!important}
  .ss-auth-login .auth-top .auth-badge{margin-left:auto!important}
}

@media (max-width:640px){
  .ss-auth-login .post-signin-options .social-btn{
    min-height:52px!important;
    font-size:14px!important;
    padding:12px 16px!important;
  }
}