/* ==========================================================================
   MARKETVISIT — AUTHENTICATION  ("Field Dossier — Web / Auth")
   ========================================================================== */

/* override the dashboard body background — auth has its own canvas */
body.auth-body{
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(106,90,249,.20), transparent 55%),
    radial-gradient(1000px 700px at 110% 120%, rgba(124,58,237,.16), transparent 55%),
    var(--mv-bg);
  min-height:100dvh;overflow:hidden;
}

/* theme toggle, floated top-right of the whole page */
.auth-theme{
  position:fixed;top:var(--s-5);right:var(--s-5);z-index:20;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--mv-surface1);border:1px solid var(--mv-hairline);color:var(--mv-fg-soft);
  box-shadow:var(--mv-shadow-md);transition:all var(--dur-fast) var(--ease-out);
}
.auth-theme:hover{color:var(--mv-primary);border-color:var(--mv-primary-border);transform:translateY(-2px) rotate(-12deg);}

/* ---- SHELL : full-viewport split ---- */
.auth-shell{
  width:100%;min-height:100dvh;
  display:grid;grid-template-columns:1.05fr 1fr;
  background:var(--mv-surface1);
  overflow:hidden;position:relative;
  animation:auth-rise var(--dur-slow) var(--ease-out) both;
}
@keyframes auth-rise{from{opacity:0;}to{opacity:1;}}

/* ==========================================================================
   DECORATIVE PANEL  (left) — dark gradient aurora + floating elements
   ========================================================================== */
.auth-aside{
  position:relative;overflow:hidden;color:#fff;
  padding:var(--s-8);display:flex;flex-direction:column;justify-content:space-between;
  /* richer / more vivid than the sidebar: indigo → violet → ember */
  background:linear-gradient(150deg,
      #1a1147 0%,
      #2b1a6b 30%,
      #5a2a86 58%,
      #8a2f74 80%,
      #b3502f 100%);
  isolation:isolate;
}
/* animated aurora glow layer over the gradient */
.auth-aside::before{
  content:"";position:absolute;inset:-30%;z-index:-1;
  background:
    radial-gradient(420px 420px at 22% 18%, rgba(138,109,255,.55), transparent 60%),
    radial-gradient(460px 460px at 82% 78%, rgba(193,79,121,.45), transparent 60%),
    radial-gradient(380px 380px at 70% 12%, rgba(255,151,87,.30), transparent 60%);
  filter:blur(8px);animation:aurora 18s var(--ease-out) infinite alternate;
}
@keyframes aurora{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(3%,-2%) scale(1.08);}
  100%{transform:translate(-2%,3%) scale(1.04);}
}
/* faint grid texture (enterprise feel, ref img 4) */
.auth-aside::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 0%,#000 40%,transparent 78%);
          mask-image:radial-gradient(120% 120% at 50% 0%,#000 40%,transparent 78%);
}

