/***
Login / OTP page — premium animated redesign

Scope: body.login and its children only (loaded exclusively by
core/apps/qdPM/templates/loginLayout.php, shared identically by the
login and OTP templates - both inherit this automatically).

This is the single source of truth for the login page. The old
duplicate declarations that used to live in css/app.css (.login .logo,
.login-page-logo, .login-page-logo img, .copyright a) have been
removed from there - they loaded AFTER this file and were silently
overriding it property-by-property.
***/

/* ============================================================
   Base + animated aurora / gradient-mesh background
   ============================================================ */

.login {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  background: #0a0b0f !important;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  perspective: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Optional custom background image (set via Configuration ->
   app_login_background) still works: it paints on the same element,
   the aurora/blob layers below sit on top of it as before. */

.login::before,
.login::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  will-change: transform;
}

/* Layer 1: slow-drifting gradient mesh */
.login::before {
  background:
    radial-gradient(38% 38% at 20% 30%, rgba(99, 102, 241, 0.55) 0%, rgba(99, 102, 241, 0) 70%),
    radial-gradient(34% 34% at 80% 25%, rgba(236, 72, 153, 0.4) 0%, rgba(236, 72, 153, 0) 70%),
    radial-gradient(40% 40% at 50% 80%, rgba(56, 189, 248, 0.4) 0%, rgba(56, 189, 248, 0) 70%),
    radial-gradient(30% 30% at 85% 85%, rgba(129, 140, 248, 0.35) 0%, rgba(129, 140, 248, 0) 70%);
  background-repeat: no-repeat;
  animation: qdpmAuroraDrift 26s ease-in-out infinite alternate;
}

/* Layer 2: floating blurry blobs, offset timing for depth */
.login::after {
  background:
    radial-gradient(26% 26% at 70% 60%, rgba(168, 85, 247, 0.35) 0%, rgba(168, 85, 247, 0) 70%),
    radial-gradient(22% 22% at 15% 75%, rgba(45, 212, 191, 0.3) 0%, rgba(45, 212, 191, 0) 70%);
  background-repeat: no-repeat;
  animation: qdpmAuroraDrift 34s ease-in-out infinite alternate-reverse;
}

@keyframes qdpmAuroraDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(3%, -4%) scale(1.08) rotate(6deg); }
  100% { transform: translate(-4%, 3%) scale(1.02) rotate(-4deg); }
}

/* Mouse spotlight - a real cursor-follow effect needs the cursor's
   actual position, which CSS cannot read on its own. loginLayout.php
   updates --mx/--my (percent, defaulting to center) on mousemove via
   a few lines of plain JS; this layer just paints a soft light there. */
.login-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    480px circle at var(--mx, 50%) var(--my, 40%),
    rgba(255, 255, 255, 0.08),
    transparent 60%
  );
  transition: background-position 80ms linear;
}

/* Faint moving light sweep across the whole page for extra depth.
   Uses its own opacity/animation only - position/z-index are set here
   (not left to the optional custom-background <style> block in
   loginLayout.php, which only sets a plain #333 fallback fill when no
   custom background image is configured). */
.login-fade-in {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.04) 45%, transparent 60%);
  background-size: 250% 250%;
  animation: qdpmLightSweep 12s ease-in-out infinite;
}

@keyframes qdpmLightSweep {
  0%   { background-position: 0% 0%; opacity: 0.6; }
  50%  { background-position: 100% 100%; opacity: 1; }
  100% { background-position: 0% 0%; opacity: 0.6; }
}

/* ============================================================
   Logo
   ============================================================ */

.login-page-logo,
.login .logo {
  position: relative;
  z-index: 2;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 64px auto 0;
  padding: 0;
  text-align: center;
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  animation: qdpmLogoFloat 5s ease-in-out infinite;
}

.login-page-logo img,
.login .logo img {
  max-width: 260px;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.18));
}

@keyframes qdpmLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ============================================================
   Login card — glassmorphism
   ============================================================ */

.login .content {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  width: 400px;
  margin: 40px auto 0;
  padding: 40px 40px 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transition: transform 260ms ease, box-shadow 260ms ease;
  animation: qdpmCardIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both,
             qdpmCardFloat3D 9s ease-in-out infinite 600ms;
  transform-style: preserve-3d;
}

.login .content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%; left: -30%;
  width: 160%; height: 160%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(99,102,241,0.35), rgba(168,85,247,0.25), rgba(56,189,248,0.3), rgba(99,102,241,0.35));
  filter: blur(50px);
  animation: qdpmCardLightRotate 40s linear infinite;
}

.login .content::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6%; left: -6%;
  width: 112%; height: 112%;
  border-radius: 26px;
  box-shadow: 0 0 60px 10px rgba(129, 140, 248, 0.35);
  animation: qdpmCardBreathe 6s ease-in-out infinite;
}

@keyframes qdpmCardLightRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes qdpmCardBreathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes qdpmCardFloat3D {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  25%      { transform: translateY(-6px) rotateX(1.5deg) rotateY(-2deg); }
  50%      { transform: translateY(-2px) rotateX(-2deg) rotateY(2deg); }
  75%      { transform: translateY(-8px) rotateX(2deg) rotateY(1deg); }
}

