/* ============================================
   CSS Customizado para Página de Login
   Baseado no design do App Mobile
   Paleta de Cores: #1B5E20 (Verde Primário)
   ============================================ */

/* Reset e Configurações Gerais */
* {
    box-sizing: border-box;
}

/* Sobrescreve estilos do AdminLTE */
body.login-page,
body.hold-transition.login-page,
.login-page {
    background-color: #F5F5F5 !important;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    background-image: none !important;
    overflow: hidden !important;
}

/* ============================================
   WRAPPER - DIVISÃO DA TELA AO MEIO
   ============================================ */
.login-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

/* ============================================
   LADO ESQUERDO - IMAGEM DE FUNDO
   ============================================ */
.login-left-side {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #1B5E20; /* Cor de fallback caso a imagem não carregue */
}

/* ============================================
   TEXTO DE BOAS-VINDAS - PARTE SUPERIOR
   ============================================ */
.login-welcome-text {
    position: absolute;
    top: 50px; /* Posicionado mais acima */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2; /* Acima do overlay e da imagem */
    color: #FFFFFF;
    width: 100%;
    padding: 0 40px;
}

.welcome-title {
    font-size: 64px; /* Aumentado de 48px para 64px */
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Sombra para melhor legibilidade */
}

.welcome-subtitle {
    font-size: 28px; /* Aumentado de 20px para 28px */
    font-weight: 400;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Sombra para melhor legibilidade */
}

/* ============================================
   LOGO COM NOME - PARTE INFERIOR
   ============================================ */
.login-logo-name {
    position: absolute;
    bottom: 30px; /* Posicionado mais próximo da parte inferior */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; /* Acima do overlay e da imagem */
    text-align: center;
    width: 100%;
    padding: 0 40px;
}

.logo-nome-image {
    max-width: 300px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); /* Sombra para melhor visibilidade */
}

.login-background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: #1B5E20; /* Cor de fallback caso a imagem não carregue */
}

.background-horse-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Usa object-fit para melhor qualidade */
    object-position: center center;
    display: block;
    /* Melhorar qualidade da imagem - renderização otimizada */
    image-rendering: -webkit-optimize-contrast; /* Chrome/Safari */
    image-rendering: crisp-edges; /* Firefox */
    image-rendering: high-quality; /* Melhor qualidade */
    image-rendering: auto; /* Fallback */
    /* Aceleração de hardware para melhor renderização */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    /* Evitar compressão e suavização excessiva */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Forçar renderização de alta qualidade */
    -webkit-perspective: 1000px;
    perspective: 1000px;
    /* Melhorar nitidez */
    filter: contrast(1.05) brightness(1.02); /* Ajuste sutil para melhor definição */
    -webkit-filter: contrast(1.05) brightness(1.02);
}

/* Overlay verde com 60% de opacidade sobre a imagem */
.login-background-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1B5E20; /* Verde principal */
    opacity: 0.6; /* 60% de opacidade */
    z-index: 1;
    pointer-events: none; /* Permite interação com elementos abaixo */
}

/* ============================================
   LADO DIREITO - FORMULÁRIO DE LOGIN
   ============================================ */
.login-right-side {
    width: 50%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    padding: 40px;
    overflow-y: auto;
}

/* Container Principal - Centralizado na parte direita */
.login-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza todos os elementos */
    padding: 0; /* Remover padding que possa desalinhar */
}

