/* ============================================================
   login.css — Cinematic Animated Login Page for ERPNext
   Scoped to: body.kv-login-active  (class added by login.js)
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   FOUC PREVENTION
   Uses CSS :has() to hide the page IMMEDIATELY when login.css
   loads, before JS runs. kv-login-active class (added by JS)
   removes the hide and triggers a fade-in.
   Falls back gracefully in browsers that don't support :has():
   the page is simply visible (no FOUC prevention, not broken).
───────────────────────────────────────────────────────────── */
@supports selector(:has(a)) {
  body:has(.for-login):not(.kv-login-active) {
    visibility: hidden !important;
  }
  /* Dark bg shows immediately so even the hidden state looks
     intentional (instead of a white flash before JS hides it) */
  body:has(.for-login) {
    background: #0A0A0A !important;
  }
}

/* Reveal animation — fires when JS adds kv-login-active */
body.kv-login-active {
  animation: kvPageReveal 0.45s ease both;
}

@keyframes kvPageReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   CSS Variables
───────────────────────────────────────────────────────────── */
body.kv-login-active {
  --kl-red:      #E30613;
  --kl-red-dark: #C20510;
  --kl-red-glow: rgba(227, 6, 19, 0.35);
  --kl-bg-0:     #0A0A0A;
  --kl-bg-1:     #1A1A1A;
  --kl-bg-2:     #2A0A0A;
  --kl-bg-3:     #3A0F0F;
  --kl-card-bg:  rgba(18, 18, 18, 0.88);
  --kl-white:    #FFFFFF;
  --kl-ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────────────────────────────
   Page Reset
───────────────────────────────────────────────────────────── */
body.kv-login-active {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.kv-login-active .navbar,
body.kv-login-active .web-footer,
body.kv-login-active .page-breadcrumbs,
body.kv-login-active .page-header-wrapper {
  display: none !important;
}

body.kv-login-active .page-content-wrapper,
body.kv-login-active main,
body.kv-login-active .page_content,
body.kv-login-active .page-footer {
  padding:    0 !important;
  margin:     0 !important;
  max-width:  none !important;
  width:      100% !important;
  background: none !important;
}

body.kv-login-active main.container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   Layer 1 — Animated Gradient Background
───────────────────────────────────────────────────────────── */
body.kv-login-active {
  background: linear-gradient(-45deg,
    var(--kl-bg-0),
    var(--kl-bg-1),
    var(--kl-bg-2),
    var(--kl-bg-3),
    var(--kl-bg-1));
  background-size: 400% 400%;
  animation: kvGradientShift 20s ease infinite, kvPageReveal 0.45s ease both;
}

@keyframes kvGradientShift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* ─────────────────────────────────────────────────────────────
   Layer 4 — Grid Overlay (injected by JS)
───────────────────────────────────────────────────────────── */
.kv-grid-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: kvGridPulse 8s ease-in-out infinite;
}

@keyframes kvGridPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

/* ─────────────────────────────────────────────────────────────
   Layer 3 — Floating Shapes (injected by JS)
───────────────────────────────────────────────────────────── */
.kv-shapes-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.kv-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.kv-shape-1 {
  width: 420px; height: 420px;
  background: rgba(227, 6, 19, 0.12);
  top: -100px; left: -120px;
  animation: kvShape1 38s ease-in-out infinite alternate;
}
.kv-shape-2 {
  width: 360px; height: 360px;
  background: rgba(194, 5, 16, 0.08);
  bottom: -80px; right: -80px;
  animation: kvShape2 44s ease-in-out infinite alternate;
}
.kv-shape-3 {
  width: 280px; height: 280px;
  background: rgba(58, 15, 15, 0.22);
  top: 38%; left: 55%;
  animation: kvShape3 32s ease-in-out infinite alternate;
}
.kv-shape-4 {
  width: 230px; height: 230px;
  background: rgba(227, 6, 19, 0.06);
  top: 15%; right: 18%;
  animation: kvShape4 40s ease-in-out infinite alternate;
}

@keyframes kvShape1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(130px, 90px) scale(1.2); }
}
@keyframes kvShape2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-110px, -70px) scale(1.15); }
}
@keyframes kvShape3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-70px, 65px) scale(0.88); }
}
@keyframes kvShape4 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(55px, 110px) scale(1.12); }
}

