/* ============================================================
   login.css — Compulife Brand Login for ERPNext
   Scope: body.kv-login-active  (added by login.js)
   Palette: navy #000239 | blue #0066FF | cyan #00D4FF | mint #00E6BB
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   FOUC PREVENTION
   Hides page until login.js adds kv-login-active; navy bg shows
   immediately so there is no white flash even while hidden.
───────────────────────────────────────────────────────────── */
@supports selector(:has(a)) {
  body:has(.for-login):not(.kv-login-active) {
    visibility: hidden !important;
  }
  body:has(.for-login) {
    background: #000239 !important;
  }
}

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-primary:      #00E6BB;
  --kl-primary-dark: #00C4A0;
  --kl-primary-glow: rgba(0, 230, 187, 0.35);
  --kl-blue:         #0066FF;
  --kl-cyan:         #00D4FF;
  --kl-navy:         #000239;
  --kl-card-bg:      rgba(0, 4, 56, 0.72);
  --kl-gradient:     linear-gradient(90deg, #0066FF 0%, #00D4FF 50%, #00E6BB 100%);
  --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: "Poppins", 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 — Background: storefront hero gradient
───────────────────────────────────────────────────────────── */
body.kv-login-active {
  background: linear-gradient(135deg, #000239 0%, #00665F 60%, #00E6BB 100%);
  animation: kvPageReveal 0.45s ease both;
}

/* ─────────────────────────────────────────────────────────────
   Layer 4 — Dot-grid overlay (mint dots, echoes storefront hero)
───────────────────────────────────────────────────────────── */
.kv-grid-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 230, 187, 0.18) 1px, transparent 1px);
  background-size: 36px 36px;
  animation: kvGridPulse 8s ease-in-out infinite;
}

@keyframes kvGridPulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.85; }
}

/* ─────────────────────────────────────────────────────────────
   Layer 3 — Floating blurred shapes (brand blue / cyan / mint)
───────────────────────────────────────────────────────────── */
.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(0, 102, 255, 0.16);
  top: -100px; left: -120px;
  animation: kvShape1 38s ease-in-out infinite alternate;
}
.kv-shape-2 {
  width: 360px; height: 360px;
  background: rgba(0, 230, 187, 0.12);
  bottom: -80px; right: -80px;
  animation: kvShape2 44s ease-in-out infinite alternate;
}
.kv-shape-3 {
  width: 280px; height: 280px;
  background: rgba(0, 212, 255, 0.13);
  top: 38%; left: 55%;
  animation: kvShape3 32s ease-in-out infinite alternate;
}
.kv-shape-4 {
  width: 230px; height: 230px;
  background: rgba(0, 102, 255, 0.08);
  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 (JS-injected, 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); }
}

/* ─────────────────────────────────────────────────────────────
   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: 56px !important;
  width: auto !important;
  display: block;
  margin: 0 auto 1rem;
  animation:
    kvLogoEntrance 0.85s var(--kl-ease) 0.1s both,
    kvLogoPulse    3.5s  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(0, 230, 187, 0.28)); }
  50%       { filter: drop-shadow(0 0 26px rgba(0, 230, 187, 0.62)); }
}

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;
}

/* ─────────────────────────────────────────────────────────────
   Login Card — frosted glass on hero gradient
───────────────────────────────────────────────────────────── */
body.kv-login-active .login-content.page-card {
  width: 100% !important;
  background: var(--kl-card-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    0  0   40px rgba(0, 230, 187, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  padding: 2.25rem 2rem 1.75rem !important;
  overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   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;
  margin-top: 0.6rem;
}

/* ── Inputs ── */
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-primary);
  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 — mint underline + subtle mint tint */
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(0, 230, 187, 0.06) !important;
  border-bottom-color: var(--kl-primary) !important;
  box-shadow: 0 2px 0 0 var(--kl-primary),
              0 0 0 3px rgba(0, 230, 187, 0.10) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────────────────────
   FLOATING LABELS

   Structure injected by login.js:
     .email-field (position:relative; margin-top:0.6rem)
       span.kv-float-label
       input#login_email.form-control
       svg.field-icon

   Resting:  label centered inside input (placeholder replacement)
   Floated:  label sits above input top edge, smaller + mint
───────────────────────────────────────────────────────────── */
body.kv-login-active .kv-float-label {
  position: absolute;
  top: 50%;
  inset-inline-start: 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;
  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 */
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;
  transform: translateY(-50%) scale(0.78);
  color: var(--kl-primary);
  background: rgba(0, 4, 56, 0.90);
}

/* Has value but not focused — dimmed mint */
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(0, 230, 187, 0.62);
}

/* ── Autofill detection keyframe ── */
@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;
  inset-inline-end: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.35;
}

/* ── Password show/hide toggle ── */
body.kv-login-active .toggle-password {
  position: absolute;
  inset-inline-end: 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-primary);
}

/* ── Forgot password ── */
body.kv-login-active .forgot-password-message {
  text-align: end;
  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-primary);
}

/* ─────────────────────────────────────────────────────────────
   Submit Button — signature gradient + 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-gradient) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #000A24 !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 230, 187, 0.28) !important;
  transition:
    filter     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.20) 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 {
  filter: brightness(1.08) !important;
  transform:  translateY(-2px) scale(1.01) !important;
  box-shadow: 0 16px 44px rgba(0, 230, 187, 0.38) !important;
}

body.kv-login-active .btn-login:active {
  transform:  translateY(0) scale(0.98) !important;
  box-shadow: 0 4px 14px rgba(0, 230, 187, 0.22) !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(0, 10, 36, 0.3);
  border-top-color: #000A24;
  border-radius: 50%;
  animation: kvSpin 0.65s linear infinite;
  vertical-align: middle;
  margin-inline-start: 8px;
}

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

/* ─────────────────────────────────────────────────────────────
   Errors / Alerts — styled for dark background
───────────────────────────────────────────────────────────── */
body.kv-login-active .alert,
body.kv-login-active .msgprint,
body.kv-login-active .login-message {
  background: rgba(0, 102, 255, 0.10) !important;
  border: 1px solid rgba(0, 102, 255, 0.25) !important;
  color: rgba(160, 200, 255, 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-danger,
body.kv-login-active .alert-error {
  background: rgba(220, 50, 50, 0.12) !important;
  border-color: rgba(220, 50, 50, 0.30) !important;
  color: rgba(255, 140, 140, 0.95) !important;
}

body.kv-login-active .alert-success {
  background: rgba(0, 230, 187, 0.10) !important;
  border-color: rgba(0, 230, 187, 0.28) !important;
  color: rgba(100, 230, 200, 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-primary);
  text-decoration: none;
  font-weight: 600;
}

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

/* ─────────────────────────────────────────────────────────────
   "or" divider + Login with Email Link button
───────────────────────────────────────────────────────────── */
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 { inset-inline-start: 0; }
body.kv-login-active .login-divider::after  { inset-inline-end: 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, color 0.22s ease !important;
}

body.kv-login-active .btn-login-option:hover {
  background: rgba(0, 230, 187, 0.08) !important;
  border-color: rgba(0, 230, 187, 0.30) !important;
  color: var(--kl-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   Accessibility — visible focus rings (WCAG AA)
───────────────────────────────────────────────────────────── */
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-primary) !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(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   prefers-reduced-motion
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.kv-login-active {
    animation: none !important;
    background: var(--kl-navy) !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;
  }
}