/* css/login.css
   WIP Login mock. Dark plexus background + white card with black text,
   all controls disabled. */

.login-shell{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 991.98px){
  .login-shell{ grid-template-columns: 1fr; }
}

/* Reuse WIP banner styling (same as signup) */
.wip-banner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,123,255,0.10);
  border: 1px solid rgba(0,123,255,0.25);
  margin-bottom: 16px;
}

.wip-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wip-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #00a3ff;
  box-shadow: 0 0 16px rgba(0,163,255,0.35);
}

.wip-title{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}

.wip-sub{
  color: rgba(255,255,255,0.70);
  font-size: 0.95rem;
}

/* Main card */
.login-card{
  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  overflow: hidden;
}

/* Ensure black text inside the card even if global theme sets white */
.login-card,
.login-card *{
  color: #111;
}

.login-head{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.login-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.brand-mark{ font-size: 1.3rem; }

.brand-stack .brand-name{
  font-weight: 950;
  color: #0b0f14;
  line-height: 1.05;
}

.brand-stack .brand-tag{
  color: rgba(0,0,0,0.60);
  font-size: 0.92rem;
}

.login-title{
  font-size: 1.55rem;
  font-weight: 950;
  color: #0b0f14;
  margin-top: 6px;
}

.login-desc{
  color: rgba(0,0,0,0.65);
  margin-top: 6px;
}

.login-form{
  padding: 16px 18px 18px;
}

.login-form label{
  font-weight: 800;
  color: rgba(0,0,0,0.70);
}

.login-form .form-control{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(245,245,245,1);
  color: #111;
}

/* Row under password */
.login-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
}

.login-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(0,0,0,0.65);
}

.login-divider{
  position: relative;
  text-align: center;
  margin: 14px 0;
}

.login-divider::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.12);
}

.login-divider span{
  position: relative;
  background: rgba(255,255,255,0.98);
  padding: 0 10px;
  color: rgba(0,0,0,0.55);
  font-weight: 800;
  font-size: 0.92rem;
}

.login-foot{
  margin-top: 14px;
  text-align: center;
  color: rgba(0,0,0,0.65);
}

.login-link{
  font-weight: 900;
  text-decoration: underline;
}

.disabled-link{
  color: rgba(0,123,255,0.75);
  cursor: not-allowed;
}

/* Disabled look */
.login-form :disabled{
  opacity: 0.65;
  cursor: not-allowed !important;
}

/* Side panel (same vibe as signup) */
.login-side{
  display: grid;
  gap: 14px;
}

.side-card{
  background: rgba(30,30,30,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 16px;
}

.side-card.subtle{
  background: rgba(18,18,18,0.90);
}

.side-title{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  margin-bottom: 10px;
}

.side-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.78);
}

.side-list li:first-child{ border-top: 0; padding-top: 0; }

.side-bullet{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,123,255,0.95);
  box-shadow: 0 0 14px rgba(0,123,255,0.25);
}

.side-note{
  margin-top: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 0.95rem;
}

.status-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffb020;
  box-shadow: 0 0 14px rgba(255,176,32,0.25);
  margin-top: 6px;
}

.status-main{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}

.status-sub{
  color: rgba(255,255,255,0.70);
  font-size: 0.95rem;
  margin-top: 2px;
}