/* login.css - estilos modernos para a página de login */

@keyframes v12AutofillDetect { from {} to {} }
input:-webkit-autofill { animation-name: v12AutofillDetect; animation-duration: 1ms; }

:root{
  --bg: linear-gradient(135deg,#f6f7fb 0%, #eef2f6 100%);
  --card-bg: #ffffff;
  --accent: #111;
  --muted: #7a7a85;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(16,24,40,0.08);
}

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

html,body{
  height:100%;
  margin:0;
  padding:0;
}
body{
  background: var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.login-main{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.login-card{
  max-width:420px;
  width:100%;
  margin:0 auto;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:6px}
.brand-logo{width:72px;height:72px;object-fit:contain;border-radius:12px}
.brand h1{margin:0;font-size:20px;color:var(--accent)}
.brand .muted{margin:0;color:var(--muted);font-size:13px;text-align:center}

.login-form{display:flex;flex-direction:column;gap:12px}
.field label{display:block;font-size:13px;color:#333;margin-bottom:6px}
.input-wrap{position:relative;width:100%;}
.input-wrap input{width:100%;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid #e6e9ef;font-size:14px;outline:none;transition:box-shadow .15s, border-color .15s}
.input-wrap input:focus{box-shadow:0 6px 18px rgba(17,24,39,0.06);border-color:#cfcfe6}
.input-password .btn-icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:8px;border:none;background:transparent;cursor:pointer}

/* Toggle mostrar/ocultar senha com SVGs */
.input-password { position: relative; }
.toggle-pass {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
}
.toggle-pass:focus { outline: 2px solid rgba(17,24,39,0.08); }
.toggle-pass svg { display: block; pointer-events: none; }

/* por padrão mostra o ícone do olho e oculta o riscado */
.toggle-pass .icon-eye-off { display: none; }

/* quando aria-pressed=true (senha visível), alterna ícones */
.toggle-pass[aria-pressed="true"] .icon-eye { display: none; }
.toggle-pass[aria-pressed="true"] .icon-eye-off { display: block; }

/* pequeno hover para dar feedback */
.toggle-pass:hover { color: #111; background: rgba(0,0,0,0.02); }

.row.between{display:flex;justify-content:space-between;align-items:center}
.remember{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.muted.small{color:var(--muted);font-size:13px}
.actions{display:flex;gap:8px}

.btn-primary{background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;border:none;font-weight:600}
.btn-primary:hover{opacity:0.95}

.status{margin-top:6px;color:#d32f2f;font-size:13px;min-height:18px}

.login-footer{margin-top:8px;text-align:center;color:var(--muted)}

@media (max-width:520px){
  .login-main{padding:16px;align-items:flex-start;padding-top:40px;}
  .login-card{margin:0;padding:22px 18px;}
  .brand-logo{width:56px;height:56px;}
}

/* Dark-mode adjustments specifically for the login page (stronger specificity to override other styles) */
body.dark .login-card {
  background: #151517 !important;
  color: #e6e6e6 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6) !important;
}

body.dark .login-card .brand h1,
body.dark .login-card .brand .muted,
body.dark .login-card .brand p,
body.dark .login-card .brand {
  color: #e6e6e6 !important;
}

body.dark .login-card .muted {
  color: #b8b8b8 !important;
}

/* Inputs inside the login card (força fundo escuro e texto claro) */
body.dark .login-card .input-wrap input,
body.dark .login-card .input-wrap textarea,
body.dark .login-card .input-wrap select,
body.dark .login-card input,
body.dark .login-card textarea,
body.dark .login-card select {
  background: #171717 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #e6e6e6 !important;
}
body.dark .login-card .input-wrap input::placeholder,
body.dark .login-card .input-wrap textarea::placeholder,
body.dark .login-card input::placeholder {
  color: rgba(230,230,230,0.28) !important;
}

/* Corrige estilo de autofill do Chrome/Safari para inputs dentro do login-card em dark mode */
body.dark .login-card input:-webkit-autofill,
body.dark .login-card input:-webkit-autofill:hover,
body.dark .login-card input:-webkit-autofill:focus,
body.dark .login-card textarea:-webkit-autofill,
body.dark .login-card textarea:-webkit-autofill:hover,
body.dark .login-card textarea:-webkit-autofill:focus,
body.dark .login-card select:-webkit-autofill,
body.dark .login-card select:-webkit-autofill:hover,
body.dark .login-card select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #171717 inset !important;
  box-shadow: 0 0 0 1000px #171717 inset !important;
  -webkit-text-fill-color: #e6e6e6 !important;
}

/* Firefox autofill (uses :-moz-autofill) */
body.dark .login-card input:-moz-autofill,
body.dark .login-card textarea:-moz-autofill,
body.dark .login-card select:-moz-autofill {
  box-shadow: 0 0 0 1000px #171717 inset !important;
  -moz-text-fill-color: #e6e6e6 !important;
}

/* Toggle/text color in the login card header */
body.dark .login-theme-toggle .toggle,
body.dark .login-theme-toggle .label-text,
body.dark .login-theme-toggle {
  color: #cfcfcf !important;
}

/* Buttons: garantir contraste no dark mode */
body.dark .login-card .btn-primary {
  background: #000 !important;
  color: #fff !important;
  border: 0 !important;
}
body.dark .login-card .btn {
  background: rgba(255,255,255,0.04) !important;
  color: #e6e6e6 !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* footer e links */
body.dark .login-footer,
body.dark .login-card a,
body.dark .login-card .muted,
body.dark .login-card .small {
  color: #b8b8b8 !important;
}

/* pequeno ajuste para o olhinho ao lado do input */
body.dark .login-card .input-password .btn-icon { color: #cfcfcf !important; background: rgba(255,255,255,0.02) !important; }