/* Garantir que logo e formulário tenham a mesma largura e alinhamento */
.login-branding,
.login-form-container {
    width: 100%;
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================
   ÁREA DE BRANDING (Logo e Nome)
   ============================================ */
.login-branding {
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza em relação aos campos */
    padding: 0; /* Remover qualquer padding que possa desalinhar */
    margin-left: 0;
    margin-right: 0;
}

/* Container da Logo - Centralizado em relação aos campos */
.logo-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Logo - IMAGEM AQUI - Centralizada */
.login-logo {
    max-width: 234px !important; /* 180px + 30% = 234px */
    max-height: 234px !important;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Placeholder da Logo (caso a imagem não carregue) */
.logo-placeholder {
    width: 120px;
    height: 120px;
    display: none;
    align-items: center;
    justify-content: center;
}

.logo-placeholder[style*="display: flex"],
.logo-placeholder[style*="display:block"] {
    display: flex !important;
}

.logo-icon {
    width: 80px;
    height: 80px;
    background-color: #1B5E20;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 40px;
}

/* Nome da Marca */
.brand-name {
    color: #1B5E20;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

/* Tagline */
.brand-tagline {
    color: #1B5E20;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
}

/* ============================================
   FORMULÁRIO DE LOGIN
   ============================================ */
.login-form-container {
    width: 100%;
    background: transparent;
    padding: 0; /* Remover qualquer padding que possa desalinhar */
    margin: 0; /* Remover qualquer margin que possa desalinhar */
}

/* Texto de Prompt */
.login-prompt {
    color: #424242;
    font-size: 16px;
    text-align: center;
    margin: 0 0 30px 0;
    font-weight: 400;
}

/* ============================================
   CAMPOS DE ENTRADA
   ============================================ */
.input-field {
    position: relative !important; /* IMPORTANTE: Para posicionar ícones dentro do campo */
    margin-bottom: 20px !important; /* Espaçamento entre campos */
    width: 100%;
    display: block;
}

/* Espaçamento maior entre o campo Cliente e o botão */
.input-field:last-of-type {
    margin-bottom: 32px !important; /* Espaçamento maior antes do botão */
}

/* Label do Campo (para campo Cliente) - Acima do input */
.field-label {
    display: block;
    color: #424242;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    margin-top: 0;
}

/* Input - Bordas arredondadas - Alta especificidade para sobrescrever AdminLTE */
.login-form-container .input-field .form-control,
.login-container .input-field .form-control,
.input-field .form-control {
    width: 100% !important;
    height: 50px !important;
    padding: 12px 16px 12px 48px !important; /* Padding esquerdo maior para o ícone, direito menor */
    border: 1px solid #E0E0E0 !important;
    border-radius: 16px !important; /* Bordas bem arredondadas */
    background-color: #FFFFFF !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

/* Ajuste para campo com ícone de olho (senha) - padding direito maior */
.input-field:has(.password-toggle) .form-control {
    padding-right: 48px !important; /* Espaço para o ícone de olho à direita */
}

.input-field .form-control::placeholder {
    color: #BDBDBD;
}

.input-field .form-control:focus {
    border-color: #1B5E20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

.input-field .form-control:disabled,
.input-field .form-control[readonly] {
    background-color: #F5F5F5;
    color: #757575;
    cursor: not-allowed;
}

/* Ícone do Input - Dentro do campo, à esquerda */
.input-field .input-icon {
    position: absolute !important;
    left: 16px !important; /* Dentro do campo, no início à esquerda */
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #757575 !important;
    font-size: 18px !important;
    pointer-events: none !important;
    z-index: 10 !important; /* Acima do input */
    line-height: 1 !important;
}

.input-field .form-control:focus ~ .input-icon {
    color: #1B5E20;
}

/* Removido - não há mais label acima dos campos */

/* Botão de Toggle de Senha - Dentro do campo, à direita */
.input-field .password-toggle {
    position: absolute !important;
    right: 16px !important; /* Dentro do campo, na ponta direita */
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important; /* Fundo transparente - sem cinza */
    background-color: transparent !important; /* Garantir fundo transparente */
    border: none !important;
    outline: none !important; /* Remove borda de foco */
    box-shadow: none !important; /* Remove qualquer sombra/borda */
    color: #757575 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important; /* Acima do input */
    transition: color 0.2s ease !important;
    margin: 0 !important;
}

/* Remover borda e fundo quando focado */
.input-field .password-toggle:focus,
.input-field .password-toggle:active,
.input-field .password-toggle:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.password-toggle:hover {
    color: #1B5E20;
}

/* Removido - não há mais label acima dos campos */

/* ============================================
   BOTÃO DE LOGIN
   Botão grande, largura total, verde escuro institucional,
   texto branco, bordas arredondadas, aparência sólida
   Alta especificidade para sobrescrever AdminLTE
   ============================================ */
.login-form-container .btn-login,
.login-container .btn-login,
#loginForm .btn-login,
.btn-login {
    width: 100% !important; /* Largura total do formulário */
    height: 56px !important; /* Botão mais largo/alto */
    background-color: #1B5E20 !important; /* Fundo verde escuro institucional */
    color: #FFFFFF !important; /* Texto branco */
    border: none !important;
    border-radius: 16px !important; /* Bordas bem arredondadas */
    font-size: 16px !important;
    font-weight: 700 !important; /* Negrito */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 0 !important; /* Espaçamento já está no campo anterior */
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.2) !important; /* Aparência sólida com sombra */
}

.login-form-container .btn-login:hover:not(:disabled),
.login-container .btn-login:hover:not(:disabled),
#loginForm .btn-login:hover:not(:disabled),
.btn-login:hover:not(:disabled) {
    background-color: #15501A !important; /* Verde mais escuro no hover */
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3) !important; /* Sombra mais pronunciada */
    transform: translateY(-1px) !important; /* Efeito de elevação sutil */
}

.btn-login:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(27, 94, 32, 0.2);
}

.btn-login:disabled {
    background-color: #BDBDBD;
    color: #FFFFFF; /* Texto branco mesmo quando desabilitado */
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.login-form-container .btn-login .btn-text,
.login-container .btn-login .btn-text,
#loginForm .btn-login .btn-text,
.btn-login .btn-text,
.btn-text {
    display: inline-block !important;
    color: #FFFFFF !important; /* Texto branco garantido */
    font-weight: 700 !important; /* Negrito */
}

/* Spinner de Loading */
.btn-login .spinner-border-sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-color: #FFFFFF transparent #FFFFFF transparent;
}

.btn-login .spinner-border-sm.d-none {
    display: none;
}

/* ============================================
   ALERTAS
   ============================================ */
#alertArea {
    margin-bottom: 20px;
}

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    margin-bottom: 20px;
}

