/* =============================================================
   EIXO4 Theme · login (single column, brand acima do form)
   v0.23.1 — adaptado ao DOM real do Perfex 3.4 admin login:
     body > .authentication-form-wrapper >
       [.company-logo, .text-center (Entrar/Welcome), .tw-bg-white (form)]
   NAO mexe no DOM do form. CSS only + JS append safe.
============================================================= */

body, html { height: 100%; margin: 0; padding: 0; }

body.login,
body.login_admin,
body.app-login,
body.customers_login {
  font-family: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif !important;
  background:
    radial-gradient(ellipse 800px 500px at 80% 20%, rgba(252,184,20,0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 20% 80%, rgba(124,58,237,0.18), transparent 60%),
    linear-gradient(135deg, #0E1F3D 0%, #16264F 50%, #1E1B4B 100%) !important;
  background-attachment: fixed !important;
  color: #fff;
  margin: 0; padding: 60px 24px !important;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
body.login::before,
body.login_admin::before,
body.app-login::before,
body.customers_login::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.025'%3E%3Cpath d='M0 0h80v80H0z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

body.login > nav,
body.login > .navbar,
body.login > .login-page-footer,
body.login .login-page-bg-img,
body.login_admin > nav,
body.login_admin .login-page-bg-img,
/* Cliente login Perfex 3.4: hide nav top + footer copyright + h1 nativo */
body.customers_login > nav.navbar,
body.customers_login > nav.navbar.header,
body.customers_login > footer.footer,
body.customers_login .login-heading,
body.customers_login .navbar-default {
  display: none !important;
}

/* Esconde o aside antigo (caso o JS antigo ainda inserir) */
.eixo4-login-aside { display: none !important; }

/* Hide Perfex native company-logo + "Entrar/Welcome" header
   (substituidos pelo brand-top) */
body.login_admin .authentication-form-wrapper > .company-logo,
body.login_admin .authentication-form-wrapper > .text-center,
body.login .authentication-form-wrapper > .company-logo,
body.login .authentication-form-wrapper > .text-center,
body.app-login .authentication-form-wrapper > .company-logo,
body.app-login .authentication-form-wrapper > .text-center {
  display: none !important;
}

/* === BRAND TOP — adicionado via JS antes do .authentication-form-wrapper === */
.eixo4-login-brand-top {
  position: relative; z-index: 2;
  text-align: center;
  margin-bottom: 32px;
  max-width: 460px;
  width: 100%;
  flex-shrink: 0;
}
.eixo4-login-brand-top__logo {
  display: inline-flex; align-items: baseline;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 36px; letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 22px;
}
.eixo4-login-brand-top__logo strong {
  background: linear-gradient(135deg, #FCB814 0%, #F59E0B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eixo4-login-brand-top__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(252,184,20,.15);
  border: 1px solid rgba(252,184,20,.35);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: #FCB814;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 18px;
}
.eixo4-login-brand-top__title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 12px;
}
.eixo4-login-brand-top__title strong {
  background: linear-gradient(135deg, #FCB814 0%, #F59E0B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eixo4-login-brand-top__sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  margin: 0 auto 0;
  max-width: 420px;
}

/* === FORM WRAPPER (Perfex .authentication-form-wrapper) === */
body.login_admin .authentication-form-wrapper,
body.login .authentication-form-wrapper,
body.app-login .authentication-form-wrapper {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 460px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex-shrink: 0;
}

/* === CLIENT LOGIN (customers_login) ===
   DOM: body > #wrapper > #content > .container > .container > .row > .mtop40 >
        [.col-md-4.text-center > h1.login-heading (HIDDEN),
         .col-md-4.col-md-offset-4.col-sm-8.col-sm-offset-2 > form.login-form > .panel_s > .panel-body]
   Estrategia: tornar todo wrapper/container transparente + flex-friendly,
   e estilizar .panel_s como white card centered. */
body.customers_login #wrapper,
body.customers_login #content,
body.customers_login #wrapper > #content > .container,
body.customers_login #content > .container,
body.customers_login #content .container,
body.customers_login #content .container > .row,
body.customers_login #content .row,
body.customers_login #content .mtop40 {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  flex-shrink: 0;
}

/* Reset bootstrap col offsets pra permitir flex centering */
body.customers_login .col-md-4,
body.customers_login .col-md-offset-4,
body.customers_login .col-sm-8,
body.customers_login .col-sm-offset-2 {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
}

/* O panel_s + panel-body do cliente vira o white card */
body.customers_login form.login-form {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
body.customers_login form.login-form .panel_s {
  background: #fff !important;
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 36px 36px 32px !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30) !important;
  border: 0 !important;
}
body.customers_login form.login-form .panel_s .panel-body {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Link "Esqueceu a Senha?" centralizado embaixo do botao Entrar */
body.customers_login .panel-body > .tw-text-center {
  text-align: center !important;
  margin-top: 14px !important;
}
body.customers_login .panel-body > .tw-text-center > a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #B45309 !important;
  text-decoration: none !important;
}
body.customers_login .panel-body > .tw-text-center > a:hover {
  color: #92400E !important;
  text-decoration: underline !important;
}

/* Override Tailwind padding-top no wrapper (era pt-24) */
body.login_admin .authentication-form-wrapper.tw-pt-24,
body.login .authentication-form-wrapper.tw-pt-24,
body.app-login .authentication-form-wrapper.tw-pt-24 {
  padding-top: 0 !important;
}

/* === FORM CARD (a div tw-bg-white interna que envolve o form) === */
body.login_admin .authentication-form-wrapper > .tw-bg-white,
body.login .authentication-form-wrapper > .tw-bg-white,
body.app-login .authentication-form-wrapper > .tw-bg-white,
body.login_admin .authentication-form-wrapper > div:has(> form),
body.login .authentication-form-wrapper > div:has(> form),
body.app-login .authentication-form-wrapper > div:has(> form) {
  background: #fff !important;
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 36px 36px 32px !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30) !important;
  border: 0 !important;
}

/* Reset wrapping panels do Perfex */
body.login .panel,
body.login .panel-default,
body.login .panel-body,
body.login .panel-heading,
body.login_admin .panel,
body.login_admin .panel-default,
body.app-login .panel {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Inputs */
body.login input.form-control,
body.login_admin input.form-control,
body.app-login input.form-control,
body.customers_login input.form-control,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.login_admin input[type="text"],
body.login_admin input[type="email"],
body.login_admin input[type="password"],
body.customers_login input[type="text"],
body.customers_login input[type="email"],
body.customers_login input[type="password"] {
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 14.5px !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0F172A !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
}
body.login input.form-control:focus,
body.login_admin input.form-control:focus,
body.app-login input.form-control:focus,
body.customers_login input.form-control:focus {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.12) !important;
  outline: none !important;
}

body.login .form-group,
body.login_admin .form-group,
body.app-login .form-group,
body.customers_login .form-group {
  margin-bottom: 14px !important;
  position: relative !important;
}
body.login .form-group label,
body.login_admin .form-group label,
body.app-login .form-group label,
body.customers_login .form-group label,
body.login .form-group label.control-label,
body.login_admin .form-group label.control-label,
body.customers_login .form-group label.control-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Perfex 3.4 envolve label + "Senha Esquecida?" num <span class="tw-inline-flex
   tw-justify-between tw-items-end tw-w-full">. Garante layout flex correto. */
body.login_admin .form-group span.tw-inline-flex,
body.login .form-group span.tw-inline-flex,
body.app-login .form-group span.tw-inline-flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 6px !important;
  gap: 10px;
}
body.login_admin .form-group span.tw-inline-flex > label,
body.login .form-group span.tw-inline-flex > label,
body.app-login .form-group span.tw-inline-flex > label {
  margin: 0 !important;
  flex: 0 0 auto !important;
}
body.login_admin .form-group span.tw-inline-flex > a,
body.login .form-group span.tw-inline-flex > a,
body.app-login .form-group span.tw-inline-flex > a {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #B45309 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  flex: 0 0 auto !important;
}

/* Compat: forgot-password fora do span */
body.login .form-group a.pull-right,
body.login_admin .form-group a.pull-right,
body.login .form-group .pull-right,
body.login_admin .form-group .pull-right {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  float: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #B45309 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  z-index: 2;
}

/* Submit gradient amber */
body.login .btn-primary,
body.login_admin .btn-primary,
body.app-login .btn-primary,
body.customers_login .btn-primary,
body.login button[type="submit"],
body.login_admin button[type="submit"],
body.app-login button[type="submit"],
body.customers_login button[type="submit"] {
  width: 100% !important;
  height: 50px !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #FCB814 0%, #E07B00 100%) !important;
  color: #0E1F3D !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  box-shadow: 0 8px 24px rgba(245,158,11,.30) !important;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s !important;
  margin-top: 8px !important;
  text-transform: none !important;
}
body.login .btn-primary:hover,
body.login_admin .btn-primary:hover,
body.app-login .btn-primary:hover,
body.customers_login .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(245,158,11,.45) !important;
}

