/* ============================================================
   Engelight — Portal de Relacionamento — tela de login (split-screen)
   Usado apenas por protected/views/layouts/login.php
   ============================================================ */

html, body.login-page{
  height:100%;
  margin:0;
  background:#fff;
}

.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}
@media (max-width:860px){
  .login-shell{ grid-template-columns:1fr; }
}

/* ---------- left: brand panel ---------- */
.login-brand{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 700px 550px at 85% 8%, rgba(27,71,184,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 560px 460px at 6% 96%, rgba(120,80,10,0.24) 0%, transparent 65%),
    linear-gradient(165deg, #081332 0%, #050B18 45%, #060d20 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px;
  min-height:280px;
}
@media (max-width:860px){ .login-brand{ padding:44px 32px; min-height:220px; } }

.login-brand-glow{
  position:absolute; width:60vw; height:60vw; max-width:640px; max-height:640px;
  border-radius:50%; top:-20%; right:-15%;
  background:radial-gradient(circle, rgba(27,71,184,0.45) 0%, transparent 70%);
  filter:blur(10px);
}
.login-brand-grid{
  position:absolute; inset:0; opacity:0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:46px 46px;
}
.login-brand-inner{ position:relative; z-index:2; max-width:420px; }
.login-logo{ height:48px; width:auto; margin-bottom:32px; }
.login-brand-inner h1{
  font-family:'Space Grotesk', Arial, sans-serif;
  color:#fff; font-size:clamp(24px,2.6vw,34px); font-weight:600; line-height:1.2; margin:0 0 14px;
}
.login-brand-inner p{
  color:rgba(255,255,255,0.65); font-size:15px; line-height:1.65; margin:0;
}
.login-brand-foot{
  margin-top:48px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.14);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:rgba(255,255,255,0.45);
}
.login-brand-foot a{ color:rgba(255,255,255,0.7); }
.login-brand-foot a:hover{ color:#FFC800; }

/* ---------- right: form panel ---------- */
.login-panel{
  position:relative;
  background:#F5F6F9;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 32px;
}
.login-back-row{
  position:absolute; top:28px; left:32px; right:32px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.login-back{
  font-size:13px; font-weight:600; color:#5B6472; text-decoration:none;
}
.login-back:hover{ color:#0A1B4D; }
.login-back:last-child{
  background:#fff; border:1px solid rgba(10,20,40,0.12); border-radius:999px; padding:7px 16px;
}
.login-back:last-child:hover{ border-color:#0A1B4D; }
.login-panel-inner{ width:100%; max-width:380px; }

/* neutralize the floating-card look from modern.css — it already sits on its own panel here */
.login-panel .form, .login-panel .form-signin{
  max-width:none; margin:0; background:transparent; border:none; box-shadow:none; padding:0;
}
.login-panel .form h1, .login-panel .form-signin h1{
  font-family:'Space Grotesk', Arial, sans-serif; color:#0A1B4D; font-size:26px; margin-bottom:6px;
}
.login-panel .form p.note{ margin-bottom:22px; }
.login-panel label{ margin-top:16px; }
.login-panel .buttons .btn{
  background:#FFC800 !important; color:#050B18 !important; font-size:15px; padding:13px !important;
}