/* Define a cor do texto e das bordas dos botões */
.dt-button {
    color: #4F5059 !important;
    border-color: #4F5059 !important;
}

/* Define a cor de hover dos botões */
.dt-button:hover {
    background-color: #e6e6e6 !important;
}

/* Ajusta o container para os botões e os campos de pesquisa */
.dt-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.dt-buttons {
    display: flex;
    gap: 10px;
}

.search-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ajuste do texto "Mostrar registros" */
.dataTables_length label {
    color: #4F5059 !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dataTables_length select {
    max-width: 60px;
}

.dataTables_filter {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Estilo para garantir que os botões tenham espaçamento */
.dt-button {
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Estilos para o modo mobile */
@media (max-width: 1023px) {
    .dt-container {
        flex-direction: column; /* Empilha os elementos em vez de alinhá-los em linha */
        align-items: center;
    }

    .search-controls {
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
    }

    .dt-buttons {
        margin-bottom: 10px; /* Adiciona um pouco de espaço abaixo dos botões no modo mobile */
    }

    .dataTables_length,
    .dataTables_filter {
        justify-content: center;
        text-align: center;
    }

    .dataTables_length label,
    .dataTables_filter label {
        flex-direction: column; /* Empilha o label e o campo no mobile */
        align-items: center;
    }
}

/* Estilos para o modo tablet em paisagem */
@media (min-width: 1024px) and (max-width: 1280px) {
    .dt-container {
        flex-direction: row; /* Mantém os elementos alinhados em linha como no modo PC */
        justify-content: space-between;
        align-items: center;
    }

    .search-controls {
        justify-content: flex-start; /* Alinha os controles de busca à esquerda */
    }
    
    .dataTables_length,
    .dataTables_filter {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Alinha os elementos à esquerda */
    }

    .dataTables_length label,
    .dataTables_filter label {
        flex-direction: row; /* Alinha os labels e inputs em linha */
    }
}