/* The sign-in page. Loaded through `page_css` from www/login.html.

   Two halves, kept apart on purpose: the first is a contract with Frappe's
   templates/includes/login/login.js, the second is how the page looks. */

/* =====================================================================
   1. The contract with login.js

   This page does not load frappe's login.bundle.css, so every behaviour that
   stylesheet provided has to live here. Each rule below has a caller in login.js
   or in frappe's own login.bundle.scss; none of it is decoration.
   ===================================================================== */

/* Frappe defines .hide globally as @extend .d-none; Bootstrap 5, which this theme
   ships, has no such class. login.js puts `hide` on three of the four forms and
   removes it on frappe.ready. Without this they are all visible at once. */
.hide { display: none !important; }

/* Only .for-login shows before JS runs. login.route() runs at parse time, and
   jQuery's .toggle(true) sets an inline display that overrides a stylesheet rule,
   so hiding them here is safe — it is exactly what login.bundle.scss does.
   Never add .for-login: .toggle(false) stashes the computed display to restore,
   and a CSS `none` would make the stashed value `none` too. */
.for-email-login,
.for-forgot,
.for-signup,
.for-login-with-email-link { display: none; }

/* login.show_field_error() / login.reset_sections() */
.field-error { display: none; margin: 6px 0 0; font-size: 13px; color: #c0392b; }
.form-group.invalid .field-error { display: block; }
.form-group.invalid .form-control,
.page-card-body.invalid .form-control { border-color: #c0392b; }

/* login.js reveals these with css("display", "flex") */
.login-error-banner,
.login-success-banner,
.resend-link { display: none; align-items: center; gap: 8px; }
.login-error-banner { padding: 10px 12px; border-radius: 4px; background: #fdecea; color: #c0392b; font-size: 14px; }
.login-success-banner { padding: 10px 12px; border-radius: 4px; background: #eaf6ec; color: #2e7d4f; font-size: 14px; }
.resend-link { margin: 0; font-size: 14px; color: #777; }
.resend-link a { color: #978667; text-decoration: underline; }

/* login.set_invalid() toggles this on .login-content.page-card for 500ms */
.invalid-login { animation: login-wiggle 0.4s ease-in-out; }
@keyframes login-wiggle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* frappe.freeze() appends #freeze.modal-backdrop.fade and then adds Bootstrap *4*'s
   `in` class. Bootstrap 5 only knows `.show`, so without this the backdrop stays at
   opacity 0 while still covering the viewport — an invisible click-blocker. Do not
   "fix" it by hiding #freeze: it is what stops a double submit. */
#freeze.modal-backdrop { background-color: #24262d; }
#freeze.modal-backdrop.in { opacity: 0.35; }

/* Two-factor: request_otp() empties .login-content and injects this markup with the
   desk's own class names. Off on this site, so styled conservatively. */
#twofactor_div .form-verify { display: flex; flex-direction: column; gap: 14px; }
#twofactor_div .indicator { font-weight: 600; color: #24262d; }
#twofactor_div #otp_div { font-size: 14px; color: #777; }
#verify_token {
  border: none; color: #fff; background: #978667; border-radius: 25px;
  padding: 14px 25px; font-weight: 600; width: 100%; cursor: pointer;
}
#verify_token:hover { background-color: #4b514d; }

/* =====================================================================
   2. Looks
   ===================================================================== */

/* common_functions.js is what normally copies data-opacity-mask onto background-color.
   This page does not load the theme's JS, so the overlay is stated here instead. */
.login-hero .opacity-mask { background-color: rgba(36, 38, 45, 0.55); }

/* The video sits on the still, both matching `.jarallax > .jarallax-img` in style.css —
   that rule is not type-qualified, so a <video> picks up the same full-bleed cover
   positioning as the <img> and needs nothing new. Later in the DOM, so it wins. */
.login-hero .login-video { object-position: center; }

/* Motion is a preference, not a given. Reduced motion stops the theme's zoom and drops
   the video, which uncovers the still underneath — hence rendering the image always. */
@media (prefers-reduced-motion: reduce) {
  .login-hero img.jarallax-img.kenburns { animation: none; transform: none; }
  .login-hero .login-video { display: none; }
}

/* margin:auto on the card centres it and still lets its top be reached when it is
   taller than the viewport; align-items:center alone would clip it. */
.login-hero .wrapper { overflow-y: auto; padding: 110px 15px 50px; }
.login-card-wrap { width: 100%; max-width: 430px; margin: auto; }

.login-brand { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); z-index: 3; }

.login-content.page-card {
  background: #fff; color: #24262d; border-radius: 6px;
  padding: 38px 34px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column; gap: 22px; text-align: left;
}
.page-card-head { text-align: center; }
/* 21px is the theme's own scale (style.css uses 18px and 21px for component headings).
   Bootstrap's h4 default of 24px is too big for a 430px card once the heading is as long
   as "Forgot Password?". */
.page-card-head h4 { margin: 0 0 6px; font-size: 21px; color: #24262d; }
.page-card-subtitle { margin: 0; font-size: 14px; color: #777; }

/* The form's own rhythm. Without it `.page-card-body` and `.page-card-actions` are two
   plain blocks with nothing between them, which puts the "Forgot password?" link right on
   top of the Continue button. */
.form-signin { display: flex; flex-direction: column; gap: 20px; }

.page-card-body { display: flex; flex-direction: column; gap: 14px; }
.page-card-actions { display: flex; flex-direction: column; gap: 12px; }
.page-card-actions .btn_1,
.full-width { width: 100%; }
.form-group { margin-bottom: 0; }

/* A secondary action, so it stays quiet: smaller than the fields, no underline until
   hover, and the accent colour saved for that hover. */
.forgot-password-message { margin: 6px 0 0; text-align: right; font-size: 12px; line-height: 1.4; }
.forgot-password-message a { color: #777; text-decoration: none; }
.forgot-password-message a:hover { color: #978667; text-decoration: underline; }

.sign-up-message { margin: 0; font-size: 14px; color: #777; }
.sign-up-message a { color: #978667; text-decoration: underline; }

.password-field { position: relative; }
.password-field .form-floating > .form-control { padding-right: 44px; }
.password-field .toggle-password {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 3; cursor: pointer; color: #978667;
}
.password-field input::-ms-reveal { display: none; }

.social-login-buttons { display: flex; flex-direction: column; gap: 10px; }
.social-login-buttons img { height: 18px; margin-right: 8px; }

@media (max-width: 575px) {
  .login-hero .wrapper { padding: 90px 12px 36px; }
  .login-content.page-card { padding: 28px 22px; }
  .page-card-head h4 { font-size: 19px; }
}