/* ─────────────────────────────────────────────────────────────
   Layer 2 — Particles (injected by JS, CSS-animated)
───────────────────────────────────────────────────────────── */
.kv-particles-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.kv-particle {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: kvFloatUp var(--p-dur, 18s) var(--p-delay, 0s) linear infinite;
  opacity: 0;
}

@keyframes kvFloatUp {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: var(--p-opacity, 0.5); }
  92%  { opacity: var(--p-opacity, 0.5); }
  100% { transform: translateY(-105vh) translateX(var(--p-drift, 20px)); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Page Layout — center card
───────────────────────────────────────────────────────────── */
body.kv-login-active .page_content {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem !important;
}

body.kv-login-active .for-login,
body.kv-login-active .for-forgot,
body.kv-login-active .for-signup,
body.kv-login-active .for-email-login,
body.kv-login-active .for-login-with-email-link {
  width: 100%;
  max-width: 420px;
}

body.kv-login-active .for-login {
  animation: kvCardEntrance 0.85s var(--kl-ease) both;
}

@keyframes kvCardEntrance {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   Layer 6 — Logo
───────────────────────────────────────────────────────────── */
body.kv-login-active .page-card-head {
  text-align: center;
  margin-bottom: 1.75rem;
  padding: 0;
}

body.kv-login-active .page-card-head .app-logo {
  height: 52px;
  width: auto;
  display: block;
  margin: 0 auto 1rem;
  animation:
    kvLogoEntrance 0.85s var(--kl-ease) 0.1s both,
    kvLogoPulse    3s   ease-in-out      1.2s infinite;
}

@keyframes kvLogoEntrance {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes kvLogoPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(227,6,19,0.35)); }
  50%       { filter: drop-shadow(0 0 26px rgba(227,6,19,0.70)); }
}