.alert-danger {
    background-color: #F44336;
    color: #FFFFFF;
}

.alert-success {
    background-color: #4CAF50;
    color: #FFFFFF;
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */
/* Responsividade - Tablet e Mobile */
@media (max-width: 992px) {
    /* Em tablets e mobile, voltar ao layout vertical */
    .login-wrapper {
        flex-direction: column;
    }
    
    .login-left-side {
        width: 100%;
        height: 40vh; /* Altura menor em mobile */
    }
    
    .login-right-side {
        width: 100%;
        height: auto;
        min-height: 60vh;
        padding: 20px;
    }
    
    /* Ajustar tamanho do texto de boas-vindas em tablets */
    .welcome-title {
        font-size: 48px; /* Aumentado proporcionalmente */
    }
    
    .welcome-subtitle {
        font-size: 24px; /* Aumentado proporcionalmente */
    }
    
    .login-welcome-text {
        top: 40px;
        padding: 0 20px;
    }
    
    /* Ajustar logo-nome em tablets */
    .login-logo-name {
        bottom: 15px;
        padding: 0 20px;
    }
    
    .logo-nome-image {
        max-width: 250px;
        max-height: 100px;
    }
}

@media (max-width: 576px) {
    .login-container {
        max-width: 100%;
        padding: 0 10px;
    }

    .brand-name {
        font-size: 28px;
    }

    .brand-tagline {
        font-size: 12px;
    }

    .login-logo {
        max-width: 195px !important; /* 150px + 30% = 195px */
        max-height: 195px !important;
    }

    .input-field .form-control {
        height: 48px;
        font-size: 16px; /* Evita zoom no iOS */
    }

    .btn-login {
        height: 48px;
    }
    
    /* Em mobile, esconder completamente o lado da imagem
       e deixar apenas o formulário ocupando a tela inteira */
    .login-wrapper {
        flex-direction: column;
    }

    .login-left-side {
        display: none;
    }
    
    .login-right-side {
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 24px 16px;
    }
    
    /* Centralizar o conteúdo no mobile para parecer uma tela única */
    body.login-page,
    body.hold-transition.login-page,
    .login-page {
        align-items: center !important;
        justify-content: center !important;
        overflow: auto !important;
    }
}

@media (min-width: 768px) {
    .login-container {
        max-width: 450px;
    }
}

/* ============================================
   ANIMAÇÕES
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-branding {
    animation: fadeIn 0.5s ease-out;
}

.login-form-container {
    animation: fadeIn 0.6s ease-out 0.2s both;
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */
.btn-login:focus-visible,
.input-field .form-control:focus-visible {
    outline: 2px solid #1B5E20;
    outline-offset: 2px;
}

/* Remove estilos padrão do AdminLTE que possam interferir */
.login-page .login-box,
body.login-page .login-box,
body.hold-transition.login-page .login-box {
    display: none !important;
}

/* Garante que nosso container seja visível */
.login-container {
    display: flex !important;
}

/* ============================================
   SOBRESCREVER ADMINLTE - REGRAS FINAIS
   Garantir que nossos estilos tenham prioridade
   ============================================ */

/* Sobrescrever qualquer estilo do AdminLTE nos inputs */
.login-page .form-control,
.login-page input[type="text"],
.login-page input[type="password"] {
    border-radius: 16px !important;
}

/* Sobrescrever qualquer estilo do AdminLTE no botão */
.login-page .btn,
.login-page button[type="submit"],
.login-page .btn-primary {
    border-radius: 16px !important;
}

.login-page .btn-login,
.login-page #submitButton {
    width: 100% !important;
    height: 56px !important;
    background-color: #1B5E20 !important;
    color: #FFFFFF !important;
    border-radius: 16px !important;
}