/* Animated login cover — floating 3D logo + module dashboard glass cards.
   Layered on top of Vuexy's .auth-cover-bg without touching vendor page-auth.css.
   Copy-pasted per module (no shared front-end JAR) — keep in sync manually. */

/* Theme variables live on :root (not .auth-cover-bg) so the toggle button —
   which sits outside the cover on small screens — can use them too.
   Dark mode applies ONLY when the app explicitly sets data-bs-theme="dark";
   there is deliberately no prefers-color-scheme fallback, since most of these
   modules have no real dark-mode toggle wired up and would otherwise silently
   follow the OS/browser setting regardless of the app's own light default. */
:root {
  --cover-bg-1: #e9e6ff;
  --cover-bg-2: #f2f0ff;
  --cover-bg-3: #f8f7ff;
  --cover-glow: rgba(123, 108, 246, .35);
  --cover-card-bg: rgba(255, 255, 255, .72);
  --cover-card-border: rgba(255, 255, 255, .9);
  --cover-card-shadow: rgba(40, 28, 100, .16);
  --cover-ink: #2f2b3d;
  --cover-muted: #8c8a9b;
  --cover-ground: rgba(50, 35, 140, .35);
}

html[data-bs-theme="dark"] {
  --cover-bg-1: #1b1838;
  --cover-bg-2: #141228;
  --cover-bg-3: #100e20;
  --cover-glow: rgba(123, 108, 246, .5);
  --cover-card-bg: rgba(35, 32, 60, .65);
  --cover-card-border: rgba(255, 255, 255, .12);
  --cover-card-shadow: rgba(0, 0, 0, .4);
  --cover-ink: #e7e5f4;
  --cover-muted: #9a97b0;
  --cover-ground: rgba(0, 0, 0, .65);
}

.auth-cover-bg {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  isolation: isolate;
  background: radial-gradient(120% 120% at 20% 0%, var(--cover-bg-1) 0%, var(--cover-bg-2) 45%, var(--cover-bg-3) 100%);
}

/* Light/dark toggle button — fixed so it stays visible even below the lg
   breakpoint where the cover itself is hidden. */
.theme-toggle-btn {
  position: fixed; top: 20px; right: 20px; z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cover-card-border);
  background: var(--cover-card-bg); color: var(--cover-ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px var(--cover-card-shadow);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
  transition: transform .2s ease;
}
.theme-toggle-btn:hover { transform: scale(1.08); }

/* Aurora blobs */
.cover-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; will-change: transform; }
.cover-blob.b1 { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: -14%; top: -18%; background: radial-gradient(circle, #9d8bff, transparent 65%); animation: coverDrift1 16s ease-in-out infinite alternate; }
.cover-blob.b2 { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; right: -10%; bottom: -14%; background: radial-gradient(circle, #5aa7ff, transparent 65%); animation: coverDrift2 20s ease-in-out infinite alternate; }
@keyframes coverDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(4vw,3vh) scale(1.12); } }
@keyframes coverDrift2 { from { transform: translate(0,0) scale(1.08); } to { transform: translate(-4vw,-4vh) scale(.94); } }

/* Dot grid */
.cover-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(123,108,246,.14) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 70% at 50% 42%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 42%, #000 30%, transparent 100%);
}

/* Orbit rings */
.cover-ring { position: absolute; left: 50%; top: 44%; border: 1.5px solid rgba(123,108,246,.35); border-radius: 50%; pointer-events: none; animation: coverSpin 30s linear infinite; }
.cover-ring.r1 { width: min(30vw,420px); height: min(30vw,420px); margin: calc(min(15vw,210px) * -1) 0 0 calc(min(15vw,210px) * -1); border-style: dashed; }
.cover-ring.r2 { width: min(38vw,540px); height: min(38vw,540px); margin: calc(min(19vw,270px) * -1) 0 0 calc(min(19vw,270px) * -1); opacity: .5; animation-duration: 48s; animation-direction: reverse; }
@keyframes coverSpin { to { transform: rotate(360deg); } }

/* Floating 3D logo rig */
.cover-rig { position: absolute; left: 50%; top: 44%; width: min(19vw,270px); transform: translate(-50%,-50%); transform-style: preserve-3d; will-change: transform; z-index: 2; }
.cover-glow {
  position: absolute; left: 50%; top: 50%; width: 130%; height: 130%; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, var(--cover-glow) 0%, transparent 62%);
  animation: coverPulse 5s ease-in-out infinite;
}
@keyframes coverPulse { 0%, 100% { opacity: .65; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); } }
.cover-floaty { position: relative; animation: coverBob 7s ease-in-out infinite; will-change: transform; }
@keyframes coverBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-22px) rotate(2.5deg); } }
.cover-floaty img { width: 100%; display: block; filter: drop-shadow(0 26px 34px rgba(60,40,160,.35)); }
.cover-ground {
  position: absolute; left: 50%; bottom: -16%; width: 60%; height: 22px; transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--cover-ground), transparent 68%); filter: blur(6px);
  animation: coverSquash 7s ease-in-out infinite;
}
@keyframes coverSquash { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .8; } 50% { transform: translateX(-50%) scaleX(.72); opacity: .45; } }

