.datepicker-dropdown-sm {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 3000;
    max-width: 400px;
    min-width: 320px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 1rem;
    margin-top: 0.5rem;
}

.datepicker-dropdown-sm.show {
    display: flex;
    flex-direction: column; /* Organiza os elementos em coluna */
}
.datepicker-dropdown-sm.show {
    animation: fadeIn 0.3s ease-out;
}

.datepicker-months,
.datepicker-days,
.datepicker-years {
    flex: 1;
    /* padding: 0 1rem; */
    /* margin-bottom: 1rem; */
    padding-right: 6px;
    padding-left: 6px;
}

.month-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

/* A regra .day-list foi removida pois agora aplicamos o grid diretamente em .days */

.month-list button,
.day-list button {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    padding: 5px;
}

@media (max-width: 576px) {
    .datepicker-dropdown-sm {
        max-width: none;
        border-radius: 0.25rem 0.25rem 0 0;
    }

    .month-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .days {
        grid-template-columns: repeat(7, 1fr);
    }
}

.datepicker-dropdown-sm h6 {
    margin-bottom: 0.5rem;
    color: #6c757d;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #6c757d;
    color: #fff;
}

.btn-outline-secondary[aria-selected="true"],
.btn-outline-secondary.active {
    background-color: #6c757d;
    color: #fff;
}

.input-group-text {
    cursor: pointer;
}

.input-group-text:hover {
    background-color: #e9ecef;
}

.datepicker-years {
    margin-top: 1rem;
}

.datepicker-years .year-input {
    width: 100%;
    text-align: center;
}

.weekdays {
    margin: 0 0 0.5rem 0;
    padding: 10px 0;
    background-color: #f0f0f0; /* Cor de fundo cinza claro */
    border-radius: 0.25rem;
}

.weekdays li {
    display: inline-block;
    width: 12.6%;
    color: #666;
    text-align: center;
}

/* **MODIFICADO**: Convertido para layout de grelha para um espaçamento perfeito */
.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem; /* Controla o espaçamento vertical e horizontal entre os dias */
    padding: 10px 0;
    margin: 0;
}

/* **MODIFICADO**: Simplificado, pois o grid e o gap controlam o layout */
.days li {
    list-style-type: none;
    text-align: center;
    font-size: 12px;
    color: #777;
    /* A largura, margens e display:inline-block foram removidos */
}

/* Estilo para Sábado e Domingo */
.days li.weekend-day {
    background-color: #e6e6e6; /* Cinza bem clarinho */
}

/* Estilo para dias especiais (definido depois para ter prioridade sobre o fim de semana) */
.days li.special-day {
    background-color: #e9ecef; /* Cinza claro */
    font-weight: bold;
    color: #495057;
}

/* Estilo para dia ativo/selecionado (definido por último para ter a maior prioridade) */
.days li.active {
    background-color: #007bff; /* Cor para o dia ativo */
    color: white; /* Cor do texto para o dia ativo */
    border-radius: 5px; /* Borda arredondada */
}

.datepicker-header {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente todos os elementos */
    align-items: center; /* Centraliza verticalmente */
    padding: 10px; /* Adiciona um pouco de espaço ao redor */
}

.current-month-year {
    margin: 0 20px; /* Adiciona margens laterais para espaçamento */
    text-align: center; /* Centraliza o texto */
    font-weight: bold; /* Aumenta a espessura da fonte, se desejado */
    flex: 1; /* Permite que o span ocupe o espaço restante */
}


#previous-icon {
    color: rgb(109, 110, 110);
    display: inline;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
}

#previous-icon:hover {
    color: rgb(0, 123, 255); /* Altera a cor do ícone ao passar o mouse */
    transform: scale(1.1); /* Aumenta levemente o ícone */
}

#next-icon {
    color: rgb(109, 110, 110);
    display: inline;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
}

#next-icon:hover {
    color: rgb(0, 123, 255); /* Altera a cor do ícone ao passar o mouse */
    transform: scale(1.1); /* Aumenta levemente o ícone */
}



.datepicker-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

.datepicker-footer .today-btn {
    background: none;
    border: none;
    color: #666; /* Cor do texto padrão */
    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.3s ease;
    border-radius: 16px !important;
    padding-left: 15px; /* Adiciona um pouco de espaço à esquerda */
    padding-right: 15px; /* Adiciona um pouco de espaço à direita */
}

.datepicker-footer .today-btn:hover {
    border-radius: 20px !important;
    border: 1px solid #999 !important;    
    background: none; /* Sem fundo mesmo ao hover */
}


/* Aplica fundo branco a .form-control com a classe smDatePicker */
.form-control.smDatePicker:disabled, 
.form-control.smDatePicker[readonly] {
    background-color: #fff;
}

.weekdays {
    display: flex;
    gap: 5px;
    padding-left: 3px;
}

.input-inner-icon-date.right
{
    right: 0.5rem;
}

.input-inner-icon-date.left
{
    left: 0.5rem;
}