/* CSS para Portal Transparente do DatePickerRange */

/* 1) Fundo transparente - sem tela branca ou escurecida */
.DateRangePicker_fullScreenPortal,
.DateRangePicker_withPortal,
.SingleDatePicker_picker__portal {
    background: transparent !important;  /* Remove o fundo branco/opaco */
    backdrop-filter: none !important;    /* Remove qualquer blur */
}

/* 2) Posicionar o calendário abaixo da navbar */
.DateRangePicker_picker__portal,
.DateRangePicker_picker {
    top: 80px !important;         /* Ajuste conforme altura da sua navbar */
    left: 50% !important;
    transform: translateX(-50%) !important;  /* Centraliza horizontalmente */
    z-index: 2000 !important;     /* Acima de tudo */
}

/* 3) Estilo do container do calendário */
.DateRangePicker_picker {
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;  /* Sombra mais forte para destaque */
    padding: 15px !important;
}

/* 4) Garantir que as setas de navegação apareçam */
.DayPickerNavigation_button__default,
.DayPickerNavigation_button__horizontal {
    position: absolute !important;
    top: 18px !important;
    width: 36px !important;
    height: 36px !important;
    background: white !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.DayPickerNavigation_leftButton__horizontal {
    left: 22px !important;
}

.DayPickerNavigation_rightButton__horizontal {
    right: 22px !important;
}

/* 5) Hover das setas */
.DayPickerNavigation_button__default:hover,
.DayPickerNavigation_button__horizontal:hover {
    background: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    transform: scale(1.1) !important;
}

/* 6) SVG das setas */
.DayPickerNavigation_svg__horizontal {
    fill: #495057 !important;
    width: 20px !important;
    height: 20px !important;
}

.DayPickerNavigation_button__horizontal:hover .DayPickerNavigation_svg__horizontal {
    fill: white !important;
}

/* 7) Fallback com caracteres se SVG não aparecer */
.DayPickerNavigation_leftButton__horizontal::after {
    content: "‹" !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #495057 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.DayPickerNavigation_rightButton__horizontal::after {
    content: "›" !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #495057 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.DayPickerNavigation_button__horizontal:hover::after {
    color: white !important;
}

/* 8) Melhorar aparência dos meses */
.CalendarMonth_caption {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #212529 !important;
    padding: 12px 0 !important;
    text-align: center !important;
}

/* 9) Estilo dos dias */
.CalendarDay__default {
    border: 1px solid transparent !important;
    color: #212529 !important;
    font-weight: 400 !important;
}

.CalendarDay__default:hover {
    background: #f0f0f0 !important;
    border-radius: 6px !important;
}

.CalendarDay__selected,
.CalendarDay__selected:hover {
    background: var(--bs-primary, #0d6efd) !important;
    color: white !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.CalendarDay__selected_span {
    background: rgba(13, 110, 253, 0.1) !important;
    color: #212529 !important;
}

/* 10) Dias fora do mês */
.CalendarDay__outside {
    color: #adb5bd !important;
}

/* 11) Mobile responsivo */
@media (max-width: 768px) {
    .DateRangePicker_picker__portal {
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        width: calc(100% - 20px) !important;
    }
    
    .DayPicker__horizontal {
        width: 100% !important;
    }
}

/* 12) Remover qualquer overlay escuro */
.DateRangePicker_picker__portal::before,
.DateRangePicker_fullScreenPortal::before {
    display: none !important;
}

/* 13) Garantir que o portal não bloqueie interações quando fechado */
.DateRangePicker:not(.DateRangePicker__open) .DateRangePicker_picker__portal {
    pointer-events: none !important;
}

/* 14) Animação suave de abertura */
.DateRangePicker_picker__portal {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}