/* =========================================================
   INVENTRO LOGIN BRANDING
   Login-specific dark logo, fixed at 400 × 200 px on desktop.
   ========================================================= */

:root{
  --login-logo-width:400px;
  --login-logo-height:200px;
  --login-mobile-logo-width:300px;
  --login-mobile-logo-height:100px;
}

/* Desktop hero logo: fixed to the top-left and always uses the dark logo. */
.showcase-brand{
  position:absolute !important;
  top:24px !important;
  left:clamp(30px,4vw,72px) !important;
  z-index:10 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:var(--login-logo-width) !important;
  height:var(--login-logo-height) !important;
  min-height:var(--login-logo-height) !important;
  margin:0 !important;
  overflow:visible !important;
}

.showcase-brand .login-dark-logo-box{
  display:block !important;
  width:var(--login-logo-width) !important;
  height:var(--login-logo-height) !important;
  min-width:var(--login-logo-width) !important;
  min-height:var(--login-logo-height) !important;
  overflow:visible !important;
}

.showcase-brand .login-dark-logo{
  display:block !important;
  width:var(--login-logo-width) !important;
  height:var(--login-logo-height) !important;
  min-width:var(--login-logo-width) !important;
  min-height:var(--login-logo-height) !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left top !important;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.22)) !important;
}

/* Prevent the hero copy from moving beneath the larger absolute logo. */
.auth-showcase{
  padding-top:224px !important;
}

/* The second logo is mobile-only, so no duplicate appears on desktop. */
.mobile-brand{
  display:none !important;
}

@media (min-width:821px) and (max-height:850px){
  .showcase-brand{
    top:14px !important;
  }

  .auth-showcase{
    padding-top:190px !important;
  }
}

@media (max-width:820px){
  .showcase-brand{
    display:none !important;
  }

  .auth-showcase{
    padding-top:inherit !important;
  }

  .mobile-brand{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:var(--login-mobile-logo-height) !important;
    margin:0 0 18px !important;
  }

  .mobile-brand .login-dark-logo-box{
    display:block !important;
    width:var(--login-mobile-logo-width) !important;
    height:var(--login-mobile-logo-height) !important;
  }

  .mobile-brand .login-dark-logo{
    display:block !important;
    width:var(--login-mobile-logo-width) !important;
    height:var(--login-mobile-logo-height) !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
  }
}


/* IPHONE MOBILE LOGO SPACING FIX */
@media (max-width:820px){
  .auth-panel{
    padding-top:calc(34px + env(safe-area-inset-top)) !important;
  }

  .mobile-brand{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:100px !important;
    margin:26px 0 24px !important;
    padding-top:10px !important;
  }

  .mobile-brand .login-dark-logo-box,
  .mobile-brand .brand-logo-box,
  .mobile-brand .dual-theme-logo{
    width:280px !important;
    max-width:100% !important;
    height:96px !important;
    min-height:96px !important;
  }

  .mobile-brand .login-dark-logo,
  .mobile-brand .brand-logo,
  .mobile-brand .login-logo{
    width:280px !important;
    max-width:100% !important;
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  .auth-card{
    margin-top:12px !important;
  }
}

@media (max-width:520px){
  .auth-panel{
    padding-top:calc(28px + env(safe-area-inset-top)) !important;
  }

  .mobile-brand{
    margin-top:22px !important;
    margin-bottom:22px !important;
  }
}


/* IPHONE MOBILE OVERLAP FIX */
@media (max-width:820px){
  html,
  body.auth-page{
    min-height:100%;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .auth-shell{
    display:block !important;
    min-height:100dvh !important;
    height:auto !important;
    overflow:visible !important;
  }

  .auth-showcase{
    display:none !important;
  }

  .auth-panel{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    min-height:100dvh !important;
    height:auto !important;
    overflow:visible !important;
    padding:
      calc(28px + env(safe-area-inset-top))
      18px
      calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-brand{
    position:relative !important;
    inset:auto !important;
    z-index:2 !important;
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:96px !important;
    height:96px !important;
    margin:0 0 28px !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .mobile-brand .login-dark-logo-box,
  .mobile-brand .brand-logo-box,
  .mobile-brand .dual-theme-logo{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:280px !important;
    max-width:100% !important;
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;
  }

  .mobile-brand .login-dark-logo,
  .mobile-brand .brand-logo,
  .mobile-brand .login-logo{
    position:static !important;
    inset:auto !important;
    display:block !important;
    width:280px !important;
    max-width:100% !important;
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
  }

  .auth-card{
    position:relative !important;
    z-index:1 !important;
    flex:0 0 auto !important;
    width:min(100%,545px) !important;
    max-height:none !important;
    margin:0 !important;
    overflow:visible !important;
  }
}

@media (max-width:520px){
  .auth-panel{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .mobile-brand{
    margin-bottom:24px !important;
  }
}