/* ====================================================================
   Glipto DAM — Login (Split: text-only left, light modern form)
   Replaces the previous "left card + dark form" look with:
   - White page, left side = plain text (no card)
   - Right side = white, stylish form card
   - No scrolling on typical laptops (panels self-contain if needed)
   ==================================================================== */

/* ---------- Brand tokens ---------- */
:root{
  --brand:#2F88FF;          /* Glipto blue */
  --brand-2:#FFD34D;        /* Glipto yellow */
  --page:#FFFFFF;           /* page background */
  --tint:#F6FAFF;           /* subtle bg tint */
  --ink:#101828;            /* main text */
  --ink-dim:#475467;        /* secondary text */
  --muted:#98A2B3;

  --card:#FFFFFF;           /* form card surface */
  --border:#E6EEF8;         /* fine borders */

  --ring:0 0 0 3px rgba(47,136,255,.25);
  --shadow:0 12px 28px rgba(16,24,40,.08);

  --radius:16px;
  --radius-lg:20px;

  --max-w:1160px;
  --grid-gap:clamp(14px,2.2vw,22px);
  --pad:clamp(10px,2dvh,20px);
}

/* ---------- Base / page background ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--ink);
  background:
          radial-gradient(900px 700px at -12% -10%, var(--tint) 0%, transparent 60%),
          radial-gradient(1000px 800px at 112% 0%, #EEF4FF 0%, transparent 65%),
          var(--page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  height: 100%!important;
  margin:0!important;
}

/* ---------- Layout shell ---------- */
.auth-shell{
  display:grid; place-items:center;
  min-height:100svh;
  padding:var(--pad);
}
.auth-grid{
  width:min(100%,var(--max-w));
  display:grid;
  grid-template-columns:minmax(360px,1fr) minmax(420px,1fr);
  gap:var(--grid-gap);
  align-items:start;
}
@media (min-width:921px){
  .auth-grid{ height:min(86svh,680px); }     /* above-the-fold on laptops */
  .hero, .form-card{ height:92%; overflow:auto; }
}
@media (max-width:920px){
  .auth-grid{ grid-template-columns:1fr; }
  .hero{ order:2 }
  .form-wrap{ order:1 }
}

/* ====================================================================
   LEFT SIDE — marketing hero
   ==================================================================== */
.hero{
  background:#235787;
  border-radius:var(--radius-lg);
  padding:clamp(30px,4vw,48px);
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:460px;
  position:relative;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(16,24,40,.25);
}
.hero::after{
  content:"";
  position:absolute;
  inset:18% -5% auto auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.25), transparent 65%);
  z-index:0;
}
.hero > *{ position:relative; z-index:1; }
.kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#F6FAFF;
}
.hero h1{
  font-size:clamp(1.9rem, 1.15rem + 2.6vw, 2.6rem);
  margin:0;
  font-weight:700;
  line-height:1.3;
}
.hero p{
  margin:0;
  font-size:1rem;
  max-width:60ch;
  color:#E8EDFF;
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;
}
.hero-stats div{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:12px;
}
.hero-stats strong{
  display:block;
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:0.01em;
}
.hero-stats span{
  font-size:.9rem;
  color:#D6E0FF;
}
.hero-highlights{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.hero-highlights li{
  padding-left:30px;
  position:relative;
  font-size:.95rem;
  color:#E8EDFF;
}
.hero-highlights li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  border-radius:4px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 0 6px rgba(47,136,255,.4);
}

/* ====================================================================
   RIGHT SIDE — stylish light form card
   ==================================================================== */
.form-card{
  background:rgba(255,255,255,.98);
  border:1px solid rgba(15,23,42,.12);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 40px rgba(15,23,42,.15);
  padding:clamp(28px,3vw,44px);
  color:var(--ink);
  backdrop-filter:blur(8px);
}

/* tidy the header image area inside the form */
#LoginHeader{
  display:grid; place-items:center; margin:0 0 8px;
  background:transparent !important; border:0 !important; padding:0 !important;
}
#LoginHeader .LoginHeaderImg{ max-height:60px; width:auto; height:auto; }

.form-card form{
  display:flex;
  flex-direction:column;
}

.form-header{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.form-title{
  margin:0;
  font-size:1.5rem;
  font-weight:700;
  color:var(--ink);
}
.form-lede{
  margin:0;
  color:var(--ink-dim);
  font-size:.95rem;
  line-height:1.45;
}

/* Labels */
.Question > label{ color:#334155; font-weight:600; }

/* Inputs / selects */
.form-card input,
.form-card select,
.form-card textarea{
  width:100%;
  background:#FFFFFF;
  color:var(--ink);
  border:1px solid #D7E3FF;
  border-radius:12px;
  padding:10px 12px;
  min-height:40px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s, transform .2s;
}
.form-card input::placeholder{ color:#9AA7C1; }
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  border-color:#7EB4FF;
  box-shadow:var(--ring);
}

/* Make the “dividers” subtle (or remove if present) */
.form-card .Question{ border:none !important; }

/* Checkbox accent (if supported) */
@supports (accent-color: auto){
  input[type="checkbox"]{ accent-color: var(--brand); }
}

/* Error banner */
.FormIncorrect{
  color:#842029;
  background:#FDEAEA;
  border:1px solid #F5C2C7;
  border-radius:12px;
  padding:10px 12px;
}

/* Submit button */
.QuestionSubmit input[type="submit"],
.form-card input[type="submit"]{
  appearance:none; -webkit-appearance:none;
  width:100%;
  border:0; border-radius:14px;
  font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#5DAAFF,#2F88FF);
  box-shadow:0 8px 18px rgba(47,136,255,.20);
  transition:transform .15s ease, filter .15s ease;
}
.QuestionSubmit input[type="submit"]:hover{
  transform:translateY(-1px); filter:brightness(1.03);
}

/* Helper links */
.ExternalLoginLinks, .LoginLinks{ color:var(--ink-dim); }
.LoginLinks a{ color:#2F5DAA; text-decoration:underline; }
.LoginLinks a:hover{ color:#1D3E80; }

/* Footer under card */
.auth-footer{
  text-align:center; margin-top:14px;
  color:var(--ink-dim); font-size:.95rem;
}
.auth-footer a{
  color:var(--brand);
  text-decoration:none;
  font-weight:600;
}
.auth-footer a:hover{ text-decoration:underline }

/* ---------- Reduce motion if user prefers ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

#CentralSpaceLogin {
  margin-top:0px!important;
  padding: 0!important;
  width: 100%!important;
  min-height: 100vh!important;   /* ← THIS is the key */
  text-align: left!important;
  position: relative!important;
  display: flex!important;       /* optional but very useful */
  margin-bottom:0!important;
}

#login_box .Question .stdwidth{
  min-height:fit-content!important;
}

#login_box .Question input[type=text], #login_box .Question input[type=password]{
  width:100%!important;
}

#login_box .Question{
  padding:0!important;
}

#login_box{
  padding:0!important;
  background:#235787!important;
  min-height:100vh;
  border-radius:0;
}

p.fw-bold mb-3{
  text-align:center;
}

#login_box, #login_box h1, #login_box a{
  text-align:center;
}

#FooterNavRightBottom{
  display:none!important;
}

#login_box .Question.HalfWidth{
  width:100%!important;
}

#login_box .Question.HalfWidth label{
  width:100%!important;
}

#login_box #language{
  width:100%!important;
}


.auth-footer a{
  color:#235787!important;
}