/* ==========================================================
   v19.8.5 Login zoom-stability / enterprise responsive pass
   Scope: login page only. Backend / auth logic untouched.
   Goal: keep the approved split login design stable from 75% to 110% zoom.
   ========================================================== */

html,
body.loginbody{
  width:100% !important;
  min-height:100svh !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#f5f8fe !important;
}

body.loginbody{
  font-family:"Segoe UI", Arial, sans-serif !important;
  color:#061b3a !important;
}

body.loginbody .approved-login-page{
  width:100vw !important;
  height:100svh !important;
  min-height:100svh !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:minmax(640px,58fr) minmax(440px,42fr) !important;
  background:linear-gradient(90deg,#f7faff 0%,#f7faff 58%,#0f4ec5 58%,#08347f 100%) !important;
  font-family:"Segoe UI", Arial, sans-serif !important;
}

body.loginbody .approved-left,
body.loginbody .approved-right{
  min-width:0 !important;
  min-height:0 !important;
}

body.loginbody .approved-left{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  padding:clamp(24px,4vh,52px) clamp(30px,4vw,64px) clamp(18px,3vh,28px) clamp(42px,4.2vw,72px) !important;
  background:#f7faff !important;
  overflow:hidden !important;
}

body.loginbody .approved-brand{
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:0 0 auto !important;
}

body.loginbody .approved-brand img{
  width:clamp(42px,3.4vw,58px) !important;
  height:clamp(42px,3.4vw,58px) !important;
  flex:0 0 auto !important;
}

body.loginbody .approved-brand strong{
  font-size:clamp(26px,2.4vw,38px) !important;
  letter-spacing:-.03em !important;
  line-height:.95 !important;
}

body.loginbody .approved-brand span{
  font-size:clamp(12px,.95vw,18px) !important;
  margin-top:4px !important;
}

body.loginbody .approved-headline{
  max-width:560px !important;
  margin-top:clamp(18px,5vh,58px) !important;
  flex:0 0 auto !important;
}

body.loginbody .approved-headline h1{
  font-size:clamp(34px,3.15vw,52px) !important;
  line-height:1.08 !important;
  letter-spacing:-.045em !important;
  margin:0 !important;
}

body.loginbody .approved-headline p{
  margin-top:clamp(10px,1.5vh,18px) !important;
  max-width:510px !important;
  font-size:clamp(13px,.9vw,17px) !important;
  line-height:1.55 !important;
}

body.loginbody .approved-trust-row{
  margin-top:clamp(12px,1.8vh,20px) !important;
  gap:8px !important;
}

body.loginbody .approved-trust-row span{
  height:30px !important;
  padding:0 12px !important;
  font-size:clamp(10px,.68vw,12px) !important;
  white-space:nowrap !important;
}

body.loginbody .approved-illustration{
  position:relative !important;
  width:min(620px,86%) !important;
  height:clamp(220px,31vh,315px) !important;
  margin-top:clamp(18px,4vh,42px) !important;
  transform:none !important;
  transform-origin:left top !important;
  flex:0 0 auto !important;
}

body.loginbody .approved-features{
  flex:0 0 auto !important;
  width:min(560px,100%) !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(72px,1fr)) !important;
  gap:clamp(10px,2vw,28px) !important;
  margin:clamp(12px,2vh,24px) 0 0 !important;
}

body.loginbody .approved-features em{
  width:clamp(34px,2.6vw,46px) !important;
  height:clamp(34px,2.6vw,46px) !important;
  margin-bottom:6px !important;
}

body.loginbody .approved-features span{
  font-size:clamp(10px,.68vw,13px) !important;
  line-height:1.2 !important;
}

body.loginbody .approved-footer{
  flex:0 0 auto !important;
  margin-top:clamp(10px,1.8vh,20px) !important;
  font-size:clamp(10px,.72vw,13px) !important;
}

