/* Final presentation layer for the shared employee login screen. */
:root {
  --login-forest: #123b2b;
  --login-forest-deep: #0d3023;
  --login-green: #17663f;
  --login-ink: #17251e;
  --login-muted: #5c6b62;
  --login-line: #d4ded7;
  --login-canvas: #edf2ee;
  --login-gold: #efc04e;
}

html,
body { background: var(--login-canvas); color: var(--login-ink); }

.page-watermark {
  background-color: var(--login-canvas);
  background-size: 250px 250px;
  background-position: 20px 20px;
  opacity: .025;
}

.wrapper {
  min-height: 100vh;
  min-height: 100svh;
  padding: 32px 24px;
}

.card {
  display: grid;
  grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr);
  width: min(100%, 1000px);
  min-height: 560px;
  border: 1px solid #d2ddd5;
  border-radius: 10px;
  box-shadow: 0 20px 52px rgba(16, 48, 34, .12), 0 2px 8px rgba(16, 48, 34, .05);
}

.card::before { height: 3px; background: #c58a38; }

.left {
  justify-content: center;
  padding: 48px clamp(28px, 4vw, 54px);
  background: linear-gradient(155deg, #164732 0%, var(--login-forest) 62%, var(--login-forest-deep) 100%);
}

.brand { gap: 14px; }
.logo-container { width: 128px; height: 128px; }
.brand-logo { width: 128px; height: 128px; transform: scale(1.35); }
.brand-kicker { color: #f2c36b; font-size: 10px; letter-spacing: .13em; }
.brand-title { font-size: clamp(21px, 2vw, 25px); line-height: 1.2; }
.brand-sub { max-width: 310px; color: rgba(255,255,255,.76); line-height: 1.6; }

.right {
  justify-content: center;
  padding: 52px clamp(36px, 6vw, 76px);
}

.right > * { max-width: 450px; }
.login-kicker { color: #8b531e; letter-spacing: .12em; }
.login-heading { font-size: clamp(29px, 3vw, 34px); line-height: 1.12; }
.login-sub { margin-bottom: 26px; color: var(--login-muted); }
.field-group { margin-bottom: 16px; }
.field-label { color: #405248; font-size: 10px; }
.field-input {
  height: 52px;
  background: #fbfcfb;
  border-color: var(--login-line);
  border-radius: 6px;
}
.field-input:hover { border-color: #9fb2a5; }
.field-input:focus { border-color: var(--login-green); box-shadow: 0 0 0 3px rgba(23,102,63,.14); }
.field-icon { background: #edf3ef; color: #397052; }
.field-wrap:focus-within .field-icon { background: #e0eee5; color: var(--login-green); }

.btn-login {
  height: 52px;
  margin-bottom: 10px;
  border-color: #145731;
  border-radius: 6px;
  background: var(--login-green);
  box-shadow: 0 5px 14px rgba(22,101,52,.18);
}
.btn-login:hover { box-shadow: 0 7px 18px rgba(22,101,52,.24); }
.btn-forgot {
  height: 44px;
  margin-bottom: 0;
  border-color: #cf9b24;
  border-radius: 6px;
  background: var(--login-gold);
  color: #3d300e;
}
.btn-forgot:hover { background: #e7b43d; }
.btn-install {
  height: 44px;
  margin-top: 14px;
  border-radius: 6px;
  border-color: var(--login-line);
  color: var(--login-green);
}
.btn-install:hover { background: #f2f7f3; }

:is(.field-input, .btn-login, .btn-forgot, .btn-install, .eye-btn, .fp-close):focus-visible {
  outline: 3px solid rgba(23,102,63,.3);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .wrapper {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
    align-items: center;
    overflow: hidden;
  }

  .card {
    display: flex;
    flex-direction: column;
    width: min(100%, 460px);
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    flex: none;
    margin: 0 auto;
    border-radius: 9px;
    box-shadow: 0 10px 30px rgba(16,48,34,.12);
  }

  .left {
    flex: 0 0 auto;
    padding: 15px 18px 14px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
  }
  .brand { gap: 5px; }
  .brand-logo-wrap { justify-content: center; margin: 0; }
  .logo-container,
  .brand-logo { width: 58px; height: 58px; transform: scale(1.25); }
  .brand-kicker { font-size: 9px; }
  .brand-title { font-size: 16px; line-height: 1.12; }
  .brand-sub,
  .feature-list { display: none; }

  .right {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 0;
    padding: clamp(14px, 4.5vh, 32px) clamp(20px, 7vw, 34px);
  }
  .right > * { width: 100%; max-width: 420px; }
  .login-kicker { margin-bottom: 6px; font-size: 9px; }
  .login-heading { margin-bottom: 4px; font-size: 25px; }
  .login-sub { margin-bottom: clamp(14px, 3vh, 22px); font-size: 12px; }
  .field-group { margin-bottom: 14px; }
  .field-label { margin-bottom: 6px; font-size: 10px; }
  .field-input { height: 48px; min-height: 48px !important; font-size: 16px; }
  .field-icon { width: 30px; height: 30px; }
  .eye-btn { padding: 8px; }
  .btn-login { height: 48px; min-height: 48px; margin-bottom: 9px; font-size: 15px; }
  .btn-forgot { height: 44px; min-height: 44px; }
  .btn-install { height: 44px; min-height: 44px; margin-top: 11px; }

  .fp-overlay,
  .install-overlay { overflow-y: auto; }
  .fp-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
}

@media (max-width: 400px) {
  .wrapper { padding-right: 9px; padding-left: 9px; }
  .left { padding: 12px 14px 11px; }
  .logo-container,
  .brand-logo { width: 50px; height: 50px; }
  .brand-logo { transform: scale(1.2); }
  .brand-title { font-size: 15px; }
  .right { padding-right: 18px; padding-left: 18px; }
}

@media (max-width: 760px) and (max-height: 680px) {
  .left { padding-top: 8px; padding-bottom: 8px; }
  .logo-container,
  .brand-logo { width: 42px; height: 42px; }
  .brand-logo { transform: scale(1.15); }
  .brand-title { font-size: 14px; }
  .right { padding-top: 10px; padding-bottom: 10px; }
  .login-heading { font-size: 22px; }
  .login-sub { margin-bottom: 10px; }
  .field-group { margin-bottom: 8px; }
  .field-label { margin-bottom: 4px; }
  .field-input { height: 42px; min-height: 42px !important; }
  .btn-login { height: 42px; min-height: 42px; }
  .btn-forgot { height: 38px; min-height: 38px; }
  .btn-install { height: 36px; min-height: 36px; margin-top: 7px; }
}

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