/* Shine sweep, masked to the logo's own alpha shape */
.cover-shine { position: absolute; inset: 0; pointer-events: none; overflow: hidden; -webkit-mask: var(--cover-logo-url) center / contain no-repeat; mask: var(--cover-logo-url) center / contain no-repeat; }
.cover-shine::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 34%; left: -60%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
  transform: skewX(-18deg); animation: coverSweep 6s ease-in-out infinite;
}
@keyframes coverSweep { 0%, 55% { left: -60%; } 75%, 100% { left: 160%; } }

/* Glass dashboard cards */
.cover-card {
  position: absolute; z-index: 4; color: var(--cover-ink);
  background: var(--cover-card-bg); border: 1px solid var(--cover-card-border);
  border-radius: 14px; padding: 13px 15px;
  box-shadow: 0 14px 34px var(--cover-card-shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: coverCardBob 8s ease-in-out infinite; will-change: transform;
}
@keyframes coverCardBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.cover-card .ct { font-size: 11px; font-weight: 700; color: var(--cover-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.cover-card .cv { font-size: 19px; font-weight: 800; }
.cover-card .cu { color: #28c76f; font-size: 11.5px; font-weight: 700; }
.cover-card svg { display: block; }
.cover-card.notif { display: flex; gap: 10px; align-items: center; }
.cover-card.notif .cd { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex: 0 0 auto; }
.cover-card.notif .cs { font-size: 12.5px; font-weight: 700; }
.cover-card.notif .cm { font-size: 11px; color: var(--cover-muted); }

/* Support avatar stack */
.cover-avatars { display: flex; align-items: center; margin-top: 4px; }
.cover-avatars span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--cover-card-border); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 700; }
.cover-avatars span:first-child { margin-left: 0; }
.cover-avatars .more { background: rgba(140,138,155,.35); color: var(--cover-muted); font-size: 10px; }

/* Agent downline mini org-tree */
.cover-tree line { stroke: rgba(123,108,246,.5); stroke-width: 1.5; }
.cover-tree circle { fill: #7b6cf6; }
.cover-tree .lvl2 { fill: #5aa7ff; }
.cover-tree .lvl3 { fill: #38d0c8; }

/* Card anchor positions */
.cover-pos-tl { left: 6%; top: 13%; animation-delay: -1.5s; }
.cover-pos-tr { right: 7%; top: 19%; animation-delay: -4s; }
.cover-pos-bl { left: 8%; bottom: 14%; animation-delay: -6s; }
.cover-pos-br { right: 9%; bottom: 18%; animation-delay: -2.5s; }

/* Caption */
.cover-caption { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); text-align: center; z-index: 3; color: var(--cover-ink); animation: coverFadeUp 1.2s .3s both; }
.cover-caption h2 { font-size: 18px; font-weight: 800; letter-spacing: .2px; margin: 0; color: var(--cover-ink); }
.cover-caption p { font-size: 13px; color: var(--cover-muted); margin: 5px 0 0; }
@keyframes coverFadeUp { from { opacity: 0; transform: translate(-50%,14px); } to { opacity: 1; transform: translate(-50%,0); } }

@media (max-width: 1399.98px) {
  .cover-card { padding: 10px 12px; }
  .cover-card .cv { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-blob, .cover-ring, .cover-floaty, .cover-glow, .cover-ground, .cover-card, .cover-caption, .cover-shine::after {
    animation: none !important;
  }
}