/* Importando a fonte Roboto do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative; /* Adicionado para o posicionamento absoluto do background */
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0; /* Coloca o background atrás do conteúdo */
    background-image: url('assets/background.jpeg'); 
    background-size: cover; /* Faz a imagem cobrir todo o container */
    background-position: center; /* Centraliza a imagem */
    opacity: 1; /* Ajusta a opacidade do background (0 a 1) */
}

.main-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background-color: #ffffff;
    position: relative; /* Para manter a ordem correta no z-index */
    z-index: 1; /* Para garantir que o conteúdo fique acima do background */
}

.main-title {
    color: #116837; /* Cor verde */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
    font-weight: 700; /* Negrito */
    font-size: 28px; /* Tamanho da fonte */
    text-align: center; /* Centraliza o texto */
}

.container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 450px;
    margin: 10px;
    transition: transform 0.2s;
}

.list-container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 450px;
    height: 480px;
    margin: 10px;
    transition: transform 0.2s;
}

@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
        align-items: center;
    }

    .container, .list-container {
        width: 90%; /* Ajuste a largura em telas menores */
    }
}

.container:hover, .list-container:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2); /* Aumenta a sombra para um efeito de destaque */
}


h1 {
    color: #116837;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 24px; /* Tamanho de fonte maior para o título */
}

h2 {
    color: #116837;
    margin-bottom: 15px;
    font-weight: 600;
}


label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-weight: 500;
}

input[type="text"], select {
    width: 100%;
    padding: 12px; /* Aumenta o padding para mais conforto */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s; /* Adiciona transição ao box-shadow */
}

input[type="text"]:focus, select:focus {
    border-color: #116837;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5); /* Aumenta o efeito de sombra */
}

button {
    background-color: #116837;
    color: white;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background-color 0.3s, transform 0.2s; /* Adiciona transição no botão */
    margin-top: 20px; /* Espaço maior entre o select e o botão Chamar Motorista */
}

button:hover {
    background-color: #218838;
    transform: translateY(-2px); /* Leve efeito de elevação ao passar o mouse */
}

#lastCalls {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
    max-height: 200px; /* Limita a altura da lista */
    overflow-y: auto;  /* Adiciona rolagem se necessário */
}

#lastCalls li {
    padding: 12px 0; /* Aumenta o padding dos itens da lista */
    border-bottom: 1px solid #ddd;
    color: #333;
}

#lastCalls li strong {
    display: block; /* Coloca o texto em uma nova linha */
    margin-bottom: 5px; /* Espaçamento abaixo do texto em negrito */
    font-weight: 700; /* Negrito mais forte */
}

#lastCalls li:nth-child(even) {
    background-color: #f8f9fa; /* Cor de fundo alternada para a lista */
}

#lastCalls li:hover {
    background-color: #e2e6ea; /* Efeito de destaque ao passar o mouse */
}

#lastCalls button {
    background-color: #116837; /* Cor verde */
    color: white;
    padding: 5px 10px; /* Dimensões menores */
    border: none;
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer;
    font-size: 14px; /* Tamanho da fonte menor */
    transition: background-color 0.3s, transform 0.2s; /* Efeito de transição */
}

#lastCalls button:hover {
    background-color: #218838; /* Cor mais escura ao passar o mouse */
}

#clearListButton {
    background-color: #dc3545; /* Cor vermelha */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
    margin-top: 20px; /* Espaço maior entre o botão Limpar Lista e o botão Exportar Relatório PDF */
}

#clearListButton:hover {
    background-color: #c82333; /* Cor vermelha mais escura ao passar o mouse */
}

#suggestions {
    position: absolute;
    background-color: #ffffff;
    max-height: 200px;
    max-width: 25vw; /* Garante que a caixa não ultrapasse a largura da tela */
    width: calc(100% - 20px); /* Ajuste se necessário para não cortar o conteúdo */
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin-top: 5px;
    padding: 0;
    border: none;
}


/* Estilo dos itens de sugestão */
.suggestion-item {
    padding: 12px 16px; /* Aumenta o espaçamento interno para conforto */
    cursor: pointer; /* Indica que é clicável */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Transição suave ao passar o mouse */
    color: #333; /* Cor do texto padrão */
    font-size: 16px; /* Tamanho da fonte adequado */
}

