/* =============================================================================
   Dark Theme CSS
   -----------------------------------------------------------------------------
   Sobrescreve variáveis e classes do Bootstrap para modo escuro com destaques
   em amarelo. Ajuste conforme preferência para personalizar toda a interface.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Variáveis customizadas (sobrescrevem as do Bootstrap).
   Você pode ajustá-las conforme desejar.
----------------------------------------------------------------------------- */
:root {
  /* Cor de fundo principal */
  --bs-body-bg: #121212;
  /* Cor de texto primário */
  --bs-body-color: #f2f2f2;

  /* Cor principal (amarelo) para links e elementos */
  --bs-primary: #ffcc00;
  /* Cores de link */
  --bs-link-color: #ffcc00;
  --bs-link-hover-color: #ffda33;

  /* Exemplo de cor de alerta (caso queira customizar) */
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
}

/* -----------------------------------------------------------------------------
   Remove margens/padding padrões e deixa o body livre
   (removido min-height e overflow forçado para evitar rolagem extra)
----------------------------------------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Ajuste nas seções internas, caso queira margens/padding diferenciados */
section {
  margin-bottom: 2rem;
}

/* -----------------------------------------------------------------------------
   Navbar
----------------------------------------------------------------------------- */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
  color: var(--bs-link-color) !important;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--bs-link-hover-color) !important;
}

/* ------------------------------------.form-control:focus {-----------------------------------------
   Botões primários em amarelo
----------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #000 !important; /* Texto em preto */
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-link-hover-color) !important;
  border-color: var(--bs-link-hover-color) !important;
  color: #000 !important; /* Mantém texto em preto ao hover/focus */
}

/* Exemplo de botões secundários (se quiser outro tom) 
.btn-secondary {
  background-color: #444 !important;
  border-color: #444 !important;
  color: #fff;
}
.btn-secondary:hover {
  background-color: #555 !important;
} */

/* -----------------------------------------------------------------------------
   Formulários
----------------------------------------------------------------------------- */

/* Labels de formulário em cor sutil */
.form-label {
  color: #cfcfcf !important;
}

/* Inputs com fundo escuro e texto claro */
.form-control {
  background-color: #2a2a2a !important;
  border: 1px solid #444 !important;
  color: #f2f2f2 !important;
}
.form-control:focus {
  background-color: #2f2f2f !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 204, 0, 0.25);
}

/* Ajuste na visibilidade do placeholder */
.form-control::placeholder {
  color: #bbb !important;
  opacity: 1 !important; /* Alguns navegadores aplicam opacidade reduzida */
}

.form-control::-webkit-input-placeholder {
  color: #bbb !important;
  opacity: 1 !important;
}

.form-control:-moz-placeholder {
  color: #bbb !important;
  opacity: 1 !important;
}

.form-control::-moz-placeholder {
  color: #bbb !important;
  opacity: 1 !important;
}

.form-control:-ms-input-placeholder {
  color: #bbb !important;
  opacity: 1 !important;
}

.form-control::-ms-input-placeholder {
  color: #bbb !important;
  opacity: 1 !important;
}


/* -----------------------------------------------------------------------------
   Links
----------------------------------------------------------------------------- */
a, a:visited {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* -----------------------------------------------------------------------------
   Cartões, containers "bg-white", etc. (Bootstrap default)
   Aqui forçamos um tom de cinza escuro em vez de branco.
----------------------------------------------------------------------------- */
.bg-white {
  background-color: #1f1f1f !important;
  color: #f2f2f2 !important;
  border: 1px solid #444 !important;
}

.bg-light {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Caso use .card de bootstrap, podemos customizar: */
.card {
  background-color: #1f1f1f;
  border-color: #444;
}
.card .card-title,
.card .card-text {
  color: #f2f2f2;
}

/* -----------------------------------------------------------------------------
   Alertas (Bootstrap .alert classes)
   Ex.: se quiser alterar .alert-danger, .alert-warning etc.
----------------------------------------------------------------------------- */
.alert {
  background-color: #2f2f2f;
  border: 1px solid #444;
  color: #f2f2f2;
}
.alert-danger {
  background-color: #4f1212;
  color: #f7dada;
  border-color: #832525;
}
.alert-warning {
  background-color: #4f4f12;
  color: #f7f7da;
  border-color: #838325;
}

/* -----------------------------------------------------------------------------
   Componentes adicionais
----------------------------------------------------------------------------- */

/* =================== INÍCIO: Overrides para o Select2 no tema escuro =================== */

/* Contêiner principal do Select2 para seleção única */
.select2-container--default .select2-selection--single {
  background-color: #2a2a2a;
  border: 1px solid #555 !important; /* Borda um pouco mais clara para destaque */
  border-radius: 0.25rem;
  min-height: 2.5rem; /* Altura mínima ajustada */
  padding: 0.5rem 0.75rem; /* Padding para melhor centralização vertical */
  color: #f2f2f2;
  display: flex;
  align-items: center;
}

/* Texto renderizado dentro do Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f2f2f2;
  line-height: 1.5;
}

/* Ícone da seta do Select2 – centralizado verticalmente */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
  display: flex;
  align-items: center;
}

/* Lista de opções do dropdown */
.select2-container--default .select2-results__option {
  background-color: #2a2a2a;
  color: #f2f2f2;
  padding: 0.5rem;
}

/* Opção destacada (hover ou selecionada) – use amarelo e fonte preta */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #ffcc00 !important;
  color: #000 !important;
}

/* Opcional: se desejar que a opção selecionada (mesmo quando não estiver em hover) tenha o mesmo destaque */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #ffcc00 !important;
  color: #000 !important;
}

/* Caso for utilizada seleção múltipla */
.select2-container--default .select2-selection--multiple {
  background-color: #2a2a2a;
  border: 1px solid #555 !important;
  border-radius: 0.25rem;
  padding: 0.25rem;
  color: #f2f2f2;
}

/* Cada item selecionado em múltipla seleção */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #555 !important;
  border: 1px solid #777 !important;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
  color: #f2f2f2 !important;
  margin-top: 0.25rem;
}

/* =================== FIM: Overrides para o Select2 no tema escuro =================== */

/* Ajustar cor de texto no input type="file" */
input[type="file"] {
  color: #f2f2f2; /* deixa o texto do “nome do arquivo” claro */
}

/* Personalizar o botão “Choose file” no Chrome e navegadores baseados em WebKit */
input[type="file"]::-webkit-file-upload-button {
  color: #fff; /* cor do texto no botão */
  background-color: #2a2a2a;
  border: 1px solid #444;
  padding: 0.5rem;
  cursor: pointer;
}