/* ============================================================================
   MitLoja Enterprise — Login (P0.4). DS3/tokens compartilhados com o painel.
   Restila o login SEM tocar no contrato de auth (#form-login → autenticar.php,
   inputs usuario/senha/salvar). Carregado por caminho ABSOLUTO no
   sistema/index.php para nunca cair em path relativo quebrado.

   P0 WAR ROOM 2026-05-29 — fix de altura e alinhamento:
   - Reset html/body pra evitar margens do bootstrap puxarem o layout.
   - .mte-login agora tem altura FIXA 100vh (era só min-height — sem html/body
     reset, o aside ficava sem altura e o form centralizado parecia "muito
     abaixo" do banner).
   - Aside trocou justify-content: space-between (gerava espaco vazio enorme
     entre brand/pitch/meta) por flexbox normal com pitch centralizado.
   ============================================================================ */
@import url("/assets/css/tokens/index.css");

/* P0 war-room: garante altura cheia pro grid funcionar */
html.mte-login-html, html.mte-login-html body { height: 100%; margin: 0; padding: 0; }
body.mte-login { margin: 0; min-height: 100vh; }

.mte-login {
  min-height: 100vh; height: 100vh; display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  font-family: var(--mte-font, 'Inter', sans-serif);
  background: var(--mte-bg-app, #0a0d13); color: var(--mte-text, #eef2f8);
}
.mte-login__aside {
  position: relative; overflow: hidden; padding: clamp(28px, 5vw, 64px);
  display: flex; flex-direction: column; gap: 24px;
  /* P0 war-room: pitch ocupa o centro, brand topo, meta rodape — sem
     justify-content:space-between que gerava espaco vazio gigante. */
  color: #fff;
  background:
    radial-gradient(780px 420px at 12% -10%, rgba(47,102,246,.42), transparent 60%),
    radial-gradient(680px 420px at 100% 110%, rgba(168,85,247,.34), transparent 55%),
    linear-gradient(135deg, #1f2a44 0%, #0c1020 100%);
}
.mte-login__pitch { margin-top: auto; margin-bottom: auto; }
.mte-login__meta { margin-top: auto; }
.mte-login__brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.15rem; }
.mte-login__brand img { height: 40px; width: auto; border-radius: 8px; }
.mte-login__pitch h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.mte-login__pitch p { color: rgba(255,255,255,.78); font-size: 1rem; max-width: 30ch; line-height: 1.5; }
.mte-login__meta { font-size: .8rem; color: rgba(255,255,255,.55); }

.mte-login__main {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 5vw, 56px); background: var(--mte-bg-app, #0a0d13);
  /* P0 war-room: garante altura total da coluna pra centralizar verticalmente */
  min-height: 100vh; box-sizing: border-box;
}
.mte-login__card {
  width: 100%; max-width: 400px;
  background: var(--mte-bg-glass, rgba(20,26,36,.66));
  -webkit-backdrop-filter: var(--mte-surface-glass-blur, saturate(180%) blur(16px));
  backdrop-filter: var(--mte-surface-glass-blur, saturate(180%) blur(16px));
  border: 1px solid var(--mte-border, rgba(255,255,255,.08));
  border-radius: var(--mte-r-lg, 18px);
  box-shadow: var(--mte-sh-xl, 0 36px 72px -18px rgba(0,0,0,.78));
  padding: clamp(26px, 4vw, 40px);
  animation: mte-login-rise .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mte-login-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mte-login__card .logo-login { max-width: 168px; margin: 0 auto 8px; display: block; }
.mte-login__card h3 { text-align: center; font-size: 1.4rem; font-weight: 800; margin: 4px 0 22px; letter-spacing: -.01em; }

/* restila os campos Bootstrap existentes (sem renomear nada) */
.mte-login .form-label { font-size: .8rem; font-weight: 600; color: var(--mte-text-soft, #aab4c5); margin-bottom: 6px; display: block; }
.mte-login .form-control {
  width: 100%; padding: 12px 14px; font-size: .95rem;
  background: var(--mte-bg-surface, #131922); color: var(--mte-text, #eef2f8);
  border: 1.5px solid var(--mte-border, rgba(255,255,255,.1)); border-radius: var(--mte-r-sm, 10px);
  outline: 0; transition: border-color .15s, box-shadow .15s;
}
.mte-login .form-control::placeholder { color: var(--mte-text-muted, #6c7689); }
.mte-login .form-control:focus { border-color: var(--mte-brand, #2f66f6); box-shadow: var(--mte-ring-brand, 0 0 0 3px rgba(47,102,246,.28)); }
.mte-login .mb-3 { margin-bottom: 16px; }
.mte-login .form-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--mte-text-soft, #aab4c5); }
.mte-login .form-check-input { width: 16px; height: 16px; accent-color: var(--mte-brand, #2f66f6); }
.mte-login .btn-primary,
.mte-login button[type="submit"] {
  width: 100%; padding: 13px; border: 0; cursor: pointer;
  font-size: .98rem; font-weight: 700; color: #fff;
  border-radius: var(--mte-r-sm, 10px);
  background: var(--mte-grad-brand, linear-gradient(135deg,#2f66f6,#7c5cff));
  transition: transform .14s, filter .14s;
}
.mte-login button[type="submit"]:hover { filter: brightness(1.06); }
.mte-login button[type="submit"]:active { transform: scale(.985); }
.mte-login button[type="submit"][data-loading="1"] { opacity: .7; pointer-events: none; }
.mte-login a { color: var(--mte-brand, #5b8def); text-decoration: none; font-size: .85rem; }
.mte-login a:hover { text-decoration: underline; }
.mte-login .text-center { text-align: center; }
.mte-login .mt-3 { margin-top: 16px; }
.mte-login .mb-4 { margin-bottom: 20px; }

@media (max-width: 880px) {
  .mte-login { grid-template-columns: 1fr; }
  .mte-login__aside { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mte-login__card { animation: none; }
  .mte-login button[type="submit"] { transition: none; }
}