body.kv-login-active .page-card-head h4 {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────────
   Layer 5 — Login Card (glassmorphism)
───────────────────────────────────────────────────────────── */
body.kv-login-active .login-content.page-card {
  width: 100% !important;
  background: var(--kl-card-bg) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    0  0   40px rgba(227, 6, 19, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  padding: 2rem 2rem 1.75rem !important;
  overflow: visible !important;   /* must be visible so floated labels aren't clipped */
}

/* ─────────────────────────────────────────────────────────────
   Layer 7 — Form Fields
───────────────────────────────────────────────────────────── */
body.kv-login-active .page-card-body {
  padding: 0 !important;
}

body.kv-login-active .form-group {
  position: relative;
  margin-bottom: 1.65rem;
}

/* Staggered entrance */
body.kv-login-active .form-group:nth-child(1) {
  animation: kvSlideIn 0.5s var(--kl-ease) 0.28s both;
}
body.kv-login-active .form-group:nth-child(2) {
  animation: kvSlideIn 0.5s var(--kl-ease) 0.42s both;
}
body.kv-login-active .forgot-password-message {
  animation: kvSlideIn 0.5s var(--kl-ease) 0.52s both;
}

@keyframes kvSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Field wrappers ── */
body.kv-login-active .email-field,
body.kv-login-active .password-field {
  position: relative;
  /* Extra top margin creates space for the floated label to sit above the input */
  margin-top: 0.6rem;
}

/* ── Input ── */
body.kv-login-active .form-control {
  width: 100% !important;
  padding: 0.875rem 2.6rem 0.875rem 0.9rem !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px 8px 0 0 !important;
  color: #FFFFFF !important;
  font-size: 0.9rem;
  caret-color: var(--kl-red);
  outline: none !important;
  box-shadow: none !important;
  transition:
    background    0.28s ease,
    border-color  0.28s ease,
    box-shadow    0.28s ease !important;
}

/* Hide native placeholder — floating label replaces it */
body.kv-login-active .form-control::placeholder {
  color: transparent !important;
}

/* Focus state */
body.kv-login-active .form-control:focus,
body.kv-login-active .email-field.is-focused .form-control,
body.kv-login-active .password-field.is-focused .form-control {
  background: rgba(255, 255, 255, 0.09) !important;
  border-bottom-color: var(--kl-red) !important;
  box-shadow: 0 2px 0 0 var(--kl-red),
              0 0 0 3px rgba(227, 6, 19, 0.10) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────────────────────
   FLOATING LABEL  (.kv-float-label injected by login.js)

   Structure after JS runs:
     .email-field (position: relative; margin-top: 0.6rem)
       span.kv-float-label   ← our synthetic label (position: absolute)
       input#login_email.form-control
       svg.field-icon

   Resting:  label centered inside input (acts as placeholder)
   Floated:  label sits above input top edge, smaller + red
             background matches card so it visually masks nothing
             (we use border-bottom only, so no top border to mask)
───────────────────────────────────────────────────────────── */

/* Resting state — vertically centered inside the input */
body.kv-login-active .kv-float-label {
  position: absolute;
  /* center of the field wrapper = center of the input */
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  transform-origin: left center;

  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  z-index: 2;

  padding: 0 3px;
  /* Transparent bg in resting state — blends with input background */
  background: transparent;

  transition:
    top            0.22s ease,
    transform      0.22s ease,
    font-size      0.22s ease,
    color          0.22s ease,
    background     0.22s ease;
}

/* Floated state — triggered by .is-focused or .has-value on field wrapper */
body.kv-login-active .email-field.is-focused    .kv-float-label,
body.kv-login-active .email-field.has-value     .kv-float-label,
body.kv-login-active .password-field.is-focused .kv-float-label,
body.kv-login-active .password-field.has-value  .kv-float-label {
  /* top: 0 + translateY(-50%) = label center sits at the very top of the field wrapper.
     The 0.6rem margin-top on the wrapper gives it room to sit visually above the input */
  top: 0;
  transform: translateY(-50%) scale(0.78);
  color: var(--kl-red);
  /* Opaque bg matching the card so it renders cleanly over the input's border-radius */
  background: rgba(18, 18, 18, 0.92);
}

/* Keep label red but slightly dimmer when field has value but is not focused */
body.kv-login-active .email-field.has-value:not(.is-focused)    .kv-float-label,
body.kv-login-active .password-field.has-value:not(.is-focused) .kv-float-label {
  color: rgba(227, 6, 19, 0.7);
}

/* ── Autofill detection keyframe (animationstart event in JS) ── */
@keyframes kvAutofill { to { opacity: 1; } }
body.kv-login-active input:-webkit-autofill {
  animation-name: kvAutofill;
  animation-duration: 1ms;
}

/* ── Field icons ── */
body.kv-login-active .field-icon {
  position: absolute !important;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.35;
}

/* ── Password show/hide ── */
body.kv-login-active .toggle-password {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 0.72rem;
  user-select: none;
  transition: color 0.2s;
}

body.kv-login-active .toggle-password:hover {
  color: var(--kl-red);
}

/* ── Forgot password ── */
body.kv-login-active .forgot-password-message {
  text-align: right;
  margin-top: 0.3rem;
  margin-bottom: 0;
}

body.kv-login-active .forgot-password-message a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color 0.2s;
}

body.kv-login-active .forgot-password-message a:hover {
  color: var(--kl-red);
}

/* ─────────────────────────────────────────────────────────────
   Layer 8 — Submit Button with Shimmer
───────────────────────────────────────────────────────────── */
body.kv-login-active .page-card-actions {
  padding: 0 !important;
  margin-top: 1.75rem;
}

body.kv-login-active .btn-login {
  position: relative;
  display: block !important;
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  background: var(--kl-red) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(227, 6, 19, 0.32) !important;
  transition:
    background  0.25s ease,
    transform   0.18s ease,
    box-shadow  0.25s ease !important;
  animation: kvSlideIn 0.5s var(--kl-ease) 0.65s both;
  text-align: center;
}

/* Shimmer sweep */
body.kv-login-active .btn-login::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    100deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 0s;
  pointer-events: none;
}

body.kv-login-active .btn-login:hover::before {
  left: 150%;
  transition: left 0.55s ease;
}

body.kv-login-active .btn-login:hover {
  background:  var(--kl-red-dark) !important;
  transform:   translateY(-2px) scale(1.01) !important;
  box-shadow:  0 16px 44px rgba(227, 6, 19, 0.42) !important;
}

body.kv-login-active .btn-login:active {
  transform:  translateY(0) scale(0.98) !important;
  box-shadow: 0 4px 14px rgba(227, 6, 19, 0.28) !important;
}

body.kv-login-active .btn-login.is-loading {
  opacity: 0.82;
  pointer-events: none;
  cursor: not-allowed !important;
}

body.kv-login-active .btn-login.is-loading .kv-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kvSpin 0.65s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}

