/* Força exibição das setas de navegação no DatePickerRange */

/* SOLUÇÃO DEFINITIVA: Tornar as setas sempre visíveis */

/* 1. Forçar display dos botões de navegação */
.DayPickerNavigation button,
.DayPickerNavigation_button,
.DayPickerNavigation_button__horizontal,
.DayPickerNavigation_button__horizontalDefault,
.DayPickerNavigation_button__default,
.DayPickerNavigation_leftButton__horizontal,
.DayPickerNavigation_rightButton__horizontal,
button[aria-label*="Previous"],
button[aria-label*="Next"],
button[aria-label*="Move backward"],
button[aria-label*="Move forward"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
    width: 40px !important;
    height: 40px !important;
    position: absolute !important;
    top: 15px !important;
    z-index: 10 !important;
    cursor: pointer !important;
    background: white !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

/* 2. Posicionamento específico das setas */
.DayPickerNavigation_leftButton__horizontal,
button[aria-label*="Previous"],
button[aria-label*="backward"] {
    left: 22px !important;
}

.DayPickerNavigation_rightButton__horizontal,
button[aria-label*="Next"],
button[aria-label*="forward"] {
    right: 22px !important;
}

/* 3. Adicionar caracteres como conteúdo SEMPRE visível */
.DayPickerNavigation_leftButton__horizontal::before,
button[aria-label*="Previous"]::before,
button[aria-label*="backward"]::before {
    content: "‹" !important;
    font-size: 28px !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;
    z-index: 11 !important;
    display: block !important;
}

.DayPickerNavigation_rightButton__horizontal::before,
button[aria-label*="Next"]::before,
button[aria-label*="forward"]::before {
    content: "›" !important;
    font-size: 28px !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;
    z-index: 11 !important;
    display: block !important;
}

/* 4. Hover effects */
.DayPickerNavigation button:hover,
.DayPickerNavigation_button:hover,
.DayPickerNavigation_button__horizontal:hover,
button[aria-label*="Previous"]:hover,
button[aria-label*="Next"]:hover {
    background: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    transform: scale(1.1) !important;
}

.DayPickerNavigation button:hover::before,
.DayPickerNavigation_button:hover::before,
button[aria-label*="Previous"]:hover::before,
button[aria-label*="Next"]:hover::before {
    color: white !important;
}

/* 5. Esconder SVGs nativos se existirem (para não duplicar) */
.DayPickerNavigation_svg__horizontal,
.DayPickerNavigation_svg__horizontalDefault,
.DayPickerNavigation button svg {
    display: none !important;
}

/* 6. Container de navegação sempre visível */
.DayPickerNavigation,
.DayPickerNavigation__horizontal,
.DayPickerNavigation__horizontalDefault {
    position: relative !important;
    height: 50px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 7. Garantir que o header do mês seja visível */
.CalendarMonth_caption {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 10px 50px !important; /* Espaço para as setas */
    text-align: center !important;
    color: #212529 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 8. Container do calendário */
.DayPicker__horizontal,
.DayPicker__verticalScrollable {
    position: relative !important;
    padding-top: 10px !important;
}

/* 9. Fallback: Criar setas com CSS puro se nada funcionar */
.DayPicker__horizontal::before {
    content: "‹" !important;
    position: absolute !important;
    left: 22px !important;
    top: 15px !important;
    width: 40px !important;
    height: 40px !important;
    background: white !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #495057 !important;
    cursor: pointer !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.DayPicker__horizontal::after {
    content: "›" !important;
    position: absolute !important;
    right: 22px !important;
    top: 15px !important;
    width: 40px !important;
    height: 40px !important;
    background: white !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #495057 !important;
    cursor: pointer !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

/* 10. Debug: Mostrar onde deveria estar o botão */
.DayPickerNavigation {
    border: 2px dashed red !important; /* Remova após confirmar que funciona */
}

/* 11. Forçar visibilidade mesmo com opacity 0 */
* [style*="opacity: 0"] {
    opacity: 1 !important;
}

/* 12. Garantir clicabilidade */
.DayPickerNavigation * {
    pointer-events: auto !important;
}