/* brand lockup */
.auth-brand{display:flex;align-items:center;gap:var(--s-3);position:relative;z-index:2;}
.auth-brand .mark{width:46px;height:46px;border-radius:13px;background:var(--grad-brand);display:grid;place-items:center;box-shadow:0 8px 24px rgba(90,42,134,.5);flex:none;}
.auth-brand .mark .material-icons-outlined{font-size:26px;color:#fff;}
.auth-brand .name{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;line-height:1.1;}
.auth-brand .name span{display:block;font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:3px;}

/* headline */
.auth-hero{position:relative;z-index:2;max-width:30ch;}
.auth-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3vw,2.7rem);line-height:1.08;letter-spacing:-.02em;}
.auth-hero h1 .accent{background:linear-gradient(100deg,#ffd27a,#ff9a6b,#ff7aa8);-webkit-background-clip:text;background-clip:text;color:transparent;}
.auth-hero p{margin-top:var(--s-4);font-size:var(--mv-text-medium);line-height:1.6;color:rgba(255,255,255,.78);}

/* feature chips (ref img 4/5) */
.auth-chips{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6);}
.auth-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-pill);font-size:var(--mv-text-small);font-weight:600;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.auth-chip .material-icons-outlined{font-size:17px;}
.auth-chip.c1{color:#cdbcff;} .auth-chip.c2{color:#ffd27a;} .auth-chip.c3{color:#ff9ec4;}

.auth-foot{position:relative;z-index:2;font-size:var(--mv-text-tiny);color:rgba(255,255,255,.5);letter-spacing:.04em;}

/* ---- FLOATING ELEMENTS ---- */
.float{position:absolute;z-index:1;pointer-events:none;will-change:transform;}
.float.orb{border-radius:50%;filter:blur(.3px);}
.orb-1{width:130px;height:130px;top:-34px;left:-30px;background:radial-gradient(circle at 32% 30%,#c14f79,#7a2150);box-shadow:0 24px 60px rgba(122,33,80,.5);animation:drift1 14s var(--ease-out) infinite alternate;}
.orb-2{width:70px;height:70px;top:34%;right:12%;background:radial-gradient(circle at 32% 30%,#a78bfa,#6a5af9);box-shadow:0 18px 44px rgba(106,90,249,.5);animation:drift2 11s var(--ease-out) infinite alternate;}
.orb-3{width:44px;height:44px;bottom:16%;left:14%;background:radial-gradient(circle at 32% 30%,#ffb27a,#e0762f);box-shadow:0 14px 36px rgba(224,118,47,.5);animation:drift3 9s var(--ease-out) infinite alternate;}
.orb-4{width:90px;height:90px;bottom:-26px;right:-22px;background:radial-gradient(circle at 32% 30%,#d99bc2,#9a4f86);opacity:.85;animation:drift1 16s var(--ease-out) infinite alternate-reverse;}

/* ringed planet (ref img 1 top-left) */
.float.planet{width:120px;height:120px;top:6%;right:18%;}
.planet .body{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#8a6dff,#3a2480);box-shadow:0 20px 50px rgba(58,36,128,.55);}
.planet .ring{position:absolute;inset:-22% -8%;border-radius:50%;border:3px solid rgba(255,255,255,.28);transform:rotate(-28deg);}
.planet{animation:drift2 13s var(--ease-out) infinite alternate;}

/* soft square shapes */
.float.shape{border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.shape-1{width:54px;height:54px;top:22%;left:18%;transform:rotate(18deg);animation:spin1 20s linear infinite;}
.shape-2{width:36px;height:36px;bottom:26%;right:24%;transform:rotate(-10deg);animation:spin2 16s linear infinite;}

/* sparkles / shooting dots (ref img 1) */
.spark{position:absolute;z-index:1;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.7;pointer-events:none;box-shadow:0 0 8px 1px rgba(255,255,255,.7);}
.spark.s1{top:14%;left:46%;animation:twinkle 3.2s ease-in-out infinite;}
.spark.s2{top:62%;left:60%;animation:twinkle 2.6s ease-in-out infinite .6s;}
.spark.s3{top:78%;left:36%;animation:twinkle 3.6s ease-in-out infinite 1.1s;}
.spark.s4{top:32%;left:74%;animation:twinkle 2.9s ease-in-out infinite .3s;}
.spark.s5{top:48%;left:28%;animation:twinkle 3.1s ease-in-out infinite .9s;}

@keyframes drift1{from{transform:translate(0,0);}to{transform:translate(18px,24px);}}
@keyframes drift2{from{transform:translate(0,0);}to{transform:translate(-22px,16px);}}
@keyframes drift3{from{transform:translate(0,0);}to{transform:translate(14px,-20px);}}
@keyframes spin1{from{transform:rotate(18deg);}to{transform:rotate(378deg);}}
@keyframes spin2{from{transform:rotate(-10deg);}to{transform:rotate(-370deg);}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.7);}50%{opacity:.95;transform:scale(1.25);}}

/* ==========================================================================
   FORM PANEL  (right) — frosted glass card with floating-label inputs
   ========================================================================== */
.auth-form-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:var(--s-8);
  /* subtle frosted veil so it reads as glass against the surface */
  background:linear-gradient(180deg,var(--mv-surface1),var(--mv-surface2));
}
.auth-form{width:min(380px,100%);display:flex;flex-direction:column;}

/* each block rises in with a stagger (the "floating" entrance) */
.rise{opacity:0;transform:translateY(14px);animation:rise-in var(--dur-base) var(--ease-out) forwards;}
.rise.d1{animation-delay:.10s;} .rise.d2{animation-delay:.18s;} .rise.d3{animation-delay:.26s;}
.rise.d4{animation-delay:.34s;} .rise.d5{animation-delay:.42s;} .rise.d6{animation-delay:.50s;}
@keyframes rise-in{to{opacity:1;transform:none;}}

.auth-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mv-primary);}
.auth-title{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;margin-top:6px;}
.auth-subtitle{font-size:var(--mv-text-medium);color:var(--mv-fg-muted);margin-top:6px;}

.auth-fields{display:flex;flex-direction:column;gap:var(--s-5);margin-top:var(--s-7);}

/* floating-label field */
.field{position:relative;}
.field input{
  width:100%;height:56px;padding:22px 44px 8px 16px;
  background:var(--mv-surface1);border:1.5px solid var(--mv-hairline);border-radius:var(--r-md);
  color:var(--mv-fg);font-size:var(--mv-text-medium);font-weight:600;
  outline:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast);
}
.field input::placeholder{color:transparent;}
.field label{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:var(--mv-text-medium);font-weight:600;color:var(--mv-fg-ghost);
  pointer-events:none;transition:all var(--dur-fast) var(--ease-out);
}
/* float the label up when focused or filled */
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:14px;transform:none;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mv-primary);
}
.field input:focus{border-color:var(--mv-primary);box-shadow:var(--mv-ring);}
.field .f-ic{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;display:grid;place-items:center;padding:0;margin:0;line-height:1;
  font-size:20px;color:var(--mv-fg-ghost);transition:color var(--dur-fast);
}
.field input:focus ~ .f-ic{color:var(--mv-primary);}
.field .f-ic.btn{cursor:pointer;background:none;border:none;}
.field .f-ic.btn:hover{color:var(--mv-primary);}

/* row: remember + forgot */
.auth-row{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-5);}
.remember{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:var(--mv-text-small);font-weight:600;color:var(--mv-fg-soft);}
.remember input{position:absolute;opacity:0;width:0;height:0;}
.remember .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--mv-hairline-strong);display:grid;place-items:center;transition:all var(--dur-fast) var(--ease-out);flex:none;}
.remember .box .material-icons-outlined{font-size:15px;color:#fff;opacity:0;transform:scale(.5);transition:all var(--dur-fast) var(--ease-spring);}
.remember input:checked + .box{background:var(--grad-brand);border-color:transparent;}
.remember input:checked + .box .material-icons-outlined{opacity:1;transform:scale(1);}
.remember input:focus-visible + .box{box-shadow:var(--mv-ring);}
.forgot{font-size:var(--mv-text-small);font-weight:700;color:var(--mv-primary);transition:opacity var(--dur-fast);}
.forgot:hover{opacity:.7;text-decoration:underline;}

/* submit */
.auth-submit{
  margin-top:var(--s-6);height:54px;border-radius:var(--r-md);
  background:var(--grad-brand);color:#fff;font-weight:700;font-size:var(--mv-text-medium);
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  box-shadow:0 10px 28px -8px rgba(106,90,249,.6);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),filter var(--dur-fast);
  position:relative;overflow:hidden;
}
.auth-submit .material-icons-outlined{font-size:20px;transition:transform var(--dur-base) var(--ease-spring);}
.auth-submit:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(106,90,249,.7);}
.auth-submit:hover .material-icons-outlined{transform:translateX(4px);}
.auth-submit:active{transform:translateY(0);}
/* sheen sweep */
.auth-submit::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left var(--dur-slow) var(--ease-out);}
.auth-submit:hover::after{left:120%;}

