:root {
    --primary-color: #444444;       /* Cinza escuro como cor primária */
    --secondary-color: #7FFFD4;    /* Verde água como cor secundária */
    --text-color: white;           /* Cor do texto */
    --accent-color: #00ffff;       /* Cor de destaque */
  }
  
  .Select-control {
    background-color: var(--primary-color) !important;
    color: var(--text-color);
  }
  
  .Select-menu-outer {
    background-color: var(--primary-color);
    color: var(--text-color);
  }
  
  .Select-value-label {
    color: var(--text-color) !important;
  }
  
  .DateRangePickerInput {
    background-color: var(--primary-color) !important;
    color: var(--text-color);
  }
  
  .DateInput_input {
    background-color: var(--primary-color) !important;
    color: var(--text-color);
  }
  
  /* Estilos para dias selecionados usando cor secundária */
  .CalendarDay__selected, 
  .CalendarDay__selected:active, 
  .CalendarDay__selected:hover {
    background: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--primary-color) !important;
  }
  
  .CalendarDay__selected_span {
    background: rgba(127, 255, 212, 0.3) !important; /* Versão mais clara do secundário */
    border: 1px solid var(--secondary-color) !important;
    color: var(--text-color) !important;
  }
  
  .CalendarMonthGrid,
  .CalendarDay__default,
  .DayPicker__withBorder, 
  .DayPicker_weekHeader, 
  .CalendarMonth {
    background-color: var(--primary-color);
    color: var(--text-color);
  }
  
  .CalendarMonth_caption,
  .DayPicker_weekHeader {
    color: var(--text-color);
  }
  
  .DayPickerNavigation_button__default {
    border: 1px solid var(--accent-color) !important;
    background-color: var(--primary-color);
  }
  
  .DayPickerNavigation_button__default:hover {
    background-color: var(--secondary-color);
  }

  .display-4 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #7FFFD4;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.loading-overlay {
    position: fixed; /* Cobre a tela inteira */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Garante que fique por cima de tudo */
    
    /* Centraliza o spinner */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Efeito de vidro fosco no fundo */
    background-color: rgba(0, 0, 0, 0.2); /* Cor de fundo semi-transparente */
    backdrop-filter: blur(2px); /* O efeito de desfoque! */
    -webkit-backdrop-filter: blur(2px); /* Para compatibilidade com Safari */
}

.blur-content {
    filter: blur(2px);
    pointer-events: none; /* Impede cliques no conteúdo desfocado */
    transition: filter 0.2s ease-in-out; /* Transição suave */
}