/* ====================================================================
   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;
}

/* ---------- 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:100%; overflow:auto; }
}
@media (max-width:920px){
  .auth-grid{ grid-template-columns:1fr; }
  .hero{ order:2 }
  .form-wrap{ order:1 }
}

/* ====================================================================
   LEFT SIDE — text only (no card)
   ==================================================================== */
.hero{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}
.brand{ display:none; } /* keep it ultra clean; remove logo duplicate */
.kicker{ display:none; }
.hero h2{
  font-size:clamp(1.5rem, 1.1rem + 2vw, 2.2rem);
  margin:10px 0 12px;
  color:white;
  font-weight:700;
}
.hero p{
  color:white;
  margin:0 0 18px;
  max-width:58ch;
}
.bullets{
  display:grid; gap:12px; margin:14px 0 0; padding:0; list-style:none;
}
.bullets li{
  display:flex; gap:10px; align-items:flex-start; color:white;
}
.bullets li::before{
  content:""; flex:0 0 9px; height:9px; margin-top:7px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand));
  box-shadow:0 0 8px rgba(47,136,255,.25);
}
/* When viewport height is short, keep it succinct */
@media (max-height:820px){
  .bullets li:nth-child(n+3){ display:none; }
}

/* ====================================================================
   RIGHT SIDE — stylish light form card
   ==================================================================== */
.form-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:20px;
  color:var(--ink);
}

/* 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:grid; gap:12px; }

/* 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:10px;
  color:var(--muted); font-size:.95rem;
}
.auth-footer a{ color:#885B00; text-decoration:none }
.auth-footer a:hover{ text-decoration:underline }

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

/* ---------- Option 2: Only the form (centered) ----------
   If you decide to remove the left side entirely, uncomment:

.hero{ display:none !important; }
.auth-grid{
  grid-template-columns: minmax(360px, 520px) !important;
  justify-content:center !important;
}
.form-wrap{ margin:0 auto !important; }

------------------------------------------------------------------- */