/*
THESIS: Authentication behaves like opening a premium event credential, not a stack of generic login cards.
OWN-WORLD: Maritime navy, TMF signal red, Langkawi teal, porcelain task surfaces, Cabinet/Satoshi typography with Geist numerals.
STORY: Enter the event, identify the participant, then confirm or create a PIN with immediate tactile feedback.
FIRST VIEWPORT: Authentic event artwork leads; date and venue sit on a quiet navy field; one yellow action anchors the bottom.
FORM: Artistic Asymmetry, first-ranked auth composition, deterministic seed 406; a pinned scene gives way to stacked task sheets.
*/

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');

#screen-employee-id,
#screen-pin-login,
#screen-set-pin,
#screen-admin-portal-login{
  --auth2-navy:#071b33;
  --auth2-navy-soft:#102c4e;
  --auth2-yellow:#E4362C; /* TMF brand red (logo is red+white) — was DHL's yellow accent */
  --auth2-teal:#0e9488;
  --auth2-coral:#e9573f;
  --auth2-ground:#f1f5f7;
  --auth2-white:#ffffff;
  --auth2-ink:#071b33;
  --auth2-muted:#5f6f82;
  --auth2-line:#dce5eb;
  --auth2-ease:cubic-bezier(.22,1,.36,1);
  --auth2-font:'Satoshi','DM Sans',sans-serif;
  --auth2-display:'Cabinet Grotesk','Satoshi','DM Sans',sans-serif;
  --auth2-numeric:'Geist','Satoshi','DM Sans',sans-serif;
  overflow-x:hidden!important;
  font-family:var(--auth2-font)!important;
  color:var(--auth2-ink)!important;
}

#screen-employee-id *,
#screen-pin-login *,
#screen-set-pin *,
#screen-admin-portal-login *{
  box-sizing:border-box;
  font-family:inherit;
}

.auth-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Arrival cover (#screen-login) is deliberately NOT restyled here anymore
   — repo owner: "Landing page change back to the previous layout that has
   'Click anywhere to enter...'". It now falls back entirely to the base
   poster-theme styling in index.html (see #screen-login .login-enter-hint
   there, which also carries the slow-blink animation requested in the same
   message). The other 4 auth screens below are unaffected. */

/* Shared credential shell ---------------------------------------------- */
#screen-employee-id.auth-screen,
#screen-pin-login.auth-screen,
#screen-set-pin.auth-screen,
#screen-admin-portal-login{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:100%!important;
  min-height:var(--app-vh,100vh)!important;
  background:var(--auth2-ground)!important;
  color:var(--auth2-ink)!important;
}

#screen-employee-id.auth-screen::before,
#screen-pin-login.auth-screen::before,
#screen-set-pin.auth-screen::before,
#screen-admin-portal-login::before{
  content:"TMF  TEAM BUILDING 2026"!important;
  display:block!important;
  position:absolute!important;
  z-index:5!important;
  top:calc(21px + var(--safe-top))!important;
  left:24px!important;
  width:auto!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  color:var(--auth2-yellow)!important;
  font-family:var(--auth2-font)!important;
  font-size:10px!important;
  font-weight:760!important;
  line-height:1!important;
  letter-spacing:.11em!important;
  pointer-events:none!important;
}

#screen-employee-id.auth-screen .top-curve,
#screen-pin-login.auth-screen .top-curve,
#screen-set-pin.auth-screen .top-curve,
#screen-admin-portal-login .top-curve{
  position:relative!important;
  z-index:1!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:224px!important;
  margin:0!important;
  padding:calc(83px + var(--safe-top)) 24px 46px!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:7px solid var(--auth2-yellow)!important;
  border-radius:0!important;
  background:var(--auth2-navy)!important;
  box-shadow:none!important;
  text-align:left!important;
}

#screen-employee-id.auth-screen .top-curve{
  min-height:252px!important;
  padding-top:calc(120px + var(--safe-top))!important;
}

