/* Login page. Each of the 16 backdrops is full-frame art with the logo centred. On wide screens the art is scaled to fill
   the window and shifted so the logo sits in the left half, and the sign-in card sits in the right half - never on top
   of the logo. On narrow screens the art is dropped and the card carries the logo instead. */

body[data-path="login"] {
  --atlys-art-w: max(100vw, 178vh);
  background-color: var(--atlys-bg);
  background-image: var(--atlys-login-image, none);
  background-repeat: no-repeat;
  background-size: var(--atlys-art-w) auto;
  background-position: calc(27vw - var(--atlys-art-w) / 2) center;
  color: var(--atlys-ink);
  min-height: 100vh;
}
/* after a successful sign-in the platform swaps the page for its loading logo; the backdrop art already has ours, so drop
   the art then (one logo on screen, not two) */
body[data-path="login"]:has(> .splash) { background-image: none; }
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main,
body[data-path="login"] .page_content,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] section.for-login { background: transparent; border: 0; box-shadow: none; }
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper { display: none; }

/* wide: card in the right half, vertically centred */
@media (min-width: 992px) {
  body[data-path="login"] .page-content-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: flex-end; padding-right: 9vw; }
  body[data-path="login"] main.container { margin: 0; max-width: 460px; padding: 0; }
}
/* narrow: no art, card centred, logo shown in the card */
@media (max-width: 991px) {
  body[data-path="login"] { background-image: none; }
  body[data-path="login"] .page-content-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
  body[data-path="login"] main.container { width: 100%; max-width: 440px; padding: 0; }
}

/* the card (one box only - the section around it stays bare) */
body[data-path="login"] .login-content.page-card {
  width: 100%; max-width: 440px; margin: 0;
  padding: 36px 36px 30px;
  background: var(--atlys-surface-raised);
  border: 1px solid var(--atlys-border);
  border-top: 3px solid var(--atlys-gold);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  color: var(--atlys-ink);
}
body[data-path="login"] .page-card-head { text-align: left; margin-bottom: 22px; }
body[data-path="login"] .page-card-head h4 { color: var(--atlys-ink); font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }
body[data-path="login"] .page-card-subtitle,
body[data-path="login"] .text-muted { color: color-mix(in srgb, var(--atlys-ink) 62%, transparent) !important; }
body[data-path="login"] .form-label,
body[data-path="login"] label { color: color-mix(in srgb, var(--atlys-ink) 80%, transparent); font-weight: 500; }

/* the art already carries the logo on wide screens; the card shows it only when the art is gone */
body[data-path="login"] .page-card-head img.app-logo { display: none; }
@media (max-width: 991px) {
  body[data-path="login"] .page-card-head img.app-logo { display: block !important; height: 84px !important; max-height: none !important; width: auto !important; margin: 0 0 18px !important; }
}
body[data-path="login"] section.for-login,
body[data-path="login"] .login-content.page-card { height: auto !important; min-height: 0 !important; }

/* the stock sign-in bundle styles these with long selectors, so the Atlys values below are marked important */
body[data-path="login"] .page-card .form-control,
body[data-path="login"] .page-card .page-card-body input {
  background: var(--atlys-surface) !important; color: var(--atlys-ink) !important;
  border: 1px solid var(--atlys-border) !important; border-radius: 8px !important; height: 42px !important;
  padding-left: 38px !important;
}
body[data-path="login"] .page-card .form-control::placeholder { color: color-mix(in srgb, var(--atlys-ink) 40%, transparent) !important; }
body[data-path="login"] .page-card .form-control:focus {
  border-color: var(--atlys-green) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--atlys-green) 30%, transparent) !important;
}
body[data-path="login"] .field-icon,
body[data-path="login"] .toggle-password { color: color-mix(in srgb, var(--atlys-ink) 55%, transparent); stroke: currentColor; }

body[data-path="login"] .page-card .page-card-actions .btn-login {
  background: var(--atlys-green) !important; border: 0 !important; color: #fff !important;
  height: 42px; border-radius: 8px; font-weight: 600;
}
body[data-path="login"] .page-card .page-card-actions .btn-login:hover,
body[data-path="login"] .page-card .page-card-actions .btn-login:focus { background: color-mix(in srgb, var(--atlys-green) 86%, #fff) !important; }
body[data-path="login"] .page-card .page-card-actions .btn-login-option {
  background: transparent !important; color: var(--atlys-ink) !important; border: 1px solid var(--atlys-border) !important;
  height: 40px; border-radius: 8px;
}
body[data-path="login"] .page-card .page-card-actions .btn-login-option:hover { border-color: var(--atlys-gold) !important; }
body[data-path="login"] a:not(.btn) { color: var(--atlys-gold); }
body[data-path="login"] a:not(.btn):hover { color: color-mix(in srgb, var(--atlys-gold) 80%, #fff); }
body[data-path="login"] .login-error-banner { border-radius: 8px; }