.auth-alt{margin-top:var(--s-7);text-align:center;font-size:var(--mv-text-small);color:var(--mv-fg-muted);}
.auth-alt a{font-weight:700;color:var(--mv-primary);}
.auth-alt a:hover{text-decoration:underline;}
.auth-alt-sub{margin-top:var(--s-3);font-size:var(--mv-text-tiny);color:var(--mv-fg-ghost);}
.auth-alt-sub a{color:var(--mv-fg-muted);font-weight:600;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:880px){
  .auth-shell{grid-template-columns:1fr;min-height:0;}
  .auth-aside{display:none;}              /* hide decorative panel on small screens */
  .auth-form-wrap{padding:var(--s-7) var(--s-5);}
}
@media (prefers-reduced-motion:reduce){
  .auth-aside::before,.float,.spark,.shape-1,.shape-2{animation:none!important;}
  .rise{animation:none!important;opacity:1;transform:none;}
}

/* ==========================================================================
   AUTH BOOTSTRAP SPINNER
   ========================================================================== */
.auth-bootstrap {
    min-height: 60vh;
    display: grid;
    place-items: center;
}

.auth-bootstrap-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--mv-hairline);
    border-top-color: var(--mv-primary);
    animation: auth-spin .7s linear infinite;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion:reduce) {
    .auth-bootstrap-spinner {
        animation-duration: 1.4s;
    }
}

/* ==========================================================================
   AUTH SUBMIT 
   ========================================================================== */

/* keep the label + icon on one centred line, never wrapping/drifting left */
.auth-submit {
    white-space: nowrap;
    text-align: center;
}

    .auth-submit > span {
        line-height: 1;
    }

        .auth-submit > span:not(.material-icons-outlined):not(.auth-spin) {
            flex: 0 0 auto; /* don't let the text stretch or shrink-wrap oddly */
        }

    /* disabled / busy: lock it, dim slightly, no hover lift, no sheen sweep */
    .auth-submit:disabled,
    .auth-submit.is-busy {
        cursor: not-allowed;
        filter: saturate(.9) brightness(.97);
        opacity: .92;
        transform: none !important;
    }

        .auth-submit:disabled:hover,
        .auth-submit.is-busy:hover {
            transform: none !important;
            box-shadow: 0 10px 28px -8px rgba(106,90,249,.6);
        }

        .auth-submit.is-busy::after,
        .auth-submit:disabled::after {
            display: none;
        }
        /* kill the sheen while busy */
        .auth-submit:disabled:hover .material-icons-outlined {
            transform: none;
        }

/* spinner (replaces the arrow while signing in) */
.auth-spin {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    animation: auth-spin .7s linear infinite;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion:reduce) {
    .auth-spin {
        animation-duration: 1.4s;
    }
}