#screen-employee-id.auth-screen .top-curve::before,
#screen-pin-login.auth-screen .top-curve::before,
#screen-set-pin.auth-screen .top-curve::before,
#screen-admin-portal-login .top-curve::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  right:0!important;
  width:18px!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:var(--auth2-teal)!important;
  opacity:1!important;
  pointer-events:none!important;
}

#screen-employee-id.auth-screen .top-curve::after,
#screen-pin-login.auth-screen .top-curve::after,
#screen-set-pin.auth-screen .top-curve::after,
#screen-admin-portal-login .top-curve::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  right:18px!important;
  bottom:0!important;
  width:44px!important;
  height:7px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--auth2-coral)!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  pointer-events:none!important;
}

#screen-employee-id.auth-screen .top-curve > *,
#screen-pin-login.auth-screen .top-curve > *,
#screen-set-pin.auth-screen .top-curve > *,
#screen-admin-portal-login .top-curve > *{
  position:relative!important;
  z-index:2!important;
}

#screen-employee-id.auth-screen .top-curve h2,
#screen-pin-login.auth-screen .top-curve h2,
#screen-set-pin.auth-screen .top-curve h1,
#screen-admin-portal-login .top-curve h2{
  width:100%!important;
  max-width:22rem!important;
  margin:0!important;
  color:var(--auth2-white)!important;
  font-family:var(--auth2-display)!important;
  font-size:clamp(29px,8.2vw,38px)!important;
  font-weight:760!important;
  line-height:1.02!important;
  letter-spacing:-.038em!important;
  text-align:left!important;
  text-wrap:balance!important;
}

#screen-employee-id.auth-screen .top-curve p,
#screen-pin-login.auth-screen .top-curve p,
#screen-admin-portal-login .top-curve p{
  max-width:36ch!important;
  margin:12px 0 0!important;
  color:rgba(255,255,255,.72)!important;
  font-family:var(--auth2-font)!important;
  font-size:14px!important;
  font-weight:450!important;
  line-height:1.48!important;
  letter-spacing:0!important;
  text-align:left!important;
  text-wrap:pretty!important;
}

#screen-employee-id.auth-screen .auth-back,
#screen-set-pin.auth-screen .auth-back{
  position:absolute!important;
  z-index:7!important;
  top:calc(48px + var(--safe-top))!important;
  left:20px!important;
  right:auto!important;
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--auth2-yellow)!important;
  color:var(--auth2-navy)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

#screen-employee-id.auth-screen .auth-back:hover,
#screen-set-pin.auth-screen .auth-back:hover{
  background:#F04A3D!important;
}

#screen-employee-id.auth-screen .auth-back:active,
#screen-set-pin.auth-screen .auth-back:active{
  transform:scale(.92)!important;
}

#screen-employee-id.auth-screen .content-pad,
#screen-pin-login.auth-screen .content-pad,
#screen-set-pin.auth-screen .content-pad,
#screen-admin-portal-login .content-pad{
  position:relative!important;
  z-index:3!important;
  flex:1 0 auto!important;
  width:100%!important;
  min-height:0!important;
  margin:-22px 0 0!important;
  padding:42px 24px calc(28px + var(--safe-bottom))!important;
  border:0!important;
  border-radius:22px 22px 0 0!important;
  background:var(--auth2-white)!important;
  box-shadow:0 -12px 30px -28px rgba(7,27,51,.72)!important;
  color:var(--auth2-ink)!important;
}

/* PIN screens only (not IC entry) — flat, no drop-shadow separating the
   sheet from the navy header above it, per repo owner: "remove the
   shadows... look more clean and premium". */
#screen-pin-login.auth-screen .content-pad,
#screen-set-pin.auth-screen .content-pad,
#screen-admin-portal-login .content-pad{
  box-shadow:none!important;
}

#screen-employee-id.auth-screen .content-pad{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:0!important;
  text-align:left!important;
}

