/* ==============================================================
   TasksAvant — Tela de Login
   Visual minimalista (fundo preto, sem cards/glow). Carregado APENAS
   na página de login (auth.php).
   ============================================================== */

.login-bg{
  min-height:100vh;
  background:#0A0A0A;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
  font-family:'DM Sans',sans-serif;
  color:#EDEDED;
  /* +8% no conteúdo todo da tela de login (logo, título, inputs, botão) */
  font-size:108%;
}

.login-shell{
  width:100%;max-width:389px; /* 360 * 1.08 */
}

/* "Card" agora é só uma coluna — sem borda, sem fundo, sem sombra. */
.login-card{
  background:transparent;border:none;border-radius:0;
  padding:0;min-height:0;box-shadow:none;color:#EDEDED;
  animation:fadeUp .4s ease forwards;
}
.login-card::before, .login-card::after{ content:none }

/* Logo no topo */
.login-card-head{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:39px; /* 36 * 1.08 */
}
.login-logo{display:flex;align-items:center;justify-content:center}
.login-logo img{ height:auto;max-height:43px;display:block } /* 40*1.08 */
.login-logo-fallback{
  width:48px;height:48px;border-radius:10px; /* 44*1.08 */
  background:#161616;border:1px solid #1F1F1F;
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:16px;color:#EDEDED; /* 15*1.08 */
}

.login-card-body{ max-width:100%;text-align:center }

.login-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.01em; /* 22*1.08 */
  color:#FAFAFA;margin-bottom:7px;text-align:center;
}
.login-subtitle{
  font-size:14px;color:#71717A;margin-bottom:30px;text-align:center;line-height:1.5; /* 13*1.08 */
}
.login-subtitle a{ color:#A1A1AA;text-decoration:none }
.login-subtitle a:hover{color:#EDEDED;text-decoration:underline}

.login-form{display:flex;flex-direction:column;gap:11px;text-align:left} /* 10*1.08 */
.login-field{position:relative}
.login-field-password .login-input{padding-right:48px} /* 44*1.08 */
.login-input{
  width:100%;
  background:transparent;
  border:1px solid #262626;
  border-radius:9px;
  padding:13px 15px; /* 12*1.08 / 14*1.08 */
  font-size:15px;color:#EDEDED; /* 14*1.08 */
  outline:none;transition:border-color .15s;
  font-family:inherit;
}
.login-input::placeholder{color:#52525A}
.login-input:hover{border-color:#3A3A3A}
.login-input:focus{ border-color:#52525A }
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #0A0A0A inset;
  -webkit-text-fill-color:#EDEDED;
  caret-color:#EDEDED;
}

.login-pwd-toggle{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:35px;height:35px;border-radius:6px;border:none;background:transparent; /* 32*1.08 */
  color:#52525A;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .15s;
}
.login-pwd-toggle:hover{color:#EDEDED}

.login-error{
  text-align:left;margin-bottom:13px;padding:11px 13px; /* 10*1.08 / 12*1.08 */
  border-radius:8px;background:rgba(217,115,115,0.08);
  color:#E8A6A6;border:1px solid rgba(217,115,115,0.18);
  font-size:13.5px; /* 12.5*1.08 */
}

.login-submit{
  margin-top:7px;
  width:100%;padding:13px 19px; /* 12*1.08 / 18*1.08 */
  background:#FAFAFA;color:#0A0A0A;
  border:none;border-radius:9px;
  font-size:15px;font-weight:600;font-family:inherit; /* 14*1.08 */
  cursor:pointer;transition:background .15s,opacity .15s;
}
.login-submit:hover{background:#FFFFFF}
.login-submit:active{opacity:.85}

.login-card-foot{
  margin-top:35px;text-align:center;color:#3F3F46;font-size:11.9px;line-height:1.5; /* 32*1.08 / 11*1.08 */
}
.login-card-foot strong{color:#71717A;font-weight:500}

@media (max-width: 480px){
  .login-shell{max-width:100%}
}

/* Animação reaproveitada de app.css — replicada aqui para o caso da página
   de login NÃO carregar app.css (mantém standalone). */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}