/* ==========================================================================
   login.css
   ========================================================================== */

/* ---------- Page Layout ---------- */

body{
  margin:0;
  background:#f8f7f4;
  font-family:'Figtree',sans-serif;
}

.login-shell{
  display:flex;
  height:100vh;
  padding:24px;
  gap:24px;
  overflow:hidden;
}

/* ---------- Left Column ---------- */

.login-form-col{
  flex:0 0 44%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.login-brand{
  width:100%;
  max-width:360px;
  margin-bottom:28px;

  display:flex;
  align-items:center;
  gap:10px;

  font-size:1.2rem;
  font-weight:700;
  color:var(--color-text);
}

.login-brand .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-accent);
}

.login-card{
  width:100%;
  max-width:360px;
  padding:36px;
}

.login-card h1{
  font-size:2rem;
  font-weight:700;
  margin-bottom:8px;
  line-height:1.15;
}

.login-card .subtitle{
  color:var(--color-text-muted);
  font-size:.95rem;
  margin-bottom:28px;
}

.login-card .alert-theme-danger{
  margin-bottom:20px;
}

/* ---------- Form ---------- */

.form-label{
  font-weight:600;
}

.form-control{
  height:48px;
  border-radius:12px;
}

.toggle-password{
  position:absolute;
  right:14px;
  top:40px;

  cursor:pointer;
  user-select:none;
  opacity:.6;
}

.toggle-password:hover{
  opacity:1;
}

.btn-login{
  width:100%;
  height:48px;
  margin-top:6px;
}

.password-hint{
  margin-top:10px;

  font-size:.8rem;
  color:var(--color-text-muted);
  text-align:center;
}

/* ---------- Links ---------- */

.extra-links{
  display:flex;
  flex-direction:column;
  gap:10px;

  margin-top:24px;

  text-align:center;
  font-size:.9rem;
}

.extra-links a{
  color:var(--color-text-muted);
  text-decoration:none;
  transition:.2s;
}

.extra-links a:hover{
  color:var(--color-accent);
}

/* ---------- Right Column ---------- */

.login-media-col{
  flex:1;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;

  border-radius:28px;

  background:#ebe7e1;
}

/* ---------- Video ---------- */

.login-hero-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* ---------- Placeholder (if video removed) ---------- */

.login-media-placeholder{
  color:#777;
  font-size:.95rem;
  text-align:center;
}

/* ---------- Mobile ---------- */

@media (max-width:900px){

  .login-shell{
      padding:20px;
  }

  .login-media-col{
      display:none;
  }

  .login-form-col{
      flex:1;
  }

  .login-card,
  .login-brand{
      max-width:420px;
  }

}

/* ---------- Maintenance ---------- */

.is-disabled{
  pointer-events:none !important;
  opacity:.6 !important;
  cursor:not-allowed !important;
}