#screen-pin-login.auth-screen .content-pad,
#screen-set-pin.auth-screen .content-pad,
#screen-admin-portal-login .content-pad{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:center!important;
  text-align:center!important;
}

/* Credential entry ----------------------------------------------------- */
#screen-employee-id .field{
  width:100%!important;
  margin:0 0 14px!important;
}

#screen-employee-id #employeeIdInput{
  width:100%!important;
  height:64px!important;
  padding:0 18px!important;
  border:1px solid var(--auth2-line)!important;
  border-radius:14px!important;
  background:var(--auth2-white)!important;
  color:var(--auth2-ink)!important;
  box-shadow:none!important;
  font-family:var(--auth2-numeric)!important;
  font-size:21px!important;
  font-weight:620!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-align:left!important;
  font-variant-numeric:tabular-nums!important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .24s var(--auth2-ease)!important;
}

#screen-employee-id #employeeIdInput::placeholder{
  color:#7d8a99!important;
  opacity:1!important;
  font-size:16px!important;
  font-weight:450!important;
  letter-spacing:0!important;
}

#screen-employee-id #employeeIdInput:focus{
  border-color:var(--auth2-navy)!important;
  box-shadow:0 0 0 4px rgba(255,203,5,.42)!important;
  transform:translateY(-1px)!important;
  outline:0!important;
}

#screen-employee-id .error-msg,
#screen-pin-login .error-msg,
#screen-set-pin .error-msg,
#screen-admin-portal-login .error-msg{
  width:100%!important;
  min-height:20px!important;
  margin:0 0 12px!important;
  color:#a4281f!important;
  font-family:var(--auth2-font)!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.35!important;
  text-align:left!important;
}

#screen-pin-login .error-msg,
#screen-set-pin .error-msg,
#screen-admin-portal-login .error-msg{
  margin-bottom:0!important;
  text-align:center!important;
}

#screen-employee-id .btn-primary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:56px!important;
  margin:0!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:14px!important;
  background:var(--auth2-yellow)!important;
  color:var(--auth2-navy)!important;
  box-shadow:0 12px 22px -18px rgba(7,27,51,.74)!important;
  font-family:var(--auth2-font)!important;
  font-size:15px!important;
  font-weight:760!important;
  letter-spacing:-.01em!important;
  transition:transform .18s ease, background-color .18s ease!important;
}

#screen-employee-id .btn-primary:hover{
  background:#F04A3D!important;
}

#screen-employee-id .btn-primary:active{
  transform:translateY(2px) scale(.99)!important;
}

#screen-employee-id .btn-primary:disabled{
  background:#e6e9eb!important;
  color:#788594!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

/* PIN console ---------------------------------------------------------- */
#screen-pin-login.auth-screen .top-curve,
#screen-set-pin.auth-screen .top-curve,
#screen-admin-portal-login .top-curve{
  min-height:206px!important;
  padding-bottom:38px!important;
}

#screen-set-pin .step-pill{
  display:none!important;
}

#screen-set-pin #setPinSubtitle{
  width:100%!important;
  max-width:34ch!important;
  margin:0 0 2px!important;
  color:var(--auth2-muted)!important;
  font-family:var(--auth2-font)!important;
  font-size:14px!important;
  font-weight:470!important;
  line-height:1.48!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-wrap:pretty!important;
}

/* Spacing redesign — repo owner: "move buttons slightly lower... redesign
   the spacings & animations between the PIN to look more clean and
   premium". More air above the dots (they no longer sit flush under the
   heading) and a wider gap before the keypad, which is what actually
   reads as "moved down" since the keypad's own position is entirely
   margin-driven, not absolutely placed. */
#screen-pin-login .pin-dots,
#screen-set-pin .pin-dots,
#screen-admin-portal-login .pin-dots{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:16px!important;
  width:100%!important;
  margin:28px 0 40px!important;
}

#screen-pin-login .pin-dot,
#screen-set-pin .pin-dot,
#screen-admin-portal-login .pin-dot{
  display:block!important;
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
  border:2px solid #a7b1bb!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  transition:transform .26s var(--auth2-ease), background-color .2s ease, border-color .2s ease!important;
}

