/* ============================================================
   BEYOND LIMITS — login.css
   ------------------------------------------------------------
   CSS dedicado à página de login (login.html).
   Segue a mesma identidade visual e tokens do resto do site
   (navy/cyan), abordagem MOBILE-FIRST: a secção 1 já é a versão
   completa para telemóvel, e a secção 2 (no fim) só contém os
   ajustes que dependem da largura do ecrã, com comentário do
   dispositivo/faixa a que cada um se destina.

   Ligar depois do Bootstrap e dos ícones:
     <link rel="stylesheet" href="../css/login.css">

   Se já tiveres o beyond-limits-base.css ligado nesta página,
   podes remover o bloco de tokens (:root) abaixo para evitar
   duplicação — aqui ele existe para este ficheiro funcionar
   sozinho, já que login.html não carrega mais nenhum CSS próprio.
   ============================================================ */

/* ============================================================
   1) BASE (mobile-first)
   ============================================================ */

body {
  background: linear-gradient(160deg, #f5f7fb 0%, #eef2f9 55%, #eaf0fb 100%) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--bl-ink);
}

/* O <form> já é o wrapper de centragem (vh-100 + d-flex);
   só garantimos que nunca cria scroll horizontal e que respira
   bem verticalmente em ecrãs baixos (telemóvel em paisagem) */
#loginForm {
  width: 100%;
  min-height: 100dvh;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#loginForm .col-md-4 {
  width: 100%;
  max-width: 400px;
}

/* Cartão de login */
#loginForm .card {
  border-radius: var(--bl-radius) !important;
  box-shadow: 0 1.5rem 3rem rgba(15, 35, 70, 0.12) !important;
  animation: bl-login-fade-in 0.5s ease-out;
}

#loginForm .card-body {
  padding: 1.75rem 1.5rem !important;
}

/* Logótipo */
#loginForm section.mt-2 {
  text-align: start;
  margin-bottom: 1rem !important;
}

#loginForm section.mt-2 img {
  max-width: 220px;
}

/* Mensagem de erro */
#errorMsg {
  border-radius: 0.6rem;
  font-size: 0.9rem;
  border: none;
  background-color: rgba(220, 53, 69, 0.1);
  color: #b3261e;
}

/* Labels */
#loginForm .form-label {
  color: var(--bl-navy);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}

/* Inputs e ícone de prefixo (input-group-text) */
#loginForm .input-group-text {
  background-color: rgba(25, 53, 105, 0.06);
  border: 1px solid rgba(25, 53, 105, 0.16);
  border-right: none;
  color: var(--bl-navy);
}

#loginForm .form-control {
  border: 1px solid rgba(25, 53, 105, 0.16);
  border-left: none;
  padding: 0.65rem 0.9rem;
  min-height: 44px; /* alvo de toque */
}

/* Quando o botão de mostrar/ocultar password vem a seguir ao
   input, o input não deve ter borda direita arredondada dupla */
#loginForm .input-group:has(#togglePassword) .form-control {
  border-right: none;
}

#loginForm .form-control:focus {
  border-color: var(--bl-navy);
  box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.18);
  z-index: 3;
}

/* Quando o grupo tem foco, o ícone/botão vizinhos acompanham a cor */
#loginForm .input-group:focus-within .input-group-text,
#loginForm .input-group:focus-within #togglePassword {
  border-color: var(--bl-navy);
}

/* Botão de mostrar/ocultar password */
#togglePassword {
  border: 1px solid rgba(25, 53, 105, 0.16);
  border-left: none;
  color: var(--bl-navy);
  background: #fff;
  min-height: 44px;
}

#togglePassword:hover {
  background: rgba(25, 53, 105, 0.06);
  color: var(--bl-navy);
}

#togglePassword:focus {
  box-shadow: none;
}

/* Link "Esqueceu a password?" */
#loginForm a[href="recovery-senha.html"] {
  color: var(--bl-navy);
  font-weight: 500;
  transition: color 0.2s ease;
}

#loginForm a[href="recovery-senha.html"]:hover {
  color: var(--bl-cyan);
  text-decoration: underline !important;
}