body.loginbody .approved-right{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  padding:clamp(18px,3.2vh,42px) clamp(18px,3vw,46px) !important;
  overflow:hidden !important;
  background:radial-gradient(circle at 80% 14%,rgba(96,165,250,.34),transparent 27%),linear-gradient(135deg,#0d55d7 0%,#082f79 100%) !important;
}

body.loginbody .approved-right:after{
  content:"" !important;
  position:absolute !important;
  right:clamp(24px,4vw,70px) !important;
  top:clamp(180px,28vh,280px) !important;
  width:clamp(150px,13vw,230px) !important;
  height:clamp(220px,32vh,380px) !important;
  background-image:radial-gradient(rgba(255,255,255,.25) 1.35px,transparent 1.35px) !important;
  background-size:18px 18px !important;
  opacity:.38 !important;
  pointer-events:none !important;
}

body.loginbody .approved-red-curve{
  position:absolute !important;
  left:clamp(-190px,-8.8vw,-150px) !important;
  top:-16svh !important;
  width:clamp(240px,15.5vw,320px) !important;
  height:132svh !important;
  background:#e3182d !important;
  border-radius:50% !important;
  transform:rotate(7deg) !important;
  box-shadow:14px 0 0 rgba(255,255,255,.95) !important;
  pointer-events:none !important;
}

body.loginbody .approved-login-card{
  position:relative !important;
  z-index:3 !important;
  width:clamp(360px,29vw,430px) !important;
  max-width:min(430px,92vw) !important;
  max-height:calc(100svh - clamp(36px,6vh,84px)) !important;
  overflow:auto !important;
  scrollbar-width:none !important;
  transform:none !important;
  border-radius:22px !important;
  padding:clamp(22px,2.3vw,34px) clamp(24px,2.2vw,34px) clamp(20px,2vw,28px) !important;
  background:rgba(255,255,255,.985) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.28) !important;
}

body.loginbody .approved-login-card::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
}

body.loginbody .approved-card-logo{
  margin-bottom:clamp(8px,1.3vh,14px) !important;
}

body.loginbody .approved-card-logo img{
  width:clamp(44px,3.1vw,58px) !important;
  height:clamp(44px,3.1vw,58px) !important;
}

body.loginbody .approved-card-logo strong{
  font-size:clamp(27px,1.9vw,38px) !important;
  letter-spacing:-.035em !important;
}

body.loginbody .approved-login-card h2{
  font-size:clamp(18px,1.18vw,23px) !important;
  line-height:1.1 !important;
  margin:0 0 7px !important;
}

body.loginbody .approved-login-card > p{
  font-size:clamp(12px,.76vw,14px) !important;
  line-height:1.45 !important;
  margin:0 0 clamp(14px,1.9vh,22px) !important;
}

body.loginbody .approved-login-card label{
  margin:clamp(10px,1.35vh,15px) 0 6px !important;
  font-size:clamp(11px,.7vw,13px) !important;
}

body.loginbody .approved-input{
  min-height:0 !important;
  height:clamp(40px,5.2vh,47px) !important;
  border-radius:10px !important;
  padding:0 12px !important;
}

body.loginbody .approved-input input{
  font-size:clamp(12px,.78vw,14px) !important;
  min-width:0 !important;
}

body.loginbody .approved-options{
  gap:8px !important;
  margin:clamp(9px,1.35vh,14px) 0 !important;
  flex-wrap:wrap !important;
}

body.loginbody .approved-options label,
body.loginbody .approved-help-text{
  font-size:clamp(11px,.72vw,13px) !important;
}

body.loginbody .approved-login-card form button{
  height:clamp(42px,5.4vh,48px) !important;
  border-radius:10px !important;
  font-size:clamp(13px,.9vw,16px) !important;
}

body.loginbody .approved-login-note{
  margin-top:clamp(10px,1.5vh,14px) !important;
  padding:clamp(9px,1.3vh,12px) 12px !important;
  font-size:clamp(11px,.72vw,13px) !important;
  line-height:1.42 !important;
}

