/* Tattoofy - restyle da tela de login do Frappe, no estilo Asaas mas preto e
   branco. Escopo: so /login (body[data-path="login"]). Nao mexe no template
   nem no login.js. !important vence os seletores profundos do login.bundle.css. */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap");

body[data-path="login"] {
  --tt-bg: #fcfcfc;
  --tt-text: #1a1a1a;
  --tt-heading: #111111;
  --tt-label: #333333;
  --tt-muted: #737373;
  --tt-border: #d8d8d8;
  --tt-border-focus: #111111;
  background: var(--tt-bg) !important;
  color: var(--tt-text) !important;
  min-height: 100vh;
}

/* tira navbar / rodape padrao do site */
body[data-path="login"] header,
body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] .footer,
body[data-path="login"] footer {
  display: none !important;
}

body[data-path="login"] .page_content,
body[data-path="login"] main,
body[data-path="login"] .main-section,
body[data-path="login"] .page-container {
  background: transparent !important;
}

body[data-path="login"] section.for-login,
body[data-path="login"] section.for-forgot,
body[data-path="login"] section.for-signup,
body[data-path="login"] section.for-email-login,
body[data-path="login"] section.for-login-with-email-link {
  max-width: 424px;
  margin: 0 auto;
  padding: 9vh 22px 48px;
}

/* ---------- topo: so o nome "Tattoofy" (estilo wordmark tipo Asaas) ---------- */
body[data-path="login"] .page-card-head {
  padding: 0 0 4px !important;
  text-align: center;
}

/* esconde o icone T e o "Entrar em Tattoofy" - fica so o wordmark */
body[data-path="login"] .page-card-head img.app-logo,
body[data-path="login"] .page-card-head h4 {
  display: none !important;
}

body[data-path="login"] .page-card-head::before {
  content: "Tattoofy";
  display: block;
  text-align: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -1px;
  color: var(--tt-heading);
}

/* ---------- cartao: sem borda, sem sombra, no branco ---------- */
body[data-path="login"] .login-content.page-card,
body[data-path="login"] .for-login .page-card,
body[data-path="login"] .for-forgot .page-card,
body[data-path="login"] .for-login-with-email-link .page-card,
body[data-path="login"] .for-signup .page-card {
  padding: 28px 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

body[data-path="login"] .page-card form {
  max-width: 100% !important;
  margin: 0 !important;
}

body[data-path="login"] .page-card form .form-group {
  margin-bottom: 22px !important;
}

/* ---------- labels: esconde a do Frappe (sr-only) e injeta as nossas ---------- */
body[data-path="login"] .page-card .page-card-body .form-label {
  display: none !important;
}

body[data-path="login"] .page-card .page-card-body .form-group {
  position: relative;
}

body[data-path="login"] .form-group:has(.email-field)::before,
body[data-path="login"] .form-group:has(.password-field)::before {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--tt-label);
}

body[data-path="login"] .form-group:has(.email-field)::before {
  content: "E-mail";
}

body[data-path="login"] .form-group:has(.password-field)::before {
  content: "Senha";
}

/* ---------- inputs (Asaas: brancos, borda visivel, cantos bem arredondados) ---------- */
body[data-path="login"] .page-card .page-card-body input[type="text"],
body[data-path="login"] .page-card .page-card-body input[type="email"],
body[data-path="login"] .page-card .page-card-body input[type="password"],
body[data-path="login"] .form-control {
  height: 54px !important;
  padding: 0 18px !important;
  margin-bottom: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: 14px !important;
  color: var(--tt-text) !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body[data-path="login"] .password-field input[type="password"],
body[data-path="login"] .password-field input[type="text"] {
  padding-right: 48px !important;
}

body[data-path="login"] .page-card .page-card-body ::placeholder,
body[data-path="login"] .form-control::placeholder {
  color: var(--tt-muted) !important;
  opacity: 1;
}

body[data-path="login"] .form-control:focus {
  border-color: var(--tt-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
  outline: none;
}

/* esconde os icones de envelope/cadeado (Asaas nao tem) */
body[data-path="login"] .page-card .page-card-body .field-icon,
body[data-path="login"] .field-icon {
  display: none !important;
}

/* olho de mostrar senha (vira icone, estilo Asaas) */
body[data-path="login"] .page-card .page-card-body .toggle-password,
body[data-path="login"] .toggle-password {
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px;
  height: 20px;
  font-size: 0 !important;
  color: transparent !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

body[data-path="login"] .toggle-password:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* ---------- "esqueceu a senha?" escondido ----------
   Sem SMTP configurado o reset por e-mail nao funciona (o Frappe so diz que
   "enviou"). Reset e manual por enquanto; a pessoa logada troca a senha em
   Configuracoes. Reexibir aqui quando tiver conta de e-mail de saida. */
body[data-path="login"] .page-card .page-card-body .forgot-password-message {
  display: none !important;
  text-align: left !important;
  margin: -6px 0 0 !important;
  line-height: 1.2 !important;
}

body[data-path="login"] .page-card .page-card-body .forgot-password-message > * {
  color: var(--tt-text) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

body[data-path="login"] .page-card .page-card-body .forgot-password-message a:hover {
  color: #000 !important;
}

/* ---------- botao principal (Asaas: solido, pill, largura total) ---------- */
body[data-path="login"] .page-card .page-card-actions {
  margin-top: 10px !important;
}

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-forgot,
body[data-path="login"] .btn-primary,
body[data-path="login"] .btn-login-with-email-link {
  height: 56px !important;
  background: #141414 !important;
  border: 1px solid #141414 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease, transform 0.05s ease;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-forgot:hover,
body[data-path="login"] .btn-primary:hover,
body[data-path="login"] .btn-login-with-email-link:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

body[data-path="login"] .btn-login:active {
  transform: translateY(1px);
}

/* ---------- "ou" + entrar com link de e-mail (secundario, discreto) ---------- */
body[data-path="login"] .page-card .page-card-body .social-logins {
  margin-top: 4px !important;
}

body[data-path="login"] .page-card .page-card-body .login-divider {
  margin: 20px 0 14px !important;
  color: var(--tt-muted) !important;
  font-size: 13px !important;
}

body[data-path="login"] .page-card .page-card-body .btn-login-option,
body[data-path="login"] .btn-login-option {
  height: 52px !important;
  background: #ffffff !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: 999px !important;
  color: var(--tt-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  text-transform: none !important;
  box-shadow: none !important;
}

body[data-path="login"] .page-card .page-card-body .btn-login-option:hover,
body[data-path="login"] .btn-login-option:hover {
  background: #f4f4f4 !important;
  border-color: #111 !important;
  color: #000 !important;
}

/* ---------- rodape (cadastro), se aparecer ---------- */
body[data-path="login"] .for-login .sign-up-message,
body[data-path="login"] .sign-up-message {
  margin-top: 26px !important;
  text-align: center;
  color: var(--tt-muted) !important;
  font-size: 14px !important;
}

body[data-path="login"] .sign-up-message a {
  color: var(--tt-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

body[data-path="login"] .modal-content {
  color: #1a1a1a;
}