/* assets/css/login.css */

:root{
  --vv-primary:#0f763e;      /* deep HOA green */
  --vv-primary-2:#158a4b;
  --vv-accent:#e58e26;       /* gold */
  --vv-bg:#f7f9f6;
}
body{
  background:var(--vv-bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#203328;
}
.login-wrap{
  min-height:100vh;
  display:flex;
}
.login-brand{
  flex:1;
  display:none;
  align-items:center;
  justify-content:center;
  padding:3rem;
  color:#fff;
  background:linear-gradient(135deg,var(--vv-primary),var(--vv-primary-2));
}
@media (min-width: 992px){
  .login-brand{
    display:flex;
  }
}
.login-brand h1{
  color:var(--vv-accent);
  font-weight:700;
}
.login-brand .stat{
  background:rgba(255,255,255,.08);
  border-radius:.75rem;
  padding:1rem;
}
.login-brand .stat .num{
  color:var(--vv-accent);
  font-size:1.6rem;
  font-weight:700;
}
.login-form-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.login-card{
  width:100%;
  max-width:420px;
}
.btn-vv{
  background:var(--vv-primary);
  color:#fff;
  border:0;
  border-radius:6px; /* Soft rectangular edges */
}
.btn-vv:hover{
  background:var(--vv-primary-2);
  color:#fff;
}
.brand-logo{
  width:96px;
  height:96px;
  border-radius:1rem;
  background:#fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.25rem;
  overflow:hidden;
}
.brand-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:1rem;
}
.demo-box{
  background:#eef2ef;
  border-radius:.5rem;
  padding:.75rem;
  font-size:.8rem;
}
.demo-box button{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:.25rem .5rem;
  border-radius:.25rem;
}
.demo-box button:hover{
  background:#fff;
}