/* Glow removed (was box-shadow:0 0 0 4px rgba(255,203,5,.2)) — repo owner:
   "the 4 yellows PIN dots, remove the glowing effect." The fill colour
   change + scale is still the feedback signal, just without the halo. */
#screen-pin-login .pin-dot.filled,
#screen-set-pin .pin-dot.filled,
#screen-admin-portal-login .pin-dot.filled{
  border-color:var(--auth2-yellow)!important;
  background:var(--auth2-yellow)!important;
  box-shadow:none!important;
  transform:scale(1.1)!important;
}

/* Reverted back down to the original, smaller compact size — repo owner:
   "Also the PIN Code buttons make them smaller like previous original
   version sizing" (undoing the earlier full-width/bigger bump). Circles
   still stay circular via aspect-ratio instead of a hardcoded
   width/height, just capped to a narrower, centred block again. */
#screen-pin-login .keypad,
#screen-set-pin .keypad,
#screen-admin-portal-login .keypad{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  grid-auto-flow:dense!important;
  justify-content:center!important;
  gap:14px 20px!important;
  width:100%!important;
  max-width:300px!important;
  margin:8px auto 0!important;
}

/* Shadows removed (was box-shadow:0 8px 16px -14px), flat fill instead —
   repo owner: "remove the shadows... look more clean and premium". Press
   feedback now comes purely from colour + a gentler scale (was .9, now
   .95 — the old snap read as abrupt, not premium) on the shared
   --auth2-ease curve, eased over a slightly longer, smoother duration. */
#screen-pin-login .key,
#screen-set-pin .key,
#screen-admin-portal-login .key{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--auth2-line)!important;
  border-radius:50%!important;
  background:#eef3f6!important;
  color:var(--auth2-navy)!important;
  box-shadow:none!important;
  font-family:var(--auth2-numeric)!important;
  font-size:22px!important;
  font-weight:600!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
  transition:transform .22s var(--auth2-ease), background-color .2s ease, border-color .2s ease, color .2s ease!important;
}

#screen-pin-login .key:hover,
#screen-set-pin .key:hover,
#screen-admin-portal-login .key:hover{
  border-color:#c6d2da!important;
  background:#e5edf2!important;
}

#screen-pin-login .key:active,
#screen-set-pin .key:active,
#screen-admin-portal-login .key:active{
  border-color:var(--auth2-yellow)!important;
  background:var(--auth2-yellow)!important;
  color:var(--auth2-navy)!important;
  box-shadow:none!important;
  transform:scale(.95)!important;
}

#screen-pin-login .key.action,
#screen-set-pin .key.action,
#screen-admin-portal-login .key.action{
  border-color:transparent!important;
  background:transparent!important;
  color:var(--auth2-muted)!important;
  box-shadow:none!important;
  font-size:24px!important;
}

#screen-pin-login .key.action:hover,
#screen-set-pin .key.action:hover,
#screen-admin-portal-login .key.action:hover{
  background:#eef3f6!important;
  color:var(--auth2-navy)!important;
}

#screen-pin-login .key.empty,
#screen-set-pin .key.empty,
#screen-admin-portal-login .key.empty{
  visibility:hidden!important;
  pointer-events:none!important;
}

#btnSwitchAccount{
  min-height:44px!important;
  margin:14px 0 0!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--auth2-muted)!important;
  box-shadow:none!important;
  font-family:var(--auth2-font)!important;
  font-size:13px!important;
  font-weight:620!important;
  letter-spacing:0!important;
}

#btnSwitchAccount:hover{
  color:var(--auth2-navy)!important;
  text-decoration:underline!important;
  text-underline-offset:4px!important;
}

#screen-employee-id :is(button,input):focus-visible,
#screen-pin-login :is(button,input):focus-visible,
#screen-set-pin :is(button,input):focus-visible,
#screen-admin-portal-login :is(button,input):focus-visible{
  outline:3px solid var(--auth2-yellow)!important;
  outline-offset:3px!important;
}

