/* Public ZiloHub sign-in: intentionally light in all app themes.
   The signed-in dashboard still follows the user's selected appearance.
   No inline styles or auth logic changes: compatible with style-src 'self'. */
.login-screen .login-right {
  background:#ffffff;
  color:#172c41;
  min-width:0;
  padding:clamp(40px,4vw,70px) clamp(20px,3vw,48px) 88px;
}
html[data-theme=dark] .login-screen .login-right {
  background:#ffffff;
  color:#172c41;
}
.login-screen .login-form-wrap {
  box-sizing:border-box;
  width:min(490px,100%);
  max-width:100%;
  min-width:0;
  padding:clamp(26px,2.5vw,38px);
  background:#ffffff;
  color:#172c41;
  color-scheme:light;
  border:1px solid #d0dfe8;
  border-radius:20px;
  box-shadow:0 18px 52px rgba(16,37,54,.09);
}
html[data-theme=dark] .login-screen .login-form-wrap {
  background:#ffffff;
  color:#172c41;
  color-scheme:light;
  border-color:#d0dfe8;
  box-shadow:0 18px 52px rgba(16,37,54,.09);
}
.login-screen .login-form-wrap h2,
html[data-theme=dark] .login-screen .login-form-wrap h2 {color:#172c41}
.login-screen .login-form-wrap .eyebrow,
html[data-theme=dark] .login-screen .login-form-wrap .eyebrow {color:#096554}
.login-screen .login-form-wrap :is(.login-desc,.login-divider,.login-note),
html[data-theme=dark] .login-screen .login-form-wrap :is(.login-desc,.login-divider,.login-note) {
  color:#435a6d;
}
.login-screen .login-form-wrap .field>span,
html[data-theme=dark] .login-screen .login-form-wrap .field>span {color:#263f53}
.login-screen .login-form-wrap :is(input,textarea,select),
html[data-theme=dark] .login-screen .login-form-wrap :is(input,textarea,select) {
  background:#f7fafc;
  color:#172c41;
  caret-color:#172c41;
  border-color:#8ba4b8;
}
.login-screen .login-form-wrap :is(input,textarea)::placeholder,
html[data-theme=dark] .login-screen .login-form-wrap :is(input,textarea)::placeholder {
  color:#50687c;
  opacity:1;
}
.login-screen .login-form-wrap .password-wrap button,
html[data-theme=dark] .login-screen .login-form-wrap .password-wrap button {color:#37556c}
.login-screen .login-form-wrap .login-divider span,
html[data-theme=dark] .login-screen .login-form-wrap .login-divider span {background:#d4e0e7}
.login-screen .login-form-wrap .btn.passkey-btn,
html[data-theme=dark] .login-screen .login-form-wrap .btn.passkey-btn {
  background:#f2f7fa;
  border-color:#90aaba;
  color:#172c41;
}
.login-screen .login-form-wrap .btn.passkey-btn:hover,
html[data-theme=dark] .login-screen .login-form-wrap .btn.passkey-btn:hover {
  background:#e9f2f6;
  border-color:#728ea1;
}
.login-screen .login-form-wrap .form-error,
html[data-theme=dark] .login-screen .login-form-wrap .form-error {
  background:#fff3f1;
  border:1px solid #d6a39d;
  color:#8b261c;
}
.login-screen .login-form-wrap a,
html[data-theme=dark] .login-screen .login-form-wrap a {color:#096554}
.login-screen .mobile-login-brand strong,
html[data-theme=dark] .login-screen .mobile-login-brand strong {color:#172c41}
.login-screen .login-form-wrap :is(input,textarea,select,.btn):focus-visible {
  outline:3px solid #168875;
  outline-offset:3px;
}
/* Password-manager autofill must remain dark-on-light even if the saved
   application preference is dark. Override the older dark-login rules. */
html[data-theme=dark] .login-screen .login-form-wrap input:is(:-webkit-autofill,:autofill),
html[data-theme=dark] .login-screen .login-form-wrap input:-webkit-autofill:hover,
html[data-theme=dark] .login-screen .login-form-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px #edf5fc inset !important;
  box-shadow:0 0 0 1000px #edf5fc inset !important;
  -webkit-text-fill-color:#172c41 !important;
  color:#172c41 !important;
  caret-color:#172c41;
}
.login-screen .login-form-wrap .login-desc {margin-bottom:30px}
.login-screen .login-form-wrap .field {margin-bottom:22px}
.login-screen .login-form-wrap .login-divider {margin:28px 0}
.login-screen .login-form-wrap .login-note {
  margin-top:26px;
  padding-top:4px;
  font-size:13px;
  line-height:1.55;
  text-align:center;
}
.login-screen .login-copy,
html[data-theme=dark] .login-screen .login-copy {
  left:24px;
  right:24px;
  bottom:22px;
  color:#435a6d;
  opacity:1;
  font-size:12px;
  line-height:1.5;
  text-align:center;
}
@media(max-width:760px) {
  .login-screen .login-right {
    min-height:100vh;
    min-height:100dvh;
    padding:28px 16px 88px;
  }
  .login-screen .login-form-wrap {
    padding:24px;
    border-radius:18px;
    box-shadow:0 12px 36px rgba(16,37,54,.07);
  }
  .login-screen .mobile-login-brand {margin-bottom:32px}
  .login-screen .login-form-wrap h2 {overflow-wrap:break-word}
}
@media(max-width:360px) {
  .login-screen .login-form-wrap {padding:20px}
  .login-screen .login-right {padding-left:12px;padding-right:12px}
}