body.loginbody .approved-divider{
  margin:clamp(12px,1.8vh,20px) 0 !important;
  gap:12px !important;
}

body.loginbody .approved-ms{
  height:clamp(40px,5vh,45px) !important;
  border-radius:10px !important;
  font-size:clamp(12px,.8vw,14px) !important;
}

body.loginbody .approved-contact{
  margin-top:clamp(12px,1.8vh,20px) !important;
  font-size:clamp(11px,.72vw,13px) !important;
}

@media (min-width:1600px){
  body.loginbody .approved-login-card{width:430px !important;}
  body.loginbody .approved-left{padding-left:72px !important;}
}

@media (max-width:1320px){
  body.loginbody .approved-login-page{
    grid-template-columns:minmax(560px,56fr) minmax(420px,44fr) !important;
  }
  body.loginbody .approved-left{padding-left:42px !important;padding-right:30px !important;}
  body.loginbody .approved-illustration{width:min(560px,90%) !important;}
}

@media (max-width:1120px){
  body.loginbody .approved-login-page{
    grid-template-columns:1fr !important;
    background:linear-gradient(135deg,#0d55d7,#082f79) !important;
  }
  body.loginbody .approved-left,
  body.loginbody .approved-red-curve{
    display:none !important;
  }
  body.loginbody .approved-right{
    min-height:100svh !important;
    padding:24px !important;
  }
  body.loginbody .approved-login-card{
    width:min(430px,92vw) !important;
  }
}

@media (max-width:520px){
  body.loginbody{overflow:auto !important;}
  body.loginbody .approved-login-page{height:auto !important;min-height:100svh !important;overflow:auto !important;}
  body.loginbody .approved-right{padding:18px 14px !important;}
  body.loginbody .approved-login-card{width:100% !important;max-height:none !important;padding:22px 18px !important;}
  body.loginbody .approved-options{display:block !important;}
  body.loginbody .approved-options .approved-help-text{display:block !important;margin-top:8px !important;}
}

@media (max-height:820px) and (min-width:1121px){
  body.loginbody .approved-left{padding-top:26px !important;padding-bottom:18px !important;}
  body.loginbody .approved-headline{margin-top:22px !important;}
  body.loginbody .approved-illustration{height:250px !important;margin-top:20px !important;transform:scale(.9) !important;transform-origin:left top !important;}
  body.loginbody .approved-features{margin-top:4px !important;}
  body.loginbody .approved-footer{margin-top:8px !important;}
}

@media (max-height:720px){
  body.loginbody .approved-login-card{
    max-height:calc(100svh - 28px) !important;
    padding:18px 22px !important;
  }
  body.loginbody .approved-card-logo{margin-bottom:6px !important;}
  body.loginbody .approved-login-card > p{margin-bottom:10px !important;}
  body.loginbody .approved-login-note{padding:8px 10px !important;}
  body.loginbody .approved-divider{margin:10px 0 !important;}
}


/* ==========================================================
   v19.8.6 final login zoom fit pass
   Scope: login page UI/CSS only. Auth/backend untouched.
   Fix: keeps the card fully visible at 50/67/75/80/90/100/110% browser zoom
        and prevents the right login card from being clipped at high zoom.
   ========================================================== */

body.loginbody .approved-login-page{
  height:100dvh !important;
  min-height:100dvh !important;
}

body.loginbody .approved-left{
  box-sizing:border-box !important;
}

body.loginbody .approved-login-card{
  box-sizing:border-box !important;
  width:clamp(350px,27.5vw,410px) !important;
  max-width:min(410px,92vw) !important;
  padding:clamp(20px,1.85vw,30px) clamp(22px,1.9vw,30px) clamp(18px,1.75vw,26px) !important;
  border-radius:22px !important;
  overflow:auto !important;
  transform:translateZ(0) !important;
  transform-origin:center center !important;
}

body.loginbody .approved-card-logo img{
  width:clamp(40px,2.6vw,52px) !important;
  height:clamp(40px,2.6vw,52px) !important;
}

body.loginbody .approved-card-logo strong{
  font-size:clamp(26px,1.7vw,34px) !important;
}

body.loginbody .approved-login-card h2{
  font-size:clamp(18px,1.05vw,22px) !important;
  margin-bottom:6px !important;
}

body.loginbody .approved-login-card > p{
  margin-bottom:clamp(10px,1.25vh,18px) !important;
}

body.loginbody .approved-input{
  height:clamp(38px,4.7vh,45px) !important;
}

body.loginbody .approved-login-card form button{
  height:clamp(40px,4.8vh,46px) !important;
}

body.loginbody .approved-divider{
  margin:clamp(10px,1.35vh,16px) 0 !important;
}

body.loginbody .approved-contact{
  margin-top:clamp(8px,1.2vh,14px) !important;
}

/* Compact vertical mode: this is what fixes 100/110% zoom on laptop-height screens. */
@media (max-height:780px) and (min-width:1121px){
  body.loginbody .approved-left{
    padding-top:22px !important;
    padding-bottom:14px !important;
  }

  body.loginbody .approved-brand img{
    width:42px !important;
    height:42px !important;
  }

  body.loginbody .approved-brand strong{
    font-size:30px !important;
  }

  body.loginbody .approved-brand span{
    font-size:13px !important;
    margin-top:3px !important;
  }

  body.loginbody .approved-headline{
    margin-top:18px !important;
    max-width:520px !important;
  }

  body.loginbody .approved-headline h1{
    font-size:40px !important;
    line-height:1.04 !important;
  }

  body.loginbody .approved-headline p{
    margin-top:10px !important;
    font-size:13px !important;
    line-height:1.42 !important;
  }

  body.loginbody .approved-trust-row{
    margin-top:12px !important;
  }

  body.loginbody .approved-trust-row span{
    height:27px !important;
    padding:0 10px !important;
    font-size:10px !important;
  }

  body.loginbody .approved-illustration{
    height:190px !important;
    margin-top:12px !important;
    transform:scale(.72) !important;
    transform-origin:left top !important;
  }

  body.loginbody .approved-features{
    margin-top:0 !important;
    gap:12px !important;
  }

  body.loginbody .approved-features em{
    width:34px !important;
    height:34px !important;
    margin-bottom:4px !important;
  }

  body.loginbody .approved-features span{
    font-size:10px !important;
  }

  body.loginbody .approved-footer{
    margin-top:6px !important;
    font-size:10px !important;
  }

  body.loginbody .approved-right{
    padding:12px 22px !important;
  }

  body.loginbody .approved-red-curve{
    left:-150px !important;
    width:250px !important;
    box-shadow:12px 0 0 rgba(255,255,255,.95) !important;
  }

  body.loginbody .approved-login-card{
    width:390px !important;
    max-width:390px !important;
    max-height:none !important;
    padding:18px 22px 16px !important;
    transform:scale(.92) !important;
  }

  body.loginbody .approved-card-logo{
    margin-bottom:6px !important;
  }

  body.loginbody .approved-card-logo img{
    width:42px !important;
    height:42px !important;
  }

  body.loginbody .approved-card-logo strong{
    font-size:29px !important;
  }

  body.loginbody .approved-login-card h2{
    font-size:18px !important;
    margin-bottom:4px !important;
  }

  body.loginbody .approved-login-card > p{
    font-size:11px !important;
    margin-bottom:9px !important;
  }

  body.loginbody .approved-login-card label{
    margin:8px 0 4px !important;
    font-size:10.5px !important;
  }

  body.loginbody .approved-input{
    height:36px !important;
    border-radius:9px !important;
    padding:0 10px !important;
  }

  body.loginbody .approved-input input{
    font-size:11.5px !important;
  }

  body.loginbody .approved-options{
    margin:8px 0 !important;
    gap:7px !important;
  }

  body.loginbody .approved-options label,
  body.loginbody .approved-help-text{
    font-size:10.5px !important;
  }

  body.loginbody .approved-login-card form button{
    height:38px !important;
    font-size:13px !important;
  }

  body.loginbody .approved-login-note{
    margin-top:8px !important;
    padding:8px 10px !important;
    font-size:10.5px !important;
    line-height:1.35 !important;
  }

  body.loginbody .approved-divider{
    margin:8px 0 !important;
  }

  body.loginbody .approved-ms{
    height:36px !important;
    font-size:11px !important;
  }

  body.loginbody .approved-contact{
    margin-top:7px !important;
    font-size:10.5px !important;
  }
}

/* Extra-tight mode for 110% browser zoom or shorter projected displays. */
@media (max-height:680px) and (min-width:1121px){
  body.loginbody .approved-left{
    padding-top:18px !important;
    padding-bottom:10px !important;
  }

  body.loginbody .approved-headline{
    margin-top:12px !important;
  }

  body.loginbody .approved-headline h1{
    font-size:36px !important;
  }

  body.loginbody .approved-headline p{
    font-size:12px !important;
    max-width:460px !important;
  }

  body.loginbody .approved-illustration{
    height:145px !important;
    margin-top:8px !important;
    transform:scale(.58) !important;
  }

  body.loginbody .approved-login-card{
    width:370px !important;
    max-width:370px !important;
    padding:15px 18px 13px !important;
    transform:scale(.86) !important;
  }

  body.loginbody .approved-card-logo img{
    width:38px !important;
    height:38px !important;
  }

  body.loginbody .approved-card-logo strong{
    font-size:26px !important;
  }

  body.loginbody .approved-login-card h2{
    font-size:17px !important;
  }

  body.loginbody .approved-login-card > p{
    font-size:10.5px !important;
    margin-bottom:7px !important;
  }

  body.loginbody .approved-input{
    height:33px !important;
  }

  body.loginbody .approved-login-card form button,
  body.loginbody .approved-ms{
    height:34px !important;
  }

  body.loginbody .approved-login-note{
    padding:7px 9px !important;
    font-size:10px !important;
  }
}

/* Ultra-tight safety net: never clip the login form; allow page scroll only if the display is unusually short. */
@media (max-height:600px){
  html,
  body.loginbody{
    overflow:auto !important;
  }

  body.loginbody .approved-login-page{
    min-height:600px !important;
    height:auto !important;
  }
}


/* ==========================================================
   v19.8.7 Login illustration visibility fix
   Scope: login page UI/CSS only. Backend/auth/admin untouched.
   Problem fixed: the left-side task illustration was disappearing at
   browser zoom levels like 67%/75% because an older global responsive
   rule could still set .approved-illustration to display:none.
   ========================================================== */
body.loginbody .approved-illustration{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:0 0 auto !important;
  overflow:visible !important;
  z-index:2 !important;
}

body.loginbody .approved-illustration .city,
body.loginbody .approved-illustration .desk-user,
body.loginbody .approved-illustration .task-board,
body.loginbody .approved-illustration .standing-user,
body.loginbody .approved-illustration .plant-final{
  visibility:visible !important;
  opacity:1 !important;
}

body.loginbody .approved-illustration .task-board{
  display:grid !important;
}

/* Keep the illustration present even on short laptop viewports/zoomed views. */
@media (max-height:760px) and (min-width:901px){
  body.loginbody .approved-illustration{
    display:block !important;
    height:170px !important;
    margin-top:10px !important;
    transform:scale(.66) !important;
    transform-origin:left top !important;
  }
}

@media (max-height:680px) and (min-width:1121px){
  body.loginbody .approved-illustration{
    display:block !important;
    height:145px !important;
    margin-top:8px !important;
    transform:scale(.56) !important;
    transform-origin:left top !important;
  }
}

/* Zoom-out layouts such as 67% must not leave a blank illustration slot. */
@media (min-width:1121px) and (min-height:761px){
  body.loginbody .approved-illustration{
    display:block !important;
  }
}