/* Responsive fitting --------------------------------------------------- */
@media (min-width:600px){
  #screen-employee-id.auth-screen .top-curve,
  #screen-pin-login.auth-screen .top-curve,
  #screen-set-pin.auth-screen .top-curve,
  #screen-admin-portal-login .top-curve,
  #screen-employee-id.auth-screen .content-pad,
  #screen-pin-login.auth-screen .content-pad,
  #screen-set-pin.auth-screen .content-pad,
  #screen-admin-portal-login .content-pad{
    width:min(100%,560px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media (max-width:359px){
  #screen-employee-id.auth-screen::before,
  #screen-pin-login.auth-screen::before,
  #screen-set-pin.auth-screen::before,
  #screen-admin-portal-login::before{
    left:18px!important;
  }
  #screen-employee-id.auth-screen .top-curve,
  #screen-pin-login.auth-screen .top-curve,
  #screen-set-pin.auth-screen .top-curve,
  #screen-admin-portal-login .top-curve{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #screen-employee-id.auth-screen .content-pad,
  #screen-pin-login.auth-screen .content-pad,
  #screen-set-pin.auth-screen .content-pad,
  #screen-admin-portal-login .content-pad{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #screen-pin-login .keypad,
  #screen-set-pin .keypad,
  #screen-admin-portal-login .keypad{
    max-width:260px!important;
    gap:10px 16px!important;
  }
}

@media (max-height:700px){
  #screen-employee-id.auth-screen .top-curve,
  #screen-pin-login.auth-screen .top-curve,
  #screen-set-pin.auth-screen .top-curve,
  #screen-admin-portal-login .top-curve{
    min-height:176px!important;
    padding-top:calc(66px + var(--safe-top))!important;
    padding-bottom:30px!important;
  }
  #screen-employee-id.auth-screen .auth-back{
    top:calc(42px + var(--safe-top))!important;
  }
  #screen-employee-id.auth-screen .top-curve{
    min-height:220px!important;
    padding-top:calc(104px + var(--safe-top))!important;
  }
  #screen-pin-login.auth-screen .top-curve,
  #screen-set-pin.auth-screen .top-curve,
  #screen-admin-portal-login .top-curve{
    min-height:160px!important;
    padding-top:calc(56px + var(--safe-top))!important;
    padding-bottom:24px!important;
  }
  #screen-pin-login.auth-screen .top-curve h2,
  #screen-set-pin.auth-screen .top-curve h1,
  #screen-admin-portal-login .top-curve h2{
    font-size:27px!important;
  }
  #screen-employee-id.auth-screen .content-pad,
  #screen-pin-login.auth-screen .content-pad,
  #screen-set-pin.auth-screen .content-pad,
  #screen-admin-portal-login .content-pad{
    padding-top:30px!important;
    padding-bottom:calc(18px + var(--safe-bottom))!important;
  }
  #screen-pin-login .pin-dots,
  #screen-set-pin .pin-dots,
  #screen-admin-portal-login .pin-dots{
    margin:8px 0 14px!important;
  }
  #screen-pin-login .keypad,
  #screen-set-pin .keypad,
  #screen-admin-portal-login .keypad{
    max-width:260px!important;
    gap:8px 20px!important;
  }
  #screen-pin-login .key,
  #screen-set-pin .key,
  #screen-admin-portal-login .key{
    font-size:23px!important;
  }
  #btnSwitchAccount{
    min-height:38px!important;
    margin-top:8px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #screen-employee-id #employeeIdInput,
  #screen-employee-id .btn-primary,
  #screen-employee-id .auth-back,
  #screen-pin-login .pin-dot,
  #screen-set-pin .pin-dot,
  #screen-admin-portal-login .pin-dot,
  #screen-pin-login .key,
  #screen-set-pin .key,
  #screen-admin-portal-login .key{
    transition:none!important;
  }
}