/* Botão "Entrar" — sobrepõe o estilo inline do HTML com a
   gradiente navy usada no resto do site (o !important aqui vence
   o inline porque é mais específico em prioridade de cascata) */
#loginBtn {
  background: linear-gradient(135deg, var(--bl-navy), var(--bl-navy-deep)) !important;
  border: none !important;
  border-radius: 0.7rem;
  font-weight: 600;
  min-height: 48px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#loginBtn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.5rem rgba(15, 35, 70, 0.25);
}

#loginBtn:disabled {
  opacity: 0.75;
  cursor: progress;
  transform: none;
}

/* Estado de "a autenticar…" — funciona se o login.js adicionar a
   classe .is-loading ao botão enquanto aguarda a resposta do
   /auth/login; se não usares essa classe, este bloco fica inativo
   e não tem efeito nenhum */
#loginBtn.is-loading #loginBtnText {
  visibility: hidden;
}

#loginBtn.is-loading::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  top: 50%;
  left: 50%;
  margin-top: -0.55rem;
  margin-left: -0.55rem;
  border: 0.15em solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bl-login-spin 0.7s linear infinite;
}

#loginBtn.is-loading {
  position: relative;
}

@keyframes bl-login-spin {
  to { transform: rotate(360deg); }
}

@keyframes bl-login-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #loginForm .card,
  #loginBtn.is-loading::after {
    animation: none;
  }
}

/* ============================================================
   2) RESPONSIVIDADE
   Só os ajustes que dependem da largura do ecrã, do menor para
   o maior. Sem breakpoint fixo só "para o Tab 6": o tablet de
   referência (800×1280) cai naturalmente na faixa 3 abaixo
   quando em retrato, e não precisa de regra própria porque o
   cartão já tem max-width definido no Bootstrap (.col-md-4).
   ============================================================ */

/* ---- ≤ 360px — telemóveis muito pequenos ----
   Ex.: iPhone SE, Android de entrada. Reduz o respiro interno do
   cartão e o tamanho do logótipo para nada colidir. */
@media (max-width: 360px) {
  #loginForm .card-body {
    padding: 1.5rem 1.1rem !important;
  }

  #loginForm section.mt-2 img {
    max-width: 170px;
  }

  #loginBtn {
    font-size: 0.95rem;
  }
}

/* ---- ≤ 420px e paisagem — telemóveis deitados ----
   Ecrã baixo: reduz o espaçamento vertical do formulário para o
   cartão inteiro caber sem cortar o botão "Entrar". */
@media (max-width: 700px) and (orientation: landscape) {
  #loginForm {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  #loginForm .card-body {
    padding: 1.25rem 1.5rem !important;
  }

  #loginForm section.mt-2 {
    margin-bottom: 0.75rem !important;
  }

  #loginForm section.mt-2 img {
    max-width: 150px;
  }
}

/* ---- ≥ 576px — tablets pequenos / Bootstrap "sm" ----
   Mais espaço horizontal: aumenta o respiro interno do cartão e
   o logótipo volta ao tamanho "normal" da secção 1. */
@media (min-width: 576px) {
  #loginForm .card-body {
    padding: 2.25rem 2rem !important;
  }
}

/* ---- 577px – 991px — tablets médios (inclui o Tab 6 em retrato) ----
   O cartão já não precisa de esticar: mantém-se confortável a
   400px de largura (herdado da secção 1), só se centra melhor
   verticalmente porque sobra mais altura de ecrã. */
@media (min-width: 577px) and (max-width: 991px) {
  #loginForm {
    align-items: center;
  }
}

/* ---- ≥ 992px — desktop / tablets em paisagem (inclui Tab 6 paisagem) ----
   Ecrã largo: acrescenta uma sombra ligeiramente mais suave por
   baixo do cartão, já que há mais espaço em torno dele para se
   notar a profundidade. */
@media (min-width: 992px) {
  #loginForm .card {
    box-shadow: 0 2rem 4rem rgba(15, 35, 70, 0.14) !important;
  }
}