@keyframes kvSpin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────
   Errors / Alerts
───────────────────────────────────────────────────────────── */
body.kv-login-active .alert,
body.kv-login-active .msgprint,
body.kv-login-active .login-message {
  background: rgba(227, 6, 19, 0.10) !important;
  border: 1px solid rgba(227, 6, 19, 0.28) !important;
  color: rgba(255, 130, 130, 0.95) !important;
  border-radius: 8px !important;
  font-size: 0.82rem;
  padding: 0.7rem 0.9rem !important;
  margin-bottom: 1rem !important;
}

body.kv-login-active .alert-success {
  background: rgba(29, 181, 132, 0.10) !important;
  border-color: rgba(29, 181, 132, 0.28) !important;
  color: rgba(100, 220, 180, 0.95) !important;
}

/* ─────────────────────────────────────────────────────────────
   Sign-up / links
───────────────────────────────────────────────────────────── */
body.kv-login-active .sign-up-message {
  text-align: center;
  margin-top: 1.35rem;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.85rem;
  animation: kvSlideIn 0.5s var(--kl-ease) 0.75s both;
}

body.kv-login-active .sign-up-message a {
  color: var(--kl-red);
  text-decoration: none;
  font-weight: 600;
}

body.kv-login-active .sign-up-message a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   "or" divider + social buttons
───────────────────────────────────────────────────────────── */
body.kv-login-active .login-divider {
  color: rgba(255, 255, 255, 0.28);
  text-align: center;
  margin: 1.25rem 0;
  font-size: 0.82rem;
  position: relative;
}

body.kv-login-active .login-divider::before,
body.kv-login-active .login-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}
body.kv-login-active .login-divider::before { left: 0; }
body.kv-login-active .login-divider::after  { right: 0; }

body.kv-login-active .btn-login-option {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 8px !important;
  transition: background 0.22s ease, border-color 0.22s ease !important;
}

body.kv-login-active .btn-login-option:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(227, 6, 19, 0.28) !important;
}

/* ─────────────────────────────────────────────────────────────
   Accessibility
───────────────────────────────────────────────────────────── */
body.kv-login-active .btn-login:focus-visible,
body.kv-login-active .form-control:focus-visible,
body.kv-login-active a:focus-visible {
  outline: 2px solid var(--kl-red) !important;
  outline-offset: 3px !important;
}

/* ─────────────────────────────────────────────────────────────
   Mobile ≤ 640px
───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.kv-login-active .page_content {
    align-items: flex-start !important;
    padding: 1.5rem 1rem !important;
  }

  body.kv-login-active .for-login {
    max-width: 100%;
  }

  body.kv-login-active .login-content.page-card {
    padding: 1.5rem 1.25rem 1.25rem !important;
    border-radius: 14px !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   prefers-reduced-motion
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.kv-login-active {
    animation: none !important;
    background: var(--kl-bg-1) !important;
  }

  body.kv-login-active *,
  body.kv-login-active *::before,
  body.kv-login-active *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .kv-particles-layer,
  .kv-shapes-layer,
  .kv-grid-layer {
    display: none !important;
  }
}