/* ==========================================================
   EASY LOGIN — layout completo da tela de autenticação
   backend/easy/static/css/easy_login.css

   Arquivo standalone — não depende de easy_geral.css.
   A login page tem estrutura própria, diferente da área autenticada.
========================================================== */

/* ─── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.axys-login {
  color: #071019;
  background: #fff;
}

a { color: inherit; text-decoration: none; }

/* ─── Shell: grid 2 colunas ───────────────────────────── */
.login-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 44% 56%;
  overflow: hidden;
}

/* ─── Painel esquerdo ─────────────────────────────────── */
.login-left {
  position: relative;
  z-index: 2;
  padding: 32px 5vw 20px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #fff;
  overflow-y: auto;
}

/* Wrapper que centraliza verticalmente o bloco brand + form */
.login-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── Brand ───────────────────────────────────────────── */
.brand {
  text-align: center;
  margin-bottom: 36px;
}

.brand img {
  width: 160px;
  max-width: 70%;
  display: block;
  margin: 0 auto 12px;
}

.brand p {
  margin: 0;
  color: #516176;
  font-size: 15px;
}

/* ─── Alertas (logout / erro) ─────────────────────────── */
.login-alert {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 16px;
}

.login-alert-info {
  background: #fde8e8;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}

.login-alert-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  margin-top: 4px;
}

.login-alert-success {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}

.ae-hidden { display: none; }

/* ─── Formulário ──────────────────────────────────────── */
.login-form {
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
}

.login-title {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -.6px;
  text-align: center;
}

.login-title span { color: #168cff; }

.login-subtitle {
  text-align: center;
  margin: 0 0 22px;
  color: #344154;
  font-size: 14px;
}

.form-group { margin-bottom: 12px; }

.form-group label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: #53637a;
  margin-bottom: 6px;
}

.input-wrap { position: relative; }

.input-wrap input {
  width: 100%;
  height: 42px;
  border: 1px solid #cbd6e4;
  border-radius: 6px;
  background: #fff;
  padding: 0 42px 0 12px;
  color: #071019;
  font-size: 14px;
  outline: none;
  transition: .18s ease;
}

.input-wrap input:focus {
  border-color: #168cff;
  box-shadow: 0 0 0 3px rgba(22, 140, 255, .14);
}

.input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
}

/* ─── Botão principal ─────────────────────────────────── */
.login-button {
  width: 100%;
  height: 44px;
  margin-top: 10px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #0b67ff, #16b9ff);
  box-shadow: 0 12px 28px rgba(22, 140, 255, .22);
  transition: .15s ease;
}

.login-button:hover { box-shadow: 0 16px 36px rgba(22, 140, 255, .32); }

.recover {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: #006dff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

/* ─── Footer da login ─────────────────────────────────── */
.login-footer {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #53637a;
  font-size: 13px;
}

.login-footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.login-footer a {
  color: #006dff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.login-footer-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.login-footer-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d1dae6;
  color: #53637a;
  background: #fff;
  transition: .15s;
}

.login-footer-icons a:hover {
  border-color: #168cff;
  color: #168cff;
  box-shadow: 0 10px 24px rgba(22, 140, 255, .16);
}

/* ─── Painel direito (fundo + ilustração via CSS) ─────── */
.login-right {
  position: relative;
  height: 100vh;
  background:
    var(--axys-login-page-image, url("/hub/static/img/pages/login_page.png")) 95% 89% / auto 103% no-repeat,
    linear-gradient(160deg, #0d1b35 0%, #071019 55%, #040d18 100%);
  overflow: hidden;
  clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Tagline sobreposta no painel direito */
.rp-tagline {
  position: absolute;
  top: 35%;
  left: 15%;
  right: 20%;
  text-align: left;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.5px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(1, 10, 22, .95);
}

.rp-tagline p { margin: 0; }
.rp-tagline span { color: #168cff; }

/* ─── Responsivo ──────────────────────────────────────── */
@media (max-width: 980px) {
  html, body { overflow: auto; }

  .login-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .login-left {
    height: auto;
    min-height: 100vh;
    padding: 48px 24px 88px;
  }

  .login-right { display: none; }
}