/**
 * Projeto: RGLog CAOA
 * Arquivo: login.css
 * Autor: Djeferson Capelli
 * Versão: 1.0.0
 * Descrição: Página de login — layout centralizado com card elevado
 */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  /* Fundo CLARO — destaca o card azul que contém o logo */
  background:
    radial-gradient(ellipse at top left, rgba(0, 61, 166, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(254, 113, 35, 0.06) 0%, transparent 55%),
    var(--c-bg);
}
/* Card AZUL escuro RGLog — engloba logo + formulário */
.login-card {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 60px rgba(0, 61, 166, 0.30), 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.login-card .card-body { color: #ffffff; }
.login-card h1, .login-card h2 { color: #ffffff !important; }
.login-card p, .login-card label, .login-card .field-label,
.login-card .form-label, .login-card .text-muted {
  color: rgba(255, 255, 255, 0.80) !important;
}
.login-card .login-brand h1 { color: rgba(255, 255, 255, 0.92) !important; }
.login-card .login-brand p  { color: rgba(255, 255, 255, 0.65) !important; }

/* Inputs dentro do card: fundo branco semi-translúcido pra contrastar
   e manter usabilidade (texto digitado em escuro) */
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"],
.login-card .input,
.login-card .form-control {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.login-card input:focus,
.login-card .input:focus {
  outline: 2px solid var(--c-accent) !important;
  outline-offset: -1px;
  border-color: var(--c-accent) !important;
}
.login-card input::placeholder { color: #94a3b8; }

/* Alerts dentro do card — fundo translúcido pra não estourar */
.login-card .alert {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}
.login-card .alert-danger {
  background: rgba(248, 113, 113, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.40) !important;
}

/* Botão de tema no canto — fundo branco translúcido suave no fundo claro */
.login-theme-toggle {
  background: rgba(0, 61, 166, 0.08) !important;
  color: var(--c-primary) !important;
  border-color: rgba(0, 61, 166, 0.18) !important;
}
.login-theme-toggle:hover {
  background: rgba(0, 61, 166, 0.16) !important;
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.login-card .card-body { padding: 2rem; }

.login-brand {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 1.75rem;
}
.login-brand-caoa {
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-brand-caoa .caoa-logo { display: block; }
.login-brand h1 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.login-brand p {
  font-size: 13px;
  color: var(--c-text-soft);
  margin: 0;
}

.login-card .form-actions {
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.login-theme-toggle {
  position: fixed;
  top: 16px; right: 16px;
}

/* ── Links abaixo do form ─────────────────────────────────────────── */
.login-footer-links {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--c-text-muted);
}
.login-footer-links a {
  color: var(--c-accent);
  text-decoration: none;
  margin: 0 4px;
}
.login-footer-links a:hover { text-decoration: underline; }
.login-footer-links .sep { opacity: 0.4; margin: 0 2px; }