.login .content:hover {
   animation-play-state: running, paused; 
  transform: translateY(-2px);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

@keyframes qdpmAuroraDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(6%, -8%) scale(1.15) rotate(10deg); }
  66%  { transform: translate(-8%, 6%) scale(1.05) rotate(-8deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

.login .content h3 {
  color: #14151a;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.login .content h4 {
  color: #555;
}
.login .content p {
  color: #444;
}

.login .content .login-form,
.login .content .forget-form {
  padding: 0;
  margin: 0;
}

.login .content .register-form {
  display: none;
}

.login .content .form-title {
  font-weight: 700;
  font-size: 22px;
  color: #14151a;
  letter-spacing: -0.4px;
  margin-bottom: 26px;
}

/* ============================================================
   Inputs — glass style, animated focus glow
   ============================================================ */

.login .input-icon {
  position: relative;
  margin-bottom: 4px;
}

.login .input-icon i {
  color: #9ca3af;
  transition: color 220ms ease, transform 220ms ease;
}

.login .input-icon input {
  padding-left: 40px !important;
}

.login .content .form-control {
  height: 46px;
  background-color: #f7f8fb;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  color: #14151a;
  font-size: 14px;
  transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.login .content .form-control::placeholder {
  color: #9ca3af;
  transition: opacity 220ms ease, transform 220ms ease;
}

.login .content .form-control:focus {
  background-color: #ffffff;
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16), 0 0 20px rgba(99, 102, 241, 0.12);
}

.login .content .form-control:focus::placeholder {
  opacity: 0.55;
  transform: translateX(3px);
}

.login .input-icon:focus-within i {
  color: #6366f1;
  transform: scale(1.1);
}

/* ============================================================
   Button — gradient, shine sweep
   ============================================================ */

.login .content .form-actions {
  background-color: transparent;
  clear: both;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0 0 24px 0;
  margin: 0 0 4px 0;
}

.login .content .form-actions .checkbox {
  margin: 8px 0 0 0;
  padding-left: 0;
  display: inline-block;
  color: #4b5563;
  font-size: 13px;
}

.login .content .form-actions .btn {
  position: relative;
  overflow: hidden;
  margin-top: 4px;
  height: 48px;
  padding: 0 28px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  background-size: 160% 160%;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.35);
  transition: transform 180ms ease, box-shadow 180ms ease, background-position 400ms ease;
}

.login .content .form-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(99, 102, 241, 0.45);
  background-position: 100% 0%;
}

.login .content .form-actions .btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(99, 102, 241, 0.35);
}

.login .content .form-actions .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 650ms ease;
}

.login .content .form-actions .btn:hover::after {
  left: 130%;
}

/* ============================================================
   Links / footer
   ============================================================ */

.login .content .forget-password {
  margin-top: 22px;
  text-align: center;
}

.login .content .forget-password a,
.login .content .create-account a {
  color: #6366f1;
  font-weight: 600;
  transition: color 180ms ease;
}

.login .content .forget-password a:hover,
.login .content .create-account a:hover {
  color: #4f46e5;
  text-decoration: none;
}

.login .content .create-account {
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  padding-top: 12px;
  margin-top: 16px;
  text-align: center;
}

.login .content .create-account a {
  display: inline-block;
  margin-top: 5px;
}

/* select2 dropdowns (unchanged behavior, refreshed color) */
.login .content .select2-container i {
  display: inline-block;
  position: relative;
  color: #9ca3af;
  z-index: 1;
  top: 1px;
  margin: 4px 4px 0 3px;
  width: 16px;
  height: 16px;
  font-size: 16px;
  text-align: center;
}

.login .content .has-error .select2-container i {
  color: #dc2626;
}

.login .content .select2-container a span {
  font-size: 13px;
}

.login .content .select2-container a span img {
  margin-left: 4px;
}

/* footer copyright */
.login .copyright {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 24px auto 0;
  padding: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.login .copyright a {
  color: rgba(255, 255, 255, 0.75);
}

/* Decorative tagline under the logo */
.login-tagline {
  position: relative;
  z-index: 2;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
  animation: qdpmTaglineIn 700ms ease 150ms both;
}

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

/* Feature-highlight chips below the card */
.login-features {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.login-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  transition: transform 200ms ease, background-color 200ms ease;
}

.login-feature:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.1);
}

.login-feature i {
  color: #818cf8;
  font-size: 14px;
}

@media (max-width: 480px) {
  .login-features {
    gap: 8px;
    margin-top: 20px;
  }

  .login-feature {
    padding: 6px 12px;
    font-size: 12px;
  }
}
.login-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(129, 140, 248, 0.8);
}