/* Efeito de hover para itens de sugestão */
.suggestion-item:hover {
    background-color: #e9f5f2; /* Cor de fundo suave ao passar o mouse */
    color: #116837; /* Mudança na cor do texto para melhorar o contraste */
}

/* Efeito de clique (ativo) nos itens de sugestão */
.suggestion-item:active {
    background-color: #d4f0e1; /* Cor de fundo quando o item é clicado */
}

/* Estilo para o texto destacado no item de sugestão */
.suggestion-item strong {
    font-weight: 700; /* Aumenta o peso da fonte para destaque */
    color: #116837; /* Cor verde para destaque, consistente com a paleta */
}

/* Acessibilidade: foco em sugestões */
.suggestion-item:focus {
    outline: none; /* Remove o contorno padrão */
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.5); /* Contorno verde ao focar, melhorando a visibilidade */
    background-color: #f1fff1; /* Fundo levemente diferente para feedback visual */
}

/* Estilo para o scrollbar (opcional, para uma aparência mais limpa) */
#suggestions::-webkit-scrollbar {
    width: 8px; /* Largura do scrollbar */
}

#suggestions::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor de fundo do track do scrollbar */
    border-radius: 10px; /* Bordas arredondadas */
}

#suggestions::-webkit-scrollbar-thumb {
    background: #aaa; /* Cor do thumb do scrollbar */
    border-radius: 10px; /* Bordas arredondadas */
}

#suggestions::-webkit-scrollbar-thumb:hover {
    background: #888; /* Cor do thumb quando o mouse está sobre ele */
}


/* Estilo simplificado para a ajuda da placa */
#plateHelp {
    font-size: 14px; /* Tamanho da fonte */
    color: #555; /* Cor de texto neutra */
    margin-top: 5px; /* Espaçamento acima */
    padding: 4px; /* Espaço interno */
    background-color: transparent; /* Fundo transparente */
    border: none; /* Remove qualquer borda */
    transition: color 0.3s ease; /* Transição suave para a cor */
}

/* Efeito de hover para a ajuda da placa */
#plateHelp:hover {
    color: #116837; /* Altera a cor do texto ao passar o mouse */
}

.form-group {
    margin-bottom: 20px; /* Espaçamento inferior */
    
}


.upload-button {
    display: flex;
    align-items: center;
    background-color: #116837;
    color: white;
    padding: 12px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
    width: 94%;
    margin-top: 20px;
    justify-content: center; /* Centraliza o conteúdo no botão */
}

.upload-button:hover {
    background-color: #218838;
    transform: translateY(-2px); /* Efeito de elevação ao passar o mouse */
}

.upload-icon {
    font-size: 20px;
    margin-right: 10px; /* Espaço entre o ícone e o texto */
    color: white; /* Cor do ícone Excel */
}

input[type="file"] {
    display: none; /* Esconde o input real */
}

.file-name {
    font-size: 16px;                  /* Aumentando um pouco o tamanho da fonte */
    color: #2E7D32;                   /* Cor verde mais escura para visibilidade */
    font-weight: 600;                 /* Peso de fonte mais pesado para dar destaque */
    margin-top: 0px;
                    /* Um pouco mais de espaçamento acima */
    padding: 1px 5px;               /* Espaçamento interno para dar destaque */
    background-color: #E8F5E9;        /* Fundo verde claro para realçar o nome do arquivo */
    border: 1px solid #C8E6C9;        /* Borda suave para envolver o texto */
    border-radius: 6px;               /* Bordas arredondadas */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve para dar um efeito de elevação */
    display: inline-block;            /* Mantém o tamanho do texto sem ocupar a linha inteira */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte moderna */
    opacity: 0;                       /* Inicialmente invisível para a animação */
    transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out; /* Animação suave */
    transform: translateY(-10px);     /* Deslocamento inicial para o efeito de deslizamento */
}

.file-name.visible {
    opacity: 1;                       /* Torna o elemento visível */
    transform: translateY(0);         /* Efeito de deslizamento para a posição original */
}