body.login .checkbox label,
body.login_admin .checkbox label,
body.app-login .checkbox label,
body.customers_login .checkbox label {
  font-size: 13px !important;
  color: #475569 !important;
  display: flex !important; align-items: center; gap: 8px;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}
body.login input[type="checkbox"],
body.login_admin input[type="checkbox"],
body.customers_login input[type="checkbox"] {
  width: 17px !important; height: 17px !important;
  accent-color: #F59E0B;
  cursor: pointer;
  margin: 0 !important;
}

body.login a, body.login_admin a, body.app-login a, body.customers_login a {
  color: #B45309;
  text-decoration: none;
}
body.login a:hover, body.login_admin a:hover, body.app-login a:hover, body.customers_login a:hover {
  text-decoration: underline;
}

body.login .login-logo, body.login_admin .login-logo, body.app-login .login-logo, body.customers_login .login-logo { display: none !important; }

body.login .alert, body.login_admin .alert, body.app-login .alert, body.customers_login .alert {
  border-radius: 10px !important;
  border: 1px solid !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  margin-bottom: 14px !important;
}
body.login .alert-danger, body.login_admin .alert-danger, body.app-login .alert-danger, body.customers_login .alert-danger {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #B91C1C !important;
}
body.login .alert-success, body.login_admin .alert-success, body.app-login .alert-success, body.customers_login .alert-success {
  background: #F0FDF4 !important;
  border-color: #BBF7D0 !important;
  color: #15803D !important;
}

/* Footer pequeno embaixo */
.eixo4-login-foot {
  position: relative; z-index: 2;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255,255,255,.50);
  margin-top: 28px;
  max-width: 460px;
  width: 100%;
  flex-shrink: 0;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.eixo4-login-foot a { color: rgba(255,255,255,.78) !important; font-size: 11.5px !important; font-weight: 600 !important; }
.eixo4-login-foot a:hover { color: #FCB814 !important; }

/* Mobile compact */
@media (max-width: 600px) {
  body.login, body.login_admin, body.app-login, body.customers_login {
    padding: 30px 16px !important;
    align-items: stretch !important;
  }
  .eixo4-login-brand-top__logo { font-size: 28px; margin-bottom: 16px; }
  .eixo4-login-brand-top__title { font-size: 24px; }
  .eixo4-login-brand-top__sub { font-size: 13.5px; }
  body.login_admin .authentication-form-wrapper > .tw-bg-white,
  body.login .authentication-form-wrapper > .tw-bg-white,
  body.customers_login form.login-form .panel_s {
    padding: 24px 22px !important;
    border-radius: 12px !important;
  }
}