/* Keep the standalone login light by default; the device preference is applied
   before styles load by theme-preference.js. */
.sphera-login {
  background-color: rgb(var(--tblr-light-rgb));
}

@media screen {
  html[data-bs-theme="dark"] .sphera-login {
    --tblr-body-bg: #121b24;
    --tblr-body-color: #e5edf3;
    --tblr-bg-surface: #1c2732;
    --tblr-bg-forms: #17222c;
    --tblr-border-color: #526675;
    --tblr-border-color-translucent: #34424f;
    --tblr-secondary: #a9b8c5;
    --tblr-secondary-rgb: 169, 184, 197;
    color-scheme: dark;
    color: var(--tblr-body-color);
    background-color: var(--tblr-body-bg);
  }

  html[data-bs-theme="dark"] .sphera-login .sphera-login-logo {
    content: url("../img/sphera-logo-light.b25a3a91ab75.svg");
  }

  html[data-bs-theme="dark"] .sphera-login .form-control::placeholder {
    color: #a9b8c5;
  }

  html[data-bs-theme="dark"] .sphera-login :focus-visible {
    outline-color: #69d2c4;
  }

  html[data-bs-theme="dark"] .sphera-login .alert-danger {
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-forms);
    border-color: #34424f;
    border-inline-start: 3px solid #f2979c;
  }

  html[data-bs-theme="dark"] .sphera-login .invalid-feedback {
    color: #f2979c;
  }
}

@media print {
  .sphera-login {
    --tblr-body-color: #1f2937;
    --tblr-bg-surface: #fff;
    --tblr-bg-forms: #fff;
    --tblr-border-color: #e5e7eb;
    --tblr-border-color-translucent: #e5e7eb;
    --tblr-secondary-rgb: 107, 114, 128;
    color-scheme: light;
    color: var(--tblr-body-color);
    background-color: #fff;
  }
}