/* Configurações de cores e fontes */
:root {
  --whiteColorC: #ffffff;
  --goldColorC: #ab9202; /* Dourado */
  --darkGrayC: #444444; /* Cinza escuro para sombra profunda */
  --lightGrayC: #cccccc; /* Cinza claro para sombra elevada */
  --dangerColor02: #a91524; /* Vermelho mais escuro para botões de perigo */
}

/* Estilo do campo de entrada */
#orientacao-suggestions,
#artista-suggestions,
#organizador-suggestions,
#local-suggestions,
#viatura-suggestions,
#militar-cnh-suggestions {
  max-height: 200px; /* Limita a altura máxima para o dropdown */
  overflow-y: auto; /* Permite rolagem se a lista for muito longa */
  background-color: var(
    --darkBodyBgColor
  ); /* Fundo branco forçado para a lista */
  border: 1px solid #a4a2a2a3; /* Borda fina e sutil */
  border-radius: 0.25rem; /* Borda arredondada */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  opacity: 1 !important; /* Garante que não haja transparência */
  z-index: 1000;
}

#orientacao-suggestions .list-group-item,
#artista-suggestions .list-group-item,
#organizador-suggestions .list-group-item,
#local-suggestions .list-group-item,
#viatura-suggestions .list-group-item,
#militar-cnh-suggestions .list-group-item {
  padding-top: 0.375rem;
  padding-right: 2.25rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  cursor: pointer; /* Muda o cursor para indicar que é clicável */
  background-color: var(--darkBodyBgColor);
  color: var(--whiteColor) !important; /* Cor do texto */
  border: none !important; /* Remove as bordas internas */
  /* background-color: #ffffff; Fundo branco para cada item */
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease; /* Suaviza a transição */
}

#orientacao-suggestions .list-group-item:hover,
#artista-suggestions .list-group-item:hover,
#organizador-suggestions .list-group-item:hover,
#local-suggestions .list-group-item:hover,
#viatura-suggestions .list-group-item:hover,
#militar-cnh-suggestions .list-group-item:hover {
  background-color: var(
    --mainColor
  ) !important; /* Fundo mais claro ao passar o mouse */
  /* transform: translateY(-2px); /* Eleva ligeiramente o item */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); Adiciona uma sombra mais pronunciada */
}

#orientacao-suggestions .list-group-item.active,
#artista-suggestions .list-group-item.active,
#organizador-suggestions .list-group-item.active,
#local-suggestions .list-group-item.active,
#viatura-suggestions .list-group-item.active,
#militar-cnh-suggestions .list-group-item.active {
  background-color: #0d6efd !important; /* Cor de fundo ativa */
  color: #fff; /* Cor do texto ativa */
}

/* Estilo padrão do campo */
#viatura,
#militar_nome {
  transition: box-shadow 0.3s ease;
}

/* Estilo quando o nome está selecionado e o campo está readonly */
#viatura.selected-item,
#militar_nome.selected-item {
  box-shadow: 0 0 5px var(--successColor);
  background-color: var(--darkBodyBgColor) !important;
}

/* Estilo do botão "x" para limpar a seleção */
.clear-button {
  cursor: pointer;
  margin-left: 8px; /* Espaçamento entre o campo e o botão "x" */
  color: var(--dangerColor) !important; /* Cor vermelha para o botão */
  font-size: 1.25rem; /* Tamanho do "x" */
  vertical-align: middle; /* Alinha verticalmente com o input */
  transition: color 0.3s ease; /* Transição suave na cor ao passar o mouse */
}

/* Estilo para quando o usuário passa o mouse sobre o "x" */
.clear-button:hover {
  color: var(--dangerColor02) !important; /* Escurece a cor ao passar o mouse */
}