.login-particles-1 {
  box-shadow:
    81vw 28vh 6px 1px rgba(94,234,212,0.56), 31vw 57vh 6px 1px rgba(129,140,248,0.61),
    86vw 189vh 6px 1px rgba(129,140,248,0.91), 75vw 108vh 6px 1px rgba(129,140,248,0.56),
    27vw 59vh 6px 1px rgba(129,140,248,0.75), 71vw 50vh 6px 1px rgba(253,224,71,0.84),
    28vw 114vh 6px 1px rgba(129,140,248,0.79), 97vw 40vh 6px 1px rgba(94,234,212,0.83),
    35vw 39vh 6px 1px rgba(94,234,212,0.64), 13vw 23vh 6px 1px rgba(94,234,212,0.7),
    44vw 154vh 6px 1px rgba(129,140,248,0.66), 93vw 117vh 6px 1px rgba(253,224,71,0.76),
    10vw 141vh 6px 1px rgba(94,234,212,0.67), 73vw 49vh 6px 1px rgba(129,140,248,0.83),
    84vw 58vh 6px 1px rgba(129,140,248,0.86), 29vw 25vh 6px 1px rgba(253,224,71,0.7),
    81vw 93vh 6px 1px rgba(94,234,212,0.62), 26vw 171vh 6px 1px rgba(129,140,248,0.66),
    77vw 162vh 6px 1px rgba(244,114,182,0.62), 20vw 118vh 6px 1px rgba(244,114,182,0.7),
    87vw 83vh 6px 1px rgba(129,140,248,0.89), 29vw 8vh 6px 1px rgba(253,224,71,0.87),
    34vw 16vh 6px 1px rgba(94,234,212,0.63), 27vw 167vh 6px 1px rgba(253,224,71,0.75),
    18vw 67vh 6px 1px rgba(94,234,212,0.61), 95vw 149vh 6px 1px rgba(253,224,71,0.72),
    46vw 56vh 6px 1px rgba(244,114,182,0.95), 65vw 126vh 6px 1px rgba(129,140,248,0.59);
  animation: qdpmParticlesRise1 46s linear infinite;
}

.login-particles-2 {
  box-shadow:
    14vw 39vh 6px 1px rgba(253,224,71,0.8), 76vw 16vh 6px 1px rgba(253,224,71,0.7),
    67vw 64vh 6px 1px rgba(129,140,248,0.94), 87vw 184vh 6px 1px rgba(94,234,212,0.6),
    98vw 164vh 6px 1px rgba(94,234,212,0.69), 55vw 40vh 6px 1px rgba(94,234,212,0.73),
    64vw 195vh 6px 1px rgba(129,140,248,0.62), 80vw 76vh 6px 1px rgba(244,114,182,0.89),
    19vw 95vh 6px 1px rgba(129,140,248,0.86), 76vw 82vh 6px 1px rgba(129,140,248,0.75),
    46vw 78vh 6px 1px rgba(244,114,182,0.65), 72vw 20vh 6px 1px rgba(253,224,71,0.58),
    8vw 194vh 6px 1px rgba(244,114,182,0.76), 16vw 168vh 6px 1px rgba(244,114,182,0.74),
    33vw 135vh 6px 1px rgba(253,224,71,0.9), 27vw 138vh 6px 1px rgba(244,114,182,0.85),
    91vw 79vh 6px 1px rgba(94,234,212,0.71), 56vw 132vh 6px 1px rgba(244,114,182,0.73),
    28vw 16vh 6px 1px rgba(244,114,182,0.69), 75vw 56vh 6px 1px rgba(129,140,248,0.55),
    29vw 17vh 6px 1px rgba(94,234,212,0.91), 9vw 131vh 6px 1px rgba(253,224,71,0.65),
    27vw 138vh 6px 1px rgba(253,224,71,0.6), 31vw 200vh 6px 1px rgba(253,224,71,0.74),
    24vw 24vh 6px 1px rgba(253,224,71,0.59), 45vw 108vh 6px 1px rgba(129,140,248,0.71),
    86vw 167vh 6px 1px rgba(129,140,248,0.94);
  animation: qdpmParticlesRise2 61s linear infinite;
}

@keyframes qdpmParticlesRise1 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(0.6vw, -25vh); }
  50%  { transform: translate(-0.6vw, -50vh); }
  75%  { transform: translate(0.4vw, -75vh); }
  100% { transform: translate(0, -100vh); }
}

@keyframes qdpmParticlesRise2 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-0.5vw, -25vh); }
  50%  { transform: translate(0.5vw, -50vh); }
  75%  { transform: translate(-0.3vw, -75vh); }
  100% { transform: translate(0, -100vh); }
}
/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 991px) {
  .login .content {
    width: 92%;
    max-width: 400px;
  }
}

@media (max-width: 480px) {
  .login-page-logo,
  .login .logo {
    margin-top: 24px;
    font-size: 19px;
  }

  .login .content {
    width: 90%;
    padding: 28px 22px 20px;
    border-radius: 16px;
  }

  .login .content h3 {
    font-size: 20px;
  }

  .login .checkbox {
    font-size: 13px;
  }

  .login .content .form-actions {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .login::before,
  .login::after,
  .login-fade-in,
  .login-spotlight,
  .login-page-logo,
  .login .logo,
  .login .content,
  .login .content .form-actions .btn,
  .login .content .form-actions .btn::after {
    animation: none !important;
    transition: none !important;
  }
}