/* --- Gvendi Mail: Modernização Visual (Matched to Gvendi App) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 1. VARIÁVEIS DO APP (ZINC THEME) */
:root {
  --app-bg: #09090b;       /* Zinc 950 */
  --shell-bg: #18181b;     /* Zinc 900 */
  --border-color: #27272a; /* Zinc 800 */
  --text-main: #f4f4f5;    /* Zinc 100 */
  --text-muted: #71717a;   /* Zinc 400 */
  --primary: #3b82f6;      /* Blue 500 */
  --primary-hover: #2563eb;/* Blue 600 */
  --font-family: 'Inter', sans-serif;
}

/* 2. BACKGROUND ANIMADO (Como no App Login.tsx) */
body.task-login {
  background-color: var(--app-bg) !important;
  font-family: var(--font-family) !important;
  margin: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  position: relative;
}

body.task-login::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 50%;
  filter: blur(160px);
  z-index: 0;
  animation: pulse-glow 8s infinite alternate;
}

@keyframes pulse-glow {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.1); opacity: 0.8; }
}

/* 3. CARD DE LOGIN (O Shell do App) */
.welcome-inner {
  background: var(--shell-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  padding: 48px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  max-width: 480px !important;
  width: 90% !important;
  position: relative !important;
  z-index: 10 !important;
  color: var(--text-main) !important;
}

/* 4. BRANDING E LOGO */
.welcome-inner h2 {
  display: none !important;
}

#logo {
  display: block !important;
  margin: 0 auto 40px auto !important;
  max-width: 300px !important;
  height: auto !important;
  filter: drop-shadow(0 0 15px rgba(37,99,235,0.1));
}

/* 5. FORMULÁRIO E TABELA */
#login-form {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#login-form table, #login-form tbody, #login-form tr, #login-form td {
  display: block !important;
  width: 100% !important;
  border: none !important;
}

/* Esconde a coluna de títulos (Usuário/Senha), usaremos os placeholders ou ícones */
#login-form td.title {
  display: none !important;
}

/* Container do Input + Ícone */
.input-group {
  display: flex !important;
  background: rgba(9, 9, 11, 0.5) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  align-items: center !important;
}

.input-group:focus-within {
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
  background: var(--app-bg) !important;
}

/* ÍCONES (Ajuste de tamanho solicitado) */
.input-group-prepend {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 20px !important;
}

.input-group-text {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-muted) !important;
}

.input-group-text i.icon {
  font-size: 18px !important; /* Tamanho corrigido */
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  display: block !important;
}

/* O INPUT REAL */
#login-form .form-control {
  background: transparent !important;
  border: none !important;
  color: var(--text-main) !important;
  padding: 18px 20px 18px 12px !important; /* Espaçamento ajustado para o ícone no lado */
  font-size: 14px !important;
  font-weight: 600 !important;
  height: auto !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 6. BOTÃO DE LOGIN (High Contrast) */
#rcmloginsubmit.button.mainaction.submit {
  background-color: var(--text-main) !important;
  color: var(--app-bg) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 18px !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  width: 100% !important;
  margin-top: 10px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#rcmloginsubmit:hover {
  background-color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2) !important;
}

/* 7. RODAPÉ */
#login-footer {
  margin-top: 30px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--border-color) !important;
  text-align: center !important;
  color: var(--text-muted) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

#login-footer a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
}

#login-footer a:hover {
  color: var(--text-main) !important;
}

/* 8. INTERFACE INTERNA */
#layout > .header { background-color: var(--app-bg) !important; border-bottom: 1px solid var(--border-color) !important; }
#layout-sidebar { background-color: var(--app-bg) !important; border-right: 1px solid var(--border-color) !important; }
#layout-list { background-color: var(--app-bg) !important; }
.messagelist tr.selected { background-color: rgba(59, 130, 246, 0.1) !important; }