/* CSS Customizado para Select2 - Tema da aplicação */
/* ATENÇÃO: Estilizar APENAS elementos Select2, NÃO afetar outros elementos */

/* Container principal do Select2 - APENAS nos formulários */
.form-group .select2-container {
  width: 100% !important;
  margin-top: 0px;
}

/* Garantir que apenas selects específicos sejam afetados */
.form-group .select2-container .select2-selection--single {
  /* Estilos específicos para Select2 apenas */
}

/* Estilo do campo selecionado (igual ao input de data) - APENAS nos formulários */
.form-group .select2-container--default .select2-selection--single {
  background: var(--bg-secondary) !important;
  border: 2px solid rgb(255 255 255 / 20%) !important;
  border-radius: 5px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  color: #fff !important;
  font-family: inherit !important;
  padding: 18px 10px 0px !important;
}

/* Texto do campo selecionado - APENAS nos formulários */
.form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  line-height: 60px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 1rem !important;
  margin-top: 0 !important;
}

/* Seta do dropdown - APENAS nos formulários */
.form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 60px !important;
  right: 10px !important;
}

.form-group .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: rgb(255 255 255 / 50%) transparent transparent transparent !important;
  border-style: solid !important;
  border-width: 6px 6px 0 6px !important;
  height: 0 !important;
  left: 50% !important;
  margin-left: -6px !important;
  margin-top: -3px !important;
  position: absolute !important;
  top: 50% !important;
  width: 0 !important;
}

/* Estado de foco - APENAS nos formulários */
.form-group .select2-container--default.select2-container--open .select2-selection--single,
.form-group .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: rgb(255 255 255 / 40%) !important;
  box-shadow: none !important;
}

/* Dropdown - específico para formulários */
.form-group .select2-dropdown {
  background: var(--bg-secondary) !important;
  border: 2px solid rgb(255 255 255 / 20%) !important;
  border-radius: 5px !important;
  margin-top: 2px !important;
}

/* Lista de opções - específico para formulários */
.form-group .select2-results__options {
  max-height: 200px !important;
}

/* Item da lista - específico para formulários */
.form-group .select2-results__option {
  color: #fff !important;
  padding: 12px 15px !important;
  font-size: 1rem !important;
  background: var(--bg-secondary) !important;
}

/* Item destacado (hover) - específico para formulários */
.form-group .select2-results__option--highlighted {
  background-color: rgb(255 255 255 / 10%) !important;
  color: #fff !important;
}

/* Item selecionado - específico para formulários */
.form-group .select2-results__option[aria-selected="true"] {
  background-color: rgb(255 255 255 / 20%) !important;
  color: #fff !important;
}

/* Placeholder - específico para formulários */
.form-group .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgb(255 255 255 / 50%) !important;
}

/* Seta quando aberto - específico para formulários */
.form-group .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent rgb(255 255 255 / 50%) transparent !important;
  border-width: 0 6px 6px 6px !important;
}

/* Remove outline padrão - específico para formulários */
.form-group .select2-container--default .select2-selection--single:focus {
  outline: none !important;
}

/* Estilo responsivo - específico para formulários */
@media (max-width: 768px) {
  .form-group .select2-container--default .select2-selection--single {
    height: 60px !important;
  }

  .form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 60px !important;
  }

  .form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 60px !important;
  }
}

/* Ajustar espaçamento para labels específicos */
.form-group label[for="filterStatus"],
.form-group label[for="filterLoterie"],
.form-group label[for="inputData"] {
  position: absolute !important;
  top: 8px !important;
  left: 15px !important;
  color: rgb(255 255 255 / 50%) !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  display: block !important;
  z-index: 10 !important;
}

/* Select de data com estilo igual aos outros selects - específico */
.form-group #inputData_rendered {
  background: var(--bg-secondary) !important;
  border: 2px solid rgb(255 255 255 / 20%) !important;
  border-radius: 5px !important;
  height: 60px !important;
  color: #fff !important;
  padding: 18px 10px 0px !important;
}

/* Ocultar a aparência do select original quando Select2 está ativo */
.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}